1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports["default"] = void 0;
|
11 |
|
12 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13 |
|
14 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15 |
|
16 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
17 |
|
18 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
19 |
|
20 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
21 |
|
22 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
23 |
|
24 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
25 |
|
26 | var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
27 |
|
28 | var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
29 |
|
30 | var _react = _interopRequireWildcard(require("react"));
|
31 |
|
32 | var _classnames = _interopRequireDefault(require("classnames"));
|
33 |
|
34 | var _omit = _interopRequireDefault(require("lodash/omit"));
|
35 |
|
36 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
37 |
|
38 | var _icon = _interopRequireDefault(require("../icon"));
|
39 |
|
40 | var _configure = require("../configure");
|
41 |
|
42 | var _mediaQueryListPolyfill = require("../_util/mediaQueryListPolyfill");
|
43 |
|
44 | function _createSuper(Derived) {
|
45 | function isNativeReflectConstruct() {
|
46 | if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
47 | if (Reflect.construct.sham) return false;
|
48 | if (typeof Proxy === "function") return true;
|
49 |
|
50 | try {
|
51 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
52 | return true;
|
53 | } catch (e) {
|
54 | return false;
|
55 | }
|
56 | }
|
57 |
|
58 | return function () {
|
59 | var Super = (0, _getPrototypeOf2["default"])(Derived),
|
60 | result;
|
61 |
|
62 | if (isNativeReflectConstruct()) {
|
63 | var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
|
64 | result = Reflect.construct(Super, arguments, NewTarget);
|
65 | } else {
|
66 | result = Super.apply(this, arguments);
|
67 | }
|
68 |
|
69 | return (0, _possibleConstructorReturn2["default"])(this, result);
|
70 | };
|
71 | }
|
72 |
|
73 | if (typeof window !== 'undefined') {
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 | window.matchMedia = window.matchMedia || _mediaQueryListPolyfill.matchMediaPolifill;
|
85 | }
|
86 |
|
87 | var dimensionMap = {
|
88 | xs: '480px',
|
89 | sm: '576px',
|
90 | md: '768px',
|
91 | lg: '992px',
|
92 | xl: '1200px',
|
93 | xxl: '1600px'
|
94 | };
|
95 |
|
96 | var generateId = function () {
|
97 | var i = 0;
|
98 | return function () {
|
99 | var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
100 | i += 1;
|
101 | return "".concat(prefix).concat(i);
|
102 | };
|
103 | }();
|
104 |
|
105 | var Sider =
|
106 |
|
107 | function (_Component) {
|
108 | (0, _inherits2["default"])(Sider, _Component);
|
109 |
|
110 | var _super = _createSuper(Sider);
|
111 |
|
112 | function Sider(props) {
|
113 | var _this;
|
114 |
|
115 | (0, _classCallCheck2["default"])(this, Sider);
|
116 | _this = _super.call(this, props);
|
117 |
|
118 | _this.responsiveHandler = function (event) {
|
119 | _this.setState({
|
120 | below: event.matches
|
121 | });
|
122 |
|
123 | var collapsed = _this.state.collapsed;
|
124 |
|
125 | if (collapsed !== event.matches) {
|
126 | _this.setCollapsed(event.matches, 'responsive');
|
127 | }
|
128 | };
|
129 |
|
130 | _this.setCollapsed = function (collapsed, type) {
|
131 | if (!('collapsed' in _this.props)) {
|
132 | _this.setState({
|
133 | collapsed: collapsed
|
134 | });
|
135 | }
|
136 |
|
137 | var onCollapse = _this.props.onCollapse;
|
138 |
|
139 | if (onCollapse) {
|
140 | onCollapse(collapsed, type);
|
141 | }
|
142 | };
|
143 |
|
144 | _this.toggle = function () {
|
145 | var collapsed = _this.state.collapsed;
|
146 |
|
147 | _this.setCollapsed(!collapsed, 'clickTrigger');
|
148 | };
|
149 |
|
150 | _this.belowShowChange = function () {
|
151 | var belowShow = _this.state.belowShow;
|
152 |
|
153 | _this.setState({
|
154 | belowShow: !belowShow
|
155 | });
|
156 | };
|
157 |
|
158 | _this.uniqueId = generateId((0, _configure.getPrefixCls)('sider-'));
|
159 | var matchMedia;
|
160 |
|
161 | if (typeof window !== 'undefined') {
|
162 | matchMedia = window.matchMedia;
|
163 | }
|
164 |
|
165 | if (matchMedia && props.breakpoint && props.breakpoint in dimensionMap) {
|
166 | _this.mql = matchMedia("(max-width: ".concat(dimensionMap[props.breakpoint], ")"));
|
167 | }
|
168 |
|
169 | var collapsed;
|
170 |
|
171 | if ('collapsed' in props) {
|
172 | collapsed = props.collapsed;
|
173 | } else {
|
174 | collapsed = props.defaultCollapsed;
|
175 | }
|
176 |
|
177 | _this.state = {
|
178 | collapsed: collapsed,
|
179 | below: false
|
180 | };
|
181 | return _this;
|
182 | }
|
183 |
|
184 | (0, _createClass2["default"])(Sider, [{
|
185 | key: "getChildContext",
|
186 | value: function getChildContext() {
|
187 | var collapsedWidth = this.props.collapsedWidth;
|
188 | var collapsed = this.state.collapsed;
|
189 | return {
|
190 | siderCollapsed: collapsed,
|
191 | collapsedWidth: collapsedWidth
|
192 | };
|
193 | }
|
194 | }, {
|
195 | key: "componentWillReceiveProps",
|
196 | value: function componentWillReceiveProps(nextProps) {
|
197 | if ('collapsed' in nextProps) {
|
198 | this.setState({
|
199 | collapsed: nextProps.collapsed
|
200 | });
|
201 | }
|
202 | }
|
203 | }, {
|
204 | key: "componentDidMount",
|
205 | value: function componentDidMount() {
|
206 | if (this.mql) {
|
207 | this.mql.addListener(this.responsiveHandler);
|
208 | this.responsiveHandler(new MediaQueryListEvent('change', {
|
209 | matches: this.mql.matches,
|
210 | media: this.mql.media
|
211 | }));
|
212 | }
|
213 |
|
214 | var siderHook = this.context.siderHook;
|
215 |
|
216 | if (siderHook) {
|
217 | siderHook.addSider(this.uniqueId);
|
218 | }
|
219 | }
|
220 | }, {
|
221 | key: "componentWillUnmount",
|
222 | value: function componentWillUnmount() {
|
223 | if (this.mql) {
|
224 | this.mql.removeListener(this.responsiveHandler);
|
225 | }
|
226 |
|
227 | var siderHook = this.context.siderHook;
|
228 |
|
229 | if (siderHook) {
|
230 | siderHook.removeSider(this.uniqueId);
|
231 | }
|
232 | }
|
233 | }, {
|
234 | key: "render",
|
235 | value: function render() {
|
236 | var _classNames;
|
237 |
|
238 | var _this$props = this.props,
|
239 | customizePrefixCls = _this$props.prefixCls,
|
240 | className = _this$props.className,
|
241 | collapsible = _this$props.collapsible,
|
242 | reverseArrow = _this$props.reverseArrow,
|
243 | trigger = _this$props.trigger,
|
244 | style = _this$props.style,
|
245 | width = _this$props.width,
|
246 | collapsedWidth = _this$props.collapsedWidth,
|
247 | children = _this$props.children,
|
248 | others = (0, _objectWithoutProperties2["default"])(_this$props, ["prefixCls", "className", "collapsible", "reverseArrow", "trigger", "style", "width", "collapsedWidth", "children"]);
|
249 | var _this$state = this.state,
|
250 | collapsed = _this$state.collapsed,
|
251 | below = _this$state.below;
|
252 | var prefixCls = (0, _configure.getPrefixCls)('layout-sider', customizePrefixCls);
|
253 | var divProps = (0, _omit["default"])(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'breakpoint']);
|
254 | var siderWidth = collapsed ? collapsedWidth : width;
|
255 |
|
256 | var zeroWidthTrigger = collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px' ? _react["default"].createElement("span", {
|
257 | onClick: this.toggle,
|
258 | className: "".concat(prefixCls, "-zero-width-trigger")
|
259 | }, _react["default"].createElement(_icon["default"], {
|
260 | type: "bars"
|
261 | })) : null;
|
262 | var iconObj = {
|
263 | expanded: reverseArrow ? _react["default"].createElement(_icon["default"], {
|
264 | type: "right"
|
265 | }) : _react["default"].createElement(_icon["default"], {
|
266 | type: "left"
|
267 | }),
|
268 | collapsed: reverseArrow ? _react["default"].createElement(_icon["default"], {
|
269 | type: "left"
|
270 | }) : _react["default"].createElement(_icon["default"], {
|
271 | type: "right"
|
272 | })
|
273 | };
|
274 | var status = collapsed ? 'collapsed' : 'expanded';
|
275 | var defaultTrigger = iconObj[status];
|
276 | var triggerDom = trigger !== null ? zeroWidthTrigger || _react["default"].createElement("div", {
|
277 | className: "".concat(prefixCls, "-trigger"),
|
278 | onClick: this.toggle,
|
279 | style: {
|
280 | width: siderWidth
|
281 | }
|
282 | }, trigger || defaultTrigger) : null;
|
283 | var divStyle = (0, _objectSpread2["default"])({}, style, {
|
284 | flex: "0 0 ".concat(siderWidth, "px"),
|
285 | maxWidth: "".concat(siderWidth, "px"),
|
286 | minWidth: "".concat(siderWidth, "px"),
|
287 | width: "".concat(siderWidth, "px")
|
288 | });
|
289 | var siderCls = (0, _classnames["default"])(className, prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-collapsed"), !!collapsed), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-below"), !!below), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-zero-width"), siderWidth === 0 || siderWidth === '0' || siderWidth === '0px'), _classNames));
|
290 | return _react["default"].createElement("div", (0, _extends2["default"])({
|
291 | className: siderCls
|
292 | }, divProps, {
|
293 | style: divStyle
|
294 | }), _react["default"].createElement("div", {
|
295 | className: "".concat(prefixCls, "-children")
|
296 | }, children), collapsible || below && zeroWidthTrigger ? triggerDom : null);
|
297 | }
|
298 | }]);
|
299 | return Sider;
|
300 | }(_react.Component);
|
301 |
|
302 | exports["default"] = Sider;
|
303 | Sider.displayName = 'LayoutSider';
|
304 | Sider.__C7N_LAYOUT_SIDER = true;
|
305 | Sider.defaultProps = {
|
306 | collapsible: false,
|
307 | defaultCollapsed: false,
|
308 | reverseArrow: false,
|
309 | width: 200,
|
310 | collapsedWidth: 80,
|
311 | style: {}
|
312 | };
|
313 | Sider.childContextTypes = {
|
314 | siderCollapsed: _propTypes["default"].bool,
|
315 | collapsedWidth: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
|
316 | };
|
317 | Sider.contextTypes = {
|
318 | siderHook: _propTypes["default"].object
|
319 | };
|
320 |
|