ant-design/components/layout/Sider.tsx

273 lines
7.4 KiB
TypeScript
Raw Normal View History

2019-08-05 18:38:10 +08:00
import * as React from 'react';
import classNames from 'classnames';
import omit from 'omit.js';
import BarsOutlined from '@ant-design/icons/BarsOutlined';
import RightOutlined from '@ant-design/icons/RightOutlined';
import LeftOutlined from '@ant-design/icons/LeftOutlined';
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
import { LayoutContext, LayoutContextProps } from './layout';
2019-08-05 18:38:10 +08:00
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import isNumeric from '../_util/isNumeric';
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: React.Context<SiderContextProps> = React.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;
zeroWidthTriggerStyle?: React.CSSProperties;
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;
}
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) {
try {
this.mql.addEventListener('change', this.responsiveHandler);
} catch (error) {
this.mql.addListener(this.responsiveHandler);
}
this.responsiveHandler(this.mql);
}
this.props?.siderHook.addSider(this.uniqueId);
}
componentWillUnmount() {
try {
this.mql?.removeEventListener('change', this.responsiveHandler);
} catch (error) {
this.mql?.removeListener(this.responsiveHandler);
}
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;
const { collapsed } = this.state;
if (onBreakpoint) {
onBreakpoint(mql.matches);
}
if (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
};
renderSider = ({ getPrefixCls }: ConfigConsumerProps) => {
const {
prefixCls: customizePrefixCls,
2018-12-07 20:02:01 +08:00
className,
theme,
collapsible,
reverseArrow,
trigger,
style,
width,
collapsedWidth,
zeroWidthTriggerStyle,
children,
...others
} = this.props;
const { collapsed, below } = this.state;
const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
2018-12-07 20:02:01 +08:00
const divProps = omit(others, [
'collapsed',
'defaultCollapsed',
'onCollapse',
'breakpoint',
'onBreakpoint',
'siderHook',
'zeroWidthTriggerStyle',
2018-12-07 20:02:01 +08:00
]);
const rawWidth = 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}
className={classNames(
`${prefixCls}-zero-width-trigger`,
`${prefixCls}-zero-width-trigger-${reverseArrow ? 'right' : 'left'}`,
)}
style={zeroWidthTriggerStyle}
>
{trigger || <BarsOutlined />}
2018-12-07 20:02:01 +08:00
</span>
) : null;
const iconObj = {
expanded: reverseArrow ? <RightOutlined /> : <LeftOutlined />,
collapsed: reverseArrow ? <LeftOutlined /> : <RightOutlined />,
};
const status = 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(
prefixCls,
`${prefixCls}-${theme}`,
{
[`${prefixCls}-collapsed`]: !!collapsed,
[`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
[`${prefixCls}-below`]: !!below,
[`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
},
className,
);
return (
<aside className={siderCls} {...divProps} style={divStyle}>
<div className={`${prefixCls}-children`}>{children}</div>
{collapsible || (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>
);
}
}
// 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>
);
}
}