oui-antd
Version:
An enterprise-class UI design language and React-based implementation
273 lines (233 loc) • 10.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var React = _interopRequireWildcard(_react);
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _omit = require('omit.js');
var _omit2 = _interopRequireDefault(_omit);
var _propTypes = require('prop-types');
var PropTypes = _interopRequireWildcard(_propTypes);
var _icon = require('../icon');
var _icon2 = _interopRequireDefault(_icon);
var _isNumeric = require('../_util/isNumeric');
var _isNumeric2 = _interopRequireDefault(_isNumeric);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var __rest = undefined && undefined.__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;
}
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) {
(0, _inherits3['default'])(Sider, _React$Component);
function Sider(props) {
(0, _classCallCheck3['default'])(this, Sider);
var _this = (0, _possibleConstructorReturn3['default'])(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;
}
(0, _createClass3['default'])(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 = (0, _omit2['default'])(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'breakpoint', 'onBreakpoint']);
var rawWidth = this.state.collapsed ? collapsedWidth : width;
// use "px" as fallback unit for width
var siderWidth = (0, _isNumeric2['default'])(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(_icon2['default'], { type: 'bars' })
) : null;
var iconObj = {
'expanded': reverseArrow ? React.createElement(_icon2['default'], { type: 'right' }) : React.createElement(_icon2['default'], { type: 'left' }),
'collapsed': reverseArrow ? React.createElement(_icon2['default'], { type: 'left' }) : React.createElement(_icon2['default'], { 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 = (0, _extends3['default'])({}, style, { flex: '0 0 ' + siderWidth, maxWidth: siderWidth, minWidth: siderWidth, width: siderWidth });
var siderCls = (0, _classnames2['default'])(className, prefixCls, prefixCls + '-' + theme, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-collapsed', !!this.state.collapsed), (0, _defineProperty3['default'])(_classNames, prefixCls + '-has-trigger', collapsible && trigger !== null && !zeroWidthTrigger), (0, _defineProperty3['default'])(_classNames, prefixCls + '-below', !!this.state.below), (0, _defineProperty3['default'])(_classNames, prefixCls + '-zero-width', parseFloat(siderWidth) === 0), _classNames));
return React.createElement(
'div',
(0, _extends3['default'])({ 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
};
(0, _reactLifecyclesCompat.polyfill)(Sider);
exports['default'] = Sider;
module.exports = exports['default'];