@vtx/components 4.0.0-beta.8 → 4.0.0-beta.80

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

@@ -15,8 +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"],
-  _excluded2 = ["children"];
+var _excluded = ["multiple", "treeData", "placeholder", "treeCheckable", "disabled", "style", "fieldNames", "onChange", "labelInValue"];
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -29,6 +28,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -45,7 +45,18 @@ 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",
+      key: "value",
+      children: 'children'
+    } : _ref$fieldNames,
+    onChange = _ref.onChange,
+    labelInValue = _ref.labelInValue,
     props = _objectWithoutProperties(_ref, _excluded);
+  // checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 labelInValue 强制为 true
+  var _labelInValue = treeCheckable && props.treeCheckStrictly ? true : labelInValue;
   var intl = (0, _vtxProvider.useIntl)();
   var _useContext = (0, _react.useContext)(_vtxProvider.VtxProvider),
     getPrefixCls = _useContext.getPrefixCls;
@@ -71,11 +82,9 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
     }
     (function genNodes(nodes) {
       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
-        });
+        var rest = Object.assign({}, (_objectDestructuringEmpty(item), item));
+        var children = item[fieldNames.children];
+        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 +93,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 +112,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),
@@ -204,22 +150,33 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
         },
         children: intl.getMessage('treeSelect.clearSelectedItems', '清空已选项')
       })]
-    }), selectedNodes.length > 0 ? selectedNodes.map(function (item) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tag, {
-        closable: !disabled,
-        onClose: function onClose(e) {
-          e.stopPropagation();
-          clearKey(item.id);
-        },
-        style: {
-          marginBottom: 5
-        },
-        children: item.name.length > 20 ? "".concat(item.name.slice(0, 20), "...") : item.name
-      }, "tab-".concat(item.id));
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Empty, {
-      image: _antd.Empty.PRESENTED_IMAGE_SIMPLE
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-all-list"), hashId),
+      children: 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[fieldNames.value]);
+          },
+          styles: {
+            root: {
+              marginBottom: 5,
+              marginRight: 5
+            }
+          },
+          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,8 +185,10 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
       style: {
         width: '100%'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TreeSelect, _objectSpread({
-        showSearch: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TreeSelect, _objectSpread(_objectSpread({
+        showSearch: {
+          treeNodeFilterProp: fieldNames.label
+        },
         placeholder: placeholder,
         treeData: treeData,
         treeLine: {
@@ -252,8 +211,15 @@ 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,
+        disabled: disabled
+      }, 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

@@ -13,7 +13,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var genVtxTreeSelectStyle = function genVtxTreeSelectStyle(token) {
   var componentCls = token.componentCls;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '&-popover', {
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '&-popover', {
     minWidth: '200px',
     height: '300px',
     overflow: 'auto',
@@ -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'
@@ -51,6 +53,9 @@ var genVtxTreeSelectStyle = function genVtxTreeSelectStyle(token) {
     }, '&:hover', {
       color: '#40a9ff'
     })
+  }), "".concat(componentCls, "-all-list"), {
+    maxHeight: 300,
+    overflowY: "auto"
   }), "".concat(componentCls, "-outer"), {
     position: 'relative',
     display: 'inline-flex',
@@ -63,6 +68,7 @@ var genVtxTreeSelectStyle = function genVtxTreeSelectStyle(token) {
     color: token.colorTextDescription,
     display: 'inline-flex',
     alignItems: 'center',
+    width: token.controlHeight,
     '&:hover': {
       color: token.colorPrimary
     }

package/lib/vtx-upload/FilePreview.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _vtxProvider = require("../vtx-provider");
+var _vtxModal = _interopRequireDefault(require("../vtx-modal"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -82,7 +83,7 @@ function Preview(props) {
     timer && clearTimeout(timer);
     onCancel();
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Modal, _objectSpread(_objectSpread({}, modalProps), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vtxModal.default, _objectSpread(_objectSpread({}, modalProps), {}, {
     children: [type == 'file' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
       src: url,
       style: {