2018-04-20 04:52:31 +00:00
|
|
|
// matchMedia polyfill for
|
|
|
|
// https://github.com/WickyNilliams/enquire.js/issues/82
|
|
|
|
if (typeof window !== 'undefined') {
|
2019-01-12 03:33:27 +00:00
|
|
|
const matchMediaPolyfill = mediaQuery => {
|
2018-04-20 04:52:31 +00:00
|
|
|
return {
|
|
|
|
media: mediaQuery,
|
|
|
|
matches: false,
|
2019-01-12 03:33:27 +00:00
|
|
|
addListener() {},
|
|
|
|
removeListener() {},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
window.matchMedia = window.matchMedia || matchMediaPolyfill;
|
2018-04-20 04:52:31 +00:00
|
|
|
}
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
import Icon from '../icon';
|
|
|
|
import {
|
|
|
|
initDefaultProps,
|
|
|
|
getOptionProps,
|
|
|
|
hasProp,
|
|
|
|
getComponentFromProp,
|
2020-01-18 13:34:23 +00:00
|
|
|
getListeners,
|
2019-01-12 03:33:27 +00:00
|
|
|
} from '../_util/props-util';
|
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
|
|
import isNumeric from '../_util/isNumeric';
|
2019-04-10 01:08:29 +00:00
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2018-04-20 04:52:31 +00:00
|
|
|
|
|
|
|
const dimensionMap = {
|
|
|
|
xs: '480px',
|
|
|
|
sm: '576px',
|
|
|
|
md: '768px',
|
|
|
|
lg: '992px',
|
|
|
|
xl: '1200px',
|
|
|
|
xxl: '1600px',
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-04-20 04:52:31 +00:00
|
|
|
|
|
|
|
// export type CollapseType = 'clickTrigger' | 'responsive';
|
|
|
|
|
|
|
|
export const SiderProps = {
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
collapsible: PropTypes.bool,
|
|
|
|
collapsed: PropTypes.bool,
|
|
|
|
defaultCollapsed: PropTypes.bool,
|
|
|
|
reverseArrow: PropTypes.bool,
|
|
|
|
// onCollapse?: (collapsed: boolean, type: CollapseType) => void;
|
|
|
|
trigger: PropTypes.any,
|
|
|
|
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
|
|
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
|
|
breakpoint: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
|
2018-09-05 13:28:54 +00:00
|
|
|
theme: PropTypes.oneOf(['light', 'dark']).def('dark'),
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-04-20 04:52:31 +00:00
|
|
|
|
|
|
|
// export interface SiderState {
|
|
|
|
// collapsed?: boolean;
|
|
|
|
// below: boolean;
|
|
|
|
// belowShow?: boolean;
|
|
|
|
// }
|
|
|
|
|
|
|
|
// export interface SiderContext {
|
|
|
|
// siderCollapsed: boolean;
|
|
|
|
// }
|
|
|
|
|
|
|
|
const generateId = (() => {
|
2019-01-12 03:33:27 +00:00
|
|
|
let i = 0;
|
2018-04-20 04:52:31 +00:00
|
|
|
return (prefix = '') => {
|
2019-01-12 03:33:27 +00:00
|
|
|
i += 1;
|
|
|
|
return `${prefix}${i}`;
|
|
|
|
};
|
|
|
|
})();
|
2018-04-20 04:52:31 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'ALayoutSider',
|
|
|
|
__ANT_LAYOUT_SIDER: true,
|
|
|
|
mixins: [BaseMixin],
|
2019-02-01 09:23:00 +00:00
|
|
|
model: {
|
|
|
|
prop: 'collapsed',
|
|
|
|
event: 'collapse',
|
|
|
|
},
|
2018-04-20 04:52:31 +00:00
|
|
|
props: initDefaultProps(SiderProps, {
|
|
|
|
collapsible: false,
|
|
|
|
defaultCollapsed: false,
|
|
|
|
reverseArrow: false,
|
|
|
|
width: 200,
|
|
|
|
collapsedWidth: 80,
|
|
|
|
}),
|
2019-01-12 03:33:27 +00:00
|
|
|
data() {
|
|
|
|
this.uniqueId = generateId('ant-sider-');
|
|
|
|
let matchMedia;
|
2018-04-20 04:52:31 +00:00
|
|
|
if (typeof window !== 'undefined') {
|
2019-01-12 03:33:27 +00:00
|
|
|
matchMedia = window.matchMedia;
|
2018-04-20 04:52:31 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
const props = getOptionProps(this);
|
2018-04-20 04:52:31 +00:00
|
|
|
if (matchMedia && props.breakpoint && props.breakpoint in dimensionMap) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.mql = matchMedia(`(max-width: ${dimensionMap[props.breakpoint]})`);
|
2018-04-20 04:52:31 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
let sCollapsed;
|
2018-04-20 04:52:31 +00:00
|
|
|
if ('collapsed' in props) {
|
2019-01-12 03:33:27 +00:00
|
|
|
sCollapsed = props.collapsed;
|
2018-04-20 04:52:31 +00:00
|
|
|
} else {
|
2019-01-12 03:33:27 +00:00
|
|
|
sCollapsed = props.defaultCollapsed;
|
2018-04-20 04:52:31 +00:00
|
|
|
}
|
|
|
|
return {
|
|
|
|
sCollapsed,
|
|
|
|
below: false,
|
|
|
|
belowShow: false,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-04-20 04:52:31 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
provide() {
|
2018-04-20 04:52:31 +00:00
|
|
|
return {
|
|
|
|
layoutSiderContext: this, // menu组件中使用
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-04-20 04:52:31 +00:00
|
|
|
},
|
|
|
|
inject: {
|
2019-01-28 13:09:13 +00:00
|
|
|
siderHook: { default: () => ({}) },
|
2019-09-11 14:35:25 +00:00
|
|
|
configProvider: { default: () => ConfigConsumerProps },
|
2018-04-20 04:52:31 +00:00
|
|
|
},
|
|
|
|
// getChildContext() {
|
|
|
|
// return {
|
|
|
|
// siderCollapsed: this.state.collapsed,
|
|
|
|
// collapsedWidth: this.props.collapsedWidth,
|
|
|
|
// };
|
|
|
|
// }
|
|
|
|
watch: {
|
2019-01-12 03:33:27 +00:00
|
|
|
collapsed(val) {
|
2018-04-20 04:52:31 +00:00
|
|
|
this.setState({
|
|
|
|
sCollapsed: val,
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-04-20 04:52:31 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
mounted() {
|
2018-04-20 04:52:31 +00:00
|
|
|
this.$nextTick(() => {
|
|
|
|
if (this.mql) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.mql.addListener(this.responsiveHandler);
|
|
|
|
this.responsiveHandler(this.mql);
|
2018-04-20 04:52:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.siderHook.addSider) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.siderHook.addSider(this.uniqueId);
|
2018-04-20 04:52:31 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-04-20 04:52:31 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
beforeDestroy() {
|
2018-04-20 04:52:31 +00:00
|
|
|
if (this.mql) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.mql.removeListener(this.responsiveHandler);
|
2018-04-20 04:52:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.siderHook.removeSider) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.siderHook.removeSider(this.uniqueId);
|
2018-04-20 04:52:31 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 03:33:27 +00:00
|
|
|
responsiveHandler(mql) {
|
|
|
|
this.setState({ below: mql.matches });
|
|
|
|
this.$emit('breakpoint', mql.matches);
|
2018-04-20 04:52:31 +00:00
|
|
|
if (this.sCollapsed !== mql.matches) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.setCollapsed(mql.matches, 'responsive');
|
2018-04-20 04:52:31 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
setCollapsed(collapsed, type) {
|
2018-04-20 04:52:31 +00:00
|
|
|
if (!hasProp(this, 'collapsed')) {
|
|
|
|
this.setState({
|
|
|
|
sCollapsed: collapsed,
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-04-20 04:52:31 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
this.$emit('collapse', collapsed, type);
|
2018-04-20 04:52:31 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
toggle() {
|
|
|
|
const collapsed = !this.sCollapsed;
|
|
|
|
this.setCollapsed(collapsed, 'clickTrigger');
|
2018-04-20 04:52:31 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
belowShowChange() {
|
|
|
|
this.setState({ belowShow: !this.belowShow });
|
2018-04-20 04:52:31 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
2019-05-28 03:37:38 +00:00
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
theme,
|
|
|
|
collapsible,
|
|
|
|
reverseArrow,
|
|
|
|
width,
|
|
|
|
collapsedWidth,
|
|
|
|
} = getOptionProps(this);
|
2019-09-11 14:35:25 +00:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-04-10 01:08:29 +00:00
|
|
|
const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
const trigger = getComponentFromProp(this, 'trigger');
|
|
|
|
const rawWidth = this.sCollapsed ? collapsedWidth : width;
|
2018-09-05 13:28:54 +00:00
|
|
|
// use "px" as fallback unit for width
|
2019-01-12 03:33:27 +00:00
|
|
|
const siderWidth = isNumeric(rawWidth) ? `${rawWidth}px` : String(rawWidth);
|
2018-04-20 04:52:31 +00:00
|
|
|
// special trigger when collapsedWidth == 0
|
2019-01-12 03:33:27 +00:00
|
|
|
const zeroWidthTrigger =
|
|
|
|
parseFloat(String(collapsedWidth || 0)) === 0 ? (
|
2019-05-28 03:37:38 +00:00
|
|
|
<span
|
|
|
|
onClick={this.toggle}
|
|
|
|
class={`${prefixCls}-zero-width-trigger ${prefixCls}-zero-width-trigger-${
|
|
|
|
reverseArrow ? 'right' : 'left'
|
|
|
|
}`}
|
|
|
|
>
|
2019-01-12 03:33:27 +00:00
|
|
|
<Icon type="bars" />
|
|
|
|
</span>
|
|
|
|
) : null;
|
2018-04-20 04:52:31 +00:00
|
|
|
const iconObj = {
|
2019-01-12 03:33:27 +00:00
|
|
|
expanded: reverseArrow ? <Icon type="right" /> : <Icon type="left" />,
|
|
|
|
collapsed: reverseArrow ? <Icon type="left" /> : <Icon type="right" />,
|
|
|
|
};
|
|
|
|
const status = this.sCollapsed ? 'collapsed' : 'expanded';
|
|
|
|
const defaultTrigger = iconObj[status];
|
|
|
|
const triggerDom =
|
2018-04-20 04:52:31 +00:00
|
|
|
trigger !== null
|
|
|
|
? zeroWidthTrigger || (
|
2019-01-12 03:33:27 +00:00
|
|
|
<div class={`${prefixCls}-trigger`} onClick={this.toggle} style={{ width: siderWidth }}>
|
|
|
|
{trigger || defaultTrigger}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
: null;
|
2018-04-20 04:52:31 +00:00
|
|
|
const divStyle = {
|
|
|
|
// ...style,
|
2018-09-05 13:28:54 +00:00
|
|
|
flex: `0 0 ${siderWidth}`,
|
|
|
|
maxWidth: siderWidth, // Fix width transition bug in IE11
|
|
|
|
minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349
|
|
|
|
width: siderWidth,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-09-05 13:28:54 +00:00
|
|
|
const siderCls = classNames(prefixCls, `${prefixCls}-${theme}`, {
|
2018-04-20 04:52:31 +00:00
|
|
|
[`${prefixCls}-collapsed`]: !!this.sCollapsed,
|
|
|
|
[`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
|
|
|
|
[`${prefixCls}-below`]: !!this.below,
|
2018-09-05 13:28:54 +00:00
|
|
|
[`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-04-20 04:52:31 +00:00
|
|
|
const divProps = {
|
2020-01-18 13:34:23 +00:00
|
|
|
on: getListeners(this),
|
2018-04-20 04:52:31 +00:00
|
|
|
class: siderCls,
|
|
|
|
style: divStyle,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-04-20 04:52:31 +00:00
|
|
|
return (
|
|
|
|
<div {...divProps}>
|
|
|
|
<div class={`${prefixCls}-children`}>{this.$slots.default}</div>
|
|
|
|
{collapsible || (this.below && zeroWidthTrigger) ? triggerDom : null}
|
|
|
|
</div>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-04-20 04:52:31 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|