UNPKG

4.1 kBJavaScriptView Raw
1"use client";
2
3var __rest = this && this.__rest || function (s, e) {
4 var t = {};
5 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
6 if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
8 }
9 return t;
10};
11/* eslint-disable react/no-array-index-key */
12import * as React from 'react';
13import classNames from 'classnames';
14import { matchScreen } from '../_util/responsiveObserver';
15import { ConfigContext } from '../config-provider';
16import useSize from '../config-provider/hooks/useSize';
17import useBreakpoint from '../grid/hooks/useBreakpoint';
18import DEFAULT_COLUMN_MAP from './constant';
19import DescriptionsContext from './DescriptionsContext';
20import useItems from './hooks/useItems';
21import useRow from './hooks/useRow';
22import DescriptionsItem from './Item';
23import Row from './Row';
24import useStyle from './style';
25const 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 items
42 } = props,
43 restProps = __rest(props, ["prefixCls", "title", "extra", "column", "colon", "bordered", "layout", "children", "className", "rootClassName", "style", "size", "labelStyle", "contentStyle", "items"]);
44 const {
45 getPrefixCls,
46 direction,
47 descriptions
48 } = React.useContext(ConfigContext);
49 const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
50 const screens = useBreakpoint();
51 // Column count
52 const mergedColumn = React.useMemo(() => {
53 var _a;
54 if (typeof column === 'number') {
55 return column;
56 }
57 return (_a = matchScreen(screens, Object.assign(Object.assign({}, DEFAULT_COLUMN_MAP), column))) !== null && _a !== void 0 ? _a : 3;
58 }, [screens, column]);
59 // Items with responsive
60 const mergedItems = useItems(screens, items, children);
61 const mergedSize = useSize(customizeSize);
62 const rows = useRow(mergedColumn, mergedItems);
63 const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
64 // ======================== Render ========================
65 const contextValue = React.useMemo(() => ({
66 labelStyle,
67 contentStyle
68 }), [labelStyle, contentStyle]);
69 return wrapCSSVar( /*#__PURE__*/React.createElement(DescriptionsContext.Provider, {
70 value: contextValue
71 }, /*#__PURE__*/React.createElement("div", Object.assign({
72 className: classNames(prefixCls, descriptions === null || descriptions === void 0 ? void 0 : descriptions.className, {
73 [`${prefixCls}-${mergedSize}`]: mergedSize && mergedSize !== 'default',
74 [`${prefixCls}-bordered`]: !!bordered,
75 [`${prefixCls}-rtl`]: direction === 'rtl'
76 }, className, rootClassName, hashId, cssVarCls),
77 style: Object.assign(Object.assign({}, descriptions === null || descriptions === void 0 ? void 0 : descriptions.style), style)
78 }, restProps), (title || extra) && ( /*#__PURE__*/React.createElement("div", {
79 className: `${prefixCls}-header`
80 }, title && /*#__PURE__*/React.createElement("div", {
81 className: `${prefixCls}-title`
82 }, title), extra && /*#__PURE__*/React.createElement("div", {
83 className: `${prefixCls}-extra`
84 }, extra))), /*#__PURE__*/React.createElement("div", {
85 className: `${prefixCls}-view`
86 }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, rows.map((row, index) => ( /*#__PURE__*/React.createElement(Row, {
87 key: index,
88 index: index,
89 colon: colon,
90 prefixCls: prefixCls,
91 vertical: layout === 'vertical',
92 bordered: bordered,
93 row: row
94 })))))))));
95};
96if (process.env.NODE_ENV !== 'production') {
97 Descriptions.displayName = 'Descriptions';
98}
99export { DescriptionsContext };
100Descriptions.Item = DescriptionsItem;
101export default Descriptions;
\No newline at end of file