@xanui/ui 1.1.55 → 1.1.57
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/Alert/index.cjs +3 -5
- package/Alert/index.cjs.map +1 -1
- package/Alert/index.js +3 -5
- package/Alert/index.js.map +1 -1
- package/InputNumber/index.d.ts +8 -0
- package/Menu/index.cjs +3 -4
- package/Menu/index.cjs.map +1 -1
- package/Menu/index.d.ts +6 -0
- package/Menu/index.js +3 -4
- package/Menu/index.js.map +1 -1
- package/Toast/index.cjs +57 -42
- package/Toast/index.cjs.map +1 -1
- package/Toast/index.d.ts +4 -1
- package/Toast/index.js +58 -43
- package/Toast/index.js.map +1 -1
- package/index.cjs +64 -62
- package/index.cjs.map +1 -1
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/package.json +3 -3
package/Alert/index.cjs
CHANGED
|
@@ -64,7 +64,7 @@ const Alert = (_a) => {
|
|
|
64
64
|
display: "flex",
|
|
65
65
|
alignItems: "center",
|
|
66
66
|
justifyContent: "center",
|
|
67
|
-
p: isRow ?
|
|
67
|
+
p: isRow ? .5 : 0,
|
|
68
68
|
"& svg": {
|
|
69
69
|
color: template.primary.color
|
|
70
70
|
}
|
|
@@ -73,12 +73,10 @@ const Alert = (_a) => {
|
|
|
73
73
|
flexDirection: "column",
|
|
74
74
|
flex: 1,
|
|
75
75
|
color: template.primary.color,
|
|
76
|
-
py: 1,
|
|
77
76
|
textAlign: isRow ? "left" : "center",
|
|
78
77
|
gap: isRow ? 0 : 1
|
|
79
|
-
}, children: [title && jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.isValidElement(title) ? jsxRuntime.jsx(core.Tag, { className: "alert-title", children: title }) : jsxRuntime.jsx(index$1, { className: "alert-
|
|
80
|
-
|
|
81
|
-
fontWeight: "bold!important",
|
|
78
|
+
}, children: [title && jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.isValidElement(title) ? jsxRuntime.jsx(core.Tag, { className: "alert-title", children: title }) : jsxRuntime.jsx(index$1, { className: "alert-titles", variant: "text", sx: {
|
|
79
|
+
fontWeight: 500,
|
|
82
80
|
color: template.primary.color
|
|
83
81
|
}, children: title }) }), jsxRuntime.jsx(core.Tag, { sxr: {
|
|
84
82
|
font: "button",
|
package/Alert/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor } from \"@xanui/core\"\r\nimport React, { isValidElement, ReactElement, useEffect, useRef } from \"react\"\r\nimport Text from \"../Text\"\r\nimport InfoIcon from '@xanui/icons/Info';\r\nimport WarningIcon from '@xanui/icons/Warning';\r\nimport SuccessIcon from '@xanui/icons/CheckCircle';\r\nimport ErrorIcon from '@xanui/icons/Cancel';\r\nimport IconClose from '@xanui/icons/Close';\r\nimport IconButton from \"../IconButton\";\r\nimport useAlert, { UseAlerProps } from \"../useAlert\";\r\n\r\n\r\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n onClose?: React.DOMAttributes<\"button\">['onClick'];\r\n}\r\n\r\nexport type AlertMesssageType = string | ReactElement | AlertProps\r\n\r\nconst Alert = ({ children, ...rest }: AlertProps) => {\r\n let [{\r\n title,\r\n variant,\r\n icon,\r\n color,\r\n direction,\r\n slotProps,\r\n onClose,\r\n ..._props\r\n }] = useInterface<any>(\"Alert\", rest, {\r\n variant: \"fill\"\r\n })\r\n color ??= \"default\"\r\n direction ??= \"row\"\r\n\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (variant) _p.variant = variant\r\n if (icon) _p.icon = icon\r\n if (color) _p.color = color\r\n if (direction) _p.direction = direction\r\n\r\n const p: any = useBreakpointProps(_p)\r\n\r\n title = p.title\r\n variant = p.variant\r\n icon = p.icon\r\n color = p.color\r\n direction = p.direction\r\n\r\n let isRow = direction === 'row'\r\n\r\n\r\n const template = useColorTemplate(color, variant)\r\n\r\n let iconsx = {\r\n fontSize: isRow ? 22 : 40,\r\n color: color === 'default' ? \"text.primary\" : template.primary.color\r\n }\r\n\r\n const icons: any = {\r\n \"info\": <InfoIcon sx={iconsx} />,\r\n \"warning\": <WarningIcon sx={iconsx} />,\r\n \"success\": <SuccessIcon sx={iconsx} />,\r\n \"danger\": <ErrorIcon sx={iconsx} />\r\n }\r\n\r\n let _icon = icons[icon] || icons[color]\r\n\r\n return (\r\n <Tag\r\n {..._props}\r\n baseClass=\"alert\"\r\n sxr={{\r\n justifyContent: \"flex-start\",\r\n position: \"relative\",\r\n radius: 1,\r\n px: isRow ? (_icon ? .5 : 2) : 3,\r\n py: isRow ? .5 : 3,\r\n flexDirection: \"column\",\r\n display: 'flex',\r\n ..._props?.sx\r\n }}\r\n {...template.primary}\r\n >\r\n {\r\n onClose && <IconButton\r\n color={color}\r\n variant={variant === 'fill' ? \"fill\" : \"text\"}\r\n size={25}\r\n sx={{\r\n position: \"absolute\",\r\n top: 5,\r\n right: 5\r\n }}\r\n onClick={onClose}\r\n className=\"alert-close-button\"\r\n >\r\n <IconClose fontSize={18} />\r\n </IconButton>\r\n }\r\n <Tag\r\n sx={{\r\n display: \"flex\",\r\n gap: 1,\r\n flexDirection: direction,\r\n alignItems: isRow ? \"flex-start\" : \"center\"\r\n }}\r\n baseClass=\"alert-container\"\r\n >\r\n {\r\n _icon && <Tag\r\n baseClass=\"alert-icon\"\r\n sxr={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n p: isRow ?
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor } from \"@xanui/core\"\r\nimport React, { isValidElement, ReactElement, useEffect, useRef } from \"react\"\r\nimport Text from \"../Text\"\r\nimport InfoIcon from '@xanui/icons/Info';\r\nimport WarningIcon from '@xanui/icons/Warning';\r\nimport SuccessIcon from '@xanui/icons/CheckCircle';\r\nimport ErrorIcon from '@xanui/icons/Cancel';\r\nimport IconClose from '@xanui/icons/Close';\r\nimport IconButton from \"../IconButton\";\r\nimport useAlert, { UseAlerProps } from \"../useAlert\";\r\n\r\n\r\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n onClose?: React.DOMAttributes<\"button\">['onClick'];\r\n}\r\n\r\nexport type AlertMesssageType = string | ReactElement | AlertProps\r\n\r\nconst Alert = ({ children, ...rest }: AlertProps) => {\r\n let [{\r\n title,\r\n variant,\r\n icon,\r\n color,\r\n direction,\r\n slotProps,\r\n onClose,\r\n ..._props\r\n }] = useInterface<any>(\"Alert\", rest, {\r\n variant: \"fill\"\r\n })\r\n color ??= \"default\"\r\n direction ??= \"row\"\r\n\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (variant) _p.variant = variant\r\n if (icon) _p.icon = icon\r\n if (color) _p.color = color\r\n if (direction) _p.direction = direction\r\n\r\n const p: any = useBreakpointProps(_p)\r\n\r\n title = p.title\r\n variant = p.variant\r\n icon = p.icon\r\n color = p.color\r\n direction = p.direction\r\n\r\n let isRow = direction === 'row'\r\n\r\n\r\n const template = useColorTemplate(color, variant)\r\n\r\n let iconsx = {\r\n fontSize: isRow ? 22 : 40,\r\n color: color === 'default' ? \"text.primary\" : template.primary.color\r\n }\r\n\r\n const icons: any = {\r\n \"info\": <InfoIcon sx={iconsx} />,\r\n \"warning\": <WarningIcon sx={iconsx} />,\r\n \"success\": <SuccessIcon sx={iconsx} />,\r\n \"danger\": <ErrorIcon sx={iconsx} />\r\n }\r\n\r\n let _icon = icons[icon] || icons[color]\r\n\r\n return (\r\n <Tag\r\n {..._props}\r\n baseClass=\"alert\"\r\n sxr={{\r\n justifyContent: \"flex-start\",\r\n position: \"relative\",\r\n radius: 1,\r\n px: isRow ? (_icon ? .5 : 2) : 3,\r\n py: isRow ? .5 : 3,\r\n flexDirection: \"column\",\r\n display: 'flex',\r\n ..._props?.sx\r\n }}\r\n {...template.primary}\r\n >\r\n {\r\n onClose && <IconButton\r\n color={color}\r\n variant={variant === 'fill' ? \"fill\" : \"text\"}\r\n size={25}\r\n sx={{\r\n position: \"absolute\",\r\n top: 5,\r\n right: 5\r\n }}\r\n onClick={onClose}\r\n className=\"alert-close-button\"\r\n >\r\n <IconClose fontSize={18} />\r\n </IconButton>\r\n }\r\n <Tag\r\n sx={{\r\n display: \"flex\",\r\n gap: 1,\r\n flexDirection: direction,\r\n alignItems: isRow ? \"flex-start\" : \"center\"\r\n }}\r\n baseClass=\"alert-container\"\r\n >\r\n {\r\n _icon && <Tag\r\n baseClass=\"alert-icon\"\r\n sxr={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n p: isRow ? .5 : 0,\r\n \"& svg\": {\r\n color: template.primary.color\r\n }\r\n }}\r\n >\r\n {_icon}\r\n </Tag>\r\n }\r\n <Tag\r\n baseClass=\"alert-content\"\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n flex: 1,\r\n color: template.primary.color,\r\n textAlign: isRow ? \"left\" : \"center\",\r\n gap: isRow ? 0 : 1\r\n }}\r\n >\r\n {title && <>\r\n {\r\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\r\n className=\"alert-titles\"\r\n variant=\"text\"\r\n sx={{\r\n fontWeight: 500,\r\n color: template.primary.color\r\n }}\r\n >{title}</Text>\r\n }\r\n </>}\r\n <Tag\r\n sxr={{\r\n font: \"button\",\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n </Tag>\r\n </Tag>\r\n </Tag>\r\n )\r\n}\r\n\r\nconst ActionAlert = (props: UseAlerProps) => {\r\n const ref = useRef<HTMLDivElement>(null);\r\n const alert = useAlert({\r\n ...props,\r\n slotProps: {\r\n ...props.slotProps,\r\n modal: {\r\n ...props.slotProps?.modal,\r\n slotProps: {\r\n ...props.slotProps?.modal?.slotProps,\r\n layer: {\r\n ...props.slotProps?.modal?.slotProps?.layer,\r\n portal: {\r\n ...props.slotProps?.modal?.slotProps?.layer?.portal,\r\n container: ref.current || undefined\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n useEffect(() => {\r\n if (props.open) {\r\n alert.open()\r\n } else {\r\n alert.close()\r\n }\r\n }, [props.open])\r\n return <Tag ref={ref}></Tag>\r\n}\r\n\r\nAlert.confirm = (props: UseAlerProps) => {\r\n const a = Renderar.render(ActionAlert as any, {\r\n open: true,\r\n ...props,\r\n slotProps: {\r\n ...props.slotProps,\r\n modal: {\r\n ...props.slotProps?.modal,\r\n onClosed: () => {\r\n a.unrender()\r\n if (props?.slotProps?.modal?.onClosed) {\r\n props.slotProps?.modal?.onClosed()\r\n }\r\n },\r\n }\r\n },\r\n })\r\n\r\n return {\r\n open: () => {\r\n a.updateProps({ open: true })\r\n },\r\n close: () => {\r\n a.updateProps({ open: false })\r\n },\r\n }\r\n}\r\n\r\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGH;AAQe;AACA;;AAOR;AACH;AAQzB;AAEA;;AACI;AACA;;AAqBI;;;;;;AAKJ;AACA;AACJ;AAEA;;AACI;;;AASgB;;;AAGJ;;;;;;;;;AAahB;;"}
|
package/Alert/index.js
CHANGED
|
@@ -62,7 +62,7 @@ const Alert = (_a) => {
|
|
|
62
62
|
display: "flex",
|
|
63
63
|
alignItems: "center",
|
|
64
64
|
justifyContent: "center",
|
|
65
|
-
p: isRow ?
|
|
65
|
+
p: isRow ? .5 : 0,
|
|
66
66
|
"& svg": {
|
|
67
67
|
color: template.primary.color
|
|
68
68
|
}
|
|
@@ -71,12 +71,10 @@ const Alert = (_a) => {
|
|
|
71
71
|
flexDirection: "column",
|
|
72
72
|
flex: 1,
|
|
73
73
|
color: template.primary.color,
|
|
74
|
-
py: 1,
|
|
75
74
|
textAlign: isRow ? "left" : "center",
|
|
76
75
|
gap: isRow ? 0 : 1
|
|
77
|
-
}, children: [title && jsx(Fragment, { children: isValidElement(title) ? jsx(Tag, { className: "alert-title", children: title }) : jsx(Text, { className: "alert-
|
|
78
|
-
|
|
79
|
-
fontWeight: "bold!important",
|
|
76
|
+
}, children: [title && jsx(Fragment, { children: isValidElement(title) ? jsx(Tag, { className: "alert-title", children: title }) : jsx(Text, { className: "alert-titles", variant: "text", sx: {
|
|
77
|
+
fontWeight: 500,
|
|
80
78
|
color: template.primary.color
|
|
81
79
|
}, children: title }) }), jsx(Tag, { sxr: {
|
|
82
80
|
font: "button",
|
package/Alert/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor } from \"@xanui/core\"\r\nimport React, { isValidElement, ReactElement, useEffect, useRef } from \"react\"\r\nimport Text from \"../Text\"\r\nimport InfoIcon from '@xanui/icons/Info';\r\nimport WarningIcon from '@xanui/icons/Warning';\r\nimport SuccessIcon from '@xanui/icons/CheckCircle';\r\nimport ErrorIcon from '@xanui/icons/Cancel';\r\nimport IconClose from '@xanui/icons/Close';\r\nimport IconButton from \"../IconButton\";\r\nimport useAlert, { UseAlerProps } from \"../useAlert\";\r\n\r\n\r\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n onClose?: React.DOMAttributes<\"button\">['onClick'];\r\n}\r\n\r\nexport type AlertMesssageType = string | ReactElement | AlertProps\r\n\r\nconst Alert = ({ children, ...rest }: AlertProps) => {\r\n let [{\r\n title,\r\n variant,\r\n icon,\r\n color,\r\n direction,\r\n slotProps,\r\n onClose,\r\n ..._props\r\n }] = useInterface<any>(\"Alert\", rest, {\r\n variant: \"fill\"\r\n })\r\n color ??= \"default\"\r\n direction ??= \"row\"\r\n\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (variant) _p.variant = variant\r\n if (icon) _p.icon = icon\r\n if (color) _p.color = color\r\n if (direction) _p.direction = direction\r\n\r\n const p: any = useBreakpointProps(_p)\r\n\r\n title = p.title\r\n variant = p.variant\r\n icon = p.icon\r\n color = p.color\r\n direction = p.direction\r\n\r\n let isRow = direction === 'row'\r\n\r\n\r\n const template = useColorTemplate(color, variant)\r\n\r\n let iconsx = {\r\n fontSize: isRow ? 22 : 40,\r\n color: color === 'default' ? \"text.primary\" : template.primary.color\r\n }\r\n\r\n const icons: any = {\r\n \"info\": <InfoIcon sx={iconsx} />,\r\n \"warning\": <WarningIcon sx={iconsx} />,\r\n \"success\": <SuccessIcon sx={iconsx} />,\r\n \"danger\": <ErrorIcon sx={iconsx} />\r\n }\r\n\r\n let _icon = icons[icon] || icons[color]\r\n\r\n return (\r\n <Tag\r\n {..._props}\r\n baseClass=\"alert\"\r\n sxr={{\r\n justifyContent: \"flex-start\",\r\n position: \"relative\",\r\n radius: 1,\r\n px: isRow ? (_icon ? .5 : 2) : 3,\r\n py: isRow ? .5 : 3,\r\n flexDirection: \"column\",\r\n display: 'flex',\r\n ..._props?.sx\r\n }}\r\n {...template.primary}\r\n >\r\n {\r\n onClose && <IconButton\r\n color={color}\r\n variant={variant === 'fill' ? \"fill\" : \"text\"}\r\n size={25}\r\n sx={{\r\n position: \"absolute\",\r\n top: 5,\r\n right: 5\r\n }}\r\n onClick={onClose}\r\n className=\"alert-close-button\"\r\n >\r\n <IconClose fontSize={18} />\r\n </IconButton>\r\n }\r\n <Tag\r\n sx={{\r\n display: \"flex\",\r\n gap: 1,\r\n flexDirection: direction,\r\n alignItems: isRow ? \"flex-start\" : \"center\"\r\n }}\r\n baseClass=\"alert-container\"\r\n >\r\n {\r\n _icon && <Tag\r\n baseClass=\"alert-icon\"\r\n sxr={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n p: isRow ?
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor } from \"@xanui/core\"\r\nimport React, { isValidElement, ReactElement, useEffect, useRef } from \"react\"\r\nimport Text from \"../Text\"\r\nimport InfoIcon from '@xanui/icons/Info';\r\nimport WarningIcon from '@xanui/icons/Warning';\r\nimport SuccessIcon from '@xanui/icons/CheckCircle';\r\nimport ErrorIcon from '@xanui/icons/Cancel';\r\nimport IconClose from '@xanui/icons/Close';\r\nimport IconButton from \"../IconButton\";\r\nimport useAlert, { UseAlerProps } from \"../useAlert\";\r\n\r\n\r\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n onClose?: React.DOMAttributes<\"button\">['onClick'];\r\n}\r\n\r\nexport type AlertMesssageType = string | ReactElement | AlertProps\r\n\r\nconst Alert = ({ children, ...rest }: AlertProps) => {\r\n let [{\r\n title,\r\n variant,\r\n icon,\r\n color,\r\n direction,\r\n slotProps,\r\n onClose,\r\n ..._props\r\n }] = useInterface<any>(\"Alert\", rest, {\r\n variant: \"fill\"\r\n })\r\n color ??= \"default\"\r\n direction ??= \"row\"\r\n\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (variant) _p.variant = variant\r\n if (icon) _p.icon = icon\r\n if (color) _p.color = color\r\n if (direction) _p.direction = direction\r\n\r\n const p: any = useBreakpointProps(_p)\r\n\r\n title = p.title\r\n variant = p.variant\r\n icon = p.icon\r\n color = p.color\r\n direction = p.direction\r\n\r\n let isRow = direction === 'row'\r\n\r\n\r\n const template = useColorTemplate(color, variant)\r\n\r\n let iconsx = {\r\n fontSize: isRow ? 22 : 40,\r\n color: color === 'default' ? \"text.primary\" : template.primary.color\r\n }\r\n\r\n const icons: any = {\r\n \"info\": <InfoIcon sx={iconsx} />,\r\n \"warning\": <WarningIcon sx={iconsx} />,\r\n \"success\": <SuccessIcon sx={iconsx} />,\r\n \"danger\": <ErrorIcon sx={iconsx} />\r\n }\r\n\r\n let _icon = icons[icon] || icons[color]\r\n\r\n return (\r\n <Tag\r\n {..._props}\r\n baseClass=\"alert\"\r\n sxr={{\r\n justifyContent: \"flex-start\",\r\n position: \"relative\",\r\n radius: 1,\r\n px: isRow ? (_icon ? .5 : 2) : 3,\r\n py: isRow ? .5 : 3,\r\n flexDirection: \"column\",\r\n display: 'flex',\r\n ..._props?.sx\r\n }}\r\n {...template.primary}\r\n >\r\n {\r\n onClose && <IconButton\r\n color={color}\r\n variant={variant === 'fill' ? \"fill\" : \"text\"}\r\n size={25}\r\n sx={{\r\n position: \"absolute\",\r\n top: 5,\r\n right: 5\r\n }}\r\n onClick={onClose}\r\n className=\"alert-close-button\"\r\n >\r\n <IconClose fontSize={18} />\r\n </IconButton>\r\n }\r\n <Tag\r\n sx={{\r\n display: \"flex\",\r\n gap: 1,\r\n flexDirection: direction,\r\n alignItems: isRow ? \"flex-start\" : \"center\"\r\n }}\r\n baseClass=\"alert-container\"\r\n >\r\n {\r\n _icon && <Tag\r\n baseClass=\"alert-icon\"\r\n sxr={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n p: isRow ? .5 : 0,\r\n \"& svg\": {\r\n color: template.primary.color\r\n }\r\n }}\r\n >\r\n {_icon}\r\n </Tag>\r\n }\r\n <Tag\r\n baseClass=\"alert-content\"\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n flex: 1,\r\n color: template.primary.color,\r\n textAlign: isRow ? \"left\" : \"center\",\r\n gap: isRow ? 0 : 1\r\n }}\r\n >\r\n {title && <>\r\n {\r\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\r\n className=\"alert-titles\"\r\n variant=\"text\"\r\n sx={{\r\n fontWeight: 500,\r\n color: template.primary.color\r\n }}\r\n >{title}</Text>\r\n }\r\n </>}\r\n <Tag\r\n sxr={{\r\n font: \"button\",\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n </Tag>\r\n </Tag>\r\n </Tag>\r\n )\r\n}\r\n\r\nconst ActionAlert = (props: UseAlerProps) => {\r\n const ref = useRef<HTMLDivElement>(null);\r\n const alert = useAlert({\r\n ...props,\r\n slotProps: {\r\n ...props.slotProps,\r\n modal: {\r\n ...props.slotProps?.modal,\r\n slotProps: {\r\n ...props.slotProps?.modal?.slotProps,\r\n layer: {\r\n ...props.slotProps?.modal?.slotProps?.layer,\r\n portal: {\r\n ...props.slotProps?.modal?.slotProps?.layer?.portal,\r\n container: ref.current || undefined\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n useEffect(() => {\r\n if (props.open) {\r\n alert.open()\r\n } else {\r\n alert.close()\r\n }\r\n }, [props.open])\r\n return <Tag ref={ref}></Tag>\r\n}\r\n\r\nAlert.confirm = (props: UseAlerProps) => {\r\n const a = Renderar.render(ActionAlert as any, {\r\n open: true,\r\n ...props,\r\n slotProps: {\r\n ...props.slotProps,\r\n modal: {\r\n ...props.slotProps?.modal,\r\n onClosed: () => {\r\n a.unrender()\r\n if (props?.slotProps?.modal?.onClosed) {\r\n props.slotProps?.modal?.onClosed()\r\n }\r\n },\r\n }\r\n },\r\n })\r\n\r\n return {\r\n open: () => {\r\n a.updateProps({ open: true })\r\n },\r\n close: () => {\r\n a.updateProps({ open: false })\r\n },\r\n }\r\n}\r\n\r\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGH;AAQe;AACA;;AAOR;AACH;AAQzB;AAEA;;AACI;AACA;;AAqBI;;;;;;AAKJ;AACA;AACJ;AAEA;;AACI;;;AASgB;;;AAGJ;;;;;;;;;AAahB;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { InputProps } from '../Input/index.js';
|
|
3
|
+
|
|
4
|
+
type InputNumberProps = InputProps;
|
|
5
|
+
declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<any>>;
|
|
6
|
+
|
|
7
|
+
export { InputNumber as default };
|
|
8
|
+
export type { InputNumberProps };
|
package/Menu/index.cjs
CHANGED
|
@@ -96,7 +96,7 @@ const placeMenu = (placement, menu, target) => {
|
|
|
96
96
|
const Menu = (_a) => {
|
|
97
97
|
var _b;
|
|
98
98
|
var { children, target } = _a, props = tslib.__rest(_a, ["children", "target"]);
|
|
99
|
-
let [{ onClickOutside, placement, zIndex, slotProps }] = core.useInterface("Menu", props, {});
|
|
99
|
+
let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = core.useInterface("Menu", props, {});
|
|
100
100
|
const _p = {};
|
|
101
101
|
if (placement)
|
|
102
102
|
_p.placement = placement;
|
|
@@ -139,10 +139,9 @@ const Menu = (_a) => {
|
|
|
139
139
|
if (e.target !== target) {
|
|
140
140
|
onClickOutside && onClickOutside(e);
|
|
141
141
|
}
|
|
142
|
-
}, ref: menuRef, sx: { position: "fixed", zIndex: 1500 + (zIndex || 0) }, children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: 200, easing: "fast", variant: "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onClosed: () => {
|
|
143
|
-
var _a, _b;
|
|
142
|
+
}, ref: menuRef, sx: { position: "fixed", zIndex: 1500 + (zIndex || 0) }, children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration !== null && duration !== void 0 ? duration : 200, easing: "fast", variant: variant !== null && variant !== void 0 ? variant : "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
|
|
144
143
|
setClosed(true);
|
|
145
|
-
|
|
144
|
+
onClosed && onClosed();
|
|
146
145
|
}, children: jsxRuntime.jsx(core.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 })) })) }) })));
|
|
147
146
|
};
|
|
148
147
|
|
package/Menu/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","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
|
|
1
|
+
{"version":3,"file":"index.cjs","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\r\n variant?: TransitionProps['variant'];\r\n duration?: TransitionProps['duration'];\r\n onOpen?: TransitionProps['onOpen'];\r\n onOpened?: TransitionProps['onOpened'];\r\n onClose?: TransitionProps['onClose'];\r\n onClosed?: TransitionProps['onClosed'];\r\n\r\n onClickOutside?: (e: MouseEvent) => void;\r\n\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, variant, duration, onOpen, onOpened, onClose, onClosed, 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={duration ?? 200}\r\n easing=\"fast\"\r\n variant={variant ?? \"grow\"}\r\n {...slotProps?.transition}\r\n open={isOpen}\r\n onOpen={onOpen}\r\n onOpened={onOpened}\r\n onClose={onClose}\r\n onClosed={() => {\r\n setClosed(true);\r\n onClosed && 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":";;;;;;;;;;AA0CA;;;;;;;;;;;;;;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;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
|
package/Menu/index.d.ts
CHANGED
|
@@ -9,6 +9,12 @@ type MenuProps = {
|
|
|
9
9
|
target?: HTMLElement;
|
|
10
10
|
placement?: useBreakpointPropsType<PlacementTypes>;
|
|
11
11
|
zIndex?: number;
|
|
12
|
+
variant?: TransitionProps['variant'];
|
|
13
|
+
duration?: TransitionProps['duration'];
|
|
14
|
+
onOpen?: TransitionProps['onOpen'];
|
|
15
|
+
onOpened?: TransitionProps['onOpened'];
|
|
16
|
+
onClose?: TransitionProps['onClose'];
|
|
17
|
+
onClosed?: TransitionProps['onClosed'];
|
|
12
18
|
onClickOutside?: (e: MouseEvent) => void;
|
|
13
19
|
slotProps?: {
|
|
14
20
|
transition?: Omit<TransitionProps, "open">;
|
package/Menu/index.js
CHANGED
|
@@ -94,7 +94,7 @@ const placeMenu = (placement, menu, target) => {
|
|
|
94
94
|
const Menu = (_a) => {
|
|
95
95
|
var _b;
|
|
96
96
|
var { children, target } = _a, props = __rest(_a, ["children", "target"]);
|
|
97
|
-
let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface("Menu", props, {});
|
|
97
|
+
let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface("Menu", props, {});
|
|
98
98
|
const _p = {};
|
|
99
99
|
if (placement)
|
|
100
100
|
_p.placement = placement;
|
|
@@ -137,10 +137,9 @@ const Menu = (_a) => {
|
|
|
137
137
|
if (e.target !== target) {
|
|
138
138
|
onClickOutside && onClickOutside(e);
|
|
139
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;
|
|
140
|
+
}, ref: menuRef, sx: { position: "fixed", zIndex: 1500 + (zIndex || 0) }, children: jsx(Transition, Object.assign({ duration: duration !== null && duration !== void 0 ? duration : 200, easing: "fast", variant: variant !== null && variant !== void 0 ? variant : "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
|
|
142
141
|
setClosed(true);
|
|
143
|
-
|
|
142
|
+
onClosed && onClosed();
|
|
144
143
|
}, 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
144
|
};
|
|
146
145
|
|
package/Menu/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","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
|
|
1
|
+
{"version":3,"file":"index.js","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\r\n variant?: TransitionProps['variant'];\r\n duration?: TransitionProps['duration'];\r\n onOpen?: TransitionProps['onOpen'];\r\n onOpened?: TransitionProps['onOpened'];\r\n onClose?: TransitionProps['onClose'];\r\n onClosed?: TransitionProps['onClosed'];\r\n\r\n onClickOutside?: (e: MouseEvent) => void;\r\n\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, variant, duration, onOpen, onOpened, onClose, onClosed, 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={duration ?? 200}\r\n easing=\"fast\"\r\n variant={variant ?? \"grow\"}\r\n {...slotProps?.transition}\r\n open={isOpen}\r\n onOpen={onOpen}\r\n onOpened={onOpened}\r\n onClose={onClose}\r\n onClosed={() => {\r\n setClosed(true);\r\n onClosed && 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":";;;;;;;;AA0CA;;;;;;;;;;;;;;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;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
|
package/Toast/index.cjs
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
var tslib = require('tslib');
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var client = require('react-dom/client');
|
|
7
6
|
var core = require('@xanui/core');
|
|
8
7
|
var React = require('react');
|
|
9
8
|
var index$1 = require('../Alert/index.cjs');
|
|
@@ -63,57 +62,73 @@ const formatPacement = (placement) => {
|
|
|
63
62
|
const ToastView = (props) => {
|
|
64
63
|
const [open, setOpen] = React.useState(true);
|
|
65
64
|
const [timer, setTimer] = React.useState(null);
|
|
66
|
-
const _a = props || {}, { placement = "bottom-right", content, closeable, onClosed } = _a, rest = tslib.__rest(_a, ["placement", "content", "closeable", "onClosed"]);
|
|
65
|
+
const _a = props || {}, { placement = "bottom-right", content, closeable, onClosed, autoColose = true, pauseOnHover = true, autoColoseDelay = 6000 } = _a, rest = tslib.__rest(_a, ["placement", "content", "closeable", "onClosed", "autoColose", "pauseOnHover", "autoColoseDelay"]);
|
|
67
66
|
const { transition } = formatPacement(placement);
|
|
68
67
|
return (jsxRuntime.jsx(core.Transition, { open: open, variant: transition, onClosed: () => {
|
|
69
68
|
onClosed();
|
|
70
69
|
}, onOpened: () => {
|
|
71
|
-
|
|
72
|
-
setOpen(false);
|
|
73
|
-
}, 6000));
|
|
74
|
-
}, children: jsxRuntime.jsx(index$1, Object.assign({ shadow: 2, variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
|
|
75
|
-
clearTimeout(timer);
|
|
76
|
-
}, onMouseLeave: () => {
|
|
70
|
+
if (autoColose) {
|
|
77
71
|
setTimer(setTimeout(() => {
|
|
78
72
|
setOpen(false);
|
|
79
|
-
},
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
|
|
73
|
+
}, autoColoseDelay));
|
|
74
|
+
}
|
|
75
|
+
}, children: jsxRuntime.jsx(index$1, Object.assign({ variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
|
|
76
|
+
(autoColose && pauseOnHover) && clearTimeout(timer);
|
|
77
|
+
}, onMouseLeave: () => {
|
|
78
|
+
if (autoColose && pauseOnHover) {
|
|
79
|
+
setTimer(setTimeout(() => {
|
|
80
|
+
setOpen(false);
|
|
81
|
+
}, autoColoseDelay));
|
|
82
|
+
}
|
|
83
|
+
}, onClose: closeable ? () => setOpen(false) : undefined, children: content })) }));
|
|
84
|
+
};
|
|
85
|
+
const State = {
|
|
86
|
+
// "top-left": [],
|
|
87
|
+
// "top-center": [],
|
|
88
|
+
// "top-right": [],
|
|
89
|
+
// "bottom-left": [],
|
|
90
|
+
// "bottom-center": [],
|
|
91
|
+
// "bottom-right": []
|
|
92
|
+
};
|
|
93
|
+
const RenderToasts = () => {
|
|
94
|
+
let views = [];
|
|
95
|
+
for (let placement in State) {
|
|
96
|
+
const items = State[placement];
|
|
97
|
+
const { sx } = formatPacement(placement);
|
|
98
|
+
if (!items.length)
|
|
99
|
+
continue;
|
|
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
|
+
return (jsxRuntime.jsx(ToastView, Object.assign({}, itemprops, { onClosed: () => {
|
|
102
|
+
let _items = items.splice(index, 1);
|
|
103
|
+
if (!_items.length) {
|
|
104
|
+
delete State[placement];
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
State[placement] = _items;
|
|
108
|
+
}
|
|
109
|
+
if (!Object.keys(State).length) {
|
|
110
|
+
core.Renderar.unrender(RenderToasts);
|
|
111
|
+
}
|
|
112
|
+
} }), `toast-view-${index}`));
|
|
113
|
+
}) }, `toast-render-${placement}`));
|
|
114
|
+
}
|
|
115
|
+
return views;
|
|
83
116
|
};
|
|
84
117
|
const Toast = (props) => {
|
|
85
|
-
|
|
86
|
-
|
|
118
|
+
props = React.isValidElement(props) ? { content: props } : props;
|
|
119
|
+
let { placement = "bottom-right" } = (props || {});
|
|
120
|
+
if (Object.keys(State).length) {
|
|
121
|
+
if (!State[placement])
|
|
122
|
+
State[placement] = [];
|
|
123
|
+
State[placement].push(props);
|
|
124
|
+
core.Renderar.updateProps(RenderToasts, {});
|
|
87
125
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
const appRoot = core.useAppRootElement();
|
|
94
|
-
if (!wrapperEle) {
|
|
95
|
-
wrapperEle = document.createElement('div');
|
|
96
|
-
wrapperEle.className = wrapperContainerClassName;
|
|
97
|
-
appRoot.appendChild(wrapperEle);
|
|
98
|
-
const wrapperRoot = client.createRoot(wrapperEle);
|
|
99
|
-
wrapperRoot.render(jsxRuntime.jsx(index, { p: 1, overflow: "hidden", className: wrapperClassName, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 320, height: "auto", maxHeight: "100vh" }, sx) }));
|
|
126
|
+
else {
|
|
127
|
+
if (!State[placement])
|
|
128
|
+
State[placement] = [];
|
|
129
|
+
State[placement].push(props);
|
|
130
|
+
core.Renderar.render(RenderToasts);
|
|
100
131
|
}
|
|
101
|
-
setTimeout(() => {
|
|
102
|
-
const wrapper = document.querySelector(`.${wrapperClassName}`);
|
|
103
|
-
const div = document.createElement('div');
|
|
104
|
-
wrapper.appendChild(div);
|
|
105
|
-
const root = client.createRoot(div);
|
|
106
|
-
root.render(jsxRuntime.jsx(ToastView, Object.assign({ placement: placement, content: content, closeable: closeable }, rest, { onClosed: () => {
|
|
107
|
-
root.unmount();
|
|
108
|
-
wrapper.removeChild(div);
|
|
109
|
-
if (wrapper.children.length === 0) {
|
|
110
|
-
const container = document.querySelector(`.${wrapperContainerClassName}`);
|
|
111
|
-
if (container) {
|
|
112
|
-
appRoot.removeChild(container);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
} })));
|
|
116
|
-
}, 5);
|
|
117
132
|
};
|
|
118
133
|
|
|
119
134
|
module.exports = Toast;
|
package/Toast/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\r\nimport React, { ReactElement } from \"react\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport Scrollbar from \"../Scrollbar\";\r\n\r\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\r\n\r\nexport type UseToastProps = {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n content?: AlertProps['children'];\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n placement?: PlacementType;\r\n closeable?: useBreakpointPropsType<boolean>;\r\n autoColose?: boolean;\r\n autoColoseDelay?: number;\r\n pauseOnHover?: boolean;\r\n}\r\n\r\n\r\nconst formatPacement = (placement: PlacementType) => {\r\n let sx: any = {}\r\n let transition: any = \"\"\r\n switch (placement) {\r\n case \"top-left\":\r\n sx = {\r\n top: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"top-right\":\r\n sx = {\r\n top: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"top-center\":\r\n sx = {\r\n top: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeDown\"\r\n break;\r\n case \"bottom-right\":\r\n sx = {\r\n bottom: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"bottom-left\":\r\n sx = {\r\n bottom: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"bottom-center\":\r\n sx = {\r\n bottom: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeUp\"\r\n break;\r\n }\r\n return { sx, transition }\r\n}\r\n\r\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\r\n const [open, setOpen] = React.useState(true)\r\n const [timer, setTimer] = React.useState<any>(null)\r\n const {\r\n placement = \"bottom-right\",\r\n content,\r\n closeable,\r\n onClosed,\r\n autoColose = true,\r\n pauseOnHover = true,\r\n autoColoseDelay = 6000,\r\n ...rest\r\n } = props || {}\r\n\r\n const { transition } = formatPacement(placement)\r\n\r\n return (<Transition\r\n open={open}\r\n variant={transition}\r\n onClosed={() => {\r\n onClosed()\r\n }}\r\n onOpened={() => {\r\n if (autoColose) {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, autoColoseDelay))\r\n }\r\n }}\r\n >\r\n <Alert\r\n variant=\"fill\"\r\n color=\"brand\"\r\n {...rest as any}\r\n mode=\"item\"\r\n mb={1}\r\n onMouseEnter={() => {\r\n (autoColose && pauseOnHover) && clearTimeout(timer)\r\n }}\r\n onMouseLeave={() => {\r\n if (autoColose && pauseOnHover) {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, autoColoseDelay))\r\n }\r\n }}\r\n onClose={closeable ? () => setOpen(false) : undefined}\r\n >{content}</Alert>\r\n </Transition>)\r\n}\r\n\r\nconst State: Record<PlacementType, UseToastProps[]> = {\r\n // \"top-left\": [],\r\n // \"top-center\": [],\r\n // \"top-right\": [],\r\n // \"bottom-left\": [],\r\n // \"bottom-center\": [],\r\n // \"bottom-right\": []\r\n} as any\r\n\r\nconst RenderToasts = () => {\r\n let views = []\r\n\r\n for (let placement in State) {\r\n const items = (State as any)[placement]\r\n const { sx } = formatPacement(placement as any)\r\n if (!items.length) continue;\r\n views.push(\r\n <Scrollbar\r\n key={`toast-render-${placement}`}\r\n overflow=\"hidden\"\r\n p={1}\r\n sx={{\r\n position: \"fixed\",\r\n zIndex: 99999999,\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n flexDirection: \"column\",\r\n width: 280,\r\n height: \"auto\",\r\n maxHeight: \"100vh\",\r\n ...sx\r\n }}\r\n >\r\n\r\n {items.map((itemprops: UseToastProps, index: number) => {\r\n return (\r\n <ToastView\r\n key={`toast-view-${index}`}\r\n {...itemprops}\r\n onClosed={() => {\r\n let _items = items.splice(index, 1)\r\n if (!_items.length) {\r\n delete (State as any)[placement]\r\n } else {\r\n (State as any)[placement] = _items\r\n }\r\n if (!Object.keys(State).length) {\r\n Renderar.unrender(RenderToasts)\r\n }\r\n }}\r\n />\r\n )\r\n })}\r\n </Scrollbar >\r\n )\r\n }\r\n\r\n return views\r\n}\r\n\r\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\r\n props = React.isValidElement(props) ? { content: props } : props\r\n let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\r\n\r\n if (Object.keys(State).length) {\r\n if (!State[placement]) State[placement] = []\r\n State[placement].push(props as any)\r\n Renderar.updateProps(RenderToasts, {})\r\n } else {\r\n if (!State[placement]) State[placement] = []\r\n State[placement].push(props as any)\r\n Renderar.render(RenderToasts)\r\n }\r\n}\r\n\r\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;;;;;;;AA4BwB;AACI;;;AAEC;;;AAGD;;AAER;AAGZ;;AAKZ;AACJ;AAEA;AACI;;;AAII;AAAuB;;AAEvB;;;AAEA;AAAuB;;AAEvB;;AAER;;"}
|
package/Toast/index.d.ts
CHANGED
|
@@ -11,8 +11,11 @@ type UseToastProps = {
|
|
|
11
11
|
icon?: useBreakpointPropsType<"info" | "warning" | "success" | "error" | false | ReactElement>;
|
|
12
12
|
placement?: PlacementType;
|
|
13
13
|
closeable?: useBreakpointPropsType<boolean>;
|
|
14
|
+
autoColose?: boolean;
|
|
15
|
+
autoColoseDelay?: number;
|
|
16
|
+
pauseOnHover?: boolean;
|
|
14
17
|
};
|
|
15
|
-
declare const Toast: (props?:
|
|
18
|
+
declare const Toast: (props?: UseToastProps["content"] | UseToastProps) => void;
|
|
16
19
|
|
|
17
20
|
export { Toast as default };
|
|
18
21
|
export type { UseToastProps };
|
package/Toast/index.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { __rest } from 'tslib';
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
import {
|
|
5
|
-
import { useAppRootElement, Transition } from '@xanui/core';
|
|
4
|
+
import { Renderar, Transition } from '@xanui/core';
|
|
6
5
|
import React from 'react';
|
|
7
6
|
import Alert from '../Alert/index.js';
|
|
8
7
|
import Scrollbar from '../Scrollbar/index.js';
|
|
@@ -61,57 +60,73 @@ const formatPacement = (placement) => {
|
|
|
61
60
|
const ToastView = (props) => {
|
|
62
61
|
const [open, setOpen] = React.useState(true);
|
|
63
62
|
const [timer, setTimer] = React.useState(null);
|
|
64
|
-
const _a = props || {}, { placement = "bottom-right", content, closeable, onClosed } = _a, rest = __rest(_a, ["placement", "content", "closeable", "onClosed"]);
|
|
63
|
+
const _a = props || {}, { placement = "bottom-right", content, closeable, onClosed, autoColose = true, pauseOnHover = true, autoColoseDelay = 6000 } = _a, rest = __rest(_a, ["placement", "content", "closeable", "onClosed", "autoColose", "pauseOnHover", "autoColoseDelay"]);
|
|
65
64
|
const { transition } = formatPacement(placement);
|
|
66
65
|
return (jsx(Transition, { open: open, variant: transition, onClosed: () => {
|
|
67
66
|
onClosed();
|
|
68
67
|
}, onOpened: () => {
|
|
69
|
-
|
|
70
|
-
setOpen(false);
|
|
71
|
-
}, 6000));
|
|
72
|
-
}, children: jsx(Alert, Object.assign({ shadow: 2, variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
|
|
73
|
-
clearTimeout(timer);
|
|
74
|
-
}, onMouseLeave: () => {
|
|
68
|
+
if (autoColose) {
|
|
75
69
|
setTimer(setTimeout(() => {
|
|
76
70
|
setOpen(false);
|
|
77
|
-
},
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
|
|
71
|
+
}, autoColoseDelay));
|
|
72
|
+
}
|
|
73
|
+
}, children: jsx(Alert, Object.assign({ variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
|
|
74
|
+
(autoColose && pauseOnHover) && clearTimeout(timer);
|
|
75
|
+
}, onMouseLeave: () => {
|
|
76
|
+
if (autoColose && pauseOnHover) {
|
|
77
|
+
setTimer(setTimeout(() => {
|
|
78
|
+
setOpen(false);
|
|
79
|
+
}, autoColoseDelay));
|
|
80
|
+
}
|
|
81
|
+
}, onClose: closeable ? () => setOpen(false) : undefined, children: content })) }));
|
|
82
|
+
};
|
|
83
|
+
const State = {
|
|
84
|
+
// "top-left": [],
|
|
85
|
+
// "top-center": [],
|
|
86
|
+
// "top-right": [],
|
|
87
|
+
// "bottom-left": [],
|
|
88
|
+
// "bottom-center": [],
|
|
89
|
+
// "bottom-right": []
|
|
90
|
+
};
|
|
91
|
+
const RenderToasts = () => {
|
|
92
|
+
let views = [];
|
|
93
|
+
for (let placement in State) {
|
|
94
|
+
const items = State[placement];
|
|
95
|
+
const { sx } = formatPacement(placement);
|
|
96
|
+
if (!items.length)
|
|
97
|
+
continue;
|
|
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
|
+
return (jsx(ToastView, Object.assign({}, itemprops, { onClosed: () => {
|
|
100
|
+
let _items = items.splice(index, 1);
|
|
101
|
+
if (!_items.length) {
|
|
102
|
+
delete State[placement];
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
State[placement] = _items;
|
|
106
|
+
}
|
|
107
|
+
if (!Object.keys(State).length) {
|
|
108
|
+
Renderar.unrender(RenderToasts);
|
|
109
|
+
}
|
|
110
|
+
} }), `toast-view-${index}`));
|
|
111
|
+
}) }, `toast-render-${placement}`));
|
|
112
|
+
}
|
|
113
|
+
return views;
|
|
81
114
|
};
|
|
82
115
|
const Toast = (props) => {
|
|
83
|
-
|
|
84
|
-
|
|
116
|
+
props = React.isValidElement(props) ? { content: props } : props;
|
|
117
|
+
let { placement = "bottom-right" } = (props || {});
|
|
118
|
+
if (Object.keys(State).length) {
|
|
119
|
+
if (!State[placement])
|
|
120
|
+
State[placement] = [];
|
|
121
|
+
State[placement].push(props);
|
|
122
|
+
Renderar.updateProps(RenderToasts, {});
|
|
85
123
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
const appRoot = useAppRootElement();
|
|
92
|
-
if (!wrapperEle) {
|
|
93
|
-
wrapperEle = document.createElement('div');
|
|
94
|
-
wrapperEle.className = wrapperContainerClassName;
|
|
95
|
-
appRoot.appendChild(wrapperEle);
|
|
96
|
-
const wrapperRoot = createRoot(wrapperEle);
|
|
97
|
-
wrapperRoot.render(jsx(Scrollbar, { p: 1, overflow: "hidden", className: wrapperClassName, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 320, height: "auto", maxHeight: "100vh" }, sx) }));
|
|
124
|
+
else {
|
|
125
|
+
if (!State[placement])
|
|
126
|
+
State[placement] = [];
|
|
127
|
+
State[placement].push(props);
|
|
128
|
+
Renderar.render(RenderToasts);
|
|
98
129
|
}
|
|
99
|
-
setTimeout(() => {
|
|
100
|
-
const wrapper = document.querySelector(`.${wrapperClassName}`);
|
|
101
|
-
const div = document.createElement('div');
|
|
102
|
-
wrapper.appendChild(div);
|
|
103
|
-
const root = createRoot(div);
|
|
104
|
-
root.render(jsx(ToastView, Object.assign({ placement: placement, content: content, closeable: closeable }, rest, { onClosed: () => {
|
|
105
|
-
root.unmount();
|
|
106
|
-
wrapper.removeChild(div);
|
|
107
|
-
if (wrapper.children.length === 0) {
|
|
108
|
-
const container = document.querySelector(`.${wrapperContainerClassName}`);
|
|
109
|
-
if (container) {
|
|
110
|
-
appRoot.removeChild(container);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
} })));
|
|
114
|
-
}, 5);
|
|
115
130
|
};
|
|
116
131
|
|
|
117
132
|
export { Toast as default };
|
package/Toast/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\r\nimport React, { ReactElement } from \"react\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport Scrollbar from \"../Scrollbar\";\r\n\r\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\r\n\r\nexport type UseToastProps = {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n content?: AlertProps['children'];\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n placement?: PlacementType;\r\n closeable?: useBreakpointPropsType<boolean>;\r\n autoColose?: boolean;\r\n autoColoseDelay?: number;\r\n pauseOnHover?: boolean;\r\n}\r\n\r\n\r\nconst formatPacement = (placement: PlacementType) => {\r\n let sx: any = {}\r\n let transition: any = \"\"\r\n switch (placement) {\r\n case \"top-left\":\r\n sx = {\r\n top: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"top-right\":\r\n sx = {\r\n top: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"top-center\":\r\n sx = {\r\n top: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeDown\"\r\n break;\r\n case \"bottom-right\":\r\n sx = {\r\n bottom: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"bottom-left\":\r\n sx = {\r\n bottom: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"bottom-center\":\r\n sx = {\r\n bottom: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeUp\"\r\n break;\r\n }\r\n return { sx, transition }\r\n}\r\n\r\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\r\n const [open, setOpen] = React.useState(true)\r\n const [timer, setTimer] = React.useState<any>(null)\r\n const {\r\n placement = \"bottom-right\",\r\n content,\r\n closeable,\r\n onClosed,\r\n autoColose = true,\r\n pauseOnHover = true,\r\n autoColoseDelay = 6000,\r\n ...rest\r\n } = props || {}\r\n\r\n const { transition } = formatPacement(placement)\r\n\r\n return (<Transition\r\n open={open}\r\n variant={transition}\r\n onClosed={() => {\r\n onClosed()\r\n }}\r\n onOpened={() => {\r\n if (autoColose) {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, autoColoseDelay))\r\n }\r\n }}\r\n >\r\n <Alert\r\n variant=\"fill\"\r\n color=\"brand\"\r\n {...rest as any}\r\n mode=\"item\"\r\n mb={1}\r\n onMouseEnter={() => {\r\n (autoColose && pauseOnHover) && clearTimeout(timer)\r\n }}\r\n onMouseLeave={() => {\r\n if (autoColose && pauseOnHover) {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, autoColoseDelay))\r\n }\r\n }}\r\n onClose={closeable ? () => setOpen(false) : undefined}\r\n >{content}</Alert>\r\n </Transition>)\r\n}\r\n\r\nconst State: Record<PlacementType, UseToastProps[]> = {\r\n // \"top-left\": [],\r\n // \"top-center\": [],\r\n // \"top-right\": [],\r\n // \"bottom-left\": [],\r\n // \"bottom-center\": [],\r\n // \"bottom-right\": []\r\n} as any\r\n\r\nconst RenderToasts = () => {\r\n let views = []\r\n\r\n for (let placement in State) {\r\n const items = (State as any)[placement]\r\n const { sx } = formatPacement(placement as any)\r\n if (!items.length) continue;\r\n views.push(\r\n <Scrollbar\r\n key={`toast-render-${placement}`}\r\n overflow=\"hidden\"\r\n p={1}\r\n sx={{\r\n position: \"fixed\",\r\n zIndex: 99999999,\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n flexDirection: \"column\",\r\n width: 280,\r\n height: \"auto\",\r\n maxHeight: \"100vh\",\r\n ...sx\r\n }}\r\n >\r\n\r\n {items.map((itemprops: UseToastProps, index: number) => {\r\n return (\r\n <ToastView\r\n key={`toast-view-${index}`}\r\n {...itemprops}\r\n onClosed={() => {\r\n let _items = items.splice(index, 1)\r\n if (!_items.length) {\r\n delete (State as any)[placement]\r\n } else {\r\n (State as any)[placement] = _items\r\n }\r\n if (!Object.keys(State).length) {\r\n Renderar.unrender(RenderToasts)\r\n }\r\n }}\r\n />\r\n )\r\n })}\r\n </Scrollbar >\r\n )\r\n }\r\n\r\n return views\r\n}\r\n\r\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\r\n props = React.isValidElement(props) ? { content: props } : props\r\n let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\r\n\r\n if (Object.keys(State).length) {\r\n if (!State[placement]) State[placement] = []\r\n State[placement].push(props as any)\r\n Renderar.updateProps(RenderToasts, {})\r\n } else {\r\n if (!State[placement]) State[placement] = []\r\n State[placement].push(props as any)\r\n Renderar.render(RenderToasts)\r\n }\r\n}\r\n\r\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;;;;;;;AA4BwB;AACI;;;AAEC;;;AAGD;;AAER;AAGZ;;AAKZ;AACJ;AAEA;AACI;;;AAII;AAAuB;;AAEvB;;;AAEA;AAAuB;;AAEvB;;AAER;;"}
|
package/index.cjs
CHANGED
|
@@ -26,37 +26,38 @@ var index$m = require('./GridItem/index.cjs');
|
|
|
26
26
|
var index$n = require('./IconButton/index.cjs');
|
|
27
27
|
var index$o = require('./Image/index.cjs');
|
|
28
28
|
var index$p = require('./Input/index.cjs');
|
|
29
|
-
var index$q = require('./
|
|
30
|
-
var index$r = require('./
|
|
31
|
-
var index$s = require('./
|
|
32
|
-
var index$t = require('./
|
|
33
|
-
var index$u = require('./
|
|
34
|
-
var index$v = require('./
|
|
35
|
-
var index$w = require('./
|
|
36
|
-
var index$x = require('./
|
|
37
|
-
var index$y = require('./
|
|
38
|
-
var index$z = require('./
|
|
39
|
-
var index$A = require('./
|
|
40
|
-
var index$B = require('./
|
|
41
|
-
var index$C = require('./
|
|
42
|
-
var index$D = require('./
|
|
43
|
-
var index$E = require('./
|
|
44
|
-
var index$F = require('./
|
|
45
|
-
var index$G = require('./
|
|
46
|
-
var index$H = require('./
|
|
47
|
-
var index$I = require('./
|
|
48
|
-
var index$J = require('./
|
|
49
|
-
var index$K = require('./
|
|
50
|
-
var index$L = require('./
|
|
51
|
-
var index$M = require('./
|
|
52
|
-
var index$N = require('./
|
|
53
|
-
var index$O = require('./
|
|
54
|
-
var index$P = require('./
|
|
55
|
-
var index$Q = require('./
|
|
56
|
-
var index$R = require('./
|
|
57
|
-
var index$S = require('./
|
|
58
|
-
var index$T = require('./
|
|
59
|
-
var index$U = require('./
|
|
29
|
+
var index$q = require('./InputNumber/index.cjs');
|
|
30
|
+
var index$r = require('./Label/index.cjs');
|
|
31
|
+
var index$s = require('./Layer/index.cjs');
|
|
32
|
+
var index$t = require('./LineProgress/index.cjs');
|
|
33
|
+
var index$u = require('./List/index.cjs');
|
|
34
|
+
var index$v = require('./ListItem/index.cjs');
|
|
35
|
+
var index$w = require('./LoadingBox/index.cjs');
|
|
36
|
+
var index$x = require('./Menu/index.cjs');
|
|
37
|
+
var index$y = require('./Modal/index.cjs');
|
|
38
|
+
var index$z = require('./NoSSR/index.cjs');
|
|
39
|
+
var index$A = require('./Option/index.cjs');
|
|
40
|
+
var index$B = require('./Paper/index.cjs');
|
|
41
|
+
var index$C = require('./Portal/index.cjs');
|
|
42
|
+
var index$D = require('./Radio/index.cjs');
|
|
43
|
+
var index$E = require('./Scrollbar/index.cjs');
|
|
44
|
+
var index$F = require('./Select/index.cjs');
|
|
45
|
+
var index$G = require('./Stack/index.cjs');
|
|
46
|
+
var index$H = require('./Switch/index.cjs');
|
|
47
|
+
var index$I = require('./Tab/index.cjs');
|
|
48
|
+
var index$J = require('./Table/index.cjs');
|
|
49
|
+
var index$K = require('./TableBody/index.cjs');
|
|
50
|
+
var index$L = require('./TableCell/index.cjs');
|
|
51
|
+
var index$M = require('./TableFooter/index.cjs');
|
|
52
|
+
var index$N = require('./TableHead/index.cjs');
|
|
53
|
+
var index$O = require('./TablePagination/index.cjs');
|
|
54
|
+
var index$P = require('./TableRow/index.cjs');
|
|
55
|
+
var index$Q = require('./Tabs/index.cjs');
|
|
56
|
+
var index$R = require('./Text/index.cjs');
|
|
57
|
+
var index$S = require('./Toast/index.cjs');
|
|
58
|
+
var index$T = require('./Tooltip/index.cjs');
|
|
59
|
+
var index$U = require('./useCorner/index.cjs');
|
|
60
|
+
var index$V = require('./ViewBox/index.cjs');
|
|
60
61
|
var SelectFilter = require('./DataFilter/options/SelectFilter.cjs');
|
|
61
62
|
var MultiSelectFilter = require('./DataFilter/options/MultiSelectFilter.cjs');
|
|
62
63
|
var NumberFilter = require('./DataFilter/options/NumberFilter.cjs');
|
|
@@ -93,37 +94,38 @@ exports.GridItem = index$m;
|
|
|
93
94
|
exports.IconButton = index$n;
|
|
94
95
|
exports.Image = index$o;
|
|
95
96
|
exports.Input = index$p;
|
|
96
|
-
exports.
|
|
97
|
-
exports.
|
|
98
|
-
exports.
|
|
99
|
-
exports.
|
|
100
|
-
exports.
|
|
101
|
-
exports.
|
|
102
|
-
exports.
|
|
103
|
-
exports.
|
|
104
|
-
exports.
|
|
105
|
-
exports.
|
|
106
|
-
exports.
|
|
107
|
-
exports.
|
|
108
|
-
exports.
|
|
109
|
-
exports.
|
|
110
|
-
exports.
|
|
111
|
-
exports.
|
|
112
|
-
exports.
|
|
113
|
-
exports.
|
|
114
|
-
exports.
|
|
115
|
-
exports.
|
|
116
|
-
exports.
|
|
117
|
-
exports.
|
|
118
|
-
exports.
|
|
119
|
-
exports.
|
|
120
|
-
exports.
|
|
121
|
-
exports.
|
|
122
|
-
exports.
|
|
123
|
-
exports.
|
|
124
|
-
exports.
|
|
125
|
-
exports.
|
|
126
|
-
exports.
|
|
97
|
+
exports.InputNumber = index$q;
|
|
98
|
+
exports.Label = index$r;
|
|
99
|
+
exports.Layer = index$s;
|
|
100
|
+
exports.LineProgress = index$t;
|
|
101
|
+
exports.List = index$u;
|
|
102
|
+
exports.ListItem = index$v;
|
|
103
|
+
exports.LoadingBox = index$w;
|
|
104
|
+
exports.Menu = index$x;
|
|
105
|
+
exports.Modal = index$y;
|
|
106
|
+
exports.NoSSR = index$z;
|
|
107
|
+
exports.Option = index$A;
|
|
108
|
+
exports.Paper = index$B;
|
|
109
|
+
exports.Portal = index$C;
|
|
110
|
+
exports.Radio = index$D;
|
|
111
|
+
exports.Scrollbar = index$E;
|
|
112
|
+
exports.Select = index$F;
|
|
113
|
+
exports.Stack = index$G;
|
|
114
|
+
exports.Switch = index$H;
|
|
115
|
+
exports.Tab = index$I;
|
|
116
|
+
exports.Table = index$J;
|
|
117
|
+
exports.TableBody = index$K;
|
|
118
|
+
exports.TableCell = index$L;
|
|
119
|
+
exports.TableFooter = index$M;
|
|
120
|
+
exports.TableHead = index$N;
|
|
121
|
+
exports.TablePagination = index$O;
|
|
122
|
+
exports.TableRow = index$P;
|
|
123
|
+
exports.Tabs = index$Q;
|
|
124
|
+
exports.Text = index$R;
|
|
125
|
+
exports.Toast = index$S;
|
|
126
|
+
exports.Tooltip = index$T;
|
|
127
|
+
exports.useCorner = index$U;
|
|
128
|
+
exports.ViewBox = index$V;
|
|
127
129
|
exports.SelectFilter = SelectFilter;
|
|
128
130
|
exports.MultiSelectFilter = MultiSelectFilter;
|
|
129
131
|
exports.NumberFilter = NumberFilter;
|
package/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/index.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ export { default as GridItem } from './GridItem/index.js';
|
|
|
24
24
|
export { default as IconButton } from './IconButton/index.js';
|
|
25
25
|
export { default as Image } from './Image/index.js';
|
|
26
26
|
export { default as Input } from './Input/index.js';
|
|
27
|
+
export { default as InputNumber } from './InputNumber/index.js';
|
|
27
28
|
export { default as Label } from './Label/index.js';
|
|
28
29
|
export { default as Layer } from './Layer/index.js';
|
|
29
30
|
export { default as LineProgress } from './LineProgress/index.js';
|
package/index.js
CHANGED
|
@@ -24,6 +24,7 @@ export { default as GridItem } from './GridItem/index.js';
|
|
|
24
24
|
export { default as IconButton } from './IconButton/index.js';
|
|
25
25
|
export { default as Image } from './Image/index.js';
|
|
26
26
|
export { default as Input } from './Input/index.js';
|
|
27
|
+
export { default as InputNumber } from './InputNumber/index.js';
|
|
27
28
|
export { default as Label } from './Label/index.js';
|
|
28
29
|
export { default as Layer } from './Layer/index.js';
|
|
29
30
|
export { default as LineProgress } from './LineProgress/index.js';
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xanui/ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.57",
|
|
4
4
|
"description": "Xanui - A React Component Library",
|
|
5
5
|
"private": false,
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@xanui/core": "^1.2.
|
|
7
|
+
"@xanui/core": "^1.2.52",
|
|
8
8
|
"@xanui/icons": "^1.1.12",
|
|
9
9
|
"pretty-class": "^1.0.8",
|
|
10
|
-
"react-state-bucket": "^1.2.
|
|
10
|
+
"react-state-bucket": "^1.2.17"
|
|
11
11
|
},
|
|
12
12
|
"keywords": [],
|
|
13
13
|
"sideEffects": false,
|