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

vue-ant-patterns

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _extends from 'babel-runtime/helpers/extends';
/*
 * @Description:
 * @Autor: w.pengfei
 * @Date: 2019-09-11 20:16:49
 * @LastEditors: liuyanxin
 * @LastEditTime: 2023-06-30 09:24:00
 */

import PropTypes from 'ant-design-vue/es/_util/vue-types';
import { getOptionProps } from 'ant-design-vue/es/_util/props-util';
import cx from 'classnames';
import Container from '../d-container';
import Sider from './Sider';
import SiderLayoutProps from './SiderLayoutProps';
import ResizeObserver from 'resize-observer-polyfill';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';

var SiderLayout = {
  name: 'DSiderLayout',
  model: {
    prop: 'collapsed',
    event: 'collapse'
  },
  components: {
    Splitpanes: Splitpanes,
    Pane: Pane
  },
  props: _extends({
    prefixCls: PropTypes.string.def('depot-sider-layout')
  }, SiderLayoutProps, {
    grow: PropTypes.bool.def(false),
    flex: PropTypes.bool.def(false)
  }),
  data: function data() {
    var props = 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 _extends({
      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 ResizeObserver(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 = cx((_cx = {}, _defineProperty(_cx, prefixCls + '-direction-' + direction, 1), _defineProperty(_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(
        Sider,
        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(
        Container,
        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 = cx((_cx2 = {}, _defineProperty(_cx2, prefixCls, 1), _defineProperty(_cx2, prefixCls + '-collapsed', sCollapsed), _defineProperty(_cx2, prefixCls + '-extends', !sCollapsed), _defineProperty(_cx2, prefixCls + '-' + direction, 1), _defineProperty(_cx2, prefixCls + '-close', !openSider), _defineProperty(_cx2, 'flex-grow', grow), _defineProperty(_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(
      Container,
      divProps,
      [h(
        Splitpanes,
        {
          attrs: { dblClickSplitter: false },
          'class': 'default-theme', style: 'height: 100%' },
        [h(
          Pane,
          {
            attrs: { minSize: siderPaneProps.minSize, maxSize: siderPaneProps.maxSize, size: siderPaneProps.size }
          },
          [isLeft && this.renderSide()]
        ), h(
          Pane,
          {
            attrs: { size: 100 - siderPaneProps.size }
          },
          [this.renderContent()]
        ), !isLeft && this.renderSide()]
      )]
    );
  }
};
SiderLayout.SiderLayoutProps = SiderLayoutProps;
export default SiderLayout;