tdesign-react
Version:
TDesign Component for React
180 lines (172 loc) • 7.42 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-cc768e34.js');
var slicedToArray = require('../_chunks/dep-e17e2d31.js');
var objectWithoutProperties = require('../_chunks/dep-810b3643.js');
var React = require('react');
var classNames = require('classnames');
var hooks_useConfig = require('../hooks/useConfig.js');
var _util_style = require('../_chunks/dep-3f65dfe7.js');
var grid_defaultProps = require('./defaultProps.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var isObject = require('../_chunks/dep-780eda7b.js');
require('../_chunks/dep-6d4d8660.js');
require('../_chunks/dep-b7d577ac.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-3a869b87.js');
require('../_chunks/dep-ac58e1cc.js');
require('dayjs');
require('../_chunks/dep-7da96a57.js');
require('../_chunks/dep-07b911d8.js');
require('../_chunks/dep-4b02d669.js');
require('../_chunks/dep-f0379c5f.js');
require('../_chunks/dep-ddacd27a.js');
require('../_chunks/dep-028b759d.js');
require('../_chunks/dep-8a116183.js');
require('../_chunks/dep-4671b9bd.js');
require('../_chunks/dep-bed9d73e.js');
require('../_chunks/dep-47bdc05f.js');
require('../_chunks/dep-cab13149.js');
require('../_chunks/dep-a30819a4.js');
require('../_chunks/dep-6a7ba247.js');
require('../_chunks/dep-c87d9752.js');
require('../_chunks/dep-bd956a2d.js');
require('../_chunks/dep-0cdb3286.js');
require('../_chunks/dep-865c186c.js');
require('../_chunks/dep-f4e58639.js');
require('../_chunks/dep-781a2854.js');
require('../_chunks/dep-1ef213f8.js');
require('../_chunks/dep-e2c832a5.js');
require('../_chunks/dep-3e2d2665.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var _excluded = ["align", "gutter", "justify", "tag", "style", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var calcSize = function calcSize(width) {
var smWidth = parseFloat(_util_style.getCssVarsValue("--td-screen-sm") || "768");
var mdWidth = parseFloat(_util_style.getCssVarsValue("--td-screen-md") || "992");
var lgWidth = parseFloat(_util_style.getCssVarsValue("--td-screen-lg") || "1200");
var xlWidth = parseFloat(_util_style.getCssVarsValue("--td-screen-xl") || "1400");
var xxlWidth = parseFloat(_util_style.getCssVarsValue("--td-screen-xxl") || "1880");
var size = "xs";
if (width >= xxlWidth) {
size = "xxl";
} else if (width >= xlWidth) {
size = "xl";
} else if (width >= lgWidth) {
size = "lg";
} else if (width >= mdWidth) {
size = "md";
} else if (width >= smWidth) {
size = "sm";
} else {
size = "xs";
}
return size;
};
var calcRowStyle = function calcRowStyle(gutter, currentSize) {
var rowStyle = {};
if (typeof gutter === "number") {
Object.assign(rowStyle, {
marginLeft: "".concat(gutter / -2, "px"),
marginRight: "".concat(gutter / -2, "px")
});
} else if (Array.isArray(gutter) && gutter.length) {
if (typeof gutter[0] === "number") {
Object.assign(rowStyle, {
marginLeft: "".concat(gutter[0] / -2, "px"),
marginRight: "".concat(gutter[0] / -2, "px")
});
}
if (typeof gutter[1] === "number") {
Object.assign(rowStyle, {
rowGap: "".concat(gutter[1], "px")
});
}
if (isObject.isObject(gutter[0]) && gutter[0][currentSize] !== void 0) {
Object.assign(rowStyle, {
marginLeft: "".concat(gutter[0][currentSize] / -2, "px"),
marginRight: "".concat(gutter[0][currentSize] / -2, "px")
});
}
if (isObject.isObject(gutter[1]) && gutter[1][currentSize] !== void 0) {
Object.assign(rowStyle, {
rowGap: "".concat(gutter[1][currentSize], "px")
});
}
} else if (isObject.isObject(gutter) && gutter[currentSize]) {
if (Array.isArray(gutter[currentSize]) && gutter[currentSize].length) {
Object.assign(rowStyle, {
marginLeft: "".concat(gutter[currentSize][0] / -2, "px"),
marginRight: "".concat(gutter[currentSize][0] / -2, "px")
});
Object.assign(rowStyle, {
rowGap: "".concat(gutter[currentSize][1], "px")
});
} else {
Object.assign(rowStyle, {
marginLeft: "".concat(gutter[currentSize] / -2, "px"),
marginRight: "".concat(gutter[currentSize] / -2, "px")
});
}
}
return rowStyle;
};
var RowContext = /*#__PURE__*/React.createContext({
gutter: void 0,
size: void 0
});
var Row = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _useDefaultProps = hooks_useDefaultProps["default"](props, grid_defaultProps.rowDefaultProps),
align = _useDefaultProps.align,
gutter = _useDefaultProps.gutter,
justify = _useDefaultProps.justify,
tag = _useDefaultProps.tag,
propStyle = _useDefaultProps.style,
className = _useDefaultProps.className,
children = _useDefaultProps.children,
otherRowProps = objectWithoutProperties._objectWithoutProperties(_useDefaultProps, _excluded);
var _useState = React.useState(function () {
return _util_style.canUseDocument ? calcSize(window.innerWidth) : "md";
}),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
size = _useState2[0],
setSize = _useState2[1];
var updateSize = function updateSize() {
var currentSize = calcSize(window.innerWidth);
if (currentSize !== size) {
setSize(size);
}
};
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var rowClassNames = classNames__default["default"]("".concat(classPrefix, "-row"), className, defineProperty._defineProperty(defineProperty._defineProperty({}, "".concat(classPrefix, "-row--").concat(justify), true), "".concat(classPrefix, "-row--").concat(align), true));
var rowStyle = _objectSpread(_objectSpread({}, calcRowStyle(gutter, size)), propStyle);
React.useEffect(function () {
window.addEventListener("resize", updateSize);
return function () {
window.removeEventListener("resize", updateSize);
};
});
return /*#__PURE__*/React__default["default"].createElement(tag, _objectSpread({
ref: ref,
className: rowClassNames,
style: rowStyle
}, otherRowProps), /* @__PURE__ */React__default["default"].createElement(RowContext.Provider, {
value: {
gutter: gutter,
size: size
}
}, children));
});
Row.displayName = "Row";
exports.RowContext = RowContext;
exports["default"] = Row;
//# sourceMappingURL=Row.js.map