choerodon-ui/pro/es/board/CardContent.js

An enterprise-class UI design language and React-based implementation

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["afterClick"],
    _excluded2 = ["afterClick"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { isValidElement, useCallback, useContext, cloneElement, useMemo, useEffect, useState } from 'react';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import { isArrayLike } from 'mobx';
import isString from 'lodash/isString';
import noop from 'lodash/noop';
import isObject from 'lodash/isObject';
import isFunction from 'lodash/isFunction';
import List from '../../../es/list';
import Icon from '../../../es/icon';
import Card from '../../../es/card';
import ReactResizeObserver from '../../../es/_util/resizeObserver';
import DataSet from '../data-set';
import BoardContext from './BoardContext';
import TableDynamicFilterBar from '../table/query-bar/TableDynamicFilterBar';
import { getEditorByField, getPlaceholderByField } from '../table/utils';
import Button from '../button/Button';
import { ButtonColor, ButtonType, FuncType } from '../button/enum';
import { useModal } from '../modal-provider/ModalProvider';
import { $l } from '../locale-context';
import KanbanCustomizationSettings from './kanban-customization-settings';
import { ViewField, ViewMode } from './enum';
import Output from '../output';
import CardCommand from './CardCommand';
import { TableButtonType } from '../table/interface';
import { DataSetStatus } from '../data-set/interface';
import Menu from '../menu';
import Dropdown from '../dropdown/Dropdown';
import Typography from '../typography';

var CardContent = function CardContent(props) {
  var tableBtns = props.tableBtns,
      buttonsLimit = props.buttonsLimit,
      buttons = props.buttons,
      _props$cardProps = props.cardProps,
      cardProps = _props$cardProps === void 0 ? {} : _props$cardProps,
      queryBarProps = props.queryBarProps;

  var _useContext = useContext(BoardContext),
      onChange = _useContext.onChange,
      displayFields = _useContext.displayFields,
      _useContext$renderBut = _useContext.renderButtons,
      renderButtons = _useContext$renderBut === void 0 ? noop : _useContext$renderBut,
      autoQuery = _useContext.autoQuery,
      getConfig = _useContext.getConfig,
      getProPrefixCls = _useContext.getProPrefixCls,
      _useContext$prefixCls = _useContext.prefixCls,
      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls,
      customizedDS = _useContext.customizedDS,
      dataSet = _useContext.dataSet,
      queryFields = _useContext.queryFields,
      command = _useContext.command,
      renderCommand = _useContext.renderCommand,
      commandsLimit = _useContext.commandsLimit;

  var viewProps = customizedDS.current.get(ViewField.viewProps);

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      cardHeight = _useState2[0],
      setCardHeight = _useState2[1];

  var modal = useModal();
  var openCustomizationModal = useCallback(function () {
    var modalProps = {
      drawer: true,
      okFirst: false,
      title: '卡片视图配置',
      children: /*#__PURE__*/React.createElement(KanbanCustomizationSettings, {
        viewMode: ViewMode.card
      }),
      bodyStyle: {
        overflow: 'hidden auto',
        padding: 0
      }
    };
    modalProps.okText = $l('Tabs', 'save');
    modal.open(modalProps);
  }, [modal]);
  var cardDS = useMemo(function () {
    var defaultSortParams = dataSet.combineSort && viewProps ? viewProps[ViewField.combineSort] || [] : [];
    var orgFields = dataSet.props.fields ? dataSet.props.fields : [];
    var orderFields = orgFields.map(function (field) {
      var orderField = defaultSortParams.find(function (of) {
        return of.sortName === field.name;
      });

      var newField = _objectSpread({}, field);

      if (orderField) {
        newField.order = orderField.order;
      }

      return newField;
    });
    return new DataSet(_objectSpread(_objectSpread(_objectSpread({}, dataSet.props), {}, {
      fields: orderFields
    }, cardProps.dsProps), {}, {
      autoQuery: false
    }));
  }, [dataSet.props]);
  /**
   * 查询看板数据
   */

  var loadData = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var changed;
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            dataSet.setState('__CURRENTVIEWDS__', cardDS);

            if (isFunction(onChange) && customizedDS) {
              changed = customizedDS.getState('__ISCHANGE__');

              if (changed) {
                onChange({
                  dataSet: dataSet,
                  currentViewDS: cardDS,
                  record: customizedDS.current
                });
              }
            }

            if (!autoQuery) {
              _context.next = 5;
              break;
            }

            _context.next = 5;
            return cardDS.query();

          case 5:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })), [dataSet, cardDS]);
  useEffect(function () {
    loadData();
  }, [dataSet, cardDS]);
  var cls = classnames("".concat(prefixCls, "-card-wrapper"), {});
  /**
  * 渲染查询条字段组件
  */

  var getQueryFields = useCallback(function () {
    var queryDataSet = cardDS.queryDataSet;
    var result = [];

    if (queryDataSet) {
      var fields = queryDataSet.fields,
          current = queryDataSet.current,
          _queryDataSet$props$f = queryDataSet.props.fields,
          propFields = _queryDataSet$props$f === void 0 ? [] : _queryDataSet$props$f;
      var cloneFields = fields.toJS();
      var tlsKey = getConfig('tlsKey');

      var processField = function processField(field, name) {
        if (!field.get('bind', current) && !name.includes(tlsKey)) {
          var element = queryFields[name];
          var filterBarProps = {};
          var inValidElement = getEditorByField(field, current, true);
          var placeholder = /*#__PURE__*/isValidElement(element) && element.props.placeholder ? element.props.placeholder : getPlaceholderByField(field, current);
          filterBarProps = {
            placeholder: placeholder,
            border: false,
            clearButton: true
          };
          var elementType = inValidElement.type;

          if ((! /*#__PURE__*/isValidElement(element) || element.props.suffix === undefined) && ['Currency', 'ObserverNumberField', 'EmailField', 'UrlField', 'ObserverTextField'].indexOf(elementType.name) !== -1) {
            _extends(filterBarProps, {
              suffix: /*#__PURE__*/React.createElement(Icon, {
                type: "search"
              })
            });
          }

          var _props = _objectSpread({
            key: name,
            name: name,
            dataSet: queryDataSet,
            isFlat: true
          }, filterBarProps);

          result.push( /*#__PURE__*/isValidElement(element) ? /*#__PURE__*/cloneElement(element, _props) : /*#__PURE__*/cloneElement(inValidElement, _objectSpread(_objectSpread({}, _props), isObject(element) ? element : {})));
        }
      };

      propFields.forEach(function (_ref2) {
        var name = _ref2.name;

        if (name) {
          var field = cloneFields.get(name);

          if (field) {
            cloneFields["delete"](name);
            processField(field, name);
          }
        }
      });
      cloneFields.forEach(function (field, name) {
        processField(field, name);
      });
    }

    return result;
  }, []);
  /**
  * buttons 大于 buttonsLimits 放入下拉
  * @param buttonsLimits
  */

  var getMoreButton = function getMoreButton(buttonsLimits) {
    var tableButtonProps = getConfig('tableButtonProps');
    var children = [];

    if (tableBtns && tableBtns.length && buttonsLimits) {
      tableBtns.slice(buttonsLimits).forEach(function (button) {
        var props = {};

        if (isArrayLike(button)) {
          props = button[1] || {};
          button = button[0];
        }

        if (isString(button) && button in TableButtonType) {
          var _props2 = props,
              afterClick = _props2.afterClick,
              buttonProps = _objectWithoutProperties(_props2, _excluded);

          var defaultButtonProps = getButtonProps(button);

          if (defaultButtonProps) {
            if (afterClick) {
              var onClick = defaultButtonProps.onClick;

              defaultButtonProps.onClick = /*#__PURE__*/function () {
                var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
                  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
                    while (1) {
                      switch (_context2.prev = _context2.next) {
                        case 0:
                          e.persist();
                          _context2.prev = 1;
                          _context2.next = 4;
                          return onClick(e);

                        case 4:
                          _context2.prev = 4;
                          afterClick(e);
                          return _context2.finish(4);

                        case 7:
                        case "end":
                          return _context2.stop();
                      }
                    }
                  }, _callee2, null, [[1,, 4, 7]]);
                }));

                return function (_x) {
                  return _ref3.apply(this, arguments);
                };
              }();
            }

            children.push( /*#__PURE__*/React.createElement(Menu.Item, {
              hidden: tableButtonProps.hidden,
              key: button
            }, /*#__PURE__*/React.createElement(Button, _extends({
              key: "".concat(button, "-btn")
            }, tableButtonProps, defaultButtonProps, buttonProps, {
              funcType: FuncType.link
            }))));
          }
        } else if ( /*#__PURE__*/isValidElement(button)) {
          children.push( /*#__PURE__*/React.createElement(Menu.Item, {
            hidden: button.props.hidden
          }, /*#__PURE__*/cloneElement(button, _objectSpread(_objectSpread(_objectSpread({}, tableButtonProps), button.props), {}, {
            funcType: FuncType.link
          }))));
        } else if (isObject(button)) {
          children.push( /*#__PURE__*/React.createElement(Menu.Item, {
            hidden: props.hidden
          }, /*#__PURE__*/React.createElement(Button, _extends({}, tableButtonProps, button, {
            funcType: FuncType.link
          }))));
        }
      });
    }

    var menu = /*#__PURE__*/React.createElement(Menu, {
      prefixCls: "".concat(getProPrefixCls('table'), "-dropdown-menu")
    }, children);
    return /*#__PURE__*/React.createElement(Dropdown, {
      overlay: menu,
      key: "dropdown_button"
    }, /*#__PURE__*/React.createElement(Button, _extends({}, tableButtonProps, {
      key: "more_button"
    }), /*#__PURE__*/React.createElement("span", null, $l('Table', 'more')), /*#__PURE__*/React.createElement(Icon, {
      type: 'expand_more'
    })));
  };

  var getButtonProps = useCallback(function (type) {
    var disabled = cardDS.status !== DataSetStatus.ready;

    switch (type) {
      case TableButtonType.add:
        return {
          icon: 'playlist_add',
          onClick: function onClick() {
            return cardDS.create({}, 0);
          },
          children: $l('Table', 'create_button'),
          disabled: disabled || (cardDS.parent ? !cardDS.parent.current : false)
        };

      case TableButtonType.save:
        return {
          icon: 'save',
          onClick: function onClick() {
            return cardDS.submit();
          },
          children: $l('Table', 'save_button'),
          type: ButtonType.submit,
          disabled: disabled
        };

      case TableButtonType["delete"]:
        return {
          icon: 'delete',
          onClick: function onClick() {
            return cardDS["delete"](cardDS.selected);
          },
          children: $l('Table', 'delete_button'),
          disabled: disabled || cardDS.selected.length === 0
        };

      case TableButtonType.remove:
        return {
          icon: 'remove_circle',
          onClick: function onClick() {
            return cardDS.remove(cardDS.selected);
          },
          children: $l('Table', 'remove_button'),
          disabled: disabled || cardDS.selected.length === 0
        };

      case TableButtonType.reset:
        return {
          icon: 'undo',
          onClick: function onClick() {
            return cardDS.reset();
          },
          children: $l('Table', 'reset_button'),
          type: ButtonType.reset
        };

      case TableButtonType.query:
        return {
          icon: 'search',
          onClick: function () {
            var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
              return _regeneratorRuntime.wrap(function _callee3$(_context3) {
                while (1) {
                  switch (_context3.prev = _context3.next) {
                    case 0:
                      _context3.next = 2;
                      return cardDS.modifiedCheck(undefined, dataSet, 'query');

                    case 2:
                      _context3.t2 = _context3.sent;

                      if (!_context3.t2) {
                        _context3.next = 5;
                        break;
                      }

                      _context3.t2 = cardDS.queryDataSet;

                    case 5:
                      _context3.t1 = _context3.t2;

                      if (!_context3.t1) {
                        _context3.next = 8;
                        break;
                      }

                      _context3.t1 = cardDS.queryDataSet.current;

                    case 8:
                      _context3.t0 = _context3.t1;

                      if (!_context3.t0) {
                        _context3.next = 13;
                        break;
                      }

                      _context3.next = 12;
                      return cardDS.queryDataSet.current.validate();

                    case 12:
                      _context3.t0 = _context3.sent;

                    case 13:
                      if (!_context3.t0) {
                        _context3.next = 15;
                        break;
                      }

                      return _context3.abrupt("return", cardDS.query());

                    case 15:
                    case "end":
                      return _context3.stop();
                  }
                }
              }, _callee3);
            }));

            function onClick() {
              return _onClick.apply(this, arguments);
            }

            return onClick;
          }(),
          children: $l('Table', 'query_button')
        };

      case TableButtonType["export"]:
        return undefined;

      case TableButtonType.expandAll:
        return undefined;

      case TableButtonType.collapseAll:
        return undefined;

      default:
    }
  }, []);
  var getButtons = useCallback(function (buttonsArr) {
    var children = [];
    var buttons = buttonsArr || tableBtns;

    if (buttons) {
      var tableButtonProps = getConfig('tableButtonProps');

      var _buttonsArr = buttons.slice(0, buttonsLimit);

      _buttonsArr.forEach(function (button) {
        var props = {};

        if (isArrayLike(button)) {
          props = button[1] || {};
          button = button[0];
        }

        if (isString(button) && button in TableButtonType) {
          var _props3 = props,
              afterClick = _props3.afterClick,
              buttonProps = _objectWithoutProperties(_props3, _excluded2);

          var defaultButtonProps = getButtonProps(button);

          if (defaultButtonProps) {
            if (afterClick) {
              var onClick = defaultButtonProps.onClick;

              defaultButtonProps.onClick = /*#__PURE__*/function () {
                var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(e) {
                  return _regeneratorRuntime.wrap(function _callee4$(_context4) {
                    while (1) {
                      switch (_context4.prev = _context4.next) {
                        case 0:
                          e.persist();
                          _context4.prev = 1;
                          _context4.next = 4;
                          return onClick(e);

                        case 4:
                          _context4.prev = 4;
                          afterClick(e);
                          return _context4.finish(4);

                        case 7:
                        case "end":
                          return _context4.stop();
                      }
                    }
                  }, _callee4, null, [[1,, 4, 7]]);
                }));

                return function (_x2) {
                  return _ref4.apply(this, arguments);
                };
              }();
            }

            children.push( /*#__PURE__*/React.createElement(Button, _extends({
              key: button
            }, tableButtonProps, defaultButtonProps, buttonProps)));
          }
        } else if ( /*#__PURE__*/isValidElement(button)) {
          children.push( /*#__PURE__*/cloneElement(button, _objectSpread(_objectSpread({}, tableButtonProps), button.props)));
        } else if (isObject(button)) {
          children.push( /*#__PURE__*/React.createElement(Button, _extends({}, tableButtonProps, button)));
        }
      });

      if (buttonsLimit && buttons.length > buttonsLimit) {
        var moreButton = getMoreButton(buttonsLimit);
        children.push(moreButton);
      }
    }

    return children;
  }, [tableBtns, cardDS]);

  var getCustomizationIcon = function getCustomizationIcon() {
    var _customizedDS$current2;

    // 是否存在切换面板按钮
    var hasButtons = buttons && buttons.length; // 是否存在视图按钮控制

    var shouldRenderTableBtns = !isFunction(renderButtons);
    var tableButtons = getButtons();
    var mergeButtons = buttons && buttons.length ? _toConsumableArray(buttons) : [];

    if (hasButtons) {
      var _customizedDS$current;

      if (shouldRenderTableBtns) {
        mergeButtons.push(tableButtons);
      } else {
        var getBtns = getButtons(renderButtons({
          viewMode: ViewMode.card,
          dataSet: cardDS,
          buttons: tableButtons
        }));
        mergeButtons.push(getBtns);
      }

      mergeButtons.unshift( /*#__PURE__*/React.createElement(Button, {
        className: "".concat(prefixCls, "-hover-button"),
        funcType: FuncType.flat,
        color: ButtonColor.primary,
        hidden: ((_customizedDS$current = customizedDS.current) === null || _customizedDS$current === void 0 ? void 0 : _customizedDS$current.get(ViewField.id)) === '__DEFAULT__',
        icon: "settings-o",
        onClick: openCustomizationModal
      }));
      return mergeButtons;
    }

    var buttonRenderer = [/*#__PURE__*/React.createElement(Button, {
      key: "settings",
      className: "".concat(prefixCls, "-hover-button"),
      funcType: FuncType.flat,
      color: ButtonColor.primary,
      icon: "settings-o",
      hidden: ((_customizedDS$current2 = customizedDS.current) === null || _customizedDS$current2 === void 0 ? void 0 : _customizedDS$current2.get(ViewField.id)) === '__DEFAULT__',
      onClick: openCustomizationModal
    })];

    if (shouldRenderTableBtns) {
      buttonRenderer.unshift(tableBtns);
    } else {
      buttonRenderer.unshift(renderButtons({
        viewMode: ViewMode.card,
        dataSet: cardDS,
        buttons: tableBtns
      }));
    }

    return buttonRenderer;
  };

  var handleResize = useCallback(function (_width, height) {
    if (height > cardHeight) {
      setCardHeight(height + 1);
    }
  }, [cardHeight]);
  useEffect(function () {
    setCardHeight(0);
  }, [customizedDS.current]);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      height: '100%'
    }
  }, cardDS && cardDS.queryDataSet ? /*#__PURE__*/React.createElement(TableDynamicFilterBar, _extends({}, queryBarProps, {
    dataSet: cardDS,
    queryDataSet: cardDS.queryDataSet,
    queryFields: getQueryFields(),
    buttons: getCustomizationIcon()
  })) : getCustomizationIcon(), /*#__PURE__*/React.createElement("div", {
    className: cls
  }, /*#__PURE__*/React.createElement(List // @ts-ignore
  , {
    // @ts-ignore
    style: {
      height: viewProps && viewProps.viewHeight || 366,
      overflowX: 'hidden',
      overflowY: 'auto'
    },
    grid: {
      gutter: 16,
      column: 24 / customizedDS.current.get(ViewField.cardWidth) || 4
    },
    dataSet: cardDS,
    pagination: !!cardDS.paging,
    renderItem: function renderItem(_ref5) {
      var record = _ref5.record;
      return /*#__PURE__*/React.createElement(List.Item, {
        key: "".concat(record.id, "-card"),
        className: "".concat(prefixCls, "-card-container")
      }, /*#__PURE__*/React.createElement(ReactResizeObserver, {
        resizeProp: "height",
        onResize: handleResize,
        immediately: true
      }, /*#__PURE__*/React.createElement(Card, _extends({
        key: "".concat(record.id, "-card-content")
      }, cardProps, {
        selected: record.isSelected,
        style: _objectSpread(_objectSpread({}, cardProps.style), {}, {
          minHeight: cardHeight
        }),
        title: viewProps && viewProps.displayFields ? /*#__PURE__*/React.createElement(Typography.Paragraph, {
          ellipsis: {
            rows: 2,
            tooltip: /*#__PURE__*/React.createElement(Output, {
              name: viewProps.displayFields[0],
              record: record,
              renderer: displayFields.find(function (df) {
                return df.name === viewProps.displayFields[0];
              }) ? displayFields.find(function (df) {
                return df.name === viewProps.displayFields[0];
              }).renderer : noop
            })
          },
          name: viewProps.displayFields[0],
          record: record,
          renderer: displayFields.find(function (df) {
            return df.name === viewProps.displayFields[0];
          }) ? displayFields.find(function (df) {
            return df.name === viewProps.displayFields[0];
          }).renderer : noop
        }) : null,
        onClick: function onClick(e) {
          if (cardDS.selection) {
            if (record.isSelected) {
              cardDS.unSelect(record);
            } else {
              cardDS.select(record);
            }
          }

          if (isFunction(cardProps.onClick)) {
            cardProps.onClick(e, record);
          }
        },
        onHeadClick: function onHeadClick(e) {
          if (isFunction(cardProps.onHeadClick)) {
            cardProps.onHeadClick(e, record);
          }
        },
        extra: /*#__PURE__*/React.createElement(CardCommand, {
          command: command,
          dataSet: cardDS,
          record: record,
          renderCommand: renderCommand,
          prefixCls: prefixCls,
          viewMode: ViewMode.card,
          commandsLimit: commandsLimit
        })
      }), viewProps && viewProps.displayFields ? viewProps.displayFields.map(function (fieldName) {
        return /*#__PURE__*/React.createElement("div", {
          key: "".concat(fieldName, "-card-label"),
          className: "".concat(prefixCls, "-quote-content-item")
        }, /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-quote-content-label"),
          hidden: !viewProps.showLabel
        }, record.getField(fieldName).get('label')), /*#__PURE__*/React.createElement(Typography.Text, {
          ellipsis: {
            tooltip: true
          },
          name: fieldName,
          record: record,
          renderer: displayFields.find(function (df) {
            return df.name === fieldName;
          }) ? displayFields.find(function (df) {
            return df.name === fieldName;
          }).renderer : noop
        }));
      }) : null)));
    }
  })));
};

CardContent.defaultProps = {
  animated: true
};
CardContent.displayName = 'CardContent';
export default observer(CardContent);
//# sourceMappingURL=CardContent.js.map