index.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. Object.defineProperty(exports, "DescriptionsContext", {
  9. enumerable: true,
  10. get: function () {
  11. return _DescriptionsContext.default;
  12. }
  13. });
  14. exports.default = void 0;
  15. var React = _interopRequireWildcard(require("react"));
  16. var _classnames = _interopRequireDefault(require("classnames"));
  17. var _responsiveObserver = require("../_util/responsiveObserver");
  18. var _warning = require("../_util/warning");
  19. var _context = require("../config-provider/context");
  20. var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
  21. var _useBreakpoint = _interopRequireDefault(require("../grid/hooks/useBreakpoint"));
  22. var _constant = _interopRequireDefault(require("./constant"));
  23. var _DescriptionsContext = _interopRequireDefault(require("./DescriptionsContext"));
  24. var _useItems = _interopRequireDefault(require("./hooks/useItems"));
  25. var _useRow = _interopRequireDefault(require("./hooks/useRow"));
  26. var _Item = _interopRequireDefault(require("./Item"));
  27. var _Row = _interopRequireDefault(require("./Row"));
  28. var _style = _interopRequireDefault(require("./style"));
  29. var __rest = void 0 && (void 0).__rest || function (s, e) {
  30. var t = {};
  31. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  32. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  33. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  34. }
  35. return t;
  36. };
  37. /* eslint-disable react/no-array-index-key */
  38. const Descriptions = props => {
  39. const {
  40. prefixCls: customizePrefixCls,
  41. title,
  42. extra,
  43. column,
  44. colon = true,
  45. bordered,
  46. layout,
  47. children,
  48. className,
  49. rootClassName,
  50. style,
  51. size: customizeSize,
  52. labelStyle,
  53. contentStyle,
  54. styles,
  55. items,
  56. classNames: descriptionsClassNames
  57. } = props,
  58. restProps = __rest(props, ["prefixCls", "title", "extra", "column", "colon", "bordered", "layout", "children", "className", "rootClassName", "style", "size", "labelStyle", "contentStyle", "styles", "items", "classNames"]);
  59. const {
  60. getPrefixCls,
  61. direction,
  62. className: contextClassName,
  63. style: contextStyle,
  64. classNames: contextClassNames,
  65. styles: contextStyles
  66. } = (0, _context.useComponentConfig)('descriptions');
  67. const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
  68. const screens = (0, _useBreakpoint.default)();
  69. // ============================== Warn ==============================
  70. if (process.env.NODE_ENV !== 'production') {
  71. const warning = (0, _warning.devUseWarning)('Descriptions');
  72. [['labelStyle', 'styles={{ label: {} }}'], ['contentStyle', 'styles={{ content: {} }}']].forEach(([deprecatedName, newName]) => {
  73. warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
  74. });
  75. }
  76. // Column count
  77. const mergedColumn = React.useMemo(() => {
  78. var _a;
  79. if (typeof column === 'number') {
  80. return column;
  81. }
  82. return (_a = (0, _responsiveObserver.matchScreen)(screens, Object.assign(Object.assign({}, _constant.default), column))) !== null && _a !== void 0 ? _a : 3;
  83. }, [screens, column]);
  84. // Items with responsive
  85. const mergedItems = (0, _useItems.default)(screens, items, children);
  86. const mergedSize = (0, _useSize.default)(customizeSize);
  87. const rows = (0, _useRow.default)(mergedColumn, mergedItems);
  88. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls);
  89. // ======================== Render ========================
  90. const contextValue = React.useMemo(() => ({
  91. labelStyle,
  92. contentStyle,
  93. styles: {
  94. content: Object.assign(Object.assign({}, contextStyles.content), styles === null || styles === void 0 ? void 0 : styles.content),
  95. label: Object.assign(Object.assign({}, contextStyles.label), styles === null || styles === void 0 ? void 0 : styles.label)
  96. },
  97. classNames: {
  98. label: (0, _classnames.default)(contextClassNames.label, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.label),
  99. content: (0, _classnames.default)(contextClassNames.content, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.content)
  100. }
  101. }), [labelStyle, contentStyle, styles, descriptionsClassNames, contextClassNames, contextStyles]);
  102. return wrapCSSVar(/*#__PURE__*/React.createElement(_DescriptionsContext.default.Provider, {
  103. value: contextValue
  104. }, /*#__PURE__*/React.createElement("div", Object.assign({
  105. className: (0, _classnames.default)(prefixCls, contextClassName, contextClassNames.root, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.root, {
  106. [`${prefixCls}-${mergedSize}`]: mergedSize && mergedSize !== 'default',
  107. [`${prefixCls}-bordered`]: !!bordered,
  108. [`${prefixCls}-rtl`]: direction === 'rtl'
  109. }, className, rootClassName, hashId, cssVarCls),
  110. style: Object.assign(Object.assign(Object.assign(Object.assign({}, contextStyle), contextStyles.root), styles === null || styles === void 0 ? void 0 : styles.root), style)
  111. }, restProps), (title || extra) && (/*#__PURE__*/React.createElement("div", {
  112. className: (0, _classnames.default)(`${prefixCls}-header`, contextClassNames.header, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.header),
  113. style: Object.assign(Object.assign({}, contextStyles.header), styles === null || styles === void 0 ? void 0 : styles.header)
  114. }, title && (/*#__PURE__*/React.createElement("div", {
  115. className: (0, _classnames.default)(`${prefixCls}-title`, contextClassNames.title, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.title),
  116. style: Object.assign(Object.assign({}, contextStyles.title), styles === null || styles === void 0 ? void 0 : styles.title)
  117. }, title)), extra && (/*#__PURE__*/React.createElement("div", {
  118. className: (0, _classnames.default)(`${prefixCls}-extra`, contextClassNames.extra, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.extra),
  119. style: Object.assign(Object.assign({}, contextStyles.extra), styles === null || styles === void 0 ? void 0 : styles.extra)
  120. }, extra)))), /*#__PURE__*/React.createElement("div", {
  121. className: `${prefixCls}-view`
  122. }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, rows.map((row, index) => (/*#__PURE__*/React.createElement(_Row.default, {
  123. key: index,
  124. index: index,
  125. colon: colon,
  126. prefixCls: prefixCls,
  127. vertical: layout === 'vertical',
  128. bordered: bordered,
  129. row: row
  130. })))))))));
  131. };
  132. if (process.env.NODE_ENV !== 'production') {
  133. Descriptions.displayName = 'Descriptions';
  134. }
  135. Descriptions.Item = _Item.default;
  136. var _default = exports.default = Descriptions;