"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; 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); }

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

var _vue = _interopRequireWildcard(require("vue"));

var _classNames2 = _interopRequireDefault(require("../_util/classNames"));

var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));

var _propsUtil = require("../_util/props-util");

var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));

var _isNumeric = _interopRequireDefault(require("../_util/isNumeric"));

var _configProvider = require("../config-provider");

var _BarsOutlined = _interopRequireDefault(require("@ant-design/icons-vue/BarsOutlined"));

var _RightOutlined = _interopRequireDefault(require("@ant-design/icons-vue/RightOutlined"));

var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons-vue/LeftOutlined"));

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

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

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; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; 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 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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var dimensionMaxMap = {
  xs: '479.98px',
  sm: '575.98px',
  md: '767.98px',
  lg: '991.98px',
  xl: '1199.98px',
  xxl: '1599.98px'
}; // export type CollapseType = 'clickTrigger' | 'responsive';

var SiderProps = {
  prefixCls: _vueTypes.default.string,
  collapsible: _vueTypes.default.bool,
  collapsed: _vueTypes.default.bool,
  defaultCollapsed: _vueTypes.default.bool,
  reverseArrow: _vueTypes.default.bool,
  // onCollapse?: (collapsed: boolean, type: CollapseType) => void;
  zeroWidthTriggerStyle: _vueTypes.default.object,
  trigger: _vueTypes.default.any,
  width: _vueTypes.default.oneOfType([_vueTypes.default.number, _vueTypes.default.string]),
  collapsedWidth: _vueTypes.default.oneOfType([_vueTypes.default.number, _vueTypes.default.string]),
  breakpoint: _vueTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
  theme: _vueTypes.default.oneOf(['light', 'dark']).def('dark'),
  onBreakpoint: _vueTypes.default.func,
  onCollapse: _vueTypes.default.func,
  'onUpdate:collapse': _vueTypes.default.func
}; // export interface SiderState {
//   collapsed?: boolean;
//   below: boolean;
//   belowShow?: boolean;
// }
// export interface SiderContext {
//   siderCollapsed: boolean;
// }

exports.SiderProps = SiderProps;

var generateId = function () {
  var i = 0;
  return function () {
    var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    i += 1;
    return "".concat(prefix).concat(i);
  };
}();

