@luck-design-biz/luckda 0.0.24-1 → 0.0.25-1

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

@@ -1,20 +1,335 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id"];
-import React, { useRef } from 'react';
-import { useMemoizedFn } from 'ahooks';
+var _excluded = ["id", "wrapperRef", "className", "dataset", "width", "height", "showLine", "defaultExpandDeep", "actions", "editable", "showRootAdd", "rootAddSetting", "doubleClickExpand", "onDoubleClick", "treeNodeCheckable", "treeNodeDisableCheckbox", "treeNodeDisable", "onTreeNodeRender", "treeNodeIcon", "advance"];
+import React, { useRef, useImperativeHandle, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useMemoizedFn, useCreation } from 'ahooks';
+import classNames from 'classnames';
+import { isNil } from 'lodash';
+import { IconFont } from '@luck-design-biz/base';
+import { suid } from '@luck-design-biz/base/utils';
+import { useContext } from "../../../engine/provider/ContextProvider";
 import Wrapper from "../Wrapper";
+import { LdTree } from "../../../../index";
+import { omitBadProps, executeCode } from "../../../engine/tools/helper";
+import defaultMeta from "../../../engine/meta/tree.props.default.json";
+import styles from "./index.less";
 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,
+    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,
     props = _objectWithoutProperties(_ref, _excluded);
