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

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

import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/message/style";
import _message from "antd/es/message";
import "antd/es/divider/style";
import _Divider from "antd/es/divider";
import "antd/es/icon/style";
import _Icon from "antd/es/icon";
import "antd/es/drawer/style";
import _Drawer from "antd/es/drawer";
import "antd/es/list/style";
import _List from "antd/es/list";
import "antd/es/tooltip/style";
import _Tooltip from "antd/es/tooltip";
import "antd/es/switch/style";
import _Switch from "antd/es/switch";
import "antd/es/select/style";
import _Select from "antd/es/select";

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); }

import './index.less';
import React, { Component } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import omit from 'omit.js';
import defaultSettings from '../defaultSettings';
import BlockCheckbox from './BlockCheckbox';
import ThemeColor from './ThemeColor';
import getLocales, { getLanguage } from '../locales';
import { isBrowser } from '../utils/utils';
var Option = _Select.Option;

var Body = function Body(_ref) {
  var children = _ref.children,
      title = _ref.title;
  return React.createElement("div", {
    style: {
      marginBottom: 24
    }
  }, React.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: getLanguage()
    };

    _this.onLanguageChange = function () {
      var language = 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,
          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.createElement(_Select, {
          value: contentWidth,
          size: "small",
          onSelect: function onSelect(value) {
            return _this.changeSetting('contentWidth', value);
          },
          style: {
            width: 80
          }
        }, layout === 'sidemenu' ? null : React.createElement(Option, {
          value: "Fixed"
        }, formatMessage({
          id: 'app.setting.content-width.fixed',
          defaultMessage: 'Fixed'
        })), React.createElement(Option, {
          value: "Fluid"
        }, formatMessage({
          id: 'app.setting.content-width.fluid',
          defaultMessage: 'Fluid'
        })))
      }, {
        title: formatMessage({
          id: 'app.setting.fixedheader',
          defaultMessage: 'Fixed Header'
        }),
        action: React.createElement(_Switch, {
          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.createElement(_Switch, {
          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.createElement(_Switch, {
          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.cloneElement(item.action, {
        disabled: item.disabled
      });
      return React.createElement(_Tooltip, {
        title: item.disabled ? item.disabledReason : '',
        placement: "left"
      }, React.createElement(_List.Item, {
        actions: [action]
      }, React.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 = getLocales();

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

        if (defaultMessage) {
          return defaultMessage;
        }

        return id;
      };

      return formatMessage;
    };

    return _this;
  }

  _createClass(SettingDrawer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (isBrowser()) {
        window.addEventListener('languagechange', this.onLanguageChange, {
          passive: true
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (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,
          _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.createElement(_Drawer, {
        visible: collapse,
        width: 300,
        onClose: this.togglerContent,
        placement: "right",
        getContainer: getContainer,
        handler: React.createElement("div", {
          className: "ant-pro-setting-drawer-handle",
          onClick: this.togglerContent
        }, React.createElement(_Icon, {
          type: collapse ? 'close' : 'setting',
          style: {
            color: '#fff',
            fontSize: 20
          }
        })),
        style: {
          zIndex: 999
        }
      }, React.createElement("div", {
        className: "ant-pro-setting-drawer-content"
      }, React.createElement(Body, {
        title: formatMessage({
          id: 'app.setting.pagestyle',
          defaultMessage: 'Page style setting'
        })
      }, React.createElement(BlockCheckbox, {
        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.createElement(ThemeColor, {
        title: formatMessage({
          id: 'app.setting.themecolor'
        }),
        value: primaryColor,
        formatMessage: formatMessage,
        onChange: function onChange(color) {
          return _this2.changeSetting('primaryColor', color);
        }
      }), React.createElement(_Divider, null), React.createElement(Body, {
        title: formatMessage({
          id: 'app.setting.navigationmode'
        })
      }, React.createElement(BlockCheckbox, {
        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.createElement(_List, {
        split: false,
        dataSource: this.getLayoutSetting(),
        renderItem: this.renderLayoutSettingItem
      }), React.createElement(_Divider, null), React.createElement(Body, {
        title: formatMessage({
          id: 'app.setting.othersettings'
        })
      }, React.createElement(_List, {
        split: false,
        renderItem: this.renderLayoutSettingItem,
        dataSource: [{
          title: formatMessage({
            id: 'app.setting.weakmode'
          }),
          action: React.createElement(_Switch, {
            size: "small",
            checked: !!colorWeak,
            onChange: function onChange(checked) {
              return _this2.changeSetting('colorWeak', checked);
            }
          })
        }]
      })), React.createElement(_Divider, null), React.createElement(CopyToClipboard, {
        text: JSON.stringify(omit(settings, ['colorWeak']), null, 2),
        onCopy: function onCopy() {
          return _message.success(formatMessage({
            id: 'app.setting.copyinfo'
          }));
        }
      }, React.createElement(_Button, {
        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;
}(Component);

export default SettingDrawer;