@alifd/next
Version:
A configurable component library for web built on React.
263 lines (206 loc) • 8.77 kB
JavaScript
'use strict';
exports.__esModule = true;
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _typeof2 = require('babel-runtime/helpers/typeof');
var _typeof3 = _interopRequireDefault(_typeof2);
var _class, _temp;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _configProvider = require('../config-provider');
var _configProvider2 = _interopRequireDefault(_configProvider);
var _util = require('../util');
var _createStyle = require('../responsive-grid/create-style');
var _createStyle2 = _interopRequireDefault(_createStyle);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var pickOthers = _util.obj.pickOthers;
var createChildren = function createChildren(children, _ref) {
var spacing = _ref.spacing,
direction = _ref.direction,
wrap = _ref.wrap,
device = _ref.device;
var array = _react2.default.Children.toArray(children);
if (!children) {
return null;
}
return array.map(function (child, index) {
var spacingMargin = {};
spacingMargin = (0, _createStyle.getChildMargin)(spacing);
if (!wrap) {
// 不折行
var isNone = [index === 0, index === array.length - 1];
var props = direction === 'row' ? ['marginLeft', 'marginRight'] : ['marginTop', 'marginBottom'];
['marginTop', 'marginRight', 'marginBottom', 'marginLeft'].forEach(function (prop) {
if (prop in spacingMargin && props.indexOf(prop) === -1) {
spacingMargin[prop] = 0;
}
props.forEach(function (key, i) {
if (key in spacingMargin && isNone[i]) {
spacingMargin[key] = 0;
}
});
});
}
if (_react2.default.isValidElement(child)) {
var propsMargin = child.props.margin;
var childPropsMargin = (0, _createStyle.getMargin)(propsMargin);
var gridProps = {};
if (['function', 'object'].indexOf((0, _typeof3.default)(child.type)) > -1 && child.type._typeMark === 'responsive_grid') {
gridProps = (0, _createStyle2.default)((0, _extends3.default)({ display: 'grid' }, child.props));
}
return _react2.default.cloneElement(child, {
style: (0, _extends3.default)({}, spacingMargin, childPropsMargin, gridProps, child.props.style || {})
});
}
return child;
});
};
var getStyle = function getStyle() {
var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var props = arguments[1];
return (0, _extends3.default)({}, (0, _createStyle2.default)((0, _extends3.default)({ display: 'flex' }, props)), style);
};
var getOuterStyle = function getOuterStyle(style, styleProps) {
var sheet = getStyle(style, styleProps);
return (0, _createStyle.filterOuterStyle)(sheet);
};
var getHelperStyle = function getHelperStyle(style, styleProps) {
var sheet = getStyle(style, styleProps);
return (0, _createStyle.filterHelperStyle)((0, _extends3.default)({}, sheet, (0, _createStyle.getSpacingHelperMargin)(styleProps.spacing)));
};
var getInnerStyle = function getInnerStyle(style, styleProps) {
var sheet = getStyle(style, styleProps);
return (0, _createStyle.filterInnerStyle)(sheet);
};
/**
* Box
*/
var Box = (_temp = _class = function (_Component) {
(0, _inherits3.default)(Box, _Component);
function Box() {
(0, _classCallCheck3.default)(this, Box);
return (0, _possibleConstructorReturn3.default)(this, _Component.apply(this, arguments));
}
Box.prototype.render = function render() {
var _cx;
var _props = this.props,
prefix = _props.prefix,
direction = _props.direction,
justify = _props.justify,
align = _props.align,
wrap = _props.wrap,
flex = _props.flex,
spacing = _props.spacing,
padding = _props.padding,
margin = _props.margin,
style = _props.style,
className = _props.className,
children = _props.children,
device = _props.device,
component = _props.component;
var styleProps = {
direction: direction,
justify: justify,
align: align,
wrap: wrap,
flex: flex,
spacing: spacing,
padding: padding,
margin: margin
};
var View = component;
var others = pickOthers(Object.keys(Box.propTypes), this.props);
var styleSheet = getStyle(style, styleProps);
var boxs = createChildren(children, {
spacing: spacing,
direction: direction,
wrap: wrap,
device: device
});
var cls = (0, _classnames2.default)((_cx = {}, _cx[prefix + 'box'] = true, _cx), className);
if (wrap && spacing) {
var outerStyle = getOuterStyle(style, styleProps);
var helperStyle = getHelperStyle(style, styleProps);
var innerStyle = getInnerStyle(style, styleProps);
return _react2.default.createElement(
View,
(0, _extends3.default)({ style: outerStyle, className: cls }, others),
_react2.default.createElement(
'div',
{ style: helperStyle },
_react2.default.createElement(
'div',
{ style: innerStyle, className: prefix + 'box' },
boxs
)
)
);
}
return _react2.default.createElement(
View,
(0, _extends3.default)({ style: styleSheet, className: cls }, others),
boxs
);
};
return Box;
}(_react.Component), _class.propTypes = {
prefix: _propTypes2.default.string,
style: _propTypes2.default.object,
className: _propTypes2.default.any,
/**
* 布局属性
*/
flex: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])), _propTypes2.default.number]),
/**
* 布局方向，默认为 column ，一个元素占据一整行
* @default column
*/
direction: _propTypes2.default.oneOf(['row', 'column', 'row-reverse']),
/**
* 是否折行 支持IE11+
*/
wrap: _propTypes2.default.bool,
/**
* 元素之间的间距 [bottom&top, right&left]
*/
spacing: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.number), _propTypes2.default.number]),
/**
* 设置 margin [bottom&top, right&left]
*/
margin: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.number), _propTypes2.default.number]),
/**
* 设置 padding [bottom&top, right&left]
*/
padding: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.number), _propTypes2.default.number]),
/**
* 沿着主轴方向，子元素们的排布关系 （兼容性同 justify-content ）
*/
justify: _propTypes2.default.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
/**
* 垂直主轴方向，子元素们的排布关系 （兼容性同 align-items ）
*/
align: _propTypes2.default.oneOf(['flex-start', 'center', 'flex-end', 'baseline', 'stretch']),
device: _propTypes2.default.oneOf(['phone', 'tablet', 'desktop']),
/**
* 定制标签名， 例如section等
*/
component: _propTypes2.default.string
}, _class.defaultProps = {
prefix: 'next-',
direction: 'column',
wrap: false,
component: 'div'
}, _temp);
Box.displayName = 'Box';
exports.default = _configProvider2.default.config(Box);
module.exports = exports['default'];