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

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

"use strict";

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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _mobxReactLite = require("mobx-react-lite");

var _merge = _interopRequireDefault(require("lodash/merge"));

var _DataSet = _interopRequireDefault(require("../../../pro/lib/data-set/DataSet"));

var _button = _interopRequireDefault(require("../../../pro/lib/button"));

var _localeContext = require("../../../pro/lib/locale-context");

var _enum = require("../../../pro/lib/button/enum");

var _tabGroups = _interopRequireDefault(require("./tab-groups"));

var _TabsContext = _interopRequireDefault(require("../TabsContext"));

var _utils = require("../utils");

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

function normalizePanesToData(pair) {
  var _pair = (0, _slicedToArray2["default"])(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 = (0, _react.useContext)(_TabsContext["default"]),
      customized = _useContext.customized,
      saveCustomized = _useContext.saveCustomized,
      totalPanelsMap = _useContext.totalPanelsMap,
      groupedPanelsMap = _useContext.groupedPanelsMap,
      defaultActiveKey = _useContext.defaultActiveKey,
      actuallyDefaultActiveKey = _useContext.actuallyDefaultActiveKey,
      propActiveKey = _useContext.propActiveKey,
      children = _useContext.children,
      restoreDefault = _useContext.restoreDefault;

  var oldCustomized = (0, _react.useMemo)(function () {
    return customized ? (0, _merge["default"])({}, customized) : {
      panes: {}
    };
  }, [customized]);
  var tempCustomized = (0, _react.useRef)(oldCustomized);

  var _useState = (0, _react.useState)(function () {
    return [totalPanelsMap, groupedPanelsMap];
  }),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      customizedPanes = _useState2[0],
      setCustomizedPanes = _useState2[1];

  var _useState3 = (0, _react.useState)(actuallyDefaultActiveKey),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      defaultKey = _useState4[0],
      setDefaultKey = _useState4[1];

  var panesDataSet = (0, _react.useMemo)(function () {
    return new _DataSet["default"]({
      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 = (0, _react.useCallback)(function (e) {
    e.stopPropagation();

    var _normalizePanes = (0, _utils.normalizePanes)(children),
        _normalizePanes2 = (0, _slicedToArray2["default"])(_normalizePanes, 2),
        newTotalPanelsMap = _normalizePanes2[0],
        newGroupedPanelsMap = _normalizePanes2[1];

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

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

CustomizationSettings.displayName = 'CustomizationSettings';

var _default = (0, _mobxReactLite.observer)(CustomizationSettings);

exports["default"] = _default;
//# sourceMappingURL=CustomizationSettings.js.map