w-design-system 0.0.52 → 0.0.53
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/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +5 -3
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Select/stories.d.ts.map +1 -1
- package/dist/components/Select/stories.js +2 -1
- package/dist/components/Select/stories.js.map +1 -1
- package/dist/components/Select/styles.d.ts +2 -0
- package/dist/components/Select/styles.d.ts.map +1 -1
- package/dist/components/Select/styles.js +17 -0
- package/dist/components/Select/styles.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Select/index.tsx +13 -4
- package/src/components/Select/stories.tsx +3 -1
- package/src/components/Select/styles.ts +18 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EAMV,MAAM,OAAO,CAAA;AAOd,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,CACzG,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,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;CAC3B;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CAC7B;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EAMV,MAAM,OAAO,CAAA;AAOd,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,CACzG,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,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;CAC3B;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CAC7B;AAkKD,eAAO,MAAM,MAAM,EAAwC,CAAC,CAAwD,SAA9C;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,EAClH,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KAC/E,KAAK,CAAC,YAAY,CAAA"}
|
|
@@ -14,7 +14,7 @@ import { chevronDownSVG } from '../../assets/icon';
|
|
|
14
14
|
import { IconWrapper } from '../IconWrapper';
|
|
15
15
|
import { Input } from '../Input';
|
|
16
16
|
import { theme } from '../Themes';
|
|
17
|
-
import { Dropdown, DropdownWrapper, OptionButton, OptionText, SelectWrapper } from './styles';
|
|
17
|
+
import { Badge, Dropdown, DropdownWrapper, OptionButton, OptionText, OptionTextBadge, SelectWrapper } from './styles';
|
|
18
18
|
const SelectFowardRef = (_a, ref) => {
|
|
19
19
|
var _b;
|
|
20
20
|
var { children, label, leftIcon, onOptionChange, options, placeholder, rightIcon, selectedOption, value, dropDownWidth, disabled, disableSearch } = _a, props = __rest(_a, ["children", "label", "leftIcon", "onOptionChange", "options", "placeholder", "rightIcon", "selectedOption", "value", "dropDownWidth", "disabled", "disableSearch"]);
|
|
@@ -102,9 +102,11 @@ const SelectFowardRef = (_a, ref) => {
|
|
|
102
102
|
React.createElement(IconWrapper, { className: `icon ${open ? 'icon-rotate' : ''}`, src: chevronDownSVG, width: "16px", color: theme.colors.shade30 })), placeholder: placeholder, label: label, value: computedValue, readonly: !open, onChange: onInputChange, onClick: () => !disabled && setOpen(!open) }),
|
|
103
103
|
open && (React.createElement(DropdownWrapper, null,
|
|
104
104
|
React.createElement(Dropdown, { dropDownTop: props.dropDownTop, dropDownWidth: dropDownWidth, dropDownMaxHeight: props.dropDownMaxHeight },
|
|
105
|
-
((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0 && (React.createElement("div", null, filteredOptions.map(option => (React.createElement(OptionButton, { selected: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id, key: option.id, onClick: () => onOptionClick(option) },
|
|
105
|
+
((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0 && (React.createElement("div", null, filteredOptions.map(option => (React.createElement(OptionButton, { selected: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id, key: option.id, onClick: () => onOptionClick(option) }, (option === null || option === void 0 ? void 0 : option.badge) ? (React.createElement(OptionTextBadge, null,
|
|
106
|
+
React.createElement("div", null, option.text),
|
|
107
|
+
React.createElement(Badge, null, option.badge))) : (React.createElement(React.Fragment, null,
|
|
106
108
|
option.icon,
|
|
107
|
-
React.createElement(OptionText, null, option.text)))))),
|
|
109
|
+
React.createElement(OptionText, null, option.text)))))))),
|
|
108
110
|
children)))));
|
|
109
111
|
};
|
|
110
112
|
export const Select = React.forwardRef(SelectFowardRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAIZ,SAAS,EACT,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAYC,CAAA;AAE/B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAYC,CAAA;AAE/B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAsBpC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA"}
|
|
@@ -28,9 +28,10 @@ export default meta;
|
|
|
28
28
|
const ComponentWrapper = (_a) => {
|
|
29
29
|
var { options } = _a, args = __rest(_a, ["options"]);
|
|
30
30
|
const [selectedOption, setSelectOption] = React.useState(null);
|
|
31
|
-
return (React.createElement(Select, Object.assign({ selectedOption: selectedOption, onOptionChange: option => setSelectOption(option), options: options !== null && options !== void 0 ? options :
|
|
31
|
+
return (React.createElement(Select, Object.assign({ selectedOption: selectedOption, onOptionChange: option => setSelectOption(option), options: options !== null && options !== void 0 ? options : new Array(20).fill(0).map((_, index) => ({
|
|
32
32
|
id: index,
|
|
33
33
|
text: `Opção ${index + 1}`,
|
|
34
|
+
badge: 13,
|
|
34
35
|
})) }, args)));
|
|
35
36
|
};
|
|
36
37
|
export const Default = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Select/stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,cAAc,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACrC,cAAc,EAAE,EAAE,MAAM,EAAE,sBAAsB,EAAE;QAClD,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACpC;CAC4B,CAAA;AAE/B,eAAe,IAAI,CAAA;AAGnB,MAAM,gBAAgB,GAAG,CAAC,EAAiC,EAAE,EAAE;QAArC,EAAE,OAAO,OAAwB,EAAnB,IAAI,cAAlB,WAAoB,CAAF;IAC1C,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgC,IAAI,CAAC,CAAA;IAE7F,OAAO,CACL,oBAAC,MAAM,kBACL,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,MAAM,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EACjD,OAAO,EACL,OAAO,aAAP,OAAO,cAAP,OAAO,
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Select/stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,cAAc,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACrC,cAAc,EAAE,EAAE,MAAM,EAAE,sBAAsB,EAAE;QAClD,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACpC;CAC4B,CAAA;AAE/B,eAAe,IAAI,CAAA;AAGnB,MAAM,gBAAgB,GAAG,CAAC,EAAiC,EAAE,EAAE;QAArC,EAAE,OAAO,OAAwB,EAAnB,IAAI,cAAlB,WAAoB,CAAF;IAC1C,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgC,IAAI,CAAC,CAAA;IAE7F,OAAO,CACL,oBAAC,MAAM,kBACL,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,MAAM,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EACjD,OAAO,EACL,OAAO,aAAP,OAAO,cAAP,OAAO,GACP,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;YACvC,EAAE,EAAE,KAAK;YACT,IAAI,EAAE,SAAS,KAAK,GAAG,CAAC,EAAE;YAC1B,KAAK,EAAE,EAAE;SACV,CAAC,CAAC,IAED,IAAI,EACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,oBAAC,gBAAgB,IAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,aAAa,GAAG;CAC3E,CAAA"}
|
|
@@ -11,4 +11,6 @@ export interface OptionButtonProps {
|
|
|
11
11
|
}
|
|
12
12
|
export declare const OptionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, OptionButtonProps>> & string;
|
|
13
13
|
export declare const OptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
14
|
+
export declare const OptionTextBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
15
|
+
export declare const Badge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
14
16
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,6NAUzB,CAAA;AACD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,eAAO,MAAM,QAAQ,kPAgBpB,CAAA;AAED,eAAO,MAAM,eAAe,6NAG3B,CAAA;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,YAAY,kQA2BxB,CAAA;AAED,eAAO,MAAM,UAAU,6NAEtB,CAAA"}
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,6NAUzB,CAAA;AACD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,eAAO,MAAM,QAAQ,kPAgBpB,CAAA;AAED,eAAO,MAAM,eAAe,6NAG3B,CAAA;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,YAAY,kQA2BxB,CAAA;AAED,eAAO,MAAM,UAAU,6NAEtB,CAAA;AACD,eAAO,MAAM,eAAe,6NAK3B,CAAA;AAED,eAAO,MAAM,KAAK,6NAUjB,CAAA"}
|
|
@@ -63,4 +63,21 @@ export const OptionButton = styled.button `
|
|
|
63
63
|
export const OptionText = styled.div `
|
|
64
64
|
flex-grow: 1;
|
|
65
65
|
`;
|
|
66
|
+
export const OptionTextBadge = styled.div `
|
|
67
|
+
flex-grow: 1;
|
|
68
|
+
display: flex;
|
|
69
|
+
width: 100%;
|
|
70
|
+
justify-content: space-between;
|
|
71
|
+
`;
|
|
72
|
+
export const Badge = styled.div `
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
gap: 0.5rem;
|
|
77
|
+
padding: 0.3rem;
|
|
78
|
+
border-radius: 40px;
|
|
79
|
+
background-color: ${theme.colors.honey30};
|
|
80
|
+
color: ${theme.colors.white};
|
|
81
|
+
font-size: 11px;
|
|
82
|
+
`;
|
|
66
83
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUtC,CAAA;AAOD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAe;;;aAGpC,KAAK,CAAC,MAAM,CAAC,EAAE;;sBAEN,KAAK,CAAC,MAAM,CAAC,KAAK;WAC7B,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;IACtE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC;;;;sBAIvD,KAAK,CAAC,MAAM,CAAC,OAAO;;;gBAG1B,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC;;CAE3F,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;aAE5B,KAAK,CAAC,MAAM,CAAC,EAAE;CAC3B,CAAA;AAMD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAmB;;;;;;WAMjD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;;eAOrE,KAAK,CAAC,SAAS,CAAC,MAAM;;;;;;;;+BAQN,KAAK,CAAC,MAAM,CAAC,OAAO;;;;aAItC,KAAK,CAAC,MAAM,CAAC,MAAM;;CAE/B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEnC,CAAA"}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUtC,CAAA;AAOD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAe;;;aAGpC,KAAK,CAAC,MAAM,CAAC,EAAE;;sBAEN,KAAK,CAAC,MAAM,CAAC,KAAK;WAC7B,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;IACtE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC;;;;sBAIvD,KAAK,CAAC,MAAM,CAAC,OAAO;;;gBAG1B,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC;;CAE3F,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;aAE5B,KAAK,CAAC,MAAM,CAAC,EAAE;CAC3B,CAAA;AAMD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAmB;;;;;;WAMjD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;;eAOrE,KAAK,CAAC,SAAS,CAAC,MAAM;;;;;;;;+BAQN,KAAK,CAAC,MAAM,CAAC,OAAO;;;;aAItC,KAAK,CAAC,MAAM,CAAC,MAAM;;CAE/B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEnC,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKxC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;sBAOT,KAAK,CAAC,MAAM,CAAC,OAAO;WAC/B,KAAK,CAAC,MAAM,CAAC,KAAK;;CAE5B,CAAA"}
|
package/package.json
CHANGED
|
@@ -12,7 +12,7 @@ import { chevronDownSVG } from '../../assets/icon'
|
|
|
12
12
|
import { IconWrapper } from '../IconWrapper'
|
|
13
13
|
import { Input } from '../Input'
|
|
14
14
|
import { theme } from '../Themes'
|
|
15
|
-
import { Dropdown, DropdownWrapper, OptionButton, OptionText, SelectWrapper } from './styles'
|
|
15
|
+
import { Badge, Dropdown, DropdownWrapper, OptionButton, OptionText, OptionTextBadge, SelectWrapper } from './styles'
|
|
16
16
|
|
|
17
17
|
export interface SelectProps<
|
|
18
18
|
T extends { text: string; id: number; icon?: ReactNode } = { text: string; id: number; icon?: ReactNode },
|
|
@@ -36,7 +36,7 @@ export interface SelectRef {
|
|
|
36
36
|
setOpen(open: boolean): void
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode }>(
|
|
39
|
+
const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode; badge?: ReactNode }>(
|
|
40
40
|
{
|
|
41
41
|
children,
|
|
42
42
|
label,
|
|
@@ -173,8 +173,17 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode
|
|
|
173
173
|
key={option.id}
|
|
174
174
|
onClick={() => onOptionClick(option)}
|
|
175
175
|
>
|
|
176
|
-
{option
|
|
177
|
-
|
|
176
|
+
{option?.badge ? (
|
|
177
|
+
<OptionTextBadge>
|
|
178
|
+
<div>{option.text}</div>
|
|
179
|
+
<Badge>{option.badge}</Badge>
|
|
180
|
+
</OptionTextBadge>
|
|
181
|
+
) : (
|
|
182
|
+
<>
|
|
183
|
+
{option.icon}
|
|
184
|
+
<OptionText>{option.text}</OptionText>
|
|
185
|
+
</>
|
|
186
|
+
)}
|
|
178
187
|
</OptionButton>
|
|
179
188
|
))}
|
|
180
189
|
</div>
|
|
@@ -27,9 +27,11 @@ const ComponentWrapper = ({ options, ...args }: SelectProps) => {
|
|
|
27
27
|
selectedOption={selectedOption}
|
|
28
28
|
onOptionChange={option => setSelectOption(option)}
|
|
29
29
|
options={
|
|
30
|
-
options ??
|
|
30
|
+
options ??
|
|
31
|
+
new Array(20).fill(0).map((_, index) => ({
|
|
31
32
|
id: index,
|
|
32
33
|
text: `Opção ${index + 1}`,
|
|
34
|
+
badge: 13,
|
|
33
35
|
}))
|
|
34
36
|
}
|
|
35
37
|
{...args}
|
|
@@ -77,3 +77,21 @@ export const OptionButton = styled.button<OptionButtonProps>`
|
|
|
77
77
|
export const OptionText = styled.div`
|
|
78
78
|
flex-grow: 1;
|
|
79
79
|
`
|
|
80
|
+
export const OptionTextBadge = styled.div`
|
|
81
|
+
flex-grow: 1;
|
|
82
|
+
display: flex;
|
|
83
|
+
width: 100%;
|
|
84
|
+
justify-content: space-between;
|
|
85
|
+
`
|
|
86
|
+
|
|
87
|
+
export const Badge = styled.div`
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
gap: 0.5rem;
|
|
92
|
+
padding: 0.3rem;
|
|
93
|
+
border-radius: 40px;
|
|
94
|
+
background-color: ${theme.colors.honey30};
|
|
95
|
+
color: ${theme.colors.white};
|
|
96
|
+
font-size: 11px;
|
|
97
|
+
`
|