@yamada-ui/ripple 0.1.3 → 0.1.5
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/dist/{chunk-52C4PYSQ.mjs → chunk-6F4CPIWQ.mjs} +7 -3
- package/dist/chunk-6F4CPIWQ.mjs.map +1 -0
- package/dist/index.js +6 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/use-ripple.d.mts +3 -3
- package/dist/use-ripple.d.ts +3 -3
- package/dist/use-ripple.js +6 -2
- package/dist/use-ripple.js.map +1 -1
- package/dist/use-ripple.mjs +1 -1
- package/package.json +3 -3
- package/dist/chunk-52C4PYSQ.mjs.map +0 -1
|
@@ -3,7 +3,7 @@ import { createId, handlerAll } from "@yamada-ui/utils";
|
|
|
3
3
|
import { useCallback, useState } from "react";
|
|
4
4
|
var useRipple = (props) => {
|
|
5
5
|
const [ripples, setRipples] = useState([]);
|
|
6
|
-
const
|
|
6
|
+
const onPointerDown = useCallback((ev) => {
|
|
7
7
|
const trigger = ev.currentTarget;
|
|
8
8
|
const size = Math.max(trigger.clientWidth, trigger.clientHeight);
|
|
9
9
|
const rect = trigger.getBoundingClientRect();
|
|
@@ -20,10 +20,14 @@ var useRipple = (props) => {
|
|
|
20
20
|
const onClear = useCallback((key) => {
|
|
21
21
|
setRipples((prev) => prev.filter((item) => item.key !== key));
|
|
22
22
|
}, []);
|
|
23
|
-
return {
|
|
23
|
+
return {
|
|
24
|
+
ripples,
|
|
25
|
+
onPointerDown: handlerAll(onPointerDown, props.onPointerDown),
|
|
26
|
+
onClear
|
|
27
|
+
};
|
|
24
28
|
};
|
|
25
29
|
|
|
26
30
|
export {
|
|
27
31
|
useRipple
|
|
28
32
|
};
|
|
29
|
-
//# sourceMappingURL=chunk-
|
|
33
|
+
//# sourceMappingURL=chunk-6F4CPIWQ.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/use-ripple.ts"],"sourcesContent":["import { createId, handlerAll } from \"@yamada-ui/utils\"\nimport type React from \"react\"\nimport type { Key, PointerEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\n\nexport type RippleOptions = {\n key: React.Key\n x: number\n y: number\n size: number\n}\n\nexport type UseRippleProps<T extends any = HTMLElement> = {\n onPointerDown?: PointerEventHandler<T>\n}\n\nexport const useRipple = <T extends any = HTMLElement>(\n props: UseRippleProps<T>,\n) => {\n const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n const onPointerDown: PointerEventHandler<T> = useCallback((ev) => {\n const trigger = ev.currentTarget as unknown as Element\n\n const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n const rect = trigger.getBoundingClientRect()\n\n setRipples((prev) => [\n ...prev,\n {\n key: createId(prev.length.toString()),\n size,\n x: ev.clientX - rect.x - size / 2,\n y: ev.clientY - rect.y - size / 2,\n },\n ])\n }, [])\n\n const onClear = useCallback((key: Key) => {\n setRipples((prev) => prev.filter((item) => item.key !== key))\n }, [])\n\n return {\n ripples,\n onPointerDown: handlerAll(onPointerDown, props.onPointerDown),\n onClear,\n }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";AAAA,SAAS,UAAU,kBAAkB;AAGrC,SAAS,aAAa,gBAAgB;AAa/B,IAAM,YAAY,CACvB,UACG;AACH,QAAM,CAAC,SAAS,UAAU,IAAI,SAA0B,CAAC,CAAC;AAE1D,QAAM,gBAAwC,YAAY,CAAC,OAAO;AAChE,UAAM,UAAU,GAAG;AAEnB,UAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;AAC/D,UAAM,OAAO,QAAQ,sBAAsB;AAE3C,eAAW,CAAC,SAAS;AAAA,MACnB,GAAG;AAAA,MACH;AAAA,QACE,KAAK,SAAS,KAAK,OAAO,SAAS,CAAC;AAAA,QACpC;AAAA,QACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,QAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,CAAC,QAAa;AACxC,eAAW,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ,GAAG,CAAC;AAAA,EAC9D,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA,eAAe,WAAW,eAAe,MAAM,aAAa;AAAA,IAC5D;AAAA,EACF;AACF;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -81,7 +81,7 @@ var import_utils2 = require("@yamada-ui/utils");
|
|
|
81
81
|
var import_react = require("react");
|
|
82
82
|
var useRipple = (props) => {
|
|
83
83
|
const [ripples, setRipples] = (0, import_react.useState)([]);
|
|
84
|
-
const
|
|
84
|
+
const onPointerDown = (0, import_react.useCallback)((ev) => {
|
|
85
85
|
const trigger = ev.currentTarget;
|
|
86
86
|
const size = Math.max(trigger.clientWidth, trigger.clientHeight);
|
|
87
87
|
const rect = trigger.getBoundingClientRect();
|
|
@@ -98,7 +98,11 @@ var useRipple = (props) => {
|
|
|
98
98
|
const onClear = (0, import_react.useCallback)((key) => {
|
|
99
99
|
setRipples((prev) => prev.filter((item) => item.key !== key));
|
|
100
100
|
}, []);
|
|
101
|
-
return {
|
|
101
|
+
return {
|
|
102
|
+
ripples,
|
|
103
|
+
onPointerDown: (0, import_utils2.handlerAll)(onPointerDown, props.onPointerDown),
|
|
104
|
+
onClear
|
|
105
|
+
};
|
|
102
106
|
};
|
|
103
107
|
// Annotate the CommonJS export names for ESM import in node:
|
|
104
108
|
0 && (module.exports = {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/ripple.tsx","../src/use-ripple.ts"],"sourcesContent":["export { Ripple } from \"./ripple\"\nexport type { RippleProps } from \"./ripple\"\nexport { useRipple } from \"./use-ripple\"\nexport type {\n RippleOptions,\n UseRippleProps,\n UseRippleReturn,\n} from \"./use-ripple\"\n","import { AnimatePresence, Motion, type MotionProps } from \"@yamada-ui/motion\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { FC, Key } from \"react\"\nimport type { RippleOptions } from \"./use-ripple\"\n\nconst clamp = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), max)\n\nexport type RippleProps = MotionProps<\"span\"> & {\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n isDisabled?: boolean\n ripples: RippleOptions[]\n onClear: (key: Key) => void\n}\n\nexport const Ripple: FC<RippleProps> = ({\n className,\n ripples,\n onAnimationComplete,\n onClear,\n color = \"currentColor\",\n style,\n isDisabled,\n ...rest\n}) => {\n if (isDisabled) return null\n\n return (\n <>\n {ripples.map(({ key, x, y, size }) => {\n const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5)\n\n return (\n <AnimatePresence key={key} mode=\"popLayout\">\n <Motion\n as=\"span\"\n className={cx(\"ui-ripple\", className)}\n initial={{ transform: \"scale(0)\", opacity: 0.35 }}\n animate={{ transform: \"scale(2)\", opacity: 0 }}\n exit={{ opacity: 0 }}\n transition={{ duration }}\n style={{\n position: \"absolute\",\n backgroundColor: color,\n borderRadius: \"100%\",\n transformOrigin: \"center\",\n pointerEvents: \"none\",\n zIndex: 10,\n left: x,\n top: y,\n width: `${size}px`,\n height: `${size}px`,\n ...style,\n }}\n {...rest}\n onAnimationComplete={handlerAll(onAnimationComplete, () =>\n onClear(key),\n )}\n />\n </AnimatePresence>\n )\n })}\n </>\n )\n}\n","import { createId, handlerAll } from \"@yamada-ui/utils\"\nimport type React from \"react\"\nimport type { Key,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/ripple.tsx","../src/use-ripple.ts"],"sourcesContent":["export { Ripple } from \"./ripple\"\nexport type { RippleProps } from \"./ripple\"\nexport { useRipple } from \"./use-ripple\"\nexport type {\n RippleOptions,\n UseRippleProps,\n UseRippleReturn,\n} from \"./use-ripple\"\n","import { AnimatePresence, Motion, type MotionProps } from \"@yamada-ui/motion\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { FC, Key } from \"react\"\nimport type { RippleOptions } from \"./use-ripple\"\n\nconst clamp = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), max)\n\nexport type RippleProps = MotionProps<\"span\"> & {\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n isDisabled?: boolean\n ripples: RippleOptions[]\n onClear: (key: Key) => void\n}\n\nexport const Ripple: FC<RippleProps> = ({\n className,\n ripples,\n onAnimationComplete,\n onClear,\n color = \"currentColor\",\n style,\n isDisabled,\n ...rest\n}) => {\n if (isDisabled) return null\n\n return (\n <>\n {ripples.map(({ key, x, y, size }) => {\n const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5)\n\n return (\n <AnimatePresence key={key} mode=\"popLayout\">\n <Motion\n as=\"span\"\n className={cx(\"ui-ripple\", className)}\n initial={{ transform: \"scale(0)\", opacity: 0.35 }}\n animate={{ transform: \"scale(2)\", opacity: 0 }}\n exit={{ opacity: 0 }}\n transition={{ duration }}\n style={{\n position: \"absolute\",\n backgroundColor: color,\n borderRadius: \"100%\",\n transformOrigin: \"center\",\n pointerEvents: \"none\",\n zIndex: 10,\n left: x,\n top: y,\n width: `${size}px`,\n height: `${size}px`,\n ...style,\n }}\n {...rest}\n onAnimationComplete={handlerAll(onAnimationComplete, () =>\n onClear(key),\n )}\n />\n </AnimatePresence>\n )\n })}\n </>\n )\n}\n","import { createId, handlerAll } from \"@yamada-ui/utils\"\nimport type React from \"react\"\nimport type { Key, PointerEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\n\nexport type RippleOptions = {\n key: React.Key\n x: number\n y: number\n size: number\n}\n\nexport type UseRippleProps<T extends any = HTMLElement> = {\n onPointerDown?: PointerEventHandler<T>\n}\n\nexport const useRipple = <T extends any = HTMLElement>(\n props: UseRippleProps<T>,\n) => {\n const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n const onPointerDown: PointerEventHandler<T> = useCallback((ev) => {\n const trigger = ev.currentTarget as unknown as Element\n\n const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n const rect = trigger.getBoundingClientRect()\n\n setRipples((prev) => [\n ...prev,\n {\n key: createId(prev.length.toString()),\n size,\n x: ev.clientX - rect.x - size / 2,\n y: ev.clientY - rect.y - size / 2,\n },\n ])\n }, [])\n\n const onClear = useCallback((key: Key) => {\n setRipples((prev) => prev.filter((item) => item.key !== key))\n }, [])\n\n return {\n ripples,\n onPointerDown: handlerAll(onPointerDown, props.onPointerDown),\n onClear,\n }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAA0D;AAC1D,mBAA+B;AA+B3B;AA3BJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAa7B,IAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI;AAAY,WAAO;AAEvB,SACE,2EACG,kBAAQ,IAAI,CAAC,EAAE,KAAK,GAAG,GAAG,KAAK,MAAM;AACpC,UAAM,WAAW,MAAM,OAAO,MAAM,KAAK,OAAO,MAAM,OAAO,GAAG;AAEhE,WACE,4CAAC,iCAA0B,MAAK,aAC9B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,eAAW,iBAAG,aAAa,SAAS;AAAA,QACpC,SAAS,EAAE,WAAW,YAAY,SAAS,KAAK;AAAA,QAChD,SAAS,EAAE,WAAW,YAAY,SAAS,EAAE;AAAA,QAC7C,MAAM,EAAE,SAAS,EAAE;AAAA,QACnB,YAAY,EAAE,SAAS;AAAA,QACvB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO,GAAG,IAAI;AAAA,UACd,QAAQ,GAAG,IAAI;AAAA,UACf,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QACJ,yBAAqB;AAAA,UAAW;AAAA,UAAqB,MACnD,QAAQ,GAAG;AAAA,QACb;AAAA;AAAA,IACF,KAzBoB,GA0BtB;AAAA,EAEJ,CAAC,GACH;AAEJ;;;ACpEA,IAAAA,gBAAqC;AAGrC,mBAAsC;AAa/B,IAAM,YAAY,CACvB,UACG;AACH,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA0B,CAAC,CAAC;AAE1D,QAAM,oBAAwC,0BAAY,CAAC,OAAO;AAChE,UAAM,UAAU,GAAG;AAEnB,UAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;AAC/D,UAAM,OAAO,QAAQ,sBAAsB;AAE3C,eAAW,CAAC,SAAS;AAAA,MACnB,GAAG;AAAA,MACH;AAAA,QACE,SAAK,wBAAS,KAAK,OAAO,SAAS,CAAC;AAAA,QACpC;AAAA,QACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,QAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAU,0BAAY,CAAC,QAAa;AACxC,eAAW,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ,GAAG,CAAC;AAAA,EAC9D,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA,mBAAe,0BAAW,eAAe,MAAM,aAAa;AAAA,IAC5D;AAAA,EACF;AACF;","names":["import_utils"]}
|
package/dist/index.mjs
CHANGED
package/dist/use-ripple.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { PointerEventHandler, Key } from 'react';
|
|
2
2
|
|
|
3
3
|
type RippleOptions = {
|
|
4
4
|
key: React.Key;
|
|
@@ -7,11 +7,11 @@ type RippleOptions = {
|
|
|
7
7
|
size: number;
|
|
8
8
|
};
|
|
9
9
|
type UseRippleProps<T extends any = HTMLElement> = {
|
|
10
|
-
|
|
10
|
+
onPointerDown?: PointerEventHandler<T>;
|
|
11
11
|
};
|
|
12
12
|
declare const useRipple: <T extends unknown = HTMLElement>(props: UseRippleProps<T>) => {
|
|
13
13
|
ripples: RippleOptions[];
|
|
14
|
-
|
|
14
|
+
onPointerDown: (event: React.PointerEvent<T>) => void;
|
|
15
15
|
onClear: (key: Key) => void;
|
|
16
16
|
};
|
|
17
17
|
type UseRippleReturn = ReturnType<typeof useRipple>;
|
package/dist/use-ripple.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { PointerEventHandler, Key } from 'react';
|
|
2
2
|
|
|
3
3
|
type RippleOptions = {
|
|
4
4
|
key: React.Key;
|
|
@@ -7,11 +7,11 @@ type RippleOptions = {
|
|
|
7
7
|
size: number;
|
|
8
8
|
};
|
|
9
9
|
type UseRippleProps<T extends any = HTMLElement> = {
|
|
10
|
-
|
|
10
|
+
onPointerDown?: PointerEventHandler<T>;
|
|
11
11
|
};
|
|
12
12
|
declare const useRipple: <T extends unknown = HTMLElement>(props: UseRippleProps<T>) => {
|
|
13
13
|
ripples: RippleOptions[];
|
|
14
|
-
|
|
14
|
+
onPointerDown: (event: React.PointerEvent<T>) => void;
|
|
15
15
|
onClear: (key: Key) => void;
|
|
16
16
|
};
|
|
17
17
|
type UseRippleReturn = ReturnType<typeof useRipple>;
|
package/dist/use-ripple.js
CHANGED
|
@@ -27,7 +27,7 @@ var import_utils = require("@yamada-ui/utils");
|
|
|
27
27
|
var import_react = require("react");
|
|
28
28
|
var useRipple = (props) => {
|
|
29
29
|
const [ripples, setRipples] = (0, import_react.useState)([]);
|
|
30
|
-
const
|
|
30
|
+
const onPointerDown = (0, import_react.useCallback)((ev) => {
|
|
31
31
|
const trigger = ev.currentTarget;
|
|
32
32
|
const size = Math.max(trigger.clientWidth, trigger.clientHeight);
|
|
33
33
|
const rect = trigger.getBoundingClientRect();
|
|
@@ -44,7 +44,11 @@ var useRipple = (props) => {
|
|
|
44
44
|
const onClear = (0, import_react.useCallback)((key) => {
|
|
45
45
|
setRipples((prev) => prev.filter((item) => item.key !== key));
|
|
46
46
|
}, []);
|
|
47
|
-
return {
|
|
47
|
+
return {
|
|
48
|
+
ripples,
|
|
49
|
+
onPointerDown: (0, import_utils.handlerAll)(onPointerDown, props.onPointerDown),
|
|
50
|
+
onClear
|
|
51
|
+
};
|
|
48
52
|
};
|
|
49
53
|
// Annotate the CommonJS export names for ESM import in node:
|
|
50
54
|
0 && (module.exports = {
|
package/dist/use-ripple.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/use-ripple.ts"],"sourcesContent":["import { createId, handlerAll } from \"@yamada-ui/utils\"\nimport type React from \"react\"\nimport type { Key,
|
|
1
|
+
{"version":3,"sources":["../src/use-ripple.ts"],"sourcesContent":["import { createId, handlerAll } from \"@yamada-ui/utils\"\nimport type React from \"react\"\nimport type { Key, PointerEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\n\nexport type RippleOptions = {\n key: React.Key\n x: number\n y: number\n size: number\n}\n\nexport type UseRippleProps<T extends any = HTMLElement> = {\n onPointerDown?: PointerEventHandler<T>\n}\n\nexport const useRipple = <T extends any = HTMLElement>(\n props: UseRippleProps<T>,\n) => {\n const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n const onPointerDown: PointerEventHandler<T> = useCallback((ev) => {\n const trigger = ev.currentTarget as unknown as Element\n\n const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n const rect = trigger.getBoundingClientRect()\n\n setRipples((prev) => [\n ...prev,\n {\n key: createId(prev.length.toString()),\n size,\n x: ev.clientX - rect.x - size / 2,\n y: ev.clientY - rect.y - size / 2,\n },\n ])\n }, [])\n\n const onClear = useCallback((key: Key) => {\n setRipples((prev) => prev.filter((item) => item.key !== key))\n }, [])\n\n return {\n ripples,\n onPointerDown: handlerAll(onPointerDown, props.onPointerDown),\n onClear,\n }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AAGrC,mBAAsC;AAa/B,IAAM,YAAY,CACvB,UACG;AACH,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA0B,CAAC,CAAC;AAE1D,QAAM,oBAAwC,0BAAY,CAAC,OAAO;AAChE,UAAM,UAAU,GAAG;AAEnB,UAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;AAC/D,UAAM,OAAO,QAAQ,sBAAsB;AAE3C,eAAW,CAAC,SAAS;AAAA,MACnB,GAAG;AAAA,MACH;AAAA,QACE,SAAK,uBAAS,KAAK,OAAO,SAAS,CAAC;AAAA,QACpC;AAAA,QACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,QAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAU,0BAAY,CAAC,QAAa;AACxC,eAAW,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ,GAAG,CAAC;AAAA,EAC9D,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA,mBAAe,yBAAW,eAAe,MAAM,aAAa;AAAA,IAC5D;AAAA,EACF;AACF;","names":[]}
|
package/dist/use-ripple.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/ripple",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "Yamada UI ripple component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@yamada-ui/core": "0.
|
|
25
|
+
"@yamada-ui/core": "0.15.0",
|
|
26
26
|
"@yamada-ui/utils": "0.5.0",
|
|
27
|
-
"@yamada-ui/motion": "0.4.
|
|
27
|
+
"@yamada-ui/motion": "0.4.25"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"react": "^18.0.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/use-ripple.ts"],"sourcesContent":["import { createId, handlerAll } from \"@yamada-ui/utils\"\nimport type React from \"react\"\nimport type { Key, MouseEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\n\nexport type RippleOptions = {\n key: React.Key\n x: number\n y: number\n size: number\n}\n\nexport type UseRippleProps<T extends any = HTMLElement> = {\n onClick?: MouseEventHandler<T>\n}\n\nexport const useRipple = <T extends any = HTMLElement>(\n props: UseRippleProps<T>,\n) => {\n const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n const onClick: MouseEventHandler<T> = useCallback((ev) => {\n const trigger = ev.currentTarget as unknown as Element\n\n const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n const rect = trigger.getBoundingClientRect()\n\n setRipples((prev) => [\n ...prev,\n {\n key: createId(prev.length.toString()),\n size,\n x: ev.clientX - rect.x - size / 2,\n y: ev.clientY - rect.y - size / 2,\n },\n ])\n }, [])\n\n const onClear = useCallback((key: Key) => {\n setRipples((prev) => prev.filter((item) => item.key !== key))\n }, [])\n\n return { ripples, onClick: handlerAll(onClick, props.onClick), onClear }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";AAAA,SAAS,UAAU,kBAAkB;AAGrC,SAAS,aAAa,gBAAgB;AAa/B,IAAM,YAAY,CACvB,UACG;AACH,QAAM,CAAC,SAAS,UAAU,IAAI,SAA0B,CAAC,CAAC;AAE1D,QAAM,UAAgC,YAAY,CAAC,OAAO;AACxD,UAAM,UAAU,GAAG;AAEnB,UAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;AAC/D,UAAM,OAAO,QAAQ,sBAAsB;AAE3C,eAAW,CAAC,SAAS;AAAA,MACnB,GAAG;AAAA,MACH;AAAA,QACE,KAAK,SAAS,KAAK,OAAO,SAAS,CAAC;AAAA,QACpC;AAAA,QACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,QAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,CAAC,QAAa;AACxC,eAAW,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ,GAAG,CAAC;AAAA,EAC9D,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,SAAS,SAAS,WAAW,SAAS,MAAM,OAAO,GAAG,QAAQ;AACzE;","names":[]}
|