https://app.formstatus.co/build/assets/index-CFXVeRMh.js

1import { R as React, r as reactExports, m as classNames, o as resetComponent, f as unit, N as textEllipsis, v as useComponentConfig } from "./app-DJioUbN4.js";
2import { m as matchScreen, u as useBreakpoint } from "./useBreakpoint-BhPEZ9ZL.js";
3import { t as toArray, u as useSize } from "./compact-item-DGA2vHNm.js";
4import { g as genStyleHooks, m as merge } from "./reactNode-B_hytNsN.js";
5const DEFAULT_COLUMN_MAP = {
6  xxl: 3,
7  xl: 3,
8  lg: 3,
9  md: 3,
10  sm: 2,
11  xs: 1
12};
13const DescriptionsContext = /* @__PURE__ */ React.createContext({});
14var __rest$2 = function(s, e) {
15  var t = {};
16  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
17  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
19  }
20  return t;
21};
22const transChildren2Items = (childNodes) => toArray(childNodes).map((node) => Object.assign(Object.assign({}, node === null || node === void 0 ? void 0 : node.props), {
23  key: node.key
24}));
25function useItems(screens, items, children) {
26  const mergedItems = reactExports.useMemo(() => (
27    // Take `items` first or convert `children` into items
28    items || transChildren2Items(children)
29  ), [items, children]);
30  const responsiveItems = reactExports.useMemo(() => mergedItems.map((_a) => {
31    var {
32      span
33    } = _a, restItem = __rest$2(_a, ["span"]);
34    if (span === "filled") {
35      return Object.assign(Object.assign({}, restItem), {
36        filled: true
37      });
38    }
39    return Object.assign(Object.assign({}, restItem), {
40      span: typeof span === "number" ? span : matchScreen(screens, span)
41    });
42  }), [mergedItems, screens]);
43  return responsiveItems;
44}
45var __rest$1 = function(s, e) {
46  var t = {};
47  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
48  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
49    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
50  }
51  return t;
52};
53function getCalcRows(rowItems, mergedColumn) {
54  let rows = [];
55  let tmpRow = [];
56  let exceed = false;
57  let count = 0;
58  rowItems.filter((n) => n).forEach((rowItem) => {
59    const {
60      filled
61    } = rowItem, restItem = __rest$1(rowItem, ["filled"]);
62    if (filled) {
63      tmpRow.push(restItem);
64      rows.push(tmpRow);
65      tmpRow = [];
66      count = 0;
67      return;
68    }
69    const restSpan = mergedColumn - count;
70    count += rowItem.span || 1;
71    if (count >= mergedColumn) {
72      if (count > mergedColumn) {
73        exceed = true;
74        tmpRow.push(Object.assign(Object.assign({}, restItem), {
75          span: restSpan
76        }));
77      } else {
78        tmpRow.push(restItem);
79      }
80      rows.push(tmpRow);
81      tmpRow = [];
82      count = 0;
83    } else {
84      tmpRow.push(restItem);
85    }
86  });
87  if (tmpRow.length > 0) {
88    rows.push(tmpRow);
89  }
90  rows = rows.map((rows2) => {
91    const count2 = rows2.reduce((acc, item) => acc + (item.span || 1), 0);
92    if (count2 < mergedColumn) {
93      const last = rows2[rows2.length - 1];
94      last.span = mergedColumn - (count2 - (last.span || 1));
95      return rows2;
96    }
97    return rows2;
98  });
99  return [rows, exceed];
100}
101const useRow = (mergedColumn, items) => {
102  const [rows, exceed] = reactExports.useMemo(() => getCalcRows(items, mergedColumn), [items, mergedColumn]);
103  return rows;
104};
105const DescriptionsItem = ({
106  children
107}) => children;
108const isNonNullable = (val) => {
109  return val !== void 0 && val !== null;
110};
111const Cell = (props) => {
112  const {
113    itemPrefixCls,
114    component,
115    span,
116    className,
117    style,
118    labelStyle,
119    contentStyle,
120    bordered,
121    label,
122    content,
123    colon,
124    type,
125    styles
126  } = props;
127  const Component = component;
128  const {
129    classNames: ctxClassNames
130  } = reactExports.useContext(DescriptionsContext);
131  const mergedLabelStyle = Object.assign(Object.assign({}, labelStyle), styles === null || styles === void 0 ? void 0 : styles.label);
132  const mergedContentStyle = Object.assign(Object.assign({}, contentStyle), styles === null || styles === void 0 ? void 0 : styles.content);
133  if (bordered) {
134    return /* @__PURE__ */ reactExports.createElement(Component, {
135      colSpan: span,
136      style,
137      className: classNames(className, {
138        [`${itemPrefixCls}-item-${type}`]: type === "label" || type === "content",
139        [ctxClassNames === null || ctxClassNames === void 0 ? void 0 : ctxClassNames.label]: (ctxClassNames === null || ctxClassNames === void 0 ? void 0 : ctxClassNames.label) && type === "label",
140        [ctxClassNames === null || ctxClassNames === void 0 ? void 0 : ctxClassNames.c

140ontent]: (ctxClassNames === null || ctxClassNames === void 0 ? void 0 : ctxClassNames.content) && type === "content"
141      })
142    }, isNonNullable(label) && /* @__PURE__ */ reactExports.createElement("span", {
143      style: mergedLabelStyle
144    }, label), isNonNullable(content) && /* @__PURE__ */ reactExports.createElement("span", {
145      style: mergedContentStyle
146    }, content));
147  }
148  return /* @__PURE__ */ reactExports.createElement(Component, {
149    colSpan: span,
150    style,
151    className: classNames(`${itemPrefixCls}-item`, className)
152  }, /* @__PURE__ */ reactExports.createElement("div", {
153    className: `${itemPrefixCls}-item-container`
154  }, isNonNullable(label) && /* @__PURE__ */ reactExports.createElement("span", {
155    style: mergedLabelStyle,
156    className: classNames(`${itemPrefixCls}-item-label`, ctxClassNames === null || ctxClassNames === void 0 ? void 0 : ctxClassNames.label, {
157      [`${itemPrefixCls}-item-no-colon`]: !colon
158    })
159  }, label), isNonNullable(content) && /* @__PURE__ */ reactExports.createElement("span", {
160    style: mergedContentStyle,
161    className: classNames(`${itemPrefixCls}-item-content`, ctxClassNames === null || ctxClassNames === void 0 ? void 0 : ctxClassNames.content)
162  }, content)));
163};
164function renderCells(items, {
165  colon,
166  prefixCls,
167  bordered
168}, {
169  component,
170  type,
171  showLabel,
172  showContent,
173  labelStyle: rootLabelStyle,
174  contentStyle: rootContentStyle,
175  styles: rootStyles
176}

176) {
177  return items.map(({
178    label,
179    children,
180    prefixCls: itemPrefixCls = prefixCls,
181    className,
182    style,
183    labelStyle,
184    contentStyle,
185    span = 1,
186    key,
187    styles
188  }, index) => {
189    if (typeof component === "string") {
190      return /* @__PURE__ */ reactExports.createElement(Cell, {
191        key: `${type}-${key || index}`,
192        className,
193        style,
194        styles: {
195          label: Object.assign(Object.assign(Object.assign(Object.assign({}, rootLabelStyle), rootStyles === null || rootStyles === void 0 ? void 0 : rootStyles.label), labelStyle), styles === null || styles === void 0 ? void 0 : styles.label),
196          content: Object.assign(Object.assign(Object.assign(Object.assign({}, rootContentStyle), rootStyles === null || rootStyles === void 0 ? void 0 : rootStyles.content), contentStyle), styles === null || styles === void 0 ? void 0 : styles.content)
197        },
198        span,
199        colon,
200        component,
201        itemPrefixCls,
202        bordered,
203        label: showLabel ? label : null,
204        content: showContent ? children : null,
205        type
206      });
207    }
208    return [/* @__PURE__ */ reactExports.createElement(Cell, {
209      key: `label-${key || index}`,
210      className,
211      style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, rootLabelStyle), rootStyles === null || rootStyles === void 0 ? void 0 : rootStyles.label), style), labelStyle), styles === null || styles === void 0 ? void 0 : styles.label),
212      span: 1,
213      colon,
214      component: component[0],
215      itemPrefixCls,
216      bordered,
217      label,
218      type: "label"
219    }), /* @__PURE__ */ reactExports.createElement(Cell, {
220      key: `content-${key || index}`,
221      className,
222      style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, rootContentStyle), rootStyles === null || rootStyles === void 0 ? void 0 : rootStyles.content), style), contentStyle), styles === null || styles === void 0 ? void 0 : styles.content),
223      span: span * 2 - 1,
224      component: component[1],
225      itemPrefixCls,
226      bordered,
227      content: children,
228      type: "content"
229    })];
230  });
231}
232const Row = (props) => {
233  const descContext = reactExports.useContext(DescriptionsContext);
234  const {
235    prefixCls,
236    vertical,
237    row,
238    index,
239    bordered
240  } = props;
241  if (vertical) {
242    return /* @__PURE__ */ reactExports.createElement(reactExports.Fragment, null, /* @__PURE__ */ reactExports.createElement("tr", {
243      key: `label-${index}`,
244      className: `${prefixCls}-row`
245    }, renderCells(row, props, Object.assign({
246      component: "th",
247      type: "label",
248      showLabel: true
249    }, descContext))), /* @__PURE__ */ reactExports.createElement("tr", {
250      key: `content-${index}`,
251      className: `${prefixCls}-row`
252    }, renderCells(row, props, Object.assign({
253      component: "td",
254      type: "content",
255      showContent: true
256    }, descContext))));
257  }
258  return /* @__PURE__ */ reactExports.createElement("tr", {
259    key: index,
260    className: `${prefixCls}-row`
261  }, renderCells(row, props, Object.assign({
262    component: bordered ? ["th", "td"] : "td",
263    type: "item",
264    showLabel: true,
265    showContent: true
266  }, descContext)));
267};
268const genBorderedStyle = (token) => {
269  const {
270    componentCls,
271    labelBg
272  } = token;
273  return {
274    [`&${componentCls}-bordered`]: {
275      [`> ${componentCls}-view`]: {
276        border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
277        "> table": {
278          tableLayout: "auto"
279        },
280        [`${componentCls}-row`]: {
281          borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
282          "&:first-child": {
283            "> th:first-child, > td:first-child": {
284              borderStartStartRadius: token.borderRadiusLG
285            }
286          },
287          "&:last-child": {
288            borderBottom: "none",
289            "> th:first-child, > td:first-child": {
290              borderEndStartRadius: token.borderRadiusLG
291            }
292          },
293          [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
294            padding: `${unit(token.padding)} ${unit(token.paddingLG)}`,
295            borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
296            "&:last-child": {
297              borderInlineEnd: "none"
298            }
299          },
300          [`> ${componentCls}-item-label`]: {
301            color: token.colorTextSecondary,
302            backgroundColor: labelBg,
303            "&::after": {
304              display: "none"
305            }
306          }
307        }
308      },
309      [`&${componentCls}-middle`]: {
310        [`${componentCls}-row`]: {
311          [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
312            padding: `${unit(token.paddingSM)} ${unit(token.paddingLG)}`
313          }
314        }
315      },
316      [`&${componentCls}-small`]: {
317        [`${componentCls}-row`]: {
318          [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
319            padding: `${unit(token.paddingXS)} ${unit(token.padding)}`
320          }
321        }
322      }
323    }
324  };
325};
326const genDescriptionStyles = (token) => {
327  const {
328    componentCls,
329    extraColor,
330    itemPaddingBottom,
331    itemPaddingEnd,
332    colonMarginRight,
333    colonMarginLeft,
334    titleMarginBottom
335  } = token;
336  return {
337    [componentCls]: Object.assign(Object.assign(Object.assign({}, resetComponent(token)), genBorderedStyle(token)), {
338      "&-rtl": {
339        direction: "rtl"
340      },
341      [`${componentCls}-header`]: {
342        display: "flex",
343        alignItems: "center",
344        marginBottom: titleMarginBottom
345      },
346      [`${componentCls}-title`]: Object.assign(Object.assign({}, textEllipsis), {
347        flex: "auto",
348        color: token.titleColor,
349        fontWeight: token.fontWeightStrong,
350        fontSize: token.fontSizeLG,
351        lineHeight: token.lineHeightLG
352      }),
353      [`${componentCls}-extra`]: {
354        marginInlineStart: "auto",
355        color: extraColor,
356        fontSize: token.fontSize
357      },
358      [`${componentCls}-view`]: {
359        width: "100%",
360        borderRadius: token.borderRadiusLG,
361        table: {
362          width: "100%",
363          tableLayout: "fixed",
364          borderCollapse: "collapse"
365        }
366      },
367      [`${componentCls}-row`]: {
368        "> th, > td": {
369          paddingBottom: itemPaddingBottom,
370          paddingInlineEnd: itemPaddingEnd
371        },
372        "> th:last-child, > td:last-child": {
373          paddingInlineEnd: 0
374        },
375        "&:last-child": {
376          borderBottom: "none",
377          "> th, > td": {
378            paddingBottom: 0
379          }
380        }
381      },
382      [`${componentCls}-item-label`]: {
383        color: token.labelColor,
384        fontWeight: "normal",
385        fontSize: token.fontSize,
386        lineHeight: token.lineHeight,
387        textAlign: "start",
388        "&::after": {
389          content: '":"',
390          position: "relative",
391          top: -0.5,
392          // magic for position
393          marginInline: `${unit(colonMarginLeft)} ${unit(colonMarginRight)}`
394        },
395        [`&${componentCls}-item-no-colon::after`]: {
396          content: '""'
397        }
398      },
399      [`${componentCls}-item-no-label`]: {
400        "&::after": {
401          margin: 0,
402          content: '""'
403        }
404      },
405      [`${componentCls}-item-content`]: {
406        display: "table-cell",
407        flex: 1,
408        color: token.contentColor,
409        fontSize: token.fontSize,
410        lineHeight: token.lineHeight,
411        wordBreak: "break-word",
412        overflowWrap: "break-word"
413      },
414      [`${componentCls}-item`]: {
415        paddingBottom: 0,
416        verticalAlign: "top",
417        "&-container": {
418          display: "flex",
419          [`${componentCls}-item-label`]: {
420            display: "inline-flex",
421            alignItems: "baseline"
422          },
423          [`${componentCls}-item-content`]: {
424            display: "inline-flex",
425            alignItems: "baseline",
426            minWidth: "1em"
427          }
428        }
429      },

430      "&-middle": {
431        [`${componentCls}-row`]: {
432          "> th, > td": {
433            paddingBottom: token.paddingSM
434          }
435        }
436      },
437      "&-small": {
438        [`${componentCls}-row`]: {
439          "> th, > td": {
440            paddingBottom: token.paddingXS
441          }
442        }
443      }
444    })
445  };
446};
447const prepareComponentToken = (token) => ({
448  labelBg: token.colorFillAlter,
449  labelColor: token.colorTextTertiary,
450  titleColor: token.colorText,
451  titleMarginBottom: token.fontSizeSM * token.lineHeightSM,
452  itemPaddingBottom: token.padding,
453  itemPaddingEnd: token.padding,
454  colonMarginRight: token.marginXS,
455  colonMarginLeft: token.marginXXS / 2,
456  contentColor: token.colorText,
457  extraColor: token.colorText
458});
459const useStyle = genStyleHooks("Descriptions", (token) => {
460  const descriptionToken = merge(token, {});
461  return genDescriptionStyles(descriptionToken);
462}, prepareComponentToken);
463var __rest = function(s, e) {
464  var t = {};
465  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
466  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
467    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
468  }
469  return t;
470};
471const Descriptions = (props) => {
472  const {
473    prefixCls: customizePrefixCls,
474    title,
475    extra,
476    column,
477    colon = true,
478    bordered,
479    layout,
480    children,
481    className,
482    rootClassName,
483    style,
484    size: customizeSize,
485    labelStyle,
486    contentStyle,
487    styles,
488    items,
489    classNames: descriptionsClassNames
490  } = props, restProps = __rest(props, ["prefixCls", "title", "extra", "column", "colon", "bordered", "layout", "children", "className", "rootClassName", "style", "size", "labelStyle", "contentStyle", "styles", "items", "classNames"]);
491  const {
492    getPrefixCls,
493    direction,
494    className: contextClassName,
495    style: contextStyle,
496    classNames: contextClassNames,
497    styles: contextStyles
498  } = useComponentConfig("descriptions");
499  const prefixCls = getPrefixCls("descriptions", customizePrefixCls);
500  const screens = useBreakpoint();
501  const mergedColumn = reactExports.useMemo(() => {
502    var _a;

503    if (typeof column === "number") {
504      return column;
505    }
506    return (_a = matchScreen(screens, Object.assign(Object.assign({}, DEFAULT_COLUMN_MAP), column))) !== null && _a !== void 0 ? _a : 3;
507  }, [screens, column]);
508  const mergedItems = useItems(screens, items, children);
509  const mergedSize = useSize(customizeSize);
510  const rows = useRow(mergedColumn, mergedItems);
511  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
512  const contextValue = reactExports.useMemo(() => ({
513    labelStyle,
514    contentStyle,
515    styles: {
516      content: Object.assign(Object.assign({}, contextStyles.content), styles === null || styles === void 0 ? void 0 : styles.content),
517      label: Object.assign(Object.assign({}, contextStyles.label), styles === null || styles === void 0 ? void 0 : styles.label)
518    },
519    classNames: {
520      label: classNames(contextClassNames.label, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.label),
521      content: classNames(contextClassNames.content, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.content)
522    }
523  }), [labelStyle, contentStyle, styles, descriptionsClassNames, contextClassNames, contextStyles]);
524  return wrapCSSVar(/* @__PURE__ */ reactExports.createElement(DescriptionsContext.Provider, {
525    value: contextValue
526  }, /* @__PURE__ */ reactExports.createElement("div", Object.assign({
527    className: classNames(prefixCls, contextClassName, contextClassNames.root, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.root, {
528      [`${prefixCls}-${mergedSize}`]: mergedSize && mergedSize !== "default",
529      [`${prefixCls}-bordered`]: !!bordered,
530      [`${prefixCls}-rtl`]: direction === "rtl"
531    }, className, rootClassName, hashId, cssVarCls),
532    style: Object.assign(Object.assign(Object.assign(Object.assign({}, contextStyle), contextStyles.root), styles === null || styles === void 0 ? void 0 : styles.root), style)
533  }, restProps), (title || extra) && /* @__PURE__ */ reactExports.createElement("div", {
534    className: classNames(`${prefixCls}-header`, contextClassNames.header, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.header),
535    style: Object.assign(Object.assign({}, contextStyles.header), styles === null || styles === void 0 ? void 0 : styles.header)
536  }, title && /* @__PURE__ */ reactExports.createElement("div", {
537    className: classNames(`${prefixCls}-title`, contextClassNames.title, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.title),
538    style: Object.assign(Object.assign({}, contextStyles.title), styles === null || styles === void 0 ? void 0 : styles.title)
539  }

539, title), extra && /* @__PURE__ */ reactExports.createElement("div", {
540    className: classNames(`${prefixCls}-extra`, contextClassNames.extra, descriptionsClassNames === null || descriptionsClassNames === void 0 ? void 0 : descriptionsClassNames.extra),
541    style: Object.assign(Object.assign({}, contextStyles.extra), styles === null || styles === void 0 ? void 0 : styles.extra)
542  }, extra)), /* @__PURE__ */ reactExports.createElement("div", {
543    className: `${prefixCls}-view`
544  }, /* @__PURE__ */ reactExports.createElement("table", null, /* @__PURE__ */ reactExports.createElement("tbody", null, rows.map((row, index) => /* @__PURE__ */ reactExports.createElement(Row, {
545    key: index,
546    index,
547    colon,
548    prefixCls,
549    vertical: layout === "vertical",
550    bordered,
551    row
552  }))))))));
553};
554Descriptions.Item = DescriptionsItem;
555export {
556  Descriptions as D
557};