@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`
71 lines (70 loc) • 3.79 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 _context = _interopRequireDefault(require("./common/context"));
var _constant = require("./common/constant");
var _utils = require("./utils");
var _useFlexClassNames = _interopRequireDefault(require("./hooks/use-flex-class-names"));
var _excluded = ["className", "children", "verAlign", "width", "height", "block", "direction", "align", "style", "autoFit", "gap"];
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; }
/**
* 单元格容器(默认垂直方向的 flex 布局容器)
*/
var Cell = function Cell(props, ref) {
var _classNames;
var className = props.className,
children = props.children,
verAlign = props.verAlign,
width = props.width,
height = props.height,
block = props.block,
direction = props.direction,
align = props.align,
style = props.style,
autoFit = props.autoFit,
gap = props.gap,
others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
var _useContext = (0, _react.useContext)(_context["default"]),
prefix = _useContext.prefix;
var clsPrefix = prefix + "cell";
var validWidth = width || (style === null || style === void 0 ? void 0 : style.width);
var newStyle = (0, _react.useMemo)(function () {
return (0, _extends2["default"])({}, !block ? {
display: 'flex',
flexDirection: direction === 'ver' ? 'column' : 'row'
} : null, verAlign ? {
// @ts-ignore
justifyContent: _constant.VER_ALIGN_ALIAS_MAP[verAlign] || verAlign
} : null, width ? {
width: (0, _utils.wrapUnit)(width)
} : null, height ? {
height: (0, _utils.wrapUnit)(height)
} : null, (0, _utils.isValidGap)(gap) ? {
gap: (0, _utils.wrapUnit)(gap)
} : null, validWidth ? {
flexBasis: (0, _utils.wrapUnit)(validWidth)
} : null, style);
}, [block, direction, verAlign, 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"])(clsPrefix, className, flexClassNames, (_classNames = {}, _classNames[clsPrefix + "-align--" + align] = align, _classNames)),
style: newStyle
}), children);
};
var RefCell = /*#__PURE__*/(0, _react.forwardRef)(Cell);
RefCell.displayName = 'Cell';
RefCell.defaultProps = {
block: false,
direction: 'ver'
};
RefCell.typeMark = 'Cell';
var _default = exports["default"] = RefCell;
module.exports = exports.default;
module.exports.default = exports.default;