Skip to content

Commit 22f3fbf

Browse files
imagine10255imagine10255
committed
Refactor carousel logic and improve modularity.
Enhance `transform` function to accept an object for better clarity and flexibility. Add height reset functionality to support auto-height configurations dynamically. Update dependencies and refine category panel for improved data handling and rendering.
1 parent f487aae commit 22f3fbf

File tree

10 files changed

+290
-65
lines changed

10 files changed

+290
-65
lines changed

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"styled-components": "6.1.17"
1515
},
1616
"dependencies": {
17-
"@acrool/js-utils": "^3.2.22",
17+
"@acrool/js-utils": "^3.2.23-alpha.0",
1818
"@acrool/react-carousel": "link:..",
1919
"@acrool/react-grid": "^6.0.7",
2020
"@acrool/react-iconsvg": "^4.2.1",

‎example/src/components/examples/CategoryPanel/_components/CategoryPanel.tsx‎

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1+
import {arraySplit} from '@acrool/js-utils/array';
12
import AcroolCarousel, {AcroolSlideCard, Controller, TAcroolSlideItemDataList} from '@acrool/react-carousel';
23
import {Col, Row} from '@acrool/react-grid';
34
import {Img} from '@acrool/react-img';
45
import {useEffect, useState} from 'react';
56
import styled, {css} from 'styled-components';
67

7-
import {BaseButton} from '@/components/atoms/Button';
8-
98
import {mockData} from './mockData';
109
import {IBallCategoryCarouselData, IBallCategoryCarouselProps} from './types';
1110

@@ -22,6 +21,7 @@ const CategoryPanel = ({
2221
const [activeId, onSetActiveId] = useState<string|null>(null);
2322
const [controller, setController] = useState<Controller|null>(null);
2423
const [previewData, setPreviewData] = useState<IBallCategoryCarouselData[]|undefined>(undefined);
24+
const [startIndex, setStartIndex] = useState<number>(0);
2525

2626

2727
useEffect(() => {
@@ -44,6 +44,7 @@ const CategoryPanel = ({
4444
const filterData = mockData.slice(startIndex, endIndex);
4545

4646
setPreviewData(filterData);
47+
setStartIndex(startIndex);
4748
// setTimeout(() => {
4849
// }, 1);
4950

@@ -54,45 +55,45 @@ const CategoryPanel = ({
5455

5556

5657
const getCarouselData = (): TAcroolSlideItemDataList => {
57-
const dataList = [];
58-
59-
if(previewData){
60-
dataList.push(
61-
<AcroolSlideCard key="preview">
62-
<Row className="flex-nowrap g-2">
63-
{
64-
previewData
65-
?.map(row => {
66-
const isActive = row.id === activeId;
67-
68-
return <Col col={12/6} key={`preview_sport_${row.id}`}>
69-
<Card $active={row.id === activeId} onClick={() => {
70-
onSetActiveId(row.id);
71-
}}>
72-
<div className="position-relative">
73-
<Img src={isActive ? row.activePath: row.path} width={28} height={28} className="mt-1"/>
74-
<Count>{row.count}</Count>
75-
</div>
76-
<Name className="text-overflow">{row.name}</Name>
77-
<ActiveLine/>
78-
</Card>
79-
</Col>;
80-
})
81-
}
82-
</Row>
58+
const dataPaginate = mockData ? arraySplit(mockData,18) : undefined;
8359

84-
</AcroolSlideCard>
85-
);
8660

87-
dataList.push(<AcroolSlideCard>
88-
<Row className="g-0">
61+
const dataList2 = [
62+
<AcroolSlideCard key={`preview_${startIndex}`}>
63+
<Row className="flex-nowrap g-2">
8964
{
90-
mockData?.map(row => {
65+
previewData
66+
?.map(row => {
67+
const isActive = row.id === activeId;
68+
69+
return <Col col={12/6}
70+
key={`preview_col_${row.id}`}
71+
>
72+
<Card $active={row.id === activeId} onClick={() => {
73+
onSetActiveId(row.id);
74+
}}>
75+
<div className="position-relative">
76+
<Img src={isActive ? row.activePath: row.path} width={28} height={28} className="mt-1"/>
77+
<Count>{row.count}</Count>
78+
</div>
79+
<Name className="text-overflow">{row.name}</Name>
80+
<ActiveLine/>
81+
</Card>
82+
</Col>;
83+
})
84+
}
85+
</Row>
86+
87+
</AcroolSlideCard>,
88+
...dataPaginate?.map((page, idx) => {
89+
return <AcroolSlideCard key={`real_${idx}`}>
90+
<Row>
91+
{page?.map(row => {
9192
const isActive = row.id === activeId;
9293

9394
return <Col
9495
col={12/6}
95-
key={`top_sport_${row.id}`}
96+
key={`real_col_${row.id}`}
9697
>
9798
<Card $active={row.id === activeId}
9899
onClick={() => {
@@ -106,15 +107,15 @@ const CategoryPanel = ({
106107
<ActiveLine/>
107108
</Card>
108109
</Col>;
109-
})
110-
}
111-
</Row>
112-
</AcroolSlideCard>);
113-
}
110+
}) ?? []}
111+
</Row>
114112

113+
</AcroolSlideCard>;
115114

115+
}) ?? []
116+
];
116117

117-
return dataList;
118+
return dataList2;
118119

119120
};
120121

@@ -221,6 +222,9 @@ const Card = styled.div<{
221222

222223

223224
const CustomAcroolCarousel = styled(AcroolCarousel)`
225+
.acrool-react-carousel__container{
226+
//min-height: 64px;
227+
}
224228
`;
225229

226230
const CarouselWrapper = styled.div`

‎example/src/components/examples/CategoryPanel/_components/mockData.ts‎

Lines changed: 196 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,202 @@
1-
21
import {asset} from '@/utils';
32

43
import {IBallCategoryCarouselData} from './types';
54

65
export const mockData: IBallCategoryCarouselData[] = [
7-
{id: '1', name: 'Soccer', path: asset('/examples/category_panel/category/soccer.png'), activePath: asset('/examples/category_panel/category/soccer_active.png'), count: 12},
8-
{id: '2', name: 'Basketball', path: asset('/examples/category_panel/category/basketball.png'), activePath: asset('/examples/category_panel/category/basketball_active.png'), count: 6},
9-
{id: '3', name: 'Football', path: asset('/examples/category_panel/category/football.png'), activePath: asset('/examples/category_panel/category/football_active.png'), count: 4},
10-
{id: '4', name: 'Tennis', path: asset('/examples/category_panel/category/tennis.png'), activePath: asset('/examples/category_panel/category/tennis_active.png'), count: 2},
11-
{id: '5', name: 'Volleyball', path: asset('/examples/category_panel/category/volleyball.png'), activePath: asset('/examples/category_panel/category/volleyball_active.png'), count: 1},
12-
{id: '6', name: 'Boxing', path: asset('/examples/category_panel/category/boxing.png'), activePath: asset('/examples/category_panel/category/boxing_active.png'), count: 1},
13-
{id: '7', name: 'Cricket', path: asset('/examples/category_panel/category/cricket.png'), activePath: asset('/examples/category_panel/category/cricket_active.png'), count: 1},
14-
{id: '8', name: 'Golf', path: asset('/examples/category_panel/category/golf.png'), activePath: asset('/examples/category_panel/category/golf_active.png'), count: 5},
6+
{
7+
id: '1',
8+
name: 'Soccer',
9+
path: asset('/examples/category_panel/category/soccer.png'),
10+
activePath: asset('/examples/category_panel/category/soccer_active.png'),
11+
count: 12
12+
},
13+
{
14+
id: '2',
15+
name: 'Basketball',
16+
path: asset('/examples/category_panel/category/basketball.png'),
17+
activePath: asset('/examples/category_panel/category/basketball_active.png'),
18+
count: 6
19+
},
20+
{
21+
id: '3',
22+
name: 'Football',
23+
path: asset('/examples/category_panel/category/football.png'),
24+
activePath: asset('/examples/category_panel/category/football_active.png'),
25+
count: 4
26+
},
27+
{
28+
id: '4',
29+
name: 'Tennis',
30+
path: asset('/examples/category_panel/category/tennis.png'),
31+
activePath: asset('/examples/category_panel/category/tennis_active.png'),
32+
count: 2
33+
},
34+
{
35+
id: '5',
36+
name: 'Volleyball',
37+
path: asset('/examples/category_panel/category/volleyball.png'),
38+
activePath: asset('/examples/category_panel/category/volleyball_active.png'),
39+
count: 1
40+
},
41+
{
42+
id: '6',
43+
name: 'Boxing',
44+
path: asset('/examples/category_panel/category/boxing.png'),
45+
activePath: asset('/examples/category_panel/category/boxing_active.png'),
46+
count: 1
47+
},
48+
{
49+
id: '7',
50+
name: 'Cricket',
51+
path: asset('/examples/category_panel/category/cricket.png'),
52+
activePath: asset('/examples/category_panel/category/cricket_active.png'),
53+
count: 1
54+
},
55+
{
56+
id: '8',
57+
name: 'Golf',
58+
path: asset('/examples/category_panel/category/golf.png'),
59+
activePath: asset('/examples/category_panel/category/golf_active.png'),
60+
count: 5
61+
},
62+
{
63+
id: '10',
64+
name: 'Basketball',
65+
path: asset('/examples/category_panel/category/basketball.png'),
66+
activePath: asset('/examples/category_panel/category/basketball_active.png'),
67+
count: 6
68+
},
69+
{
70+
id: '11',
71+
name: 'Football',
72+
path: asset('/examples/category_panel/category/football.png'),
73+
activePath: asset('/examples/category_panel/category/football_active.png'),
74+
count: 4
75+
},
76+
{
77+
id: '12',
78+
name: 'Tennis',
79+
path: asset('/examples/category_panel/category/tennis.png'),
80+
activePath: asset('/examples/category_panel/category/tennis_active.png'),
81+
count: 2
82+
},
83+
{
84+
id: '13',
85+
name: 'Volleyball',
86+
path: asset('/examples/category_panel/category/volleyball.png'),
87+
activePath: asset('/examples/category_panel/category/volleyball_active.png'),
88+
count: 1
89+
},
90+
{
91+
id: '14',
92+
name: 'Boxing',
93+
path: asset('/examples/category_panel/category/boxing.png'),
94+
activePath: asset('/examples/category_panel/category/boxing_active.png'),
95+
count: 1
96+
},
97+
{
98+
id: '15',
99+
name: 'Cricket',
100+
path: asset('/examples/category_panel/category/cricket.png'),
101+
activePath: asset('/examples/category_panel/category/cricket_active.png'),
102+
count: 1
103+
},
104+
{
105+
id: '16',
106+
name: 'Golf',
107+
path: asset('/examples/category_panel/category/golf.png'),
108+
activePath: asset('/examples/category_panel/category/golf_active.png'),
109+
count: 5
110+
},
111+
{
112+
id: '17',
113+
name: 'Basketball',
114+
path: asset('/examples/category_panel/category/basketball.png'),
115+
activePath: asset('/examples/category_panel/category/basketball_active.png'),
116+
count: 6
117+
},
118+
{
119+
id: '18',
120+
name: 'Football',
121+
path: asset('/examples/category_panel/category/football.png'),
122+
activePath: asset('/examples/category_panel/category/football_active.png'),
123+
count: 4
124+
},
125+
{
126+
id: '19',
127+
name: 'Tennis',
128+
path: asset('/examples/category_panel/category/tennis.png'),
129+
activePath: asset('/examples/category_panel/category/tennis_active.png'),
130+
count: 2
131+
},
132+
{
133+
id: '20',
134+
name: 'Volleyball',
135+
path: asset('/examples/category_panel/category/volleyball.png'),
136+
activePath: asset('/examples/category_panel/category/volleyball_active.png'),
137+
count: 1
138+
},
139+
{
140+
id: '21',
141+
name: 'Boxing',
142+
path: asset('/examples/category_panel/category/boxing.png'),
143+
activePath: asset('/examples/category_panel/category/boxing_active.png'),
144+
count: 1
145+
},
146+
{
147+
id: '22',
148+
name: 'Cricket',
149+
path: asset('/examples/category_panel/category/cricket.png'),
150+
activePath: asset('/examples/category_panel/category/cricket_active.png'),
151+
count: 1
152+
},
153+
{
154+
id: '23',
155+
name: 'Golf',
156+
path: asset('/examples/category_panel/category/golf.png'),
157+
activePath: asset('/examples/category_panel/category/golf_active.png'),
158+
count: 5
159+
},
160+
{
161+
id: '24',
162+
name: 'Football',
163+
path: asset('/examples/category_panel/category/football.png'),
164+
activePath: asset('/examples/category_panel/category/football_active.png'),
165+
count: 4
166+
},
167+
{
168+
id: '25',
169+
name: 'Tennis',
170+
path: asset('/examples/category_panel/category/tennis.png'),
171+
activePath: asset('/examples/category_panel/category/tennis_active.png'),
172+
count: 2
173+
},
174+
{
175+
id: '26',
176+
name: 'Volleyball',
177+
path: asset('/examples/category_panel/category/volleyball.png'),
178+
activePath: asset('/examples/category_panel/category/volleyball_active.png'),
179+
count: 1
180+
},
181+
{
182+
id: '27',
183+
name: 'Boxing',
184+
path: asset('/examples/category_panel/category/boxing.png'),
185+
activePath: asset('/examples/category_panel/category/boxing_active.png'),
186+
count: 1
187+
},
188+
{
189+
id: '28',
190+
name: 'Cricket',
191+
path: asset('/examples/category_panel/category/cricket.png'),
192+
activePath: asset('/examples/category_panel/category/cricket_active.png'),
193+
count: 1
194+
},
195+
{
196+
id: '29',
197+
name: 'Golf',
198+
path: asset('/examples/category_panel/category/golf.png'),
199+
activePath: asset('/examples/category_panel/category/golf_active.png'),
200+
count: 5
201+
},
15202
];

‎example/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
# yarn lockfile v1
33

44

5-
"@acrool/js-utils@^3.2.22":
6-
version "3.2.22"
7-
resolved "https://registry.yarnpkg.com/@acrool/js-utils/-/js-utils-3.2.22.tgz#ce460d0e789fc9d721d63c23d8c34c0ed93c3f66"
8-
integrity sha512-CU/DxGcsuMFSNq4BDoDRS7W6DUVd8pD2JI1yVIYRRvGCIXpW8M/dXGAdIEtOBfZ3Akp//yFTrueGnPfyNRbIqQ==
5+
"@acrool/js-utils@^3.2.23-alpha.0":
6+
version "3.2.23-alpha.0"
7+
resolved "https://registry.yarnpkg.com/@acrool/js-utils/-/js-utils-3.2.23-alpha.0.tgz#8cf9417b788f607cd124b23e4d0cc83fb679b6ab"
8+
integrity sha512-cssAwTZauip01C2q+MHBuNRVhpGDspI155+VMlNho6dOUiHGxPrPEqvX6KHFpyJpsOVdp2rwh9B4zVj679RwpA==
99
dependencies:
1010
big.js "^7.0.1"
1111
dayjs "^1.x"

0 commit comments

Comments
 (0)