ant-design-vue/components/layout/Sider.jsx

250 lines
6.6 KiB
Vue
Raw Normal View History

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']),
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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;
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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,
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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
};
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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,
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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
};