|
|
|
@ -35,73 +35,76 @@ type Props = FormComponentProps & {
|
|
|
|
onSubmit: (label: Label | null) => void;
|
|
|
|
onSubmit: (label: Label | null) => void;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
interface State {
|
|
|
|
class LabelForm extends React.PureComponent<Props, {}> {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class LabelForm extends React.PureComponent<Props, State> {
|
|
|
|
|
|
|
|
private continueAfterSubmit: boolean;
|
|
|
|
private continueAfterSubmit: boolean;
|
|
|
|
|
|
|
|
|
|
|
|
constructor(props: Props) {
|
|
|
|
constructor(props: Props) {
|
|
|
|
super(props);
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
|
|
|
|
this.continueAfterSubmit = false;
|
|
|
|
this.continueAfterSubmit = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private handleSubmit = (e: React.FormEvent) => {
|
|
|
|
private handleSubmit = (e: React.FormEvent): void => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.form.validateFields((error, values) => {
|
|
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
|
|
|
form,
|
|
|
|
|
|
|
|
label,
|
|
|
|
|
|
|
|
onSubmit,
|
|
|
|
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
form.validateFields((error, values): void => {
|
|
|
|
if (!error) {
|
|
|
|
if (!error) {
|
|
|
|
this.props.onSubmit({
|
|
|
|
onSubmit({
|
|
|
|
name: values.labelName,
|
|
|
|
name: values.labelName,
|
|
|
|
id: this.props.label ? this.props.label.id : idGenerator(),
|
|
|
|
id: label ? label.id : idGenerator(),
|
|
|
|
attributes: values.keys.map((key: number, index: number) => {
|
|
|
|
attributes: values.keys.map((key: number, index: number): Attribute => (
|
|
|
|
return {
|
|
|
|
{
|
|
|
|
name: values.attrName[key],
|
|
|
|
name: values.attrName[key],
|
|
|
|
type: values.type[key],
|
|
|
|
type: values.type[key],
|
|
|
|
mutable: values.mutable[key],
|
|
|
|
mutable: values.mutable[key],
|
|
|
|
id: this.props.label && index < this.props.label.attributes.length
|
|
|
|
id: label && index < label.attributes.length
|
|
|
|
? this.props.label.attributes[index].id : key,
|
|
|
|
? label.attributes[index].id : key,
|
|
|
|
values: Array.isArray(values.values[key])
|
|
|
|
values: Array.isArray(values.values[key])
|
|
|
|
? values.values[key] : [values.values[key]]
|
|
|
|
? values.values[key] : [values.values[key]],
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
)),
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.props.form.resetFields();
|
|
|
|
form.resetFields();
|
|
|
|
|
|
|
|
|
|
|
|
if (!this.continueAfterSubmit) {
|
|
|
|
if (!this.continueAfterSubmit) {
|
|
|
|
this.props.onSubmit(null);
|
|
|
|
onSubmit(null);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
private addAttribute = () => {
|
|
|
|
private addAttribute = (): void => {
|
|
|
|
const { form } = this.props;
|
|
|
|
const { form } = this.props;
|
|
|
|
const keys = form.getFieldValue('keys');
|
|
|
|
const keys = form.getFieldValue('keys');
|
|
|
|
const nextKeys = keys.concat(idGenerator());
|
|
|
|
const nextKeys = keys.concat(idGenerator());
|
|
|
|
form.setFieldsValue({
|
|
|
|
form.setFieldsValue({
|
|
|
|
keys: nextKeys,
|
|
|
|
keys: nextKeys,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
private removeAttribute = (key: number) => {
|
|
|
|
private removeAttribute = (key: number): void => {
|
|
|
|
const { form } = this.props;
|
|
|
|
const { form } = this.props;
|
|
|
|
const keys = form.getFieldValue('keys');
|
|
|
|
const keys = form.getFieldValue('keys');
|
|
|
|
form.setFieldsValue({
|
|
|
|
form.setFieldsValue({
|
|
|
|
keys: keys.filter((_key: number) => _key !== key),
|
|
|
|
keys: keys.filter((_key: number) => _key !== key),
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
private renderAttributeNameInput(key: number, attr: Attribute | null) {
|
|
|
|
private renderAttributeNameInput(key: number, attr: Attribute | null): JSX.Element {
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const value = attr ? attr.name : '';
|
|
|
|
const value = attr ? attr.name : '';
|
|
|
|
|
|
|
|
const { form } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Col span={5}>
|
|
|
|
<Col span={5}>
|
|
|
|
<Form.Item hasFeedback> {
|
|
|
|
<Form.Item hasFeedback>
|
|
|
|
this.props.form.getFieldDecorator(`attrName[${key}]`, {
|
|
|
|
{form.getFieldDecorator(`attrName[${key}]`, {
|
|
|
|
initialValue: value,
|
|
|
|
initialValue: value,
|
|
|
|
rules: [{
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
@ -110,42 +113,54 @@ class LabelForm extends React.PureComponent<Props, State> {
|
|
|
|
pattern: patterns.validateAttributeName.pattern,
|
|
|
|
pattern: patterns.validateAttributeName.pattern,
|
|
|
|
message: patterns.validateAttributeName.message,
|
|
|
|
message: patterns.validateAttributeName.message,
|
|
|
|
}],
|
|
|
|
}],
|
|
|
|
})(<Input disabled={locked} placeholder='Name'/>)
|
|
|
|
})(<Input disabled={locked} placeholder='Name' />)}
|
|
|
|
} </Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderAttributeTypeInput(key: number, attr: Attribute | null) {
|
|
|
|
private renderAttributeTypeInput(key: number, attr: Attribute | null): JSX.Element {
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const type = attr ? attr.type.toUpperCase() : AttributeType.SELECT;
|
|
|
|
const type = attr ? attr.type.toUpperCase() : AttributeType.SELECT;
|
|
|
|
|
|
|
|
const { form } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Col span={4}>
|
|
|
|
<Col span={4}>
|
|
|
|
<Form.Item>
|
|
|
|
<Form.Item>
|
|
|
|
<Tooltip overlay='An HTML element representing the attribute'>
|
|
|
|
<Tooltip overlay='An HTML element representing the attribute'>
|
|
|
|
{this.props.form.getFieldDecorator(`type[${key}]`, {
|
|
|
|
{ form.getFieldDecorator(`type[${key}]`, {
|
|
|
|
initialValue: type,
|
|
|
|
initialValue: type,
|
|
|
|
})(
|
|
|
|
})(
|
|
|
|
<Select disabled={locked}>
|
|
|
|
<Select disabled={locked}>
|
|
|
|
<Select.Option value={AttributeType.SELECT}> Select </Select.Option>
|
|
|
|
<Select.Option value={AttributeType.SELECT}>
|
|
|
|
<Select.Option value={AttributeType.RADIO}> Radio </Select.Option>
|
|
|
|
Select
|
|
|
|
<Select.Option value={AttributeType.CHECKBOX}> Checkbox </Select.Option>
|
|
|
|
</Select.Option>
|
|
|
|
<Select.Option value={AttributeType.TEXT}> Text </Select.Option>
|
|
|
|
<Select.Option value={AttributeType.RADIO}>
|
|
|
|
<Select.Option value={AttributeType.NUMBER}> Number </Select.Option>
|
|
|
|
Radio
|
|
|
|
</Select>
|
|
|
|
</Select.Option>
|
|
|
|
)
|
|
|
|
<Select.Option value={AttributeType.CHECKBOX}>
|
|
|
|
}</Tooltip>
|
|
|
|
Checkbox
|
|
|
|
|
|
|
|
</Select.Option>
|
|
|
|
|
|
|
|
<Select.Option value={AttributeType.TEXT}>
|
|
|
|
|
|
|
|
Text
|
|
|
|
|
|
|
|
</Select.Option>
|
|
|
|
|
|
|
|
<Select.Option value={AttributeType.NUMBER}>
|
|
|
|
|
|
|
|
Number
|
|
|
|
|
|
|
|
</Select.Option>
|
|
|
|
|
|
|
|
</Select>,
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderAttributeValuesInput(key: number, attr: Attribute | null) {
|
|
|
|
private renderAttributeValuesInput(key: number, attr: Attribute | null): JSX.Element {
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const existedValues = attr ? attr.values : [];
|
|
|
|
const existedValues = attr ? attr.values : [];
|
|
|
|
|
|
|
|
const { form } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
const validator = (_: any, values: string[], callback: any) => {
|
|
|
|
const validator = (_: any, values: string[], callback: any): void => {
|
|
|
|
if (locked && existedValues) {
|
|
|
|
if (locked && existedValues) {
|
|
|
|
if (!equalArrayHead(existedValues, values)) {
|
|
|
|
if (!equalArrayHead(existedValues, values)) {
|
|
|
|
callback('You can only append new values');
|
|
|
|
callback('You can only append new values');
|
|
|
|
@ -159,11 +174,11 @@ class LabelForm extends React.PureComponent<Props, State> {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
callback();
|
|
|
|
callback();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Form.Item>
|
|
|
|
<Form.Item>
|
|
|
|
{ this.props.form.getFieldDecorator(`values[${key}]`, {
|
|
|
|
{ form.getFieldDecorator(`values[${key}]`, {
|
|
|
|
initialValue: existedValues,
|
|
|
|
initialValue: existedValues,
|
|
|
|
rules: [{
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
@ -174,37 +189,41 @@ class LabelForm extends React.PureComponent<Props, State> {
|
|
|
|
})(
|
|
|
|
})(
|
|
|
|
<Select
|
|
|
|
<Select
|
|
|
|
mode='tags'
|
|
|
|
mode='tags'
|
|
|
|
dropdownMenuStyle={{display: 'none'}}
|
|
|
|
dropdownMenuStyle={{ display: 'none' }}
|
|
|
|
placeholder='Attribute values'
|
|
|
|
placeholder='Attribute values'
|
|
|
|
/>
|
|
|
|
/>,
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderBooleanValueInput(key: number, attr: Attribute | null) {
|
|
|
|
private renderBooleanValueInput(key: number, attr: Attribute | null): JSX.Element {
|
|
|
|
const value = attr ? attr.values[0] : 'false';
|
|
|
|
const value = attr ? attr.values[0] : 'false';
|
|
|
|
|
|
|
|
const { form } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Form.Item>
|
|
|
|
<Form.Item>
|
|
|
|
{ this.props.form.getFieldDecorator(`values[${key}]`, {
|
|
|
|
{ form.getFieldDecorator(`values[${key}]`, {
|
|
|
|
initialValue: value,
|
|
|
|
initialValue: value,
|
|
|
|
})(
|
|
|
|
})(
|
|
|
|
<Select>
|
|
|
|
<Select>
|
|
|
|
<Select.Option value='false'> False </Select.Option>
|
|
|
|
<Select.Option value='false'> False </Select.Option>
|
|
|
|
<Select.Option value='true'> True </Select.Option>
|
|
|
|
<Select.Option value='true'> True </Select.Option>
|
|
|
|
</Select>
|
|
|
|
</Select>,
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderNumberRangeInput(key: number, attr: Attribute | null) {
|
|
|
|
private renderNumberRangeInput(key: number, attr: Attribute | null): JSX.Element {
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const value = attr ? attr.values[0] : '';
|
|
|
|
const value = attr ? attr.values[0] : '';
|
|
|
|
|
|
|
|
const { form } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
const validator = (_: any, value: string, callback: any) => {
|
|
|
|
const validator = (_: any, strNumbers: string, callback: any): void => {
|
|
|
|
const numbers = value.split(';').map((number) => Number.parseFloat(number));
|
|
|
|
const numbers = strNumbers
|
|
|
|
|
|
|
|
.split(';')
|
|
|
|
|
|
|
|
.map((number): number => Number.parseFloat(number));
|
|
|
|
if (numbers.length !== 3) {
|
|
|
|
if (numbers.length !== 3) {
|
|
|
|
callback('Invalid input');
|
|
|
|
callback('Invalid input');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -224,58 +243,60 @@ class LabelForm extends React.PureComponent<Props, State> {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
callback();
|
|
|
|
callback();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Form.Item>
|
|
|
|
<Form.Item>
|
|
|
|
{ this.props.form.getFieldDecorator(`values[${key}]`, {
|
|
|
|
{ form.getFieldDecorator(`values[${key}]`, {
|
|
|
|
initialValue: value,
|
|
|
|
initialValue: value,
|
|
|
|
rules: [{
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
message: 'Please set a range',
|
|
|
|
message: 'Please set a range',
|
|
|
|
}, {
|
|
|
|
}, {
|
|
|
|
validator,
|
|
|
|
validator,
|
|
|
|
}]
|
|
|
|
}],
|
|
|
|
})(
|
|
|
|
})(
|
|
|
|
<Input disabled={locked} placeholder='min;max;step'/>
|
|
|
|
<Input disabled={locked} placeholder='min;max;step' />,
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderDefaultValueInput(key: number, attr: Attribute | null) {
|
|
|
|
private renderDefaultValueInput(key: number, attr: Attribute | null): JSX.Element {
|
|
|
|
const value = attr ? attr.values[0] : '';
|
|
|
|
const value = attr ? attr.values[0] : '';
|
|
|
|
|
|
|
|
const { form } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Form.Item>
|
|
|
|
<Form.Item>
|
|
|
|
{ this.props.form.getFieldDecorator(`values[${key}]`, {
|
|
|
|
{ form.getFieldDecorator(`values[${key}]`, {
|
|
|
|
initialValue: value,
|
|
|
|
initialValue: value,
|
|
|
|
})(
|
|
|
|
})(
|
|
|
|
<Input placeholder='Default value'/>
|
|
|
|
<Input placeholder='Default value' />,
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderMutableAttributeInput(key: number, attr: Attribute | null) {
|
|
|
|
private renderMutableAttributeInput(key: number, attr: Attribute | null): JSX.Element {
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const value = attr ? attr.mutable : false;
|
|
|
|
const value = attr ? attr.mutable : false;
|
|
|
|
|
|
|
|
const { form } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Form.Item>
|
|
|
|
<Form.Item>
|
|
|
|
<Tooltip overlay='Can this attribute be changed frame to frame?'>
|
|
|
|
<Tooltip overlay='Can this attribute be changed frame to frame?'>
|
|
|
|
{ this.props.form.getFieldDecorator(`mutable[${key}]`, {
|
|
|
|
{ form.getFieldDecorator(`mutable[${key}]`, {
|
|
|
|
initialValue: value,
|
|
|
|
initialValue: value,
|
|
|
|
valuePropName: 'checked',
|
|
|
|
valuePropName: 'checked',
|
|
|
|
})(
|
|
|
|
})(
|
|
|
|
<Checkbox disabled={locked}> Mutable </Checkbox>
|
|
|
|
<Checkbox disabled={locked}> Mutable </Checkbox>,
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</Tooltip>
|
|
|
|
</Tooltip>
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderDeleteAttributeButton(key: number, attr: Attribute | null) {
|
|
|
|
private renderDeleteAttributeButton(key: number, attr: Attribute | null): JSX.Element {
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
const locked = attr ? attr.id >= 0 : false;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
@ -285,20 +306,25 @@ class LabelForm extends React.PureComponent<Props, State> {
|
|
|
|
type='link'
|
|
|
|
type='link'
|
|
|
|
className='cvat-delete-attribute-button'
|
|
|
|
className='cvat-delete-attribute-button'
|
|
|
|
disabled={locked}
|
|
|
|
disabled={locked}
|
|
|
|
onClick={() => {
|
|
|
|
onClick={(): void => {
|
|
|
|
this.removeAttribute(key);
|
|
|
|
this.removeAttribute(key);
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<Icon type='close-circle'/>
|
|
|
|
<Icon type='close-circle' />
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
|
</Tooltip>
|
|
|
|
</Tooltip>
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderAttribute = (key: number, index: number) => {
|
|
|
|
private renderAttribute = (key: number, index: number): JSX.Element => {
|
|
|
|
const attr = (this.props.label && index < this.props.label.attributes.length
|
|
|
|
const {
|
|
|
|
? this.props.label.attributes[index]
|
|
|
|
label,
|
|
|
|
|
|
|
|
form,
|
|
|
|
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const attr = (label && index < label.attributes.length
|
|
|
|
|
|
|
|
? label.attributes[index]
|
|
|
|
: null);
|
|
|
|
: null);
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
@ -306,23 +332,23 @@ class LabelForm extends React.PureComponent<Props, State> {
|
|
|
|
<Row type='flex' justify='space-between' align='middle'>
|
|
|
|
<Row type='flex' justify='space-between' align='middle'>
|
|
|
|
{ this.renderAttributeNameInput(key, attr) }
|
|
|
|
{ this.renderAttributeNameInput(key, attr) }
|
|
|
|
{ this.renderAttributeTypeInput(key, attr) }
|
|
|
|
{ this.renderAttributeTypeInput(key, attr) }
|
|
|
|
<Col span={6}> {
|
|
|
|
<Col span={6}>
|
|
|
|
(() => {
|
|
|
|
{((): JSX.Element => {
|
|
|
|
const type = this.props.form.getFieldValue(`type[${key}]`);
|
|
|
|
const type = form.getFieldValue(`type[${key}]`);
|
|
|
|
let element = null;
|
|
|
|
let element = null;
|
|
|
|
|
|
|
|
if ([AttributeType.SELECT, AttributeType.RADIO].includes(type)) {
|
|
|
|
[AttributeType.SELECT, AttributeType.RADIO]
|
|
|
|
element = this.renderAttributeValuesInput(key, attr);
|
|
|
|
.includes(type) ?
|
|
|
|
} else if (type === AttributeType.CHECKBOX) {
|
|
|
|
element = this.renderAttributeValuesInput(key, attr)
|
|
|
|
element = this.renderBooleanValueInput(key, attr);
|
|
|
|
: type === AttributeType.CHECKBOX ?
|
|
|
|
} else if (type === AttributeType.NUMBER) {
|
|
|
|
element = this.renderBooleanValueInput(key, attr)
|
|
|
|
element = this.renderNumberRangeInput(key, attr);
|
|
|
|
: type === AttributeType.NUMBER ?
|
|
|
|
} else {
|
|
|
|
element = this.renderNumberRangeInput(key, attr)
|
|
|
|
element = this.renderDefaultValueInput(key, attr);
|
|
|
|
: element = this.renderDefaultValueInput(key, attr)
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return element;
|
|
|
|
return element;
|
|
|
|
})()
|
|
|
|
})()}
|
|
|
|
} </Col>
|
|
|
|
</Col>
|
|
|
|
<Col span={5}>
|
|
|
|
<Col span={5}>
|
|
|
|
{ this.renderMutableAttributeInput(key, attr) }
|
|
|
|
{ this.renderMutableAttributeInput(key, attr) }
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
@ -332,16 +358,20 @@ class LabelForm extends React.PureComponent<Props, State> {
|
|
|
|
</Row>
|
|
|
|
</Row>
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
private renderLabelNameInput() {
|
|
|
|
private renderLabelNameInput(): JSX.Element {
|
|
|
|
const value = this.props.label ? this.props.label.name : '';
|
|
|
|
const {
|
|
|
|
const locked = this.props.label ? this.props.label.id >= 0 : false;
|
|
|
|
label,
|
|
|
|
|
|
|
|
form,
|
|
|
|
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
const value = label ? label.name : '';
|
|
|
|
|
|
|
|
const locked = label ? label.id >= 0 : false;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Col span={10}>
|
|
|
|
<Col span={10}>
|
|
|
|
<Form.Item hasFeedback> {
|
|
|
|
<Form.Item hasFeedback>
|
|
|
|
this.props.form.getFieldDecorator('labelName', {
|
|
|
|
{form.getFieldDecorator('labelName', {
|
|
|
|
initialValue: value,
|
|
|
|
initialValue: value,
|
|
|
|
rules: [{
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
@ -349,99 +379,119 @@ class LabelForm extends React.PureComponent<Props, State> {
|
|
|
|
}, {
|
|
|
|
}, {
|
|
|
|
pattern: patterns.validateAttributeName.pattern,
|
|
|
|
pattern: patterns.validateAttributeName.pattern,
|
|
|
|
message: patterns.validateAttributeName.message,
|
|
|
|
message: patterns.validateAttributeName.message,
|
|
|
|
}]
|
|
|
|
}],
|
|
|
|
})(<Input disabled={locked} placeholder='Label name'/>)
|
|
|
|
})(<Input disabled={locked} placeholder='Label name' />)}
|
|
|
|
} </Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderNewAttributeButton() {
|
|
|
|
private renderNewAttributeButton(): JSX.Element {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Col span={3}>
|
|
|
|
<Col span={3}>
|
|
|
|
<Form.Item>
|
|
|
|
<Form.Item>
|
|
|
|
<Button type='ghost' onClick={this.addAttribute}>
|
|
|
|
<Button type='ghost' onClick={this.addAttribute}>
|
|
|
|
Add an attribute <Icon type="plus"/>
|
|
|
|
Add an attribute
|
|
|
|
|
|
|
|
<Icon type='plus' />
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderDoneButton() {
|
|
|
|
private renderDoneButton(): JSX.Element {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
<Tooltip overlay='Save the label and return'>
|
|
|
|
<Tooltip overlay='Save the label and return'>
|
|
|
|
<Button
|
|
|
|
<Button
|
|
|
|
style={{width: '150px'}}
|
|
|
|
style={{ width: '150px' }}
|
|
|
|
type='primary'
|
|
|
|
type='primary'
|
|
|
|
htmlType='submit'
|
|
|
|
htmlType='submit'
|
|
|
|
onClick={() => {
|
|
|
|
onClick={(): void => {
|
|
|
|
this.continueAfterSubmit = false;
|
|
|
|
this.continueAfterSubmit = false;
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
> Done </Button>
|
|
|
|
>
|
|
|
|
|
|
|
|
Done
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
</Tooltip>
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderContinueButton() {
|
|
|
|
private renderContinueButton(): JSX.Element {
|
|
|
|
|
|
|
|
const { label } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
this.props.label ? <div/> :
|
|
|
|
label ? <div />
|
|
|
|
|
|
|
|
: (
|
|
|
|
<Col offset={1}>
|
|
|
|
<Col offset={1}>
|
|
|
|
<Tooltip overlay='Save the label and create one more'>
|
|
|
|
<Tooltip overlay='Save the label and create one more'>
|
|
|
|
<Button
|
|
|
|
<Button
|
|
|
|
style={{width: '150px'}}
|
|
|
|
style={{ width: '150px' }}
|
|
|
|
type='primary'
|
|
|
|
type='primary'
|
|
|
|
htmlType='submit'
|
|
|
|
htmlType='submit'
|
|
|
|
onClick={() => {
|
|
|
|
onClick={(): void => {
|
|
|
|
this.continueAfterSubmit = true;
|
|
|
|
this.continueAfterSubmit = true;
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
> Continue </Button>
|
|
|
|
>
|
|
|
|
|
|
|
|
Continue
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
</Tooltip>
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
)
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private renderCancelButton() {
|
|
|
|
private renderCancelButton(): JSX.Element {
|
|
|
|
|
|
|
|
const { onSubmit } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Col offset={1}>
|
|
|
|
<Col offset={1}>
|
|
|
|
<Tooltip overlay='Do not save the label and return'>
|
|
|
|
<Tooltip overlay='Do not save the label and return'>
|
|
|
|
<Button
|
|
|
|
<Button
|
|
|
|
style={{width: '150px'}}
|
|
|
|
style={{ width: '150px' }}
|
|
|
|
type='danger'
|
|
|
|
type='danger'
|
|
|
|
onClick={() => {
|
|
|
|
onClick={(): void => {
|
|
|
|
this.props.onSubmit(null);
|
|
|
|
onSubmit(null);
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
> Cancel </Button>
|
|
|
|
>
|
|
|
|
|
|
|
|
Cancel
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
</Tooltip>
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public render() {
|
|
|
|
public render(): JSX.Element {
|
|
|
|
this.props.form.getFieldDecorator('keys', {
|
|
|
|
const {
|
|
|
|
initialValue: this.props.label
|
|
|
|
label,
|
|
|
|
? this.props.label.attributes.map((attr: Attribute) => attr.id)
|
|
|
|
form,
|
|
|
|
: []
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
form.getFieldDecorator('keys', {
|
|
|
|
|
|
|
|
initialValue: label
|
|
|
|
|
|
|
|
? label.attributes.map((attr: Attribute): number => attr.id)
|
|
|
|
|
|
|
|
: [],
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
let keys = this.props.form.getFieldValue('keys');
|
|
|
|
const keys = form.getFieldValue('keys');
|
|
|
|
const attributeItems = keys.map(this.renderAttribute);
|
|
|
|
const attributeItems = keys.map(this.renderAttribute);
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Form onSubmit={this.handleSubmit}>
|
|
|
|
<Form onSubmit={this.handleSubmit}>
|
|
|
|
<Row type='flex' justify='start' align='middle'>
|
|
|
|
<Row type='flex' justify='start' align='middle'>
|
|
|
|
{ this.renderLabelNameInput() }
|
|
|
|
{ this.renderLabelNameInput() }
|
|
|
|
<Col span={1}/>
|
|
|
|
<Col span={1} />
|
|
|
|
{ this.renderNewAttributeButton() }
|
|
|
|
{ this.renderNewAttributeButton() }
|
|
|
|
</Row>
|
|
|
|
</Row>
|
|
|
|
{ attributeItems.length > 0 ?
|
|
|
|
{ attributeItems.length > 0
|
|
|
|
|
|
|
|
&& (
|
|
|
|
<Row type='flex' justify='start' align='middle'>
|
|
|
|
<Row type='flex' justify='start' align='middle'>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
<Text>Attributes</Text>
|
|
|
|
<Text>Attributes</Text>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
</Row> : null
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
{ attributeItems.reverse() }
|
|
|
|
{ attributeItems.reverse() }
|
|
|
|
<Row type='flex' justify='start' align='middle'>
|
|
|
|
<Row type='flex' justify='start' align='middle'>
|
|
|
|
|
Boris Sekachev
6 years ago
committed by
Nikita Manovich