Draggable attributes example

    public render(): JSX.Element {
        const { label, onSkeletonSubmit } = this.props;
        const isSkeleton = !!onSkeletonSubmit;

        return (
            <Form
                initialValues={{
                    name: label?.name || '',
                    type: label?.type || (isSkeleton ? LabelType.SKELETON : LabelType.ANY),
                    color: label?.color || undefined,
                    attributes: (label?.attributes || []).map((attr) => ({
                        id: attr.id,
                        name: attr.name,
                        type: attr.input_type,
                        values: attr.values,
                        mutable: attr.mutable,
                        default_value: attr.default_value,
                    })),
                }}
                onFinish={this.handleSubmit}
                layout='vertical'
                ref={this.formRef}
            >
                <Row justify='start' align='top'>
                    <Col span={8}>{this.renderLabelNameInput()}</Col>
                    <Col span={3} offset={1}>{this.renderLabelTypeInput()}</Col>
                    <Col span={3} offset={1}>
                        {this.renderChangeColorButton()}
                    </Col>
                    <Col offset={1}>
                        {this.renderNewAttributeButton()}
                    </Col>
                </Row>
                <Row justify='start' align='top'>
                    <Col span={24}>
                        <Form.List name='attributes'>
                            {(fieldInstances) => {
                                const layout = fieldInstances.map((field, index) => ({
                                    i: field.key.toString(),
                                    x: 0,
                                    y: index,
                                    h: 1,
                                    w: 1,
                                }));
                                return (
                                    <ReactGridLayout
                                        layout={layout}
                                        rowHeight={30}
                                        cols={1}
                                        width={600}
                                    >
                                        {fieldInstances.map(this.renderAttribute)}
                                    </ReactGridLayout>
                                );
                            }}
                        </Form.List>
                    </Col>
                </Row>
                <Row justify='start' align='middle'>
                    <Col>{this.renderSaveButton()}</Col>
                    <Col offset={1}>{this.renderCancelButton()}</Col>
                </Row>
            </Form>
        );
    }