antd
Version:
An enterprise-class UI design language and React components implementation
187 lines • 8.1 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import BarsOutlined from "@ant-design/icons/es/icons/BarsOutlined";
import LeftOutlined from "@ant-design/icons/es/icons/LeftOutlined";
import RightOutlined from "@ant-design/icons/es/icons/RightOutlined";
import classNames from 'classnames';
import omit from "rc-util/es/omit";
import * as React from 'react';
import { useContext, useEffect, useRef, useState } from 'react';
import { ConfigContext } from '../config-provider';
import isNumeric from '../_util/isNumeric';
import { LayoutContext } from './layout';
var dimensionMaxMap = {
xs: '479.98px',
sm: '575.98px',
md: '767.98px',
lg: '991.98px',
xl: '1199.98px',
xxl: '1599.98px'
};
export var SiderContext = /*#__PURE__*/React.createContext({});
var generateId = function () {
var i = 0;
return function () {
var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
i += 1;
return "" + prefix + i;
};
}();
var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
var customizePrefixCls = _a.prefixCls,
className = _a.className,
trigger = _a.trigger,
children = _a.children,
_a$defaultCollapsed = _a.defaultCollapsed,
defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
_a$theme = _a.theme,
theme = _a$theme === void 0 ? 'dark' : _a$theme,
_a$style = _a.style,
style = _a$style === void 0 ? {} : _a$style,
_a$collapsible = _a.collapsible,
collapsible = _a$collapsible === void 0 ? false : _a$collapsible,
_a$reverseArrow = _a.reverseArrow,
reverseArrow = _a$reverseArrow === void 0 ? false : _a$reverseArrow,
_a$width = _a.width,
width = _a$width === void 0 ? 200 : _a$width,
_a$collapsedWidth = _a.collapsedWidth,
collapsedWidth = _a$collapsedWidth === void 0 ? 80 : _a$collapsedWidth,
zeroWidthTriggerStyle = _a.zeroWidthTriggerStyle,
breakpoint = _a.breakpoint,
onCollapse = _a.onCollapse,
onBreakpoint = _a.onBreakpoint,
props = __rest(_a, ["prefixCls", "className", "trigger", "children", "defaultCollapsed", "theme", "style", "collapsible", "reverseArrow", "width", "collapsedWidth", "zeroWidthTriggerStyle", "breakpoint", "onCollapse", "onBreakpoint"]);
var _useContext = useContext(LayoutContext),
siderHook = _useContext.siderHook;
var _useState = useState('collapsed' in props ? props.collapsed : defaultCollapsed),
_useState2 = _slicedToArray(_useState, 2),
collapsed = _useState2[0],
setCollapsed = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
below = _useState4[0],
setBelow = _useState4[1];
useEffect(function () {
if ('collapsed' in props) {
setCollapsed(props.collapsed);
}
}, [props.collapsed]);
var handleSetCollapsed = function handleSetCollapsed(value, type) {
if (!('collapsed' in props)) {
setCollapsed(value);
}
onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(value, type);
};
// ========================= Responsive =========================
var responsiveHandlerRef = useRef();
responsiveHandlerRef.current = function (mql) {
setBelow(mql.matches);
onBreakpoint === null || onBreakpoint === void 0 ? void 0 : onBreakpoint(mql.matches);
if (collapsed !== mql.matches) {
handleSetCollapsed(mql.matches, 'responsive');
}
};
useEffect(function () {
function responsiveHandler(mql) {
return responsiveHandlerRef.current(mql);
}
var mql;
if (typeof window !== 'undefined') {
var _window = window,
matchMedia = _window.matchMedia;
if (matchMedia && breakpoint && breakpoint in dimensionMaxMap) {
mql = matchMedia("(max-width: " + dimensionMaxMap[breakpoint] + ")");
try {
mql.addEventListener('change', responsiveHandler);
} catch (error) {
mql.addListener(responsiveHandler);
}
responsiveHandler(mql);
}
}
return function () {
try {
mql === null || mql === void 0 ? void 0 : mql.removeEventListener('change', responsiveHandler);
} catch (error) {
mql === null || mql === void 0 ? void 0 : mql.removeListener(responsiveHandler);
}
};
}, [breakpoint]); // in order to accept dynamic 'breakpoint' property, we need to add 'breakpoint' into dependency array.
useEffect(function () {
var uniqueId = generateId('ant-sider-');
siderHook.addSider(uniqueId);
return function () {
return siderHook.removeSider(uniqueId);
};
}, []);
var toggle = function toggle() {
handleSetCollapsed(!collapsed, 'clickTrigger');
};
var _useContext2 = useContext(ConfigContext),
getPrefixCls = _useContext2.getPrefixCls;
var renderSider = function renderSider() {
var _classNames;
var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
var divProps = omit(props, ['collapsed']);
var rawWidth = collapsed ? collapsedWidth : width;
// use "px" as fallback unit for width
var siderWidth = isNumeric(rawWidth) ? rawWidth + "px" : String(rawWidth);
// special trigger when collapsedWidth == 0
var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? /*#__PURE__*/React.createElement("span", {
onClick: toggle,
className: classNames(prefixCls + "-zero-width-trigger", prefixCls + "-zero-width-trigger-" + (reverseArrow ? 'right' : 'left')),
style: zeroWidthTriggerStyle
}, trigger || /*#__PURE__*/React.createElement(BarsOutlined, null)) : null;
var iconObj = {
expanded: reverseArrow ? /*#__PURE__*/React.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(LeftOutlined, null),
collapsed: reverseArrow ? /*#__PURE__*/React.createElement(LeftOutlined, null) : /*#__PURE__*/React.createElement(RightOutlined, null)
};
var status = collapsed ? 'collapsed' : 'expanded';
var defaultTrigger = iconObj[status];
var triggerDom = trigger !== null ? zeroWidthTrigger || /*#__PURE__*/React.createElement("div", {
className: prefixCls + "-trigger",
onClick: toggle,
style: {
width: siderWidth
}
}, trigger || defaultTrigger) : null;
var divStyle = _extends(_extends({}, style), {
flex: "0 0 " + siderWidth,
maxWidth: siderWidth,
minWidth: siderWidth,
width: siderWidth
});
var siderCls = classNames(prefixCls, prefixCls + "-" + theme, (_classNames = {}, _defineProperty(_classNames, prefixCls + "-collapsed", !!collapsed), _defineProperty(_classNames, prefixCls + "-has-trigger", collapsible && trigger !== null && !zeroWidthTrigger), _defineProperty(_classNames, prefixCls + "-below", !!below), _defineProperty(_classNames, prefixCls + "-zero-width", parseFloat(siderWidth) === 0), _classNames), className);
return /*#__PURE__*/React.createElement("aside", _extends({
className: siderCls
}, divProps, {
style: divStyle,
ref: ref
}), /*#__PURE__*/React.createElement("div", {
className: prefixCls + "-children"
}, children), collapsible || below && zeroWidthTrigger ? triggerDom : null);
};
var contextValue = React.useMemo(function () {
return {
siderCollapsed: collapsed
};
}, [collapsed]);
return /*#__PURE__*/React.createElement(SiderContext.Provider, {
value: contextValue
}, renderSider());
});
if (process.env.NODE_ENV !== 'production') {
Sider.displayName = 'Sider';
}
export default Sider;