You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
// Copyright (C) 2020 Intel Corporation
|
|
//
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
import React from 'react';
|
|
import { Row, Col } from 'antd/lib/grid';
|
|
import Icon from 'antd/lib/icon';
|
|
import Button from 'antd/lib/button';
|
|
import Text from 'antd/lib/typography/Text';
|
|
|
|
|
|
interface Props {
|
|
labelName: string;
|
|
labelColor: string;
|
|
visible: boolean;
|
|
statesHidden: boolean;
|
|
statesLocked: boolean;
|
|
hideStates(): void;
|
|
showStates(): void;
|
|
lockStates(): void;
|
|
unlockStates(): void;
|
|
}
|
|
|
|
function LabelItemComponent(props: Props): JSX.Element {
|
|
const {
|
|
labelName,
|
|
labelColor,
|
|
visible,
|
|
statesHidden,
|
|
statesLocked,
|
|
hideStates,
|
|
showStates,
|
|
lockStates,
|
|
unlockStates,
|
|
} = props;
|
|
|
|
return (
|
|
<Row
|
|
type='flex'
|
|
align='middle'
|
|
justify='space-around'
|
|
className='cvat-objects-sidebar-label-item'
|
|
style={{ display: visible ? 'flex' : 'none' }}
|
|
>
|
|
<Col span={4}>
|
|
<Button style={{ background: labelColor }} className='cvat-label-item-color-button' />
|
|
</Col>
|
|
<Col span={14}>
|
|
<Text strong className='cvat-text'>{labelName}</Text>
|
|
</Col>
|
|
<Col span={3}>
|
|
{ statesLocked
|
|
? <Icon type='lock' onClick={unlockStates} />
|
|
: <Icon type='unlock' onClick={lockStates} />}
|
|
</Col>
|
|
<Col span={3}>
|
|
{ statesHidden
|
|
? <Icon type='eye-invisible' onClick={showStates} />
|
|
: <Icon type='eye' onClick={hideStates} />}
|
|
</Col>
|
|
</Row>
|
|
);
|
|
}
|
|
|
|
export default React.memo(LabelItemComponent);
|