@luck-design-biz/luckda 1.0.1-12 → 1.0.1-14

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

@@ -1,21 +1,485 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id"];
-import React, { useRef } from 'react';
-import { useMemoizedFn } from 'ahooks';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useRef, useImperativeHandle, forwardRef, useCallback } 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 { useContext } from "../../../engine/provider/ContextProvider";
 import Wrapper from "../Wrapper";
-var LCCardList = function LCCardList(_ref) {
+import { LdCard, LDActions } from "../../../../index";
+import TopFilter from "../Table/components/TopFilter";
+import { omitBadProps, executeCode } from "../../../engine/tools/helper";
+import useCombinedRefs from "../../../engine/tools/useCombinedRefs";
+import defaultMeta from "../../../engine/meta/cardlist.props.default.json";
+import { LC_COMPONENT_UNIT_KEY, LC_COMPONENT_UNIT } from "../../../constants";
+var LCCardList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var ref = useRef();
+    className = _ref.className,
+    dataset = _ref.dataset,
+    readOnly = _ref.readOnly,
+    draggable = _ref.draggable,
+    col = _ref.col,
+    autoLoad = _ref.autoLoad,
+    pagination = _ref.pagination,
+    topActionGroup = _ref.topActionGroup,
+    topFilter = _ref.topFilter,
+    actions = _ref.actions,
+    suppressActions = _ref.suppressActions,
+    advance = _ref.advance,
+    showAddCard = _ref.showAddCard,
+    addCardHeight = _ref.addCardHeight,
+    addCardWords = _ref.addCardWords,
+    rowSelection = _ref.rowSelection,
+    disabledCheckbox = _ref.disabledCheckbox,
+    batchOperations = _ref.batchOperations,
+    pageSize = _ref.pageSize,
+    nocardBoxborder = _ref.nocardBoxborder,
+    showAvatar = _ref.showAvatar,
+    avatarUrl = _ref.avatarUrl,
+    showTitle = _ref.showTitle,
+    showDesc = _ref.showDesc,
+    renderTitle = _ref.renderTitle,
+    renderDescribe = _ref.renderDescribe,
+    renderContent = _ref.renderContent,
+    describeLines = _ref.describeLines;
+  var ctx = useContext();
+  var apiRef = useRef();
+  var wrapperRef = useRef();
+  var instanceRef = useCombinedRefs(ref);
+  useImperativeHandle(apiRef, function () {
+    return {
+      /**
+       * 获取表格实例
+       * @method
+       */
+      getInstance: function getInstance() {
+        return instanceRef.current;
+      },
+      /**
+       * 刷新表格
+       * @method
+       */
+      refresh: function refresh() {
+        var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        return instanceRef.current.onLdQuery(init ? {
+          removeAll: {
+            operate: 'removeAll'
+          }
+        } : null);
+      }
+    };
+  });
+  var onActionClick = useMemoizedFn(function (action, props) {
+    var doAction = function doAction() {
+      ctx.doAction(action.actionPool, props);
+    };
+    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();
+    }
+  });
+  var _cardActions = useCreation(function () {
+    return suppressActions ? [] : actions.todoList.map(function (action) {
+      return {
+        key: action.id,
+        resource: action.serialEffect === "hidden" ? action.serial : null,
+        title: action.name,
+        iconNode: action.icon ? /*#__PURE__*/React.createElement(IconFont, {
+          type: action.icon
+        }) : action.name,
+        onClick: function onClick(data, e) {
+          return onActionClick(action, {
+            data: data,
+            e: e
+          });
+        },
+        style: action.riskLevel === 'default' ? null : {
+          color: {
+            danger: '#ff7875',
+            destroy: '#ff4d4f'
+          }[action.riskLevel]
+        },
+        disabled: action.serialEffect === "disable"
+      };
+    });
+  }, [suppressActions, actions]);
+  var _batchOperations = useCreation(function () {
+    return rowSelection && !readOnly ? batchOperations.todoList.map(function (action) {
+      return {
+        key: action.id,
+        wanted: action.serialEffect === "hidden" ? action.serial : null,
+        title: action.name,
+        style: action.riskLevel === 'default' ? null : {
+          color: {
+            danger: '#ff7875',
+            destroy: '#ff4d4f'
+          }[action.riskLevel]
+        },
+        disabled: action.serialEffect === "disable"
+      };
+    }) : [];
+  }, [rowSelection, batchOperations, readOnly]);
+  var batchOperationsByKey = useCreation(function () {
+    return keyBy(batchOperations.todoList, 'id');
+  }, [batchOperations.todoList]);
+  var handleBatchOperationsClick = useMemoizedFn(function (key, data) {
+    var action = batchOperationsByKey[key];
+    if (action) onActionClick(action, {
+      data: data
+    });
+  });
+  var renderFunctionArea = useCallback(function () {
+    var _topActionGroup$todoL;
+    var resultComp = [];
+    if (!!(topActionGroup !== null && topActionGroup !== void 0 && (_topActionGroup$todoL = topActionGroup.todoList) !== null && _topActionGroup$todoL !== void 0 && _topActionGroup$todoL.length)) {
+      resultComp.push( /*#__PURE__*/React.createElement(LDActions, _extends({}, topActionGroup, {
+        doAction: function doAction(action) {
+          return ctx.doAction(action, {
+            instance: instanceRef.current,
+            datasetCode: dataset.code
+          });
+        }
+      })));
+    }
+    return resultComp;
+  }, [topActionGroup]);
+  var renderFilterArea = useCallback(function () {
+    return topFilter ? /*#__PURE__*/React.createElement(TopFilter, {
+      filter: topFilter,
+      instance: instanceRef
+    }) : null;
+  }, [topFilter]);
+  var handleOperationsClick = useMemoizedFn(function (key, data, e) {
+    switch (key) {
+      case 'read':
+        ctx.doAction(advance.events.onCardClick, {
+          data: data,
+          e: e
+        });
+        break;
+      case 'delete':
+        ctx.doAction(advance.events.onCardDelete, {
+          data: data,
+          e: e
+        });
+        break;
+      default:
+        ;
+    }
+  });
+  var getCheckboxDisabled = useMemoizedFn(function (record) {
+    if (isNil(disabledCheckbox)) return false;
+    return executeCode(ctx, disabledCheckbox, ['record'], record);
+  });
+  var getCheckboxProps = useMemoizedFn(function (record) {
+    return {
+      disabled: getCheckboxDisabled(record)
+    };
+  });
+  var _avatarUrl = useMemoizedFn(function (record) {
+    if (isNil(avatarUrl)) return null;
+    return executeCode(ctx, avatarUrl, ['record'], record);
+  });
+  var _renderTitle = useMemoizedFn(function (record) {
+    if (isNil(renderTitle)) return record.sname;
+    return executeCode(ctx, renderTitle, ['record'], record);
+  });
+  var _renderDescribe = useMemoizedFn(function (record) {
+    if (isNil(renderDescribe)) return record.describe;
+    return executeCode(ctx, renderDescribe, ['record'], record);
+  });
+  var _renderContent = useMemoizedFn(function (record) {
+    if (isNil(renderContent)) return null;
+    return executeCode(ctx, renderContent, ['record'], record);
+  });
+  var handleMount = useMemoizedFn(function (params) {
+    ctx.doAction(advance.events.onMount, {
+      params: params
+    });
+  });
+  var handleUnmount = useMemoizedFn(function () {
+    ctx.doAction(advance.events.onUnmount);
+  });
+  var handleAdd = useMemoizedFn(function () {
+    ctx.doAction(advance.events.onAddCardClick);
+  });
+  var handleDrop = useMemoizedFn(function (_ref2) {
+    var dragNodeProps = _ref2.dragNodeProps,
+      targetNodeProps = _ref2.targetNodeProps,
+      evt = _ref2.evt;
+    ctx.doAction(advance.events.onDrop, {
+      dragNodeProps: dragNodeProps,
+      targetNodeProps: targetNodeProps,
+      evt: evt
+    });
+  });
+  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.onAddCardClick) _events.onAdd = handleAdd;
+      if (advance.events.onDrop) _events.onDrop = handleDrop;
+      return _events;
+    }
+    return {};
+  }, [advance === null || advance === void 0 ? void 0 : advance.events]);
+  var _wrapperProps = useCreation(function () {
+    return _defineProperty({
+      id: id
+    }, LC_COMPONENT_UNIT_KEY, LC_COMPONENT_UNIT);
+  }, []);
   var getTargetDom = useMemoizedFn(function () {
-    return ref.current;
+    return wrapperRef.current;
   });
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
     displayName: "CardList",