-  var ref = useRef();
+  var ctx = useContext();
+  var boxRef = useRef();
+  var treeRef = useRef();
   var getTargetDom = useMemoizedFn(function () {
-    return ref.current;
+    return boxRef.current;
+  });
+  useImperativeHandle(wrapperRef, function () {
+    return treeRef.current;
+  });
+  var handleMount = useMemoizedFn(function (params) {
+    ctx.doAction(advance.events.onMount, {
+      params: params
+    });
+  });
+  var handleUnmount = useMemoizedFn(function () {
+    ctx.doAction(advance.events.onUnmount);
+  });
+  var handleProcessDataSource = useMemoizedFn(function (data) {
+    ctx.doAction(advance.events.processDataSource, {
+      data: data
+    });
+  });
+  var handleNodeDoubleClick = useMemoizedFn(function (e, rowData) {
+    ctx.doAction(advance.events.onDoubleClick, {
+      e: e,
+      rowData: rowData
+    });
+  });
+  var handleCheck = useMemoizedFn(function (checkedKeys, e) {
+    ctx.doAction(advance.events.onCheck, {
+      checkedKeys: checkedKeys,
+      e: e
+    });
+  });
+  var events = 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;
+      return _events;
+    }
+    return {};
+  }, [advance === null || advance === void 0 ? void 0 : advance.events]);
+  var handleDrop = useMemoizedFn(function (info, dragInfo) {
+    if (dragInfo !== false) {
+      // ctx.doAction(advance.events.onDoubleClick, { e, rowData });
+      // doAction('drag', {
+      //   get: { datasetCode: dataSetKey },
+      //   post: {
+      //     fromId: info.dragNode.props.dataRef[PRIMARY],
+      //     toId: info.node.props.dataRef[PRIMARY],
+      //   }
+      // }, {
+      //   showConfirm: false,
+      //   callback: (success) => success && onLdQuery()
+      // });
+    }
   });
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
+    displayName: "Tree",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, "LCTree"));
+    ref: boxRef,
+    style: {
+      width: width,
+      height: height
+    }
+  }, /*#__PURE__*/React.createElement(LdTree, _extends({
+    width: "100%",
+    height: "100%",
+    id: id,
+    ldId: id,
+    ref: treeRef,
+    className: classNames(styles['lc-component-tree'], _defineProperty({}, 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,
+    rightMenus: function rightMenus() {
+      return actions.todoList.map(function (action) {
+        return {
+          key: suid(),
+          name: action.name,
+          onClick: function onClick(_, data) {
+            ctx.doAction(action.actionPool, {
+              data: data
+            });
+          },
+          resource: action.serial,
+          style: action.riskLevel === 'default' ? null : {
+            color: {
+              danger: '#ff7875',
+              destroy: '#ff4d4f'
+            }[action.riskLevel]
+          }
+        };
+      });
+    },
+    doubleClickExpand: doubleClickExpand,
+    treeNodeCheckable: function treeNodeCheckable(i) {
+      if (isNil(_treeNodeCheckable)) return props.checkable;
+      return executeCode(ctx, _treeNodeCheckable, ['item'], i);
+    },
+    treeNodeDisableCheckbox: function treeNodeDisableCheckbox(i) {
+      if (isNil(_treeNodeDisableCheckbox)) return false;
+      return executeCode(ctx, _treeNodeDisableCheckbox, ['item'], i);
+    },
+    treeNodeDisable: function treeNodeDisable(i) {
+      if (isNil(_treeNodeDisable)) return false;
+      return 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 && executeCode(ctx, i.condition, ['item'], node)) {
+          icon = i.icon;
+        }
+      });
+      return icon ? /*#__PURE__*/React.createElement(IconFont, {
+        type: icon
+      }) : false;
+    },
+    onTreeNodeRender: onTreeNodeRender ? function (title, i) {
+      return executeCode(ctx, onTreeNodeRender, ['title', 'item'], title, i);
+    } : null,
+    onDrop: handleDrop
+  }, events, props))));
+};
+LCTree.propTypes = {
+  /**
+   * @name 唯一标识
+   * @type string
+   * @disabled true
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * @name 数据集
+   * @type _DataSetSelector
+   */
+  dataset: PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    uid: PropTypes.string.isRequired
+  }),
+  /**
+   * @name 标题
+   * @type string
+   * @disabled true
+   */
+  title: PropTypes.string,
+  /**
+   * @name 是否只读
+   * @type boolean
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * @name 支持拖拽
+   * @type boolean
+   */
+  draggable: PropTypes.bool,
+  /**
+   * @name 异步加载
+   * @type boolean
+   */
+  asyncLoad: PropTypes.bool,
+  /**
+   * @name 异步加载Key
+   * @type string
+   */
+  iparentid: PropTypes.string,
+  /**
+   * @name 宽度
+   * @type string
+   */
+  width: PropTypes.string,
+  /**
+   * @name 高度
+   * @type string
+   */
+  height: PropTypes.string,
+  /**
+   * @name 显示线
+   * @type bool
+   */
+  showLine: PropTypes.bool,
+  /**
+   * @name 展示字段
+   * @type string
+   */
+  treeNodeTitle: PropTypes.string,
+  /**
+   * @name 展示字段
+   * @type string
+   */
+  defaultExpandDeep: PropTypes.string,
+  /**
+   * @name 显示图标
+   * @type bool
+   */
+  showIcon: PropTypes.bool,
+  /**
+   * @name 节点图标设置
+   * @type array
+   */
+  treeNodeIcon: PropTypes.array,
+  /**
+   * @name 是否显示根节点
+   * @type bool
+   */
+  showRootAdd: PropTypes.bool,
+  /**
+   * @name 根节点配置
+   * @type object
+   */
+  rootAddSetting: PropTypes.object,
+  /**
+   * @name 节点操作项
+   * @type object
+   */
+  actions: PropTypes.object,
+  /**
+   * @name 双击收缩节点
+   * @type bool
+   */
+  doubleClickExpand: PropTypes.bool,
+  /**
+   * @name 复选框
+   * @type bool
+   */
+  checkable: PropTypes.bool,
+  /**
+   * @name 节点是否有复选框
+   * @type _JSEditor
+   * @default "function treeNodeCheckable(item) { \n return true; \n}"
+   */
+  treeNodeCheckable: PropTypes.string,
+  /**
+   * @name 节点复选框是否禁用
+   * @type _JSEditor
+   * @default "function treeNodeDisableCheckbox(item) { \n return false; \n}"
+   */
+  treeNodeDisableCheckbox: PropTypes.string,
+  /**
+   * @name 节点是否禁用
+   * @type _JSEditor
+   * @default "function treeNodeDisable(item) { \n return false; \n}"
+   */
+  treeNodeDisable: PropTypes.string,
+  /**
+   * @name 节点定制渲染
+   * @type _JSEditor
+   * @default "function onTreeNodeRender(title, item) { \n return title; \n}"
+   */
+  onTreeNodeRender: PropTypes.string,
+  /**
+   * @name 组件首次渲染时
+   * @type _JSEditor
+   */
+  onMount: PropTypes.string,
+  /**
+   * @name 组件卸载时
+   * @type _JSEditor
+   */
+  onUnmount: PropTypes.string,
+  /**
+   * @name 数据预处理
+   * @type _JSEditor
+   */
+  processDataSource: PropTypes.string,
+  /**
+   * @name 双击事件
+   * @type _JSEditor
+   */
+  onDoubleClick: PropTypes.string,
+  /**
+   * @name 复选框选择事件
+   * @type _JSEditor
+   */
+  onCheck: PropTypes.string
 };
-export default LCTree;
+LCTree.defaultProps = omitBadProps(defaultMeta);
+export default /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(LCTree, _extends({
+    wrapperRef: ref
+  }, props));
+});

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

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