Merge pull request #1678 from XiaoMi/feature/#1677

Feature/#1677
XiaoMi · Apr 9, 2021 · bba2d88 · bba2d88
2 parents 7f40d89 + 8d7a699
commit bba2d88
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,7 +11,8 @@
 - 优化 `Tabs` 组件 在 type 为 editable 时右上角的加号的显示隐藏随 onAdd 方法自动显示隐藏 [#1662](https://github.com/XiaoMi/hiui/issues/1662)
 - 修复 `Select` 组件在分组形态下，搜索功能无效 [#1655](https://github.com/XiaoMi/hiui/issues/1655)
 - 修复 `DatePicker` type 为 daterange 时，且 showTime 为 true 选择时间显示异常 [#1640](https://github.com/XiaoMi/hiui/issues/1640)
-- 修复 `<Cascader />` id 为 Number 类型时导致节点重复添加问题[#1648](https://github.com/XiaoMi/hiui/issues/1648)
+- 修复 `Cascader` id 为 Number 类型时导致节点重复添加问题[#1648](https://github.com/XiaoMi/hiui/issues/1648)
+- 新增 `SelectTree` disabled 属性，控制禁用状态[#1675](https://github.com/XiaoMi/hiui/issues/1675)
 
 ## 3.5.0
 

diff --git a/components/input/Input.js b/components/input/Input.js
@@ -110,7 +110,8 @@ class Input extends Component {
       'localeDatas',
       'append',
       'innerRef',
-      'clearable'
+      'clearable',
+      'bordered'
     ])
     return (
       <div

diff --git a/components/input/style/index.scss b/components/input/style/index.scss
@@ -33,6 +33,7 @@ textarea.#{$input} {
   &.disabled {
     color: use-color('gray-50');
     background-color: use-color('gray-10');
+    cursor: not-allowed;
   }
 
   &::-webkit-input-placeholder {
@@ -90,6 +91,7 @@ textarea.#{$input} {
     &.disabled {
       color: use-color('gray-50');
       background-color: use-color('gray-10');
+      cursor: not-allowed;
     }
   }
 

diff --git a/components/select-tree/SelectTreeHook.js b/components/select-tree/SelectTreeHook.js
@@ -55,6 +55,7 @@ const SelectTree = ({
   autoload: propsAutoload,
   placement = 'top-bottom-start',
   emptyContent,
+  disabled,
   bordered = true
 }) => {
   const [isFocus, setIsFocus] = useState(false)
@@ -554,6 +555,7 @@ const SelectTree = ({
         selectedItems={selectedItems}
         clearable={clearable}
         show={show}
+        disabled={disabled}
         valueRender={valueRender}
         placeholder={placeholder}
         checkedEvents={checkedEvents}

diff --git a/components/select-tree/components/Trigger.jsx b/components/select-tree/components/Trigger.jsx
@@ -15,6 +15,7 @@ const Trigger = ({
   placeholder,
   valueRender,
   isFocus,
+  disabled,
   bordered
 }) => {
   return (
@@ -24,13 +25,14 @@ const Trigger = ({
         'hi-selecttree__input',
         {
           'hi-selecttree__input--focus': isFocus,
+          'hi-selecttree__input--disabled': disabled,
           bordered
         },
         type !== 'multiple' && 'hi-selecttree__input--single',
         selectedItems.length === 0 && 'hi-selecttree__input--placeholder'
       )}
       onClick={() => {
-        onTrigger()
+        !disabled && onTrigger()
       }}
     >
       <div className="hi-selecttree__selected-wrapper" ref={selectedItemsRef}>

diff --git a/components/select-tree/index.d.ts b/components/select-tree/index.d.ts
@@ -28,6 +28,7 @@ interface Props {
   showCheckedMode?: 'ALL' | 'PARENT' | 'CHILD'
   mode?: 'normal' | 'breadcrumb'
   defaultExpandAll?: boolean
+  disabled?: boolean
   bordered?: boolean
   defaultExpandIds?: string[] | number[]
   expandIds?: string[] | number[]

diff --git a/components/select-tree/style/index.scss b/components/select-tree/style/index.scss
@@ -57,6 +57,26 @@
       border-color: use-color('primary');
     }
 
+    &--disabled {
+      color: var(--color-gray-50);
+      background-color: var(--color-gray-10);
+      border: 1px solid var(--color-gray-30);
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: var(--color-gray-30);
+
+        .hi-selecttree__input--expand.clearable {
+          display: block;
+          cursor: not-allowed;
+        }
+
+        .hi-selecttree__icon-close {
+          display: none;
+        }
+      }
+    }
+
     &--single {
       .hi-selecttree__selecteditem {
         background: none;

diff --git a/docs/demo/select-tree/section-single.jsx b/docs/demo/select-tree/section-single.jsx
@@ -3,7 +3,7 @@ import DocViewer from '../../../libs/doc-viewer'
 import SelectTree from '../../../components/select-tree'
 import Button from '../../../components/button'
 const prefix = 'tree-select-single'
-const rightOptions = ['基础', '默认值', '无边框', '默认展开']
+const rightOptions = ['基础', '默认值', '无边框', '禁用', '默认展开']
 const desc = '展示从多个收起的备选项中选出的一个选项'
 const defaultJson = `constructor () {
     super()
@@ -112,6 +112,24 @@ const code = [
   {
     code: `import React from 'react'
   import SelectTree from '@hi-ui/hiui/es/select-tree'\n
+  class Demo extends React.Component {
+    ${defaultJson}
+    render () {
+      const { value, singleList } = this.state
+      return (
+        <SelectTree
+          disabled
+          data={singleList}
+          defaultValue={['1-2']} // or defaultValue={[{id: '1-2'}]}
+        />
+      )
+    }
+  }`,
+    opt: ['禁用']
+  },
+  {
+    code: `import React from 'react'
+  import SelectTree from '@hi-ui/hiui/es/select-tree'\n
   class Demo extends React.Component {
     ${defaultJson}
     render () {

diff --git a/docs/zh-CN/components/menu.mdx b/docs/zh-CN/components/menu.mdx
@@ -34,7 +34,7 @@ import DemoVertical from '../../demo/menu/section-vertical.jsx'
 | activeId         | 激活的菜单项 id                                        | string     | -                          | -          |
 | placement        | 设置菜单水平或垂直展示                                 | string     | 'horizontal' \| 'vertical' | 'vertical' |
 | collapsed        | 是否收起子菜单，菜单垂直展示时有效                     | boolean    | true \| false              | false      |
-| showCollapse     | 是否显示收缩开关，菜单垂直展示时有效                   | boolean    | true \| false              | true       |
+| showCollapse     | 是否显示收缩开关，菜单垂直展示时有效                   | boolean    | true \| false              | false       |
 | showAllSubMenus  | 是否以胖菜单的形式展开所有子菜单（仅在水平菜单时有效） | boolean    | true \| false              | false      |
 | accordion        | 手风琴模式，菜单水平展示时有效                         | boolean    | true \| false              | true       |
 | overlayClassName | 下拉根元素的类名称                                     | string     | -                          | -          |

diff --git a/docs/zh-CN/components/select-tree.mdx b/docs/zh-CN/components/select-tree.mdx
@@ -48,6 +48,7 @@ import DemoBread from '../../demo/select-tree/section-bread'
 | mode               | 数据展示形式                              | string                                               | normal \| breadcrumb                                                                                       | normal |
 | type               | 数据选择类型                              | string                                               | single \| multiple                                                                                         | single |
 | bordered            | 是否有边框                                                                                               | boolean                                                              | true \| false                                                |             true                                                          |
+| disabled            | 是否禁用                                                                                                 | boolean                                                             | true \| false                                | false                                                                 |
 | defaultExpandAll   | 是否默认展开所有树节点                    | boolean                                              | true \| false                                                                                              | false  |
 | defaultExpandIds   | 默认高亮的节点（非受控）                  | string[]                                             | -                                                                                                          | -      |
 | defaultValue       | 默认选中项 （非受控）                     | DataItem[] \| string[] \| string                     | -                                                                                                          | -      |