Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 13x 1x 13x 13x 13x 13x 3x 3x 3x 3x 3x 13x 13x 13x 1x 5x 8x | import React, { useEffect, useState, useMemo } from 'react';
import { LayoutContext, LayoutContextProps } from './Layout';
export function randomid(): string {
return parseInt(String(Math.random() * 1e15), 10).toString(36);
}
export interface LayoutSiderProps extends React.HTMLAttributes<HTMLElement> {
prefixCls?: string;
children?: React.ReactNode;
/** Width of the sidebar */
width?: number | string;
/** Width of the collapsed sidebar, by setting to 0 a special trigger will appear */
collapsedWidth?: number;
/** To set the current status */
collapsed?: boolean;
}
const Sider = React.forwardRef<HTMLDivElement, LayoutSiderProps>((props, ref) => {
const {
prefixCls = 'w-layout-sider',
className,
style,
children,
width = 200,
collapsedWidth = 80,
collapsed = false,
addSider,
removeSider,
...other
} = props as LayoutSiderProps & LayoutContextProps;
const [sliderId] = useState(`w-layout-${randomid()}`);
const [rawWidth, setRawWidth] = useState(collapsed ? collapsedWidth : width);
useEffect(() => {
Eif (addSider) {
addSider(sliderId);
}
return () => {
Eif (removeSider) {
removeSider(sliderId);
}
};
}, []);
useMemo(() => setRawWidth(collapsed ? collapsedWidth : width), [width, collapsedWidth, collapsed]);
const divStyle = {
...style,
flex: `0 0 ${rawWidth}`,
maxWidth: rawWidth,
minWidth: rawWidth,
width: rawWidth,
};
return (
<div ref={ref} className={[prefixCls, className].filter(Boolean).join(' ').trim()} style={divStyle} {...other}>
{children}
</div>
);
});
export const LayoutSider = React.forwardRef<HTMLDivElement, LayoutSiderProps>((props, ref) => {
return (
<LayoutContext.Consumer>
{(context: LayoutContextProps) => <Sider ref={ref} {...props} {...context} />}
</LayoutContext.Consumer>
);
});
|