@xanui/ui 1.1.61 → 1.1.63
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/Select/index.cjs +1 -1
- package/Select/index.cjs.map +1 -1
- package/Select/index.js +1 -1
- package/Select/index.js.map +1 -1
- package/Toast/index.cjs +8 -10
- package/Toast/index.cjs.map +1 -1
- package/Toast/index.js +8 -10
- package/Toast/index.js.map +1 -1
- package/package.json +1 -1
package/Select/index.cjs
CHANGED
|
@@ -52,7 +52,7 @@ const Select = React.forwardRef((_a, ref) => {
|
|
|
52
52
|
if (conRef.current.contains(e.target))
|
|
53
53
|
return;
|
|
54
54
|
toggleMenu();
|
|
55
|
-
}, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, children: childs })) }))] }));
|
|
55
|
+
}, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, maxHeight: typeof window === "undefined" ? "auto" : (window === null || window === void 0 ? void 0 : window.innerHeight) - 50, overflow: "auto", children: childs })) }))] }));
|
|
56
56
|
});
|
|
57
57
|
|
|
58
58
|
module.exports = Select;
|
package/Select/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n {...inputProps}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant === \"outline\" ? \"fill\" : variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n {...inputProps}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant === \"outline\" ? \"fill\" : variant}\n maxHeight={typeof window === \"undefined\" ? \"auto\" : window?.innerHeight - 50}\n overflow={\"auto\"}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;AACJ;AAehB;;"}
|
package/Select/index.js
CHANGED
|
@@ -50,7 +50,7 @@ const Select = React.forwardRef((_a, ref) => {
|
|
|
50
50
|
if (conRef.current.contains(e.target))
|
|
51
51
|
return;
|
|
52
52
|
toggleMenu();
|
|
53
|
-
}, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, children: childs })) }))] }));
|
|
53
|
+
}, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, maxHeight: typeof window === "undefined" ? "auto" : (window === null || window === void 0 ? void 0 : window.innerHeight) - 50, overflow: "auto", children: childs })) }))] }));
|
|
54
54
|
});
|
|
55
55
|
|
|
56
56
|
export { Select as default };
|
package/Select/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n {...inputProps}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant === \"outline\" ? \"fill\" : variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n {...inputProps}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant === \"outline\" ? \"fill\" : variant}\n maxHeight={typeof window === \"undefined\" ? \"auto\" : window?.innerHeight - 50}\n overflow={\"auto\"}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;AACJ;AAehB;;"}
|
package/Toast/index.cjs
CHANGED
|
@@ -99,12 +99,12 @@ const RenderToasts = () => {
|
|
|
99
99
|
continue;
|
|
100
100
|
views.push(jsxRuntime.jsx(index, { overflow: "hidden", p: 1, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 280, height: "auto", maxHeight: "100vh" }, sx), children: items.map((itemprops, index) => {
|
|
101
101
|
return (jsxRuntime.jsx(ToastView, Object.assign({}, itemprops, { onClosed: () => {
|
|
102
|
-
|
|
103
|
-
if (!
|
|
102
|
+
items.splice(index, 1);
|
|
103
|
+
if (!items.length) {
|
|
104
104
|
delete State[placement];
|
|
105
105
|
}
|
|
106
106
|
else {
|
|
107
|
-
State[placement] =
|
|
107
|
+
State[placement] = items;
|
|
108
108
|
}
|
|
109
109
|
if (!Object.keys(State).length) {
|
|
110
110
|
core.Renderar.unrender(RenderToasts);
|
|
@@ -117,16 +117,14 @@ const RenderToasts = () => {
|
|
|
117
117
|
const Toast = (props) => {
|
|
118
118
|
props = React.isValidElement(props) ? { content: props } : props;
|
|
119
119
|
let { placement = "bottom-right" } = (props || {});
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
120
|
+
const length = Object.keys(State).length;
|
|
121
|
+
if (!State[placement])
|
|
122
|
+
State[placement] = [];
|
|
123
|
+
State[placement].push(props);
|
|
124
|
+
if (length) {
|
|
124
125
|
core.Renderar.updateProps(RenderToasts, {});
|
|
125
126
|
}
|
|
126
127
|
else {
|
|
127
|
-
if (!State[placement])
|
|
128
|
-
State[placement] = [];
|
|
129
|
-
State[placement].push(props);
|
|
130
128
|
core.Renderar.render(RenderToasts);
|
|
131
129
|
}
|
|
132
130
|
};
|
package/Toast/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n autoColose?: boolean;\n autoColoseDelay?: number;\n pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const {\n placement = \"bottom-right\",\n content,\n closeable,\n onClosed,\n autoColose = true,\n pauseOnHover = true,\n autoColoseDelay = 6000,\n ...rest\n } = props || {}\n\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n if (autoColose) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n >\n <Alert\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n (autoColose && pauseOnHover) && clearTimeout(timer)\n }}\n onMouseLeave={() => {\n if (autoColose && pauseOnHover) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n onClose={closeable ? () => setOpen(false) : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n // \"top-left\": [],\n // \"top-center\": [],\n // \"top-right\": [],\n // \"bottom-left\": [],\n // \"bottom-center\": [],\n // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n let views = []\n\n for (let placement in State) {\n const items = (State as any)[placement]\n const { sx } = formatPacement(placement as any)\n if (!items.length) continue;\n views.push(\n <Scrollbar\n key={`toast-render-${placement}`}\n overflow=\"hidden\"\n p={1}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 280,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n {items.map((itemprops: UseToastProps, index: number) => {\n return (\n <ToastView\n key={`toast-view-${index}`}\n {...itemprops}\n onClosed={() => {\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n autoColose?: boolean;\n autoColoseDelay?: number;\n pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const {\n placement = \"bottom-right\",\n content,\n closeable,\n onClosed,\n autoColose = true,\n pauseOnHover = true,\n autoColoseDelay = 6000,\n ...rest\n } = props || {}\n\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n if (autoColose) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n >\n <Alert\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n (autoColose && pauseOnHover) && clearTimeout(timer)\n }}\n onMouseLeave={() => {\n if (autoColose && pauseOnHover) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n onClose={closeable ? () => setOpen(false) : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n // \"top-left\": [],\n // \"top-center\": [],\n // \"top-right\": [],\n // \"bottom-left\": [],\n // \"bottom-center\": [],\n // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n let views = []\n\n for (let placement in State) {\n const items = (State as any)[placement]\n const { sx } = formatPacement(placement as any)\n if (!items.length) continue;\n views.push(\n <Scrollbar\n key={`toast-render-${placement}`}\n overflow=\"hidden\"\n p={1}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 280,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n {items.map((itemprops: UseToastProps, index: number) => {\n return (\n <ToastView\n key={`toast-view-${index}`}\n {...itemprops}\n onClosed={() => {\n items.splice(index, 1)\n if (!items.length) {\n delete (State as any)[placement]\n } else {\n (State as any)[placement] = items\n }\n if (!Object.keys(State).length) {\n Renderar.unrender(RenderToasts)\n }\n }}\n />\n )\n })}\n </Scrollbar >\n )\n }\n\n return views\n}\n\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\n props = React.isValidElement(props) ? { content: props } : props\n let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\n const length = Object.keys(State).length\n if (!State[placement]) State[placement] = []\n State[placement].push(props as any)\n if (length) {\n Renderar.updateProps(RenderToasts, {})\n } else {\n Renderar.render(RenderToasts)\n }\n}\n\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;;AAuBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;AACA;;AAaA;AAIQ;AACJ;;AAGQ;;AAEA;;;;AAYJ;AAEI;AACI;;AAEA;;;AAMpB;AAEA;AACI;AACA;AACA;AACA;AACA;AACA;;AAGJ;;AAGI;AACI;;;;;;AA2BwB;AACA;AACI;;;AAEC;;;AAGD;;AAER;AAGZ;;AAKZ;AACJ;AAEA;AACI;;;AAGA;AAAuB;;;AAGnB;;;AAEA;;AAER;;"}
|
package/Toast/index.js
CHANGED
|
@@ -97,12 +97,12 @@ const RenderToasts = () => {
|
|
|
97
97
|
continue;
|
|
98
98
|
views.push(jsx(Scrollbar, { overflow: "hidden", p: 1, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 280, height: "auto", maxHeight: "100vh" }, sx), children: items.map((itemprops, index) => {
|
|
99
99
|
return (jsx(ToastView, Object.assign({}, itemprops, { onClosed: () => {
|
|
100
|
-
|
|
101
|
-
if (!
|
|
100
|
+
items.splice(index, 1);
|
|
101
|
+
if (!items.length) {
|
|
102
102
|
delete State[placement];
|
|
103
103
|
}
|
|
104
104
|
else {
|
|
105
|
-
State[placement] =
|
|
105
|
+
State[placement] = items;
|
|
106
106
|
}
|
|
107
107
|
if (!Object.keys(State).length) {
|
|
108
108
|
Renderar.unrender(RenderToasts);
|
|
@@ -115,16 +115,14 @@ const RenderToasts = () => {
|
|
|
115
115
|
const Toast = (props) => {
|
|
116
116
|
props = React.isValidElement(props) ? { content: props } : props;
|
|
117
117
|
let { placement = "bottom-right" } = (props || {});
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
118
|
+
const length = Object.keys(State).length;
|
|
119
|
+
if (!State[placement])
|
|
120
|
+
State[placement] = [];
|
|
121
|
+
State[placement].push(props);
|
|
122
|
+
if (length) {
|
|
122
123
|
Renderar.updateProps(RenderToasts, {});
|
|
123
124
|
}
|
|
124
125
|
else {
|
|
125
|
-
if (!State[placement])
|
|
126
|
-
State[placement] = [];
|
|
127
|
-
State[placement].push(props);
|
|
128
126
|
Renderar.render(RenderToasts);
|
|
129
127
|
}
|
|
130
128
|
};
|
package/Toast/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n autoColose?: boolean;\n autoColoseDelay?: number;\n pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const {\n placement = \"bottom-right\",\n content,\n closeable,\n onClosed,\n autoColose = true,\n pauseOnHover = true,\n autoColoseDelay = 6000,\n ...rest\n } = props || {}\n\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n if (autoColose) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n >\n <Alert\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n (autoColose && pauseOnHover) && clearTimeout(timer)\n }}\n onMouseLeave={() => {\n if (autoColose && pauseOnHover) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n onClose={closeable ? () => setOpen(false) : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n // \"top-left\": [],\n // \"top-center\": [],\n // \"top-right\": [],\n // \"bottom-left\": [],\n // \"bottom-center\": [],\n // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n let views = []\n\n for (let placement in State) {\n const items = (State as any)[placement]\n const { sx } = formatPacement(placement as any)\n if (!items.length) continue;\n views.push(\n <Scrollbar\n key={`toast-render-${placement}`}\n overflow=\"hidden\"\n p={1}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 280,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n {items.map((itemprops: UseToastProps, index: number) => {\n return (\n <ToastView\n key={`toast-view-${index}`}\n {...itemprops}\n onClosed={() => {\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n autoColose?: boolean;\n autoColoseDelay?: number;\n pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const {\n placement = \"bottom-right\",\n content,\n closeable,\n onClosed,\n autoColose = true,\n pauseOnHover = true,\n autoColoseDelay = 6000,\n ...rest\n } = props || {}\n\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n if (autoColose) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n >\n <Alert\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n (autoColose && pauseOnHover) && clearTimeout(timer)\n }}\n onMouseLeave={() => {\n if (autoColose && pauseOnHover) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n onClose={closeable ? () => setOpen(false) : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n // \"top-left\": [],\n // \"top-center\": [],\n // \"top-right\": [],\n // \"bottom-left\": [],\n // \"bottom-center\": [],\n // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n let views = []\n\n for (let placement in State) {\n const items = (State as any)[placement]\n const { sx } = formatPacement(placement as any)\n if (!items.length) continue;\n views.push(\n <Scrollbar\n key={`toast-render-${placement}`}\n overflow=\"hidden\"\n p={1}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 280,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n {items.map((itemprops: UseToastProps, index: number) => {\n return (\n <ToastView\n key={`toast-view-${index}`}\n {...itemprops}\n onClosed={() => {\n items.splice(index, 1)\n if (!items.length) {\n delete (State as any)[placement]\n } else {\n (State as any)[placement] = items\n }\n if (!Object.keys(State).length) {\n Renderar.unrender(RenderToasts)\n }\n }}\n />\n )\n })}\n </Scrollbar >\n )\n }\n\n return views\n}\n\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\n props = React.isValidElement(props) ? { content: props } : props\n let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\n const length = Object.keys(State).length\n if (!State[placement]) State[placement] = []\n State[placement].push(props as any)\n if (length) {\n Renderar.updateProps(RenderToasts, {})\n } else {\n Renderar.render(RenderToasts)\n }\n}\n\nexport default Toast;"],"names":[],"mappings":";;;;;;;;AAuBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;AACA;;AAaA;AAIQ;AACJ;;AAGQ;;AAEA;;;;AAYJ;AAEI;AACI;;AAEA;;;AAMpB;AAEA;AACI;AACA;AACA;AACA;AACA;AACA;;AAGJ;;AAGI;AACI;;;;;;AA2BwB;AACA;AACI;;;AAEC;;;AAGD;;AAER;AAGZ;;AAKZ;AACJ;AAEA;AACI;;;AAGA;AAAuB;;;AAGnB;;;AAEA;;AAER;;"}
|