@tapcart/mobile-components 0.7.70 → 0.7.71
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/components/hooks/use-click-outside.d.ts +6 -0
- package/dist/components/hooks/use-click-outside.d.ts.map +1 -0
- package/dist/components/hooks/use-click-outside.js +15 -0
- package/dist/components/hooks/use-outside-click.d.ts +7 -0
- package/dist/components/hooks/use-outside-click.d.ts.map +1 -0
- package/dist/components/hooks/use-outside-click.js +16 -0
- package/dist/components/hooks/use-tap.d.ts +8 -0
- package/dist/components/hooks/use-tap.d.ts.map +1 -0
- package/dist/components/hooks/use-tap.js +100 -0
- package/dist/components/ui/icon.d.ts.map +1 -1
- package/dist/components/ui/icon.js +2 -1
- package/package.json +20 -20
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-click-outside.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAE,IAAI,CAa5F"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
import React from "react"
|
|
3
|
+
export function useClickOutside(ref, callback) {
|
|
4
|
+
React.useEffect(() => {
|
|
5
|
+
const handleClickOutside = (event) => {
|
|
6
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
7
|
+
callback()
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
document.addEventListener("mousedown", handleClickOutside)
|
|
11
|
+
return () => {
|
|
12
|
+
document.removeEventListener("mousedown", handleClickOutside)
|
|
13
|
+
}
|
|
14
|
+
}, [ref, callback])
|
|
15
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-outside-click.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-outside-click.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,eAAe,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,YAAY,MAAM,IAAI,SAa/E,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
import React from "react"
|
|
3
|
+
const useClickOutside = (ref, callback) => {
|
|
4
|
+
React.useEffect(() => {
|
|
5
|
+
const handleClickOutside = (event) => {
|
|
6
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
7
|
+
callback()
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
document.addEventListener("mousedown", handleClickOutside)
|
|
11
|
+
return () => {
|
|
12
|
+
document.removeEventListener("mousedown", handleClickOutside)
|
|
13
|
+
}
|
|
14
|
+
}, [ref, callback])
|
|
15
|
+
}
|
|
16
|
+
export default useClickOutside
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,100 @@
|
|
|
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) return
|
|
9
|
+
const handleTouchStart = (e) => {
|
|
10
|
+
const touch = e.touches[0]
|
|
11
|
+
elements.forEach((data, el) => {
|
|
12
|
+
if (el.contains(touch.target)) {
|
|
13
|
+
data.touchStarted = true
|
|
14
|
+
data.touchMoved = false
|
|
15
|
+
data.startPosition = { x: touch.clientX, y: touch.clientY }
|
|
16
|
+
// Don't set isPressed here, wait to determine if it's a tap or drag
|
|
17
|
+
}
|
|
18
|
+
})
|
|
19
|
+
}
|
|
20
|
+
const handleTouchMove = (e) => {
|
|
21
|
+
const touch = e.touches[0]
|
|
22
|
+
elements.forEach((data, el) => {
|
|
23
|
+
if (data.touchStarted) {
|
|
24
|
+
const deltaX = Math.abs(touch.clientX - data.startPosition.x)
|
|
25
|
+
const deltaY = Math.abs(touch.clientY - data.startPosition.y)
|
|
26
|
+
if (deltaX > data.tapThreshold || deltaY > data.tapThreshold) {
|
|
27
|
+
data.touchMoved = true
|
|
28
|
+
data.setIsPressed(false)
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
})
|
|
32
|
+
}
|
|
33
|
+
const handleTouchEnd = () => {
|
|
34
|
+
elements.forEach((data) => {
|
|
35
|
+
if (data.touchStarted) {
|
|
36
|
+
data.touchStarted = false
|
|
37
|
+
if (!data.touchMoved) {
|
|
38
|
+
// It's a tap, set isPressed briefly
|
|
39
|
+
data.setIsPressed(true)
|
|
40
|
+
setTimeout(() => data.setIsPressed(false), 100)
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
})
|
|
44
|
+
}
|
|
45
|
+
document.addEventListener("touchstart", (e) => handleTouchStart(e), {
|
|
46
|
+
passive: true,
|
|
47
|
+
})
|
|
48
|
+
document.addEventListener("touchmove", (e) => handleTouchMove(e), {
|
|
49
|
+
passive: true,
|
|
50
|
+
})
|
|
51
|
+
document.addEventListener("touchend", () => handleTouchEnd(), {
|
|
52
|
+
passive: true,
|
|
53
|
+
})
|
|
54
|
+
isListening = true
|
|
55
|
+
}
|
|
56
|
+
return {
|
|
57
|
+
register: (el, data) => {
|
|
58
|
+
elements.set(el, data)
|
|
59
|
+
startListening()
|
|
60
|
+
},
|
|
61
|
+
unregister: (el) => {
|
|
62
|
+
elements.delete(el)
|
|
63
|
+
},
|
|
64
|
+
elements,
|
|
65
|
+
}
|
|
66
|
+
})()
|
|
67
|
+
const useTap = (tapThreshold = 10) => {
|
|
68
|
+
const [isPressed, setIsPressed] = useState(false)
|
|
69
|
+
const elementRef = useRef(null)
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
const element = elementRef.current
|
|
72
|
+
if (!element) return
|
|
73
|
+
const data = {
|
|
74
|
+
touchStarted: false,
|
|
75
|
+
touchMoved: false,
|
|
76
|
+
startPosition: { x: 0, y: 0 },
|
|
77
|
+
setIsPressed,
|
|
78
|
+
tapThreshold,
|
|
79
|
+
}
|
|
80
|
+
tapManager.register(element, data)
|
|
81
|
+
return () => {
|
|
82
|
+
tapManager.unregister(element)
|
|
83
|
+
}
|
|
84
|
+
}, [tapThreshold])
|
|
85
|
+
const onTap = useCallback((handler) => {
|
|
86
|
+
return (event) => {
|
|
87
|
+
const data = tapManager.elements.get(elementRef.current)
|
|
88
|
+
if (!data) return
|
|
89
|
+
if (event.type === "touchend" && !data.touchMoved) {
|
|
90
|
+
handler(event)
|
|
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 }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAwChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AA4DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AA0HD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,2CAoBX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
import { ReactSVG } from "react-svg";
|
|
15
15
|
import { cva } from "class-variance-authority";
|
|
16
|
-
import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconChevronLeft, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff, IconStarFilled, IconShoppingBagPlus, IconShieldCheckFilled, IconShoppingBag, } from "@tabler/icons-react";
|
|
16
|
+
import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconChevronLeft, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff, IconStarFilled, IconShoppingBagPlus, IconShieldCheckFilled, IconShoppingBag, IconHeartCancel, } from "@tabler/icons-react";
|
|
17
17
|
import { cn, iconColorVariantClasses } from "../../lib/utils";
|
|
18
18
|
const iconVariants = cva("inline-flex items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", {
|
|
19
19
|
variants: {
|
|
@@ -82,6 +82,7 @@ const icons = {
|
|
|
82
82
|
"shopping-bag": IconShoppingBag,
|
|
83
83
|
"shopping-bag-plus": IconShoppingBagPlus,
|
|
84
84
|
"shield-check-filled": IconShieldCheckFilled,
|
|
85
|
+
"heart-cancel": IconHeartCancel,
|
|
85
86
|
};
|
|
86
87
|
const TablerIcon = ({ name, size }) => {
|
|
87
88
|
const IconComponent = icons[name];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tapcart/mobile-components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.71",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"style": "dist/styles.css",
|
|
@@ -11,20 +11,6 @@
|
|
|
11
11
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
12
12
|
"author": "Tapcart Inc.",
|
|
13
13
|
"homepage": "https://tapcart.com",
|
|
14
|
-
"scripts": {
|
|
15
|
-
"clean": "rm -rf dist node_modules",
|
|
16
|
-
"lint": "eslint \"**/*.ts*\"",
|
|
17
|
-
"ui:add": "pnpm dlx shadcn-ui@latest add",
|
|
18
|
-
"build:styles": "postcss styles/globals.css -o dist/styles.css",
|
|
19
|
-
"build:ts": "tsc -p tsconfig.json && tsc-alias",
|
|
20
|
-
"build": "pnpm run build:ts && pnpm run build:styles",
|
|
21
|
-
"dev:ts": "tsc -w -p tsconfig.json",
|
|
22
|
-
"dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
|
|
23
|
-
"dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
|
|
24
|
-
"test": "jest",
|
|
25
|
-
"test:silent": "jest --silent",
|
|
26
|
-
"test:watch": "jest --watch"
|
|
27
|
-
},
|
|
28
14
|
"peerDependencies": {
|
|
29
15
|
"react": "^17.0.2 || ^18.0.0",
|
|
30
16
|
"react-dom": "^17.0.2 || ^18.0.0"
|
|
@@ -37,20 +23,20 @@
|
|
|
37
23
|
"@types/pluralize": "^0.0.33",
|
|
38
24
|
"@types/react": "^18.2.0",
|
|
39
25
|
"@types/react-dom": "^18.2.0",
|
|
40
|
-
"app-studio-types": "workspace:*",
|
|
41
26
|
"autoprefixer": "^10.4.14",
|
|
42
27
|
"chokidar-cli": "^3.0.0",
|
|
43
28
|
"concurrently": "^8.2.2",
|
|
44
29
|
"eslint": "^7.32.0",
|
|
45
|
-
"eslint-config-custom": "workspace:*",
|
|
46
30
|
"jest": "^29.7.0",
|
|
47
31
|
"jest-environment-jsdom": "^29.7.0",
|
|
48
32
|
"postcss": "^8.4.24",
|
|
49
33
|
"tailwindcss": "^3.3.2",
|
|
50
34
|
"ts-jest": "^29.2.5",
|
|
51
35
|
"tsc-alias": "^1.8.10",
|
|
52
|
-
"
|
|
53
|
-
"
|
|
36
|
+
"typescript": "^4.5.2",
|
|
37
|
+
"tsconfig": "0.0.0",
|
|
38
|
+
"eslint-config-custom": "0.0.0",
|
|
39
|
+
"app-studio-types": "0.0.9"
|
|
54
40
|
},
|
|
55
41
|
"dependencies": {
|
|
56
42
|
"@radix-ui/react-accordion": "^1.1.2",
|
|
@@ -90,5 +76,19 @@
|
|
|
90
76
|
"tailwind-merge": "^1.13.2",
|
|
91
77
|
"tailwindcss-animate": "^1.0.6",
|
|
92
78
|
"vaul": "0.9.1"
|
|
79
|
+
},
|
|
80
|
+
"scripts": {
|
|
81
|
+
"clean": "rm -rf dist node_modules",
|
|
82
|
+
"lint": "eslint \"**/*.ts*\"",
|
|
83
|
+
"ui:add": "pnpm dlx shadcn-ui@latest add",
|
|
84
|
+
"build:styles": "postcss styles/globals.css -o dist/styles.css",
|
|
85
|
+
"build:ts": "tsc -p tsconfig.json && tsc-alias",
|
|
86
|
+
"build": "pnpm run build:ts && pnpm run build:styles",
|
|
87
|
+
"dev:ts": "tsc -w -p tsconfig.json",
|
|
88
|
+
"dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
|
|
89
|
+
"dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
|
|
90
|
+
"test": "jest",
|
|
91
|
+
"test:silent": "jest --silent",
|
|
92
|
+
"test:watch": "jest --watch"
|
|
93
93
|
}
|
|
94
|
-
}
|
|
94
|
+
}
|