@luck-design-biz/luckda 0.0.26 → 1.0.0-alpha

package/lib/lowcode/view/lc-components/Tree/index.js

@@ -6,23 +6,392 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = require("lodash");
+var _base = require("@luck-design-biz/base");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../../../engine/provider/ContextProvider");
 var _Wrapper = _interopRequireDefault(require("../Wrapper"));
-var _excluded = ["id"];
+var _index = require("../../../../index");
+var _helper = require("../../../engine/tools/helper");
+var _treePropsDefault = _interopRequireDefault(require("../../../engine/meta/tree.props.default.json"));
+var _index2 = _interopRequireDefault(require("./index.less"));
+var _excluded = ["id", "wrapperRef", "className", "dataset", "width", "height", "showLine", "defaultExpandDeep", "actions", "editable", "showRootAdd", "onlyRoot", "rootAddSetting", "doubleClickExpand", "onDoubleClick", "treeNodeCheckable", "treeNodeDisableCheckbox", "treeNodeDisable", "onTreeNodeRender", "treeNodeIcon", "advance", "cancelSelect", "defaultSelect"];
+var PRIMARY = window.appConfig.constraintKeys.PRIMARY;
 var LCTree = function LCTree(_ref) {
   var id = _ref.id,
+    wrapperRef = _ref.wrapperRef,
+    className = _ref.className,
+    dataset = _ref.dataset,
+    width = _ref.width,
+    height = _ref.height,
+    showLine = _ref.showLine,
+    defaultExpandDeep = _ref.defaultExpandDeep,
+    actions = _ref.actions,
+    editable = _ref.editable,
+    showRootAdd = _ref.showRootAdd,
+    onlyRoot = _ref.onlyRoot,
+    rootAddSetting = _ref.rootAddSetting,
+    doubleClickExpand = _ref.doubleClickExpand,
+    onDoubleClick = _ref.onDoubleClick,
+    _treeNodeCheckable = _ref.treeNodeCheckable,
+    _treeNodeDisableCheckbox = _ref.treeNodeDisableCheckbox,
+    _treeNodeDisable = _ref.treeNodeDisable,
+    onTreeNodeRender = _ref.onTreeNodeRender,
+    _treeNodeIcon = _ref.treeNodeIcon,
+    advance = _ref.advance,
+    cancelSelect = _ref.cancelSelect,
+    defaultSelect = _ref.defaultSelect,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var ref = (0, _react.useRef)();
+  var ctx = (0, _ContextProvider.useContext)();
+  var boxRef = (0, _react.useRef)();
+  var apiRef = (0, _react.useRef)();
+  var treeRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedKeys = _useState2[0],
+    setSelectedKeys = _useState2[1];
   var getTargetDom = (0, _ahooks.useMemoizedFn)(function () {
-    return ref.current;
+    return boxRef.current;
   });
+  (0, _react.useImperativeHandle)(apiRef, function () {
+    return {
+      getInstance: function getInstance() {
+        return treeRef.current;
+      }
+    };
+  });
+  var handleMount = (0, _ahooks.useMemoizedFn)(function (params) {
+    ctx.doAction(advance.events.onMount, {
+      params: params
+    });
+  });
+  var handleUnmount = (0, _ahooks.useMemoizedFn)(function () {
+    ctx.doAction(advance.events.onUnmount);
+  });
+  var handleProcessDataSource = (0, _ahooks.useMemoizedFn)(function (data) {
+    ctx.doAction(advance.events.processDataSource, {
+      data: data
+    });
+  });
+  var handleNodeDoubleClick = (0, _ahooks.useMemoizedFn)(function (e, rowData) {
+    ctx.doAction(advance.events.onDoubleClick, {
+      e: e,
+      rowData: rowData
+    });
+  });
+  var handleCheck = (0, _ahooks.useMemoizedFn)(function (checkedKeys, e) {
+    ctx.doAction(advance.events.onCheck, {
+      checkedKeys: checkedKeys,
+      e: e
+    });
+  });
+  var handleDrop = (0, _ahooks.useMemoizedFn)(function (info, dragInfo) {
+    ctx.doAction(advance.events.onCheck, {
+      info: info,
+      dragInfo: dragInfo
+    });
+  });
+  var events = (0, _ahooks.useCreation)(function () {
+    if (advance !== null && advance !== void 0 && advance.events) {
+      var _events = {};
+      if (advance.events.onMount) _events.onMount = handleMount;
+      if (advance.events.onUnmount) _events.onUnmount = handleUnmount;
+      if (advance.events.processDataSource) _events.dataToTreeFormat = handleProcessDataSource;
+      if (advance.events.onDoubleClick) _events.onNodeDoubleClick = handleNodeDoubleClick;
+      if (advance.events.onCheck) _events.onCheck = handleCheck;
+      if (advance.events.onDrop) _events.onDrop = handleDrop;
+      return _events;
+    }
+    return {};
+  }, [advance === null || advance === void 0 ? void 0 : advance.events]);
+  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_selectedKeys, e) {
+    if (cancelSelect || e.selected) {
+      setSelectedKeys(_selectedKeys);
+      ctx.doAction(advance.events.onSelect, {
+        checkedKeys: _selectedKeys,
+        e: e
+      });
+    }
+  });
+  var afterInit = (0, _ahooks.useMemoizedFn)(function (treeData, data) {
+    var selected = !(0, _lodash.isNil)(defaultSelect) ? (0, _helper.executeCode)(ctx, defaultSelect, ['treeData'], treeData) : null;
+    selected && handleSelect(selected, {
+      selected: true,
+      selectedNodes: selected.map(function (key) {
+        return (0, _lodash.keyBy)(data, PRIMARY)[key];
+      })
+    });
+  });
+  var handleAction = function handleAction(action, params) {
+    var doAction = function doAction() {
+      ctx.doAction(action.actionPool, params);
+    };
+    if (action.riskLevel === 'danger') {
+      _base.Modal.confirm({
+        title: "\u786E\u8BA4\u6267\u884C".concat(action.name, "\u884C\u4E3A\u64CD\u4F5C\u5417\uFF1F"),
+        onOk: doAction
+      });
+    } else if (action.riskLevel === 'destroy') {
+      (0, _base.recheck)({
+        title: "\u786E\u8BA4\u6267\u884C".concat(action.name, "\u884C\u4E3A\u64CD\u4F5C\u5417\uFF1F"),
+        checkWords: "\u6267\u884C".concat(action.name),
+        onOk: doAction
+      });
+    } else {
+      doAction();
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
     id: id,
-    getTargetDom: getTargetDom
+    displayName: "Tree",
+    getTargetDom: getTargetDom,
+    api: apiRef
   }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref
-  }, "LCTree"));
+    ref: boxRef,
+    style: {
+      width: width,
+      height: height
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.LdTree, (0, _extends2.default)({
+    width: "100%",
+    height: "100%",
+    id: id,
+    ldId: id,
+    ref: treeRef,
+    className: (0, _classnames.default)(_index2.default['lc-component-tree'], (0, _defineProperty2.default)({}, className, !!className)),
+    dataSetKey: dataset === null || dataset === void 0 ? void 0 : dataset.code,
+    showLine: showLine,
+    readOnly: !editable,
+    defaultExpandDeep: defaultExpandDeep === 'all' ? defaultExpandDeep : Number(defaultExpandDeep),
+    rootAdd: showRootAdd ? {
+      resource: rootAddSetting.serial,
+      onClick: function onClick() {
+        return ctx.doAction(rootAddSetting.actionPool);
+      }
+    } : null,
+    onlyRoot: onlyRoot,
+    rightMenus: function rightMenus() {
+      return actions.todoList.map(function (action) {
+        return {
+          key: (0, _utils.suid)(),
+          name: action.name,
+          onClick: function onClick(_, data) {
+            handleAction(action, {
+              data: data,
+              datasetCode: dataset === null || dataset === void 0 ? void 0 : dataset.code
+            });
+          },
+          resource: action.serial,
+          style: action.riskLevel === 'default' ? null : {
+            color: {
+              danger: '#ff7875',
+              destroy: '#ff4d4f'
+            }[action.riskLevel]
+          }
+        };
+      });
+    },
+    doubleClickExpand: doubleClickExpand,
+    treeNodeCheckable: function treeNodeCheckable(i) {
+      if ((0, _lodash.isNil)(_treeNodeCheckable)) return props.checkable;
+      return (0, _helper.executeCode)(ctx, _treeNodeCheckable, ['item'], i);
+    },
+    treeNodeDisableCheckbox: function treeNodeDisableCheckbox(i) {
+      if ((0, _lodash.isNil)(_treeNodeDisableCheckbox)) return false;
+      return (0, _helper.executeCode)(ctx, _treeNodeDisableCheckbox, ['item'], i);
+    },
+    treeNodeDisable: function treeNodeDisable(i) {
+      if ((0, _lodash.isNil)(_treeNodeDisable)) return false;
+      return (0, _helper.executeCode)(ctx, _treeNodeDisable, ['item'], i);
+    },
+    treeNodeIcon: function treeNodeIcon(node) {
+      if (!_treeNodeIcon || _treeNodeIcon.length === 0) return null;
+      var icon = null;
+      _treeNodeIcon.forEach(function (i) {
+        if (i.condition && (0, _helper.executeCode)(ctx, i.condition, ['item'], node)) {
+          icon = i.icon;
+        }
+      });
+      return icon ? /*#__PURE__*/_react.default.createElement(_base.IconFont, {
+        type: icon
+      }) : false;
+    },
+    onTreeNodeRender: onTreeNodeRender ? function (title, i) {
+      return (0, _helper.executeCode)(ctx, onTreeNodeRender, ['title', 'item'], title, i);
+    } : null,
+    selectedKeys: selectedKeys,
+    onSelect: handleSelect,
+    afterInit: afterInit
+  }, events, props))));
+};
+LCTree.propTypes = {
+  /**
+   * @name 唯一标识
+   * @type string
+   * @disabled true
+   */
+  id: _propTypes.default.string.isRequired,
+  /**
+   * @name 数据集
+   * @type _DataSetSelector
+   */
+  dataset: _propTypes.default.shape({
+    code: _propTypes.default.string.isRequired,
+    uid: _propTypes.default.string.isRequired
+  }),
+  /**
+   * @name 标题
+   * @type string
+   * @disabled true
+   */
+  title: _propTypes.default.string,
+  /**
+   * @name 是否只读
+   * @type boolean
+   */
+  readOnly: _propTypes.default.bool,
+  /**
+   * @name 支持拖拽
+   * @type boolean
+   */
+  draggable: _propTypes.default.bool,
+  /**
+   * @name 异步加载
+   * @type boolean
+   */
+  asyncLoad: _propTypes.default.bool,
+  /**
+   * @name 异步加载Key
+   * @type string
+   */
+  iparentid: _propTypes.default.string,
+  /**
+   * @name 宽度
+   * @type string
+   */
+  width: _propTypes.default.string,
+  /**
+   * @name 高度
+   * @type string
+   */
+  height: _propTypes.default.string,
+  /**
+   * @name 显示线
+   * @type bool
+   */
+  showLine: _propTypes.default.bool,
+  /**
+   * @name 展示字段
+   * @type string
+   */
+  treeNodeTitle: _propTypes.default.string,
+  /**
+   * @name 展示字段
+   * @type string
+   */
+  defaultExpandDeep: _propTypes.default.string,
+  /**
+   * @name 显示图标
+   * @type bool
+   */
+  showIcon: _propTypes.default.bool,
+  /**
+   * @name 节点图标设置
+   * @type array
+   */
+  treeNodeIcon: _propTypes.default.array,
+  /**
+   * @name 是否显示根节点
+   * @type bool
+   */
+  showRootAdd: _propTypes.default.bool,
+  /**
+   * @name 是否只有唯一一个根节点
+   * @type bool
+   */
+  onlyRoot: _propTypes.default.bool,
+  /**
+   * @name 根节点配置
+   * @type object
+   */
+  rootAddSetting: _propTypes.default.object,
+  /**
+   * @name 节点操作项
+   * @type object
+   */
+  actions: _propTypes.default.object,
+  /**
+   * @name 双击收缩节点
+   * @type bool
+   */
+  doubleClickExpand: _propTypes.default.bool,
+  /**
+   * @name 复选框
+   * @type bool
+   */
+  checkable: _propTypes.default.bool,
+  /**
+   * @name 节点是否有复选框
+   * @type _JSEditor
+   * @default "function treeNodeCheckable(item) { \n return true; \n}"
+   */
+  treeNodeCheckable: _propTypes.default.string,
+  /**
+   * @name 节点复选框是否禁用
+   * @type _JSEditor
+   * @default "function treeNodeDisableCheckbox(item) { \n return false; \n}"
+   */
+  treeNodeDisableCheckbox: _propTypes.default.string,
+  /**
+   * @name 节点是否禁用
+   * @type _JSEditor
+   * @default "function treeNodeDisable(item) { \n return false; \n}"
+   */
+  treeNodeDisable: _propTypes.default.string,
+  /**
+   * @name 节点定制渲染
+   * @type _JSEditor
+   * @default "function onTreeNodeRender(title, item) { \n return title; \n}"
+   */
+  onTreeNodeRender: _propTypes.default.string,
+  /**
+   * @name 组件首次渲染时
+   * @type _JSEditor
+   */
+  onMount: _propTypes.default.string,
+  /**
+   * @name 组件卸载时
+   * @type _JSEditor
+   */
+  onUnmount: _propTypes.default.string,
+  /**
+   * @name 数据预处理
+   * @type _JSEditor
+   */
+  processDataSource: _propTypes.default.string,
+  /**
+   * @name 双击事件
+   * @type _JSEditor
+   */
+  onDoubleClick: _propTypes.default.string,
+  /**
+   * @name 复选框选择事件
+   * @type _JSEditor
+   */
+  onCheck: _propTypes.default.string,
+  /**
+   * @name 选中事件
+   * @type _JSEditor
+   */
+  onSelect: _propTypes.default.string
 };
+LCTree.defaultProps = (0, _helper.omitBadProps)(_treePropsDefault.default);
 var _default = exports.default = LCTree;

package/lib/lowcode/view/lc-components/Tree/index.less

@@ -0,0 +1,5 @@
+.lc-component-tree{
+}
+.lc-component-tree.runtime-tree {
+  
+}