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

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

@@ -1,20 +1,389 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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", "onlyRoot", "rootAddSetting", "doubleClickExpand", "onDoubleClick", "treeNodeCheckable", "treeNodeDisableCheckbox", "treeNodeDisable", "onTreeNodeRender", "treeNodeIcon", "advance", "cancelSelect", "defaultSelect"];
+import React, { useRef, useImperativeHandle, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useMemoizedFn, useCreation } from 'ahooks';
+import classNames from 'classnames';
+import { isNil, keyBy } from 'lodash';
+import { Modal, recheck, 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 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 = _objectWithoutProperties(_ref, _excluded);
-  var ref = useRef();
+  var ctx = useContext();
+  var boxRef = useRef();
+  var apiRef = useRef();
+  var treeRef = useRef();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKeys = _useState2[0],
+    setSelectedKeys = _useState2[1];
   var getTargetDom = useMemoizedFn(function () {
-    return ref.current;
+    return boxRef.current;
   });
+  useImperativeHandle(apiRef, function () {
+    return {
+      getInstance: function getInstance() {
+        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 handleDrop = useMemoizedFn(function (info, dragInfo) {
+    ctx.doAction(advance.events.onCheck, {
+      info: info,
+      dragInfo: dragInfo
+    });
+  });
+  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;
+      if (advance.events.onDrop) _events.onDrop = handleDrop;
+      return _events;
+    }
+    return {};
+  }, [advance === null || advance === void 0 ? void 0 : advance.events]);
+  var handleSelect = useMemoizedFn(function (_selectedKeys, e) {
+    if (cancelSelect || e.selected) {
+      setSelectedKeys(_selectedKeys);
+      ctx.doAction(advance.events.onSelect, {
+        checkedKeys: _selectedKeys,
+        e: e
+      });
+    }
+  });
+  var afterInit = useMemoizedFn(function (treeData, data) {
+    var selected = !isNil(defaultSelect) ? executeCode(ctx, defaultSelect, ['treeData'], treeData) : null;
+    selected && handleSelect(selected, {
+      selected: true,
+      selectedNodes: selected.map(function (key) {
+        return keyBy(data, PRIMARY)[key];
+      })
+    });
+  });
+  var handleAction = function handleAction(action, params) {
+    var doAction = function doAction() {
+      ctx.doAction(action.actionPool, params);
+    };
+    if (action.riskLevel === 'danger') {
+      Modal.confirm({
+        title: "\u786E\u8BA4\u6267\u884C".concat(action.name, "\u884C\u4E3A\u64CD\u4F5C\u5417\uFF1F"),
+        onOk: doAction
+      });
+    } else if (action.riskLevel === 'destroy') {
+      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.createElement(Wrapper, {
     id: id,
-    getTargetDom: getTargetDom
+    displayName: "Tree",
+    getTargetDom: getTargetDom,
+    api: apiRef
   }, /*#__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,
+    onlyRoot: onlyRoot,
+    rightMenus: function rightMenus() {
+      return actions.todoList.map(function (action) {
+        return {
+          key: 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 (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,
+    selectedKeys: selectedKeys,
+    onSelect: handleSelect,
+    afterInit: afterInit
+  }, 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 bool
+   */
+  onlyRoot: 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,
+  /**
+   * @name 选中事件
+   * @type _JSEditor
+   */
+  onSelect: PropTypes.string
 };
+LCTree.defaultProps = omitBadProps(defaultMeta);
 export default LCTree;

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

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