header-sider-layout/lib/SettingDrawer/index.js

ant-design-pro layout, based on pro-layout, with header and sider layout.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/lib/button/style");

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

require("antd/lib/message/style");

var _message2 = _interopRequireDefault(require("antd/lib/message"));

require("antd/lib/divider/style");

var _divider = _interopRequireDefault(require("antd/lib/divider"));

require("antd/lib/icon/style");

var _icon = _interopRequireDefault(require("antd/lib/icon"));

require("antd/lib/drawer/style");

var _drawer = _interopRequireDefault(require("antd/lib/drawer"));

require("antd/lib/list/style");

var _list = _interopRequireDefault(require("antd/lib/list"));

require("antd/lib/tooltip/style");

var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));

require("antd/lib/switch/style");

var _switch = _interopRequireDefault(require("antd/lib/switch"));

require("antd/lib/select/style");

var _select = _interopRequireDefault(require("antd/lib/select"));

require("./index.less");

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

var _reactCopyToClipboard = _interopRequireDefault(require("react-copy-to-clipboard"));

var _omit = _interopRequireDefault(require("omit.js"));

var _defaultSettings = _interopRequireDefault(require("../defaultSettings"));

var _BlockCheckbox = _interopRequireDefault(require("./BlockCheckbox"));

var _ThemeColor = _interopRequireDefault(require("./ThemeColor"));

var _locales = _interopRequireWildcard(require("../locales"));

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var Option = _select.default.Option;

var Body = function Body(_ref) {
  var children = _ref.children,
      title = _ref.title;
  return _react.default.createElement("div", {
    style: {
      marginBottom: 24
    }
  }, _react.default.createElement("h3", {
    className: "ant-pro-setting-drawer-title"
  }, title), children);
};

