2019-04-16 12:06:04 +08:00
|
|
|
import createContext, { Context } from '@ant-design/create-react-context';
|
2019-08-05 18:38:10 +08:00
|
|
|
|
|
|
|
import * as React from 'react';
|
|
|
|
import { polyfill } from 'react-lifecycles-compat';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import omit from 'omit.js';
|
2019-04-05 16:15:01 +08:00
|
|
|
import { LayoutContext, LayoutContextProps } from './layout';
|
2019-08-05 18:38:10 +08:00
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
|
|
|
import Icon from '../icon';
|
|
|
|
import isNumeric from '../_util/isNumeric';
|
2018-12-05 19:12:18 +08:00
|
|
|
|
2017-09-28 17:28:49 +08:00
|
|
|
// matchMedia polyfill for
|
|
|
|
// https://github.com/WickyNilliams/enquire.js/issues/82
|
2019-09-16 18:19:18 +08:00
|
|
|
// TODO: Will be removed in antd 4.0 because we will no longer support ie9
|
2017-09-28 17:28:49 +08:00
|
|
|
if (typeof window !== 'undefined') {
|
2018-09-30 16:07:01 +08:00
|
|
|
const matchMediaPolyfill = (mediaQuery: string) => {
|
2017-09-28 17:28:49 +08:00
|
|
|
return {
|
|
|
|
media: mediaQuery,
|
|
|
|
matches: false,
|
2018-12-07 20:02:01 +08:00
|
|
|
addListener() {},
|
|
|
|
removeListener() {},
|
2017-09-28 17:28:49 +08:00
|
|
|
};
|
|
|
|
};
|
2019-09-16 18:19:18 +08:00
|
|
|
// ref: https://github.com/ant-design/ant-design/issues/18774
|
|
|
|
if (!window.matchMedia) window.matchMedia = matchMediaPolyfill as any;
|
2017-09-28 17:28:49 +08:00
|
|
|
}
|
|
|
|
|
2019-08-29 16:57:12 +08:00
|
|
|
const dimensionMaxMap = {
|
|
|
|
xs: '479.98px',
|
|
|
|
sm: '575.98px',
|
|
|
|
md: '767.98px',
|
|
|
|
lg: '991.98px',
|
|
|
|
xl: '1199.98px',
|
|
|
|
xxl: '1599.98px',
|
2017-09-28 17:28:49 +08:00
|
|
|
};
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
export interface SiderContextProps {
|
|
|
|
siderCollapsed?: boolean;
|
|
|
|
collapsedWidth?: string | number;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const SiderContext: Context<SiderContextProps> = createContext({});
|
|
|
|
|
2017-11-21 19:02:23 +08:00
|
|
|
export type CollapseType = 'clickTrigger' | 'responsive';
|
|
|
|
|
2018-05-23 23:46:28 +08:00
|
|
|
export type SiderTheme = 'light' | 'dark';
|
|
|
|
|
2018-03-06 15:51:06 +08:00
|
|
|
export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
|
2016-12-30 21:41:28 +08:00
|
|
|
prefixCls?: string;
|
|
|
|
collapsible?: boolean;
|
|
|
|
collapsed?: boolean;
|
|
|
|
defaultCollapsed?: boolean;
|
2017-01-26 12:30:37 +08:00
|
|
|
reverseArrow?: boolean;
|
2017-11-21 19:02:23 +08:00
|
|
|
onCollapse?: (collapsed: boolean, type: CollapseType) => void;
|
2016-12-30 21:41:28 +08:00
|
|
|
trigger?: React.ReactNode;
|
|
|
|
width?: number | string;
|
2017-03-05 21:10:34 +08:00
|
|
|
collapsedWidth?: number | string;
|
2017-12-15 14:37:22 +08:00
|
|
|
breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
2018-05-23 23:46:28 +08:00
|
|
|
theme?: SiderTheme;
|
2018-06-03 13:03:21 +08:00
|
|
|
onBreakpoint?: (broken: boolean) => void;
|
2016-12-30 21:41:28 +08:00
|
|
|
}
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
type InternalSideProps = SiderProps & LayoutContextProps;
|
|
|
|
|
2018-04-01 01:15:42 +08:00
|
|
|
export interface SiderState {
|
2017-11-21 19:02:23 +08:00
|
|
|
collapsed?: boolean;
|
|
|
|
below: boolean;
|
|
|
|
belowShow?: boolean;
|
|
|
|
}
|
|
|
|
|
2017-11-09 20:04:34 +08:00
|
|
|
const generateId = (() => {
|
|
|
|
let i = 0;
|
|
|
|
return (prefix: string = '') => {
|
|
|
|
i += 1;
|
|
|
|
return `${prefix}${i}`;
|
|
|
|
};
|
|
|
|
})();
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
class InternalSider extends React.Component<InternalSideProps, SiderState> {
|
2016-12-30 21:41:28 +08:00
|
|
|
static defaultProps = {
|
|
|
|
collapsible: false,
|
|
|
|
defaultCollapsed: false,
|
2017-01-26 12:30:37 +08:00
|
|
|
reverseArrow: false,
|
2016-12-30 21:41:28 +08:00
|
|
|
width: 200,
|
2017-09-27 22:32:49 +08:00
|
|
|
collapsedWidth: 80,
|
2016-12-30 21:41:28 +08:00
|
|
|
style: {},
|
2018-05-23 23:46:28 +08:00
|
|
|
theme: 'dark' as SiderTheme,
|
2016-12-30 21:41:28 +08:00
|
|
|
};
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
static getDerivedStateFromProps(nextProps: InternalSideProps) {
|
2018-08-10 17:04:40 +08:00
|
|
|
if ('collapsed' in nextProps) {
|
|
|
|
return {
|
|
|
|
collapsed: nextProps.collapsed,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2017-11-21 19:02:23 +08:00
|
|
|
private mql: MediaQueryList;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2017-11-09 20:04:34 +08:00
|
|
|
private uniqueId: string;
|
2017-03-05 21:10:34 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
constructor(props: InternalSideProps) {
|
2016-12-30 21:41:28 +08:00
|
|
|
super(props);
|
2017-11-09 20:04:34 +08:00
|
|
|
this.uniqueId = generateId('ant-sider-');
|
2017-09-28 17:28:49 +08:00
|
|
|
let matchMedia;
|
|
|
|
if (typeof window !== 'undefined') {
|
|
|
|
matchMedia = window.matchMedia;
|
|
|
|
}
|
2019-08-29 16:57:12 +08:00
|
|
|
if (matchMedia && props.breakpoint && props.breakpoint in dimensionMaxMap) {
|
|
|
|
this.mql = matchMedia(`(max-width: ${dimensionMaxMap[props.breakpoint]})`);
|
2017-09-28 17:28:49 +08:00
|
|
|
}
|
2016-12-30 21:41:28 +08:00
|
|
|
let collapsed;
|
|
|
|
if ('collapsed' in props) {
|
|
|
|
collapsed = props.collapsed;
|
|
|
|
} else {
|
|
|
|
collapsed = props.defaultCollapsed;
|
|
|
|
}
|
|
|
|
this.state = {
|
|
|
|
collapsed,
|
2017-03-05 21:10:34 +08:00
|
|
|
below: false,
|
2016-12-30 21:41:28 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2017-03-05 21:10:34 +08:00
|
|
|
componentDidMount() {
|
|
|
|
if (this.mql) {
|
2018-09-30 21:29:14 +08:00
|
|
|
this.mql.addListener(this.responsiveHandler);
|
2017-03-05 21:10:34 +08:00
|
|
|
this.responsiveHandler(this.mql);
|
|
|
|
}
|
2017-11-09 20:04:34 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
if (this.props.siderHook) {
|
|
|
|
this.props.siderHook.addSider(this.uniqueId);
|
2017-11-09 20:04:34 +08:00
|
|
|
}
|
2017-03-05 21:10:34 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.mql) {
|
2018-09-30 21:39:12 +08:00
|
|
|
this.mql.removeListener(this.responsiveHandler as any);
|
2017-03-05 21:10:34 +08:00
|
|
|
}
|
2017-11-09 20:04:34 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
if (this.props.siderHook) {
|
|
|
|
this.props.siderHook.removeSider(this.uniqueId);
|
2017-11-09 20:04:34 +08:00
|
|
|
}
|
2017-03-05 21:10:34 +08:00
|
|
|
}
|
|
|
|
|
2018-09-30 21:39:12 +08:00
|
|
|
responsiveHandler = (mql: MediaQueryListEvent | MediaQueryList) => {
|
2017-03-05 21:10:34 +08:00
|
|
|
this.setState({ below: mql.matches });
|
2018-06-03 13:03:21 +08:00
|
|
|
const { onBreakpoint } = this.props;
|
|
|
|
if (onBreakpoint) {
|
|
|
|
onBreakpoint(mql.matches);
|
|
|
|
}
|
2017-03-05 21:10:34 +08:00
|
|
|
if (this.state.collapsed !== mql.matches) {
|
|
|
|
this.setCollapsed(mql.matches, 'responsive');
|
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2017-03-05 21:10:34 +08:00
|
|
|
|
2017-11-21 19:02:23 +08:00
|
|
|
setCollapsed = (collapsed: boolean, type: CollapseType) => {
|
2016-12-30 21:41:28 +08:00
|
|
|
if (!('collapsed' in this.props)) {
|
|
|
|
this.setState({
|
|
|
|
collapsed,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
const { onCollapse } = this.props;
|
|
|
|
if (onCollapse) {
|
2017-03-05 21:10:34 +08:00
|
|
|
onCollapse(collapsed, type);
|
2016-12-30 21:41:28 +08:00
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-12-30 21:41:28 +08:00
|
|
|
|
|
|
|
toggle = () => {
|
|
|
|
const collapsed = !this.state.collapsed;
|
2017-03-05 21:10:34 +08:00
|
|
|
this.setCollapsed(collapsed, 'clickTrigger');
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2017-03-05 21:10:34 +08:00
|
|
|
|
|
|
|
belowShowChange = () => {
|
2019-08-05 18:38:10 +08:00
|
|
|
this.setState(({ belowShow }) => ({ belowShow: !belowShow }));
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-12-30 21:41:28 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
renderSider = ({ getPrefixCls }: ConfigConsumerProps) => {
|
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
2018-12-07 20:02:01 +08:00
|
|
|
className,
|
|
|
|
theme,
|
|
|
|
collapsible,
|
|
|
|
reverseArrow,
|
|
|
|
trigger,
|
|
|
|
style,
|
|
|
|
width,
|
|
|
|
collapsedWidth,
|
2018-06-02 20:12:09 +08:00
|
|
|
...others
|
2016-12-30 21:41:28 +08:00
|
|
|
} = this.props;
|
2018-12-05 19:12:18 +08:00
|
|
|
const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
|
2018-12-07 20:02:01 +08:00
|
|
|
const divProps = omit(others, [
|
|
|
|
'collapsed',
|
|
|
|
'defaultCollapsed',
|
|
|
|
'onCollapse',
|
|
|
|
'breakpoint',
|
|
|
|
'onBreakpoint',
|
2019-04-05 16:15:01 +08:00
|
|
|
'siderHook',
|
2018-12-07 20:02:01 +08:00
|
|
|
]);
|
2018-05-12 02:30:33 +08:00
|
|
|
const rawWidth = this.state.collapsed ? collapsedWidth : width;
|
|
|
|
// use "px" as fallback unit for width
|
2018-07-10 12:29:20 +08:00
|
|
|
const siderWidth = isNumeric(rawWidth) ? `${rawWidth}px` : String(rawWidth);
|
2017-03-05 21:10:34 +08:00
|
|
|
// special trigger when collapsedWidth == 0
|
2018-12-07 20:02:01 +08:00
|
|
|
const zeroWidthTrigger =
|
|
|
|
parseFloat(String(collapsedWidth || 0)) === 0 ? (
|
2019-01-21 12:12:33 +08:00
|
|
|
<span
|
|
|
|
onClick={this.toggle}
|
2019-01-25 20:01:53 +08:00
|
|
|
className={`${prefixCls}-zero-width-trigger ${prefixCls}-zero-width-trigger-${
|
|
|
|
reverseArrow ? 'right' : 'left'
|
|
|
|
}`}
|
2019-01-21 12:12:33 +08:00
|
|
|
>
|
2018-12-07 20:02:01 +08:00
|
|
|
<Icon type="bars" />
|
|
|
|
</span>
|
|
|
|
) : null;
|
2016-12-30 21:41:28 +08:00
|
|
|
const iconObj = {
|
2018-12-07 20:02:01 +08:00
|
|
|
expanded: reverseArrow ? <Icon type="right" /> : <Icon type="left" />,
|
|
|
|
collapsed: reverseArrow ? <Icon type="left" /> : <Icon type="right" />,
|
2016-12-30 21:41:28 +08:00
|
|
|
};
|
|
|
|
const status = this.state.collapsed ? 'collapsed' : 'expanded';
|
|
|
|
const defaultTrigger = iconObj[status];
|
2018-12-07 20:02:01 +08:00
|
|
|
const triggerDom =
|
|
|
|
trigger !== null
|
|
|
|
? zeroWidthTrigger || (
|
|
|
|
<div
|
|
|
|
className={`${prefixCls}-trigger`}
|
|
|
|
onClick={this.toggle}
|
|
|
|
style={{ width: siderWidth }}
|
|
|
|
>
|
|
|
|
{trigger || defaultTrigger}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
: null;
|
2017-03-05 21:10:34 +08:00
|
|
|
const divStyle = {
|
|
|
|
...style,
|
2018-05-12 02:30:33 +08: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,
|
2017-03-05 21:10:34 +08:00
|
|
|
};
|
2018-05-23 23:46:28 +08:00
|
|
|
const siderCls = classNames(className, prefixCls, `${prefixCls}-${theme}`, {
|
2017-03-05 21:10:34 +08:00
|
|
|
[`${prefixCls}-collapsed`]: !!this.state.collapsed,
|
2018-02-24 10:35:04 +08:00
|
|
|
[`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
|
2017-03-05 21:10:34 +08:00
|
|
|
[`${prefixCls}-below`]: !!this.state.below,
|
2018-05-12 02:30:33 +08:00
|
|
|
[`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
|
2017-03-05 21:10:34 +08:00
|
|
|
});
|
2016-12-30 21:41:28 +08:00
|
|
|
return (
|
2019-02-14 17:51:52 +08:00
|
|
|
<aside className={siderCls} {...divProps} style={divStyle}>
|
2017-05-24 10:25:43 +08:00
|
|
|
<div className={`${prefixCls}-children`}>{this.props.children}</div>
|
2017-03-05 21:10:34 +08:00
|
|
|
{collapsible || (this.state.below && zeroWidthTrigger) ? triggerDom : null}
|
2019-02-14 17:51:52 +08:00
|
|
|
</aside>
|
2016-12-30 21:41:28 +08:00
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
|
|
|
render() {
|
2019-04-05 16:15:01 +08:00
|
|
|
const { collapsed } = this.state;
|
|
|
|
const { collapsedWidth } = this.props;
|
|
|
|
return (
|
|
|
|
<SiderContext.Provider
|
|
|
|
value={{
|
|
|
|
siderCollapsed: collapsed,
|
|
|
|
collapsedWidth,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<ConfigConsumer>{this.renderSider}</ConfigConsumer>
|
|
|
|
</SiderContext.Provider>
|
|
|
|
);
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2016-12-30 21:41:28 +08:00
|
|
|
}
|
2018-08-10 17:04:40 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
polyfill(InternalSider);
|
2018-08-10 17:04:40 +08:00
|
|
|
|
2019-08-06 15:02:05 +08:00
|
|
|
// eslint-disable-next-line react/prefer-stateless-function
|
2019-04-05 16:15:01 +08:00
|
|
|
export default class Sider extends React.Component {
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<LayoutContext.Consumer>
|
|
|
|
{(context: LayoutContextProps) => <InternalSider {...context} {...this.props} />}
|
|
|
|
</LayoutContext.Consumer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|