w-design-system 0.0.79 → 0.0.81
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.
- package/dist/components/CountryStateSelector/index.d.ts +3 -0
- package/dist/components/CountryStateSelector/index.d.ts.map +1 -1
- package/dist/components/CountryStateSelector/index.js +62 -43
- package/dist/components/CountryStateSelector/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CountryStateSelector/index.tsx +52 -17
|
@@ -11,7 +11,10 @@ export interface CountryStateSelectProps extends HTMLAttributes<HTMLDivElement>
|
|
|
11
11
|
label?: string;
|
|
12
12
|
leftIcon?: ReactNode;
|
|
13
13
|
onOptionChange?: (option: CountryState | null) => void;
|
|
14
|
+
/** selected option */
|
|
14
15
|
selectedOption?: CountryState | null;
|
|
16
|
+
/** You can use this option to set the selected state through the abbreviation, in this case you should not use selectedOption */
|
|
17
|
+
selectedOptionAbbreviation?: string | null;
|
|
15
18
|
placeholder?: string;
|
|
16
19
|
rightIcon?: ReactNode;
|
|
17
20
|
value?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CountryStateSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AACzF,OAAO,EAAuB,SAAS,EAAE,MAAM,WAAW,CAAA;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAA;IACtD,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;CACvB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CountryStateSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AACzF,OAAO,EAAuB,SAAS,EAAE,MAAM,WAAW,CAAA;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAA;IACtD,sBAAsB;IACtB,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC,iIAAiI;IACjI,0BAA0B,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;CACvB;AAsHD,eAAO,MAAM,kBAAkB,EAA8C,CAC3E,KAAK,EAAE,iBAAiB,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KACxF,KAAK,CAAC,YAAY,CAAA"}
|
|
@@ -14,45 +14,70 @@ import { Select } from '../Select';
|
|
|
14
14
|
import React from 'react';
|
|
15
15
|
const CountryStateSelectFowardRef = (_a, ref) => {
|
|
16
16
|
var _b;
|
|
17
|
-
var { children, allStatesOption, validStates } = _a, props = __rest(_a, ["children", "allStatesOption", "validStates"]);
|
|
17
|
+
var { children, allStatesOption, selectedOption, selectedOptionAbbreviation, validStates } = _a, props = __rest(_a, ["children", "allStatesOption", "selectedOption", "selectedOptionAbbreviation", "validStates"]);
|
|
18
18
|
const allStatesOptionValue = allStatesOption !== false;
|
|
19
|
+
const allCountryStates = useMemo(() => [
|
|
20
|
+
{ id: 1, name: 'Acre', abbreviation: 'AC' },
|
|
21
|
+
{ id: 2, name: 'Alagoas', abbreviation: 'AL' },
|
|
22
|
+
{ id: 3, name: 'Amapá', abbreviation: 'AP' },
|
|
23
|
+
{ id: 4, name: 'Amazonas', abbreviation: 'AM' },
|
|
24
|
+
{ id: 5, name: 'Bahia', abbreviation: 'BA' },
|
|
25
|
+
{ id: 6, name: 'Ceará', abbreviation: 'CE' },
|
|
26
|
+
{ id: 7, name: 'Espírito Santo', abbreviation: 'ES' },
|
|
27
|
+
{ id: 8, name: 'Goiás', abbreviation: 'GO' },
|
|
28
|
+
{ id: 9, name: 'Maranhão', abbreviation: 'MA' },
|
|
29
|
+
{ id: 10, name: 'Mato Grosso', abbreviation: 'MT' },
|
|
30
|
+
{ id: 11, name: 'Mato Grosso do Sul', abbreviation: 'MS' },
|
|
31
|
+
{ id: 12, name: 'Minas Gerais', abbreviation: 'MG' },
|
|
32
|
+
{ id: 13, name: 'Pará', abbreviation: 'PA' },
|
|
33
|
+
{ id: 14, name: 'Paraíba', abbreviation: 'PB' },
|
|
34
|
+
{ id: 15, name: 'Paraná', abbreviation: 'PR' },
|
|
35
|
+
{ id: 16, name: 'Pernambuco', abbreviation: 'PE' },
|
|
36
|
+
{ id: 17, name: 'Piauí', abbreviation: 'PI' },
|
|
37
|
+
{ id: 18, name: 'Rio de Janeiro', abbreviation: 'RJ' },
|
|
38
|
+
{ id: 19, name: 'Rio Grande do Norte', abbreviation: 'RN' },
|
|
39
|
+
{ id: 20, name: 'Rio Grande do Sul', abbreviation: 'RS' },
|
|
40
|
+
{ id: 21, name: 'Rondônia', abbreviation: 'RO' },
|
|
41
|
+
{ id: 22, name: 'Roraima', abbreviation: 'RR' },
|
|
42
|
+
{ id: 23, name: 'Santa Catarina', abbreviation: 'SC' },
|
|
43
|
+
{ id: 24, name: 'São Paulo', abbreviation: 'SP' },
|
|
44
|
+
{ id: 25, name: 'Sergipe', abbreviation: 'SE' },
|
|
45
|
+
{ id: 26, name: 'Tocantins', abbreviation: 'TO' },
|
|
46
|
+
{ id: 27, name: 'Distrito Federal', abbreviation: 'DF' },
|
|
47
|
+
], []);
|
|
19
48
|
const countryStates = useMemo(() => {
|
|
20
|
-
const base = [
|
|
21
|
-
{ id: 1, name: 'Acre', abbreviation: 'AC' },
|
|
22
|
-
{ id: 2, name: 'Alagoas', abbreviation: 'AL' },
|
|
23
|
-
{ id: 3, name: 'Amapá', abbreviation: 'AP' },
|
|
24
|
-
{ id: 4, name: 'Amazonas', abbreviation: 'AM' },
|
|
25
|
-
{ id: 5, name: 'Bahia', abbreviation: 'BA' },
|
|
26
|
-
{ id: 6, name: 'Ceará', abbreviation: 'CE' },
|
|
27
|
-
{ id: 7, name: 'Espírito Santo', abbreviation: 'ES' },
|
|
28
|
-
{ id: 8, name: 'Goiás', abbreviation: 'GO' },
|
|
29
|
-
{ id: 9, name: 'Maranhão', abbreviation: 'MA' },
|
|
30
|
-
{ id: 10, name: 'Mato Grosso', abbreviation: 'MT' },
|
|
31
|
-
{ id: 11, name: 'Mato Grosso do Sul', abbreviation: 'MS' },
|
|
32
|
-
{ id: 12, name: 'Minas Gerais', abbreviation: 'MG' },
|
|
33
|
-
{ id: 13, name: 'Pará', abbreviation: 'PA' },
|
|
34
|
-
{ id: 14, name: 'Paraíba', abbreviation: 'PB' },
|
|
35
|
-
{ id: 15, name: 'Paraná', abbreviation: 'PR' },
|
|
36
|
-
{ id: 16, name: 'Pernambuco', abbreviation: 'PE' },
|
|
37
|
-
{ id: 17, name: 'Piauí', abbreviation: 'PI' },
|
|
38
|
-
{ id: 18, name: 'Rio de Janeiro', abbreviation: 'RJ' },
|
|
39
|
-
{ id: 19, name: 'Rio Grande do Norte', abbreviation: 'RN' },
|
|
40
|
-
{ id: 20, name: 'Rio Grande do Sul', abbreviation: 'RS' },
|
|
41
|
-
{ id: 21, name: 'Rondônia', abbreviation: 'RO' },
|
|
42
|
-
{ id: 22, name: 'Roraima', abbreviation: 'RR' },
|
|
43
|
-
{ id: 23, name: 'Santa Catarina', abbreviation: 'SC' },
|
|
44
|
-
{ id: 24, name: 'São Paulo', abbreviation: 'SP' },
|
|
45
|
-
{ id: 25, name: 'Sergipe', abbreviation: 'SE' },
|
|
46
|
-
{ id: 26, name: 'Tocantins', abbreviation: 'TO' },
|
|
47
|
-
{ id: 27, name: 'Distrito Federal', abbreviation: 'DF' },
|
|
48
|
-
];
|
|
49
49
|
if (!validStates)
|
|
50
|
-
return
|
|
51
|
-
return
|
|
52
|
-
}, [validStates]);
|
|
53
|
-
const countrysStateOptions =
|
|
54
|
-
|
|
55
|
-
|
|
50
|
+
return allCountryStates;
|
|
51
|
+
return allCountryStates.filter(state => validStates.includes(state.abbreviation));
|
|
52
|
+
}, [validStates, allCountryStates]);
|
|
53
|
+
const countrysStateOptions = useMemo(() => {
|
|
54
|
+
return allStatesOptionValue
|
|
55
|
+
? [{ id: 0, name: 'Todos os estados', abbreviation: 'BR' }, ...countryStates]
|
|
56
|
+
: countryStates;
|
|
57
|
+
}, [allStatesOptionValue, countryStates]);
|
|
58
|
+
const selectedOptionAbbreviationMap = useMemo(() => {
|
|
59
|
+
return new Map(countrysStateOptions.map((option) => [option.abbreviation, option]));
|
|
60
|
+
}, [countrysStateOptions]);
|
|
61
|
+
const selectedOptionValue = useMemo(() => {
|
|
62
|
+
if (selectedOption) {
|
|
63
|
+
return {
|
|
64
|
+
id: selectedOption.id,
|
|
65
|
+
text: selectedOption.name,
|
|
66
|
+
countryState: selectedOption,
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
if (selectedOptionAbbreviation) {
|
|
70
|
+
const selectedOptionMap = selectedOptionAbbreviationMap.get(selectedOptionAbbreviation);
|
|
71
|
+
if (selectedOptionMap) {
|
|
72
|
+
return {
|
|
73
|
+
id: selectedOptionMap.id,
|
|
74
|
+
text: selectedOptionMap.name,
|
|
75
|
+
countryState: selectedOptionMap,
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
return null;
|
|
80
|
+
}, [selectedOption, selectedOptionAbbreviation, selectedOptionAbbreviationMap]);
|
|
56
81
|
const selectProps = Object.assign(Object.assign({}, props), { placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : 'Estado', options: countrysStateOptions.map(countryState => {
|
|
57
82
|
return {
|
|
58
83
|
id: countryState.id,
|
|
@@ -74,13 +99,7 @@ const CountryStateSelectFowardRef = (_a, ref) => {
|
|
|
74
99
|
props.onOptionChange((_a = option === null || option === void 0 ? void 0 : option.countryState) !== null && _a !== void 0 ? _a : null);
|
|
75
100
|
}
|
|
76
101
|
}
|
|
77
|
-
}, selectedOption:
|
|
78
|
-
? {
|
|
79
|
-
id: props.selectedOption.id,
|
|
80
|
-
text: props.selectedOption.name,
|
|
81
|
-
countryState: props.selectedOption,
|
|
82
|
-
}
|
|
83
|
-
: null });
|
|
102
|
+
}, selectedOption: selectedOptionValue });
|
|
84
103
|
return (React.createElement(Select, Object.assign({}, selectProps, { ref: ref }), children));
|
|
85
104
|
};
|
|
86
105
|
export const CountryStateSelect = forwardRef(CountryStateSelectFowardRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CountryStateSelector/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAgD,UAAU,EAAE,MAAM,OAAO,CAAA;AACzF,OAAO,EAAE,MAAM,EAA0B,MAAM,WAAW,CAAA;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CountryStateSelector/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -13,7 +13,10 @@ export interface CountryStateSelectProps extends HTMLAttributes<HTMLDivElement>
|
|
|
13
13
|
label?: string
|
|
14
14
|
leftIcon?: ReactNode
|
|
15
15
|
onOptionChange?: (option: CountryState | null) => void
|
|
16
|
+
/** selected option */
|
|
16
17
|
selectedOption?: CountryState | null
|
|
18
|
+
/** You can use this option to set the selected state through the abbreviation, in this case you should not use selectedOption */
|
|
19
|
+
selectedOptionAbbreviation?: string | null
|
|
17
20
|
placeholder?: string
|
|
18
21
|
rightIcon?: ReactNode
|
|
19
22
|
value?: string
|
|
@@ -27,13 +30,20 @@ export interface CountryStateSelectProps extends HTMLAttributes<HTMLDivElement>
|
|
|
27
30
|
}
|
|
28
31
|
|
|
29
32
|
const CountryStateSelectFowardRef = (
|
|
30
|
-
{
|
|
33
|
+
{
|
|
34
|
+
children,
|
|
35
|
+
allStatesOption,
|
|
36
|
+
selectedOption,
|
|
37
|
+
selectedOptionAbbreviation,
|
|
38
|
+
validStates,
|
|
39
|
+
...props
|
|
40
|
+
}: PropsWithChildren<CountryStateSelectProps>,
|
|
31
41
|
ref: React.ForwardedRef<SelectRef>,
|
|
32
42
|
) => {
|
|
33
43
|
const allStatesOptionValue = allStatesOption !== false
|
|
34
44
|
|
|
35
|
-
const
|
|
36
|
-
|
|
45
|
+
const allCountryStates = useMemo(
|
|
46
|
+
() => [
|
|
37
47
|
{ id: 1, name: 'Acre', abbreviation: 'AC' },
|
|
38
48
|
{ id: 2, name: 'Alagoas', abbreviation: 'AL' },
|
|
39
49
|
{ id: 3, name: 'Amapá', abbreviation: 'AP' },
|
|
@@ -61,14 +71,45 @@ const CountryStateSelectFowardRef = (
|
|
|
61
71
|
{ id: 25, name: 'Sergipe', abbreviation: 'SE' },
|
|
62
72
|
{ id: 26, name: 'Tocantins', abbreviation: 'TO' },
|
|
63
73
|
{ id: 27, name: 'Distrito Federal', abbreviation: 'DF' },
|
|
64
|
-
]
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
74
|
+
],
|
|
75
|
+
[],
|
|
76
|
+
)
|
|
77
|
+
|
|
78
|
+
const countryStates = useMemo(() => {
|
|
79
|
+
if (!validStates) return allCountryStates
|
|
80
|
+
return allCountryStates.filter(state => validStates.includes(state.abbreviation))
|
|
81
|
+
}, [validStates, allCountryStates])
|
|
82
|
+
|
|
83
|
+
const countrysStateOptions = useMemo(() => {
|
|
84
|
+
return allStatesOptionValue
|
|
85
|
+
? [{ id: 0, name: 'Todos os estados', abbreviation: 'BR' }, ...countryStates]
|
|
86
|
+
: countryStates
|
|
87
|
+
}, [allStatesOptionValue, countryStates])
|
|
68
88
|
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
|
|
89
|
+
const selectedOptionAbbreviationMap = useMemo(() => {
|
|
90
|
+
return new Map(countrysStateOptions.map((option: CountryState) => [option.abbreviation, option]))
|
|
91
|
+
}, [countrysStateOptions])
|
|
92
|
+
|
|
93
|
+
const selectedOptionValue = useMemo(() => {
|
|
94
|
+
if (selectedOption) {
|
|
95
|
+
return {
|
|
96
|
+
id: selectedOption.id,
|
|
97
|
+
text: selectedOption.name,
|
|
98
|
+
countryState: selectedOption,
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
if (selectedOptionAbbreviation) {
|
|
102
|
+
const selectedOptionMap = selectedOptionAbbreviationMap.get(selectedOptionAbbreviation)
|
|
103
|
+
if (selectedOptionMap) {
|
|
104
|
+
return {
|
|
105
|
+
id: selectedOptionMap.id,
|
|
106
|
+
text: selectedOptionMap.name,
|
|
107
|
+
countryState: selectedOptionMap,
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
return null
|
|
112
|
+
}, [selectedOption, selectedOptionAbbreviation, selectedOptionAbbreviationMap])
|
|
72
113
|
|
|
73
114
|
const selectProps: SelectProps<{ text: string; id: number; countryState: CountryState }> = {
|
|
74
115
|
...props,
|
|
@@ -94,13 +135,7 @@ const CountryStateSelectFowardRef = (
|
|
|
94
135
|
}
|
|
95
136
|
}
|
|
96
137
|
},
|
|
97
|
-
selectedOption:
|
|
98
|
-
? {
|
|
99
|
-
id: props.selectedOption.id,
|
|
100
|
-
text: props.selectedOption.name,
|
|
101
|
-
countryState: props.selectedOption,
|
|
102
|
-
}
|
|
103
|
-
: null,
|
|
138
|
+
selectedOption: selectedOptionValue,
|
|
104
139
|
}
|
|
105
140
|
|
|
106
141
|
return (
|