From 2ac761eec35d34337bcf6d3904c7fb46d9e1faf6 Mon Sep 17 00:00:00 2001
From: zhuyue <zhu.yue@99cloud.net>
Date: Thu, 2 Sep 2021 15:44:17 +0800
Subject: [PATCH] feat: Add tree select form item

add tree select form item

Change-Id: I203e63f6e11608ff7cffcb5f5e09518e880303f6
---
 src/components/FormItem/TreeSelect/index.jsx | 45 ++++++++++++++++++++
 src/components/FormItem/index.jsx            |  2 +
 2 files changed, 47 insertions(+)
 create mode 100644 src/components/FormItem/TreeSelect/index.jsx

diff --git a/src/components/FormItem/TreeSelect/index.jsx b/src/components/FormItem/TreeSelect/index.jsx
new file mode 100644
index 00000000..8a7456d9
--- /dev/null
+++ b/src/components/FormItem/TreeSelect/index.jsx
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { TreeSelect } from 'antd';
+import PropTypes from 'prop-types';
+
+export default class Index extends Component {
+  onChange = (value) => {
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  getValue = () => {
+    const { value, isWrappedValue } = this.props;
+    if (value === undefined) return value;
+    return isWrappedValue ? value.value : value;
+  };
+
+  render() {
+    const {
+      treeData,
+      placeholder = t('Please select'),
+      disabled = false,
+    } = this.props;
+    return (
+      <TreeSelect
+        className={this.props.className}
+        showSearch
+        allowClear
+        placeholder={placeholder}
+        treeData={treeData}
+        disabled={disabled}
+        value={this.getValue()}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+Index.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  isWrappedValue: PropTypes.bool,
+  treeData: PropTypes.array,
+  onChange: PropTypes.func,
+};
diff --git a/src/components/FormItem/index.jsx b/src/components/FormItem/index.jsx
index e554ad24..505d6fc0 100644
--- a/src/components/FormItem/index.jsx
+++ b/src/components/FormItem/index.jsx
@@ -57,6 +57,7 @@ import MetadataTransfer from './MetadataTransfer';
 import NetworkSelectTable from './NetworkSelectTable';
 import VolumeSelectTable from './VolumeSelectTable';
 import TabSelectTable from './TabSelectTable';
+import TreeSelect from './TreeSelect';
 // import styles from './index.less';
 
 const type2component = {
@@ -101,6 +102,7 @@ const type2component = {
   'metadata-transfer': MetadataTransfer,
   aceEditor: AceEditor,
   'input-json': JsonInput,
+  'tree-select': TreeSelect,
 };
 
 export default class FormItem extends React.Component {