Skip to content

Commit 9a015b9

Browse files
codiinicodiini
authored
feat(cascadeselect) add showClear prop (#8007)
* feat(cascadeselect) implement showClear prop * docs(cascadeselect): document showClear prop
1 parent 3c0cca7 commit 9a015b9

File tree

6 files changed

+397
-1
lines changed

6 files changed

+397
-1
lines changed

‎components/doc/cascadeselect/clearicondoc.js‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
import { DocSectionCode } from '@/components/doc/common/docsectioncode';
2+
import { DocSectionText } from '@/components/doc/common/docsectiontext';
3+
import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
4+
import { useState } from 'react';
5+
6+
export function ClearIconDoc(props) {
7+
const [selectedCity, setSelectedCity] = useState(null);
8+
const countries = [
9+
{
10+
name: 'Australia',
11+
code: 'AU',
12+
states: [
13+
{
14+
name: 'New South Wales',
15+
cities: [
16+
{ cname: 'Sydney', code: 'A-SY' },
17+
{ cname: 'Newcastle', code: 'A-NE' },
18+
{ cname: 'Wollongong', code: 'A-WO' }
19+
]
20+
},
21+
{
22+
name: 'Queensland',
23+
cities: [
24+
{ cname: 'Brisbane', code: 'A-BR' },
25+
{ cname: 'Townsville', code: 'A-TO' }
26+
]
27+
}
28+
]
29+
},
30+
{
31+
name: 'Canada',
32+
code: 'CA',
33+
states: [
34+
{
35+
name: 'Quebec',
36+
cities: [
37+
{ cname: 'Montreal', code: 'C-MO' },
38+
{ cname: 'Quebec City', code: 'C-QU' }
39+
]
40+
},
41+
{
42+
name: 'Ontario',
43+
cities: [
44+
{ cname: 'Ottawa', code: 'C-OT' },
45+
{ cname: 'Toronto', code: 'C-TO' }
46+
]
47+
}
48+
]
49+
},
50+
{
51+
name: 'United States',
52+
code: 'US',
53+
states: [
54+
{
55+
name: 'California',
56+
cities: [
57+
{ cname: 'Los Angeles', code: 'US-LA' },
58+
{ cname: 'San Diego', code: 'US-SD' },
59+
{ cname: 'San Francisco', code: 'US-SF' }
60+
]
61+
},
62+
{
63+
name: 'Florida',
64+
cities: [
65+
{ cname: 'Jacksonville', code: 'US-JA' },
66+
{ cname: 'Miami', code: 'US-MI' },
67+
{ cname: 'Tampa', code: 'US-TA' },
68+
{ cname: 'Orlando', code: 'US-OR' }
69+
]
70+
},
71+
{
72+
name: 'Texas',
73+
cities: [
74+
{ cname: 'Austin', code: 'US-AU' },
75+
{ cname: 'Dallas', code: 'US-DA' },
76+
{ cname: 'Houston', code: 'US-HO' }
77+
]
78+
}
79+
]
80+
}
81+
];
82+
83+
const code = {
84+
basic: `
85+
<CascadeSelect value={selectedCity} showClear onChange={(e) => setSelectedCity(e.value)} options={countries}
86+
optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
87+
className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
88+
`,
89+
javascript: `
90+
import React, { useState } from "react";
91+
import { CascadeSelect } from 'primereact/cascadeselect';
92+
93+
export default function ClearIconDemo() {
94+
const [selectedCity, setSelectedCity] = useState(null);
95+
const countries = [
96+
{
97+
name: 'Australia',
98+
code: 'AU',
99+
states: [
100+
{
101+
name: 'New South Wales',
102+
cities: [
103+
{cname: 'Sydney', code: 'A-SY'},
104+
{cname: 'Newcastle', code: 'A-NE'},
105+
{cname: 'Wollongong', code: 'A-WO'}
106+
]
107+
},
108+
{
109+
name: 'Queensland',
110+
cities: [
111+
{cname: 'Brisbane', code: 'A-BR'},
112+
{cname: 'Townsville', code: 'A-TO'}
113+
]
114+
},
115+
116+
]
117+
},
118+
{
119+
name: 'Canada',
120+
code: 'CA',
121+
states: [
122+
{
123+
name: 'Quebec',
124+
cities: [
125+
{cname: 'Montreal', code: 'C-MO'},
126+
{cname: 'Quebec City', code: 'C-QU'}
127+
]
128+
},
129+
{
130+
name: 'Ontario',
131+
cities: [
132+
{cname: 'Ottawa', code: 'C-OT'},
133+
{cname: 'Toronto', code: 'C-TO'}
134+
]
135+
},
136+
137+
]
138+
},
139+
{
140+
name: 'United States',
141+
code: 'US',
142+
states: [
143+
{
144+
name: 'California',
145+
cities: [
146+
{cname: 'Los Angeles', code: 'US-LA'},
147+
{cname: 'San Diego', code: 'US-SD'},
148+
{cname: 'San Francisco', code: 'US-SF'}
149+
]
150+
},
151+
{
152+
name: 'Florida',
153+
cities: [
154+
{cname: 'Jacksonville', code: 'US-JA'},
155+
{cname: 'Miami', code: 'US-MI'},
156+
{cname: 'Tampa', code: 'US-TA'},
157+
{cname: 'Orlando', code: 'US-OR'}
158+
]
159+
},
160+
{
161+
name: 'Texas',
162+
cities: [
163+
{cname: 'Austin', code: 'US-AU'},
164+
{cname: 'Dallas', code: 'US-DA'},
165+
{cname: 'Houston', code: 'US-HO'}
166+
]
167+
}
168+
]
169+
}
170+
];
171+
172+
return (
173+
<div className="card flex justify-content-center">
174+
<CascadeSelect value={selectedCity} showClear onChange={(e) => setSelectedCity(e.value)} options={countries}
175+
optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
176+
className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
177+
</div>
178+
)
179+
}
180+
`,
181+
typescript: `
182+
import React, { useState } from "react";
183+
import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
184+
185+
interface City {
186+
cname: string;
187+
code: string;
188+
}
189+
190+
interface CountryState {
191+
name: string;
192+
cities: City[];
193+
}
194+
195+
interface Country {
196+
name: string;
197+
code: string;
198+
states: CountryState[];
199+
}
200+
201+
export default function ClearIconDemo() {
202+
const [selectedCity, setSelectedCity] = useState<City | null>(null);
203+
const countries: Country[] = [
204+
{
205+
name: 'Australia',
206+
code: 'AU',
207+
states: [
208+
{
209+
name: 'New South Wales',
210+
cities: [
211+
{cname: 'Sydney', code: 'A-SY'},
212+
{cname: 'Newcastle', code: 'A-NE'},
213+
{cname: 'Wollongong', code: 'A-WO'}
214+
]
215+
},
216+
{
217+
name: 'Queensland',
218+
cities: [
219+
{cname: 'Brisbane', code: 'A-BR'},
220+
{cname: 'Townsville', code: 'A-TO'}
221+
]
222+
},
223+
224+
]
225+
},
226+
{
227+
name: 'Canada',
228+
code: 'CA',
229+
states: [
230+
{
231+
name: 'Quebec',
232+
cities: [
233+
{cname: 'Montreal', code: 'C-MO'},
234+
{cname: 'Quebec City', code: 'C-QU'}
235+
]
236+
},
237+
{
238+
name: 'Ontario',
239+
cities: [
240+
{cname: 'Ottawa', code: 'C-OT'},
241+
{cname: 'Toronto', code: 'C-TO'}
242+
]
243+
},
244+
245+
]
246+
},
247+
{
248+
name: 'United States',
249+
code: 'US',
250+
states: [
251+
{
252+
name: 'California',
253+
cities: [
254+
{cname: 'Los Angeles', code: 'US-LA'},
255+
{cname: 'San Diego', code: 'US-SD'},
256+
{cname: 'San Francisco', code: 'US-SF'}
257+
]
258+
},
259+
{
260+
name: 'Florida',
261+
cities: [
262+
{cname: 'Jacksonville', code: 'US-JA'},
263+
{cname: 'Miami', code: 'US-MI'},
264+
{cname: 'Tampa', code: 'US-TA'},
265+
{cname: 'Orlando', code: 'US-OR'}
266+
]
267+
},
268+
{
269+
name: 'Texas',
270+
cities: [
271+
{cname: 'Austin', code: 'US-AU'},
272+
{cname: 'Dallas', code: 'US-DA'},
273+
{cname: 'Houston', code: 'US-HO'}
274+
]
275+
}
276+
]
277+
}
278+
];
279+
280+
return (
281+
<div className="card flex justify-content-center">
282+
<CascadeSelect value={selectedCity} showClear onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries}
283+
optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
284+
className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
285+
</div>
286+
)
287+
}
288+
`
289+
};
290+
291+
return (
292+
<>
293+
<DocSectionText {...props}>
294+
<p>
295+
When <i>showClear</i> is enabled, a clear icon is added to reset the CascadeSelect.
296+
</p>
297+
</DocSectionText>
298+
<div className="card flex justify-content-center">
299+
<CascadeSelect
300+
value={selectedCity}
301+
showClear
302+
onChange={(e) => setSelectedCity(e.value)}
303+
options={countries}
304+
optionLabel="cname"
305+
optionGroupLabel="name"
306+
optionGroupChildren={['states', 'cities']}
307+
className="w-full md:w-14rem"
308+
breakpoint="767px"
309+
placeholder="Select a City"
310+
style={{ minWidth: '14rem' }}
311+
/>
312+
</div>
313+
<DocSectionCode code={code} />
314+
</>
315+
);
316+
}

‎components/doc/common/apidoc/index.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9414,6 +9414,14 @@
94149414
"default": "400px",
94159415
"description": "Maximum height of the options panel on responsive mode."
94169416
},
9417+
{
9418+
"name": "showClear",
9419+
"optional": true,
9420+
"readonly": false,
9421+
"type": "boolean",
9422+
"default": "false",
9423+
"description": "When enabled, a clear icon is displayed to clear the value."
9424+
},
94179425
{
94189426
"name": "style",
94199427
"optional": true,

0 commit comments

Comments
 (0)