@xanui/core 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Transition/index.js +13 -4
- package/Transition/index.js.map +2 -2
- package/package.json +1 -1
package/Transition/index.js
CHANGED
|
@@ -13,6 +13,7 @@ const Transition = ({ children, open, ...props }) => {
|
|
|
13
13
|
variant ??= "fade";
|
|
14
14
|
const id = useId().replaceAll(":", "");
|
|
15
15
|
const [rendered, setRendered] = useState(false);
|
|
16
|
+
const [initial, setInitial] = useState(false);
|
|
16
17
|
const [transitionState, setTransitionState] = useState(open ? disableInitialTransition ? "opened" : "open" : "closed");
|
|
17
18
|
const [element, setElement] = useState({
|
|
18
19
|
height: 0,
|
|
@@ -68,23 +69,31 @@ const Transition = ({ children, open, ...props }) => {
|
|
|
68
69
|
}, [rendered]);
|
|
69
70
|
useEffect(() => {
|
|
70
71
|
if (rendered) {
|
|
71
|
-
|
|
72
|
+
if (!initial) {
|
|
73
|
+
setInitial(true);
|
|
74
|
+
setTimeout(() => {
|
|
75
|
+
setCss(open ? to : from);
|
|
76
|
+
}, 50);
|
|
77
|
+
} else {
|
|
78
|
+
setCss(open ? to : from);
|
|
79
|
+
}
|
|
72
80
|
}
|
|
73
81
|
}, [rendered, open]);
|
|
74
82
|
let _ = {};
|
|
75
83
|
if (rendered) {
|
|
76
84
|
let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
|
|
77
85
|
_ = {
|
|
78
|
-
|
|
79
|
-
|
|
86
|
+
..._css,
|
|
87
|
+
transition: Object.keys(_css || {}).map((k) => formatCSSProp(k)).join(trans + ", ") + trans
|
|
80
88
|
};
|
|
81
89
|
}
|
|
82
90
|
const cls = css(_);
|
|
83
91
|
if (!children || Array.isArray(children)) throw new Error("Invalid children in Transition");
|
|
84
92
|
const first = Children.toArray(children).shift();
|
|
85
93
|
let classname = `${cls.classname} trans-${id} trans-${open ? "open" : "close"} trans-state-${transitionState}`;
|
|
86
|
-
const child = cloneElement(first, {
|
|
94
|
+
const child = cloneElement(first, { classNames: [classname] });
|
|
87
95
|
if (rendered) return child;
|
|
96
|
+
if (!rendered && disableInitialTransition && open) return child;
|
|
88
97
|
return /* @__PURE__ */ React.createElement(
|
|
89
98
|
Tag,
|
|
90
99
|
{
|
package/Transition/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Transition/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n height: number;\n width: number;\n rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: ReactElement;\n open: boolean;\n variant: {\n from: CSSProps;\n to: CSSProps;\n } | TransitionVariantTypes;\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst Transition = ({ children, open, ...props }: TransitionProps) => {\n let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n disableInitialTransition ??= false\n duration ??= 400\n variant ??= \"fade\"\n\n const id = useId().replaceAll(\":\", \"\")\n const [rendered, setRendered] = useState(false)\n const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n const [element, setElement] = useState<TransitionElementProps>({\n height: 0,\n width: 0,\n rect: null\n });\n\n if (typeof variant === 'string') {\n variant = (variants as any)[variant](element)\n }\n\n let from = (variant as any).from\n let to = (variant as any).to\n const [_css, setCss] = useState(open ? to : from)\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (ele) {\n setRendered(true)\n setElement({\n height: ele.clientHeight,\n width: ele.clientWidth,\n rect: ele.getBoundingClientRect()\n })\n if (!disableInitialTransition && open) {\n setCss(from)\n }\n }\n }, [])\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (rendered && ele) {\n let stimer: any = null\n let etimer: any = null\n ele.ontransitionstart = () => {\n clearTimeout(stimer)\n stimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpen && isOpen) && onOpen();\n (onClose && !isOpen) && onClose()\n onState && onState(isOpen ? \"open\" : \"close\")\n setTransitionState(isOpen ? \"open\" : \"close\")\n }, 1)\n }\n ele.ontransitionend = () => {\n clearTimeout(etimer)\n etimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpened && isOpen) && onOpened();\n (onClosed && !isOpen) && onClosed();\n onState && onState(isOpen ? \"opened\" : \"closed\")\n setTransitionState(isOpen ? \"opened\" : \"closed\")\n }, 1)\n }\n }\n }, [rendered])\n\n useEffect(() => {\n if (rendered) {\n setCss(open ? to : from)\n }\n }, [rendered, open])\n\n let _: any = {}\n if (rendered) {\n let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n _ = {\n transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n
|
|
5
|
-
"mappings": ";AACA,OAAO,SAAuB,cAAc,UAAU,UAAU,WAAW,aAAa;AACxF,OAAO,SAAS;AAChB,SAAS,sBAAsB;AAC/B,SAAS,WAAW;AACpB,SAAS,qBAAqB;AAE9B,YAAY,cAAc;AA8B1B,MAAM,aAAa,CAAC,EAAE,UAAU,MAAM,GAAG,MAAM,MAAuB;AAClE,MAAI,EAAE,0BAA0B,SAAS,UAAU,OAAO,MAAM,QAAQ,QAAQ,UAAU,SAAS,UAAU,QAAQ,IAAI;AACzH,MAAI,QAAQ,QAAS,eAAuB,MAAa,KAAK,eAAe;AAC7E,+BAA6B;AAC7B,eAAa;AACb,cAAY;AAEZ,QAAM,KAAK,MAAM,EAAE,WAAW,KAAK,EAAE;AACrC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAA0B,OAAQ,2BAA2B,WAAW,SAAU,QAAQ;AACxI,QAAM,CAAC,SAAS,UAAU,IAAI,SAAiC;AAAA,IAC3D,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV,CAAC;AAED,MAAI,OAAO,YAAY,UAAU;AAC7B,cAAW,SAAiB,OAAO,EAAE,OAAO;AAAA,EAChD;AAEA,MAAI,OAAQ,QAAgB;AAC5B,MAAI,KAAM,QAAgB;AAC1B,QAAM,CAAC,MAAM,MAAM,IAAI,SAAS,OAAO,KAAK,IAAI;AAEhD,YAAU,MAAM;AACZ,UAAM,MAAmB,SAAS,cAAc,UAAU,EAAE,EAAE;AAC9D,QAAI,KAAK;AACL,kBAAY,IAAI;AAChB,iBAAW;AAAA,QACP,QAAQ,IAAI;AAAA,QACZ,OAAO,IAAI;AAAA,QACX,MAAM,IAAI,sBAAsB;AAAA,MACpC,CAAC;AACD,UAAI,CAAC,4BAA4B,MAAM;AACnC,eAAO,IAAI;AAAA,MACf;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACZ,UAAM,MAAmB,SAAS,cAAc,UAAU,EAAE,EAAE;AAC9D,QAAI,YAAY,KAAK;AACjB,UAAI,SAAc;AAClB,UAAI,SAAc;AAClB,UAAI,oBAAoB,MAAM;AAC1B,qBAAa,MAAM;AACnB,iBAAS,WAAW,MAAM;AACtB,gBAAM,SAAS,MAAM,KAAK,IAAI,SAAS,EAAE,SAAS,YAAY;AAC9D,UAAC,UAAU,UAAW,OAAO;AAC7B,UAAC,WAAW,CAAC,UAAW,QAAQ;AAChC,qBAAW,QAAQ,SAAS,SAAS,OAAO;AAC5C,6BAAmB,SAAS,SAAS,OAAO;AAAA,QAChD,GAAG,CAAC;AAAA,MACR;AACA,UAAI,kBAAkB,MAAM;AACxB,qBAAa,MAAM;AACnB,iBAAS,WAAW,MAAM;AACtB,gBAAM,SAAS,MAAM,KAAK,IAAI,SAAS,EAAE,SAAS,YAAY;AAC9D,UAAC,YAAY,UAAW,SAAS;AACjC,UAAC,YAAY,CAAC,UAAW,SAAS;AAClC,qBAAW,QAAQ,SAAS,WAAW,QAAQ;AAC/C,6BAAmB,SAAS,WAAW,QAAQ;AAAA,QACnD,GAAG,CAAC;AAAA,MACR;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACZ,QAAI,UAAU;AACV,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n height: number;\n width: number;\n rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: ReactElement;\n open: boolean;\n variant: {\n from: CSSProps;\n to: CSSProps;\n } | TransitionVariantTypes;\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst Transition = ({ children, open, ...props }: TransitionProps) => {\n let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n disableInitialTransition ??= false\n duration ??= 400\n variant ??= \"fade\"\n\n const id = useId().replaceAll(\":\", \"\")\n const [rendered, setRendered] = useState(false)\n const [initial, setInitial] = useState(false)\n const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n const [element, setElement] = useState<TransitionElementProps>({\n height: 0,\n width: 0,\n rect: null\n });\n\n if (typeof variant === 'string') {\n variant = (variants as any)[variant](element)\n }\n\n let from = (variant as any).from\n let to = (variant as any).to\n const [_css, setCss] = useState(open ? to : from)\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (ele) {\n setRendered(true)\n setElement({\n height: ele.clientHeight,\n width: ele.clientWidth,\n rect: ele.getBoundingClientRect()\n })\n if (!disableInitialTransition && open) {\n setCss(from)\n }\n }\n }, [])\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (rendered && ele) {\n let stimer: any = null\n let etimer: any = null\n ele.ontransitionstart = () => {\n clearTimeout(stimer)\n stimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpen && isOpen) && onOpen();\n (onClose && !isOpen) && onClose()\n onState && onState(isOpen ? \"open\" : \"close\")\n setTransitionState(isOpen ? \"open\" : \"close\")\n }, 1)\n }\n ele.ontransitionend = () => {\n clearTimeout(etimer)\n etimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpened && isOpen) && onOpened();\n (onClosed && !isOpen) && onClosed();\n onState && onState(isOpen ? \"opened\" : \"closed\")\n setTransitionState(isOpen ? \"opened\" : \"closed\")\n }, 1)\n }\n }\n }, [rendered])\n\n useEffect(() => {\n if (rendered) {\n if (!initial) {\n setInitial(true)\n setTimeout(() => {\n setCss(open ? to : from)\n }, 50);\n } else {\n setCss(open ? to : from)\n }\n }\n }, [rendered, open])\n\n let _: any = {}\n if (rendered) {\n let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n _ = {\n ..._css,\n transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n }\n }\n\n const cls = css(_)\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n const first: any = Children.toArray(children).shift();\n let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n const child = cloneElement(first, { classNames: [classname] })\n if (rendered) return child\n if (!rendered && disableInitialTransition && open) return child\n\n return (\n <Tag\n height={0}\n overflow=\"hidden\"\n >\n {child}\n </Tag>\n )\n}\n\n\nexport default Transition"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|