-    getTargetDom: getTargetDom
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, "LCCardList"));
+    getTargetDom: getTargetDom,
+    api: apiRef
+  }, /*#__PURE__*/React.createElement(LdCard, _extends({
+    ref: instanceRef,
+    wrapper: wrapperRef,
+    wrapperProps: _wrapperProps,
+    _loading: ctx.loading,
+    className: classNames(_defineProperty({}, className, !!className)),
+    ldId: id,
+    dataSetKey: dataset === null || dataset === void 0 ? void 0 : dataset.code,
+    readOnly: readOnly,
+    isFlow: !pagination,
+    draggable: draggable,
+    col: col,
+    suppressInit: !autoLoad,
+    renderFunctionArea: renderFunctionArea,
+    renderFilterArea: renderFilterArea,
+    cardActions: _cardActions,
+    maxActionsCount: actions === null || actions === void 0 ? void 0 : actions.max,
+    onOperationsClick: handleOperationsClick,
+    renderAddCard: showAddCard ? addCardWords : false,
+    AddCardHeight: addCardHeight,
+    rowSelection: rowSelection && !readOnly ? {
+      getCheckboxProps: getCheckboxProps
+    } : false,
+    batchOperations: _batchOperations,
+    onBatchOperationsClick: handleBatchOperationsClick,
+    overModel: {
+      pageSize: pageSize
+    },
+    cardConfig: {
+      nocardBoxborder: nocardBoxborder,
+      showAvatar: showAvatar,
+      avatarUrl: _avatarUrl,
+      showTitle: showTitle,
+      showDesc: showDesc,
+      describeLines: describeLines,
+      renderTitle: _renderTitle,
+      renderDescribe: _renderDescribe,
+      renderContent: _renderContent
+    }
+  }, events)));
+});
+LCCardList.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 自动加载
+   * @desc 首次数据是否自动加载，若存在必须带搜索条件再加载的情况，需要关闭
+   * @type switch
+   * @default true
+   */
+  autoLoad: PropTypes.bool,
+  /**
+   * @name 只读
+   * @type switch
+   * @default false
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * @name 列数
+   * @type number
+   * @default 4
+   */
+  col: PropTypes.number,
+  /**
+   * @name 隐藏操作列
+   * @type switch
+   * @default false
+   * @groupNext actionsColumn
+   */
+  suppressActions: PropTypes.bool,
+  /**
+   * @name 最大显示数
+   * @type number
+   * @default 2
+   * @groupNext actionsColumn
+   */
+  maxActionsCount: PropTypes.number,
+  /**
+   * @name 操作项
+   * @type _TableActions
+   * @groupNext actionsColumn
+   * @default {"max": 3, "moreText": "更多操作", "todoList": []}
+   */
+  actions: PropTypes.shape({
+    max: PropTypes.number,
+    moreText: PropTypes.string,
+    todoList: PropTypes.array
+  }),
+  /**
+   * @name 顶部操作
+   * @type _ActionGroup
+   * @default {"display": "button", "max": 2, "moreText": "操作", "todoList": []}
+   */
+  topActionGroup: PropTypes.shape({
+    display: PropTypes.oneOf(['text', 'button']),
+    max: PropTypes.number,
+    moreText: PropTypes.string,
+    todoList: PropTypes.array
+  }),
+  /**
+   * @name 顶部过滤器
+   * @type _TableTopFilter
+   */
+  topFilter: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.shape({
+    options: PropTypes.array.isRequired,
+    field: PropTypes.string.isRequired
+  })]),
+  /**
+   * @name 展示新增卡片
+   * @type switch
+   * @default false
+   */
+  showAddCard: PropTypes.bool,
+  /**
+   * @name 新增卡片高度
+   * @type number
+   * @default 240
+   */
+  addCardHeight: PropTypes.number,
+  /**
+   * @name 新增卡片内容
+   * @type string
+   * @disabled "新建"
+   */
+  addCardWords: PropTypes.string,
+  /**
+   * @name 开启选择器
+   * @type switch
+   * @default false
+   */
+  rowSelection: PropTypes.bool,
+  /**
+   * @name 不可选卡片
+   * @type _JSEditor
+   * @default "function disabledCheckbox(record) { \n return false; \n}"
+   */
+  disabledCheckbox: PropTypes.string,
+  /**
+   * @name 卡片操作项
+   * @type _ActionsEditor
+   */
+  batchOperations: PropTypes.shape({
+    todoList: PropTypes.array.isRequired
+  }),
+  /**
+   * @name 每页行数
+   * @type number
+   * @default 40
+   */
+  pageSize: PropTypes.number,
+  /**
+   * @name 无边框风格
+   * @type switch
+   * @default false
+   */
+  nocardBoxborder: PropTypes.bool,
+  /**
+   * @name 显示图标
+   * @type switch
+   * @default true
+   */
+  showAvatar: PropTypes.bool,
+  /**
+   * @name 图标地址
+   * @type _JSEditor
+   * @default "function avatarUrl(record) { \n return null; \n}"
+   */
+  avatarUrl: PropTypes.string,
+  /**
+   * @name 显示标题
+   * @type switch
+   * @default true
+   */
+  showTitle: PropTypes.bool,
+  /**
+   * @name 标题内容
+   * @type _JSEditor
+   * @default "function renderTitle(record) { \n return record.sname; \n}"
+   */
+  renderTitle: PropTypes.string,
+  /**
+   * @name 显示描述
+   * @type switch
+   * @default true
+   */
+  showDesc: PropTypes.bool,
+  /**
+   * @name 描述最大展示行
+   * @type number
+   * @default 2
+   */
+  describeLines: PropTypes.number,
+  /**
+   * @name 描述内容
+   * @type _JSEditor
+   * @default "function renderDescribe(record) { \n return record.describe; \n}"
+   */
+  renderDescribe: PropTypes.string,
+  /**
+   * @name 自定义
+   * @type _JSEditor
+   * @default "function renderContent(record) { \n return null; \n}"
+   */
+  renderContent: PropTypes.string,
+  /**
+   * @name 组件首次渲染时
+   * @type _JSEditor
+   */
+  onMount: PropTypes.string,
+  /**
+   * @name 组件卸载时
+   * @type _JSEditor
+   */
+  onUnmount: PropTypes.string,
+  /**
+   * @name 新增卡片点击时
+   * @type _JSEditor
+   */
+  onAddCardClick: PropTypes.string
 };
+LCCardList.defaultProps = omitBadProps(defaultMeta);
 export default LCCardList;