1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
4 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports["default"] = exports.SiderContext = void 0;
|
9 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
12 | var _BarsOutlined = _interopRequireDefault(require("@ant-design/icons/BarsOutlined"));
|
13 | var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons/LeftOutlined"));
|
14 | var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
|
15 | var _classnames = _interopRequireDefault(require("classnames"));
|
16 | var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
|
17 | var React = _interopRequireWildcard(require("react"));
|
18 | var _configProvider = require("../config-provider");
|
19 | var _isNumeric = _interopRequireDefault(require("../_util/isNumeric"));
|
20 | var _layout = require("./layout");
|
21 | var __rest = void 0 && (void 0).__rest || function (s, e) {
|
22 | var t = {};
|
23 | for (var p in s) {
|
24 | if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
25 | }
|
26 | if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
27 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
28 | }
|
29 | return t;
|
30 | };
|
31 | var dimensionMaxMap = {
|
32 | xs: '479.98px',
|
33 | sm: '575.98px',
|
34 | md: '767.98px',
|
35 | lg: '991.98px',
|
36 | xl: '1199.98px',
|
37 | xxl: '1599.98px'
|
38 | };
|
39 | var SiderContext = React.createContext({});
|
40 | exports.SiderContext = SiderContext;
|
41 | var generateId = function () {
|
42 | var i = 0;
|
43 | return function () {
|
44 | var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
45 | i += 1;
|
46 | return "" + prefix + i;
|
47 | };
|
48 | }();
|
49 | var Sider = React.forwardRef(function (_a, ref) {
|
50 | var customizePrefixCls = _a.prefixCls,
|
51 | className = _a.className,
|
52 | trigger = _a.trigger,
|
53 | children = _a.children,
|
54 | _a$defaultCollapsed = _a.defaultCollapsed,
|
55 | defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
|
56 | _a$theme = _a.theme,
|
57 | theme = _a$theme === void 0 ? 'dark' : _a$theme,
|
58 | _a$style = _a.style,
|
59 | style = _a$style === void 0 ? {} : _a$style,
|
60 | _a$collapsible = _a.collapsible,
|
61 | collapsible = _a$collapsible === void 0 ? false : _a$collapsible,
|
62 | _a$reverseArrow = _a.reverseArrow,
|
63 | reverseArrow = _a$reverseArrow === void 0 ? false : _a$reverseArrow,
|
64 | _a$width = _a.width,
|
65 | width = _a$width === void 0 ? 200 : _a$width,
|
66 | _a$collapsedWidth = _a.collapsedWidth,
|
67 | collapsedWidth = _a$collapsedWidth === void 0 ? 80 : _a$collapsedWidth,
|
68 | zeroWidthTriggerStyle = _a.zeroWidthTriggerStyle,
|
69 | breakpoint = _a.breakpoint,
|
70 | onCollapse = _a.onCollapse,
|
71 | onBreakpoint = _a.onBreakpoint,
|
72 | props = __rest(_a, ["prefixCls", "className", "trigger", "children", "defaultCollapsed", "theme", "style", "collapsible", "reverseArrow", "width", "collapsedWidth", "zeroWidthTriggerStyle", "breakpoint", "onCollapse", "onBreakpoint"]);
|
73 | var _useContext = (0, React.useContext)(_layout.LayoutContext),
|
74 | siderHook = _useContext.siderHook;
|
75 | var _useState = (0, React.useState)('collapsed' in props ? props.collapsed : defaultCollapsed),
|
76 | _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
77 | collapsed = _useState2[0],
|
78 | setCollapsed = _useState2[1];
|
79 | var _useState3 = (0, React.useState)(false),
|
80 | _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
81 | below = _useState4[0],
|
82 | setBelow = _useState4[1];
|
83 | (0, React.useEffect)(function () {
|
84 | if ('collapsed' in props) {
|
85 | setCollapsed(props.collapsed);
|
86 | }
|
87 | }, [props.collapsed]);
|
88 | var handleSetCollapsed = function handleSetCollapsed(value, type) {
|
89 | if (!('collapsed' in props)) {
|
90 | setCollapsed(value);
|
91 | }
|
92 | onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(value, type);
|
93 | };
|
94 |
|
95 | var responsiveHandlerRef = (0, React.useRef)();
|
96 | responsiveHandlerRef.current = function (mql) {
|
97 | setBelow(mql.matches);
|
98 | onBreakpoint === null || onBreakpoint === void 0 ? void 0 : onBreakpoint(mql.matches);
|
99 | if (collapsed !== mql.matches) {
|
100 | handleSetCollapsed(mql.matches, 'responsive');
|
101 | }
|
102 | };
|
103 | (0, React.useEffect)(function () {
|
104 | function responsiveHandler(mql) {
|
105 | return responsiveHandlerRef.current(mql);
|
106 | }
|
107 | var mql;
|
108 | if (typeof window !== 'undefined') {
|
109 | var _window = window,
|
110 | matchMedia = _window.matchMedia;
|
111 | if (matchMedia && breakpoint && breakpoint in dimensionMaxMap) {
|
112 | mql = matchMedia("(max-width: " + dimensionMaxMap[breakpoint] + ")");
|
113 | try {
|
114 | mql.addEventListener('change', responsiveHandler);
|
115 | } catch (error) {
|
116 | mql.addListener(responsiveHandler);
|
117 | }
|
118 | responsiveHandler(mql);
|
119 | }
|
120 | }
|
121 | return function () {
|
122 | try {
|
123 | mql === null || mql === void 0 ? void 0 : mql.removeEventListener('change', responsiveHandler);
|
124 | } catch (error) {
|
125 | mql === null || mql === void 0 ? void 0 : mql.removeListener(responsiveHandler);
|
126 | }
|
127 | };
|
128 | }, [breakpoint]);
|
129 | (0, React.useEffect)(function () {
|
130 | var uniqueId = generateId('ant-sider-');
|
131 | siderHook.addSider(uniqueId);
|
132 | return function () {
|
133 | return siderHook.removeSider(uniqueId);
|
134 | };
|
135 | }, []);
|
136 | var toggle = function toggle() {
|
137 | handleSetCollapsed(!collapsed, 'clickTrigger');
|
138 | };
|
139 | var _useContext2 = (0, React.useContext)(_configProvider.ConfigContext),
|
140 | getPrefixCls = _useContext2.getPrefixCls;
|
141 | var renderSider = function renderSider() {
|
142 | var _classNames;
|
143 | var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
|
144 | var divProps = (0, _omit["default"])(props, ['collapsed']);
|
145 | var rawWidth = collapsed ? collapsedWidth : width;
|
146 |
|
147 | var siderWidth = (0, _isNumeric["default"])(rawWidth) ? rawWidth + "px" : String(rawWidth);
|
148 |
|
149 | var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? React.createElement("span", {
|
150 | onClick: toggle,
|
151 | className: (0, _classnames["default"])(prefixCls + "-zero-width-trigger", prefixCls + "-zero-width-trigger-" + (reverseArrow ? 'right' : 'left')),
|
152 | style: zeroWidthTriggerStyle
|
153 | }, trigger || React.createElement(_BarsOutlined["default"], null)) : null;
|
154 | var iconObj = {
|
155 | expanded: reverseArrow ? React.createElement(_RightOutlined["default"], null) : React.createElement(_LeftOutlined["default"], null),
|
156 | collapsed: reverseArrow ? React.createElement(_LeftOutlined["default"], null) : React.createElement(_RightOutlined["default"], null)
|
157 | };
|
158 | var status = collapsed ? 'collapsed' : 'expanded';
|
159 | var defaultTrigger = iconObj[status];
|
160 | var triggerDom = trigger !== null ? zeroWidthTrigger || React.createElement("div", {
|
161 | className: prefixCls + "-trigger",
|
162 | onClick: toggle,
|
163 | style: {
|
164 | width: siderWidth
|
165 | }
|
166 | }, trigger || defaultTrigger) : null;
|
167 | var divStyle = (0, _extends2["default"])((0, _extends2["default"])({}, style), {
|
168 | flex: "0 0 " + siderWidth,
|
169 | maxWidth: siderWidth,
|
170 | minWidth: siderWidth,
|
171 | width: siderWidth
|
172 | });
|
173 | var siderCls = (0, _classnames["default"])(prefixCls, prefixCls + "-" + theme, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, prefixCls + "-collapsed", !!collapsed), (0, _defineProperty2["default"])(_classNames, prefixCls + "-has-trigger", collapsible && trigger !== null && !zeroWidthTrigger), (0, _defineProperty2["default"])(_classNames, prefixCls + "-below", !!below), (0, _defineProperty2["default"])(_classNames, prefixCls + "-zero-width", parseFloat(siderWidth) === 0), _classNames), className);
|
174 | return React.createElement("aside", (0, _extends2["default"])({
|
175 | className: siderCls
|
176 | }, divProps, {
|
177 | style: divStyle,
|
178 | ref: ref
|
179 | }), React.createElement("div", {
|
180 | className: prefixCls + "-children"
|
181 | }, children), collapsible || below && zeroWidthTrigger ? triggerDom : null);
|
182 | };
|
183 | var contextValue = React.useMemo(function () {
|
184 | return {
|
185 | siderCollapsed: collapsed
|
186 | };
|
187 | }, [collapsed]);
|
188 | return React.createElement(SiderContext.Provider, {
|
189 | value: contextValue
|
190 | }, renderSider());
|
191 | });
|
192 | if (process.env.NODE_ENV !== 'production') {
|
193 | Sider.displayName = 'Sider';
|
194 | }
|
195 | var _default = Sider;
|
196 | exports["default"] = _default; |
\ | No newline at end of file |