@admin-layout/tailwind-design-pro 10.0.9-alpha.33 → 10.0.9-alpha.34
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.
|
@@ -18,11 +18,12 @@ export interface ICategoriesTypeListProps<TTypename, TCategory, TName> {
|
|
|
18
18
|
boxColor: (categoryId: string) => string;
|
|
19
19
|
iconColor: (categoryId: string) => string;
|
|
20
20
|
badgeTitle?: string;
|
|
21
|
-
extraIcons:
|
|
21
|
+
extraIcons: string[];
|
|
22
22
|
aria_label: string;
|
|
23
23
|
splideRef?: React.RefObject<Splide>;
|
|
24
24
|
isNewBadge: (categoryId: string) => boolean;
|
|
25
25
|
handleSearchClick: (cateItem: string, item: any, isExplorerView?: boolean) => void;
|
|
26
|
+
activeCategory?: string;
|
|
26
27
|
}
|
|
27
|
-
export declare const CategoriesTypeList: <TTypename, TCategory, TName>({ boxColor, iconColor, badgeTitle, extraIcons, categories, initialCategory, aria_label, isExplorerView, splideRef, isNewBadge, handleSearchClick, }: ICategoriesTypeListProps<TTypename, TCategory, TName>) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare const CategoriesTypeList: <TTypename, TCategory, TName>({ boxColor, iconColor, badgeTitle, extraIcons, categories, initialCategory, aria_label, isExplorerView, splideRef, isNewBadge, handleSearchClick, activeCategory, }: ICategoriesTypeListProps<TTypename, TCategory, TName>) => import("react/jsx-runtime").JSX.Element;
|
|
28
29
|
//# sourceMappingURL=CategoriesTypeList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CategoriesTypeList.d.ts","sourceRoot":"","sources":["../../../src/components/UI/CategoriesTypeList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA2C,MAAM,uBAAuB,CAAC;AACxF,OAAO,4BAA4B,CAAC;AACpC,OAAO,
|
|
1
|
+
{"version":3,"file":"CategoriesTypeList.d.ts","sourceRoot":"","sources":["../../../src/components/UI/CategoriesTypeList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA2C,MAAM,uBAAuB,CAAC;AACxF,OAAO,4BAA4B,CAAC;AACpC,OAAO,KAAoD,MAAM,OAAO,CAAC;AAKzE,MAAM,WAAW,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK;IACtD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,wBAAwB,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IACzD,eAAe,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;IAC5D,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACpC,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,cAAc,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnF,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAyGD,eAAO,MAAM,kBAAkB,GAAI,SAAS,EAAE,SAAS,EAAE,KAAK,uKAa3D,wBAAwB,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,4CA6DvD,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {jsx
|
|
1
|
+
import {jsxs,jsx}from'react/jsx-runtime';import {Splide,SplideSlide}from'@cdmbase/react-splide';import'@splidejs/react-splide/css';import React__default,{useCallback,useMemo,useState,useEffect}from'react';import {useTranslation}from'react-i18next';import {renderDynamicIcon}from'../../helpers/DynamicIcon.js';import useWindowSize from'../../hooks/useWindowSize.js';// Helper function to merge arrays
|
|
2
2
|
const mergeArrays = (arr1, arr2, keyToMapIcons) => {
|
|
3
3
|
const iconMap = new Map(arr2.map(icon => [icon.split('.').pop(), icon]));
|
|
4
4
|
return arr1.filter(item => iconMap.has(item[keyToMapIcons])).map(item => ({
|
|
@@ -6,6 +6,67 @@ const mergeArrays = (arr1, arr2, keyToMapIcons) => {
|
|
|
6
6
|
icon: iconMap.get(item[keyToMapIcons])
|
|
7
7
|
}));
|
|
8
8
|
};
|
|
9
|
+
// Create a memoized category item component
|
|
10
|
+
function CategoryItemComponent({
|
|
11
|
+
category,
|
|
12
|
+
boxColor,
|
|
13
|
+
size,
|
|
14
|
+
t,
|
|
15
|
+
isNewBadge,
|
|
16
|
+
badgeTitle,
|
|
17
|
+
handleSearchClick,
|
|
18
|
+
isExplorerView,
|
|
19
|
+
isActive
|
|
20
|
+
}) {
|
|
21
|
+
// Prevent multiple click propagation
|
|
22
|
+
const handleClick = useCallback(e => {
|
|
23
|
+
e.preventDefault();
|
|
24
|
+
e.stopPropagation();
|
|
25
|
+
handleSearchClick(category.id, category, isExplorerView);
|
|
26
|
+
}, [category, handleSearchClick, isExplorerView]);
|
|
27
|
+
// Compute the current color values
|
|
28
|
+
const currentBoxColor = isActive ? boxColor(category.id) : '#6B7280';
|
|
29
|
+
// Determine font size based on screen width
|
|
30
|
+
const fontSize = useMemo(() => {
|
|
31
|
+
if (size.width > 1200) return '16px';
|
|
32
|
+
if (size.width > 768) return '15px';
|
|
33
|
+
if (size.width > 480) return '14px';
|
|
34
|
+
return '12px';
|
|
35
|
+
}, [size.width]);
|
|
36
|
+
// Determine icon size based on screen width
|
|
37
|
+
const iconSize = useMemo(() => ({
|
|
38
|
+
w: size.width > 1200 ? '2vw' : '3vw',
|
|
39
|
+
h: size.height > 1200 ? '2vw' : '3vw'
|
|
40
|
+
}), [size.width, size.height]);
|
|
41
|
+
return jsxs("div", {
|
|
42
|
+
className: `flex flex-col items-center justify-center cursor-pointer relative font-bold ${isActive ? 'active' : ''}`,
|
|
43
|
+
style: {
|
|
44
|
+
color: currentBoxColor,
|
|
45
|
+
fontSize
|
|
46
|
+
},
|
|
47
|
+
onClick: handleClick,
|
|
48
|
+
children: [renderDynamicIcon({
|
|
49
|
+
name: category.icon,
|
|
50
|
+
style: {
|
|
51
|
+
iconColor: currentBoxColor,
|
|
52
|
+
...iconSize
|
|
53
|
+
}
|
|
54
|
+
}), jsx("div", {
|
|
55
|
+
className: "text-center",
|
|
56
|
+
children: t(category.description)
|
|
57
|
+
}), isNewBadge(category.id) && jsx("div", {
|
|
58
|
+
className: "absolute top-0 right-0 bg-blue-500 text-white rounded-md text-xs p-1",
|
|
59
|
+
children: badgeTitle
|
|
60
|
+
})]
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
// Use React.memo with a custom comparison function
|
|
64
|
+
const CategoryItem = React__default.memo(CategoryItemComponent, (prevProps, nextProps) => {
|
|
65
|
+
if (prevProps.category.id !== nextProps.category.id) return false;
|
|
66
|
+
if (prevProps.isActive !== nextProps.isActive) return false;
|
|
67
|
+
if (prevProps.boxColor(prevProps.category.id) !== nextProps.boxColor(nextProps.category.id)) return false;
|
|
68
|
+
return true;
|
|
69
|
+
});
|
|
9
70
|
const CategoriesTypeList = ({
|
|
10
71
|
boxColor,
|
|
11
72
|
iconColor,
|
|
@@ -17,20 +78,25 @@ const CategoriesTypeList = ({
|
|
|
17
78
|
isExplorerView,
|
|
18
79
|
splideRef,
|
|
19
80
|
isNewBadge,
|
|
20
|
-
handleSearchClick
|
|
81
|
+
handleSearchClick,
|
|
82
|
+
activeCategory
|
|
21
83
|
}) => {
|
|
22
84
|
const size = useWindowSize();
|
|
23
85
|
const {
|
|
24
86
|
t
|
|
25
87
|
} = useTranslation(['property-types', 'common']);
|
|
26
|
-
//
|
|
27
|
-
const
|
|
28
|
-
//
|
|
29
|
-
|
|
88
|
+
// Track the currently active category ID internally
|
|
89
|
+
const [activeCategoryId, setActiveCategoryId] = useState(() => activeCategory || initialCategory.id);
|
|
90
|
+
// Update internal state when activeCategory prop changes
|
|
91
|
+
useEffect(() => {
|
|
92
|
+
setActiveCategoryId(activeCategory || initialCategory.id);
|
|
93
|
+
}, [activeCategory, initialCategory.id]);
|
|
94
|
+
// Memoize the merged array
|
|
95
|
+
const mappedArr = useMemo(() => mergeArrays([initialCategory, ...categories], extraIcons, 'icon'), [initialCategory, categories, extraIcons]);
|
|
96
|
+
// Splide options
|
|
97
|
+
const splideOptions = useMemo(() => ({
|
|
30
98
|
type: 'slide',
|
|
31
|
-
// You can use 'slide' or 'loop' based on your requirement
|
|
32
99
|
drag: 'free',
|
|
33
|
-
// 'free' is a valid option, or it could be true/false
|
|
34
100
|
perPage: 9,
|
|
35
101
|
perMove: 1,
|
|
36
102
|
wheel: true,
|
|
@@ -49,37 +115,26 @@ const CategoriesTypeList = ({
|
|
|
49
115
|
perPage: 3
|
|
50
116
|
}
|
|
51
117
|
}
|
|
52
|
-
};
|
|
118
|
+
}), []);
|
|
53
119
|
return jsx("div", {
|
|
54
120
|
className: "w-full relative",
|
|
55
121
|
children: jsx(Splide, {
|
|
56
122
|
ref: splideRef,
|
|
57
123
|
"aria-label": aria_label,
|
|
58
124
|
options: splideOptions,
|
|
59
|
-
children: mappedArr.map(
|
|
60
|
-
children:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
h: size.height > 1200 ? '2vw' : '3vw'
|
|
73
|
-
}
|
|
74
|
-
}), jsx("div", {
|
|
75
|
-
className: "text-center",
|
|
76
|
-
children: t(d.description)
|
|
77
|
-
}), isNewBadge(d.id) && jsx("div", {
|
|
78
|
-
className: "absolute top-0 right-0 bg-blue-500 text-white rounded-md text-xs p-1",
|
|
79
|
-
children: badgeTitle
|
|
80
|
-
})]
|
|
81
|
-
})
|
|
82
|
-
}, `button_${key}`))
|
|
125
|
+
children: mappedArr.map(d => jsx(SplideSlide, {
|
|
126
|
+
children: jsx(CategoryItem, {
|
|
127
|
+
category: d,
|
|
128
|
+
boxColor: boxColor,
|
|
129
|
+
size: size,
|
|
130
|
+
t: t,
|
|
131
|
+
isNewBadge: isNewBadge,
|
|
132
|
+
badgeTitle: badgeTitle,
|
|
133
|
+
handleSearchClick: handleSearchClick,
|
|
134
|
+
isExplorerView: isExplorerView,
|
|
135
|
+
isActive: d.id === activeCategoryId
|
|
136
|
+
}, `category_${d.id}`)
|
|
137
|
+
}, `button_${d.id}`))
|
|
83
138
|
})
|
|
84
139
|
});
|
|
85
140
|
};export{CategoriesTypeList};//# sourceMappingURL=CategoriesTypeList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CategoriesTypeList.js","sources":["../../../src/components/UI/CategoriesTypeList.tsx"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CategoriesTypeList.js","sources":["../../../src/components/UI/CategoriesTypeList.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","React"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@admin-layout/tailwind-design-pro",
|
|
3
|
-
"version": "10.0.9-alpha.
|
|
3
|
+
"version": "10.0.9-alpha.34",
|
|
4
4
|
"description": "Sample core for higher packages to depend on",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "CDMBase LLC",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "ecb9fa52e67d3e4f9858349058dfebc86381db4d",
|
|
62
62
|
"typescript": {
|
|
63
63
|
"definition": "lib/index.d.ts"
|
|
64
64
|
}
|