Skip to content

Commit 0f34509

Browse files
Misael840Misael840
authored
Merge pull request #317 from dd3tech/feat/combo-select
Feat: add combo select component
2 parents af56328 + 97fdc4b commit 0f34509

14 files changed

Lines changed: 372 additions & 114 deletions

‎exports.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,11 @@
122122
"module": "./dist/esm/components/ConfirmDialog/index.js",
123123
"default": "./dist/esm/components/ConfirmDialog/index.js"
124124
},
125+
"./ComboSelect": {
126+
"require": "./dist/cjs/components/Form/index.js",
127+
"module": "./dist/esm/components/Form/index.js",
128+
"default": "./dist/esm/components/Form/index.js"
129+
},
125130
"./DatePicker": {
126131
"require": "./dist/cjs/components/DatePicker/index.js",
127132
"module": "./dist/esm/components/DatePicker/index.js",
@@ -449,6 +454,7 @@
449454
"Checkbox": ["./dist/esm/components/Checkbox/index.d.ts"],
450455
"Circle": ["./dist/esm/components/Circle/index.d.ts"],
451456
"ConfirmDialog": ["./dist/esm/components/ConfirmDialog/index.d.ts"],
457+
"ComboSelect": ["./dist/esm/components/Form/ComboSelect/index.d.ts"],
452458
"DatePicker": ["./dist/esm/components/DatePicker/index.d.ts"],
453459
"DatePickerWithPortal": [
454460
"./dist/esm/components/DatePicker/DatePickerWithPortal.d.ts"

‎package.json‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,11 @@
353353
"module": "./dist/esm/components/Layout/Container/index.js",
354354
"default": "./dist/esm/components/Layout/Container/index.js"
355355
},
356+
"./ComboSelect": {
357+
"require": "./dist/cjs/components/Form/index.js",
358+
"module": "./dist/esm/components/Form/index.js",
359+
"default": "./dist/esm/components/Form/index.js"
360+
},
356361
"./Flex": {
357362
"require": "./dist/cjs/components/Layout/Flex/index.js",
358363
"module": "./dist/esm/components/Layout/Flex/index.js",
@@ -594,9 +599,6 @@
594599
"Badge": [
595600
"./dist/esm/components/Badge/index.d.ts"
596601
],
597-
"Chip": [
598-
"./dist/esm/components/Chip/index.d.ts"
599-
],
600602
"BarList": [
601603
"./dist/esm/components/BarList/index.d.ts"
602604
],
@@ -618,21 +620,24 @@
618620
"Card": [
619621
"./dist/esm/components/Card/index.d.ts"
620622
],
621-
"DownloadCard": [
622-
"./dist/esm/components/Card/DownloadCard.d.ts"
623-
],
624623
"Cell": [
625624
"./dist/esm/components/Cell/index.d.ts"
626625
],
627626
"Checkbox": [
628627
"./dist/esm/components/Checkbox/index.d.ts"
629628
],
629+
"Chip": [
630+
"./dist/esm/components/Chip/index.d.ts"
631+
],
630632
"Circle": [
631633
"./dist/esm/components/Circle/index.d.ts"
632634
],
633635
"ConfirmDialog": [
634636
"./dist/esm/components/ConfirmDialog/index.d.ts"
635637
],
638+
"ComboSelect": [
639+
"./dist/esm/components/Form/ComboSelect/index.d.ts"
640+
],
636641
"DatePicker": [
637642
"./dist/esm/components/DatePicker/index.d.ts"
638643
],
@@ -642,6 +647,9 @@
642647
"Divider": [
643648
"./dist/esm/components/Divider/index.d.ts"
644649
],
650+
"DownloadCard": [
651+
"./dist/esm/components/Card/DownloadCard.d.ts"
652+
],
645653
"Dropdown": [
646654
"./dist/esm/components/Dropdown/index.d.ts"
647655
],

‎src/components/Filters/DropdownRange.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ describe('<DropdownRange/>', () => {
3131
const { getByRole } = render(<DropdownRange {...props} />)
3232

3333
fireEvent.click(getByRole('filter-input'))
34-
fireEvent.click(getByRole('confirm-btn'))
34+
fireEvent.click(getByRole('combo-select-submit'))
3535

3636
expect(props.onSubmit).toHaveBeenCalledWith({
3737
maxVal: 50,
@@ -43,7 +43,7 @@ describe('<DropdownRange/>', () => {
4343
const { getByRole } = render(<DropdownRange {...props} />)
4444

4545
fireEvent.click(getByRole('filter-input'))
46-
fireEvent.click(getByRole('cancel-btn'))
46+
fireEvent.click(getByRole('combo-select-clear'))
4747

4848
expect(props.onClose).toHaveBeenCalledTimes(1)
4949
})

‎src/components/Filters/DropdownRangeSlider.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ describe('<DropdownRangeSlider/>', () => {
3333
const { getByRole } = render(<DropdownRangeSlider {...props} />)
3434

3535
fireEvent.click(getByRole('filter-input'))
36-
fireEvent.click(getByRole('confirm-btn'))
36+
fireEvent.click(getByRole('combo-select-submit'))
3737

3838
expect(props.onSubmit).toHaveBeenCalledWith({
3939
max: 50,
@@ -45,7 +45,7 @@ describe('<DropdownRangeSlider/>', () => {
4545
const { getByRole } = render(<DropdownRangeSlider {...props} />)
4646

4747
fireEvent.click(getByRole('filter-input'))
48-
fireEvent.click(getByRole('cancel-btn'))
48+
fireEvent.click(getByRole('combo-select-clear'))
4949

5050
expect(props.onClose).toHaveBeenCalledTimes(1)
5151
})

‎src/components/Filters/FilterRange.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,20 @@ describe('<FilterRange/>', () => {
2525
<FilterRange {...defaultProps} defaultMin={1} defaultMax={30} />
2626
)
2727

28-
const applyBtn = getByRole('confirm-btn')
28+
const applyBtn = getByRole('combo-select-submit')
2929
fireEvent.click(applyBtn)
3030
expect(onApply).toHaveBeenCalled()
3131
expect(onApply).toHaveBeenCalledTimes(1)
3232

33-
const resetBtn = getByRole('cancel-btn')
33+
const resetBtn = getByRole('combo-select-clear')
3434
fireEvent.click(resetBtn)
3535
expect(onReset).toHaveBeenCalled()
3636
expect(onReset).toHaveBeenCalledTimes(1)
3737
})
3838

3939
it('the min and max values should change', () => {
40-
const { getByTestId } = render(<FilterRange {...defaultProps} />)
41-
const card = getByTestId('card-contain')
40+
const { getByRole } = render(<FilterRange {...defaultProps} />)
41+
const card = getByRole('combo-select-content')
4242
const inputMin = card.querySelector(
4343
'input[name="minVal"]'
4444
) as HTMLInputElement
@@ -54,17 +54,17 @@ describe('<FilterRange/>', () => {
5454
})
5555

5656
it('should not return a value if the entered range is not allowed', () => {
57-
const { getByTestId, getByRole } = render(
57+
const { getByRole } = render(
5858
<FilterRange {...defaultProps} min={10} max={50} />
5959
)
60-
const card = getByTestId('card-contain')
60+
const card = getByRole('combo-select-content')
6161
const inputMin = card.querySelector(
6262
'input[name="minVal"]'
6363
) as HTMLInputElement
6464
const inputMax = card.querySelector(
6565
'input[name="maxVal"]'
6666
) as HTMLInputElement
67-
const applyBtn = getByRole('confirm-btn')
67+
const applyBtn = getByRole('combo-select-submit')
6868

6969
fireEvent.change(inputMin, { target: { value: 9 } })
7070

‎src/components/Filters/FilterRange.tsx‎

Lines changed: 37 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
*/
44

55
import { ChangeEvent, useState } from 'react'
6-
import ConfirmDialog from 'components/ConfirmDialog/ConfirmDialog'
76
import Input from 'components/Form/Input'
8-
import Text from 'components/Typography/Text'
97
import { Flex } from 'components/Layout'
8+
import ComboSelect from 'components/Form/ComboSelect'
109

1110
export interface IRange {
1211
minVal?: number
@@ -19,13 +18,9 @@ export interface FilterRangeProps {
1918
*/
2019
title?: string
2120
/**
22-
* Text displayed above the minimum value input
21+
* Text displayed as unit of ranges
2322
*/
24-
textMin?: string
25-
/**
26-
* Text displayed above the maximum value input
27-
*/
28-
textMax?: string
23+
labelInput?: string
2924
/**
3025
* Minimum number allowed
3126
*/
@@ -73,8 +68,7 @@ const FilterRange = ({
7368
title,
7469
min = 0,
7570
max = 999999999,
76-
textMin = 'Minimum',
77-
textMax = 'Maximum',
71+
labelInput = 'MXN',
7872
defaultMin,
7973
defaultMax,
8074
textApplyBtn = 'Apply',
@@ -129,54 +123,71 @@ const FilterRange = ({
129123
}
130124

131125
return (
132-
<ConfirmDialog
133-
title={title}
134-
onConfirm={apply}
135-
onCancel={reset}
136-
textConfirmBtn={textApplyBtn}
137-
textCancelBtn={textResetBtn}
126+
<ComboSelect
127+
label={title || ''}
138128
className={className}
139-
width={width}
129+
submitText={textApplyBtn}
130+
clearText={textResetBtn}
131+
hideDivider
132+
onSubmit={apply}
133+
onClear={reset}
134+
style={{ width }}
140135
>
141-
<Flex className="mb-3 w-72" justifyContent="center">
136+
<Flex className="mb-3 w-full" justifyContent="center" alignItems="center">
142137
<div className="grid">
143-
<Text className="mb-1 text-xxs" fontBold="medium">
144-
{textMin}
145-
</Text>
146138
<Input
147139
data-testid="minVal"
148140
name="minVal"
149141
type="number"
150142
placeholder={min?.toString()}
151143
className="h-7 w-32 pl-4 text-xs bg-white"
144+
style={{ height: 40 }}
152145
min={min}
153146
value={range.minVal || ''}
154147
onChange={handleChange}
155148
variant={inputMinVariant}
149+
endAdornment={
150+
inputMinVariant !== 'error' && (
151+
<Flex
152+
alignItems="center"
153+
className="h-10 pl-4 border-l border-solid border-gray-300 text-gray-500"
154+
>
155+
{labelInput}
156+
</Flex>
157+
)
158+
}
156159
/>
157160
</div>
158161
<hr
159-
className="w-2.5 ml-3.5 mr-3.5 mb-3.5 mt-auto border-gray-900"
162+
className="w-2.5 mx-3.5 border-gray-900"
160163
style={{ minWidth: 12, borderTopWidth: 1.2 }}
161164
/>
162165
<div className="grid">
163-
<Text className="mb-1 text-xxs" fontBold="medium">
164-
{textMax}
165-
</Text>
166166
<Input
167167
data-testid="maxVal"
168168
name="maxVal"
169169
type="number"
170170
placeholder={max?.toString()}
171171
className="h-7 w-32 text-xs bg-white"
172+
style={{ height: 40 }}
172173
max={max}
173174
value={range.maxVal || ''}
174175
onChange={handleChange}
175176
variant={inputMaxVariant}
177+
endAdornment={
178+
inputMaxVariant !== 'error' && (
179+
<Flex
180+
alignItems="center"
181+
className="h-10 pl-4 border-l border-solid border-gray-300 text-gray-500"
182+
>
183+
{labelInput}
184+
</Flex>
185+
)
186+
}
176187
/>
177188
</div>
178189
</Flex>
179-
</ConfirmDialog>
190+
</ComboSelect>
180191
)
181192
}
182193

‎src/components/Filters/FilterRangeSlider.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ describe('<FilterRangeSlider/>', () => {
2525
<FilterRangeSlider {...defaultProps} initMinValue={1} initMaxValue={30} />
2626
)
2727

28-
const applyBtn = getByRole('confirm-btn')
28+
const applyBtn = getByRole('combo-select-submit')
2929
fireEvent.click(applyBtn)
3030
expect(onApply).toHaveBeenCalled()
3131
expect(onApply).toHaveBeenCalledTimes(1)
3232

33-
const resetBtn = getByRole('cancel-btn')
33+
const resetBtn = getByRole('combo-select-clear')
3434
fireEvent.click(resetBtn)
3535
expect(onReset).toHaveBeenCalled()
3636
expect(onReset).toHaveBeenCalledTimes(1)

‎src/components/Filters/FilterRangeSlider.tsx‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44

55
import { useCallback, useState } from 'react'
66
import RangeSlider, { RangeValues } from '../RangeSlider/RangeSlider'
7-
import ConfirmDialog from '../ConfirmDialog/ConfirmDialog'
87
import Text from '../Typography/Text'
8+
import ComboSelect from 'components/Form/ComboSelect'
99

1010
export interface FilterRangeSliderProps {
1111
/**
@@ -48,6 +48,14 @@ export interface FilterRangeSliderProps {
4848
* Text displayed on the button to reset
4949
*/
5050
textResetBtn?: string
51+
/**
52+
* Text displayed in the range input
53+
*/
54+
fromText?: string
55+
/**
56+
* Text displayed in the range input
57+
*/
58+
toText?: string
5159
/**
5260
* The class name to apply to the ConfirmDialog
5361
*/
@@ -78,6 +86,8 @@ const FilterRangeSlider = ({
7886
unitName = 'Km',
7987
textApplyBtn = 'Apply',
8088
textResetBtn = 'Reset',
89+
fromText = 'From',
90+
toText = 'To',
8191
className,
8292
width,
8393
onApply,
@@ -98,19 +108,23 @@ const FilterRangeSlider = ({
98108
}
99109

100110
return (
101-
<ConfirmDialog
102-
title={title}
103-
onConfirm={apply}
104-
onCancel={reset}
105-
textConfirmBtn={textApplyBtn}
106-
textCancelBtn={textResetBtn}
111+
<ComboSelect
112+
label={title || ''}
113+
onSubmit={apply}
114+
onClear={reset}
115+
hideDivider
116+
submitText={textApplyBtn}
117+
clearText={textResetBtn}
107118
className={className}
108-
width={width}
119+
style={{ width }}
109120
>
110-
<div>
111-
<Text size="base" bold>
121+
<div className="w-full mt-2">
122+
<Text className="flex gap-1" style={{ fontSize: '10px' }}>
123+
<Text textMuted500>{fromText}</Text>
112124
{range.min}
113-
{unitName} - {range.max}
125+
{unitName}
126+
<Text textMuted500>{toText}</Text>
127+
{range.max}
114128
{unitName}
115129
</Text>
116130
<RangeSlider
@@ -126,7 +140,7 @@ const FilterRangeSlider = ({
126140
className="pt-2.5 pb-4"
127141
/>
128142
</div>
129-
</ConfirmDialog>
143+
</ComboSelect>
130144
)
131145
}
132146

0 commit comments

Comments
 (0)