@tapcart/mobile-components 0.6.17 → 0.6.18

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.
@@ -1 +1 @@
1
- {"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,cAAc,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAA;CAC9B,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CA8B7E"}
1
+ {"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,cAAc,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAA;CAC9B,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CA8B7E"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import useSWR from "swr";
2
3
  export function useProducts(props) {
3
4
  let url = null;
@@ -15,6 +15,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
15
15
  iconColor?: string;
16
16
  iconSize?: string;
17
17
  iconStrokeColor?: string;
18
+ iconClassName?: string;
18
19
  iconPosition?: "left" | "right";
19
20
  }
20
21
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAIxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFA6FX,CAAA;AAGD,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAIxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFA8FX,CAAA;AAGD,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}
@@ -16,7 +16,7 @@ import { cva } from "class-variance-authority";
16
16
  import { cn, getColor, getTextStyle, getBackgroundAndPaddingStyle, } from "../../lib/utils";
17
17
  import { Icon } from "./icon";
18
18
  import { Text } from "./text";
19
- const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors disabled:bg-stateColors-disabled disabled:border-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate active:opacity-70 disabled:opacity-70 cursor-pointer", {
19
+ const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors disabled:bg-stateColors-disabled disabled:border-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate active:opacity-70 disabled:opacity-70", {
20
20
  variants: {
21
21
  size: {
22
22
  default: "py-3 px-4",
@@ -79,13 +79,13 @@ const labelVariants = cva("truncate", {
79
79
  },
80
80
  });
81
81
  const Button = React.forwardRef((_a, ref) => {
82
- var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconStrokeColor, iconPosition, iconSize, iconUrl } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconStrokeColor", "iconPosition", "iconSize", "iconUrl"]);
82
+ var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconStrokeColor, iconPosition, iconSize, iconUrl, iconClassName } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconStrokeColor", "iconPosition", "iconSize", "iconUrl", "iconClassName"]);
83
83
  const Comp = asChild ? Slot : "button";
84
84
  const IconButton = () => icon || iconUrl ? (_jsx(Icon, { name: icon, size: "sm", style: { color: iconColor } })) : null;
85
85
  const BasicButton = () => (_jsxs(_Fragment, { children: [icon || iconUrl ? (_jsx(Icon, { name: iconUrl ? undefined : icon, url: iconUrl, size: iconSize || variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), {
86
86
  "mr-2": iconPosition === "left",
87
87
  "ml-2": iconPosition === "right",
88
- }), strokeColor: iconStrokeColor, style: { color: iconColor, stroke: iconColor, fill: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
88
+ }, iconClassName), strokeColor: iconStrokeColor, style: { color: iconColor, stroke: iconColor, fill: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
89
89
  const LoadingButton = () => (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader", style: { color: iconColor } }) })));
90
90
  return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
91
91
  "pointer-events-none": loading,
package/dist/index.d.ts CHANGED
@@ -51,5 +51,4 @@ export * from "./components/ui/wishlist-select";
51
51
  export * from "./components/hooks/use-shop";
52
52
  export * from "./components/libs/sort-filter/search-integration";
53
53
  export * from "./components/ui/subcollection-tabs";
54
- export * from "./components/hooks/use-tap";
55
54
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA;AAChE,cAAc,oCAAoC,CAAA;AAClD,cAAc,4BAA4B,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA;AAChE,cAAc,oCAAoC,CAAA"}
package/dist/index.js CHANGED
@@ -52,4 +52,3 @@ export * from "./components/ui/wishlist-select";
52
52
  export * from "./components/hooks/use-shop";
53
53
  export * from "./components/libs/sort-filter/search-integration";
54
54
  export * from "./components/ui/subcollection-tabs";
55
- export * from "./components/hooks/use-tap";
package/dist/styles.css CHANGED
@@ -2047,9 +2047,6 @@ video {
2047
2047
  .opacity-50 {
2048
2048
  opacity: 0.5;
2049
2049
  }
2050
- .opacity-70 {
2051
- opacity: 0.7;
2052
- }
2053
2050
  .shadow {
2054
2051
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2055
2052
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tapcart/mobile-components",
3
- "version": "0.6.17",
3
+ "version": "0.6.18",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "style": "dist/styles.css",
@@ -11,16 +11,6 @@
11
11
  "license": "SEE LICENSE IN LICENSE.md",
12
12
  "author": "Tapcart Inc.",
13
13
  "homepage": "https://tapcart.com",
14
- "scripts": {
15
- "lint": "eslint \"**/*.ts*\"",
16
- "ui:add": "pnpm dlx shadcn-ui@latest add",
17
- "build:styles": "postcss styles/globals.css -o dist/styles.css",
18
- "build:ts": "tsc -p tsconfig.json && tsc-alias",
19
- "build": "pnpm run build:ts && pnpm run build:styles",
20
- "dev:ts": "tsc -w -p tsconfig.json",
21
- "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
22
- "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\""
23
- },
24
14
  "peerDependencies": {
25
15
  "react": "^17.0.2 || ^18.0.0",
26
16
  "react-dom": "^17.0.2 || ^18.0.0"
@@ -29,17 +19,17 @@
29
19
  "@types/lodash": "4.17.5",
30
20
  "@types/react": "^18.2.0",
31
21
  "@types/react-dom": "^18.2.0",
32
- "app-studio-types": "workspace:*",
33
22
  "autoprefixer": "^10.4.14",
34
23
  "chokidar-cli": "^3.0.0",
35
24
  "concurrently": "^8.2.2",
36
25
  "eslint": "^7.32.0",
37
- "eslint-config-custom": "workspace:*",
38
26
  "postcss": "^8.4.24",
39
27
  "tailwindcss": "^3.3.2",
40
28
  "tsc-alias": "^1.8.10",
41
- "tsconfig": "workspace:*",
42
- "typescript": "^4.5.2"
29
+ "typescript": "^4.5.2",
30
+ "app-studio-types": "0.0.3",
31
+ "tsconfig": "0.0.0",
32
+ "eslint-config-custom": "0.0.0"
43
33
  },
44
34
  "dependencies": {
45
35
  "@radix-ui/react-accordion": "^1.1.2",
@@ -73,5 +63,15 @@
73
63
  "tailwind-merge": "^1.13.2",
74
64
  "tailwindcss-animate": "^1.0.6",
75
65
  "vaul": "^0.9.1"
66
+ },
67
+ "scripts": {
68
+ "lint": "eslint \"**/*.ts*\"",
69
+ "ui:add": "pnpm dlx shadcn-ui@latest add",
70
+ "build:styles": "postcss styles/globals.css -o dist/styles.css",
71
+ "build:ts": "tsc -p tsconfig.json && tsc-alias",
72
+ "build": "pnpm run build:ts && pnpm run build:styles",
73
+ "dev:ts": "tsc -w -p tsconfig.json",
74
+ "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
75
+ "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\""
76
76
  }
77
77
  }
@@ -1,8 +0,0 @@
1
- import React from "react";
2
- declare const useTap: (tapThreshold?: number) => {
3
- onTap: (handler: (event: any) => void) => (event: any) => void;
4
- isPressed: boolean;
5
- ref: React.MutableRefObject<null>;
6
- };
7
- export { useTap };
8
- //# sourceMappingURL=use-tap.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-tap.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-tap.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAuFvE,QAAA,MAAM,MAAM;6BAuBkC,GAAG,KAAK,IAAI,aACvC,GAAG;;;CAerB,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
@@ -1,100 +0,0 @@
1
- "use client";
2
- import { useState, useEffect, useCallback, useRef } from "react";
3
- // Shared manager for all instances of the hook
4
- const tapManager = (() => {
5
- const elements = new Map();
6
- let isListening = false;
7
- const startListening = () => {
8
- if (isListening)
9
- return;
10
- const handleTouchStart = (e) => {
11
- const touch = e.touches[0];
12
- elements.forEach((data, el) => {
13
- if (el.contains(touch.target)) {
14
- data.touchStarted = true;
15
- data.touchMoved = false;
16
- data.startPosition = { x: touch.clientX, y: touch.clientY };
17
- // Don't set isPressed here, wait to determine if it's a tap or drag
18
- }
19
- });
20
- };
21
- const handleTouchMove = (e) => {
22
- const touch = e.touches[0];
23
- elements.forEach((data, el) => {
24
- if (data.touchStarted) {
25
- const deltaX = Math.abs(touch.clientX - data.startPosition.x);
26
- const deltaY = Math.abs(touch.clientY - data.startPosition.y);
27
- if (deltaX > data.tapThreshold || deltaY > data.tapThreshold) {
28
- data.touchMoved = true;
29
- data.setIsPressed(false);
30
- }
31
- }
32
- });
33
- };
34
- const handleTouchEnd = () => {
35
- elements.forEach((data) => {
36
- if (data.touchStarted) {
37
- data.touchStarted = false;
38
- if (!data.touchMoved) {
39
- // It's a tap, set isPressed briefly
40
- data.setIsPressed(true);
41
- setTimeout(() => data.setIsPressed(false), 100);
42
- }
43
- }
44
- });
45
- };
46
- document.addEventListener("touchstart", (e) => handleTouchStart(e), { passive: true });
47
- document.addEventListener("touchmove", (e) => handleTouchMove(e), { passive: true });
48
- document.addEventListener("touchend", () => handleTouchEnd(), {
49
- passive: true,
50
- });
51
- isListening = true;
52
- };
53
- return {
54
- register: (el, data) => {
55
- elements.set(el, data);
56
- startListening();
57
- },
58
- unregister: (el) => {
59
- elements.delete(el);
60
- },
61
- elements,
62
- };
63
- })();
64
- const useTap = (tapThreshold = 10) => {
65
- const [isPressed, setIsPressed] = useState(false);
66
- const elementRef = useRef(null);
67
- useEffect(() => {
68
- const element = elementRef.current;
69
- if (!element)
70
- return;
71
- const data = {
72
- touchStarted: false,
73
- touchMoved: false,
74
- startPosition: { x: 0, y: 0 },
75
- setIsPressed,
76
- tapThreshold,
77
- };
78
- tapManager.register(element, data);
79
- return () => {
80
- tapManager.unregister(element);
81
- };
82
- }, [tapThreshold]);
83
- const onTap = useCallback((handler) => {
84
- return (event) => {
85
- const data = tapManager.elements.get(elementRef.current);
86
- if (!data)
87
- return;
88
- if (event.type === "touchend" && !data.touchMoved) {
89
- handler(event);
90
- }
91
- else if (event.type === "click" && !data.touchStarted) {
92
- handler(event);
93
- setIsPressed(true);
94
- setTimeout(() => setIsPressed(false), 100);
95
- }
96
- };
97
- }, []);
98
- return { onTap, isPressed, ref: elementRef };
99
- };
100
- export { useTap };