@xanui/ui 1.2.2 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/List/ListContext.cjs.map +1 -1
- package/List/ListContext.js.map +1 -1
- package/List/index.cjs +2 -29
- package/List/index.cjs.map +1 -1
- package/List/index.d.ts +4 -0
- package/List/index.js +3 -30
- package/List/index.js.map +1 -1
- package/ListItem/index.cjs +24 -9
- package/ListItem/index.cjs.map +1 -1
- package/ListItem/index.d.ts +7 -0
- package/ListItem/index.js +25 -10
- package/ListItem/index.js.map +1 -1
- package/package.json +1 -1
package/List/ListContext.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListContext.cjs","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\nimport React from \"react\"\
|
|
1
|
+
{"version":3,"file":"ListContext.cjs","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\nimport React from \"react\"\nimport { UseColorTemplateColor, UseColorTemplateType } from \"@xanui/core\"\nimport { ListItemProps } from \"../ListItem\";\nexport type ListContextValue = {\n listItem?: Omit<ListItemProps, \"children\">;\n color: UseColorTemplateColor;\n variant: UseColorTemplateType;\n size: \"small\" | \"medium\" | \"large\"\n}\n\nexport const ListContext = React.createContext<ListContextValue | null>(null)\n\nexport const useListContext = () => React.useContext(ListContext) as ListContextValue\n"],"names":[],"mappings":";;;;AAAA;AAWO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;;"}
|
package/List/ListContext.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListContext.js","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\nimport React from \"react\"\
|
|
1
|
+
{"version":3,"file":"ListContext.js","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\nimport React from \"react\"\nimport { UseColorTemplateColor, UseColorTemplateType } from \"@xanui/core\"\nimport { ListItemProps } from \"../ListItem\";\nexport type ListContextValue = {\n listItem?: Omit<ListItemProps, \"children\">;\n color: UseColorTemplateColor;\n variant: UseColorTemplateType;\n size: \"small\" | \"medium\" | \"large\"\n}\n\nexport const ListContext = React.createContext<ListContextValue | null>(null)\n\nexport const useListContext = () => React.useContext(ListContext) as ListContextValue\n"],"names":[],"mappings":";;AAAA;AAWO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;"}
|
package/List/index.cjs
CHANGED
|
@@ -9,7 +9,7 @@ var ListContext = require('./ListContext.cjs');
|
|
|
9
9
|
|
|
10
10
|
const List = React.forwardRef((_a, ref) => {
|
|
11
11
|
var _b, _c, _d;
|
|
12
|
-
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
12
|
+
var { children, slotProps } = _a, rest = tslib.__rest(_a, ["children", "slotProps"]);
|
|
13
13
|
let [_e] = core.useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _e, props = tslib.__rest(_e, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
|
|
14
14
|
const _p = {};
|
|
15
15
|
if (color)
|
|
@@ -26,34 +26,7 @@ const List = React.forwardRef((_a, ref) => {
|
|
|
26
26
|
color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
|
|
27
27
|
variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
|
|
28
28
|
size = (_d = p.size) !== null && _d !== void 0 ? _d : "medium";
|
|
29
|
-
|
|
30
|
-
const defaultTemplate = core.useColorTemplate("default", "text");
|
|
31
|
-
const hoverTemplate = core.useColorTemplate('default', "soft");
|
|
32
|
-
return (jsxRuntime.jsx(ListContext.ListContext.Provider, { value: { size }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0, "& .list-item-icon": {
|
|
33
|
-
color: "text.secondary"
|
|
34
|
-
}, "& .list-item-text": {
|
|
35
|
-
color: "text.primary"
|
|
36
|
-
}, "& .list-item-subtitle": {
|
|
37
|
-
color: "text.secondary"
|
|
38
|
-
}, "& .xui-list-item": Object.assign(Object.assign({}, defaultTemplate.primary), { "& .list-item-icon": {
|
|
39
|
-
color: defaultTemplate.primary.color
|
|
40
|
-
}, "& .list-item-text": {
|
|
41
|
-
color: defaultTemplate.primary.color
|
|
42
|
-
}, "& .list-item-subtitle": {
|
|
43
|
-
color: hoverColor === 'default' ? "text.secondary" : defaultTemplate.primary.color
|
|
44
|
-
} }), "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
|
|
45
|
-
color: hoverTemplate.primary.color
|
|
46
|
-
}, "& .list-item-text": {
|
|
47
|
-
color: hoverTemplate.primary.color
|
|
48
|
-
}, "& .list-item-subtitle": {
|
|
49
|
-
color: hoverTemplate.primary.color
|
|
50
|
-
} }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
|
|
51
|
-
color: template.primary.color
|
|
52
|
-
}, "& .list-item-text": {
|
|
53
|
-
color: template.primary.color
|
|
54
|
-
}, "& .list-item-subtitle": {
|
|
55
|
-
color: template.primary.color
|
|
56
|
-
}, border: "0" }) }, (sx || {})), ref: ref, children: children })) }));
|
|
29
|
+
return (jsxRuntime.jsx(ListContext.ListContext.Provider, { value: { color, variant, size, listItem: slotProps === null || slotProps === void 0 ? void 0 : slotProps.listItem }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0 }, (sx || {})), ref: ref, children: children })) }));
|
|
57
30
|
});
|
|
58
31
|
|
|
59
32
|
module.exports = List;
|
package/List/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\nimport { ListItemProps } from '../ListItem';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n slotProps?: {\n listItem?: Omit<ListItemProps, \"children\">\n }\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, slotProps, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n if (size) _p.size = size\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n size = p.size ?? \"medium\"\n\n return (\n <ListContext.Provider value={{ color, variant, size, listItem: slotProps?.listItem }}>\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n </ListContext.Provider>\n )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;;;AAgBA;;;AACI;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;AAEA;AAkBJ;;"}
|
package/List/index.d.ts
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
|
|
3
|
+
import { ListItemProps } from '../ListItem/index.js';
|
|
3
4
|
|
|
4
5
|
type ListProps<T extends TagComponentType = "ul"> = Omit<TagProps<T>, 'color' | "size"> & {
|
|
5
6
|
color?: useBreakpointPropsType<UseColorTemplateColor>;
|
|
6
7
|
variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, "outline">;
|
|
7
8
|
size?: useBreakpointPropsType<"small" | "medium" | "large">;
|
|
9
|
+
slotProps?: {
|
|
10
|
+
listItem?: Omit<ListItemProps, "children">;
|
|
11
|
+
};
|
|
8
12
|
};
|
|
9
13
|
declare const List: React.ForwardRefExoticComponent<Omit<ListProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
|
|
10
14
|
|
package/List/index.js
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
import { __rest } from 'tslib';
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import { useInterface, useBreakpointProps,
|
|
5
|
+
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
6
6
|
import { ListContext } from './ListContext.js';
|
|
7
7
|
|
|
8
8
|
const List = React.forwardRef((_a, ref) => {
|
|
9
9
|
var _b, _c, _d;
|
|
10
|
-
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
10
|
+
var { children, slotProps } = _a, rest = __rest(_a, ["children", "slotProps"]);
|
|
11
11
|
let [_e] = useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _e, props = __rest(_e, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
|
|
12
12
|
const _p = {};
|
|
13
13
|
if (color)
|
|
@@ -24,34 +24,7 @@ const List = React.forwardRef((_a, ref) => {
|
|
|
24
24
|
color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
|
|
25
25
|
variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
|
|
26
26
|
size = (_d = p.size) !== null && _d !== void 0 ? _d : "medium";
|
|
27
|
-
|
|
28
|
-
const defaultTemplate = useColorTemplate("default", "text");
|
|
29
|
-
const hoverTemplate = useColorTemplate('default', "soft");
|
|
30
|
-
return (jsx(ListContext.Provider, { value: { size }, children: jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0, "& .list-item-icon": {
|
|
31
|
-
color: "text.secondary"
|
|
32
|
-
}, "& .list-item-text": {
|
|
33
|
-
color: "text.primary"
|
|
34
|
-
}, "& .list-item-subtitle": {
|
|
35
|
-
color: "text.secondary"
|
|
36
|
-
}, "& .xui-list-item": Object.assign(Object.assign({}, defaultTemplate.primary), { "& .list-item-icon": {
|
|
37
|
-
color: defaultTemplate.primary.color
|
|
38
|
-
}, "& .list-item-text": {
|
|
39
|
-
color: defaultTemplate.primary.color
|
|
40
|
-
}, "& .list-item-subtitle": {
|
|
41
|
-
color: hoverColor === 'default' ? "text.secondary" : defaultTemplate.primary.color
|
|
42
|
-
} }), "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
|
|
43
|
-
color: hoverTemplate.primary.color
|
|
44
|
-
}, "& .list-item-text": {
|
|
45
|
-
color: hoverTemplate.primary.color
|
|
46
|
-
}, "& .list-item-subtitle": {
|
|
47
|
-
color: hoverTemplate.primary.color
|
|
48
|
-
} }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
|
|
49
|
-
color: template.primary.color
|
|
50
|
-
}, "& .list-item-text": {
|
|
51
|
-
color: template.primary.color
|
|
52
|
-
}, "& .list-item-subtitle": {
|
|
53
|
-
color: template.primary.color
|
|
54
|
-
}, border: "0" }) }, (sx || {})), ref: ref, children: children })) }));
|
|
27
|
+
return (jsx(ListContext.Provider, { value: { color, variant, size, listItem: slotProps === null || slotProps === void 0 ? void 0 : slotProps.listItem }, children: jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0 }, (sx || {})), ref: ref, children: children })) }));
|
|
55
28
|
});
|
|
56
29
|
|
|
57
30
|
export { List as default };
|
package/List/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\nimport { ListItemProps } from '../ListItem';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n slotProps?: {\n listItem?: Omit<ListItemProps, \"children\">\n }\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, slotProps, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n if (size) _p.size = size\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n size = p.size ?? \"medium\"\n\n return (\n <ListContext.Provider value={{ color, variant, size, listItem: slotProps?.listItem }}>\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n </ListContext.Provider>\n )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;AAgBA;;;AACI;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;AAEA;AAkBJ;;"}
|
package/ListItem/index.cjs
CHANGED
|
@@ -9,9 +9,8 @@ var index = require('../Text/index.cjs');
|
|
|
9
9
|
var ListContext = require('../List/ListContext.cjs');
|
|
10
10
|
|
|
11
11
|
const ListItem = React.forwardRef((_a, ref) => {
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
let [_d] = core.useInterface("ListItem", rest, {}), { selected } = _d, props = tslib.__rest(_d, ["selected"]);
|
|
12
|
+
var { children, startIcon, endIcon, subtitle, slotProps } = _a, rest = tslib.__rest(_a, ["children", "startIcon", "endIcon", "subtitle", "slotProps"]);
|
|
13
|
+
let [_b] = core.useInterface("ListItem", rest, {}), { selected } = _b, props = tslib.__rest(_b, ["selected"]);
|
|
15
14
|
const _p = {};
|
|
16
15
|
if (subtitle)
|
|
17
16
|
_p.subtitle = subtitle;
|
|
@@ -19,14 +18,15 @@ const ListItem = React.forwardRef((_a, ref) => {
|
|
|
19
18
|
_p.startIcon = startIcon;
|
|
20
19
|
if (endIcon)
|
|
21
20
|
_p.endIcon = endIcon;
|
|
22
|
-
if (size)
|
|
23
|
-
_p.size = size;
|
|
24
21
|
const p = core.useBreakpointProps(_p);
|
|
25
|
-
const
|
|
22
|
+
const listProps = ListContext.useListContext();
|
|
23
|
+
const template = core.useColorTemplate(listProps.color, listProps.variant);
|
|
24
|
+
const defaultTemplate = core.useColorTemplate("default", "text");
|
|
25
|
+
const hoverTemplate = core.useColorTemplate('default', "soft");
|
|
26
26
|
subtitle = p.subtitle;
|
|
27
27
|
startIcon = p.startIcon;
|
|
28
28
|
endIcon = p.endIcon;
|
|
29
|
-
size =
|
|
29
|
+
const size = listProps === null || listProps === void 0 ? void 0 : listProps.size;
|
|
30
30
|
let sizes = {
|
|
31
31
|
small: {
|
|
32
32
|
fontSize: "button",
|
|
@@ -47,9 +47,24 @@ const ListItem = React.forwardRef((_a, ref) => {
|
|
|
47
47
|
minHeight: 48,
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
|
-
|
|
50
|
+
const hoversx = Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
|
|
51
|
+
color: hoverTemplate.primary.color
|
|
52
|
+
}, "& .list-item-text": {
|
|
53
|
+
color: hoverTemplate.primary.color
|
|
54
|
+
}, "& .list-item-subtitle": {
|
|
55
|
+
color: hoverTemplate.primary.color
|
|
56
|
+
} });
|
|
57
|
+
let sx = {
|
|
58
|
+
item: selected ? template.primary : defaultTemplate.primary,
|
|
59
|
+
text: {
|
|
60
|
+
color: selected ? template.primary.color : defaultTemplate.primary.color
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'li' }, listProps === null || listProps === void 0 ? void 0 : listProps.listItem, props, { sxr: Object.assign(Object.assign(Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sx.item), sizes[size]), { border: 0, "&:hover:not(.list-item-selected)": hoversx }), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { component: "span", baseClass: 'list-item-icon', sxr: Object.assign(Object.assign({}, sx.text), { mr: 1, display: "inline-block" }), children: startIcon })), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", sx: sx.text, children: children })), subtitle && jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.subtititle, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", sx: sx.text, children: subtitle }))] }), endIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { component: "span", baseClass: 'list-item-icon', sxr: {
|
|
64
|
+
ml: 1,
|
|
65
|
+
display: "inline-block"
|
|
66
|
+
}, children: endIcon }))] })));
|
|
51
67
|
});
|
|
52
|
-
ListItem.displayName = "ListItem";
|
|
53
68
|
|
|
54
69
|
module.exports = ListItem;
|
|
55
70
|
//# sourceMappingURL=index.cjs.map
|
package/ListItem/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType, useColorTemplate } from '@xanui/core'\nimport Text, { TextProps } from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n slotProps?: {\n content: Omit<TextProps, \"children\">;\n startIcon: Omit<TagProps, \"children\">;\n endIcon: Omit<TagProps, \"children\">;\n subtititle: Omit<TextProps, \"children\">;\n }\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, slotProps, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n const listProps = useListContext()\n const template = useColorTemplate(listProps.color, listProps.variant)\n const defaultTemplate = useColorTemplate(\"default\", \"text\")\n const hoverTemplate = useColorTemplate('default', \"soft\")\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n const size = listProps?.size\n\n let sizes: any = {\n small: {\n fontSize: \"button\",\n py: 0.5,\n px: 1,\n minHeight: 32,\n },\n medium: {\n fontSize: \"text\",\n py: 1,\n px: 1.5,\n minHeight: 40,\n },\n large: {\n fontSize: \"h6\",\n py: 1.5,\n px: 2,\n minHeight: 48,\n }\n }\n\n const hoversx = {\n ...hoverTemplate.primary,\n \"& .list-item-icon\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-subtitle\": {\n color: hoverTemplate.primary.color\n }\n }\n\n let sx = {\n item: selected ? template.primary : defaultTemplate.primary,\n text: {\n color: selected ? template.primary.color : defaultTemplate.primary.color\n }\n }\n\n return (\n <Tag\n component='li'\n {...listProps?.listItem}\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n ...sx.item,\n ...sizes[size as any],\n border: 0,\n \"&:hover:not(.list-item-selected)\": hoversx\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag\n {...slotProps?.startIcon}\n component=\"span\"\n baseClass='list-item-icon'\n sxr={{\n ...sx.text,\n mr: 1,\n display: \"inline-block\"\n }}\n >{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n {...slotProps?.content}\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n sx={sx.text}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n {...slotProps?.subtititle}\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n sx={sx.text}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag\n {...slotProps?.endIcon}\n component=\"span\"\n baseClass='list-item-icon'\n sxr={{\n ml: 1,\n display: \"inline-block\"\n }}\n >{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;;;AAsBA;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AACA;AACA;;;AAIA;AACA;AACA;;AAGA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAGL;AACI;AACA;AACI;AACH;;AAGL;AA2DgB;AACA;AACH;AAIjB;;"}
|
package/ListItem/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ReactElement } from 'react';
|
|
2
2
|
import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
|
|
3
|
+
import { TextProps } from '../Text/index.js';
|
|
3
4
|
|
|
4
5
|
type ListItemProps<T extends TagComponentType = "li"> = TagProps<T> & {
|
|
5
6
|
selected?: boolean;
|
|
@@ -7,6 +8,12 @@ type ListItemProps<T extends TagComponentType = "li"> = TagProps<T> & {
|
|
|
7
8
|
startIcon?: useBreakpointPropsType<ReactElement>;
|
|
8
9
|
endIcon?: useBreakpointPropsType<ReactElement>;
|
|
9
10
|
size?: useBreakpointPropsType<"small" | "medium" | "large">;
|
|
11
|
+
slotProps?: {
|
|
12
|
+
content: Omit<TextProps, "children">;
|
|
13
|
+
startIcon: Omit<TagProps, "children">;
|
|
14
|
+
endIcon: Omit<TagProps, "children">;
|
|
15
|
+
subtititle: Omit<TextProps, "children">;
|
|
16
|
+
};
|
|
10
17
|
};
|
|
11
18
|
declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
|
|
12
19
|
|
package/ListItem/index.js
CHANGED
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
import { __rest } from 'tslib';
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
5
|
+
import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
|
|
6
6
|
import Text from '../Text/index.js';
|
|
7
7
|
import { useListContext } from '../List/ListContext.js';
|
|
8
8
|
|
|
9
9
|
const ListItem = React.forwardRef((_a, ref) => {
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
let [_d] = useInterface("ListItem", rest, {}), { selected } = _d, props = __rest(_d, ["selected"]);
|
|
10
|
+
var { children, startIcon, endIcon, subtitle, slotProps } = _a, rest = __rest(_a, ["children", "startIcon", "endIcon", "subtitle", "slotProps"]);
|
|
11
|
+
let [_b] = useInterface("ListItem", rest, {}), { selected } = _b, props = __rest(_b, ["selected"]);
|
|
13
12
|
const _p = {};
|
|
14
13
|
if (subtitle)
|
|
15
14
|
_p.subtitle = subtitle;
|
|
@@ -17,14 +16,15 @@ const ListItem = React.forwardRef((_a, ref) => {
|
|
|
17
16
|
_p.startIcon = startIcon;
|
|
18
17
|
if (endIcon)
|
|
19
18
|
_p.endIcon = endIcon;
|
|
20
|
-
if (size)
|
|
21
|
-
_p.size = size;
|
|
22
19
|
const p = useBreakpointProps(_p);
|
|
23
|
-
const
|
|
20
|
+
const listProps = useListContext();
|
|
21
|
+
const template = useColorTemplate(listProps.color, listProps.variant);
|
|
22
|
+
const defaultTemplate = useColorTemplate("default", "text");
|
|
23
|
+
const hoverTemplate = useColorTemplate('default', "soft");
|
|
24
24
|
subtitle = p.subtitle;
|
|
25
25
|
startIcon = p.startIcon;
|
|
26
26
|
endIcon = p.endIcon;
|
|
27
|
-
size =
|
|
27
|
+
const size = listProps === null || listProps === void 0 ? void 0 : listProps.size;
|
|
28
28
|
let sizes = {
|
|
29
29
|
small: {
|
|
30
30
|
fontSize: "button",
|
|
@@ -45,9 +45,24 @@ const ListItem = React.forwardRef((_a, ref) => {
|
|
|
45
45
|
minHeight: 48,
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
-
|
|
48
|
+
const hoversx = Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
|
|
49
|
+
color: hoverTemplate.primary.color
|
|
50
|
+
}, "& .list-item-text": {
|
|
51
|
+
color: hoverTemplate.primary.color
|
|
52
|
+
}, "& .list-item-subtitle": {
|
|
53
|
+
color: hoverTemplate.primary.color
|
|
54
|
+
} });
|
|
55
|
+
let sx = {
|
|
56
|
+
item: selected ? template.primary : defaultTemplate.primary,
|
|
57
|
+
text: {
|
|
58
|
+
color: selected ? template.primary.color : defaultTemplate.primary.color
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
return (jsxs(Tag, Object.assign({ component: 'li' }, listProps === null || listProps === void 0 ? void 0 : listProps.listItem, props, { sxr: Object.assign(Object.assign(Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sx.item), sizes[size]), { border: 0, "&:hover:not(.list-item-selected)": hoversx }), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { component: "span", baseClass: 'list-item-icon', sxr: Object.assign(Object.assign({}, sx.text), { mr: 1, display: "inline-block" }), children: startIcon })), jsxs(Tag, { flex: 1, children: [jsx(Text, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", sx: sx.text, children: children })), subtitle && jsx(Text, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.subtititle, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", sx: sx.text, children: subtitle }))] }), endIcon && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { component: "span", baseClass: 'list-item-icon', sxr: {
|
|
62
|
+
ml: 1,
|
|
63
|
+
display: "inline-block"
|
|
64
|
+
}, children: endIcon }))] })));
|
|
49
65
|
});
|
|
50
|
-
ListItem.displayName = "ListItem";
|
|
51
66
|
|
|
52
67
|
export { ListItem as default };
|
|
53
68
|
//# sourceMappingURL=index.js.map
|
package/ListItem/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType, useColorTemplate } from '@xanui/core'\nimport Text, { TextProps } from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n slotProps?: {\n content: Omit<TextProps, \"children\">;\n startIcon: Omit<TagProps, \"children\">;\n endIcon: Omit<TagProps, \"children\">;\n subtititle: Omit<TextProps, \"children\">;\n }\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, slotProps, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n const listProps = useListContext()\n const template = useColorTemplate(listProps.color, listProps.variant)\n const defaultTemplate = useColorTemplate(\"default\", \"text\")\n const hoverTemplate = useColorTemplate('default', \"soft\")\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n const size = listProps?.size\n\n let sizes: any = {\n small: {\n fontSize: \"button\",\n py: 0.5,\n px: 1,\n minHeight: 32,\n },\n medium: {\n fontSize: \"text\",\n py: 1,\n px: 1.5,\n minHeight: 40,\n },\n large: {\n fontSize: \"h6\",\n py: 1.5,\n px: 2,\n minHeight: 48,\n }\n }\n\n const hoversx = {\n ...hoverTemplate.primary,\n \"& .list-item-icon\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-subtitle\": {\n color: hoverTemplate.primary.color\n }\n }\n\n let sx = {\n item: selected ? template.primary : defaultTemplate.primary,\n text: {\n color: selected ? template.primary.color : defaultTemplate.primary.color\n }\n }\n\n return (\n <Tag\n component='li'\n {...listProps?.listItem}\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n ...sx.item,\n ...sizes[size as any],\n border: 0,\n \"&:hover:not(.list-item-selected)\": hoversx\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag\n {...slotProps?.startIcon}\n component=\"span\"\n baseClass='list-item-icon'\n sxr={{\n ...sx.text,\n mr: 1,\n display: \"inline-block\"\n }}\n >{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n {...slotProps?.content}\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n sx={sx.text}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n {...slotProps?.subtititle}\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n sx={sx.text}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag\n {...slotProps?.endIcon}\n component=\"span\"\n baseClass='list-item-icon'\n sxr={{\n ml: 1,\n display: \"inline-block\"\n }}\n >{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;AAsBA;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AACA;AACA;;;AAIA;AACA;AACA;;AAGA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAGL;AACI;AACA;AACI;AACH;;AAGL;AA2DgB;AACA;AACH;AAIjB;;"}
|