@cainiaofe/cn-ui-layout
Version:
- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`
64 lines (63 loc) • 3.48 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _constant = require("./common/constant");
var _context = _interopRequireDefault(require("./common/context"));
var _utils = require("./utils");
var _useFlexClassNames = _interopRequireDefault(require("./hooks/use-flex-class-names"));
var _excluded = ["children", "width", "height", "className", "align", "gap", "autoFit", "style"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/**
* 列拆分布局（子元素如果不是 Row、Col 或 Cell, 则默认用 Cell 包裹）
*/
var Col = function Col(props, ref) {
var children = props.children,
width = props.width,
height = props.height,
className = props.className,
align = props.align,
gapProp = props.gap,
autoFit = props.autoFit,
style = props.style,
others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
var _useContext = (0, _react.useContext)(_context["default"]),
prefix = _useContext.prefix,
gridGap = _useContext.gridGap;
var clsPrefix = prefix + "col-flex";
var gap = (0, _utils.getGapVal)(gridGap, gapProp);
var validWidth = width || (style === null || style === void 0 ? void 0 : style.width);
var newStyle = (0, _react.useMemo)(function () {
return (0, _extends2["default"])({
// @ts-ignore
alignItems: _constant.ALIGN_ALIAS_MAP[align] || align,
justifyContent: 'stretch'
}, width ? {
width: (0, _utils.wrapUnit)(width)
} : null, height ? {
height: (0, _utils.wrapUnit)(height),
flex: '0 0 auto'
} : null, gap ? {
gap: (0, _utils.wrapUnit)(gap)
} : null, validWidth ? {
flexBasis: (0, _utils.wrapUnit)(validWidth)
} : null, style);
}, [align, width, height, gap, style, validWidth]);
var flexClassNames = (0, _useFlexClassNames["default"])(props);
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, others, {
ref: ref,
className: (0, _classnames["default"])(className, clsPrefix, flexClassNames),
style: newStyle
}), children);
};
var RefCol = /*#__PURE__*/(0, _react.forwardRef)(Col);
RefCol.displayName = 'Col';
RefCol.typeMark = 'Col';
var _default = exports["default"] = RefCol;
module.exports = exports.default;
module.exports.default = exports.default;