@vtx/components 4.0.0-beta.16 → 4.0.0-beta.18

package/lib/vtx-tree-select/index.js

@@ -15,7 +15,7 @@ var _index = require("./style/index");
 var _ahooks = require("ahooks");
 var _vtxProvider = require("../vtx-provider");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["multiple", "treeData", "placeholder", "treeCheckable", "disabled", "style"],
+var _excluded = ["multiple", "treeData", "placeholder", "treeCheckable", "disabled", "style", "fieldNames", "onChange", "labelInValue"],
   _excluded2 = ["children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -45,6 +45,14 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     style = _ref.style,
+    _ref$fieldNames = _ref.fieldNames,
+    fieldNames = _ref$fieldNames === void 0 ? {
+      label: "title",
+      value: "value",
+      children: 'children'
+    } : _ref$fieldNames,
+    onChange = _ref.onChange,
+    labelInValue = _ref.labelInValue,
     props = _objectWithoutProperties(_ref, _excluded);
   var intl = (0, _vtxProvider.useIntl)();
   var _useContext = (0, _react.useContext)(_vtxProvider.VtxProvider),
@@ -73,9 +81,7 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
       nodes.map(function (item) {
         var children = item.children,
           rest = _objectWithoutProperties(item, _excluded2);
-        keyNodesMapping[item.value || item.key] = _objectSpread(_objectSpread({}, rest), {}, {
-          id: item.value || item.key
-        });
+        keyNodesMapping[item[fieldNames.value]] = _objectSpread(_objectSpread({}, rest), {}, _defineProperty(_defineProperty({}, fieldNames.value, item[fieldNames.value]), fieldNames.label, item[fieldNames.label]));
         if (Array.isArray(children) && children.length > 0) {
           genNodes(children);
         }
@@ -84,19 +90,17 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
     return keyNodesMapping;
   }, [treeData]);
   var clear = function clear() {
-    var _props$onChange;
-    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, [], [], {});
+    onChangeTreeSelect === null || onChangeTreeSelect === void 0 || onChangeTreeSelect([], [], {});
   };
   var clearKey = function clearKey(id) {
-    var _props$onChange2;
     var newValue = _toConsumableArray(props.value);
     (0, _pull.default)(newValue, id);
     var label = newValue.map(function (item) {
-      return keyNodesMapping[item].title;
+      return keyNodesMapping[item[fieldNames.label]];
     });
-    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, newValue, label, {});
+    onChangeTreeSelect === null || onChangeTreeSelect === void 0 || onChangeTreeSelect(newValue, label, {});
   };
-  var selectedNodes = (0, _react.useMemo)(function () {
+  var getSelectedNodes = function getSelectedNodes(value) {
     var value_arr = function (val) {
       if (Array.isArray(val)) {
         return val;
@@ -105,90 +109,29 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
       } else {
         return [];
       }
-    }(props.value);
+    }(value);
     var selectedNodes = value_arr.filter(function (k) {
-      return k in keyNodesMapping;
+      if (labelInValue) {
+        return k.value in keyNodesMapping;
+      } else {
+        return k in keyNodesMapping;
+      }
     }).map(function (item) {
-      return {
-        id: item,
-        name: keyNodesMapping[item].title
-      };
+      if (labelInValue) {
+        return _objectSpread({}, keyNodesMapping[item.value]);
+      }
+      return _objectSpread({}, keyNodesMapping[item]);
     });
     return selectedNodes;
+  };
+  var selectedNodes = (0, _react.useMemo)(function () {
+    return getSelectedNodes(props.value);
   }, [props.value, keyNodesMapping]);
   (0, _react.useEffect)(function () {
     if (size !== null && size !== void 0 && size.width) {
       setPopWidth(size === null || size === void 0 ? void 0 : size.width);
     }
   }, [size === null || size === void 0 ? void 0 : size.width]);
-
-  // let suffixIconObj = {};
-  // if (multiple || treeCheckable) {
-  //     suffixIconObj.suffixIcon = (
-  //         <Popover
-  //             content={
-  //                 <>
-  //                     <div
-  //                         className={classnames(`${prefixCls}-count-head`, hashId,)}
-
-  //                     >
-  //                         <span>已选择：{selectedNodes.length}</span>
-  //                         <span
-  //                             className={classnames(
-  //                                 selectedNodes.length > 0 && !disabled
-  //                                     ? 'clear-count'
-  //                                     : 'disabled-count',
-  //                             )}
-  //                             onClick={e => {
-  //                                 if (!disabled) {
-  //                                     e.stopPropagation();
-  //                                     clear();
-  //                                 }
-  //                             }}
-  //                         >
-  //                             清空已选项
-  //                         </span>
-  //                     </div>
-  //                     {selectedNodes.length > 0 ? (
-  //                         selectedNodes.map(item => (
-  //                             <Tag
-  //                                 key={`tab-${item.id}`}
-  //                                 closable={!disabled}
-  //                                 onClose={e => {
-  //                                     e.stopPropagation();
-  //                                     clearKey(item.id);
-  //                                 }}
-  //                                 style={{ marginBottom: '5px' }}
-  //                             >
-  //                                 {item.name && item.name.length > 20
-  //                                     ? `${item.name.slice(0, 20)}...`
-  //                                     : item.name}
-  //                             </Tag>
-  //                         ))
-  //                     ) : (
-  //                         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-  //                     )}
-  //                 </>
-  //             }
-  //             placement="bottomRight"
-  //             trigger="click"
-  //             // overlayStyle={{ width: popWidth }}
-  //             styles={{ root: { width: popWidth } }}
-  //         >
-  //             <Button
-  //                 className={classnames(`${prefixCls}-count`, hashId,)}
-
-  //                 icon={<MoreOutlined />}
-  //                 size="default"
-  //                 onClick={e => {
-  //                     console.log('click', e)
-  //                     e.stopPropagation();
-  //                 }}
-  //             />
-  //         </Popover>
-  //     );
-  // }
-
   var popoverContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)("".concat(prefixCls, "-count-head"), hashId),
