ant-design/components/layout/Sider.tsx

282 lines
7.6 KiB
TypeScript
Raw Normal View History

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';
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';
// 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
if (typeof window !== 'undefined') {
2018-09-30 16:07:01 +08:00
const matchMediaPolyfill = (mediaQuery: string) => {
return {
media: mediaQuery,
matches: false,
2018-12-07 20:02:01 +08:00
addListener() {},
removeListener() {},
};
};
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;
}
const dimensionMaxMap = {
xs: '479.98px',
sm: '575.98px',
md: '767.98px',
lg: '991.98px',
xl: '1199.98px',
xxl: '1599.98px',
};
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';
export type SiderTheme = 'light' | 'dark';
export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
prefixCls?: string;
collapsible?: boolean;
collapsed?: boolean;
defaultCollapsed?: boolean;
reverseArrow?: boolean;
2017-11-21 19:02:23 +08:00
onCollapse?: (collapsed: boolean, type: CollapseType) => void;
trigger?: React.ReactNode;
width?: number | string;
collapsedWidth?: number | string;
breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
theme?: SiderTheme;
onBreakpoint?: (broken: boolean) => void;
}
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;
}
const generateId = (() => {
let i = 0;
return (prefix: string = '') => {
i += 1;
return `${prefix}${i}`;
};
})();
class InternalSider extends React.Component<InternalSideProps, SiderState> {
static defaultProps = {
collapsible: false,
defaultCollapsed: false,
reverseArrow: false,
width: 200,
collapsedWidth: 80,
style: {},
theme: 'dark' as SiderTheme,
};
static getDerivedStateFromProps(nextProps: InternalSideProps) {
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
private uniqueId: string;
constructor(props: InternalSideProps) {
super(props);
this.uniqueId = generateId('ant-sider-');
let matchMedia;
if (typeof window !== 'undefined') {
matchMedia = window.matchMedia;
}
if (matchMedia && props.breakpoint && props.breakpoint in dimensionMaxMap) {
this.mql = matchMedia(`(max-width: ${dimensionMaxMap[props.breakpoint]})`);
}
let collapsed;
if ('collapsed' in props) {
collapsed = props.collapsed;
} else {
collapsed = props.defaultCollapsed;
}
this.state = {
collapsed,
below: false,
};
}
componentDidMount() {
if (this.mql) {
this.mql.addListener(this.responsiveHandler);
this.responsiveHandler(this.mql);
}
if (this.props.siderHook) {
this.props.siderHook.addSider(this.uniqueId);
}
}
componentWillUnmount() {
if (this.mql) {
2018-09-30 21:39:12 +08:00
this.mql.removeListener(this.responsiveHandler as any);
}
if (this.props.siderHook) {
this.props.siderHook.removeSider(this.uniqueId);
}
}
2018-09-30 21:39:12 +08:00
responsiveHandler = (mql: MediaQueryListEvent | MediaQueryList) => {
this.setState({ below: mql.matches });
const { onBreakpoint } = this.props;
if (onBreakpoint) {
onBreakpoint(mql.matches);
}
if (this.state.collapsed !== mql.matches) {
this.setCollapsed(mql.matches, 'responsive');
}
2018-12-07 20:02:01 +08:00
};
2017-11-21 19:02:23 +08:00
setCollapsed = (collapsed: boolean, type: CollapseType) => {
if (!('collapsed' in this.props)) {
this.setState({
collapsed,
});
}
const { onCollapse } = this.props;
if (onCollapse) {
onCollapse(collapsed, type);
}
2018-12-07 20:02:01 +08:00
};
toggle = () => {
const collapsed = !this.state.collapsed;
this.setCollapsed(collapsed, 'clickTrigger');
2018-12-07 20:02:01 +08:00
};
belowShowChange = () => {
2019-08-05 18:38:10 +08:00
this.setState(({ belowShow }) => ({ belowShow: !belowShow }));
2018-12-07 20:02:01 +08:00
};
renderSider = ({ getPrefixCls }: ConfigConsumerProps) => {
const {
prefixCls: customizePrefixCls,
2018-12-07 20:02:01 +08:00
className,
theme,
collapsible,
reverseArrow,
trigger,
style,
width,
collapsedWidth,
...others
} = this.props;
const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
2018-12-07 20:02:01 +08:00
const divProps = omit(others, [
'collapsed',
'defaultCollapsed',
'onCollapse',
'breakpoint',
'onBreakpoint',
'siderHook',
2018-12-07 20:02:01 +08:00
]);
const rawWidth = this.state.collapsed ? collapsedWidth : width;
// use "px" as fallback unit for width
const siderWidth = isNumeric(rawWidth) ? `${rawWidth}px` : String(rawWidth);
// special trigger when collapsedWidth == 0
2018-12-07 20:02:01 +08:00
const zeroWidthTrigger =
parseFloat(String(collapsedWidth || 0)) === 0 ? (
<span
onClick={this.toggle}
2019-01-25 20:01:53 +08:00
className={`${prefixCls}-zero-width-trigger ${prefixCls}-zero-width-trigger-${
reverseArrow ? 'right' : 'left'
}`}
>
2018-12-07 20:02:01 +08:00
<Icon type="bars" />
</span>
) : null;
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" />,
};
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;
const divStyle = {
...style,
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,
};
const siderCls = classNames(className, prefixCls, `${prefixCls}-${theme}`, {
[`${prefixCls}-collapsed`]: !!this.state.collapsed,
[`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
[`${prefixCls}-below`]: !!this.state.below,
[`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
});
return (
<aside className={siderCls} {...divProps} style={divStyle}>
<div className={`${prefixCls}-children`}>{this.props.children}</div>
{collapsible || (this.state.below && zeroWidthTrigger) ? triggerDom : null}
</aside>
);
2018-12-07 20:02:01 +08:00
};
render() {
const { collapsed } = this.state;
const { collapsedWidth } = this.props;
return (
<SiderContext.Provider
value={{
siderCollapsed: collapsed,
collapsedWidth,
}}
>
<ConfigConsumer>{this.renderSider}</ConfigConsumer>
</SiderContext.Provider>
);
}
}
polyfill(InternalSider);
// eslint-disable-next-line react/prefer-stateless-function
export default class Sider extends React.Component {
render() {
return (
<LayoutContext.Consumer>
{(context: LayoutContextProps) => <InternalSider {...context} {...this.props} />}
</LayoutContext.Consumer>
);
}
}