antd
Version:
An enterprise-class UI design language and React-based implementation
225 lines (214 loc) • 8.79 kB
JavaScript
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _extends from 'babel-runtime/helpers/extends';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
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) t[p[i]] = s[p[i]];
}return t;
};
// matchMedia polyfill for
// https://github.com/WickyNilliams/enquire.js/issues/82
if (typeof window !== 'undefined') {
var matchMediaPolyfill = function matchMediaPolyfill(mediaQuery) {
return {
media: mediaQuery,
matches: false,
addListener: function addListener() {},
removeListener: function removeListener() {}
};
};
window.matchMedia = window.matchMedia || matchMediaPolyfill;
}
import * as React from 'react';
import { polyfill } from 'react-lifecycles-compat';
import classNames from 'classnames';
import omit from 'omit.js';
import * as PropTypes from 'prop-types';
import Icon from '../icon';
import isNumeric from '../_util/isNumeric';
var dimensionMap = {
xs: '480px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1600px'
};
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 = function (_React$Component) {
_inherits(Sider, _React$Component);
function Sider(props) {
_classCallCheck(this, Sider);
var _this = _possibleConstructorReturn(this, (Sider.__proto__ || Object.getPrototypeOf(Sider)).call(this, props));
_this.responsiveHandler = function (mql) {
_this.setState({ below: mql.matches });
var onBreakpoint = _this.props.onBreakpoint;
if (onBreakpoint) {
onBreakpoint(mql.matches);
}
if (_this.state.collapsed !== mql.matches) {
_this.setCollapsed(mql.matches, 'responsive');
}
};
_this.setCollapsed = function (collapsed, type) {
if (!('collapsed' in _this.props)) {
_this.setState({
collapsed: collapsed
});
}
var onCollapse = _this.props.onCollapse;
if (onCollapse) {
onCollapse(collapsed, type);
}
};
_this.toggle = function () {
var collapsed = !_this.state.collapsed;
_this.setCollapsed(collapsed, 'clickTrigger');
};
_this.belowShowChange = function () {
_this.setState({ belowShow: !_this.state.belowShow });
};
_this.uniqueId = generateId('ant-sider-');
var matchMedia = void 0;
if (typeof window !== 'undefined') {
matchMedia = window.matchMedia;
}
if (matchMedia && props.breakpoint && props.breakpoint in dimensionMap) {
_this.mql = matchMedia('(max-width: ' + dimensionMap[props.breakpoint] + ')');
}
var collapsed = void 0;
if ('collapsed' in props) {
collapsed = props.collapsed;
} else {
collapsed = props.defaultCollapsed;
}
_this.state = {
collapsed: collapsed,
below: false
};
return _this;
}
_createClass(Sider, [{
key: 'getChildContext',
value: function getChildContext() {
return {
siderCollapsed: this.state.collapsed,
collapsedWidth: this.props.collapsedWidth
};
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
if (this.mql) {
this.mql.addListener(this.responsiveHandler);
this.responsiveHandler(this.mql);
}
if (this.context.siderHook) {
this.context.siderHook.addSider(this.uniqueId);
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (this.mql) {
this.mql.removeListener(this.responsiveHandler);
}
if (this.context.siderHook) {
this.context.siderHook.removeSider(this.uniqueId);
}
}
}, {
key: 'render',
value: function render() {
var _classNames;
var _a = this.props,
prefixCls = _a.prefixCls,
className = _a.className,
theme = _a.theme,
collapsible = _a.collapsible,
reverseArrow = _a.reverseArrow,
trigger = _a.trigger,
style = _a.style,
width = _a.width,
collapsedWidth = _a.collapsedWidth,
others = __rest(_a, ["prefixCls", "className", "theme", "collapsible", "reverseArrow", "trigger", "style", "width", "collapsedWidth"]);
var divProps = omit(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'breakpoint', 'onBreakpoint']);
var rawWidth = this.state.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 ? React.createElement(
'span',
{ onClick: this.toggle, className: prefixCls + '-zero-width-trigger' },
React.createElement(Icon, { type: 'bars' })
) : null;
var iconObj = {
'expanded': reverseArrow ? React.createElement(Icon, { type: 'right' }) : React.createElement(Icon, { type: 'left' }),
'collapsed': reverseArrow ? React.createElement(Icon, { type: 'left' }) : React.createElement(Icon, { type: 'right' })
};
var status = this.state.collapsed ? 'collapsed' : 'expanded';
var defaultTrigger = iconObj[status];
var triggerDom = trigger !== null ? zeroWidthTrigger || React.createElement(
'div',
{ className: prefixCls + '-trigger', onClick: this.toggle, style: { width: siderWidth } },
trigger || defaultTrigger
) : null;
var divStyle = _extends({}, style, { flex: '0 0 ' + siderWidth, maxWidth: siderWidth, minWidth: siderWidth, width: siderWidth });
var siderCls = classNames(className, prefixCls, prefixCls + '-' + theme, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-collapsed', !!this.state.collapsed), _defineProperty(_classNames, prefixCls + '-has-trigger', collapsible && trigger !== null && !zeroWidthTrigger), _defineProperty(_classNames, prefixCls + '-below', !!this.state.below), _defineProperty(_classNames, prefixCls + '-zero-width', parseFloat(siderWidth) === 0), _classNames));
return React.createElement(
'div',
_extends({ className: siderCls }, divProps, { style: divStyle }),
React.createElement(
'div',
{ className: prefixCls + '-children' },
this.props.children
),
collapsible || this.state.below && zeroWidthTrigger ? triggerDom : null
);
}
}], [{
key: 'getDerivedStateFromProps',
value: function getDerivedStateFromProps(nextProps) {
if ('collapsed' in nextProps) {
return {
collapsed: nextProps.collapsed
};
}
return null;
}
}]);
return Sider;
}(React.Component);
Sider.__ANT_LAYOUT_SIDER = true;
Sider.defaultProps = {
prefixCls: 'ant-layout-sider',
collapsible: false,
defaultCollapsed: false,
reverseArrow: false,
width: 200,
collapsedWidth: 80,
style: {},
theme: 'dark'
};
Sider.childContextTypes = {
siderCollapsed: PropTypes.bool,
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
};
Sider.contextTypes = {
siderHook: PropTypes.object
};
polyfill(Sider);
export default Sider;