@xanui/core 1.0.5 → 1.0.7
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/Tag/useTagProps.js +1 -1
- package/Tag/useTagProps.js.map +2 -2
- package/Transition/index.js +1 -1
- package/Transition/index.js.map +2 -2
- package/package.json +1 -1
package/Tag/useTagProps.js
CHANGED
|
@@ -2,7 +2,7 @@ import cssPropList from "./cssPropList";
|
|
|
2
2
|
import { css } from "../css";
|
|
3
3
|
import { classNames } from "pretty-class";
|
|
4
4
|
const useTagProps = ({ sxr, sx, baseClass, classNames: clses, hover, ...props }) => {
|
|
5
|
-
let _css = { ...
|
|
5
|
+
let _css = { ...sxr, ...sx, ...props };
|
|
6
6
|
if (hover) _css["&:hover"] = hover;
|
|
7
7
|
const style = css(_css, {
|
|
8
8
|
skipProps: (prop, _val, dept) => dept === 1 && !cssPropList[prop]
|
package/Tag/useTagProps.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Tag/useTagProps.ts"],
|
|
4
|
-
"sourcesContent": ["import { TagComponentType, TagProps, TagPropsRoot } from './types';\nimport cssPropList from './cssPropList';\nimport { css } from '../css';\nimport { classNames } from 'pretty-class';\n\nconst useTagProps = <T extends TagComponentType = \"div\">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>): TagProps<T> => {\n let _css: any = { ...
|
|
5
|
-
"mappings": "AACA,OAAO,iBAAiB;AACxB,SAAS,WAAW;AACpB,SAAS,kBAAkB;AAE3B,MAAM,cAAc,CAAqC,EAAE,KAAK,IAAI,WAAW,YAAY,OAAO,OAAO,GAAG,MAAM,MAAoC;AACnJ,MAAI,OAAY,EAAE,GAAG,
|
|
4
|
+
"sourcesContent": ["import { TagComponentType, TagProps, TagPropsRoot } from './types';\nimport cssPropList from './cssPropList';\nimport { css } from '../css';\nimport { classNames } from 'pretty-class';\n\nconst useTagProps = <T extends TagComponentType = \"div\">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>): TagProps<T> => {\n let _css: any = { ...sxr, ...sx, ...props }\n if (hover) _css['&:hover'] = hover\n const style = css(_css, {\n skipProps: (prop, _val, dept): any => dept === 1 && !cssPropList[prop]\n })\n\n let skipProps = style.skiped[style.classname as any] || []\n const _props: any = {};\n for (let prop of skipProps) {\n _props[prop] = (props as any)[prop]\n }\n _props.className = classNames([\n baseClass ? \"xui-\" + baseClass : \"\",\n style.classname,\n props.className,\n ...(clses as any || []),\n ])\n return _props\n}\n\n\nexport default useTagProps"],
|
|
5
|
+
"mappings": "AACA,OAAO,iBAAiB;AACxB,SAAS,WAAW;AACpB,SAAS,kBAAkB;AAE3B,MAAM,cAAc,CAAqC,EAAE,KAAK,IAAI,WAAW,YAAY,OAAO,OAAO,GAAG,MAAM,MAAoC;AACnJ,MAAI,OAAY,EAAE,GAAG,KAAK,GAAG,IAAI,GAAG,MAAM;AAC1C,MAAI,MAAO,MAAK,SAAS,IAAI;AAC7B,QAAM,QAAQ,IAAI,MAAM;AAAA,IACrB,WAAW,CAAC,MAAM,MAAM,SAAc,SAAS,KAAK,CAAC,YAAY,IAAI;AAAA,EACxE,CAAC;AAED,MAAI,YAAY,MAAM,OAAO,MAAM,SAAgB,KAAK,CAAC;AACzD,QAAM,SAAc,CAAC;AACrB,WAAS,QAAQ,WAAW;AACzB,WAAO,IAAI,IAAK,MAAc,IAAI;AAAA,EACrC;AACA,SAAO,YAAY,WAAW;AAAA,IAC3B,YAAY,SAAS,YAAY;AAAA,IACjC,MAAM;AAAA,IACN,MAAM;AAAA,IACN,GAAI,SAAgB,CAAC;AAAA,EACxB,CAAC;AACD,SAAO;AACV;AAGA,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/Transition/index.js
CHANGED
|
@@ -78,7 +78,7 @@ const Transition = ({ children, open, ...props }) => {
|
|
|
78
78
|
setCss(open ? to : from);
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
|
-
}, [rendered, open]);
|
|
81
|
+
}, [rendered, open, JSON.stringify(from), JSON.stringify(to)]);
|
|
82
82
|
let _ = {};
|
|
83
83
|
if (rendered) {
|
|
84
84
|
let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
|
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 [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": ";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,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,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;
|
|
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\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, JSON.stringify(from), JSON.stringify(to)])\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
|
}
|