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

🌈 🚀lm组件库。🚀

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { ExclamationCircleOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import React from 'react';
import { PREFIXCLS } from '..';
import Button from "../../button";
import Drawer from "../../drawer";
import Modal from "../../modal";
import Space from "../../space";
import Tabs from "../../tabs";
import CardConfig from "./CardConfig";
import FilterConfig from "./FilterConfig";
import TableConfig from "./TableConfig";
// import OtherConfig from './OtherConfig'

var DrawerWrapper = /*#__PURE__*/React.memo(function (_ref) {
  var instance = _ref.instance;
  var state = instance.state,
    filter = instance.filter,
    columns = instance.columns,
    card = instance.card,
    className = instance.className,
    onClose = instance.onClose,
    onSave = instance.onSave,
    recommendNumObj = instance.recommendNumObj,
    locale = instance.locale,
    customDrawer = instance.customDrawer;
  var visible = state.visible;
  var items = function items() {
    var arr = [(filter === null || filter === void 0 ? void 0 : filter.length) && {
      label: locale.filter,
      key: '1',
      // forceRender: true,
      children: /*#__PURE__*/React.createElement(FilterConfig, {
        instance: instance
      })
    }, (columns === null || columns === void 0 ? void 0 : columns.length) && {
      label: locale.column,
      key: '2',
      // forceRender: true,
      children: /*#__PURE__*/React.createElement(TableConfig, {
        instance: instance
      })
    }, (card === null || card === void 0 ? void 0 : card.length) && {
      label: locale.card,
      key: '4',
      // forceRender: true,
      children: /*#__PURE__*/React.createElement(CardConfig, {
        instance: instance
      })
    }
    // {
    //   label: locale.other,
    //   key: '5',
    //   // forceRender: true,
    //   children: <OtherConfig instance={instance} />,
    // },
    ];

    return arr.filter(Boolean);
  };
  var getStateValue = function getStateValue(arr, type) {
    var rowKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'dataIndex';
    var obj = {};
    arr === null || arr === void 0 ? void 0 : arr.forEach(function (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;
  };
  var handleSave = function handleSave() {
    var filterData = state.filter,
      columnsData = state.columns,
      cardData = state.card,
      size = state.size,
      cardMode = state.cardMode,
      previewSize = state.previewSize,
      isChange = state.isChange;
    var ColStateValue = getStateValue(columnsData, 'columns');
    var filterStateValue = getStateValue(filterData, 'filter', 'field');
    var cardStateValue = getStateValue(cardData, 'card') || {};
    var onOk = function onOk() {
      onSave === null || onSave === void 0 ? void 0 : onSave(_objectSpread({
        columnsData: columnsData,
        ColStateValue: ColStateValue,
        filterData: filterData,
        filterStateValue: filterStateValue,
        size: size,
        cardMode: cardMode,
        saveSetting: false,
        previewSize: previewSize
      }, cardData !== null && cardData !== void 0 && cardData.length ? {
        cardData: cardData,
        cardStateValue: cardStateValue
      } : {}));
      onClose();
    };
    if ((cardData === null || cardData === void 0 ? void 0 : cardData.length) > ((recommendNumObj === null || recommendNumObj === void 0 ? void 0 : recommendNumObj.card) || 10) && !!isChange) {
      Modal.confirm({
        title: locale.confirmTitle,
        icon: /*#__PURE__*/React.createElement(ExclamationCircleOutlined, null),
        content: '',
        okText: locale.confirm,
        cancelText: locale.cancel,
        onOk: onOk
      });
    } else {
      onOk();
    }
  };
  var DrawerComponent = customDrawer ? customDrawer : Drawer;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DrawerComponent, {
    className: classNames(className, PREFIXCLS),
    title: locale.setting,
    open: visible,
    width: 384,
    contentWrapperStyle: {
      margin: 24
    },
    extra: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
      size: "middle",
      onClick: onClose
    }, locale.cancel), /*#__PURE__*/React.createElement(Button, {
      size: "middle",
      onClick: handleSave,
      type: "primary"
    }, locale.confirm)),
    onClose: onClose
  }, /*#__PURE__*/React.createElement(Tabs, {
    defaultActiveKey: "1",
    size: "small",
    tabBarGutter: 24,
    items: items()
  })));
});
export default DrawerWrapper;