@@ -205,21 +148,29 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
         children: intl.getMessage('treeSelect.clearSelectedItems', '清空已选项')
       })]
     }), selectedNodes.length > 0 ? selectedNodes.map(function (item) {
+      var _item$fieldNames$labe;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tag, {
         closable: !disabled,
         onClose: function onClose(e) {
           e.stopPropagation();
-          clearKey(item.id);
+          clearKey(item[fieldNames.value]);
         },
-        style: {
-          marginBottom: 5
+        styles: {
+          root: {
+            marginBottom: 5,
+            marginRight: 5
+          }
         },
-        children: item.name.length > 20 ? "".concat(item.name.slice(0, 20), "...") : item.name
-      }, "tab-".concat(item.id));
+        children: ((_item$fieldNames$labe = item[fieldNames.label]) === null || _item$fieldNames$labe === void 0 ? void 0 : _item$fieldNames$labe.length) > 20 ? "".concat(item[fieldNames.label].slice(0, 20), "...") : item[fieldNames.label]
+      }, "tab-".concat(item[fieldNames.value]));
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Empty, {
       image: _antd.Empty.PRESENTED_IMAGE_SIMPLE
     })]
   });
+  var onChangeTreeSelect = function onChangeTreeSelect(value, label, extra) {
+    extra.list = getSelectedNodes(value);
+    onChange === null || onChange === void 0 || onChange(value, label, extra);
+  };
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     style: style,
@@ -228,7 +179,7 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
       style: {
         width: '100%'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TreeSelect, _objectSpread({
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TreeSelect, _objectSpread(_objectSpread({
         showSearch: true,
         placeholder: placeholder,
         treeData: treeData,
@@ -252,8 +203,14 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
           popup: (0, _classnames.default)("".concat(prefixCls, "-popup"), hashId)
         },
         maxTagCount: "responsive",
-        treeDefaultExpandAll: true
-      }, props)), (multiple || treeCheckable) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
+        treeDefaultExpandAll: true,
+        fieldNames: fieldNames,
+        labelInValue: labelInValue
+      }, props), {}, {
+        onChange: function onChange(value, label, extra) {
+          return onChangeTreeSelect(value, label, extra, selectedNodes);
+        }
+      })), (multiple || treeCheckable) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
         open: popOpen,
         onOpenChange: setPopOpen,
         placement: "bottomRight",

package/lib/vtx-tree-select/style/index.js

@@ -34,14 +34,16 @@ var genVtxTreeSelectStyle = function genVtxTreeSelectStyle(token) {
     color: '@input-placeholder-color'
   }), '&-count', {
     marginRight: '-12px'
-  })), "".concat(componentCls, "-popup"), _defineProperty({}, '&', _defineProperty(_defineProperty({}, '.ant-select-tree .ant-select-tree-treenode:not(.ant-select-tree .ant-select-tree-treenode-disabled).filter-node .ant-select-tree-title', {
+  })), "".concat(componentCls, "-popup"), _defineProperty({}, '&', _defineProperty(_defineProperty(_defineProperty({}, '.ant-select-tree .ant-select-tree-treenode:not(.ant-select-tree .ant-select-tree-treenode-disabled).filter-node .ant-select-tree-title', {
     color: '#1890ff'
   }), '.ant-select-tree .ant-select-tree-node-content-wrapper .ant-select-tree-node-selected', {
     backgroundColor: '#e6f7ff'
+  }), '.ant-select-tree .ant-select-tree-list-holder-inner .ant-select-tree-treenode .ant-select-tree-node-content-wrapper', {
+    flex: 1
   }))), "".concat(componentCls, "-count-head"), {
     display: 'flex',
     justifyContent: 'space-between',
-    marginBottom: '5px',
+    marginBottom: 5,
     '.disabled-count': {
       color: '#aaa',
       cursor: 'not-allowed'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtx/components",
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-beta.18",
   "description": "React components for Vortex",
   "keywords": [
     "react",