@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
100 lines (96 loc) • 4.83 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_children = require('../../utils/children.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_data_list_style = require('./data-list.style.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/data-list/data-list.tsx
const { ComponentContext, PropsContext: DataListPropsContext, useComponentContext, usePropsContext: useDataListPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("data-list", require_data_list_style.dataListStyle);
/**
* `DataList` is used to display a list of data items.
*
* @see https://yamada-ui.com/docs/components/data-list
*/
const DataListRoot = withProvider(({ style, children, items = [], descriptionProps, termProps,...rest }) => {
const col = (0, react.useMemo)(() => {
let col$1 = 0;
if (children) require_children.pickChildren(require_children.getValidChildren(children), DataListItem).forEach(({ props }) => {
const pickedChildren = require_children.pickChildren(require_children.getValidChildren(props.children), DataListTerm, DataListDescription);
col$1 = Math.max(col$1, pickedChildren.length);
});
else items.forEach(({ description, term }) => {
const termCount = !term ? 0 : (0, require_utils_index.utils_exports.isArray)(term) ? term.length : 1;
const descriptionCount = !description ? 0 : (0, require_utils_index.utils_exports.isArray)(description) ? description.length : 1;
col$1 = Math.max(col$1, termCount + descriptionCount);
});
return col$1;
}, [children, items]);
const computedChildren = (0, react.useMemo)(() => items.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListItem, { ...props }, index)), [items]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
value: (0, react.useMemo)(() => ({
descriptionProps,
termProps
}), [descriptionProps, termProps]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.dl, {
style: {
"--col": col,
...style
},
...rest,
children: children ?? computedChildren
})
});
}, "root")();
const DataListItem = withContext(({ children, description, term, descriptionProps: customDescriptionProps, termProps: customTermProps,...rest }) => {
const { descriptionProps, termProps } = useComponentContext();
const [omittedChildren, customTerms, customDescriptions] = (0, react.useMemo)(() => {
const validChildren = require_children.getValidChildren(children);
if ((0, require_utils_index.utils_exports.isEmpty)(validChildren)) return [children];
const customTerms$1 = require_children.pickChildren(validChildren, DataListTerm);
const customDescriptions$1 = require_children.pickChildren(validChildren, DataListDescription);
return [
require_children.omitChildren(validChildren, DataListTerm, DataListDescription),
customTerms$1,
customDescriptions$1
];
}, [children]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
...rest,
children: [
!(0, require_utils_index.utils_exports.isEmpty)(customTerms) ? customTerms : (0, require_utils_index.utils_exports.isArray)(term) ? term.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTerm, {
...termProps,
...customTermProps,
children: item
}, index)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTerm, {
...termProps,
...customTermProps,
children: term
}),
!(0, require_utils_index.utils_exports.isEmpty)(customDescriptions) ? customDescriptions : (0, require_utils_index.utils_exports.isArray)(description) ? description.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListDescription, {
...descriptionProps,
...customDescriptionProps,
children: item
}, index)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListDescription, {
...descriptionProps,
...customDescriptionProps,
children: description
}),
omittedChildren
]
});
}, "item")();
const DataListTerm = withContext("dt", "term")();
const DataListDescription = withContext("dd", "description")();
//#endregion
exports.DataListDescription = DataListDescription;
exports.DataListItem = DataListItem;
exports.DataListPropsContext = DataListPropsContext;
exports.DataListRoot = DataListRoot;
exports.DataListTerm = DataListTerm;
exports.useDataListPropsContext = useDataListPropsContext;
//# sourceMappingURL=data-list.cjs.map