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

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

@@ -1,29 +1,493 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 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 _ContextProvider = require("../../../engine/provider/ContextProvider");
 var _Wrapper = _interopRequireDefault(require("../Wrapper"));
-var _excluded = ["id"];
-var LCCardList = function LCCardList(_ref) {
+var _index = require("../../../../index");
+var _TopFilter = _interopRequireDefault(require("../Table/components/TopFilter"));
+var _helper = require("../../../engine/tools/helper");
+var _useCombinedRefs = _interopRequireDefault(require("../../../engine/tools/useCombinedRefs"));
+var _cardlistPropsDefault = _interopRequireDefault(require("../../../engine/meta/cardlist.props.default.json"));
+var _constants = require("../../../constants");
+var LCCardList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var id = _ref.id,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var ref = (0, _react.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 = (0, _ContextProvider.useContext)();
+  var apiRef = (0, _react.useRef)();
+  var wrapperRef = (0, _react.useRef)();
+  var instanceRef = (0, _useCombinedRefs.default)(ref);
+  (0, _react.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 = (0, _ahooks.useMemoizedFn)(function (action, props) {
+    var doAction = function doAction() {
+      ctx.doAction(action.actionPool, props);
+    };
+    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();
+    }
+  });
+  var _cardActions = (0, _ahooks.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.default.createElement(_base.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 = (0, _ahooks.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 = (0, _ahooks.useCreation)(function () {
+    return (0, _lodash.keyBy)(batchOperations.todoList, 'id');
+  }, [batchOperations.todoList]);
+  var handleBatchOperationsClick = (0, _ahooks.useMemoizedFn)(function (key, data) {
+    var action = batchOperationsByKey[key];
+    if (action) onActionClick(action, {
+      data: data
+    });
+  });
+  var renderFunctionArea = (0, _react.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.default.createElement(_index.LDActions, (0, _extends2.default)({}, topActionGroup, {
+        doAction: function doAction(action) {
+          return ctx.doAction(action, {
+            instance: instanceRef.current,
+            datasetCode: dataset.code
+          });
+        }
+      })));
+    }
+    return resultComp;
+  }, [topActionGroup]);
+  var renderFilterArea = (0, _react.useCallback)(function () {
+    return topFilter ? /*#__PURE__*/_react.default.createElement(_TopFilter.default, {
+      filter: topFilter,
+      instance: instanceRef
+    }) : null;
+  }, [topFilter]);
+  var handleOperationsClick = (0, _ahooks.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 = (0, _ahooks.useMemoizedFn)(function (record) {
+    if ((0, _lodash.isNil)(disabledCheckbox)) return false;
+    return (0, _helper.executeCode)(ctx, disabledCheckbox, ['record'], record);
+  });
+  var getCheckboxProps = (0, _ahooks.useMemoizedFn)(function (record) {
+    return {
+      disabled: getCheckboxDisabled(record)
+    };
+  });
+  var _avatarUrl = (0, _ahooks.useMemoizedFn)(function (record) {
+    if ((0, _lodash.isNil)(avatarUrl)) return null;
+    return (0, _helper.executeCode)(ctx, avatarUrl, ['record'], record);
+  });
+  var _renderTitle = (0, _ahooks.useMemoizedFn)(function (record) {
+    if ((0, _lodash.isNil)(renderTitle)) return record.sname;
+    return (0, _helper.executeCode)(ctx, renderTitle, ['record'], record);
+  });
+  var _renderDescribe = (0, _ahooks.useMemoizedFn)(function (record) {
+    if ((0, _lodash.isNil)(renderDescribe)) return record.describe;
+    return (0, _helper.executeCode)(ctx, renderDescribe, ['record'], record);
+  });
+  var _renderContent = (0, _ahooks.useMemoizedFn)(function (record) {
+    if ((0, _lodash.isNil)(renderContent)) return null;
+    return (0, _helper.executeCode)(ctx, renderContent, ['record'], record);
+  });
+  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 handleAdd = (0, _ahooks.useMemoizedFn)(function () {
+    ctx.doAction(advance.events.onAddCardClick);
+  });
+  var handleDrop = (0, _ahooks.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 = (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.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 = (0, _ahooks.useCreation)(function () {
+    return (0, _defineProperty2.default)({
+      id: id
+    }, _constants.LC_COMPONENT_UNIT_KEY, _constants.LC_COMPONENT_UNIT);
+  }, []);
   var getTargetDom = (0, _ahooks.useMemoizedFn)(function () {
-    return ref.current;
+    return wrapperRef.current;
   });
   return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
     id: id,
     displayName: "CardList",
-    getTargetDom: getTargetDom
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref
-  }, "LCCardList"));
+    getTargetDom: getTargetDom,
+    api: apiRef
+  }, /*#__PURE__*/_react.default.createElement(_index.LdCard, (0, _extends2.default)({
+    ref: instanceRef,
+    wrapper: wrapperRef,
+    wrapperProps: _wrapperProps,
+    _loading: ctx.loading,
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, 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.default.string.isRequired,
+  /**
+   * @name 数据集
+   * @type _DataSetSelector
+   */
+  dataset: _propTypes.default.shape({
+    code: _propTypes.default.string.isRequired,
+    uid: _propTypes.default.string.isRequired
+  }),
+  /**
+   * @name 自动加载
+   * @desc 首次数据是否自动加载，若存在必须带搜索条件再加载的情况，需要关闭
+   * @type switch
+   * @default true
+   */
+  autoLoad: _propTypes.default.bool,
+  /**
+   * @name 只读
+   * @type switch
+   * @default false
+   */
+  readOnly: _propTypes.default.bool,
+  /**
+   * @name 列数
+   * @type number
+   * @default 4
+   */
+  col: _propTypes.default.number,
+  /**
+   * @name 隐藏操作列
+   * @type switch
+   * @default false
+   * @groupNext actionsColumn
+   */
+  suppressActions: _propTypes.default.bool,
+  /**
+   * @name 最大显示数
+   * @type number
+   * @default 2
+   * @groupNext actionsColumn
+   */
+  maxActionsCount: _propTypes.default.number,
+  /**
+   * @name 操作项
+   * @type _TableActions
+   * @groupNext actionsColumn
+   * @default {"max": 3, "moreText": "更多操作", "todoList": []}
+   */
+  actions: _propTypes.default.shape({
+    max: _propTypes.default.number,
+    moreText: _propTypes.default.string,
+    todoList: _propTypes.default.array
+  }),
+  /**
+   * @name 顶部操作
+   * @type _ActionGroup
+   * @default {"display": "button", "max": 2, "moreText": "操作", "todoList": []}
+   */
+  topActionGroup: _propTypes.default.shape({
+    display: _propTypes.default.oneOf(['text', 'button']),
+    max: _propTypes.default.number,
+    moreText: _propTypes.default.string,
+    todoList: _propTypes.default.array
+  }),
+  /**
+   * @name 顶部过滤器
+   * @type _TableTopFilter
+   */
+  topFilter: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array, _propTypes.default.shape({
+    options: _propTypes.default.array.isRequired,
+    field: _propTypes.default.string.isRequired
+  })]),
+  /**
+   * @name 展示新增卡片
+   * @type switch
+   * @default false
+   */
+  showAddCard: _propTypes.default.bool,
+  /**
+   * @name 新增卡片高度
+   * @type number
+   * @default 240
+   */
+  addCardHeight: _propTypes.default.number,
+  /**
+   * @name 新增卡片内容
+   * @type string
+   * @disabled "新建"
+   */
+  addCardWords: _propTypes.default.string,
+  /**
+   * @name 开启选择器
+   * @type switch
+   * @default false
+   */
+  rowSelection: _propTypes.default.bool,
+  /**
+   * @name 不可选卡片
+   * @type _JSEditor
+   * @default "function disabledCheckbox(record) { \n return false; \n}"
+   */
+  disabledCheckbox: _propTypes.default.string,
+  /**
+   * @name 卡片操作项
+   * @type _ActionsEditor
+   */
+  batchOperations: _propTypes.default.shape({
+    todoList: _propTypes.default.array.isRequired
+  }),
+  /**
+   * @name 每页行数
+   * @type number
+   * @default 40
+   */
+  pageSize: _propTypes.default.number,
+  /**
+   * @name 无边框风格
+   * @type switch
+   * @default false
+   */
+  nocardBoxborder: _propTypes.default.bool,
+  /**
+   * @name 显示图标
+   * @type switch
+   * @default true
+   */
+  showAvatar: _propTypes.default.bool,
+  /**
+   * @name 图标地址
+   * @type _JSEditor
+   * @default "function avatarUrl(record) { \n return null; \n}"
+   */
+  avatarUrl: _propTypes.default.string,
+  /**
+   * @name 显示标题
+   * @type switch
+   * @default true
+   */
+  showTitle: _propTypes.default.bool,
+  /**
+   * @name 标题内容
+   * @type _JSEditor
+   * @default "function renderTitle(record) { \n return record.sname; \n}"
+   */
+  renderTitle: _propTypes.default.string,
+  /**
+   * @name 显示描述
+   * @type switch
+   * @default true
+   */
+  showDesc: _propTypes.default.bool,
+  /**
+   * @name 描述最大展示行
+   * @type number
+   * @default 2
+   */
+  describeLines: _propTypes.default.number,
+  /**
+   * @name 描述内容
+   * @type _JSEditor
+   * @default "function renderDescribe(record) { \n return record.describe; \n}"
+   */
+  renderDescribe: _propTypes.default.string,
+  /**
+   * @name 自定义
+   * @type _JSEditor
+   * @default "function renderContent(record) { \n return null; \n}"
+   */
+  renderContent: _propTypes.default.string,
+  /**
+   * @name 组件首次渲染时
+   * @type _JSEditor
+   */
+  onMount: _propTypes.default.string,
+  /**
+   * @name 组件卸载时
+   * @type _JSEditor
+   */
+  onUnmount: _propTypes.default.string,
+  /**
+   * @name 新增卡片点击时
+   * @type _JSEditor
+   */
+  onAddCardClick: _propTypes.default.string
 };
+LCCardList.defaultProps = (0, _helper.omitBadProps)(_cardlistPropsDefault.default);
 var _default = exports.default = LCCardList;