@xanui/ui 1.1.40 → 1.1.41
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/Accordion/index.cjs.map +1 -1
- package/Accordion/index.js.map +1 -1
- package/Alert/index.cjs.map +1 -1
- package/Alert/index.js.map +1 -1
- package/Button/index.cjs.map +1 -1
- package/Button/index.js.map +1 -1
- package/Calendar/index.cjs.map +1 -1
- package/Calendar/index.js.map +1 -1
- package/CalendarInput/index.cjs.map +1 -1
- package/CalendarInput/index.js.map +1 -1
- package/Checkbox/index.cjs.map +1 -1
- package/Checkbox/index.js.map +1 -1
- package/CircleProgress/index.cjs.map +1 -1
- package/CircleProgress/index.js.map +1 -1
- package/ClickOutside/index.cjs.map +1 -1
- package/ClickOutside/index.js.map +1 -1
- package/Datatable/FilterBox.cjs.map +1 -1
- package/Datatable/FilterBox.js.map +1 -1
- package/Datatable/Row.cjs.map +1 -1
- package/Datatable/Row.js.map +1 -1
- package/Datatable/Table.cjs.map +1 -1
- package/Datatable/Table.js.map +1 -1
- package/Datatable/TableHead.cjs.map +1 -1
- package/Datatable/TableHead.js.map +1 -1
- package/Datatable/index.cjs.map +1 -1
- package/Datatable/index.js.map +1 -1
- package/Drawer/index.cjs.map +1 -1
- package/Drawer/index.js.map +1 -1
- package/Form/index.cjs.map +1 -1
- package/Form/index.js.map +1 -1
- package/IconButton/index.cjs.map +1 -1
- package/IconButton/index.js.map +1 -1
- package/Image/index.cjs.map +1 -1
- package/Image/index.js.map +1 -1
- package/Input/index.cjs.map +1 -1
- package/Input/index.js.map +1 -1
- package/Layer/index.cjs.map +1 -1
- package/Layer/index.js.map +1 -1
- package/LineProgress/index.cjs.map +1 -1
- package/LineProgress/index.js.map +1 -1
- package/Menu/index.cjs.map +1 -1
- package/Menu/index.js.map +1 -1
- package/Modal/index.cjs.map +1 -1
- package/Modal/index.js.map +1 -1
- package/NoSSR/index.cjs.map +1 -1
- package/NoSSR/index.js.map +1 -1
- package/Portal/index.cjs.map +1 -1
- package/Portal/index.js.map +1 -1
- package/Scrollbar/index.cjs.map +1 -1
- package/Scrollbar/index.js.map +1 -1
- package/Select/index.cjs.map +1 -1
- package/Select/index.js.map +1 -1
- package/Switch/index.cjs.map +1 -1
- package/Switch/index.js.map +1 -1
- package/Tab/index.cjs.map +1 -1
- package/Tab/index.js.map +1 -1
- package/TablePagination/index.cjs.map +1 -1
- package/TablePagination/index.js.map +1 -1
- package/Tabs/index.cjs.map +1 -1
- package/Tabs/index.js.map +1 -1
- package/Toast/index.cjs.map +1 -1
- package/Toast/index.js.map +1 -1
- package/Tooltip/index.cjs.map +1 -1
- package/Tooltip/index.js.map +1 -1
- package/package.json +1 -1
- package/useAlert/index.cjs.map +1 -1
- package/useAlert/index.js.map +1 -1
- package/useLayer/index.cjs.map +1 -1
- package/useLayer/index.js.map +1 -1
- package/useModal/index.cjs.map +1 -1
- package/useModal/index.js.map +1 -1
package/Tabs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n value?: ValueType;\r\n onChange?: (value: ValueType) => void;\r\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n verticle?: useBreakpointPropsType<boolean>;\r\n disableTransition?: useBreakpointPropsType<boolean>;\r\n indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n slotProps?: {\r\n content?: Omit<TagProps, \"children\">;\r\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n const _rect: any = {};\r\n const parentRect = parent.getBoundingClientRect();\r\n const childRect = ele.getBoundingClientRect();\r\n _rect.top = childRect.top - parentRect.top;\r\n _rect.right = childRect.right - parentRect.right;\r\n _rect.bottom = childRect.bottom - parentRect.bottom;\r\n _rect.left = childRect.left - parentRect.left;\r\n _rect.width = childRect.width;\r\n _rect.height = childRect.height;\r\n return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n if (color) _p.color = color\r\n if (verticle) _p.verticle = verticle\r\n if (disableTransition) _p.disableTransition = disableTransition\r\n if (indicatorSize) _p.indicatorSize = indicatorSize\r\n const p: any = useBreakpointProps(_p)\r\n\r\n variant = p.variant ?? \"end-line\"\r\n color = p.color ?? \"brand\"\r\n verticle = p.verticle\r\n disableTransition = p.disableTransition\r\n indicatorSize = p.indicatorSize ?? 3\r\n\r\n ref = ref || useRef(null)\r\n const containerRef: any = useRef(null)\r\n const [trans, setTrans] = useState<any>()\r\n\r\n const { childs, selectedIndex } = useMemo(() => {\r\n let info: any = {\r\n childs: null,\r\n selectedIndex: 0\r\n }\r\n info.childs = Children.map(children, (child: any, idx: number) => {\r\n let selected = child.props.value === value\r\n if (selected) {\r\n info.selectedIndex = idx\r\n }\r\n\r\n let btnProps: any = {}\r\n if (variant === 'fill' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n color: \"#FFFFFF!important\"\r\n }\r\n }\r\n } else if (variant === 'soft' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n }\r\n }\r\n }\r\n\r\n // delete child.props.value\r\n return cloneElement(child, {\r\n corner: \"square\",\r\n value: undefined,\r\n onClick: () => {\r\n onChange && onChange(child.props.value)\r\n },\r\n ...slotProps?.button,\r\n ...btnProps,\r\n color: selected ? color : \"default\",\r\n variant: \"text\",\r\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n })\r\n })\r\n return info\r\n }, [children, onChange, value, variant, color, verticle])\r\n\r\n useEffect(() => {\r\n let con = containerRef.current\r\n const conChilds = con.children\r\n if (conChilds && conChilds[selectedIndex]) {\r\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n const prevRect = getRect(selectedTab, con)\r\n const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n let anim: any = () => ({})\r\n if (verticle) {\r\n let v: any = {\r\n from: {\r\n top: prevRect?.top || 0,\r\n height: prevRect?.height || 0,\r\n },\r\n to: {\r\n top: rect?.top || 0,\r\n height: rect?.height || 0,\r\n }\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.width = prevRect?.width\r\n v.to.width = rect?.width\r\n }\r\n anim = () => v\r\n } else {\r\n let v: any = {\r\n from: {\r\n left: prevRect?.left || 0,\r\n width: prevRect?.width || 0,\r\n },\r\n to: {\r\n left: rect?.left || 0,\r\n width: rect?.width || 0,\r\n },\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.height = prevRect?.height || 0\r\n v.to.height = rect?.height || 0\r\n }\r\n anim = () => v\r\n }\r\n setTrans(() => anim)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n let indicatorProps: any = useMemo(() => {\r\n let _indicatorProps: any = {}\r\n switch (variant) {\r\n case \"start-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n left: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n top: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"end-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n right: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n bottom: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"fill\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: color\r\n }\r\n break;\r\n case \"outline\":\r\n _indicatorProps = {\r\n top: 0,\r\n border: \"1px solid\",\r\n borderColor: color,\r\n bgcolor: \"transparent\"\r\n }\r\n break;\r\n case \"soft\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: `${color}.soft.primary`\r\n }\r\n break;\r\n case \"text\":\r\n _indicatorProps = {\r\n display: \"none\"\r\n }\r\n break;\r\n }\r\n return _indicatorProps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='tabs'\r\n ref={ref}\r\n sxr={{\r\n position: \"relative\",\r\n zIndex: 1,\r\n display: \"inline-block\"\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.content}\r\n baseClass='tabs-content'\r\n sxr={{\r\n display: verticle ? \"flex\" : \"inline-flex\",\r\n flexDirection: verticle ? \"column\" : \"row\",\r\n }}\r\n ref={containerRef}\r\n >\r\n {childs}\r\n </Tag>\r\n <Transition\r\n open={!!trans}\r\n variant={trans}\r\n duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n easing=\"smooth\"\r\n >\r\n <Tag\r\n baseClass='tabs-indicator'\r\n // className={classname}\r\n sxr={{\r\n position: \"absolute\",\r\n zIndex: -1,\r\n cursor: \"pointer\",\r\n bgcolor: color\r\n }}\r\n {...indicatorProps}\r\n >\r\n </Tag>\r\n </Transition>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;;;AAyBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;AAKI;AAOR;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;;AAEA;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;AAEJ;;;;AAKR;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;;;AAsBO;AACI;;AAEA;AACA;AACH;AAOrB;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n value?: ValueType;\r\n onChange?: (value: ValueType) => void;\r\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n verticle?: useBreakpointPropsType<boolean>;\r\n disableTransition?: useBreakpointPropsType<boolean>;\r\n indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n slotProps?: {\r\n content?: Omit<TagProps, \"children\">;\r\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n const _rect: any = {};\r\n const parentRect = parent.getBoundingClientRect();\r\n const childRect = ele.getBoundingClientRect();\r\n _rect.top = childRect.top - parentRect.top;\r\n _rect.right = childRect.right - parentRect.right;\r\n _rect.bottom = childRect.bottom - parentRect.bottom;\r\n _rect.left = childRect.left - parentRect.left;\r\n _rect.width = childRect.width;\r\n _rect.height = childRect.height;\r\n return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n if (color) _p.color = color\r\n if (verticle) _p.verticle = verticle\r\n if (disableTransition) _p.disableTransition = disableTransition\r\n if (indicatorSize) _p.indicatorSize = indicatorSize\r\n const p: any = useBreakpointProps(_p)\r\n\r\n variant = p.variant ?? \"end-line\"\r\n color = p.color ?? \"brand\"\r\n verticle = p.verticle\r\n disableTransition = p.disableTransition\r\n indicatorSize = p.indicatorSize ?? 3\r\n\r\n ref = ref || useRef(null)\r\n const containerRef: any = useRef(null)\r\n const [trans, setTrans] = useState<any>()\r\n\r\n const { childs, selectedIndex } = useMemo(() => {\r\n let info: any = {\r\n childs: null,\r\n selectedIndex: 0\r\n }\r\n info.childs = Children.map(children, (child: any, idx: number) => {\r\n let selected = child.props.value === value\r\n if (selected) {\r\n info.selectedIndex = idx\r\n }\r\n\r\n let btnProps: any = {}\r\n if (variant === 'fill' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n color: \"#FFFFFF!important\"\r\n }\r\n }\r\n } else if (variant === 'soft' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n }\r\n }\r\n }\r\n\r\n // delete child.props.value\r\n return cloneElement(child, {\r\n corner: \"square\",\r\n value: undefined,\r\n onClick: () => {\r\n onChange && onChange(child.props.value)\r\n },\r\n ...slotProps?.button,\r\n ...btnProps,\r\n color: selected ? color : \"default\",\r\n variant: \"text\",\r\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n })\r\n })\r\n return info\r\n }, [children, onChange, value, variant, color, verticle])\r\n\r\n useEffect(() => {\r\n let con = containerRef.current\r\n const conChilds = con.children\r\n if (conChilds && conChilds[selectedIndex]) {\r\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n const prevRect = getRect(selectedTab, con)\r\n const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n let anim: any = () => ({})\r\n if (verticle) {\r\n let v: any = {\r\n from: {\r\n top: prevRect?.top || 0,\r\n height: prevRect?.height || 0,\r\n },\r\n to: {\r\n top: rect?.top || 0,\r\n height: rect?.height || 0,\r\n }\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.width = prevRect?.width\r\n v.to.width = rect?.width\r\n }\r\n anim = () => v\r\n } else {\r\n let v: any = {\r\n from: {\r\n left: prevRect?.left || 0,\r\n width: prevRect?.width || 0,\r\n },\r\n to: {\r\n left: rect?.left || 0,\r\n width: rect?.width || 0,\r\n },\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.height = prevRect?.height || 0\r\n v.to.height = rect?.height || 0\r\n }\r\n anim = () => v\r\n }\r\n setTrans(() => anim)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n let indicatorProps: any = useMemo(() => {\r\n let _indicatorProps: any = {}\r\n switch (variant) {\r\n case \"start-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n left: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n top: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"end-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n right: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n bottom: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"fill\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: color\r\n }\r\n break;\r\n case \"outline\":\r\n _indicatorProps = {\r\n top: 0,\r\n border: \"1px solid\",\r\n borderColor: color,\r\n bgcolor: \"transparent\"\r\n }\r\n break;\r\n case \"soft\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: `${color}.soft.primary`\r\n }\r\n break;\r\n case \"text\":\r\n _indicatorProps = {\r\n display: \"none\"\r\n }\r\n break;\r\n }\r\n return _indicatorProps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='tabs'\r\n ref={ref}\r\n sxr={{\r\n position: \"relative\",\r\n zIndex: 1,\r\n display: \"inline-block\"\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.content}\r\n baseClass='tabs-content'\r\n sxr={{\r\n display: verticle ? \"flex\" : \"inline-flex\",\r\n flexDirection: verticle ? \"column\" : \"row\",\r\n }}\r\n ref={containerRef}\r\n >\r\n {childs}\r\n </Tag>\r\n <Transition\r\n open={!!trans}\r\n variant={trans}\r\n duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n easing=\"smooth\"\r\n >\r\n <Tag\r\n baseClass='tabs-indicator'\r\n // className={classname}\r\n sxr={{\r\n position: \"absolute\",\r\n zIndex: -1,\r\n cursor: \"pointer\",\r\n bgcolor: color\r\n }}\r\n {...indicatorProps}\r\n >\r\n </Tag>\r\n </Transition>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;;;AAyBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;AAKI;AAOR;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;;AAEA;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;AAEJ;;;;AAKR;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;;;AAsBO;AACI;;AAEA;AACA;AACH;AAOrB;;"}
|
package/Tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n value?: ValueType;\r\n onChange?: (value: ValueType) => void;\r\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n verticle?: useBreakpointPropsType<boolean>;\r\n disableTransition?: useBreakpointPropsType<boolean>;\r\n indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n slotProps?: {\r\n content?: Omit<TagProps, \"children\">;\r\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n const _rect: any = {};\r\n const parentRect = parent.getBoundingClientRect();\r\n const childRect = ele.getBoundingClientRect();\r\n _rect.top = childRect.top - parentRect.top;\r\n _rect.right = childRect.right - parentRect.right;\r\n _rect.bottom = childRect.bottom - parentRect.bottom;\r\n _rect.left = childRect.left - parentRect.left;\r\n _rect.width = childRect.width;\r\n _rect.height = childRect.height;\r\n return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n if (color) _p.color = color\r\n if (verticle) _p.verticle = verticle\r\n if (disableTransition) _p.disableTransition = disableTransition\r\n if (indicatorSize) _p.indicatorSize = indicatorSize\r\n const p: any = useBreakpointProps(_p)\r\n\r\n variant = p.variant ?? \"end-line\"\r\n color = p.color ?? \"brand\"\r\n verticle = p.verticle\r\n disableTransition = p.disableTransition\r\n indicatorSize = p.indicatorSize ?? 3\r\n\r\n ref = ref || useRef(null)\r\n const containerRef: any = useRef(null)\r\n const [trans, setTrans] = useState<any>()\r\n\r\n const { childs, selectedIndex } = useMemo(() => {\r\n let info: any = {\r\n childs: null,\r\n selectedIndex: 0\r\n }\r\n info.childs = Children.map(children, (child: any, idx: number) => {\r\n let selected = child.props.value === value\r\n if (selected) {\r\n info.selectedIndex = idx\r\n }\r\n\r\n let btnProps: any = {}\r\n if (variant === 'fill' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n color: \"#FFFFFF!important\"\r\n }\r\n }\r\n } else if (variant === 'soft' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n }\r\n }\r\n }\r\n\r\n // delete child.props.value\r\n return cloneElement(child, {\r\n corner: \"square\",\r\n value: undefined,\r\n onClick: () => {\r\n onChange && onChange(child.props.value)\r\n },\r\n ...slotProps?.button,\r\n ...btnProps,\r\n color: selected ? color : \"default\",\r\n variant: \"text\",\r\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n })\r\n })\r\n return info\r\n }, [children, onChange, value, variant, color, verticle])\r\n\r\n useEffect(() => {\r\n let con = containerRef.current\r\n const conChilds = con.children\r\n if (conChilds && conChilds[selectedIndex]) {\r\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n const prevRect = getRect(selectedTab, con)\r\n const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n let anim: any = () => ({})\r\n if (verticle) {\r\n let v: any = {\r\n from: {\r\n top: prevRect?.top || 0,\r\n height: prevRect?.height || 0,\r\n },\r\n to: {\r\n top: rect?.top || 0,\r\n height: rect?.height || 0,\r\n }\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.width = prevRect?.width\r\n v.to.width = rect?.width\r\n }\r\n anim = () => v\r\n } else {\r\n let v: any = {\r\n from: {\r\n left: prevRect?.left || 0,\r\n width: prevRect?.width || 0,\r\n },\r\n to: {\r\n left: rect?.left || 0,\r\n width: rect?.width || 0,\r\n },\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.height = prevRect?.height || 0\r\n v.to.height = rect?.height || 0\r\n }\r\n anim = () => v\r\n }\r\n setTrans(() => anim)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n let indicatorProps: any = useMemo(() => {\r\n let _indicatorProps: any = {}\r\n switch (variant) {\r\n case \"start-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n left: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n top: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"end-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n right: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n bottom: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"fill\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: color\r\n }\r\n break;\r\n case \"outline\":\r\n _indicatorProps = {\r\n top: 0,\r\n border: \"1px solid\",\r\n borderColor: color,\r\n bgcolor: \"transparent\"\r\n }\r\n break;\r\n case \"soft\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: `${color}.soft.primary`\r\n }\r\n break;\r\n case \"text\":\r\n _indicatorProps = {\r\n display: \"none\"\r\n }\r\n break;\r\n }\r\n return _indicatorProps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='tabs'\r\n ref={ref}\r\n sxr={{\r\n position: \"relative\",\r\n zIndex: 1,\r\n display: \"inline-block\"\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.content}\r\n baseClass='tabs-content'\r\n sxr={{\r\n display: verticle ? \"flex\" : \"inline-flex\",\r\n flexDirection: verticle ? \"column\" : \"row\",\r\n }}\r\n ref={containerRef}\r\n >\r\n {childs}\r\n </Tag>\r\n <Transition\r\n open={!!trans}\r\n variant={trans}\r\n duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n easing=\"smooth\"\r\n >\r\n <Tag\r\n baseClass='tabs-indicator'\r\n // className={classname}\r\n sxr={{\r\n position: \"absolute\",\r\n zIndex: -1,\r\n cursor: \"pointer\",\r\n bgcolor: color\r\n }}\r\n {...indicatorProps}\r\n >\r\n </Tag>\r\n </Transition>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;AAyBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;AAKI;AAOR;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;;AAEA;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;AAEJ;;;;AAKR;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;;;AAsBO;AACI;;AAEA;AACA;AACH;AAOrB;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n value?: ValueType;\r\n onChange?: (value: ValueType) => void;\r\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n verticle?: useBreakpointPropsType<boolean>;\r\n disableTransition?: useBreakpointPropsType<boolean>;\r\n indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n slotProps?: {\r\n content?: Omit<TagProps, \"children\">;\r\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n const _rect: any = {};\r\n const parentRect = parent.getBoundingClientRect();\r\n const childRect = ele.getBoundingClientRect();\r\n _rect.top = childRect.top - parentRect.top;\r\n _rect.right = childRect.right - parentRect.right;\r\n _rect.bottom = childRect.bottom - parentRect.bottom;\r\n _rect.left = childRect.left - parentRect.left;\r\n _rect.width = childRect.width;\r\n _rect.height = childRect.height;\r\n return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n if (color) _p.color = color\r\n if (verticle) _p.verticle = verticle\r\n if (disableTransition) _p.disableTransition = disableTransition\r\n if (indicatorSize) _p.indicatorSize = indicatorSize\r\n const p: any = useBreakpointProps(_p)\r\n\r\n variant = p.variant ?? \"end-line\"\r\n color = p.color ?? \"brand\"\r\n verticle = p.verticle\r\n disableTransition = p.disableTransition\r\n indicatorSize = p.indicatorSize ?? 3\r\n\r\n ref = ref || useRef(null)\r\n const containerRef: any = useRef(null)\r\n const [trans, setTrans] = useState<any>()\r\n\r\n const { childs, selectedIndex } = useMemo(() => {\r\n let info: any = {\r\n childs: null,\r\n selectedIndex: 0\r\n }\r\n info.childs = Children.map(children, (child: any, idx: number) => {\r\n let selected = child.props.value === value\r\n if (selected) {\r\n info.selectedIndex = idx\r\n }\r\n\r\n let btnProps: any = {}\r\n if (variant === 'fill' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n color: \"#FFFFFF!important\"\r\n }\r\n }\r\n } else if (variant === 'soft' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n }\r\n }\r\n }\r\n\r\n // delete child.props.value\r\n return cloneElement(child, {\r\n corner: \"square\",\r\n value: undefined,\r\n onClick: () => {\r\n onChange && onChange(child.props.value)\r\n },\r\n ...slotProps?.button,\r\n ...btnProps,\r\n color: selected ? color : \"default\",\r\n variant: \"text\",\r\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n })\r\n })\r\n return info\r\n }, [children, onChange, value, variant, color, verticle])\r\n\r\n useEffect(() => {\r\n let con = containerRef.current\r\n const conChilds = con.children\r\n if (conChilds && conChilds[selectedIndex]) {\r\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n const prevRect = getRect(selectedTab, con)\r\n const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n let anim: any = () => ({})\r\n if (verticle) {\r\n let v: any = {\r\n from: {\r\n top: prevRect?.top || 0,\r\n height: prevRect?.height || 0,\r\n },\r\n to: {\r\n top: rect?.top || 0,\r\n height: rect?.height || 0,\r\n }\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.width = prevRect?.width\r\n v.to.width = rect?.width\r\n }\r\n anim = () => v\r\n } else {\r\n let v: any = {\r\n from: {\r\n left: prevRect?.left || 0,\r\n width: prevRect?.width || 0,\r\n },\r\n to: {\r\n left: rect?.left || 0,\r\n width: rect?.width || 0,\r\n },\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.height = prevRect?.height || 0\r\n v.to.height = rect?.height || 0\r\n }\r\n anim = () => v\r\n }\r\n setTrans(() => anim)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n let indicatorProps: any = useMemo(() => {\r\n let _indicatorProps: any = {}\r\n switch (variant) {\r\n case \"start-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n left: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n top: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"end-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n right: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n bottom: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"fill\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: color\r\n }\r\n break;\r\n case \"outline\":\r\n _indicatorProps = {\r\n top: 0,\r\n border: \"1px solid\",\r\n borderColor: color,\r\n bgcolor: \"transparent\"\r\n }\r\n break;\r\n case \"soft\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: `${color}.soft.primary`\r\n }\r\n break;\r\n case \"text\":\r\n _indicatorProps = {\r\n display: \"none\"\r\n }\r\n break;\r\n }\r\n return _indicatorProps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='tabs'\r\n ref={ref}\r\n sxr={{\r\n position: \"relative\",\r\n zIndex: 1,\r\n display: \"inline-block\"\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.content}\r\n baseClass='tabs-content'\r\n sxr={{\r\n display: verticle ? \"flex\" : \"inline-flex\",\r\n flexDirection: verticle ? \"column\" : \"row\",\r\n }}\r\n ref={containerRef}\r\n >\r\n {childs}\r\n </Tag>\r\n <Transition\r\n open={!!trans}\r\n variant={trans}\r\n duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n easing=\"smooth\"\r\n >\r\n <Tag\r\n baseClass='tabs-indicator'\r\n // className={classname}\r\n sxr={{\r\n position: \"absolute\",\r\n zIndex: -1,\r\n cursor: \"pointer\",\r\n bgcolor: color\r\n }}\r\n {...indicatorProps}\r\n >\r\n </Tag>\r\n </Transition>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;AAyBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;AAKI;AAOR;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;;AAEA;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;AAEJ;;;;AAKR;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;;;AAsBO;AACI;;AAEA;AACA;AACH;AAOrB;;"}
|
package/Toast/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } 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}\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 { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\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 setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n >\r\n <Alert\r\n shadow={2}\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 clearTimeout(timer)\r\n }}\r\n onMouseLeave={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n onClose={closeable ? () => {\r\n setOpen(false)\r\n } : undefined}\r\n >{content}</Alert>\r\n </Transition>)\r\n}\r\n\r\nconst Toast = (props?: string | UseToastProps) => {\r\n if (typeof props === \"string\") {\r\n props = { content: props }\r\n }\r\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\r\n const { sx } = formatPacement(placement)\r\n\r\n const wrapperContainerClassName = `xui-toast-container-${placement}`\r\n const wrapperClassName = `xui-toast-list-${placement}`\r\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (!wrapperEle) {\r\n wrapperEle = document.createElement('div')\r\n wrapperEle.className = wrapperContainerClassName\r\n const appRoot = appRootElement()\r\n appRoot.appendChild(wrapperEle)\r\n\r\n const wrapperRoot = createRoot(wrapperEle);\r\n wrapperRoot.render(<Scrollbar\r\n p={1}\r\n overflow=\"hidden\"\r\n className={wrapperClassName}\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: 320,\r\n height: \"auto\",\r\n maxHeight: \"100vh\",\r\n ...sx\r\n }}\r\n >\r\n\r\n </Scrollbar>);\r\n }\r\n\r\n setTimeout(() => {\r\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\r\n const div = document.createElement('div');\r\n wrapper.appendChild(div);\r\n const root = createRoot(div);\r\n\r\n root.render(<ToastView\r\n placement={placement}\r\n content={content}\r\n closeable={closeable}\r\n {...rest}\r\n onClosed={() => {\r\n root.unmount();\r\n wrapper.removeChild(div);\r\n if (wrapper.children.length === 0) {\r\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (container) {\r\n appRootElement().removeChild(container);\r\n }\r\n }\r\n }}\r\n />);\r\n }, 5);\r\n\r\n}\r\n\r\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;;;AAqBA;;;;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;;;AAIA;AAIQ;AACJ;AAEI;;AAEA;AACJ;;AAWI;AAEI;;AAEA;;;;AAOhB;AAEA;AACI;AACI;;AAEJ;;AAGA;AACA;;;AAGI;AACA;AACA;AACA;AAEA;;;;;;AAwBA;AACA;;;AASQ;;;;AAIQ;;;;;AAOxB;;"}
|
package/Toast/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } 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}\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 { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\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 setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n >\r\n <Alert\r\n shadow={2}\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 clearTimeout(timer)\r\n }}\r\n onMouseLeave={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n onClose={closeable ? () => {\r\n setOpen(false)\r\n } : undefined}\r\n >{content}</Alert>\r\n </Transition>)\r\n}\r\n\r\nconst Toast = (props?: string | UseToastProps) => {\r\n if (typeof props === \"string\") {\r\n props = { content: props }\r\n }\r\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\r\n const { sx } = formatPacement(placement)\r\n\r\n const wrapperContainerClassName = `xui-toast-container-${placement}`\r\n const wrapperClassName = `xui-toast-list-${placement}`\r\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (!wrapperEle) {\r\n wrapperEle = document.createElement('div')\r\n wrapperEle.className = wrapperContainerClassName\r\n const appRoot = appRootElement()\r\n appRoot.appendChild(wrapperEle)\r\n\r\n const wrapperRoot = createRoot(wrapperEle);\r\n wrapperRoot.render(<Scrollbar\r\n p={1}\r\n overflow=\"hidden\"\r\n className={wrapperClassName}\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: 320,\r\n height: \"auto\",\r\n maxHeight: \"100vh\",\r\n ...sx\r\n }}\r\n >\r\n\r\n </Scrollbar>);\r\n }\r\n\r\n setTimeout(() => {\r\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\r\n const div = document.createElement('div');\r\n wrapper.appendChild(div);\r\n const root = createRoot(div);\r\n\r\n root.render(<ToastView\r\n placement={placement}\r\n content={content}\r\n closeable={closeable}\r\n {...rest}\r\n onClosed={() => {\r\n root.unmount();\r\n wrapper.removeChild(div);\r\n if (wrapper.children.length === 0) {\r\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (container) {\r\n appRootElement().removeChild(container);\r\n }\r\n }\r\n }}\r\n />);\r\n }, 5);\r\n\r\n}\r\n\r\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;AAqBA;;;;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;;;AAIA;AAIQ;AACJ;AAEI;;AAEA;AACJ;;AAWI;AAEI;;AAEA;;;;AAOhB;AAEA;AACI;AACI;;AAEJ;;AAGA;AACA;;;AAGI;AACA;AACA;AACA;AAEA;;;;;;AAwBA;AACA;;;AASQ;;;;AAIQ;;;;;AAOxB;;"}
|
package/Tooltip/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Children, cloneElement, ReactElement, useState } from 'react'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\r\n\r\n\r\nexport type TooltipProps = {\r\n children: ReactElement;\r\n title: useBreakpointPropsType<string>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n placement?: MenuProps['placement']\r\n}\r\n\r\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\r\n const [target, setTarget] = useState<any>()\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n title = p.title\r\n color = p.color ?? \"default\"\r\n variant = p.variant ?? \"fill\"\r\n placement ??= \"bottom\"\r\n\r\n const template = useColorTemplate(color as any, variant as any)\r\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\r\n const first: any = Children.toArray(children).shift();\r\n const child = cloneElement(first, {\r\n onMouseEnter: (e) => {\r\n setTarget(e.target)\r\n },\r\n onMouseLeave: () => setTarget(null)\r\n })\r\n\r\n\r\n return (\r\n <>\r\n {child}\r\n <Menu\r\n target={target}\r\n placement={placement}\r\n slotProps={{\r\n content: {\r\n p: .5,\r\n shadow: 1,\r\n ...template.primary,\r\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\r\n }\r\n }}\r\n >\r\n {title as any}\r\n </Menu>\r\n </>\r\n )\r\n}\r\n\r\nexport default Tooltip"],"names":[],"mappings":";;;;;;;;AAeA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
|
package/Tooltip/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Children, cloneElement, ReactElement, useState } from 'react'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\r\n\r\n\r\nexport type TooltipProps = {\r\n children: ReactElement;\r\n title: useBreakpointPropsType<string>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n placement?: MenuProps['placement']\r\n}\r\n\r\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\r\n const [target, setTarget] = useState<any>()\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n title = p.title\r\n color = p.color ?? \"default\"\r\n variant = p.variant ?? \"fill\"\r\n placement ??= \"bottom\"\r\n\r\n const template = useColorTemplate(color as any, variant as any)\r\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\r\n const first: any = Children.toArray(children).shift();\r\n const child = cloneElement(first, {\r\n onMouseEnter: (e) => {\r\n setTarget(e.target)\r\n },\r\n onMouseLeave: () => setTarget(null)\r\n })\r\n\r\n\r\n return (\r\n <>\r\n {child}\r\n <Menu\r\n target={target}\r\n placement={placement}\r\n slotProps={{\r\n content: {\r\n p: .5,\r\n shadow: 1,\r\n ...template.primary,\r\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\r\n }\r\n }}\r\n >\r\n {title as any}\r\n </Menu>\r\n </>\r\n )\r\n}\r\n\r\nexport default Tooltip"],"names":[],"mappings":";;;;;;AAeA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
|
package/package.json
CHANGED
package/useAlert/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, UseTransitionVariantTypes } from \"@xanui/core\"\r\nimport Button, { ButtonProps } from \"../Button\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport React from \"react\";\r\nexport type UseAlertContentProps = {\r\n open: () => void;\r\n close: () => void;\r\n loading: (is: boolean) => void;\r\n isLoading: () => boolean;\r\n}\r\n\r\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\r\n\r\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\r\n content: string | UseAlertContent,\r\n size?: \"small\" | \"medium\" | \"large\" | number;\r\n closeButton?: boolean;\r\n clickOutsideToClose?: boolean;\r\n okButtonText?: string;\r\n cancelButtonText?: string;\r\n hideOkButton?: boolean;\r\n hideCancelButton?: boolean;\r\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\r\n variant?: \"text\" | \"fill\"\r\n onConfirm?: () => Promise<void> | void;\r\n onCancel?: () => Promise<void> | void;\r\n transition?: UseTransitionVariantTypes;\r\n blurMode?: UseModalProps['blurMode'];\r\n slotProps?: {\r\n modal?: UseModalProps;\r\n okButton?: Omit<ButtonProps, \"children\">;\r\n closeButton?: Omit<ButtonProps, \"children\">;\r\n }\r\n}\r\n\r\n\r\nconst useAlert = (props: UseAlerProps) => {\r\n const [loading, setLoading] = React.useState(false)\r\n let {\r\n content,\r\n size,\r\n color,\r\n direction,\r\n variant,\r\n closeButton,\r\n clickOutsideToClose,\r\n okButtonText,\r\n cancelButtonText,\r\n hideOkButton,\r\n hideCancelButton,\r\n buttonPlacement,\r\n onConfirm,\r\n onCancel,\r\n transition,\r\n blurMode,\r\n slotProps,\r\n ...rest\r\n } = props\r\n\r\n hideOkButton ??= false\r\n hideCancelButton ??= false\r\n\r\n size ??= \"small\"\r\n color ??= 'default'\r\n variant ??= \"text\"\r\n direction ??= \"column\"\r\n buttonPlacement ??= \"end\"\r\n let sx: any = {};\r\n\r\n switch (buttonPlacement) {\r\n case \"start\":\r\n sx.justifyContent = 'flex-start'\r\n break;\r\n case \"end\":\r\n sx.justifyContent = 'flex-end'\r\n break;\r\n case \"between\":\r\n sx.justifyContent = 'space-between'\r\n break;\r\n case \"full\":\r\n sx = {\r\n \"& button\": {\r\n flex: 1\r\n }\r\n }\r\n break;\r\n }\r\n\r\n let sizes: any = {\r\n small: 320,\r\n medium: 400,\r\n large: 600\r\n }\r\n\r\n let okcolor = color\r\n let closecolor = color\r\n if (color === 'default') {\r\n okcolor = 'brand'\r\n closecolor = 'default'\r\n variant = 'text'\r\n } else {\r\n if (variant === 'fill') {\r\n okcolor = 'default'\r\n closecolor = 'default'\r\n } else {\r\n okcolor = color\r\n closecolor = 'default'\r\n }\r\n }\r\n\r\n const modal = useModal(<Alert\r\n direction={direction}\r\n sx={{\r\n px: 2,\r\n py: 1,\r\n pt: direction === 'row' ? 1 : 2\r\n }}\r\n color={color}\r\n variant={variant}\r\n onClose={closeButton ? close : undefined}\r\n {...rest}\r\n >\r\n {typeof content === \"function\" ? content({\r\n open: () => modal.open(),\r\n close: () => modal.close(),\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }) : content}\r\n <Tag\r\n sxr={{\r\n display: \"flex\",\r\n gap: 1,\r\n pt: 4,\r\n flexDirection: \"row\",\r\n ...sx,\r\n }}\r\n >\r\n {!hideCancelButton && <Button\r\n disabled={loading}\r\n color={closecolor}\r\n variant=\"fill\"\r\n {...slotProps?.closeButton}\r\n onClick={async () => {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{cancelButtonText || \"Close\"}</Button>}\r\n <Button\r\n loading={loading}\r\n color={okcolor}\r\n variant=\"fill\"\r\n {...slotProps?.okButton}\r\n\r\n onClick={async () => {\r\n setLoading(true)\r\n onConfirm && await onConfirm()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{okButtonText || \"OK\"}</Button>\r\n </Tag>\r\n </Alert>, {\r\n ...slotProps?.modal,\r\n size: sizes[size] || size,\r\n blur: 40,\r\n blurMode: blurMode || \"transparent\",\r\n transition: transition || \"zoom\",\r\n onClickOutside: async () => {\r\n if (clickOutsideToClose && !loading) {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }\r\n }\r\n })\r\n\r\n return {\r\n ...modal,\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }\r\n}\r\n\r\nexport default useAlert"],"names":[],"mappings":";;;;;;;;;;;AAuCA;AACI;AACA;;;;;;;;;;AAgCI;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;AASJ;AAGQ;AACA;;AAEH;AAOG;AACA;;AAEA;;;AAkBQ;;;AAGJ;;AAUI;;;;AAaR;;AAEI;;;;AAIR;;AAQR;;"}
|
package/useAlert/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, UseTransitionVariantTypes } from \"@xanui/core\"\r\nimport Button, { ButtonProps } from \"../Button\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport React from \"react\";\r\nexport type UseAlertContentProps = {\r\n open: () => void;\r\n close: () => void;\r\n loading: (is: boolean) => void;\r\n isLoading: () => boolean;\r\n}\r\n\r\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\r\n\r\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\r\n content: string | UseAlertContent,\r\n size?: \"small\" | \"medium\" | \"large\" | number;\r\n closeButton?: boolean;\r\n clickOutsideToClose?: boolean;\r\n okButtonText?: string;\r\n cancelButtonText?: string;\r\n hideOkButton?: boolean;\r\n hideCancelButton?: boolean;\r\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\r\n variant?: \"text\" | \"fill\"\r\n onConfirm?: () => Promise<void> | void;\r\n onCancel?: () => Promise<void> | void;\r\n transition?: UseTransitionVariantTypes;\r\n blurMode?: UseModalProps['blurMode'];\r\n slotProps?: {\r\n modal?: UseModalProps;\r\n okButton?: Omit<ButtonProps, \"children\">;\r\n closeButton?: Omit<ButtonProps, \"children\">;\r\n }\r\n}\r\n\r\n\r\nconst useAlert = (props: UseAlerProps) => {\r\n const [loading, setLoading] = React.useState(false)\r\n let {\r\n content,\r\n size,\r\n color,\r\n direction,\r\n variant,\r\n closeButton,\r\n clickOutsideToClose,\r\n okButtonText,\r\n cancelButtonText,\r\n hideOkButton,\r\n hideCancelButton,\r\n buttonPlacement,\r\n onConfirm,\r\n onCancel,\r\n transition,\r\n blurMode,\r\n slotProps,\r\n ...rest\r\n } = props\r\n\r\n hideOkButton ??= false\r\n hideCancelButton ??= false\r\n\r\n size ??= \"small\"\r\n color ??= 'default'\r\n variant ??= \"text\"\r\n direction ??= \"column\"\r\n buttonPlacement ??= \"end\"\r\n let sx: any = {};\r\n\r\n switch (buttonPlacement) {\r\n case \"start\":\r\n sx.justifyContent = 'flex-start'\r\n break;\r\n case \"end\":\r\n sx.justifyContent = 'flex-end'\r\n break;\r\n case \"between\":\r\n sx.justifyContent = 'space-between'\r\n break;\r\n case \"full\":\r\n sx = {\r\n \"& button\": {\r\n flex: 1\r\n }\r\n }\r\n break;\r\n }\r\n\r\n let sizes: any = {\r\n small: 320,\r\n medium: 400,\r\n large: 600\r\n }\r\n\r\n let okcolor = color\r\n let closecolor = color\r\n if (color === 'default') {\r\n okcolor = 'brand'\r\n closecolor = 'default'\r\n variant = 'text'\r\n } else {\r\n if (variant === 'fill') {\r\n okcolor = 'default'\r\n closecolor = 'default'\r\n } else {\r\n okcolor = color\r\n closecolor = 'default'\r\n }\r\n }\r\n\r\n const modal = useModal(<Alert\r\n direction={direction}\r\n sx={{\r\n px: 2,\r\n py: 1,\r\n pt: direction === 'row' ? 1 : 2\r\n }}\r\n color={color}\r\n variant={variant}\r\n onClose={closeButton ? close : undefined}\r\n {...rest}\r\n >\r\n {typeof content === \"function\" ? content({\r\n open: () => modal.open(),\r\n close: () => modal.close(),\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }) : content}\r\n <Tag\r\n sxr={{\r\n display: \"flex\",\r\n gap: 1,\r\n pt: 4,\r\n flexDirection: \"row\",\r\n ...sx,\r\n }}\r\n >\r\n {!hideCancelButton && <Button\r\n disabled={loading}\r\n color={closecolor}\r\n variant=\"fill\"\r\n {...slotProps?.closeButton}\r\n onClick={async () => {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{cancelButtonText || \"Close\"}</Button>}\r\n <Button\r\n loading={loading}\r\n color={okcolor}\r\n variant=\"fill\"\r\n {...slotProps?.okButton}\r\n\r\n onClick={async () => {\r\n setLoading(true)\r\n onConfirm && await onConfirm()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{okButtonText || \"OK\"}</Button>\r\n </Tag>\r\n </Alert>, {\r\n ...slotProps?.modal,\r\n size: sizes[size] || size,\r\n blur: 40,\r\n blurMode: blurMode || \"transparent\",\r\n transition: transition || \"zoom\",\r\n onClickOutside: async () => {\r\n if (clickOutsideToClose && !loading) {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }\r\n }\r\n })\r\n\r\n return {\r\n ...modal,\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }\r\n}\r\n\r\nexport default useAlert"],"names":[],"mappings":";;;;;;;;;AAuCA;AACI;AACA;;;;;;;;;;AAgCI;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;AASJ;AAGQ;AACA;;AAEH;AAOG;AACA;;AAEA;;;AAkBQ;;;AAGJ;;AAUI;;;;AAaR;;AAEI;;;;AAIR;;AAQR;;"}
|
package/useLayer/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { usePortal } from \"@xanui/core\"\r\nimport { useState } from \"react\"\r\nimport Layer, { LayerProps } from \"../Layer\"\r\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\r\n\r\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\r\n slotProps?: LayerProps[\"slotProps\"] & {\r\n portal?: UsePortalOptions\r\n }\r\n}\r\n\r\nexport type UseLayerReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\r\n\r\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\r\n const [open, setOpen] = useState(false)\r\n const portalProps = props?.slotProps?.portal || {}\r\n const portal = usePortal(<Layer\r\n blur={20}\r\n {...props}\r\n open={open}\r\n onClosed={() => {\r\n portal.unmount()\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }}\r\n onClickOutside={() => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n setOpen(false)\r\n }\r\n }}\r\n >\r\n {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\r\n </Layer>, portalProps)\r\n\r\n return {\r\n open: () => {\r\n portal.mount()\r\n setOpen(true)\r\n },\r\n close: () => {\r\n setOpen(false)\r\n },\r\n }\r\n}\r\n\r\nexport default useLayer"],"names":[],"mappings":";;;;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
|
package/useLayer/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { usePortal } from \"@xanui/core\"\r\nimport { useState } from \"react\"\r\nimport Layer, { LayerProps } from \"../Layer\"\r\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\r\n\r\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\r\n slotProps?: LayerProps[\"slotProps\"] & {\r\n portal?: UsePortalOptions\r\n }\r\n}\r\n\r\nexport type UseLayerReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\r\n\r\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\r\n const [open, setOpen] = useState(false)\r\n const portalProps = props?.slotProps?.portal || {}\r\n const portal = usePortal(<Layer\r\n blur={20}\r\n {...props}\r\n open={open}\r\n onClosed={() => {\r\n portal.unmount()\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }}\r\n onClickOutside={() => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n setOpen(false)\r\n }\r\n }}\r\n >\r\n {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\r\n </Layer>, portalProps)\r\n\r\n return {\r\n open: () => {\r\n portal.mount()\r\n setOpen(true)\r\n },\r\n close: () => {\r\n setOpen(false)\r\n },\r\n }\r\n}\r\n\r\nexport default useLayer"],"names":[],"mappings":";;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
|
package/useModal/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/useModal/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport useLayer, { UseLayerProps } from \"../useLayer\";\r\nimport { Tag, TagProps } from '@xanui/core'\r\n\r\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\r\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\r\n slotProps?: {\r\n layer?: UseLayerProps['slotProps'];\r\n root?: Omit<TagProps<'div'>, \"children\">\r\n }\r\n}\r\n\r\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\r\n\r\nexport type UseModalReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\r\n\r\n let sizes: any = {\r\n xs: 420,\r\n sm: 760,\r\n md: 990,\r\n lg: 1120,\r\n xl: 1300,\r\n full: \"100%\"\r\n }\r\n let { size, slotProps, ...useLayerProps } = props || {}\r\n size = size ?? \"xs\"\r\n slotProps = slotProps || {} as any\r\n const root: any = slotProps?.root || {}\r\n\r\n const layer = useLayer(() => {\r\n return (\r\n <Tag\r\n {...root}\r\n sxr={{\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n radius: 2,\r\n bgcolor: \"background.primary\",\r\n shadow: 15,\r\n ...root?.sx\r\n }}\r\n baseClass='modal'\r\n >\r\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\r\n </Tag>\r\n )\r\n }, {\r\n ...useLayerProps,\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n layer.close()\r\n }\r\n },\r\n slotProps: {\r\n ...slotProps?.layer,\r\n clickOutside: {\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n ...slotProps?.layer?.clickOutside,\r\n },\r\n root: {\r\n display: \"flex\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n ...slotProps?.layer?.root,\r\n }\r\n }\r\n })\r\n\r\n return layer\r\n}\r\n\r\nexport default useModal;"],"names":[],"mappings":";;;;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
|
package/useModal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport useLayer, { UseLayerProps } from \"../useLayer\";\r\nimport { Tag, TagProps } from '@xanui/core'\r\n\r\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\r\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\r\n slotProps?: {\r\n layer?: UseLayerProps['slotProps'];\r\n root?: Omit<TagProps<'div'>, \"children\">\r\n }\r\n}\r\n\r\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\r\n\r\nexport type UseModalReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\r\n\r\n let sizes: any = {\r\n xs: 420,\r\n sm: 760,\r\n md: 990,\r\n lg: 1120,\r\n xl: 1300,\r\n full: \"100%\"\r\n }\r\n let { size, slotProps, ...useLayerProps } = props || {}\r\n size = size ?? \"xs\"\r\n slotProps = slotProps || {} as any\r\n const root: any = slotProps?.root || {}\r\n\r\n const layer = useLayer(() => {\r\n return (\r\n <Tag\r\n {...root}\r\n sxr={{\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n radius: 2,\r\n bgcolor: \"background.primary\",\r\n shadow: 15,\r\n ...root?.sx\r\n }}\r\n baseClass='modal'\r\n >\r\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\r\n </Tag>\r\n )\r\n }, {\r\n ...useLayerProps,\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n layer.close()\r\n }\r\n },\r\n slotProps: {\r\n ...slotProps?.layer,\r\n clickOutside: {\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n ...slotProps?.layer?.clickOutside,\r\n },\r\n root: {\r\n display: \"flex\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n ...slotProps?.layer?.root,\r\n }\r\n }\r\n })\r\n\r\n return layer\r\n}\r\n\r\nexport default useModal;"],"names":[],"mappings":";;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
|