Skip to content

Commit 2772b6e

Browse files
lisalupilisalupi
authored
fix(OfferList): redo missing commit (#5395)
* fix: redo missing commit * fix: add changeset
1 parent 35e725f commit 2772b6e

File tree

8 files changed

+186
-89
lines changed

8 files changed

+186
-89
lines changed

‎.changeset/sixty-pillows-laugh.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/plus": patch
3+
---
4+
5+
`OfferList`: new prop "selected"

‎packages/plus/src/components/OfferList/OfferList.tsx‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ type OfferListProps = Omit<
2626
*/
2727
type?: 'radio' | 'checkbox'
2828
onChangeSelect?: (selected: string | string[]) => void
29+
/**
30+
* Pre-selected rows (using their offerName). Must be an array when `type = "checkbox"`.
31+
*/
32+
selected?: string | string[]
2933
}
3034

3135
export const OfferList = ({
@@ -35,9 +39,16 @@ export const OfferList = ({
3539
children,
3640
loading,
3741
autoCollapse,
42+
selected,
3843
onChangeSelect,
3944
}: OfferListProps) => {
40-
const [selectedRows, setSelectedRows] = useState<string[]>([])
45+
const [radioSelectedRow, setRadioSelectedRow] = useState<string | undefined>(
46+
typeof selected === 'string' ? selected : undefined,
47+
)
48+
const [checkboxSelectedRows, setCheckboxSelectedRows] = useState<string[]>(
49+
Array.isArray(selected) ? selected : [],
50+
)
51+
4152
const computedColumns = [
4253
{
4354
label: '',
@@ -46,24 +57,33 @@ export const OfferList = ({
4657
...columns,
4758
].filter(element => !!element)
4859

49-
useEffect(
50-
() => onChangeSelect?.(selectedRows),
51-
[selectedRows, onChangeSelect],
52-
)
60+
useEffect(() => {
61+
if (selected) {
62+
if (typeof selected === 'string' && type === 'radio') {
63+
setRadioSelectedRow(selected)
64+
}
65+
if (Array.isArray(selected) && type === 'checkbox') {
66+
setCheckboxSelectedRows(selected)
67+
}
68+
}
69+
}, [type, selected])
5370

5471
return (
5572
<OfferListProvider
5673
autoCollapse={autoCollapse}
74+
checkboxSelectedRows={checkboxSelectedRows}
5775
expandable={expandable}
5876
loading={loading}
5977
onChangeSelect={onChangeSelect}
78+
radioSelectedRow={radioSelectedRow}
6079
selectable={type}
80+
setCheckboxSelectedRows={setCheckboxSelectedRows}
81+
setRadioSelectedRow={setRadioSelectedRow}
6182
>
6283
<StyledList
6384
autoCollapse={autoCollapse}
6485
columns={computedColumns}
6586
expandable={false}
66-
onSelectedChange={setSelectedRows}
6787
selectable={false}
6888
>
6989
{children}

‎packages/plus/src/components/OfferList/OfferListProvider.tsx‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Dispatch, ReactNode, SetStateAction } from 'react'
2-
import { createContext, useContext, useState } from 'react'
2+
import { createContext, useContext } from 'react'
33

44
type OfferListContextValue = {
55
selectable: 'radio' | 'checkbox'
@@ -10,10 +10,8 @@ type OfferListContextValue = {
1010
loading?: boolean
1111
onChangeSelect?: (selected: string | string[]) => void
1212
autoCollapse?: boolean
13-
checkboxSelectedRows: Record<string | number, boolean>
14-
setCheckboxSelectedRows: Dispatch<
15-
SetStateAction<Record<string | number, boolean>>
16-
>
13+
checkboxSelectedRows: string[]
14+
setCheckboxSelectedRows: Dispatch<SetStateAction<string[]>>
1715
}
1816
const OfferListContext = createContext<OfferListContextValue | undefined>(
1917
undefined,
@@ -27,6 +25,10 @@ type OfferListProviderProps = {
2725
loading?: boolean
2826
onChangeSelect?: (selected: string | string[]) => void
2927
autoCollapse?: boolean
28+
radioSelectedRow: string | undefined
29+
setRadioSelectedRow: Dispatch<SetStateAction<string | undefined>>
30+
checkboxSelectedRows: string[]
31+
setCheckboxSelectedRows: Dispatch<SetStateAction<string[]>>
3032
}
3133

3234
export const OfferListProvider = ({
@@ -37,31 +39,28 @@ export const OfferListProvider = ({
3739
loading,
3840
onChangeSelect,
3941
autoCollapse,
40-
}: OfferListProviderProps) => {
41-
const [radioSelectedRow, setRadioSelectedRow] = useState<string>()
42-
const [checkboxSelectedRows, setCheckboxSelectedRows] = useState<
43-
Record<string | number, boolean>
44-
>({})
45-
46-
return (
47-
<OfferListContext.Provider
48-
value={{
49-
autoCollapse,
50-
checkboxSelectedRows,
51-
disabled,
52-
expandable,
53-
loading,
54-
onChangeSelect,
55-
radioSelectedRow,
56-
selectable,
57-
setCheckboxSelectedRows,
58-
setRadioSelectedRow,
59-
}}
60-
>
61-
{children}
62-
</OfferListContext.Provider>
63-
)
64-
}
42+
radioSelectedRow,
43+
setRadioSelectedRow,
44+
checkboxSelectedRows,
45+
setCheckboxSelectedRows,
46+
}: OfferListProviderProps) => (
47+
<OfferListContext.Provider
48+
value={{
49+
autoCollapse,
50+
checkboxSelectedRows,
51+
disabled,
52+
expandable,
53+
loading,
54+
onChangeSelect,
55+
radioSelectedRow,
56+
selectable,
57+
setCheckboxSelectedRows,
58+
setRadioSelectedRow,
59+
}}
60+
>
61+
{children}
62+
</OfferListContext.Provider>
63+
)
6564

6665
export const useOfferListContext = () => {
6766
const context = useContext(OfferListContext)

‎packages/plus/src/components/OfferList/__stories__/OnChangeSelect.stories.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,18 @@ import { OfferList } from '../OfferList'
66
import { columns, data } from './resources'
77

88
export const OnChange: StoryFn<ComponentProps<typeof OfferList>> = props => {
9-
const [selectedRow, setSelectedRow] = useState<string | string[]>()
9+
const [selectedRow, setSelectedRow] = useState<string | string[]>(
10+
'venus-offer',
11+
)
1012
const [selectable, setSelectable] = useState<'checkbox' | 'radio'>('radio')
1113

1214
return (
1315
<Stack gap={1}>
1416
<Button
1517
onClick={() => {
1618
setSelectable(selectable === 'checkbox' ? 'radio' : 'checkbox')
17-
if (selectable === 'checkbox') setSelectedRow('')
18-
else setSelectedRow([])
19+
if (selectable === 'checkbox') setSelectedRow('venus-offer')
20+
else setSelectedRow(['mercury-offer', 'jupiter-offer'])
1921
}}
2022
>
2123
Set selectable to {selectable === 'checkbox' ? 'radio' : 'checkbox'}
@@ -25,7 +27,12 @@ export const OnChange: StoryFn<ComponentProps<typeof OfferList>> = props => {
2527
{Array.isArray(selectedRow)
2628
? selectedRow.map((value, index) => `${index > 0 ? ', ' : ''}${value}`)
2729
: selectedRow}
28-
<OfferList {...props} onChangeSelect={setSelectedRow} type={selectable}>
30+
<OfferList
31+
{...props}
32+
onChangeSelect={setSelectedRow}
33+
selected={selectedRow}
34+
type={selectable}
35+
>
2936
{data.map(planet => (
3037
<OfferList.Row
3138
disabled={planet.id === 'mars'}
@@ -51,7 +58,7 @@ OnChange.parameters = {
5158
docs: {
5259
description: {
5360
story:
54-
'Use prop `onChangeSelect` to get the selected element(s). Selected row is a string (row id) when `selectable="radio"` and a string[] when `selectable="checkbox"`',
61+
'Use prop `onChangeSelect` to get the selected element(s). Selected row is a string (row offerName) when `selectable="radio"` and a string[] when `selectable="checkbox"`. A row can be pre-selected using prop `selected` (using the offer name)',
5562
},
5663
},
5764
}

‎packages/plus/src/components/OfferList/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3298,7 +3298,7 @@ exports[`OfferList > should work with banner 1`] = `
32983298
height: fit-content;
32993299
border-top-left-radius: 0;
33003300
border-top-right-radius: 0;
3301-
background-color: #f9f9fa;
3301+
background-color: #fff6e6;
33023302
width: 100%;
33033303
padding-block: 0.25rem;
33043304
padding-inline: 0.5rem;
@@ -3310,6 +3310,39 @@ exports[`OfferList > should work with banner 1`] = `
33103310
}
33113311
33123312
.emotion-68 {
3313+
color: #7c5400;
3314+
font-size: 0.75rem;
3315+
font-family: Inter,sans-serif;
3316+
font-weight: 400;
3317+
letter-spacing: 0;
3318+
line-height: 1rem;
3319+
text-transform: none;
3320+
-webkit-text-decoration: none;
3321+
text-decoration: none;
3322+
}
3323+
3324+
.emotion-109 {
3325+
display: table-cell;
3326+
vertical-align: middle;
3327+
height: 3.75rem;
3328+
padding: 0 1rem;
3329+
height: -webkit-fit-content;
3330+
height: -moz-fit-content;
3331+
height: fit-content;
3332+
border-top-left-radius: 0;
3333+
border-top-right-radius: 0;
3334+
background-color: #f9f9fa;
3335+
width: 100%;
3336+
padding-block: 0.25rem;
3337+
padding-inline: 0.5rem;
3338+
border-bottom: 1px solid #d9dadd;
3339+
}
3340+
3341+
.emotion-109[aria-disabled="true"] {
3342+
background-color: #f3f3f4;
3343+
}
3344+
3345+
.emotion-111 {
33133346
color: #3f4250;
33143347
font-size: 0.75rem;
33153348
font-family: Inter,sans-serif;
@@ -3595,11 +3628,11 @@ exports[`OfferList > should work with banner 1`] = `
35953628
data-expandable-content="true"
35963629
>
35973630
<td
3598-
class="emotion-65 emotion-66 emotion-32"
3631+
class="emotion-65 emotion-109 emotion-32"
35993632
colspan="5"
36003633
>
36013634
<p
3602-
class="emotion-68 emotion-69"
3635+
class="emotion-111 emotion-69"
36033636
>
36043637
text
36053638
</p>
@@ -3706,11 +3739,11 @@ exports[`OfferList > should work with banner 1`] = `
37063739
data-expandable-content="true"
37073740
>
37083741
<td
3709-
class="emotion-65 emotion-66 emotion-32"
3742+
class="emotion-65 emotion-109 emotion-32"
37103743
colspan="5"
37113744
>
37123745
<p
3713-
class="emotion-68 emotion-69"
3746+
class="emotion-111 emotion-69"
37143747
>
37153748
text
37163749
</p>
@@ -3817,11 +3850,11 @@ exports[`OfferList > should work with banner 1`] = `
38173850
data-expandable-content="true"
38183851
>
38193852
<td
3820-
class="emotion-65 emotion-66 emotion-32"
3853+
class="emotion-65 emotion-109 emotion-32"
38213854
colspan="5"
38223855
>
38233856
<p
3824-
class="emotion-68 emotion-69"
3857+
class="emotion-111 emotion-69"
38253858
>
38263859
text
38273860
</p>
@@ -3928,11 +3961,11 @@ exports[`OfferList > should work with banner 1`] = `
39283961
data-expandable-content="true"
39293962
>
39303963
<td
3931-
class="emotion-65 emotion-66 emotion-32"
3964+
class="emotion-65 emotion-109 emotion-32"
39323965
colspan="5"
39333966
>
39343967
<p
3935-
class="emotion-68 emotion-69"
3968+
class="emotion-111 emotion-69"
39363969
>
39373970
text
39383971
</p>
@@ -4039,11 +4072,11 @@ exports[`OfferList > should work with banner 1`] = `
40394072
data-expandable-content="true"
40404073
>
40414074
<td
4042-
class="emotion-65 emotion-66 emotion-32"
4075+
class="emotion-65 emotion-109 emotion-32"
40434076
colspan="5"
40444077
>
40454078
<p
4046-
class="emotion-68 emotion-69"
4079+
class="emotion-111 emotion-69"
40474080
>
40484081
text
40494082
</p>
@@ -4150,11 +4183,11 @@ exports[`OfferList > should work with banner 1`] = `
41504183
data-expandable-content="true"
41514184
>
41524185
<td
4153-
class="emotion-65 emotion-66 emotion-32"
4186+
class="emotion-65 emotion-109 emotion-32"
41544187
colspan="5"
41554188
>
41564189
<p
4157-
class="emotion-68 emotion-69"
4190+
class="emotion-111 emotion-69"
41584191
>
41594192
text
41604193
</p>
@@ -4261,11 +4294,11 @@ exports[`OfferList > should work with banner 1`] = `
42614294
data-expandable-content="true"
42624295
>
42634296
<td
4264-
class="emotion-65 emotion-66 emotion-32"
4297+
class="emotion-65 emotion-109 emotion-32"
42654298
colspan="5"
42664299
>
42674300
<p
4268-
class="emotion-68 emotion-69"
4301+
class="emotion-111 emotion-69"
42694302
>
42704303
text
42714304
</p>
@@ -9876,6 +9909,7 @@ exports[`OfferList > should work with selectable - checkbox 1`] = `
98769909
aria-checked="false"
98779910
aria-invalid="false"
98789911
aria-label="select"
9912+
checked=""
98799913
class="emotion-33 emotion-34"
98809914
id="jupiter"
98819915
name="checkbox-offer-list-jupiter"
@@ -11425,6 +11459,7 @@ exports[`OfferList > should work with selectable - radio 1`] = `
1142511459
<input
1142611460
aria-disabled="false"
1142711461
aria-invalid="false"
11462+
checked=""
1142811463
class="emotion-35 emotion-36"
1142911464
id="jupiter"
1143011465
name="radio-offer-list-jupiter"

0 commit comments

Comments
 (0)