choerodon-ui/es/tabs/customization-settings/CustomizationSettings.js

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { cloneElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { observer } from 'mobx-react-lite';
import merge from 'lodash/merge';
import DataSet from '../../../pro/es/data-set/DataSet';
import Button from '../../../pro/es/button';
import { $l } from '../../../pro/es/locale-context';
import { ButtonColor, FuncType } from '../../../pro/es/button/enum';
import TabGroups from './tab-groups';
import TabsContext from '../TabsContext';
import { getDefaultActiveKey, normalizePanes } from '../utils';

function processPaneToData(pane, key, group) {
  var tab = pane.tab,
      title = pane.title,
      sort = pane.sort,
      showCount = pane.showCount;
  return {
    key: key,
    tab: tab,
    title: title,
    sort: sort,
    showCount: showCount,
    group: group
  };
}

function normalizePanesToData(pair) {
  var _pair = _slicedToArray(pair, 2),
      totalPanelsMap = _pair[0],
      groupPanelMap = _pair[1];

  var data = [];

  if (groupPanelMap.size > 0) {
    groupPanelMap.forEach(function (paneMap, key) {
      return paneMap.panelsMap.forEach(function (pane, paneKey) {
        return data.push(processPaneToData(pane, paneKey, key));
      });
    });
  } else {
    totalPanelsMap.forEach(function (pane, paneKey) {
      return data.push(processPaneToData(pane, paneKey));
    });
  }

  return data;
}

var CustomizationSettings = function CustomizationSettings(props) {
  var modal = props.modal;

  var _useContext = useContext(TabsContext),
      customized = _useContext.customized,
      saveCustomized = _useContext.saveCustomized,
      totalPanelsMap = _useContext.totalPanelsMap,
      groupedPanelsMap = _useContext.groupedPanelsMap,
      defaultActiveKey = _useContext.defaultActiveKey,
      actuallyDefaultActiveKey = _useContext.actuallyDefaultActiveKey,
      propActiveKey = _useContext.propActiveKey,
      children = _useContext.children;

  var oldCustomized = useMemo(function () {
    return customized ? merge({}, customized) : {
      panes: {}
    };
  }, [customized]);
  var tempCustomized = useRef(oldCustomized);

  var _useState = useState(function () {
    return [totalPanelsMap, groupedPanelsMap];
  }),
      _useState2 = _slicedToArray(_useState, 2),
      customizedPanes = _useState2[0],
      setCustomizedPanes = _useState2[1];

  var _useState3 = useState(actuallyDefaultActiveKey),
      _useState4 = _slicedToArray(_useState3, 2),
      defaultKey = _useState4[0],
      setDefaultKey = _useState4[1];

  var panesDataSet = useMemo(function () {
    return new DataSet({
      data: normalizePanesToData(customizedPanes),
      paging: false,
      primaryKey: 'key',
      fields: [{
        name: 'group',
        group: true
      }],
      events: {
        update: function update(_ref) {
          var record = _ref.record,
              name = _ref.name,
              value = _ref.value;
          var current = tempCustomized.current;
          var key = record.key;

          if (!current.panes[key]) {
            current.panes[key] = {};
          }

          current.panes[key][name] = value;
        }
      }
    });
  }, [customizedPanes, tempCustomized]);
  var handleRestorePanes = useCallback(function (e) {
    e.stopPropagation();

    var _normalizePanes = normalizePanes(children),
        _normalizePanes2 = _slicedToArray(_normalizePanes, 2),
        newTotalPanelsMap = _normalizePanes2[0],
        newGroupedPanelsMap = _normalizePanes2[1];

    setCustomizedPanes([newTotalPanelsMap, newGroupedPanelsMap]);
    setDefaultKey(getDefaultActiveKey(newTotalPanelsMap, newGroupedPanelsMap, {
      activeKey: propActiveKey,
      defaultActiveKey: defaultActiveKey
    }));
    tempCustomized.current = {
      panes: {}
    };
  }, [defaultActiveKey, propActiveKey, tempCustomized, children]);
  var handleDefaultKeyChange = useCallback(function (key) {
    tempCustomized.current.defaultActiveKey = key;
    setDefaultKey(key);
  }, [tempCustomized]);
  var handleOk = useCallback(function () {
    saveCustomized(tempCustomized.current);

    if (modal) {
      modal.close();
    }
  }, [saveCustomized, tempCustomized, modal]);
  useEffect(function () {
    if (modal) {
      modal.update({
        footer: function footer(okBtn, cancelBtn) {
          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/cloneElement(okBtn, {
            onClick: handleOk
          }), cancelBtn, /*#__PURE__*/React.createElement(Button, {
            funcType: FuncType.link,
            color: ButtonColor.primary,
            onClick: handleRestorePanes,
            style: {
              "float": 'right'
            }
          }, $l('Tabs', 'restore_default')));
        }
      });
    }
  }, [modal]);
  return /*#__PURE__*/React.createElement(TabGroups, {
    dataSet: panesDataSet,
    defaultKey: defaultKey,
    onDefaultKeyChange: handleDefaultKeyChange
  });
};

CustomizationSettings.displayName = 'CustomizationSettings';
export default observer(CustomizationSettings);
//# sourceMappingURL=CustomizationSettings.js.map