index.js 6.2 KB

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