var _default = {
  name: 'ALayoutSider',
  __ANT_LAYOUT_SIDER: true,
  mixins: [_BaseMixin.default],
  props: (0, _propsUtil.initDefaultProps)(SiderProps, {
    collapsible: false,
    defaultCollapsed: false,
    reverseArrow: false,
    width: 200,
    collapsedWidth: 80
  }),
  data: function data() {
    this.uniqueId = generateId('ant-sider-');
    var matchMedia;

    if (typeof window !== 'undefined') {
      matchMedia = window.matchMedia;
    }

    var props = (0, _propsUtil.getOptionProps)(this);

    if (matchMedia && props.breakpoint && props.breakpoint in dimensionMaxMap) {
      this.mql = matchMedia("(max-width: ".concat(dimensionMaxMap[props.breakpoint], ")"));
    }

    var sCollapsed;

    if ('collapsed' in props) {
      sCollapsed = props.collapsed;
    } else {
      sCollapsed = props.defaultCollapsed;
    }

    return {
      sCollapsed: sCollapsed,
      below: false,
      belowShow: false
    };
  },
  watch: {
    collapsed: function collapsed(val) {
      this.setState({
        sCollapsed: val
      });
    }
  },
  created: function created() {
    (0, _vue.provide)('layoutSiderContext', this); // menu组件中使用
  },
  setup: function setup() {
    return {
      siderHook: (0, _vue.inject)('siderHook', {}),
      configProvider: (0, _vue.inject)('configProvider', _configProvider.ConfigConsumerProps)
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.$nextTick(function () {
      if (_this.mql) {
        _this.mql.addListener(_this.responsiveHandler);

        _this.responsiveHandler(_this.mql);
      }

      if (_this.siderHook.addSider) {
        _this.siderHook.addSider(_this.uniqueId);
      }
    });
  },
  beforeUnmount: function beforeUnmount() {
    if (this.mql) {
      this.mql.removeListener(this.responsiveHandler);
    }

    if (this.siderHook.removeSider) {
      this.siderHook.removeSider(this.uniqueId);
    }
  },
  methods: {
    responsiveHandler: function responsiveHandler(mql) {
      this.setState({
        below: mql.matches
      });
      this.$emit('breakpoint', mql.matches);

      if (this.sCollapsed !== mql.matches) {
        this.setCollapsed(mql.matches, 'responsive');
      }
    },
    setCollapsed: function setCollapsed(collapsed, type) {
      if (!(0, _propsUtil.hasProp)(this, 'collapsed')) {
        this.setState({
          sCollapsed: collapsed
        });
      }

      this.$emit('update:collapsed', collapsed);
      this.$emit('collapse', collapsed, type);
    },
    toggle: function toggle() {
      var collapsed = !this.sCollapsed;
      this.setCollapsed(collapsed, 'clickTrigger');
    },
    belowShowChange: function belowShowChange() {
      this.setState({
        belowShow: !this.belowShow
      });
    }
  },
  render: function render() {
    var _classNames;

    var _getOptionProps$this$ = _objectSpread(_objectSpread({}, (0, _propsUtil.getOptionProps)(this)), this.$attrs),
        customizePrefixCls = _getOptionProps$this$.prefixCls,
        className = _getOptionProps$this$.class,
        theme = _getOptionProps$this$.theme,
        collapsible = _getOptionProps$this$.collapsible,
        reverseArrow = _getOptionProps$this$.reverseArrow,
        style = _getOptionProps$this$.style,
        width = _getOptionProps$this$.width,
        collapsedWidth = _getOptionProps$this$.collapsedWidth,
        zeroWidthTriggerStyle = _getOptionProps$this$.zeroWidthTriggerStyle,
        others = _objectWithoutProperties(_getOptionProps$this$, ["prefixCls", "class", "theme", "collapsible", "reverseArrow", "style", "width", "collapsedWidth", "zeroWidthTriggerStyle"]);

    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
    var divProps = (0, _omit.default)(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'breakpoint', 'onBreakpoint', 'siderHook', 'zeroWidthTriggerStyle', 'trigger', 'onUpdate:collapse']);
    var trigger = (0, _propsUtil.getComponent)(this, 'trigger');
    var rawWidth = this.sCollapsed ? collapsedWidth : width; // use "px" as fallback unit for width

    var siderWidth = (0, _isNumeric.default)(rawWidth) ? "".concat(rawWidth, "px") : String(rawWidth); // special trigger when collapsedWidth == 0

    var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? _vue.createVNode("span", {
      "onClick": this.toggle,
      "class": "".concat(prefixCls, "-zero-width-trigger ").concat(prefixCls, "-zero-width-trigger-").concat(reverseArrow ? 'right' : 'left'),
      "style": zeroWidthTriggerStyle
    }, [_vue.createVNode(_BarsOutlined.default, null, null)]) : null;
    var iconObj = {
      expanded: reverseArrow ? _vue.createVNode(_RightOutlined.default, null, null) : _vue.createVNode(_LeftOutlined.default, null, null),
      collapsed: reverseArrow ? _vue.createVNode(_LeftOutlined.default, null, null) : _vue.createVNode(_RightOutlined.default, null, null)
    };
    var status = this.sCollapsed ? 'collapsed' : 'expanded';
    var defaultTrigger = iconObj[status];
    var triggerDom = trigger !== null ? zeroWidthTrigger || _vue.createVNode("div", {
      "class": "".concat(prefixCls, "-trigger"),
      "onClick": this.toggle,
      "style": {
        width: siderWidth
      }
    }, [trigger || defaultTrigger]) : null;

    var divStyle = _objectSpread(_objectSpread({}, style), {}, {
      flex: "0 0 ".concat(siderWidth),
      maxWidth: siderWidth,
      // Fix width transition bug in IE11
      minWidth: siderWidth,
      // https://github.com/ant-design/ant-design/issues/6349
      width: siderWidth
    });

    var siderCls = (0, _classNames2.default)(className, prefixCls, "".concat(prefixCls, "-").concat(theme), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-collapsed"), !!this.sCollapsed), _defineProperty(_classNames, "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), _defineProperty(_classNames, "".concat(prefixCls, "-below"), !!this.below), _defineProperty(_classNames, "".concat(prefixCls, "-zero-width"), parseFloat(siderWidth) === 0), _classNames));
    return _vue.createVNode("aside", _vue.mergeProps(divProps, {
      "class": siderCls,
      "style": divStyle
    }), [_vue.createVNode("div", {
      "class": "".concat(prefixCls, "-children")
    }, [(0, _propsUtil.getSlot)(this)]), collapsible || this.below && zeroWidthTrigger ? triggerDom : null]);
  }
};
exports.default = _default;