@douyinfe/semi-ui 2.15.0-beta.0 → 2.15.0

package/lib/cjs/tree/index.js

@@ -27,6 +27,8 @@ var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _get2 = _interopRequireDefault(require("lodash/get"));
@@ -71,6 +73,8 @@ require("@douyinfe/semi-foundation/lib/cjs/tree/tree.css");
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _checkboxGroup = _interopRequireDefault(require("../checkbox/checkboxGroup"));
+
 var _interface = require("./interface");
 
 _forEachInstanceProperty(_context2 = _Object$keys2(_interface)).call(_context2, function (key) {
@@ -652,7 +656,9 @@ class Tree extends _baseComponent.default {
       inputValue,
       filteredKeys,
       dragOverNodeKey,
-      dropPosition
+      dropPosition,
+      checkedKeys,
+      realCheckedKeys
     } = this.state;
     const {
       blockNode,
@@ -671,7 +677,8 @@ class Tree extends _baseComponent.default {
       draggable,
       renderFullLabel,
       labelEllipsis,
-      virtualize
+      virtualize,
+      checkRelation
     } = this.props;
     const wrapperCls = (0, _classnames.default)("".concat(prefixcls, "-wrapper"), className);
     const listCls = (0, _classnames.default)("".concat(prefixcls, "-option-list"), {
@@ -729,7 +736,9 @@ class Tree extends _baseComponent.default {
       style: style
     }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
       className: listCls
-    }, ariaAttr), noData ? this.renderEmpty() : this.renderNodeList())));
+    }, ariaAttr), noData ? this.renderEmpty() : multiple ? /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
+      value: (0, _from.default)(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
+    }, this.renderNodeList()) : this.renderNodeList())));
   }
 
 }

package/lib/cjs/tree/treeNode.js

@@ -342,7 +342,8 @@ class TreeNode extends _react.PureComponent {
   renderCheckbox() {
     const {
       checked,
-      halfChecked
+      halfChecked,
+      eventKey
     } = this.props;
     const disabled = this.isDisabled();
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -351,6 +352,7 @@ class TreeNode extends _react.PureComponent {
       onKeyPress: this.handleCheckEnterPress
     }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
       "aria-label": 'Toggle the checked state of checkbox',
+      value: eventKey,
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)

package/lib/cjs/treeSelect/index.js

@@ -28,6 +28,8 @@ var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
@@ -96,6 +98,8 @@ var _utils = require("../_utils");
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _checkboxGroup = _interopRequireDefault(require("../checkbox/checkboxGroup"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -875,7 +879,9 @@ class TreeSelect extends _baseComponent.default {
         motionType,
         inputValue,
         filteredKeys,
-        flattenNodes
+        flattenNodes,
+        checkedKeys,
+        realCheckedKeys
       } = this.state;
       const {
         loadData,
@@ -892,7 +898,8 @@ class TreeSelect extends _baseComponent.default {
         optionListStyle,
         searchPosition,
         renderLabel,
-        renderFullLabel
+        renderFullLabel,
+        checkRelation
       } = this.props;
       const wrapperCls = (0, _classnames.default)("".concat(prefixTree, "-wrapper"));
       const listCls = (0, _classnames.default)("".concat(prefixTree, "-option-list"), {
@@ -933,7 +940,9 @@ class TreeSelect extends _baseComponent.default {
         role: "tree",
         "aria-multiselectable": multiple ? true : false,
         style: optionListStyle
-      }, noData ? this.renderEmpty() : this.renderNodeList()), outerBottomSlot));
+      }, noData ? this.renderEmpty() : multiple ? /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
+        value: (0, _from.default)(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
+      }, this.renderNodeList()) : this.renderNodeList()), outerBottomSlot));
     };
 
     this.state = {

package/lib/es/tree/index.js

@@ -7,6 +7,7 @@ import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 
 /* eslint-disable max-lines-per-function */
 import React from 'react';
@@ -27,6 +28,7 @@ import NodeList from './nodeList';
 import LocaleConsumer from '../locale/localeConsumer';
 import '@douyinfe/semi-foundation/lib/es/tree/tree.css';
 import { IconSearch } from '@douyinfe/semi-icons';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 export * from './interface';
 const prefixcls = cssClasses.PREFIX;
 
@@ -593,7 +595,9 @@ class Tree extends BaseComponent {
       inputValue,
       filteredKeys,
       dragOverNodeKey,
-      dropPosition
+      dropPosition,
+      checkedKeys,
+      realCheckedKeys
     } = this.state;
     const {
       blockNode,
@@ -612,7 +616,8 @@ class Tree extends BaseComponent {
       draggable,
       renderFullLabel,
       labelEllipsis,
-      virtualize
+      virtualize,
+      checkRelation
     } = this.props;
     const wrapperCls = cls("".concat(prefixcls, "-wrapper"), className);
     const listCls = cls("".concat(prefixcls, "-option-list"), {
@@ -670,7 +675,9 @@ class Tree extends BaseComponent {
       style: style
     }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/React.createElement("div", _Object$assign({
       className: listCls
-    }, ariaAttr), noData ? this.renderEmpty() : this.renderNodeList())));
+    }, ariaAttr), noData ? this.renderEmpty() : multiple ? /*#__PURE__*/React.createElement(CheckboxGroup, {
+      value: _Array$from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
+    }, this.renderNodeList()) : this.renderNodeList())));
   }
 
 }

