vue-ant-patterns/lib/d-layout/SiderLayout.js

vue-ant-patterns

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _propsUtil = require('ant-design-vue/lib/_util/props-util');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _dContainer = require('../d-container');

var _dContainer2 = _interopRequireDefault(_dContainer);

var _Sider = require('./Sider');

var _Sider2 = _interopRequireDefault(_Sider);

var _SiderLayoutProps = require('./SiderLayoutProps');

var _SiderLayoutProps2 = _interopRequireDefault(_SiderLayoutProps);

var _resizeObserverPolyfill = require('resize-observer-polyfill');

var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);

var _splitpanes = require('splitpanes');

require('splitpanes/dist/splitpanes.css');

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

var SiderLayout = {
  name: 'DSiderLayout',
  model: {
    prop: 'collapsed',
    event: 'collapse'
  },
  components: {
    Splitpanes: _splitpanes.Splitpanes,
    Pane: _splitpanes.Pane
  },
  props: (0, _extends3['default'])({
    prefixCls: _vueTypes2['default'].string.def('depot-sider-layout')
  }, _SiderLayoutProps2['default'], {
    grow: _vueTypes2['default'].bool.def(false),
    flex: _vueTypes2['default'].bool.def(false)
  }),
  data: function data() {
    var props = (0, _propsUtil.getOptionProps)(this);
    var _$props = this.$props,
        collapseWidth = _$props.collapseWidth,
        collapsed = _$props.collapsed,
        siderWidth = _$props.siderWidth,
        prefixCls = _$props.prefixCls;

    var state = {
      collapseing: false,
      isShowBody: true,
      sCollapsed: false,
      sContentWidth: '',
      sSideWidth: siderWidth
      // sCollapsedClass: this.getStatusClass(collapsed),
    };

    if ('collapsed' in props) {
      state.sCollapsed = props.collapsed;
    }
    var direction = this.direction;

    var isLeft = direction === 'left';
    return (0, _extends3['default'])({
      isLeft: isLeft,
      isCollapseIng: false,
      isCollapseEnd: false
    }, state, {
      spSizeState: {
        minSize: 29,
        maxSize: 31,
        isshortMenu: this.collapsed,
        shortSize: 10,
        nowSize: 30
      }
    });
  },

  watch: {
    direction: function direction(v) {
      this.isLeft = v === 'left';
    },
    collapsed: function collapsed(v) {
      this.sCollapsed = v;
      this.spSizeState.isshortMenu = v;
    }
  },
  mounted: function mounted() {
    var _this = this;

    this.resizeSplitpanes();
    var robserver = new _resizeObserverPolyfill2['default'](function (entries) {
      var minSizePx = 200;
      var maxSizePx = 500;
      var short_size = 48;
      var nowWidth = entries[0].contentRect.width;
      _this.spSizeState.minSize = Math.floor(minSizePx / nowWidth * 10000) / 100;
      _this.spSizeState.maxSize = Math.floor(maxSizePx / nowWidth * 10000) / 100;
      _this.spSizeState.shortSize = Math.floor(short_size / nowWidth * 10000) / 100;
    });
    robserver.observe(this.$refs.splitPanesCon.$el);
  },

  methods: {
    toggleCollapse: function toggleCollapse() {
      this.sCollapsed = !this.sCollapsed;
    },
    collapseHandler: function collapseHandler(collapsed) {
      this.toggleCollapse();
      this.$emit('onCollapse', collapsed);
      this.$emit('collapse', collapsed);
    },
    renderSide: function renderSide() {
      var _cx;

      var h = this.$createElement;
      var $slots = this.$slots,
          vLine = this.vLine,
          sCollapsed = this.sCollapsed,
          collapsible = this.collapsible,
          direction = this.direction,
          prefixCls = this.prefixCls,
          openSider = this.openSider;

      if (!openSider) return null;
      var sider = $slots.sider;

      var cls = (0, _classnames2['default'])((_cx = {}, (0, _defineProperty3['default'])(_cx, prefixCls + '-direction-' + direction, 1), (0, _defineProperty3['default'])(_cx, 'flex-col', 1), _cx));
      var props = {
        props: {
          vLine: vLine,
          collapsible: collapsible,
          direction: direction,
          collapsed: sCollapsed
        },
        'class': cls,
        on: {
          onCollapse: this.collapseHandler
        },
        ref: 'sider'
      };

      return h(
        _Sider2['default'],
        props,
        [sider]
      );
    },
    renderContent: function renderContent() {
      var h = this.$createElement;
      var $slots = this.$slots,
          sContentWidth = this.sContentWidth,
          prefixCls = this.prefixCls,
          contentFlex = this.contentFlex;

      var props = {
        'class': prefixCls + '-content',
        props: {
          flex: contentFlex
        },
        style: {
          width: '100%'
        }
      };
      return h(
        _dContainer2['default'],
        props,
        [$slots['default']]
      );
    },
    resizeSplitpanes: function resizeSplitpanes() {
      var minSizePx = 200;
      var maxSizePx = 500;
      var short_size = 48;
      var nowWidth = this.$refs.splitPanesCon.$el.offsetWidth;
      this.spSizeState.minSize = Math.floor(minSizePx / nowWidth * 10000) / 100;
      this.spSizeState.maxSize = Math.floor(maxSizePx / nowWidth * 10000) / 100;
      this.spSizeState.shortSize = Math.floor(short_size / nowWidth * 10000) / 100;
    },
    formatPaneProps: function formatPaneProps() {
      var spSizeState = this.spSizeState;
      var minSize = spSizeState.minSize,
          maxSize = spSizeState.maxSize,
          isshortMenu = spSizeState.isshortMenu,
          shortSize = spSizeState.shortSize,
          nowSize = spSizeState.nowSize;

      if (isshortMenu) {
        return { minSize: shortSize, maxSize: shortSize, size: shortSize };
      } else {
        return { minSize: minSize, maxSize: maxSize, size: minSize };
      }
    }
  },
  render: function render() {
    var _cx2;

    var h = arguments[0];
    var isLeft = this.isLeft,
        sCollapsed = this.sCollapsed,
        direction = this.direction;
    var _$props2 = this.$props,
        prefixCls = _$props2.prefixCls,
        height = _$props2.height,
        flex = _$props2.flex,
        grow = _$props2.grow,
        openSider = _$props2.openSider;


    var cls = (0, _classnames2['default'])((_cx2 = {}, (0, _defineProperty3['default'])(_cx2, prefixCls, 1), (0, _defineProperty3['default'])(_cx2, prefixCls + '-collapsed', sCollapsed), (0, _defineProperty3['default'])(_cx2, prefixCls + '-extends', !sCollapsed), (0, _defineProperty3['default'])(_cx2, prefixCls + '-' + direction, 1), (0, _defineProperty3['default'])(_cx2, prefixCls + '-close', !openSider), (0, _defineProperty3['default'])(_cx2, 'flex-grow', grow), (0, _defineProperty3['default'])(_cx2, 'flex', flex), _cx2));

    var sHeight = /(%|px)$/.test(height) ? height : height === 'auto' ? height : height + 'px';

    var divProps = {
      ref: 'splitPanesCon',
      'class': cls,
      style: {
        height: sHeight
      }
    };
    var siderPaneProps = this.formatPaneProps();
    return h(
      _dContainer2['default'],
      divProps,
      [h(
        _splitpanes.Splitpanes,
        {
          attrs: { dblClickSplitter: false },
          'class': 'default-theme', style: 'height: 100%' },
        [h(
          _splitpanes.Pane,
          {
            attrs: { minSize: siderPaneProps.minSize, maxSize: siderPaneProps.maxSize, size: siderPaneProps.size }
          },
          [isLeft && this.renderSide()]
        ), h(
          _splitpanes.Pane,
          {
            attrs: { size: 100 - siderPaneProps.size }
          },
          [this.renderContent()]
        ), !isLeft && this.renderSide()]
      )]
    );
  }
}; /*
    * @Description:
    * @Autor: w.pengfei
    * @Date: 2019-09-11 20:16:49
    * @LastEditors: liuyanxin
    * @LastEditTime: 2023-06-30 09:24:00
    */

SiderLayout.SiderLayoutProps = _SiderLayoutProps2['default'];
exports['default'] = SiderLayout;