@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
110 lines (108 loc) • 3.98 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _row = require("./row");
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/grid/constants");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var __rest = void 0 && (void 0).__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 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
/**
* Implementation reference from: https://github.com/ant-design/ant-design/blob/master/components/grid/col.tsx
*/
const objectOrNumber = _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.number]);
class Col extends _react.default.Component {
render() {
const {
props
} = this;
const {
prefixCls,
span,
order,
offset,
push,
pull,
className,
children
} = props,
others = __rest(props, ["prefixCls", "span", "order", "offset", "push", "pull", "className", "children"]);
let sizeClassObj = {};
const prefix = `${prefixCls}-col`;
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
let sizeProps = {};
if (typeof props[size] === 'number') {
sizeProps.span = props[size];
} else if (typeof props[size] === 'object') {
sizeProps = props[size] || {};
}
delete others[size];
sizeClassObj = Object.assign(Object.assign({}, sizeClassObj), {
[`${prefix}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
[`${prefix}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
[`${prefix}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
[`${prefix}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
[`${prefix}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0
});
});
const classes = (0, _classnames.default)(prefix, {
[`${prefix}-${span}`]: span !== undefined,
[`${prefix}-order-${order}`]: order,
[`${prefix}-offset-${offset}`]: offset,
[`${prefix}-push-${push}`]: push,
[`${prefix}-pull-${pull}`]: pull
}, className, sizeClassObj);
let {
style
} = others;
let gutters;
try {
gutters = this.context.gutters;
} catch (error) {
throw new Error('please make sure <Col> inside <Row>');
}
style = Object.assign(Object.assign(Object.assign({}, gutters[0] > 0 ? {
paddingLeft: gutters[0] / 2,
paddingRight: gutters[0] / 2
} : {}), gutters[1] > 0 ? {
paddingTop: gutters[1] / 2,
paddingBottom: gutters[1] / 2
} : {}), style);
return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, others, {
style: style,
className: classes,
"x-semi-prop": "children"
}), children);
}
}
Col.contextType = _row.RowContext;
Col.propTypes = {
span: _propTypes.default.number,
order: _propTypes.default.number,
offset: _propTypes.default.number,
push: _propTypes.default.number,
pull: _propTypes.default.number,
className: _propTypes.default.string,
children: _propTypes.default.node,
xs: objectOrNumber,
sm: objectOrNumber,
md: objectOrNumber,
lg: objectOrNumber,
xl: objectOrNumber,
xxl: objectOrNumber,
prefixCls: _propTypes.default.string
};
Col.defaultProps = {
prefixCls: _constants.cssClasses.PREFIX
};
var _default = exports.default = Col;
;