package/lib/es/tree/treeNode.js

@@ -303,7 +303,8 @@ export default class TreeNode extends PureComponent {
   renderCheckbox() {
     const {
       checked,
-      halfChecked
+      halfChecked,
+      eventKey
     } = this.props;
     const disabled = this.isDisabled();
     return /*#__PURE__*/React.createElement("div", {
@@ -312,6 +313,7 @@ export default class TreeNode extends PureComponent {
       onKeyPress: this.handleCheckEnterPress
     }, /*#__PURE__*/React.createElement(Checkbox, {
       "aria-label": 'Toggle the checked state of checkbox',
+      value: eventKey,
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)

package/lib/es/treeSelect/index.js

@@ -11,6 +11,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
@@ -39,6 +40,7 @@ import Trigger from '../trigger';
 import TagInput from '../tagInput';
 import { isSemiIcon } from '../_utils';
 import { IconChevronDown, IconClear, IconSearch } from '@douyinfe/semi-icons';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 const prefixcls = cssClasses.PREFIX;
 const prefixTree = cssClasses.PREFIX_TREE;
 const key = 0;
@@ -821,7 +823,9 @@ class TreeSelect extends BaseComponent {
         motionType,
         inputValue,
         filteredKeys,
-        flattenNodes
+        flattenNodes,
+        checkedKeys,
+        realCheckedKeys
       } = this.state;
       const {
         loadData,
@@ -838,7 +842,8 @@ class TreeSelect extends BaseComponent {
         optionListStyle,
         searchPosition,
         renderLabel,
-        renderFullLabel
+        renderFullLabel,
+        checkRelation
       } = this.props;
       const wrapperCls = cls("".concat(prefixTree, "-wrapper"));
       const listCls = cls("".concat(prefixTree, "-option-list"), {
@@ -879,7 +884,9 @@ class TreeSelect extends BaseComponent {
         role: "tree",
         "aria-multiselectable": multiple ? true : false,
         style: optionListStyle
-      }, noData ? this.renderEmpty() : this.renderNodeList()), outerBottomSlot));
+      }, noData ? this.renderEmpty() : multiple ? /*#__PURE__*/React.createElement(CheckboxGroup, {
+        value: _Array$from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
+      }, this.renderNodeList()) : this.renderNodeList()), outerBottomSlot));
     };
 
     this.state = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.15.0-beta.0",
+    "version": "2.15.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.15.0-beta.0",
-        "@douyinfe/semi-foundation": "2.15.0-beta.0",
-        "@douyinfe/semi-icons": "2.15.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.15.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.15.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.15.0",
+        "@douyinfe/semi-foundation": "2.15.0",
+        "@douyinfe/semi-icons": "2.15.0",
+        "@douyinfe/semi-illustrations": "2.15.0",
+        "@douyinfe/semi-theme-default": "2.15.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "09fa8ba9a3765537c9de842dbcc2f97d515b54d9",
+    "gitHead": "236be8e52864297171e3b08da20475139dadd633",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.15.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.15.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/tree/index.tsx

@@ -41,6 +41,7 @@ import {
     KeyEntity,
     OptionProps
 } from './interface';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 
 export * from './interface';
 export { AutoSizerProps } from './autoSizer';
@@ -688,6 +689,8 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
             filteredKeys,
             dragOverNodeKey,
             dropPosition,
