linkmore-design/lib/custom-table-option/components/DrawerWrapper.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _icons = require("@ant-design/icons");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _ = require("..");
var _button = _interopRequireDefault(require("../../button"));
var _drawer = _interopRequireDefault(require("../../drawer"));
var _modal = _interopRequireDefault(require("../../modal"));
var _space = _interopRequireDefault(require("../../space"));
var _tabs = _interopRequireDefault(require("../../tabs"));
var _CardConfig = _interopRequireDefault(require("./CardConfig"));
var _FilterConfig = _interopRequireDefault(require("./FilterConfig"));
var _TableConfig = _interopRequireDefault(require("./TableConfig"));
// import OtherConfig from './OtherConfig'

const DrawerWrapper = /*#__PURE__*/_react.default.memo(({
  instance
}) => {
  const {
    state,
    filter,
    columns,
    card,
    className,
    onClose,
    onSave,
    recommendNumObj,
    locale,
    customDrawer
  } = instance;
  const {
    visible
  } = state;
  const items = () => {
    const arr = [filter?.length && {
      label: locale.filter,
      key: '1',
      // forceRender: true,
      children: /*#__PURE__*/_react.default.createElement(_FilterConfig.default, {
        instance: instance
      })
    }, columns?.length && {
      label: locale.column,
      key: '2',
      // forceRender: true,
      children: /*#__PURE__*/_react.default.createElement(_TableConfig.default, {
        instance: instance
      })
    }, card?.length && {
      label: locale.card,
      key: '4',
      // forceRender: true,
      children: /*#__PURE__*/_react.default.createElement(_CardConfig.default, {
        instance: instance
      })
    }
    // {
    //   label: locale.other,
    //   key: '5',
    //   // forceRender: true,
    //   children: <OtherConfig instance={instance} />,
    // },
    ];

    return arr.filter(Boolean);
  };
  const getStateValue = (arr, type, rowKey = 'dataIndex') => {
    const obj = {};
    arr?.forEach(item => {
      obj[item[rowKey]] = {};
      if (![undefined, null].includes(item.order)) {
        obj[item[rowKey]].order = item.order;
      }
      if (![undefined, null].includes(item.show)) {
        obj[item[rowKey]].show = item.show;
      }
      if (type === 'columns') {
        if (![undefined, null].includes(item.fixed)) {
          obj[item[rowKey]].fixed = item.fixed;
        }
      }
    });
    return obj;
  };
  const handleSave = () => {
    const {
      filter: filterData,
      columns: columnsData,
      card: cardData,
      size,
      cardMode,
      previewSize,
      isChange
    } = state;
    const ColStateValue = getStateValue(columnsData, 'columns');
    const filterStateValue = getStateValue(filterData, 'filter', 'field');
    const cardStateValue = getStateValue(cardData, 'card') || {};
    const onOk = () => {
      onSave?.({
        columnsData,
        ColStateValue,
        filterData,
        filterStateValue,
        size,
        cardMode,
        saveSetting: false,
        previewSize,
        ...(cardData?.length ? {
          cardData,
          cardStateValue
        } : {})
      });
      onClose();
    };
    if (cardData?.length > (recommendNumObj?.card || 10) && !!isChange) {
      _modal.default.confirm({
        title: locale.confirmTitle,
        icon: /*#__PURE__*/_react.default.createElement(_icons.ExclamationCircleOutlined, null),
        content: '',
        okText: locale.confirm,
        cancelText: locale.cancel,
        onOk
      });
    } else {
      onOk();
    }
  };
  const DrawerComponent = customDrawer ? customDrawer : _drawer.default;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(DrawerComponent, {
    className: (0, _classnames.default)(className, _.PREFIXCLS),
    title: locale.setting,
    open: visible,
    width: 384,
    contentWrapperStyle: {
      margin: 24
    },
    extra: /*#__PURE__*/_react.default.createElement(_space.default, null, /*#__PURE__*/_react.default.createElement(_button.default, {
      size: "middle",
      onClick: onClose
    }, locale.cancel), /*#__PURE__*/_react.default.createElement(_button.default, {
      size: "middle",
      onClick: handleSave,
      type: "primary"
    }, locale.confirm)),
    onClose: onClose
  }, /*#__PURE__*/_react.default.createElement(_tabs.default, {
    defaultActiveKey: "1",
    size: "small",
    tabBarGutter: 24,
    items: items()
  })));
});
var _default = DrawerWrapper;
exports.default = _default;