feat: cascader and datePicker

DTStack · Aug 20, 2020 · acd2899 · acd2899
1 parent 09370ad
commit acd2899
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 1 deletion.
diff --git a/components/form/demo/basic.md b/components/form/demo/basic.md
@@ -14,7 +14,8 @@ title:
 Basic usage example.
 
 ```jsx
-import { Form, Icon, Input, Button, Checkbox, InputNumber, Radio, Switch } from 'antd';
+import { Form, Icon, Input, Button, Checkbox, InputNumber, Radio, Switch, Cascader, Select } from 'antd';
+const { Option } = Select;
 const formItemLayout = {
   labelCol: {
     xs: { span: 24 },
@@ -37,6 +38,41 @@ class NormalLoginForm extends React.Component {
 
   render() {
     const { getFieldDecorator } = this.props.form;
+    const options = [
+      {
+        value: 'zhejiang',
+        label: '浙江',
+        children: [
+          {
+            value: 'hangzhou',
+            label: '杭州',
+            children: [
+              {
+                value: 'westLake',
+                label: '西湖',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        value: 'jiangsu',
+        label: '江苏',
+        children: [
+          {
+            value: 'nanjing',
+            label: '南京',
+            children: [
+              {
+                value: 'zhongHuaMen',
+                label: '中华门',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
     return (
       <Form {...formItemLayout} onSubmit={this.handleSubmit}>
         <Form.Item label={'用户名'}>
@@ -46,6 +82,17 @@ class NormalLoginForm extends React.Component {
             <Input placeholder="Username"/>
           )}
         </Form.Item>
+        <Form.Item label={'角色'}>
+          {getFieldDecorator('role', {
+            rules: [{ required: true, message: 'It is required!' }],
+          })(
+            <Select placeholder="Please select">
+              <Option value="1">项目所有者</Option>
+              <Option value="2">数据分析师</Option>
+              <Option value="3">管理员</Option>
+            </Select>
+          )}
+        </Form.Item>
         <Form.Item label={'密码'}>
           {getFieldDecorator('password', {
             rules: [{ required: true, message: 'It is required!' }],
@@ -85,6 +132,13 @@ class NormalLoginForm extends React.Component {
             <Switch />
           )}
         </Form.Item>
+        <Form.Item label={'位置'}>
+          {getFieldDecorator('location', {
+            rules: [{ required: false, message: 'It is required!' }],
+          })(
+            <Cascader options={options} placeholder="Please select" />
+          )}
+        </Form.Item>
         <Form.Item>
           <Button type="primary" htmlType="submit">
             提交表单

diff --git a/theme/dt-theme/dark/form.less b/theme/dt-theme/dark/form.less
@@ -35,6 +35,9 @@
 .ant-select-dropdown {
     box-shadow:0px 2px 8px 0px rgba(6,7,10,1);
 }
+.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
+    background-color: @deriveColor_dark;
+}
 // checkbox
 .ant-checkbox-inner {
     background-color: #11121C;
@@ -58,6 +61,18 @@
 .ant-switch-loading-icon, .ant-switch::after {
     background-color: #ffffff;
 }
+// cascader
+.ant-cascader-menu-item {
+    color: @whiteBF;
+}
+.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled), .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
+    background-color: @deriveColor_dark;
+}
+// datePicker
+.ant-calendar {
+    box-shadow: 0px 2px 8px 0px rgba(6,7,10,1);
+    border: 0;
+}
 
 // 浅色背景中 显示深色控件
 .dt-form-light-bg {