@xanui/ui 1.1.34 → 1.1.36
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/DataFilter/index.js +3 -3
- package/package.json +10 -3
- package/Accordion/index.mjs +0 -94
- package/Accordion/index.mjs.map +0 -1
- package/Alert/index.mjs +0 -119
- package/Alert/index.mjs.map +0 -1
- package/Autocomplete/index.mjs +0 -134
- package/Autocomplete/index.mjs.map +0 -1
- package/Avatar/index.mjs +0 -48
- package/Avatar/index.mjs.map +0 -1
- package/Badge/index.mjs +0 -107
- package/Badge/index.mjs.map +0 -1
- package/Box/index.mjs +0 -12
- package/Box/index.mjs.map +0 -1
- package/Button/index.mjs +0 -92
- package/Button/index.mjs.map +0 -1
- package/ButtonGroup/index.mjs +0 -56
- package/ButtonGroup/index.mjs.map +0 -1
- package/Calendar/index.mjs +0 -172
- package/Calendar/index.mjs.map +0 -1
- package/CalendarInput/index.mjs +0 -32
- package/CalendarInput/index.mjs.map +0 -1
- package/Checkbox/index.mjs +0 -56
- package/Checkbox/index.mjs.map +0 -1
- package/Chip/index.mjs +0 -74
- package/Chip/index.mjs.map +0 -1
- package/CircleProgress/index.mjs +0 -127
- package/CircleProgress/index.mjs.map +0 -1
- package/ClickOutside/index.mjs +0 -35
- package/ClickOutside/index.mjs.map +0 -1
- package/Collaps/index.mjs +0 -24
- package/Collaps/index.mjs.map +0 -1
- package/Container/index.mjs +0 -27
- package/Container/index.mjs.map +0 -1
- package/DataFilter/index.mjs +0 -67
- package/DataFilter/index.mjs.map +0 -1
- package/DataFilter/options/DateFilter.mjs +0 -30
- package/DataFilter/options/DateFilter.mjs.map +0 -1
- package/DataFilter/options/DateRangeFilter.mjs +0 -25
- package/DataFilter/options/DateRangeFilter.mjs.map +0 -1
- package/DataFilter/options/MultiSelectFilter.mjs +0 -36
- package/DataFilter/options/MultiSelectFilter.mjs.map +0 -1
- package/DataFilter/options/NumberFilter.mjs +0 -22
- package/DataFilter/options/NumberFilter.mjs.map +0 -1
- package/DataFilter/options/NumberRangeFilter.mjs +0 -27
- package/DataFilter/options/NumberRangeFilter.mjs.map +0 -1
- package/DataFilter/options/SelectFilter.mjs +0 -32
- package/DataFilter/options/SelectFilter.mjs.map +0 -1
- package/DataFilter/options/TextFilter.mjs +0 -22
- package/DataFilter/options/TextFilter.mjs.map +0 -1
- package/Datatable/FilterBox.mjs +0 -37
- package/Datatable/FilterBox.mjs.map +0 -1
- package/Datatable/Row.mjs +0 -57
- package/Datatable/Row.mjs.map +0 -1
- package/Datatable/SelectedBox.mjs +0 -19
- package/Datatable/SelectedBox.mjs.map +0 -1
- package/Datatable/Table.mjs +0 -21
- package/Datatable/Table.mjs.map +0 -1
- package/Datatable/TableHead.mjs +0 -59
- package/Datatable/TableHead.mjs.map +0 -1
- package/Datatable/index.mjs +0 -91
- package/Datatable/index.mjs.map +0 -1
- package/Divider/index.mjs +0 -29
- package/Divider/index.mjs.map +0 -1
- package/Drawer/index.mjs +0 -76
- package/Drawer/index.mjs.map +0 -1
- package/Form/index.mjs +0 -43
- package/Form/index.mjs.map +0 -1
- package/GridContainer/index.mjs +0 -17
- package/GridContainer/index.mjs.map +0 -1
- package/GridItem/index.mjs +0 -18
- package/GridItem/index.mjs.map +0 -1
- package/IconButton/index.mjs +0 -62
- package/IconButton/index.mjs.map +0 -1
- package/Image/index.mjs +0 -25
- package/Image/index.mjs.map +0 -1
- package/Input/index.mjs +0 -142
- package/Input/index.mjs.map +0 -1
- package/InputNumber/index.mjs +0 -30
- package/InputNumber/index.mjs.map +0 -1
- package/Label/index.mjs +0 -22
- package/Label/index.mjs.map +0 -1
- package/Layer/index.mjs +0 -60
- package/Layer/index.mjs.map +0 -1
- package/LineProgress/index.mjs +0 -57
- package/LineProgress/index.mjs.map +0 -1
- package/List/ListContext.mjs +0 -8
- package/List/ListContext.mjs.map +0 -1
- package/List/index.mjs +0 -61
- package/List/index.mjs.map +0 -1
- package/ListItem/index.mjs +0 -52
- package/ListItem/index.mjs.map +0 -1
- package/LoadingBox/index.mjs +0 -30
- package/LoadingBox/index.mjs.map +0 -1
- package/Menu/index.mjs +0 -148
- package/Menu/index.mjs.map +0 -1
- package/Modal/index.mjs +0 -57
- package/Modal/index.mjs.map +0 -1
- package/NoSSR/index.mjs +0 -13
- package/NoSSR/index.mjs.map +0 -1
- package/Option/index.mjs +0 -12
- package/Option/index.mjs.map +0 -1
- package/Paper/index.mjs +0 -13
- package/Paper/index.mjs.map +0 -1
- package/Portal/index.mjs +0 -25
- package/Portal/index.mjs.map +0 -1
- package/Radio/index.mjs +0 -14
- package/Radio/index.mjs.map +0 -1
- package/Scrollbar/index.mjs +0 -57
- package/Scrollbar/index.mjs.map +0 -1
- package/Select/index.mjs +0 -57
- package/Select/index.mjs.map +0 -1
- package/Skeleton/index.mjs +0 -58
- package/Skeleton/index.mjs.map +0 -1
- package/Stack/index.mjs +0 -15
- package/Stack/index.mjs.map +0 -1
- package/Switch/index.mjs +0 -77
- package/Switch/index.mjs.map +0 -1
- package/Tab/index.mjs +0 -15
- package/Tab/index.mjs.map +0 -1
- package/Table/index.mjs +0 -86
- package/Table/index.mjs.map +0 -1
- package/TableBody/index.mjs +0 -12
- package/TableBody/index.mjs.map +0 -1
- package/TableCell/index.mjs +0 -12
- package/TableCell/index.mjs.map +0 -1
- package/TableFooter/index.mjs +0 -12
- package/TableFooter/index.mjs.map +0 -1
- package/TableHead/index.mjs +0 -12
- package/TableHead/index.mjs.map +0 -1
- package/TablePagination/index.mjs +0 -57
- package/TablePagination/index.mjs.map +0 -1
- package/TableRow/index.mjs +0 -12
- package/TableRow/index.mjs.map +0 -1
- package/Tabs/index.mjs +0 -199
- package/Tabs/index.mjs.map +0 -1
- package/Text/index.mjs +0 -23
- package/Text/index.mjs.map +0 -1
- package/Toast/index.mjs +0 -118
- package/Toast/index.mjs.map +0 -1
- package/Tooltip/index.mjs +0 -38
- package/Tooltip/index.mjs.map +0 -1
- package/ViewBox/index.mjs +0 -30
- package/ViewBox/index.mjs.map +0 -1
- package/index.mjs +0 -65
- package/index.mjs.map +0 -1
- package/useAlert/index.mjs +0 -92
- package/useAlert/index.mjs.map +0 -1
- package/useBlurCss/index.mjs +0 -17
- package/useBlurCss/index.mjs.map +0 -1
- package/useCorner/index.mjs +0 -20
- package/useCorner/index.mjs.map +0 -1
- package/useLayer/index.mjs +0 -36
- package/useLayer/index.mjs.map +0 -1
- package/useModal/index.mjs +0 -35
- package/useModal/index.mjs.map +0 -1
package/List/ListContext.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListContext.mjs","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\r\nimport React from \"react\"\r\n\r\nexport type ListSize = \"small\" | \"medium\" | \"large\"\r\n\r\nexport interface ListContextValue {\r\n size: ListSize\r\n}\r\n\r\nexport const ListContext = React.createContext<ListContextValue | null>(null)\r\n\r\nexport const useListContext = () => React.useContext(ListContext)\r\n"],"names":[],"mappings":";;AAAA;AASO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;"}
|
package/List/index.mjs
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { __rest } from 'tslib';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
|
|
5
|
-
import { ListContext } from './ListContext.mjs';
|
|
6
|
-
|
|
7
|
-
const List = React.forwardRef((_a, ref) => {
|
|
8
|
-
var _b, _c, _d, _e, _f;
|
|
9
|
-
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
10
|
-
let [_g] = useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _g, props = __rest(_g, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
|
|
11
|
-
const _p = {};
|
|
12
|
-
if (color)
|
|
13
|
-
_p.color = color;
|
|
14
|
-
if (variant)
|
|
15
|
-
_p.variant = variant;
|
|
16
|
-
if (hoverColor)
|
|
17
|
-
_p.hoverColor = hoverColor;
|
|
18
|
-
if (hoverVariant)
|
|
19
|
-
_p.hoverVariant = hoverVariant;
|
|
20
|
-
if (size)
|
|
21
|
-
_p.size = size;
|
|
22
|
-
const p = useBreakpointProps(_p);
|
|
23
|
-
color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
|
|
24
|
-
variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
|
|
25
|
-
hoverColor = (_d = p.hoverColor) !== null && _d !== void 0 ? _d : "default";
|
|
26
|
-
hoverVariant = (_e = p.hoverVariant) !== null && _e !== void 0 ? _e : "soft";
|
|
27
|
-
size = (_f = p.size) !== null && _f !== void 0 ? _f : "medium";
|
|
28
|
-
const template = useColorTemplate(color, variant);
|
|
29
|
-
const hoverTemplate = useColorTemplate(hoverColor, hoverVariant);
|
|
30
|
-
let sxOutline = {};
|
|
31
|
-
if (hoverVariant == 'outline' || variant === 'outline') {
|
|
32
|
-
sxOutline = {
|
|
33
|
-
"& .list-item": {
|
|
34
|
-
border: "1px solid",
|
|
35
|
-
borderColor: "transparent"
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
return (jsx(ListContext.Provider, { value: { size }, children: jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign(Object.assign(Object.assign({ listStyle: "none", p: 0, m: 0 }, sxOutline), { "& .list-item-icon": {
|
|
40
|
-
color: "text.secondary"
|
|
41
|
-
}, "& .list-item-text": {
|
|
42
|
-
color: "text.primary"
|
|
43
|
-
}, "& .list-item-subtitle": {
|
|
44
|
-
color: "text.secondary"
|
|
45
|
-
}, "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
|
|
46
|
-
color: hoverTemplate.primary.color
|
|
47
|
-
}, "& .list-item-text": {
|
|
48
|
-
color: hoverTemplate.primary.color
|
|
49
|
-
}, "& .list-item-subtitle": {
|
|
50
|
-
color: hoverColor === 'default' ? "text.secondary" : hoverTemplate.primary.color
|
|
51
|
-
} }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
|
|
52
|
-
color: template.primary.color
|
|
53
|
-
}, "& .list-item-text": {
|
|
54
|
-
color: template.primary.color
|
|
55
|
-
}, "& .list-item-subtitle": {
|
|
56
|
-
color: template.primary.color
|
|
57
|
-
} }) }), (sx || {})), ref: ref, children: children })) }));
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
export { List as default };
|
|
61
|
-
//# sourceMappingURL=index.mjs.map
|
package/List/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\r\nimport React from 'react'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\r\nimport { ListContext } from './ListContext';\r\n\r\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\r\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\n\r\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\r\n let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\r\n const _p: any = {}\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n if (hoverColor) _p.hoverColor = hoverColor\r\n if (hoverVariant) _p.hoverVariant = hoverVariant\r\n if (size) _p.size = size\r\n const p: any = useBreakpointProps(_p)\r\n\r\n color = p.color ?? \"brand\"\r\n variant = p.variant ?? \"fill\"\r\n hoverColor = p.hoverColor ?? \"default\"\r\n hoverVariant = p.hoverVariant ?? \"soft\"\r\n size = p.size ?? \"medium\"\r\n\r\n const template = useColorTemplate(color, variant)\r\n const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\r\n\r\n let sxOutline: any = {}\r\n if (hoverVariant == 'outline' || variant === 'outline') {\r\n sxOutline = {\r\n \"& .list-item\": {\r\n border: \"1px solid\",\r\n borderColor: \"transparent\"\r\n }\r\n }\r\n }\r\n\r\n return (\r\n <ListContext.Provider value={{ size }}>\r\n <Tag\r\n component='ul'\r\n {...props}\r\n baseClass='list'\r\n sxr={{\r\n listStyle: \"none\",\r\n p: 0,\r\n m: 0,\r\n ...sxOutline,\r\n \"& .list-item-icon\": {\r\n color: \"text.secondary\"\r\n },\r\n \"& .list-item-text\": {\r\n color: \"text.primary\"\r\n },\r\n \"& .list-item-subtitle\": {\r\n color: \"text.secondary\"\r\n },\r\n \"& .xui-list-item:not(.list-item-selected):hover\": {\r\n ...hoverTemplate.primary,\r\n \"& .list-item-icon\": {\r\n color: hoverTemplate.primary.color\r\n },\r\n \"& .list-item-text\": {\r\n color: hoverTemplate.primary.color\r\n },\r\n \"& .list-item-subtitle\": {\r\n color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.primary.color\r\n },\r\n },\r\n \"& .xui-list-item.list-item-selected\": {\r\n ...template.primary,\r\n \"& .list-item-icon\": {\r\n color: template.primary.color\r\n },\r\n \"& .list-item-text\": {\r\n color: template.primary.color\r\n },\r\n \"& .list-item-subtitle\": {\r\n color: template.primary.color\r\n },\r\n },\r\n ...(sx || {} as any)\r\n }}\r\n ref={ref}\r\n >\r\n {children}\r\n </Tag>\r\n </ListContext.Provider>\r\n )\r\n})\r\n\r\nexport default List"],"names":["_jsx"],"mappings":";;;;;;AAcA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAmC,EAAE,GAAmB,KAAI;;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACjF,IAAA,IAAI,CAAA,EAAA,CAAA,GAAqE,YAAY,CAAM,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAA9D,CAAA,IAAA,EAAA,OAAA,EAAA,SAAA,EAAA,YAAA,EAAA,cAAA,EAAA,MAAA,CAAgE,CAAuC;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;AAC1B,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;AAC7B,IAAA,UAAU,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AACtC,IAAA,YAAY,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;AACvC,IAAA,IAAI,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ;IAEzB,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC;IACjD,MAAM,aAAa,GAAG,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC;IAEhE,IAAI,SAAS,GAAQ,EAAE;IACvB,IAAI,YAAY,IAAI,SAAS,IAAI,OAAO,KAAK,SAAS,EAAE;AACpD,QAAA,SAAS,GAAG;AACR,YAAA,cAAc,EAAE;AACZ,gBAAA,MAAM,EAAE,WAAW;AACnB,gBAAA,WAAW,EAAE;AAChB;SACJ;IACL;AAEA,IAAA,QACIA,GAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAA,QAAA,EACjCA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,IAAI,IACV,KAAK,EAAA,EACT,SAAS,EAAC,MAAM,EAChB,GAAG,8CACC,SAAS,EAAE,MAAM,EACjB,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,IACD,SAAS,CAAA,EAAA,EACZ,mBAAmB,EAAE;AACjB,oBAAA,KAAK,EAAE;AACV,iBAAA,EACD,mBAAmB,EAAE;AACjB,oBAAA,KAAK,EAAE;AACV,iBAAA,EACD,uBAAuB,EAAE;AACrB,oBAAA,KAAK,EAAE;AACV,iBAAA,EACD,iDAAiD,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC1C,aAAa,CAAC,OAAO,CAAA,EAAA,EACxB,mBAAmB,EAAE;AACjB,wBAAA,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC;AAChC,qBAAA,EACD,mBAAmB,EAAE;AACjB,wBAAA,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC;AAChC,qBAAA,EACD,uBAAuB,EAAE;AACrB,wBAAA,KAAK,EAAE,UAAU,KAAK,SAAS,GAAG,gBAAgB,GAAG,aAAa,CAAC,OAAO,CAAC;AAC9E,qBAAA,EAAA,CAAA,EAEL,qCAAqC,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC9B,QAAQ,CAAC,OAAO,CAAA,EAAA,EACnB,mBAAmB,EAAE;AACjB,wBAAA,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC;AAC3B,qBAAA,EACD,mBAAmB,EAAE;AACjB,wBAAA,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC;AAC3B,qBAAA,EACD,uBAAuB,EAAE;AACrB,wBAAA,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC;AAC3B,qBAAA,EAAA,CAAA,EAAA,CAAA,GAED,EAAE,IAAI,EAAS,EAAC,EAExB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP,EAAA,CACa;AAE/B,CAAC;;;;"}
|
package/ListItem/index.mjs
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { __rest } from 'tslib';
|
|
2
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
5
|
-
import Text from '../Text/index.mjs';
|
|
6
|
-
import { useListContext } from '../List/ListContext.mjs';
|
|
7
|
-
|
|
8
|
-
const ListItem = React.forwardRef((_a, ref) => {
|
|
9
|
-
var _b, _c;
|
|
10
|
-
var { children, startIcon, endIcon, subtitle, size } = _a, rest = __rest(_a, ["children", "startIcon", "endIcon", "subtitle", "size"]);
|
|
11
|
-
let [_d] = useInterface("ListItem", rest, {}), { selected } = _d, props = __rest(_d, ["selected"]);
|
|
12
|
-
const _p = {};
|
|
13
|
-
if (subtitle)
|
|
14
|
-
_p.subtitle = subtitle;
|
|
15
|
-
if (startIcon)
|
|
16
|
-
_p.startIcon = startIcon;
|
|
17
|
-
if (endIcon)
|
|
18
|
-
_p.endIcon = endIcon;
|
|
19
|
-
if (size)
|
|
20
|
-
_p.size = size;
|
|
21
|
-
const p = useBreakpointProps(_p);
|
|
22
|
-
const ctx = useListContext();
|
|
23
|
-
subtitle = p.subtitle;
|
|
24
|
-
startIcon = p.startIcon;
|
|
25
|
-
endIcon = p.endIcon;
|
|
26
|
-
size = (_c = (_b = p.size) !== null && _b !== void 0 ? _b : ctx === null || ctx === void 0 ? void 0 : ctx.size) !== null && _c !== void 0 ? _c : "medium";
|
|
27
|
-
let sizes = {
|
|
28
|
-
small: {
|
|
29
|
-
fontSize: "button",
|
|
30
|
-
py: 0.5,
|
|
31
|
-
px: 1,
|
|
32
|
-
minHeight: 32,
|
|
33
|
-
},
|
|
34
|
-
medium: {
|
|
35
|
-
fontSize: "text",
|
|
36
|
-
py: 1,
|
|
37
|
-
px: 1.5,
|
|
38
|
-
minHeight: 40,
|
|
39
|
-
},
|
|
40
|
-
large: {
|
|
41
|
-
fontSize: "h6",
|
|
42
|
-
py: 1.5,
|
|
43
|
-
px: 2,
|
|
44
|
-
minHeight: 48,
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
return (jsxs(Tag, Object.assign({ component: 'li' }, props, { sxr: Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sizes[size]), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsx(Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxs(Tag, { flex: 1, children: [jsx(Text, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsx(Text, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsx(Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
|
|
48
|
-
});
|
|
49
|
-
ListItem.displayName = "ListItem";
|
|
50
|
-
|
|
51
|
-
export { ListItem as default };
|
|
52
|
-
//# sourceMappingURL=index.mjs.map
|
package/ListItem/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\r\nimport React, { ReactElement } from 'react'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\r\nimport Text from '../Text';\r\nimport { useListContext } from '../List/ListContext';\r\n\r\n\r\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\r\n selected?: boolean;\r\n subtitle?: useBreakpointPropsType<string | ReactElement>;\r\n startIcon?: useBreakpointPropsType<ReactElement>;\r\n endIcon?: useBreakpointPropsType<ReactElement>;\r\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, size, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\r\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\r\n const _p: any = {}\r\n if (subtitle) _p.subtitle = subtitle\r\n if (startIcon) _p.startIcon = startIcon\r\n if (endIcon) _p.endIcon = endIcon\r\n if (size) _p.size = size\r\n const p: any = useBreakpointProps(_p)\r\n const ctx = useListContext()\r\n\r\n subtitle = p.subtitle\r\n startIcon = p.startIcon\r\n endIcon = p.endIcon\r\n size = p.size ?? ctx?.size ?? \"medium\"\r\n\r\n let sizes: any = {\r\n small: {\r\n fontSize: \"button\",\r\n py: 0.5,\r\n px: 1,\r\n minHeight: 32,\r\n },\r\n medium: {\r\n fontSize: \"text\",\r\n py: 1,\r\n px: 1.5,\r\n minHeight: 40,\r\n },\r\n large: {\r\n fontSize: \"h6\",\r\n py: 1.5,\r\n px: 2,\r\n minHeight: 48,\r\n }\r\n }\r\n\r\n return (\r\n <Tag\r\n component='li'\r\n {...props}\r\n sxr={{\r\n alignItems: \"center\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n userSelect: \"none\",\r\n cursor: \"pointer\",\r\n lineHeight: 1.4,\r\n whiteSpace: \"nowrap\",\r\n flexShrink: \"0\",\r\n ...sizes[size as any]\r\n }}\r\n baseClass='list-item'\r\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\r\n ref={ref}\r\n >\r\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\r\n <Tag flex={1}>\r\n <Text\r\n variant=\"text\"\r\n className='list-item-text'\r\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\r\n >\r\n {children}\r\n </Text>\r\n {\r\n subtitle && <Text\r\n variant=\"text\"\r\n fontSize=\"button\"\r\n className='list-item-subtitle'\r\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\r\n >{subtitle as any}</Text>\r\n }\r\n </Tag>\r\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\r\n </Tag>\r\n )\r\n})\r\n\r\nListItem.displayName = \"ListItem\"\r\n\r\nexport default ListItem"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/LoadingBox/index.mjs
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { __rest } from 'tslib';
|
|
2
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
5
|
-
import CircleProgress from '../CircleProgress/index.mjs';
|
|
6
|
-
|
|
7
|
-
const LoadingBox = React.forwardRef((_a, ref) => {
|
|
8
|
-
var _b;
|
|
9
|
-
var { children } = _a, props = __rest(_a, ["children"]);
|
|
10
|
-
let [_c] = useInterface("LoadingBox", props, {}), { loading, color, slotProps } = _c, rest = __rest(_c, ["loading", "color", "slotProps"]);
|
|
11
|
-
const _p = {};
|
|
12
|
-
if (color)
|
|
13
|
-
_p.color = color;
|
|
14
|
-
const p = useBreakpointProps(_p);
|
|
15
|
-
color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
|
|
16
|
-
return (jsxs(Tag, Object.assign({ baseClass: 'loading-box' }, rest, { sxr: Object.assign({ position: "relative", display: "inline-block", overflow: "hidden" }, (rest.sx || {})), ref: ref, children: [loading && jsx(Tag, { baseClass: "loading-box-container", sxr: {
|
|
17
|
-
position: "absolute",
|
|
18
|
-
top: 0,
|
|
19
|
-
left: 0,
|
|
20
|
-
right: 0,
|
|
21
|
-
bottom: 0,
|
|
22
|
-
zIndex: 1,
|
|
23
|
-
display: "flex",
|
|
24
|
-
justifyContent: "center",
|
|
25
|
-
alignItems: "center",
|
|
26
|
-
}, children: jsx(CircleProgress, Object.assign({ color: "brand", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), jsx(Tag, { disabled: loading, children: children })] })));
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
export { LoadingBox as default };
|
|
30
|
-
//# sourceMappingURL=index.mjs.map
|
package/LoadingBox/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\r\n\r\n\r\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n loading?: boolean;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n slotProps?: {\r\n CircleProgress?: Omit<CircleProgressProps, \"value\">\r\n }\r\n\r\n}\r\n\r\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\r\n let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\r\n const _p: any = {}\r\n if (color) _p.color = color\r\n const p: any = useBreakpointProps(_p)\r\n color = p.color ?? \"brand\"\r\n\r\n return (\r\n <Tag\r\n baseClass='loading-box'\r\n {...rest}\r\n sxr={{\r\n position: \"relative\",\r\n display: \"inline-block\",\r\n overflow: \"hidden\",\r\n ...((rest as any).sx || {})\r\n }}\r\n ref={ref}\r\n >\r\n {loading && <Tag\r\n baseClass=\"loading-box-container\"\r\n sxr={{\r\n position: \"absolute\",\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n zIndex: 1,\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n >\r\n <CircleProgress\r\n color=\"brand\"\r\n hideTrack\r\n {...slotProps?.CircleProgress}\r\n />\r\n </Tag>}\r\n <Tag\r\n disabled={loading}\r\n >\r\n {children}\r\n </Tag>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default LoadingBox\r\n\r\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAeA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACzF,IAAI,CAAA,EAAA,CAAA,GAA2C,YAAY,CAAM,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,EAApF,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,IAAI,GAAA,MAAA,CAAA,EAAA,EAApC,CAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAsC,CAA8C;IACzF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;IAE1B,QACIA,KAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,aAAa,IACnB,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,QAAQ,KACb,IAAY,CAAC,EAAE,IAAI,EAAE,EAAC,EAE/B,GAAG,EAAE,GAAG,aAEP,OAAO,IAAIC,IAAC,GAAG,EAAA,EACZ,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE;AACD,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,cAAc,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,KAAK,EAAC,OAAO,EACb,SAAS,EAAA,IAAA,EAAA,EACL,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,CAAA,CAC/B,EAAA,CACA,EACNA,GAAA,CAAC,GAAG,EAAA,EACA,QAAQ,EAAE,OAAO,EAAA,QAAA,EAEhB,QAAQ,EAAA,CACP,CAAA,EAAA,CAAA,CACJ;AAEd,CAAC;;;;"}
|
package/Menu/index.mjs
DELETED
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { __rest } from 'tslib';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
import { useState, useRef, useEffect } from 'react';
|
|
5
|
-
import { useInterface, useBreakpointProps, Transition, Tag } from '@xanui/core';
|
|
6
|
-
import Portal from '../Portal/index.mjs';
|
|
7
|
-
import ClickOutside from '../ClickOutside/index.mjs';
|
|
8
|
-
|
|
9
|
-
const placements = [
|
|
10
|
-
"top",
|
|
11
|
-
"top-left",
|
|
12
|
-
"top-right",
|
|
13
|
-
"bottom",
|
|
14
|
-
"bottom-left",
|
|
15
|
-
"bottom-right",
|
|
16
|
-
"right",
|
|
17
|
-
"right-top",
|
|
18
|
-
"right-bottom",
|
|
19
|
-
"left",
|
|
20
|
-
"left-top",
|
|
21
|
-
"left-bottom",
|
|
22
|
-
];
|
|
23
|
-
const getTransformOrigin = (placement) => {
|
|
24
|
-
switch (placement) {
|
|
25
|
-
case "top":
|
|
26
|
-
return "bottom";
|
|
27
|
-
case "top-left":
|
|
28
|
-
return "bottom left";
|
|
29
|
-
case "top-right":
|
|
30
|
-
return "bottom right";
|
|
31
|
-
case "bottom":
|
|
32
|
-
return "top";
|
|
33
|
-
case "bottom-left":
|
|
34
|
-
return "top left";
|
|
35
|
-
case "bottom-right":
|
|
36
|
-
return "top right";
|
|
37
|
-
case "left":
|
|
38
|
-
return "right";
|
|
39
|
-
case "left-top":
|
|
40
|
-
return "top right";
|
|
41
|
-
case "left-bottom":
|
|
42
|
-
return "bottom right";
|
|
43
|
-
case "right":
|
|
44
|
-
return "left";
|
|
45
|
-
case "right-top":
|
|
46
|
-
return "top left";
|
|
47
|
-
case "right-bottom":
|
|
48
|
-
return "bottom left";
|
|
49
|
-
default:
|
|
50
|
-
return "top";
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
// Compute coordinates for each placement
|
|
54
|
-
const computePosition = (placement, menu, target) => {
|
|
55
|
-
const { width: mw, height: mh } = menu.getBoundingClientRect();
|
|
56
|
-
const { top: tt, left: tl, bottom: tb, right: tr, width: tw, height: th, } = target.getBoundingClientRect();
|
|
57
|
-
const positions = {
|
|
58
|
-
"bottom-left": { top: tb, left: tl },
|
|
59
|
-
"bottom-right": { top: tb, left: tr - mw },
|
|
60
|
-
bottom: { top: tb, left: tl + (tw - mw) / 2 },
|
|
61
|
-
"top-left": { top: tt - mh, left: tl },
|
|
62
|
-
"top-right": { top: tt - mh, left: tr - mw },
|
|
63
|
-
top: { top: tt - mh, left: tl + (tw - mw) / 2 },
|
|
64
|
-
left: { top: tt + (th - mh) / 2, left: tl - mw },
|
|
65
|
-
"left-top": { top: tt, left: tl - mw },
|
|
66
|
-
"left-bottom": { top: tb - mh, left: tl - mw },
|
|
67
|
-
right: { top: tt + (th - mh) / 2, left: tr },
|
|
68
|
-
"right-top": { top: tt, left: tr },
|
|
69
|
-
"right-bottom": { top: tb - mh, left: tr },
|
|
70
|
-
};
|
|
71
|
-
return positions[placement];
|
|
72
|
-
};
|
|
73
|
-
// Check if menu is off-screen
|
|
74
|
-
const isOffScreen = (menu) => {
|
|
75
|
-
const { x, y, width, height } = menu.getBoundingClientRect();
|
|
76
|
-
return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;
|
|
77
|
-
};
|
|
78
|
-
// Try to place menu and fallback if off-screen
|
|
79
|
-
const placeMenu = (placement, menu, target) => {
|
|
80
|
-
let pos = computePosition(placement, menu, target);
|
|
81
|
-
menu.style.top = pos.top + "px";
|
|
82
|
-
menu.style.left = pos.left + "px";
|
|
83
|
-
if (isOffScreen(menu)) {
|
|
84
|
-
for (const p of placements) {
|
|
85
|
-
const fallbackPos = computePosition(p, menu, target);
|
|
86
|
-
menu.style.top = fallbackPos.top + "px";
|
|
87
|
-
menu.style.left = fallbackPos.left + "px";
|
|
88
|
-
if (!isOffScreen(menu))
|
|
89
|
-
return p;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
return placement;
|
|
93
|
-
};
|
|
94
|
-
const Menu = (_a) => {
|
|
95
|
-
var _b;
|
|
96
|
-
var { children, target } = _a, props = __rest(_a, ["children", "target"]);
|
|
97
|
-
let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface("Menu", props, {});
|
|
98
|
-
const _p = {};
|
|
99
|
-
if (placement)
|
|
100
|
-
_p.placement = placement;
|
|
101
|
-
const p = useBreakpointProps(_p);
|
|
102
|
-
placement = p.placement || "bottom-left";
|
|
103
|
-
const isOpen = Boolean(target);
|
|
104
|
-
const [closed, setClosed] = useState(!isOpen);
|
|
105
|
-
const [placed, setPlaced] = useState(placement);
|
|
106
|
-
const menuRef = useRef(null);
|
|
107
|
-
// Open/close effect
|
|
108
|
-
useEffect(() => {
|
|
109
|
-
if (closed && isOpen)
|
|
110
|
-
setClosed(false);
|
|
111
|
-
}, [isOpen]);
|
|
112
|
-
useEffect(() => {
|
|
113
|
-
if (!closed && target && menuRef.current) {
|
|
114
|
-
const updatePosition = () => {
|
|
115
|
-
if (menuRef.current && target) {
|
|
116
|
-
requestAnimationFrame(() => {
|
|
117
|
-
const p = placeMenu(placement, menuRef.current, target);
|
|
118
|
-
setPlaced(p);
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
updatePosition();
|
|
123
|
-
window.addEventListener("resize", updatePosition);
|
|
124
|
-
window.addEventListener("scroll", updatePosition, true);
|
|
125
|
-
return () => {
|
|
126
|
-
window.removeEventListener("resize", updatePosition);
|
|
127
|
-
window.removeEventListener("scroll", updatePosition, true);
|
|
128
|
-
};
|
|
129
|
-
}
|
|
130
|
-
return;
|
|
131
|
-
}, [closed, target, placement]);
|
|
132
|
-
if (closed)
|
|
133
|
-
return null;
|
|
134
|
-
return (jsx(Portal, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsx(ClickOutside, { onClickOutside: (e) => {
|
|
135
|
-
if (target === null || target === void 0 ? void 0 : target.contains(e.target))
|
|
136
|
-
return;
|
|
137
|
-
if (e.target !== target) {
|
|
138
|
-
onClickOutside && onClickOutside(e);
|
|
139
|
-
}
|
|
140
|
-
}, ref: menuRef, sx: { position: "fixed", zIndex: 1500 + (zIndex || 0) }, children: jsx(Transition, Object.assign({ duration: 200, easing: "fast", variant: "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onClosed: () => {
|
|
141
|
-
var _a, _b;
|
|
142
|
-
setClosed(true);
|
|
143
|
-
(_b = (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _a === void 0 ? void 0 : _a.onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
144
|
-
}, children: jsx(Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "background.primary", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _b === void 0 ? void 0 : _b.sx), children: children })) })) }) })));
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
export { Menu as default };
|
|
148
|
-
//# sourceMappingURL=index.mjs.map
|
package/Menu/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\r\nimport Portal, { PortalProps } from \"../Portal\";\r\nimport ClickOutside from \"../ClickOutside\";\r\n\r\nexport type PlacementTypes =\r\n | \"top\"\r\n | \"top-left\"\r\n | \"top-right\"\r\n | \"bottom\"\r\n | \"bottom-left\"\r\n | \"bottom-right\"\r\n | \"right\"\r\n | \"right-top\"\r\n | \"right-bottom\"\r\n | \"left\"\r\n | \"left-top\"\r\n | \"left-bottom\";\r\n\r\nexport type MenuProps = {\r\n children?: ReactNode;\r\n target?: HTMLElement;\r\n placement?: useBreakpointPropsType<PlacementTypes>;\r\n zIndex?: number;\r\n onClickOutside?: (e: MouseEvent) => void;\r\n slotProps?: {\r\n transition?: Omit<TransitionProps, \"open\">;\r\n portal?: Omit<PortalProps, \"children\">;\r\n content?: Omit<TagProps<\"div\">, \"children\">;\r\n };\r\n};\r\n\r\nconst placements: PlacementTypes[] = [\r\n \"top\",\r\n \"top-left\",\r\n \"top-right\",\r\n \"bottom\",\r\n \"bottom-left\",\r\n \"bottom-right\",\r\n \"right\",\r\n \"right-top\",\r\n \"right-bottom\",\r\n \"left\",\r\n \"left-top\",\r\n \"left-bottom\",\r\n];\r\n\r\nconst getTransformOrigin = (placement: PlacementTypes) => {\r\n switch (placement) {\r\n case \"top\":\r\n return \"bottom\";\r\n case \"top-left\":\r\n return \"bottom left\";\r\n case \"top-right\":\r\n return \"bottom right\";\r\n case \"bottom\":\r\n return \"top\";\r\n case \"bottom-left\":\r\n return \"top left\";\r\n case \"bottom-right\":\r\n return \"top right\";\r\n case \"left\":\r\n return \"right\";\r\n case \"left-top\":\r\n return \"top right\";\r\n case \"left-bottom\":\r\n return \"bottom right\";\r\n case \"right\":\r\n return \"left\";\r\n case \"right-top\":\r\n return \"top left\";\r\n case \"right-bottom\":\r\n return \"bottom left\";\r\n default:\r\n return \"top\";\r\n }\r\n};\r\n\r\n// Compute coordinates for each placement\r\nconst computePosition = (\r\n placement: PlacementTypes,\r\n menu: HTMLElement,\r\n target: HTMLElement\r\n) => {\r\n const { width: mw, height: mh } = menu.getBoundingClientRect();\r\n const {\r\n top: tt,\r\n left: tl,\r\n bottom: tb,\r\n right: tr,\r\n width: tw,\r\n height: th,\r\n } = target.getBoundingClientRect();\r\n\r\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\r\n \"bottom-left\": { top: tb, left: tl },\r\n \"bottom-right\": { top: tb, left: tr - mw },\r\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\r\n\r\n \"top-left\": { top: tt - mh, left: tl },\r\n \"top-right\": { top: tt - mh, left: tr - mw },\r\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\r\n\r\n left: { top: tt + (th - mh) / 2, left: tl - mw },\r\n \"left-top\": { top: tt, left: tl - mw },\r\n \"left-bottom\": { top: tb - mh, left: tl - mw },\r\n\r\n right: { top: tt + (th - mh) / 2, left: tr },\r\n \"right-top\": { top: tt, left: tr },\r\n \"right-bottom\": { top: tb - mh, left: tr },\r\n };\r\n\r\n return positions[placement];\r\n};\r\n\r\n\r\n// Check if menu is off-screen\r\nconst isOffScreen = (menu: HTMLElement) => {\r\n const { x, y, width, height } = menu.getBoundingClientRect();\r\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\r\n};\r\n\r\n// Try to place menu and fallback if off-screen\r\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\r\n let pos = computePosition(placement, menu, target);\r\n menu.style.top = pos.top + \"px\";\r\n menu.style.left = pos.left + \"px\";\r\n\r\n if (isOffScreen(menu)) {\r\n for (const p of placements) {\r\n const fallbackPos = computePosition(p, menu, target);\r\n menu.style.top = fallbackPos.top + \"px\";\r\n menu.style.left = fallbackPos.left + \"px\";\r\n if (!isOffScreen(menu)) return p;\r\n }\r\n }\r\n return placement;\r\n};\r\n\r\nconst Menu = ({ children, target, ...props }: MenuProps) => {\r\n let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\r\n const _p: any = {};\r\n if (placement) _p.placement = placement;\r\n const p: any = useBreakpointProps(_p);\r\n placement = p.placement || \"bottom-left\";\r\n\r\n const isOpen = Boolean(target);\r\n const [closed, setClosed] = useState(!isOpen);\r\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n\r\n // Open/close effect\r\n useEffect(() => {\r\n if (closed && isOpen) setClosed(false);\r\n }, [isOpen]);\r\n\r\n\r\n useEffect(() => {\r\n if (!closed && target && menuRef.current) {\r\n const updatePosition = () => {\r\n if (menuRef.current && target) {\r\n requestAnimationFrame(() => {\r\n const p = placeMenu(placement!, menuRef.current as any, target);\r\n setPlaced(p);\r\n });\r\n }\r\n };\r\n\r\n updatePosition();\r\n window.addEventListener(\"resize\", updatePosition);\r\n window.addEventListener(\"scroll\", updatePosition, true);\r\n\r\n return () => {\r\n window.removeEventListener(\"resize\", updatePosition);\r\n window.removeEventListener(\"scroll\", updatePosition, true);\r\n };\r\n }\r\n return\r\n }, [closed, target, placement]);\r\n\r\n\r\n if (closed) return null;\r\n\r\n return (\r\n <Portal {...slotProps?.portal}>\r\n <ClickOutside\r\n onClickOutside={(e: MouseEvent) => {\r\n if (target?.contains(e.target as any)) return;\r\n if (e.target !== target) {\r\n onClickOutside && onClickOutside(e);\r\n }\r\n }}\r\n ref={menuRef}\r\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\r\n >\r\n <Transition\r\n duration={200}\r\n easing=\"fast\"\r\n variant=\"grow\"\r\n {...slotProps?.transition}\r\n open={isOpen}\r\n onClosed={() => {\r\n setClosed(true);\r\n slotProps?.transition?.onClosed?.();\r\n }}\r\n >\r\n <Tag\r\n baseClass=\"menu-content\"\r\n {...slotProps?.content}\r\n sxr={{\r\n overflow: \"hidden\",\r\n bgcolor: \"background.primary\",\r\n shadow: 2,\r\n radius: 1,\r\n transformOrigin: getTransformOrigin(placed),\r\n ...slotProps?.content?.sx,\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n </Transition>\r\n </ClickOutside>\r\n </Portal>\r\n );\r\n};\r\n\r\nexport default Menu;\r\n"],"names":[],"mappings":";;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;;;;;;AAmCxB;;"}
|
package/Modal/index.mjs
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { __rest } from 'tslib';
|
|
3
|
-
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
4
|
-
import { useRef, useEffect } from 'react';
|
|
5
|
-
import useModal from '../useModal/index.mjs';
|
|
6
|
-
import { Tag, Renderar } from '@xanui/core';
|
|
7
|
-
|
|
8
|
-
const Modal = (_a) => {
|
|
9
|
-
var { children, open } = _a, props = __rest(_a, ["children", "open"]);
|
|
10
|
-
const ref = useRef(null);
|
|
11
|
-
const modal = useModal(jsx(Fragment, { children: children }), Object.assign(Object.assign({}, props), { onClickOutside: () => {
|
|
12
|
-
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
13
|
-
props.onClickOutside();
|
|
14
|
-
}
|
|
15
|
-
}, slotProps: {
|
|
16
|
-
layer: {
|
|
17
|
-
portal: {
|
|
18
|
-
container: (ref === null || ref === void 0 ? void 0 : ref.current) || undefined
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
} }));
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
if (open) {
|
|
24
|
-
modal.open();
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
modal.close();
|
|
28
|
-
}
|
|
29
|
-
}, [open]);
|
|
30
|
-
return jsx(Tag, { ref: ref });
|
|
31
|
-
};
|
|
32
|
-
const ActionModal = (_a) => {
|
|
33
|
-
var { children } = _a, props = __rest(_a, ["children"]);
|
|
34
|
-
return (jsx(Modal, Object.assign({}, props, { children: children })));
|
|
35
|
-
};
|
|
36
|
-
Modal.open = (children, props) => {
|
|
37
|
-
const m = Renderar.render(ActionModal, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
|
|
38
|
-
m.unrender();
|
|
39
|
-
if (props === null || props === void 0 ? void 0 : props.onClosed) {
|
|
40
|
-
props.onClosed();
|
|
41
|
-
}
|
|
42
|
-
} }));
|
|
43
|
-
return {
|
|
44
|
-
open: () => {
|
|
45
|
-
m.updateProps({ open: true });
|
|
46
|
-
},
|
|
47
|
-
close: () => {
|
|
48
|
-
m.updateProps({ open: false });
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
};
|
|
52
|
-
Modal.close = () => {
|
|
53
|
-
Renderar.unrender(ActionModal);
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
export { Modal as default };
|
|
57
|
-
//# sourceMappingURL=index.mjs.map
|
package/Modal/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useRef } from \"react\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport { Renderar, Tag } from \"@xanui/core\";\r\n\r\nexport type ModalProps = UseModalProps & {\r\n children: ReactNode;\r\n open: boolean;\r\n}\r\n\r\nconst Modal = ({ children, open, ...props }: ModalProps) => {\r\n const ref = useRef<HTMLDivElement>(null);\r\n\r\n const modal = useModal(<>{children}</>, {\r\n ...props,\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n }\r\n },\r\n slotProps: {\r\n layer: {\r\n portal: {\r\n container: ref?.current || undefined\r\n }\r\n }\r\n }\r\n })\r\n\r\n useEffect(() => {\r\n if (open) {\r\n modal.open()\r\n } else {\r\n modal.close()\r\n }\r\n }, [open])\r\n return <Tag ref={ref}></Tag>\r\n}\r\n\r\nconst ActionModal = ({ children, ...props }: ModalProps) => {\r\n return (\r\n <Modal {...props}>\r\n {children}\r\n </Modal>\r\n )\r\n}\r\n\r\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\r\n const m = Renderar.render(ActionModal as any, {\r\n open: true,\r\n ...props,\r\n children,\r\n onClosed: () => {\r\n m.unrender()\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }\r\n })\r\n\r\n return {\r\n open: () => {\r\n m.updateProps({ open: true })\r\n },\r\n close: () => {\r\n m.updateProps({ open: false })\r\n },\r\n }\r\n};\r\n\r\nModal.close = () => {\r\n Renderar.unrender(ActionModal as any)\r\n}\r\n\r\nexport default Modal;"],"names":[],"mappings":";;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}
|
package/NoSSR/index.mjs
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useState, useEffect } from 'react';
|
|
3
|
-
|
|
4
|
-
const NoSSR = ({ children }) => {
|
|
5
|
-
const [isClient, setIsClient] = useState(false);
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
setIsClient(true);
|
|
8
|
-
}, []);
|
|
9
|
-
return isClient ? children : null;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export { NoSSR as default };
|
|
13
|
-
//# sourceMappingURL=index.mjs.map
|
package/NoSSR/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst NoSSR = ({ children }: any) => {\r\n const [isClient, setIsClient] = useState(false);\r\n useEffect(() => {\r\n setIsClient(true);\r\n }, [])\r\n return isClient ? children : null\r\n}\r\n\r\nexport default NoSSR"],"names":[],"mappings":";;;AAGA;;;;;;AAMA;;"}
|
package/Option/index.mjs
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { __rest } from 'tslib';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import ListItem from '../ListItem/index.mjs';
|
|
5
|
-
|
|
6
|
-
const Option = React.forwardRef((_a, ref) => {
|
|
7
|
-
var { value, children } = _a, props = __rest(_a, ["value", "children"]);
|
|
8
|
-
return (jsx(ListItem, Object.assign({}, props, { ref: ref, children: children })));
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
export { Option as default };
|
|
12
|
-
//# sourceMappingURL=index.mjs.map
|
package/Option/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Option/index.tsx"],"sourcesContent":["\r\nimport React from 'react'\r\nimport ListItem, { ListItemProps } from '../ListItem'\r\n\r\nexport type OptionProps = ListItemProps & {\r\n value: string | number;\r\n}\r\n\r\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\r\n return (\r\n <ListItem {...props} ref={ref}>{children}</ListItem>\r\n )\r\n})\r\n\r\nexport default Option"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAA0C,EAAE,GAAmB,KAAI;QAAnE,EAAE,KAAK,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;AACxD,IAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAY;AAE5D,CAAC;;;;"}
|
package/Paper/index.mjs
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { __rest } from 'tslib';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { useInterface, Tag } from '@xanui/core';
|
|
5
|
-
|
|
6
|
-
const Paper = React.forwardRef((_a, ref) => {
|
|
7
|
-
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
8
|
-
let [props] = useInterface("Paper", rest, {});
|
|
9
|
-
return (jsx(Tag, Object.assign({}, props, { sxr: Object.assign({ shadow: 1, radius: 1, p: 1.5, bgcolor: "background.secondary", color: "text.primary" }, props === null || props === void 0 ? void 0 : props.sx), baseClass: 'paper', ref: ref, children: children })));
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
export { Paper as default };
|
|
13
|
-
//# sourceMappingURL=index.mjs.map
|
package/Paper/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\r\n\r\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\n\r\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\r\n let [props] = useInterface<any>(\"Paper\", rest, {})\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n shadow: 1,\r\n radius: 1,\r\n p: 1.5,\r\n bgcolor: \"background.secondary\",\r\n color: \"text.primary\",\r\n ...props?.sx\r\n }}\r\n baseClass='paper'\r\n ref={ref}\r\n >{children}</Tag>\r\n )\r\n})\r\n\r\nexport default Paper\r\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAG,YAAY,CAAM,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;IAClD,QACIA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EAAA,EACT,GAAG,kBACC,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
|
package/Portal/index.mjs
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { useMemo, useEffect } from 'react';
|
|
4
|
-
import ReactDOM from 'react-dom';
|
|
5
|
-
import { useTheme, ThemeProvider } from '@xanui/core';
|
|
6
|
-
|
|
7
|
-
const Portal = ({ children, appendTo, container }) => {
|
|
8
|
-
const theme = useTheme();
|
|
9
|
-
appendTo = appendTo || document.body;
|
|
10
|
-
const c = useMemo(() => {
|
|
11
|
-
let _con = container || document.createElement("div");
|
|
12
|
-
appendTo.appendChild(_con);
|
|
13
|
-
_con.className = "xui-portal";
|
|
14
|
-
return _con;
|
|
15
|
-
}, [container]);
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
return () => {
|
|
18
|
-
appendTo.removeChild(c);
|
|
19
|
-
};
|
|
20
|
-
}, []);
|
|
21
|
-
return ReactDOM.createPortal(jsx(ThemeProvider, { theme: theme.name, children: children }), c);
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export { Portal as default };
|
|
25
|
-
//# sourceMappingURL=index.mjs.map
|
package/Portal/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from 'react'\r\nimport ReactDOM from 'react-dom';\r\nimport { useTheme, ThemeProvider } from '@xanui/core';\r\nexport type PortalProps = {\r\n children?: React.ReactNode;\r\n appendTo?: HTMLElement;\r\n container?: HTMLElement;\r\n}\r\n\r\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\r\n const theme = useTheme()\r\n appendTo = appendTo || document.body\r\n\r\n const c = useMemo(() => {\r\n let _con: HTMLElement = container || document.createElement(\"div\");\r\n appendTo.appendChild(_con);\r\n _con.className = \"xui-portal\"\r\n return _con\r\n }, [container])\r\n\r\n useEffect(() => {\r\n return () => {\r\n (appendTo as any).removeChild(c);\r\n }\r\n }, [])\r\n\r\n return ReactDOM.createPortal(\r\n <ThemeProvider theme={theme.name}>\r\n {children}\r\n </ThemeProvider>,\r\n c,\r\n );\r\n}\r\n\r\nexport default Portal"],"names":[],"mappings":";;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
|
package/Radio/index.mjs
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { useInterface } from '@xanui/core';
|
|
4
|
-
import CheckIcon from '@xanui/icons/RadioButtonChecked';
|
|
5
|
-
import UnCheckIcon from '@xanui/icons/RadioButtonUnchecked';
|
|
6
|
-
import Checkbox from '../Checkbox/index.mjs';
|
|
7
|
-
|
|
8
|
-
const Radio = React.forwardRef((props, ref) => {
|
|
9
|
-
let [rest] = useInterface("Radio", props, {});
|
|
10
|
-
return jsx(Checkbox, Object.assign({ checkIcon: jsx(CheckIcon, {}), uncheckIcon: jsx(UnCheckIcon, {}) }, rest, { type: "radio", ref: ref, classNames: ['radio', ...((rest === null || rest === void 0 ? void 0 : rest.classNames) || [])] }));
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
export { Radio as default };
|
|
14
|
-
//# sourceMappingURL=index.mjs.map
|
package/Radio/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Radio/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { useInterface } from '@xanui/core';\r\nimport CheckIcon from '@xanui/icons/RadioButtonChecked'\r\nimport UnCheckIcon from '@xanui/icons/RadioButtonUnchecked'\r\nimport Checkbox, { CheckboxProps } from '../Checkbox';\r\n\r\nexport type RadioProps = CheckboxProps\r\nconst Radio = React.forwardRef((props: RadioProps, ref?: React.Ref<any>) => {\r\n let [rest] = useInterface<any>(\"Radio\", props, {})\r\n return <Checkbox\r\n checkIcon={<CheckIcon />}\r\n uncheckIcon={<UnCheckIcon />}\r\n {...rest}\r\n type=\"radio\"\r\n ref={ref}\r\n classNames={['radio', ...(rest?.classNames || [])]}\r\n />\r\n})\r\n\r\nexport default Radio\r\n"],"names":["_jsx"],"mappings":";;;;;;;AAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAiB,EAAE,GAAoB,KAAI;AACvE,IAAA,IAAI,CAAC,IAAI,CAAC,GAAG,YAAY,CAAM,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC;IAClD,OAAOA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EACZ,SAAS,EAAEA,GAAA,CAAC,SAAS,KAAG,EACxB,WAAW,EAAEA,GAAA,CAAC,WAAW,KAAG,EAAA,EACxB,IAAI,IACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAA,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,EAAA,CAAA,CACpD;AACN,CAAC;;;;"}
|
package/Scrollbar/index.mjs
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { __rest } from 'tslib';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
import { useInterface, Tag } from '@xanui/core';
|
|
5
|
-
import React, { useRef, useImperativeHandle } from 'react';
|
|
6
|
-
|
|
7
|
-
const Scrollbar = React.forwardRef((_a, ref) => {
|
|
8
|
-
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
9
|
-
let [_b] = useInterface("Scrollbar", rest, {}), { onScroll, onScrollEnd } = _b, props = __rest(_b, ["onScroll", "onScrollEnd"]);
|
|
10
|
-
const innerRef = useRef(null);
|
|
11
|
-
useImperativeHandle(ref, () => ({
|
|
12
|
-
scrollTo(pos) {
|
|
13
|
-
var _a;
|
|
14
|
-
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
15
|
-
top: pos,
|
|
16
|
-
behavior: "smooth"
|
|
17
|
-
});
|
|
18
|
-
},
|
|
19
|
-
scrollToBottom() {
|
|
20
|
-
if (!innerRef.current)
|
|
21
|
-
return;
|
|
22
|
-
const ele = innerRef.current;
|
|
23
|
-
ele.scrollTo({
|
|
24
|
-
top: ele.scrollHeight,
|
|
25
|
-
behavior: "smooth"
|
|
26
|
-
});
|
|
27
|
-
},
|
|
28
|
-
scrollToTop() {
|
|
29
|
-
var _a;
|
|
30
|
-
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
31
|
-
top: 0,
|
|
32
|
-
behavior: "smooth"
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
}));
|
|
36
|
-
if (onScroll || onScrollEnd) {
|
|
37
|
-
props.onScroll = (e) => {
|
|
38
|
-
if (onScrollEnd) {
|
|
39
|
-
const ele = e.target;
|
|
40
|
-
const scrollTop = ele.scrollTop;
|
|
41
|
-
const scrollHeight = ele.scrollHeight;
|
|
42
|
-
const clientHeight = ele.clientHeight;
|
|
43
|
-
const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1;
|
|
44
|
-
isScrollDown && onScrollEnd(e);
|
|
45
|
-
}
|
|
46
|
-
onScroll && onScroll(e);
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
return (jsx(Tag, Object.assign({}, props, { ref: innerRef, baseClass: 'scrollbar', sxr: {
|
|
50
|
-
height: "100%",
|
|
51
|
-
width: "100%",
|
|
52
|
-
overflow: "auto",
|
|
53
|
-
}, children: children })));
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
export { Scrollbar as default };
|
|
57
|
-
//# sourceMappingURL=index.mjs.map
|
package/Scrollbar/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n children?: ReactNode;\r\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n scrollTo: (pos: number) => void;\r\n scrollToBottom: () => void;\r\n scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n useImperativeHandle(ref, () => ({\r\n scrollTo(pos: number) {\r\n innerRef.current?.scrollTo({\r\n top: pos,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToBottom() {\r\n if (!innerRef.current) return;\r\n const ele = innerRef.current;\r\n ele.scrollTo({\r\n top: ele.scrollHeight,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToTop() {\r\n innerRef.current?.scrollTo({\r\n top: 0,\r\n behavior: \"smooth\"\r\n });\r\n }\r\n }));\r\n\r\n if (onScroll || onScrollEnd) {\r\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n if (onScrollEnd) {\r\n const ele: any = e.target\r\n const scrollTop = ele.scrollTop\r\n const scrollHeight = ele.scrollHeight\r\n const clientHeight = ele.clientHeight\r\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n isScrollDown && onScrollEnd(e)\r\n }\r\n onScroll && onScroll(e)\r\n }\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n ref={innerRef}\r\n baseClass='scrollbar'\r\n sxr={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n overflow: \"auto\",\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAgBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;AAGJ;AAMY;AACA;AACA;;AAMhB;;"}
|