@tapcart/mobile-components 0.6.1 → 0.6.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/dist/components/hooks/use-click-outside.d.ts +8 -0
- package/dist/components/hooks/use-click-outside.d.ts.map +1 -0
- package/dist/components/hooks/use-click-outside.js +46 -0
- package/dist/components/hooks/use-collection.d.ts +25 -0
- package/dist/components/hooks/use-collection.d.ts.map +1 -0
- package/dist/components/hooks/use-collection.js +74 -0
- package/dist/components/hooks/use-products.d.ts +3 -2
- package/dist/components/hooks/use-products.d.ts.map +1 -1
- package/dist/components/hooks/use-products.js +12 -3
- package/dist/components/hooks/use-pull-to-refresh.d.ts +9 -0
- package/dist/components/hooks/use-pull-to-refresh.d.ts.map +1 -0
- package/dist/components/hooks/use-pull-to-refresh.js +88 -0
- package/dist/components/ui/accordion.d.ts +3 -1
- package/dist/components/ui/accordion.d.ts.map +1 -1
- package/dist/components/ui/accordion.js +2 -2
- package/dist/components/ui/badge.d.ts +1 -1
- package/dist/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/button.js +7 -2
- package/dist/components/ui/chip.d.ts +2 -2
- package/dist/components/ui/chip.js +1 -1
- package/dist/components/ui/favorite/favorite.d.ts +16 -0
- package/dist/components/ui/favorite/favorite.d.ts.map +1 -0
- package/dist/components/ui/favorite/favorite.js +156 -0
- package/dist/components/ui/favorite/favorite.spec.d.ts +2 -0
- package/dist/components/ui/favorite/favorite.spec.d.ts.map +1 -0
- package/dist/components/ui/favorite/favorite.spec.js +6 -0
- package/dist/components/ui/favorite/index.d.ts +2 -0
- package/dist/components/ui/favorite/index.d.ts.map +1 -0
- package/dist/components/ui/favorite/index.js +1 -0
- package/dist/components/ui/favorite.d.ts +1 -1
- package/dist/components/ui/favorite.d.ts.map +1 -1
- package/dist/components/ui/favorite.js +4 -4
- package/dist/components/ui/grid.d.ts +1 -1
- package/dist/components/ui/icon.d.ts.map +1 -1
- package/dist/components/ui/icon.js +9 -54
- package/dist/components/ui/product-card.d.ts.map +1 -1
- package/dist/components/ui/product-card.js +13 -17
- package/dist/components/ui/quantity-picker.js +2 -2
- package/dist/components/ui/select.d.ts +39 -0
- package/dist/components/ui/select.d.ts.map +1 -0
- package/dist/components/ui/select.js +87 -0
- package/dist/components/ui/selectors.d.ts.map +1 -1
- package/dist/components/ui/selectors.js +1 -1
- package/dist/components/ui/slider.js +1 -1
- package/dist/components/ui/text.d.ts.map +1 -1
- package/dist/components/ui/text.js +3 -3
- package/dist/components/ui/textarea.d.ts.map +1 -1
- package/dist/components/ui/textarea.js +5 -1
- package/dist/components/ui/wishlist-select.d.ts +43 -0
- package/dist/components/ui/wishlist-select.d.ts.map +1 -0
- package/dist/components/ui/wishlist-select.js +88 -0
- package/dist/components/ui/wishlist.d.ts +15 -4
- package/dist/components/ui/wishlist.d.ts.map +1 -1
- package/dist/components/ui/wishlist.js +12 -4
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/lib/utils.d.ts +91 -0
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js +76 -1
- package/dist/styles.css +103 -10
- package/package.json +3 -2
- package/dist/components/ThemeProvider.d.ts +0 -3
- package/dist/components/ThemeProvider.d.ts.map +0 -1
- package/dist/components/ThemeProvider.js +0 -18
- package/dist/components/ThemeToggle.d.ts +0 -2
- package/dist/components/ThemeToggle.d.ts.map +0 -1
- package/dist/components/ThemeToggle.js +0 -8
- package/dist/components/ui/input.d.ts +0 -17
- package/dist/components/ui/input.d.ts.map +0 -1
- package/dist/components/ui/input.js +0 -35
- package/dist/components/ui/product-grid.d.ts +0 -15
- package/dist/components/ui/product-grid.d.ts.map +0 -1
- package/dist/components/ui/product-grid.js +0 -22
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { RefObject } from "react";
|
|
2
|
+
type Handler = () => void;
|
|
3
|
+
interface UseClickOutsideOptions {
|
|
4
|
+
enabled?: boolean;
|
|
5
|
+
}
|
|
6
|
+
declare function useClickOutside<T extends HTMLElement = HTMLElement>(handler: Handler, options?: UseClickOutsideOptions): RefObject<T>;
|
|
7
|
+
export default useClickOutside;
|
|
8
|
+
//# sourceMappingURL=use-click-outside.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-click-outside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,KAAK,OAAO,GAAG,MAAM,IAAI,CAAA;AAEzB,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iBAAS,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC1D,OAAO,EAAE,OAAO,EAChB,OAAO,GAAE,sBAA2B,GACnC,SAAS,CAAC,CAAC,CAAC,CAqDd;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { useEffect, useRef } from "react";
|
|
2
|
+
function useClickOutside(handler, options = {}) {
|
|
3
|
+
const { enabled = true } = options;
|
|
4
|
+
const ref = useRef(null);
|
|
5
|
+
const touchStartRef = useRef(null);
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (!enabled)
|
|
8
|
+
return;
|
|
9
|
+
const handleOutsideInteraction = (event) => {
|
|
10
|
+
if (!ref.current || ref.current.contains(event.target))
|
|
11
|
+
return;
|
|
12
|
+
handler();
|
|
13
|
+
};
|
|
14
|
+
const handleTouchStart = (event) => {
|
|
15
|
+
touchStartRef.current = {
|
|
16
|
+
x: event.touches[0].clientX,
|
|
17
|
+
y: event.touches[0].clientY,
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
const handleTouchEnd = (event) => {
|
|
21
|
+
if (!touchStartRef.current)
|
|
22
|
+
return;
|
|
23
|
+
const touchEnd = {
|
|
24
|
+
x: event.changedTouches[0].clientX,
|
|
25
|
+
y: event.changedTouches[0].clientY,
|
|
26
|
+
};
|
|
27
|
+
const distance = Math.sqrt(Math.pow(touchEnd.x - touchStartRef.current.x, 2) +
|
|
28
|
+
Math.pow(touchEnd.y - touchStartRef.current.y, 2));
|
|
29
|
+
if (distance < 10) {
|
|
30
|
+
// Treat as a tap if the finger didn't move much
|
|
31
|
+
handleOutsideInteraction(event);
|
|
32
|
+
}
|
|
33
|
+
touchStartRef.current = null;
|
|
34
|
+
};
|
|
35
|
+
document.addEventListener("mousedown", handleOutsideInteraction);
|
|
36
|
+
document.addEventListener("touchstart", handleTouchStart);
|
|
37
|
+
document.addEventListener("touchend", handleTouchEnd);
|
|
38
|
+
return () => {
|
|
39
|
+
document.removeEventListener("mousedown", handleOutsideInteraction);
|
|
40
|
+
document.removeEventListener("touchstart", handleTouchStart);
|
|
41
|
+
document.removeEventListener("touchend", handleTouchEnd);
|
|
42
|
+
};
|
|
43
|
+
}, [handler, enabled]);
|
|
44
|
+
return ref;
|
|
45
|
+
}
|
|
46
|
+
export default useClickOutside;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
interface Collection {
|
|
2
|
+
id: string;
|
|
3
|
+
title: string;
|
|
4
|
+
handle: string;
|
|
5
|
+
products: Product[];
|
|
6
|
+
}
|
|
7
|
+
interface UseCollectionProps {
|
|
8
|
+
apiUrl: string;
|
|
9
|
+
appId: string;
|
|
10
|
+
collectionId?: string;
|
|
11
|
+
collectionHandle?: string;
|
|
12
|
+
language: string;
|
|
13
|
+
getCollections?: boolean;
|
|
14
|
+
}
|
|
15
|
+
interface Product {
|
|
16
|
+
handle: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const useCollection: ({ apiUrl, appId, collectionId, collectionHandle, language, getCollections, }: UseCollectionProps) => {
|
|
19
|
+
collections: Collection[] | null;
|
|
20
|
+
specificCollection: Collection | null;
|
|
21
|
+
loading: boolean;
|
|
22
|
+
error: string | null;
|
|
23
|
+
};
|
|
24
|
+
export {};
|
|
25
|
+
//# sourceMappingURL=use-collection.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-collection.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-collection.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAC;CAEhB;AAED,eAAO,MAAM,aAAa,iFAQrB,kBAAkB;;;;;CAwEtB,CAAC"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
import { useState, useEffect } from "react";
|
|
12
|
+
export const useCollection = ({ apiUrl, appId, collectionId, collectionHandle, language, getCollections = false, }) => {
|
|
13
|
+
const [collections, setCollections] = useState(null);
|
|
14
|
+
const [specificCollection, setSpecificCollection] = useState(null);
|
|
15
|
+
const [loading, setLoading] = useState(true);
|
|
16
|
+
const [error, setError] = useState(null);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const fetchCollections = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
19
|
+
try {
|
|
20
|
+
const allCollectionsUrl = `${apiUrl}/collections/by-app-id`;
|
|
21
|
+
let specificCollectionUrl = null;
|
|
22
|
+
if (collectionId || collectionHandle) {
|
|
23
|
+
// Fetch specific collection by ID or handle
|
|
24
|
+
const params = new URLSearchParams({
|
|
25
|
+
collectionHandle: collectionHandle || "",
|
|
26
|
+
collectionId: collectionId || "",
|
|
27
|
+
language,
|
|
28
|
+
}).toString();
|
|
29
|
+
const collectionBy = collectionHandle ? "by-handle" : "by-id";
|
|
30
|
+
specificCollectionUrl = `${apiUrl}/collections/${collectionBy}?${params}`;
|
|
31
|
+
}
|
|
32
|
+
const fetchAllCollections = allCollectionsUrl
|
|
33
|
+
? fetch(allCollectionsUrl, {
|
|
34
|
+
method: "GET",
|
|
35
|
+
headers: {
|
|
36
|
+
"Content-Type": "application/json",
|
|
37
|
+
},
|
|
38
|
+
})
|
|
39
|
+
: null;
|
|
40
|
+
const fetchSpecificCollection = specificCollectionUrl
|
|
41
|
+
? fetch(specificCollectionUrl, {
|
|
42
|
+
method: "GET",
|
|
43
|
+
headers: {
|
|
44
|
+
"Content-Type": "application/json",
|
|
45
|
+
},
|
|
46
|
+
})
|
|
47
|
+
: null;
|
|
48
|
+
const [allCollectionsResponse, specificCollectionResponse] = yield Promise.all([
|
|
49
|
+
fetchAllCollections,
|
|
50
|
+
fetchSpecificCollection,
|
|
51
|
+
]);
|
|
52
|
+
if (fetchAllCollections && allCollectionsResponse && !allCollectionsResponse.ok) {
|
|
53
|
+
throw new Error(`Failed to fetch all collections: ${allCollectionsResponse.statusText}`);
|
|
54
|
+
}
|
|
55
|
+
if (fetchSpecificCollection && specificCollectionResponse && !specificCollectionResponse.ok) {
|
|
56
|
+
throw new Error(`Failed to fetch specific collection: ${specificCollectionResponse.statusText}`);
|
|
57
|
+
}
|
|
58
|
+
const allCollectionsData = fetchAllCollections && allCollectionsResponse ? yield allCollectionsResponse.json() : null;
|
|
59
|
+
const specificCollectionData = fetchSpecificCollection && specificCollectionResponse ? yield specificCollectionResponse.json() : null;
|
|
60
|
+
setCollections(allCollectionsData);
|
|
61
|
+
setSpecificCollection(specificCollectionData);
|
|
62
|
+
}
|
|
63
|
+
catch (error) {
|
|
64
|
+
console.error("Error fetching collection:", error);
|
|
65
|
+
setError(error instanceof Error ? error.message : "An unknown error occurred.");
|
|
66
|
+
}
|
|
67
|
+
finally {
|
|
68
|
+
setLoading(false);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
fetchCollections();
|
|
72
|
+
}, [apiUrl, appId, collectionId, collectionHandle, language, getCollections]);
|
|
73
|
+
return { collections, specificCollection, loading, error };
|
|
74
|
+
};
|
|
@@ -2,6 +2,7 @@ import { Product } from "app-studio-types";
|
|
|
2
2
|
type URL = string;
|
|
3
3
|
type UseProductsProps = {
|
|
4
4
|
productIds: string[];
|
|
5
|
+
productHandles: string[];
|
|
5
6
|
baseURL: URL;
|
|
6
7
|
fetcher?: (url: string) => Promise<any>;
|
|
7
8
|
};
|
|
@@ -10,6 +11,6 @@ type UseProductsReturn = {
|
|
|
10
11
|
error: any;
|
|
11
12
|
isLoading: boolean;
|
|
12
13
|
};
|
|
13
|
-
declare function useProducts(
|
|
14
|
-
export {
|
|
14
|
+
export declare function useProducts(props: UseProductsProps | null): UseProductsReturn;
|
|
15
|
+
export {};
|
|
15
16
|
//# sourceMappingURL=use-products.d.ts.map
|
|
@@ -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,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;CACxC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,
|
|
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,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;CACxC,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,CAqB7E"}
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import useSWR from "swr";
|
|
2
|
-
function useProducts(
|
|
3
|
-
|
|
2
|
+
export function useProducts(props) {
|
|
3
|
+
let url = null;
|
|
4
|
+
if (props) {
|
|
5
|
+
const { baseURL, productIds, productHandles } = props;
|
|
6
|
+
if ((productIds === null || productIds === void 0 ? void 0 : productIds.length) > 0) {
|
|
7
|
+
url = `${baseURL}/products/by-ids?ids=${productIds.join(",")}`;
|
|
8
|
+
}
|
|
9
|
+
else if ((productHandles === null || productHandles === void 0 ? void 0 : productHandles.length) > 0) {
|
|
10
|
+
url = `${baseURL}/products/by-ids?handles=${productHandles.join(",")}`;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
const fetcher = (props === null || props === void 0 ? void 0 : props.fetcher) || ((url) => fetch(url).then((res) => res.json()));
|
|
4
14
|
const { data, error } = useSWR(url, fetcher);
|
|
5
15
|
return {
|
|
6
16
|
products: data || [],
|
|
@@ -8,4 +18,3 @@ function useProducts({ productIds, baseURL, fetcher = (url) => fetch(url).then((
|
|
|
8
18
|
isLoading: !data && !error,
|
|
9
19
|
};
|
|
10
20
|
}
|
|
11
|
-
export { useProducts };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare function usePullToRefresh(ref: React.RefObject<HTMLDivElement>, onTrigger: () => Promise<void>): boolean;
|
|
3
|
+
interface PullToRefreshProps {
|
|
4
|
+
onRefresh: () => Promise<void>;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
declare const PullToRefresh: React.FC<PullToRefreshProps>;
|
|
8
|
+
export { usePullToRefresh, PullToRefresh };
|
|
9
|
+
//# sourceMappingURL=use-pull-to-refresh.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-pull-to-refresh.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-pull-to-refresh.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAKvE,iBAAS,gBAAgB,CACvB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EACpC,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,WAuF/B;AAED,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiB/C,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA"}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { useEffect, useState, useCallback, useRef } from "react";
|
|
13
|
+
import { Icon } from "../ui/icon";
|
|
14
|
+
const TRIGGER_THRESHOLD = 250;
|
|
15
|
+
function usePullToRefresh(ref, onTrigger) {
|
|
16
|
+
const [loading, setLoading] = useState(false);
|
|
17
|
+
const handleTouchStartRef = useRef();
|
|
18
|
+
const handleTouchMoveRef = useRef();
|
|
19
|
+
const handleTouchEndRef = useRef();
|
|
20
|
+
const onTransitionEndRef = useRef();
|
|
21
|
+
const appr = useCallback((x) => {
|
|
22
|
+
const MAX = 128;
|
|
23
|
+
const k = 0.4;
|
|
24
|
+
return MAX * (1 - Math.exp((-k * x) / MAX));
|
|
25
|
+
}, []);
|
|
26
|
+
const handleTouchStart = useCallback((startEvent) => {
|
|
27
|
+
const el = ref.current;
|
|
28
|
+
if (!el)
|
|
29
|
+
return;
|
|
30
|
+
const initialY = startEvent.touches[0].clientY;
|
|
31
|
+
handleTouchMoveRef.current = (moveEvent) => {
|
|
32
|
+
const el = ref.current;
|
|
33
|
+
if (!el)
|
|
34
|
+
return;
|
|
35
|
+
const currentY = moveEvent.touches[0].clientY;
|
|
36
|
+
const dy = currentY - initialY;
|
|
37
|
+
if (dy < 0)
|
|
38
|
+
return;
|
|
39
|
+
el.style.transform = `translateY(${appr(dy)}px)`;
|
|
40
|
+
};
|
|
41
|
+
handleTouchEndRef.current = (endEvent) => __awaiter(this, void 0, void 0, function* () {
|
|
42
|
+
const el = ref.current;
|
|
43
|
+
if (!el)
|
|
44
|
+
return;
|
|
45
|
+
el.style.transform = "translateY(0)";
|
|
46
|
+
el.style.transition = "transform 0.2s";
|
|
47
|
+
const y = endEvent.changedTouches[0].clientY;
|
|
48
|
+
const dy = y - initialY;
|
|
49
|
+
if (dy > TRIGGER_THRESHOLD &&
|
|
50
|
+
document.documentElement.scrollTop <= 20) {
|
|
51
|
+
setLoading(true);
|
|
52
|
+
const delay = new Promise((resolve) => setTimeout(resolve, 500)); // Wait for half a second to show the loading spinner
|
|
53
|
+
yield Promise.all([onTrigger(), delay]);
|
|
54
|
+
setLoading(false);
|
|
55
|
+
}
|
|
56
|
+
el.addEventListener("transitionend", onTransitionEndRef.current);
|
|
57
|
+
el.removeEventListener("touchmove", handleTouchMoveRef.current);
|
|
58
|
+
el.removeEventListener("touchend", handleTouchEndRef.current);
|
|
59
|
+
});
|
|
60
|
+
el.addEventListener("touchmove", handleTouchMoveRef.current);
|
|
61
|
+
el.addEventListener("touchend", handleTouchEndRef.current);
|
|
62
|
+
}, [appr, onTrigger, ref]);
|
|
63
|
+
const onTransitionEnd = useCallback(() => {
|
|
64
|
+
const el = ref.current;
|
|
65
|
+
if (!el)
|
|
66
|
+
return;
|
|
67
|
+
el.style.transition = "";
|
|
68
|
+
el.removeEventListener("transitionend", onTransitionEndRef.current);
|
|
69
|
+
}, [ref]);
|
|
70
|
+
handleTouchStartRef.current = handleTouchStart;
|
|
71
|
+
onTransitionEndRef.current = onTransitionEnd;
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
const el = ref.current;
|
|
74
|
+
if (!el)
|
|
75
|
+
return;
|
|
76
|
+
el.addEventListener("touchstart", handleTouchStartRef.current);
|
|
77
|
+
return () => {
|
|
78
|
+
el.removeEventListener("touchstart", handleTouchStartRef.current);
|
|
79
|
+
};
|
|
80
|
+
}, [ref]);
|
|
81
|
+
return loading;
|
|
82
|
+
}
|
|
83
|
+
const PullToRefresh = ({ onRefresh, children, }) => {
|
|
84
|
+
const ref = useRef(null);
|
|
85
|
+
const loading = usePullToRefresh(ref, onRefresh);
|
|
86
|
+
return (_jsxs("div", Object.assign({ ref: ref, className: "relative" }, { children: [loading && (_jsx("div", Object.assign({ className: "flex w-full justify-center my-4 h-10" }, { children: _jsx(Icon, { name: "loader", className: "animate-spin" }) }))), children] })));
|
|
87
|
+
};
|
|
88
|
+
export { usePullToRefresh, PullToRefresh };
|
|
@@ -2,7 +2,9 @@ import * as React from "react";
|
|
|
2
2
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
3
3
|
declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
|
|
4
4
|
declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
-
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> &
|
|
5
|
+
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
6
|
+
showDefaultIcon?: boolean | undefined;
|
|
7
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
6
8
|
declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
9
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
|
8
10
|
//# sourceMappingURL=accordion.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../components/ui/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAK/D,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../components/ui/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAK/D,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB;;2CA2BpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAWpB,CAAA;AAIF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
|
|
@@ -22,8 +22,8 @@ const AccordionItem = React.forwardRef((_a, ref) => {
|
|
|
22
22
|
});
|
|
23
23
|
AccordionItem.displayName = "AccordionItem";
|
|
24
24
|
const AccordionTrigger = React.forwardRef((_a, ref) => {
|
|
25
|
-
var { className, children } = _a, props = __rest(_a, ["className", "children"]);
|
|
26
|
-
return (_jsx(AccordionPrimitive.Header, Object.assign({ className: "flex" }, { children: _jsxs(AccordionPrimitive.Trigger, Object.assign({ ref: ref, className: cn("px-4 flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]_svg]:rotate-180 active:opacity-70", className) }, props, { children: [children, _jsx(Icon, { name: "chevron-down", size: "sm", className: "text-coreColors-secondaryIcon shrink-0 transition-transform duration-200
|
|
25
|
+
var { className, children, showDefaultIcon = true } = _a, props = __rest(_a, ["className", "children", "showDefaultIcon"]);
|
|
26
|
+
return (_jsx(AccordionPrimitive.Header, Object.assign({ className: "flex" }, { children: _jsxs(AccordionPrimitive.Trigger, Object.assign({ ref: ref, className: cn("px-4 flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]_svg]:rotate-180 active:opacity-70", className) }, props, { children: [children, showDefaultIcon && (_jsx(Icon, { name: "chevron-down", size: "sm", className: "text-coreColors-secondaryIcon shrink-0 transition-transform duration-200" }))] })) })));
|
|
27
27
|
});
|
|
28
28
|
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
29
29
|
const AccordionContent = React.forwardRef((_a, ref) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
|
-
alignment?: "
|
|
4
|
+
alignment?: "center" | "end" | "start" | null | undefined;
|
|
5
5
|
cornerRadius?: "circle" | "square" | "rounded" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
7
7
|
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
@@ -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;AAKjE,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,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,
|
|
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;AAKjE,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,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFAoFX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -81,12 +81,17 @@ const labelVariants = cva("truncate", {
|
|
|
81
81
|
const Button = React.forwardRef((_a, ref) => {
|
|
82
82
|
var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconPosition } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconPosition"]);
|
|
83
83
|
const Comp = asChild ? Slot : "button";
|
|
84
|
-
const IconButton = () =>
|
|
84
|
+
const IconButton = () => icon ? _jsx(Icon, { name: icon, size: "sm", style: { color: iconColor } }) : null;
|
|
85
85
|
const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), { "mr-2": iconPosition !== "right" }), style: { color: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
|
|
86
|
+
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 } }) })));
|
|
86
87
|
return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
|
|
87
88
|
"pointer-events-none": loading,
|
|
88
89
|
"flex-row-reverse": icon && iconPosition === "right"
|
|
89
|
-
}), ref: ref }, props, { children: loading ? (_jsx(
|
|
90
|
+
}), ref: ref }, props, { children: loading ? (_jsx(LoadingButton, {})) : typeof props.children === "object" &&
|
|
91
|
+
React.isValidElement(props.children) ? ( // if children are passed as a valid React element
|
|
92
|
+
props.children // render it
|
|
93
|
+
) : // otherwise use props
|
|
94
|
+
size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
|
|
90
95
|
});
|
|
91
96
|
Button.displayName = "Button";
|
|
92
97
|
export { Button, buttonVariants };
|
|
@@ -3,7 +3,7 @@ import React from "react";
|
|
|
3
3
|
declare const chipVariants: (props?: ({
|
|
4
4
|
variant?: "secondary" | "primary" | null | undefined;
|
|
5
5
|
direction?: "horizontal" | "vertical" | null | undefined;
|
|
6
|
-
iconPosition?: "
|
|
6
|
+
iconPosition?: "left" | "right" | "default" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
8
8
|
type ChipProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof chipVariants> & {
|
|
9
9
|
icon?: React.ElementType;
|
|
@@ -14,7 +14,7 @@ type ChipProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof chi
|
|
|
14
14
|
declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
15
15
|
variant?: "secondary" | "primary" | null | undefined;
|
|
16
16
|
direction?: "horizontal" | "vertical" | null | undefined;
|
|
17
|
-
iconPosition?: "
|
|
17
|
+
iconPosition?: "left" | "right" | "default" | null | undefined;
|
|
18
18
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
|
|
19
19
|
icon?: React.ElementType<any> | undefined;
|
|
20
20
|
iconPosition?: "left" | "right" | undefined;
|
|
@@ -65,7 +65,7 @@ const MultipleChips = ({ children, containerRef, }) => {
|
|
|
65
65
|
useEffect(() => {
|
|
66
66
|
checkOverflow();
|
|
67
67
|
}, [children]);
|
|
68
|
-
return (_jsxs("div", Object.assign({ className: "relative no-scrollbar" }, { children: [_jsx("div", Object.assign({ ref: containerRef, className: "flex overflow-x-auto overflow-y-hidden", onScroll: checkOverflow }, { children: children.map((chip, index) => (_jsx("div", Object.assign({ className: cn("shrink-0", {
|
|
68
|
+
return (_jsxs("div", Object.assign({ className: "relative no-scrollbar" }, { children: [_jsx("div", Object.assign({ ref: containerRef, className: "flex overflow-x-auto overflow-y-hidden pt-2", onScroll: checkOverflow }, { children: children.map((chip, index) => (_jsx("div", Object.assign({ className: cn("shrink-0", {
|
|
69
69
|
"mr-2": index < children.length - 1,
|
|
70
70
|
}) }, { children: chip }), index))) })), showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })));
|
|
71
71
|
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const favoriteVariants: (props?: ({
|
|
4
|
+
size?: "small" | "large" | null | undefined;
|
|
5
|
+
showBackground?: boolean | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
7
|
+
export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof favoriteVariants> {
|
|
8
|
+
selected?: boolean;
|
|
9
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
10
|
+
icon?: string;
|
|
11
|
+
showBackground?: boolean;
|
|
12
|
+
isAnimated?: boolean;
|
|
13
|
+
}
|
|
14
|
+
declare const Favorite: React.ForwardRefExoticComponent<FavoriteProps & React.RefAttributes<HTMLButtonElement>>;
|
|
15
|
+
export { Favorite, favoriteVariants };
|
|
16
|
+
//# sourceMappingURL=favorite.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../../components/ui/favorite/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB;;;mFAkBrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AA+ND,QAAA,MAAM,QAAQ,yFAiCb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import * as React from "react";
|
|
14
|
+
import { cva } from "class-variance-authority";
|
|
15
|
+
import { Icon } from "../icon";
|
|
16
|
+
const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-primaryShadow active:[&_svg]:text-stateColors-favorites", {
|
|
17
|
+
variants: {
|
|
18
|
+
size: {
|
|
19
|
+
small: "p-2",
|
|
20
|
+
large: "p-3",
|
|
21
|
+
},
|
|
22
|
+
showBackground: {
|
|
23
|
+
true: "bg-coreColors-inputBackground",
|
|
24
|
+
false: "",
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
defaultVariants: {
|
|
28
|
+
size: "small",
|
|
29
|
+
showBackground: true,
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
const AnimatedHeart = ({ selected, onClick, }) => (_jsxs("div", Object.assign({ onClick: onClick }, { children: [_jsx("style", { children: `* {
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
svg {
|
|
38
|
+
height: 24px;
|
|
39
|
+
overflow: visible;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
label {
|
|
44
|
+
transform: translateX(-2px);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
input[type="checkbox"] {
|
|
48
|
+
display: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
input[type="checkbox"] + label {
|
|
52
|
+
width: 20px;
|
|
53
|
+
height: 20px;
|
|
54
|
+
position: relative;
|
|
55
|
+
display: grid;
|
|
56
|
+
place-content: center;
|
|
57
|
+
#center-heart {
|
|
58
|
+
#inner {
|
|
59
|
+
fill: ${selected ? "#d91e18ff" : "transparent"};
|
|
60
|
+
transition: 0.2s ease;
|
|
61
|
+
}
|
|
62
|
+
#outer {
|
|
63
|
+
fill: ${selected ? "#d91e18ff" : "white"};
|
|
64
|
+
transition: 0.2s ease;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
#left-hearts > *,
|
|
68
|
+
#right-hearts > * {
|
|
69
|
+
opacity: 0;
|
|
70
|
+
transition: 0.2s ease;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
input[type="checkbox"]:checked + label {
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
&::before,
|
|
77
|
+
&::after {
|
|
78
|
+
content: "";
|
|
79
|
+
display: grid;
|
|
80
|
+
border-radius: 100%;
|
|
81
|
+
position: absolute;
|
|
82
|
+
outline: 2px solid #d91e18ff;
|
|
83
|
+
height: 24px;
|
|
84
|
+
width: 24px;
|
|
85
|
+
animation: scalePulse 0.5s cubic-bezier(0.12, 0.84, 0.5, 0.44) forwards;
|
|
86
|
+
}
|
|
87
|
+
&::after {
|
|
88
|
+
opacity: 1;
|
|
89
|
+
transform: scale(0);
|
|
90
|
+
animation-delay: 0.2s;
|
|
91
|
+
}
|
|
92
|
+
#center-heart {
|
|
93
|
+
#inner {
|
|
94
|
+
fill: #d91e18ff;
|
|
95
|
+
}
|
|
96
|
+
#outer {
|
|
97
|
+
fill: #d91e18ff;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
#left-hearts > *,
|
|
101
|
+
#right-hearts > * {
|
|
102
|
+
transform-origin: center center;
|
|
103
|
+
animation: floatingHearts 0.65s cubic-bezier(0.12, 0.84, 0.5, 0.44) forwards;
|
|
104
|
+
}
|
|
105
|
+
#right-hearts {
|
|
106
|
+
g:first-child {
|
|
107
|
+
animation-delay: 0.3s;
|
|
108
|
+
}
|
|
109
|
+
g:last-child {
|
|
110
|
+
animation-delay: 0.1s;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
#left-hearts {
|
|
114
|
+
g:first-child {
|
|
115
|
+
animation-delay: 0.2s;
|
|
116
|
+
}
|
|
117
|
+
g:last-child {
|
|
118
|
+
animation-delay: 0.5s;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
@keyframes floatingHearts {
|
|
122
|
+
0% {
|
|
123
|
+
opacity: 0;
|
|
124
|
+
transform: translateY(10px);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
50% {
|
|
128
|
+
opacity: 0.5;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
100% {
|
|
132
|
+
opacity: 0;
|
|
133
|
+
transform: translateY(-50px);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@keyframes scalePulse {
|
|
138
|
+
from {
|
|
139
|
+
transform: scale(0);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
to {
|
|
143
|
+
transform: scale(1.1);
|
|
144
|
+
opacity: 0;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}` }), _jsx("input", { type: "checkbox", id: "like", name: "like", checked: selected, readOnly: true }), _jsx("label", Object.assign({ htmlFor: "like" }, { children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 189.2 87.507", style: { overflow: "visible" } }, { children: _jsxs("g", Object.assign({ id: "hearts", transform: "translate(-787.902 -454.998)" }, { children: [_jsxs("g", Object.assign({ id: "right-hearts" }, { children: [_jsxs("g", Object.assign({ id: "Group_4", "data-name": "Group 4", opacity: "0.484" }, { children: [_jsx("path", { id: "Path_8", "data-name": "Path 8", d: "M36.508,16.436c-3.141,6.041-11.545,14.257-16.3,18.634a1.342,1.342,0,0,1-1.8,0C13.633,30.693,5.229,22.477,2.087,16.436c-6.9-13.29,10.5-22.151,17.21-8.86C26.01-5.715,43.409,3.146,36.508,16.436Z", transform: "translate(936.502 486.145)", fill: "#fff" }), _jsx("path", { id: "Path_9", "data-name": "Path 9", d: "M19.311,37.916a3.836,3.836,0,0,1-2.575-.99l-.013-.012C11.871,32.47,3.229,24.051-.131,17.589A15.428,15.428,0,0,1-2,10.374,12.021,12.021,0,0,1-.282,4.2,11.848,11.848,0,0,1,16.364.456a13.647,13.647,0,0,1,2.934,2.6,13.649,13.649,0,0,1,2.934-2.6A11.848,11.848,0,0,1,38.879,4.2,12.02,12.02,0,0,1,40.6,10.374a15.428,15.428,0,0,1-1.87,7.214A52.812,52.812,0,0,1,30.8,28.07c-3.2,3.482-6.607,6.728-8.9,8.839l-.018.017a3.836,3.836,0,0,1-2.571.99ZM9.864,3.5A6.907,6.907,0,0,0,3.991,6.8c-1.423,2.342-1.311,5.357.315,8.489,1.013,1.948,4.482,7.467,15,17.213,2.172-2.025,5.076-4.836,7.815-7.813a48.2,48.2,0,0,0,7.166-9.4c1.626-3.131,1.738-6.146.315-8.488a6.848,6.848,0,0,0-9.644-2.149A10.185,10.185,0,0,0,21.529,8.7L19.3,13.121,17.066,8.7a10.185,10.185,0,0,0-3.432-4.057A6.906,6.906,0,0,0,9.864,3.5Z", transform: "translate(936.502 486.145)", fill: "#fff" })] })), _jsxs("g", Object.assign({ id: "Group_5", "data-name": "Group 5", opacity: "0.484" }, { children: [_jsx("path", { id: "Path_10", "data-name": "Path 10", d: "M36.508,16.436c-3.141,6.041-11.545,14.257-16.3,18.634a1.342,1.342,0,0,1-1.8,0C13.633,30.693,5.229,22.477,2.087,16.436c-6.9-13.29,10.5-22.151,17.21-8.86C26.01-5.715,43.409,3.146,36.508,16.436Z", transform: "translate(906.04 497.584)", fill: "#d91e18ff" }), _jsx("path", { id: "Path_11", "data-name": "Path 11", d: "M19.311,37.916a3.836,3.836,0,0,1-2.575-.99l-.013-.012C11.871,32.47,3.229,24.051-.131,17.589A15.428,15.428,0,0,1-2,10.374,12.021,12.021,0,0,1-.282,4.2,11.848,11.848,0,0,1,16.364.456a13.647,13.647,0,0,1,2.934,2.6,13.649,13.649,0,0,1,2.934-2.6A11.848,11.848,0,0,1,38.879,4.2,12.02,12.02,0,0,1,40.6,10.374a15.428,15.428,0,0,1-1.87,7.214A52.812,52.812,0,0,1,30.8,28.07c-3.2,3.482-6.607,6.728-8.9,8.839l-.018.017a3.836,3.836,0,0,1-2.571.99ZM9.864,3.5A6.907,6.907,0,0,0,3.991,6.8c-1.423,2.342-1.311,5.357.315,8.489,1.013,1.948,4.482,7.467,15,17.213,2.172-2.025,5.076-4.836,7.815-7.813a48.2,48.2,0,0,0,7.166-9.4c1.626-3.131,1.738-6.146.315-8.488a6.848,6.848,0,0,0-9.644-2.149A10.185,10.185,0,0,0,21.529,8.7L19.3,13.121,17.066,8.7a10.185,10.185,0,0,0-3.432-4.057A6.906,6.906,0,0,0,9.864,3.5Z", transform: "translate(906.04 497.584)", fill: "#d91e18ff" })] }))] })), _jsxs("g", Object.assign({ id: "left-hearts" }, { children: [_jsxs("g", Object.assign({ id: "Group_6", "data-name": "Group 6", opacity: "0.484" }, { children: [_jsx("path", { id: "Path_12", "data-name": "Path 12", d: "M36.508,16.436c-3.141,6.041-11.545,14.257-16.3,18.634a1.342,1.342,0,0,1-1.8,0C13.633,30.693,5.229,22.477,2.087,16.436c-6.9-13.29,10.5-22.151,17.21-8.86C26.01-5.715,43.409,3.146,36.508,16.436Z", transform: "translate(827.502 483.705)", fill: "#fff" }), _jsx("path", { id: "Path_13", "data-name": "Path 13", d: "M19.311,37.916a3.836,3.836,0,0,1-2.575-.99l-.013-.012C11.871,32.47,3.229,24.051-.131,17.589A15.428,15.428,0,0,1-2,10.374,12.021,12.021,0,0,1-.282,4.2,11.848,11.848,0,0,1,16.364.456a13.647,13.647,0,0,1,2.934,2.6,13.649,13.649,0,0,1,2.934-2.6A11.848,11.848,0,0,1,38.879,4.2,12.02,12.02,0,0,1,40.6,10.374a15.428,15.428,0,0,1-1.87,7.214A52.812,52.812,0,0,1,30.8,28.07c-3.2,3.482-6.607,6.728-8.9,8.839l-.018.017a3.836,3.836,0,0,1-2.571.99ZM9.864,3.5A6.907,6.907,0,0,0,3.991,6.8c-1.423,2.342-1.311,5.357.315,8.489,1.013,1.948,4.482,7.467,15,17.213,2.172-2.025,5.076-4.836,7.815-7.813a48.2,48.2,0,0,0,7.166-9.4c1.626-3.131,1.738-6.146.315-8.488a6.848,6.848,0,0,0-9.644-2.149A10.185,10.185,0,0,0,21.529,8.7L19.3,13.121,17.066,8.7a10.185,10.185,0,0,0-3.432-4.057A6.906,6.906,0,0,0,9.864,3.5Z", transform: "translate(827.502 483.705)", fill: "#fff" })] })), _jsxs("g", Object.assign({ id: "Group_7", "data-name": "Group 7", opacity: "0.484" }, { children: [_jsx("path", { id: "Path_14", "data-name": "Path 14", d: "M36.508,16.436c-3.141,6.041-11.545,14.257-16.3,18.634a1.342,1.342,0,0,1-1.8,0C13.633,30.693,5.229,22.477,2.087,16.436c-6.9-13.29,10.5-22.151,17.21-8.86C26.01-5.715,43.409,3.146,36.508,16.436Z", transform: "translate(789.902 456.497)", fill: "#d91e18ff" }), _jsx("path", { id: "Path_15", "data-name": "Path 15", d: "M19.311,37.916a3.836,3.836,0,0,1-2.575-.99l-.013-.012C11.871,32.47,3.229,24.051-.131,17.589A15.428,15.428,0,0,1-2,10.374,12.021,12.021,0,0,1-.282,4.2,11.848,11.848,0,0,1,16.364.456a13.647,13.647,0,0,1,2.934,2.6,13.649,13.649,0,0,1,2.934-2.6A11.848,11.848,0,0,1,38.879,4.2,12.02,12.02,0,0,1,40.6,10.374a15.428,15.428,0,0,1-1.87,7.214A52.812,52.812,0,0,1,30.8,28.07c-3.2,3.482-6.607,6.728-8.9,8.839l-.018.017a3.836,3.836,0,0,1-2.571.99ZM9.864,3.5A6.907,6.907,0,0,0,3.991,6.8c-1.423,2.342-1.311,5.357.315,8.489,1.013,1.948,4.482,7.467,15,17.213,2.172-2.025,5.076-4.836,7.815-7.813a48.2,48.2,0,0,0,7.166-9.4c1.626-3.131,1.738-6.146.315-8.488a6.848,6.848,0,0,0-9.644-2.149A10.185,10.185,0,0,0,21.529,8.7L19.3,13.121,17.066,8.7a10.185,10.185,0,0,0-3.432-4.057A6.906,6.906,0,0,0,9.864,3.5Z", transform: "translate(789.902 456.497)", fill: "#d91e18ff" })] }))] })), _jsxs("g", Object.assign({ id: "center-heart" }, { children: [_jsx("path", { id: "inner", "data-name": "Path 16", d: "M68.82,30.286C62.86,41.748,46.92,57.336,37.9,65.639a2.547,2.547,0,0,1-3.413,0c-9.068-8.3-25.012-23.892-30.972-35.353C-9.578,5.07,23.432-11.741,36.167,13.475,48.9-11.741,81.912,5.07,68.82,30.286Z", transform: "translate(853.502 473.705)", fill: "#d91e18ff" }), _jsx("path", { id: "outer", "data-name": "Path 17", d: "M36.192,68.8a5.038,5.038,0,0,1-3.382-1.3l-.013-.012C28.5,63.55,22.1,57.47,16,50.84,8.968,43.21,4.022,36.682,1.3,31.439A27.058,27.058,0,0,1-2,18.8,20.564,20.564,0,0,1,.934,8.233,20.236,20.236,0,0,1,29.375,1.847a24.62,24.62,0,0,1,6.792,6.728,24.623,24.623,0,0,1,6.791-6.728A20.236,20.236,0,0,1,71.4,8.233,20.562,20.562,0,0,1,74.336,18.8a27.059,27.059,0,0,1-3.3,12.641c-2.723,5.236-7.666,11.763-14.693,19.4C50.32,57.389,43.909,63.5,39.592,67.478l-.018.017A5.038,5.038,0,0,1,36.192,68.8Zm-.029-5.01a.047.047,0,0,0,.057,0c4.247-3.912,10.543-9.916,16.446-16.332C59.4,40.14,64.084,33.976,66.6,29.132a22.135,22.135,0,0,0,2.734-10.306A15.233,15.233,0,0,0,45.688,6.037,21.52,21.52,0,0,0,38.4,14.6l-2.232,4.418L33.935,14.6a21.521,21.521,0,0,0-7.289-8.566A15.231,15.231,0,0,0,3,18.827,22.133,22.133,0,0,0,5.732,29.134c2.522,4.85,7.213,11.014,13.941,18.319,5.982,6.495,12.268,12.465,16.491,16.333Z", transform: "translate(853.502 473.705)", fill: "#d91e18ff" })] }))] })) })) }))] })));
|
|
148
|
+
const Favorite = React.forwardRef((_a, ref) => {
|
|
149
|
+
var { className, size = "small",
|
|
150
|
+
// selected = false,
|
|
151
|
+
onClick, icon = "heart-filled", showBackground = true, isAnimated = true } = _a, props = __rest(_a, ["className", "size", "onClick", "icon", "showBackground", "isAnimated"]);
|
|
152
|
+
const [selected, setSelected] = React.useState(false);
|
|
153
|
+
return (_jsx("div", { children: isAnimated ? (_jsx(AnimatedHeart, { selected: selected, onClick: () => setSelected(true) })) : (_jsx(Icon, { name: icon, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm", onClick: onClick })) }));
|
|
154
|
+
});
|
|
155
|
+
Favorite.displayName = "Favorite";
|
|
156
|
+
export { Favorite, favoriteVariants };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"favorite.spec.d.ts","sourceRoot":"","sources":["../../../../components/ui/favorite/favorite.spec.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/ui/favorite/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./favorite";
|