+            checkedKeys, 
+            realCheckedKeys,
         } = this.state;
 
         const {
@@ -708,6 +711,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
             renderFullLabel,
             labelEllipsis,
             virtualize,
+            checkRelation,
         } = this.props;
         const wrapperCls = cls(`${prefixcls}-wrapper`, className);
         const listCls = cls(`${prefixcls}-option-list`, {
@@ -762,7 +766,12 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                 <div aria-label={this.props['aria-label']} className={wrapperCls} style={style}>
                     {filterTreeNode ? this.renderInput() : null}
                     <div className={listCls} {...ariaAttr}>
-                        {noData ? this.renderEmpty() : this.renderNodeList()}
+                        {noData ? this.renderEmpty() : (multiple ? 
+                            (<CheckboxGroup value={Array.from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)}>
+                                {this.renderNodeList()}
+                            </CheckboxGroup>) : 
+                            this.renderNodeList()
+                        )}
                     </div>
                 </div>
             </TreeContext.Provider>

package/tree/treeNode.tsx

@@ -221,7 +221,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     }
 
     renderCheckbox() {
-        const { checked, halfChecked } = this.props;
+        const { checked, halfChecked, eventKey } = this.props;
         const disabled = this.isDisabled();
         return (
             <div
@@ -231,6 +231,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
             >
                 <Checkbox
                     aria-label='Toggle the checked state of checkbox'
+                    value={eventKey}
                     indeterminate={halfChecked}
                     checked={checked}
                     disabled={Boolean(disabled)}

package/treeSelect/_story/treeSelect.stories.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Icon, Button, Form, Popover, Tag, Typography } from '../../index';
+import { Icon, Button, Form, Popover, Tag, Typography, CheckboxGroup } from '../../index';
 import TreeSelect from '../index';
 import { flattenDeep } from 'lodash';
 import CustomTrigger from './CustomTrigger';
@@ -152,6 +152,43 @@ const treeDataWithoutValue = [
   },
 ];
 
+export const TreeSelectWrapper = () => (
+  <div>
+    <div>github issue 750 修改测试用例</div>
+    <CheckboxGroup>
+      <TreeSelect
+        showClear={true}
+        expandAll
+        style={{width: 400}}
+        treeData={[
+            {
+                key: '1',
+                label: '所有节点',
+                value: '1',
+                children: [
+                    { key: '20006251', label: 'Semi', value: 'semi@bytedance.com' },
+                    { key: '20006248', label: 'Design', value: 'design@bytedance.com' },
+                    {
+                        key: '20006205',
+                        label: 'React',
+                        value: 'react@bytedance.com',
+                    },
+                ],
+            },
+            ]}
+        multiple
+        filterTreeNode
+        showFilteredOnly={true}
+        leafOnly
+      />
+  </CheckboxGroup>
+  </div>
+);
+
+TreeSelectWrapper.story = {
+  name: 'treeSelect wrapper',
+};
+
 class SimpleTree extends React.Component {
   render() {
     return (

package/treeSelect/index.tsx

@@ -50,6 +50,7 @@ import { isSemiIcon } from '../_utils';
 import { OptionProps, TreeProps, TreeState, FlattenNode, TreeNodeData, TreeNodeProps } from '../tree/interface';
 import { Motion } from '../_base/base';
 import { IconChevronDown, IconClear, IconSearch } from '@douyinfe/semi-icons';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 
 export type ExpandAction = false | 'click' | 'doubleClick';
 
@@ -1301,7 +1302,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     renderTree = () => {
-        const { keyEntities, motionKeys, motionType, inputValue, filteredKeys, flattenNodes } = this.state;
+        const { keyEntities, motionKeys, motionType, inputValue, filteredKeys, flattenNodes, checkedKeys, realCheckedKeys } = this.state;
         const {
             loadData,
             filterTreeNode,
@@ -1318,6 +1319,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             searchPosition,
             renderLabel,
             renderFullLabel,
+            checkRelation,
         } = this.props;
         const wrapperCls = cls(`${prefixTree}-wrapper`);
         const listCls = cls(`${prefixTree}-option-list`, {
@@ -1362,7 +1364,12 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                         this.renderInput()
                     }
                     <div className={listCls} role="tree" aria-multiselectable={multiple ? true : false} style={optionListStyle}>
-                        {noData ? this.renderEmpty() : this.renderNodeList()}
+                        { noData ? this.renderEmpty() : (multiple ? 
+                            (<CheckboxGroup value={Array.from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)}>
+                                {this.renderNodeList()}
+                            </CheckboxGroup>) : 
+                            this.renderNodeList()
+                        )}
                     </div>
                     {outerBottomSlot}
                 </div>