var SettingDrawer =
/*#__PURE__*/
function (_Component) {
  _inherits(SettingDrawer, _Component);

  function SettingDrawer() {
    var _this;

    _classCallCheck(this, SettingDrawer);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(SettingDrawer).apply(this, arguments));
    _this.state = {
      collapse: false,
      language: (0, _locales.getLanguage)()
    };

    _this.onLanguageChange = function () {
      var language = (0, _locales.getLanguage)();

      if (language !== _this.state.language) {
        _this.setState({
          language: language
        });
      }
    };

    _this.getLayoutSetting = function () {
      var settings = _this.props.settings;

      var formatMessage = _this.getFormatMessage();

      var _ref2 = settings || _defaultSettings.default,
          contentWidth = _ref2.contentWidth,
          fixedHeader = _ref2.fixedHeader,
          layout = _ref2.layout,
          autoHideHeader = _ref2.autoHideHeader,
          fixSiderbar = _ref2.fixSiderbar;

      return [{
        title: formatMessage({
          id: 'app.setting.content-width',
          defaultMessage: 'Content Width'
        }),
        action: _react.default.createElement(_select.default, {
          value: contentWidth,
          size: "small",
          onSelect: function onSelect(value) {
            return _this.changeSetting('contentWidth', value);
          },
          style: {
            width: 80
          }
        }, layout === 'sidemenu' ? null : _react.default.createElement(Option, {
          value: "Fixed"
        }, formatMessage({
          id: 'app.setting.content-width.fixed',
          defaultMessage: 'Fixed'
        })), _react.default.createElement(Option, {
          value: "Fluid"
        }, formatMessage({
          id: 'app.setting.content-width.fluid',
          defaultMessage: 'Fluid'
        })))
      }, {
        title: formatMessage({
          id: 'app.setting.fixedheader',
          defaultMessage: 'Fixed Header'
        }),
        action: _react.default.createElement(_switch.default, {
          size: "small",
          checked: !!fixedHeader,
          onChange: function onChange(checked) {
            return _this.changeSetting('fixedHeader', checked);
          }
        })
      }, {
        title: formatMessage({
          id: 'app.setting.hideheader',
          defaultMessage: 'Hidden Header when scrolling'
        }),
        disabled: !fixedHeader,
        disabledReason: formatMessage({
          id: 'app.setting.hideheader.hint',
          defaultMessage: 'Works when Hidden Header is enabled'
        }),
        action: _react.default.createElement(_switch.default, {
          size: "small",
          checked: !!autoHideHeader,
          onChange: function onChange(checked) {
            return _this.changeSetting('autoHideHeader', checked);
          }
        })
      }, {
        title: formatMessage({
          id: 'app.setting.fixedsidebar',
          defaultMessage: 'Fixed Sidebar'
        }),
        disabled: layout === 'topmenu',
        disabledReason: formatMessage({
          id: 'app.setting.fixedsidebar.hint',
          defaultMessage: 'Works on Side Menu Layout'
        }),
        action: _react.default.createElement(_switch.default, {
          size: "small",
          checked: !!fixSiderbar,
          onChange: function onChange(checked) {
            return _this.changeSetting('fixSiderbar', checked);
          }
        })
      }];
    };

    _this.changeSetting = function (key, value) {
      var settings = _this.props.settings;

      var nextState = _objectSpread({}, settings);

      nextState[key] = value;

      if (key === 'layout') {
        nextState.contentWidth = value === 'topmenu' ? 'Fixed' : 'Fluid';
      } else if (key === 'fixedHeader' && !value) {
        nextState.autoHideHeader = false;
      }

      _this.setState(nextState, function () {
        var onSettingChange = _this.props.onSettingChange;

        if (onSettingChange) {
          onSettingChange(_this.state);
        }
      });
    };

    _this.togglerContent = function () {
      var collapse = _this.state.collapse;
      var onCollapseChange = _this.props.onCollapseChange;

      if (onCollapseChange) {
        onCollapseChange(!collapse);
        return;
      }

      _this.setState({
        collapse: !collapse
      });
    };

    _this.renderLayoutSettingItem = function (item) {
      var action = _react.default.cloneElement(item.action, {
        disabled: item.disabled
      });

      return _react.default.createElement(_tooltip.default, {
        title: item.disabled ? item.disabledReason : '',
        placement: "left"
      }, _react.default.createElement(_list.default.Item, {
        actions: [action]
      }, _react.default.createElement("span", {
        style: {
          opacity: item.disabled ? 0.5 : 1
        }
      }, item.title)));
    };

    _this.getFormatMessage = function () {
      var formatMessage = function formatMessage(_ref3) {
        var id = _ref3.id,
            defaultMessage = _ref3.defaultMessage;
        var locales = (0, _locales.default)();

        if (locales[id]) {
          return locales[id];
        }

        if (defaultMessage) {
          return defaultMessage;
        }

        return id;
      };

      return formatMessage;
    };

    return _this;
  }

  _createClass(SettingDrawer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if ((0, _utils.isBrowser)()) {
        window.addEventListener('languagechange', this.onLanguageChange, {
          passive: true
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if ((0, _utils.isBrowser)()) {
        window.removeEventListener('languagechange', this.onLanguageChange);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          settings = _this$props.settings,
          getContainer = _this$props.getContainer;

      var _ref4 = settings || _defaultSettings.default,
          _ref4$navTheme = _ref4.navTheme,
          navTheme = _ref4$navTheme === void 0 ? 'dark' : _ref4$navTheme,
          _ref4$primaryColor = _ref4.primaryColor,
          primaryColor = _ref4$primaryColor === void 0 ? '1890FF' : _ref4$primaryColor,
          _ref4$layout = _ref4.layout,
          layout = _ref4$layout === void 0 ? 'sidemenu' : _ref4$layout,
          colorWeak = _ref4.colorWeak;

      var collapse = this.state.collapse;
      var formatMessage = this.getFormatMessage();
      return _react.default.createElement(_drawer.default, {
        visible: collapse,
        width: 300,
        onClose: this.togglerContent,
        placement: "right",
        getContainer: getContainer,
        handler: _react.default.createElement("div", {
          className: "ant-pro-setting-drawer-handle",
          onClick: this.togglerContent
        }, _react.default.createElement(_icon.default, {
          type: collapse ? 'close' : 'setting',
          style: {
            color: '#fff',
            fontSize: 20
          }
        })),
        style: {
          zIndex: 999
        }
      }, _react.default.createElement("div", {
        className: "ant-pro-setting-drawer-content"
      }, _react.default.createElement(Body, {
        title: formatMessage({
          id: 'app.setting.pagestyle',
          defaultMessage: 'Page style setting'
        })
      }, _react.default.createElement(_BlockCheckbox.default, {
        list: [{
          key: 'dark',
          url: 'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg',
          title: formatMessage({
            id: 'app.setting.pagestyle.dark',
            defaultMessage: ''
          })
        }, {
          key: 'light',
          url: 'https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg',
          title: formatMessage({
            id: 'app.setting.pagestyle.light'
          })
        }],
        value: navTheme,
        onChange: function onChange(value) {
          return _this2.changeSetting('navTheme', value);
        }
      })), _react.default.createElement(_ThemeColor.default, {
        title: formatMessage({
          id: 'app.setting.themecolor'
        }),
        value: primaryColor,
        formatMessage: formatMessage,
        onChange: function onChange(color) {
          return _this2.changeSetting('primaryColor', color);
        }
      }), _react.default.createElement(_divider.default, null), _react.default.createElement(Body, {
        title: formatMessage({
          id: 'app.setting.navigationmode'
        })
      }, _react.default.createElement(_BlockCheckbox.default, {
        list: [{
          key: 'sidemenu',
          url: 'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg',
          title: formatMessage({
            id: 'app.setting.sidemenu'
          })
        }, {
          key: 'topmenu',
          url: 'https://gw.alipayobjects.com/zos/antfincdn/URETY8%24STp/KDNDBbriJhLwuqMoxcAr.svg',
          title: formatMessage({
            id: 'app.setting.topmenu'
          })
        }],
        value: layout,
        onChange: function onChange(value) {
          return _this2.changeSetting('layout', value);
        }
      })), _react.default.createElement(_list.default, {
        split: false,
        dataSource: this.getLayoutSetting(),
        renderItem: this.renderLayoutSettingItem
      }), _react.default.createElement(_divider.default, null), _react.default.createElement(Body, {
        title: formatMessage({
          id: 'app.setting.othersettings'
        })
      }, _react.default.createElement(_list.default, {
        split: false,
        renderItem: this.renderLayoutSettingItem,
        dataSource: [{
          title: formatMessage({
            id: 'app.setting.weakmode'
          }),
          action: _react.default.createElement(_switch.default, {
            size: "small",
            checked: !!colorWeak,
            onChange: function onChange(checked) {
              return _this2.changeSetting('colorWeak', checked);
            }
          })
        }]
      })), _react.default.createElement(_divider.default, null), _react.default.createElement(_reactCopyToClipboard.default, {
        text: JSON.stringify((0, _omit.default)(settings, ['colorWeak']), null, 2),
        onCopy: function onCopy() {
          return _message2.default.success(formatMessage({
            id: 'app.setting.copyinfo'
          }));
        }
      }, _react.default.createElement(_button.default, {
        block: true,
        icon: "copy"
      }, formatMessage({
        id: 'app.setting.copy'
      })))));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props) {
      if ('collapse' in props) {
        return {
          collapse: !!props.collapse
        };
      }

      return null;
    }
  }]);

  return SettingDrawer;
}(_react.Component);

var _default = SettingDrawer;
exports.default = _default;