w-design-system 0.0.51 → 0.0.52
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/DateRangePicker/index.d.ts.map +1 -1
- package/dist/components/DateRangePicker/index.js +2 -2
- package/dist/components/DateRangePicker/index.js.map +1 -1
- package/dist/components/DateRangePicker/styles.d.ts +1 -0
- package/dist/components/DateRangePicker/styles.d.ts.map +1 -1
- package/dist/components/DateRangePicker/styles.js +2 -2
- package/dist/components/DateRangePicker/styles.js.map +1 -1
- package/dist/components/MultiSelect/index.d.ts +35 -0
- package/dist/components/MultiSelect/index.d.ts.map +1 -0
- package/dist/components/MultiSelect/index.js +125 -0
- package/dist/components/MultiSelect/index.js.map +1 -0
- package/dist/components/MultiSelect/stories.d.ts +7 -0
- package/dist/components/MultiSelect/stories.d.ts.map +1 -0
- package/dist/components/MultiSelect/stories.js +39 -0
- package/dist/components/MultiSelect/stories.js.map +1 -0
- package/dist/components/MultiSelect/styles.d.ts +14 -0
- package/dist/components/MultiSelect/styles.d.ts.map +1 -0
- package/dist/components/MultiSelect/styles.js +66 -0
- package/dist/components/MultiSelect/styles.js.map +1 -0
- package/package.json +1 -1
- package/src/components/MultiSelect/index.tsx +206 -0
- package/src/components/MultiSelect/stories.tsx +42 -0
- package/src/components/MultiSelect/styles.ts +79 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAwC,MAAM,OAAO,CAAA;AAGnF,OAAO,EAAU,WAAW,EAAa,MAAM,WAAW,CAAA;AAY1D,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAE1D,MAAM,WAAW,oBAAoB,CACnC,CAAC,SAAS,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,GAAG,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CACzF,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,eAAe,EAAE,IAAI,GAAG,IAAI,CAAA;IAC5B,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;IAC1B,qBAAqB,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IACrE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAoCD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,mLAa7E,oBAAoB,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAwC,MAAM,OAAO,CAAA;AAGnF,OAAO,EAAU,WAAW,EAAa,MAAM,WAAW,CAAA;AAY1D,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAE1D,MAAM,WAAW,oBAAoB,CACnC,CAAC,SAAS,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,GAAG,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CACzF,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,eAAe,EAAE,IAAI,GAAG,IAAI,CAAA;IAC5B,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;IAC1B,qBAAqB,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IACrE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAoCD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,mLAa7E,oBAAoB,CAAC,CAAC,CAAC,sBAsLzB,CAAA"}
|
|
@@ -112,7 +112,7 @@ export const DateRangePicker = (_a) => {
|
|
|
112
112
|
let isBlocked = false;
|
|
113
113
|
if (rangeDayLimit !== undefined && startCustomDate && endCustomDate === null) {
|
|
114
114
|
const diff = differenceInDays(startCustomDate, day);
|
|
115
|
-
isBlocked = diff > rangeDayLimit;
|
|
115
|
+
isBlocked = diff > rangeDayLimit - 1;
|
|
116
116
|
}
|
|
117
117
|
days.push({
|
|
118
118
|
type: 'day',
|
|
@@ -166,7 +166,7 @@ export const DateRangePicker = (_a) => {
|
|
|
166
166
|
return React.createElement("div", { key: day.key });
|
|
167
167
|
}
|
|
168
168
|
return (React.createElement(CalendarDay, { isFirstSelected: day.isFirstSelected, isLastSelected: day.isLastSelected, isBlocked: day.isBlocked, key: day.value, today: day.today, onClick: () => !day.isBlocked && onDayClick(day.date), onMouseEnter: () => !day.isBlocked && onMouseEnter(day.date), onMouseLeave: () => !day.isBlocked && onMouseLeave(day.date) },
|
|
169
|
-
React.createElement(CalendarDaySelectedBackground, { isFirstSelected: day.isFirstSelected, isLastSelected: day.isLastSelected, selected: day.selected, today: day.today }),
|
|
169
|
+
React.createElement(CalendarDaySelectedBackground, { isFirstSelected: day.isFirstSelected, isLastSelected: day.isLastSelected, selected: day.selected, today: day.today, isBlocked: day.isBlocked }),
|
|
170
170
|
React.createElement(CalendarDayValue, null, day.value)));
|
|
171
171
|
})),
|
|
172
172
|
footerMessage && React.createElement(Footer, null, footerMessage)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAkB,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnF,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAA0B,MAAM,WAAW,CAAA;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EACL,WAAW,EACX,6BAA6B,EAC7B,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,MAAM,GACP,MAAM,UAAU,CAAA;AAsCjB,MAAM,UAAU,GAAG;IACjB,SAAS;IACT,WAAW;IACX,OAAO;IACP,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;IACP,QAAQ;IACR,UAAU;IACV,SAAS;IACT,UAAU;IACV,UAAU;CACX,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;AAGlE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAmD,EAaxD,EAAE,EAAE;;QAboD,EAChF,KAAK,EACL,OAAO,EACP,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,qBAAqB,EACrB,eAAe,EACf,aAAa,EACb,OAAO,EACP,aAAa,EACb,aAAa,OAEW,EADrB,KAAK,cAZwE,yLAajF,CADS;IAER,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACnD,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAc,IAAI,CAAC,CAAA;IACrF,MAAM,SAAS,GAAG,MAAM,CAAY,IAAI,CAAC,CAAA;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAA;QACvB,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAA;QAClC,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;IAClC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,IAAI,GAAc,EAAE,CAAA;IAE1B,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QACpC,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,CAAA;QAC3D,cAAc,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAA;QACrC,eAAe,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAA;IACrC,CAAC,CAAA;IAED,MAAM,6BAA6B,GAAG,CAAC,MAAgB,EAAE,EAAE;;QACzD,IAAI,sBAAsB,EAAE,CAAC;YAC3B,sBAAsB,CAAC,MAAM,CAAC,CAAA;YAC9B,IAAI,qBAAqB;gBAAE,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;YAC5D,MAAA,SAAS,CAAC,OAAO,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,CAAC,KAAW,EAAE,KAAW,EAAE,EAAE;QACpD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC,CAAA;QAC5D,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAA;IACpD,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,EAAE;;QAChC,IAAI,sBAAsB;YAAE,sBAAsB,CAAC,IAAI,CAAC,CAAA;QACxD,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,qBAAqB,IAAI,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;YAC1D,qBAAqB,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAA;YACvD,IAAI,OAAO,KAAK,KAAK;gBAAE,MAAA,SAAS,CAAC,OAAO,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAA;QAC1D,CAAC;aAAM,IAAI,CAAC,aAAa,EAAE,CAAC;YAC1B,IAAI,SAAS,GAAG,eAAe,CAAA;YAC/B,IAAI,UAAU,GAAG,IAAI,CAAA;YACrB,IAAI,SAAS,IAAI,UAAU,IAAI,SAAS,GAAG,UAAU,EAAE,CAAC;gBACtD,MAAM,IAAI,GAAG,SAAS,CAAA;gBACtB,SAAS,GAAG,UAAU,CAAA;gBACtB,UAAU,GAAG,IAAI,CAAA;YACnB,CAAC;YACD,qBAAqB,IAAI,qBAAqB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAA;YACrE,MAAA,SAAS,CAAC,OAAO,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC;aAAM,CAAC;YACN,IAAI,OAAO,KAAK,KAAK;gBAAE,MAAA,SAAS,CAAC,OAAO,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAA;YACxD,qBAAqB,IAAI,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;YAC1D,wBAAwB,CAAC,IAAI,CAAC,CAAA;QAChC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,IAAU,EAAE,EAAE;QAClC,IAAI,eAAe,IAAI,CAAC,aAAa,EAAE,CAAC;YACtC,wBAAwB,CAAC,IAAI,CAAC,CAAA;QAChC,CAAC;IACH,CAAC,CAAA;IACD,MAAM,YAAY,GAAG,CAAC,IAAU,EAAE,EAAE,GAAE,CAAC,CAAA;IAEvC,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,WAAW,EAAE,YAAY,EAAE,CAAC,CAAC,CAAA;IAElD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,CAAC,EAAE,EAAE,CAAC,CAAA;IAClD,CAAC;IAED,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,YAAY,EAAE,CAAA;IAC7C,IAAI,SAAS,GAAG,eAAe,CAAA;IAC/B,IAAI,UAAU,GAAG,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,qBAAqB,CAAA;IACvD,IAAI,SAAS,IAAI,UAAU,IAAI,SAAS,GAAG,UAAU,EAAE,CAAC;QACtD,MAAM,IAAI,GAAG,SAAS,CAAA;QACtB,SAAS,GAAG,UAAU,CAAA;QACtB,UAAU,GAAG,IAAI,CAAA;IACnB,CAAC;IAED,OAAO,GAAG,CAAC,QAAQ,EAAE,KAAK,YAAY,EAAE,CAAC;QACvC,MAAM,UAAU,GAAG,MAAA,CAAC,SAAS,IAAI,UAAU,IAAI,GAAG,IAAI,SAAS,IAAI,GAAG,IAAI,UAAU,CAAC,mCAAI,KAAK,CAAA;QAC9F,IAAI,SAAS,GAAG,KAAK,CAAA;QACrB,IAAI,aAAa,KAAK,SAAS,IAAI,eAAe,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;YAC7E,MAAM,IAAI,GAAG,gBAAgB,CAAC,eAAe,EAAE,GAAG,CAAC,CAAA;YACnD,SAAS,GAAG,IAAI,GAAG,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,6 +13,7 @@ export interface CalendarDaySelectedBackgroundProps {
|
|
|
13
13
|
isFirstSelected: boolean;
|
|
14
14
|
isLastSelected: boolean;
|
|
15
15
|
selected: boolean;
|
|
16
|
+
isBlocked: boolean;
|
|
16
17
|
}
|
|
17
18
|
export declare const CalendarDaySelectedBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CalendarDaySelectedBackgroundProps>> & string;
|
|
18
19
|
export declare const CalendarDayValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,6NAYxB,CAAA;AAED,eAAO,MAAM,oBAAoB,6NAKhC,CAAA;AAED,eAAO,MAAM,cAAc,6NAyB1B,CAAA;AACD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAA;IACd,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,qPAkBvB,CAAA;AAED,MAAM,WAAW,kCAAkC;IACjD,KAAK,EAAE,OAAO,CAAA;IACd,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,6NAYxB,CAAA;AAED,eAAO,MAAM,oBAAoB,6NAKhC,CAAA;AAED,eAAO,MAAM,cAAc,6NAyB1B,CAAA;AACD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAA;IACd,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,qPAkBvB,CAAA;AAED,MAAM,WAAW,kCAAkC;IACjD,KAAK,EAAE,OAAO,CAAA;IACd,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;CACnB;AACD,eAAO,MAAM,6BAA6B,uQAiCzC,CAAA;AACD,eAAO,MAAM,gBAAgB,6NAO5B,CAAA;AAED,eAAO,MAAM,MAAM,6NAQlB,CAAA"}
|
|
@@ -91,13 +91,13 @@ export const CalendarDaySelectedBackground = styled.div `
|
|
|
91
91
|
return '0';
|
|
92
92
|
return '50%';
|
|
93
93
|
}};
|
|
94
|
-
background-color: ${theme.colors.cyan30opacity16};
|
|
94
|
+
background-color: ${({ isBlocked }) => (isBlocked ? 'transparant' : theme.colors.cyan30opacity16)};
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
&::before {
|
|
98
98
|
content: '';
|
|
99
99
|
border-radius: 50%;
|
|
100
|
-
background-color: ${({ isFirstSelected, isLastSelected }) => isFirstSelected || isLastSelected ? theme.colors.cyan40 : 'transparent'};
|
|
100
|
+
background-color: ${({ isFirstSelected, isLastSelected, isBlocked }) => (isFirstSelected || isLastSelected) && !isBlocked ? theme.colors.cyan40 : 'transparent'};
|
|
101
101
|
position: absolute;
|
|
102
102
|
inset: 0;
|
|
103
103
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/DateRangePicker/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;eAUvB,KAAK,CAAC,SAAS,CAAC,KAAK;WACzB,KAAK,CAAC,MAAM,CAAC,OAAO;CAC9B,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;eAC/B,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;WAC/B,KAAK,CAAC,MAAM,CAAC,OAAO;;;CAG9B,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;eAIzB,KAAK,CAAC,SAAS,CAAC,KAAK;;;;;;;YAOxB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;YAMpB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;YAMnB,KAAK,CAAC,MAAM,CAAC,OAAO;;CAE/B,CAAA;AAQD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAkB;;;;;WAK5C,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,EAAE,CAC1D,eAAe,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;MAS9G,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,EAAE,CAC/C,KAAK,IAAI,CAAC,CAAC,eAAe,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC,qBAAqB,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;;CAEpG,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/DateRangePicker/styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React, { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
|
|
2
|
+
export interface MultiSelectProps<T extends {
|
|
3
|
+
text: string;
|
|
4
|
+
id: number;
|
|
5
|
+
icon?: ReactNode;
|
|
6
|
+
} = {
|
|
7
|
+
text: string;
|
|
8
|
+
id: number;
|
|
9
|
+
icon?: ReactNode;
|
|
10
|
+
}> extends HTMLAttributes<HTMLDivElement> {
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
label?: string;
|
|
13
|
+
leftIcon?: ReactNode;
|
|
14
|
+
onOptionChange?: (option: T[]) => void;
|
|
15
|
+
options?: T[];
|
|
16
|
+
placeholder?: string;
|
|
17
|
+
rightIcon?: ReactNode;
|
|
18
|
+
selectedOption?: T[];
|
|
19
|
+
value?: string;
|
|
20
|
+
dropDownTop?: boolean;
|
|
21
|
+
dropDownWidth?: string;
|
|
22
|
+
disableSearch?: boolean;
|
|
23
|
+
dropDownMaxHeight?: string;
|
|
24
|
+
}
|
|
25
|
+
export interface SelectRef {
|
|
26
|
+
setOpen(open: boolean): void;
|
|
27
|
+
}
|
|
28
|
+
export declare const MultiSelect: <T extends {
|
|
29
|
+
text: string;
|
|
30
|
+
id: number;
|
|
31
|
+
icon?: ReactNode;
|
|
32
|
+
}>(props: PropsWithChildren<MultiSelectProps<T>> & {
|
|
33
|
+
ref?: React.ForwardedRef<SelectRef>;
|
|
34
|
+
}) => React.ReactElement;
|
|
35
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EAMV,MAAM,OAAO,CAAA;AAOd,MAAM,WAAW,gBAAgB,CAC/B,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,EAAE,KAAK,IAAI,CAAA;IACtC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,CAAC,EAAE,CAAA;IACpB,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;AAqKD,eAAO,MAAM,WAAW,EAA6C,CACnE,CAAwD,SAA9C;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,EAExD,KAAK,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KACpF,KAAK,CAAC,YAAY,CAAA"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
|
|
13
|
+
import { chevronDownSVG } from '../../assets/icon';
|
|
14
|
+
import { IconWrapper } from '../IconWrapper';
|
|
15
|
+
import { Input } from '../Input';
|
|
16
|
+
import { theme } from '../Themes';
|
|
17
|
+
import { Dropdown, DropdownWrapper, OptionButton, OptionText, MultiSelectWrapper } from './styles';
|
|
18
|
+
const MultiSelectFowardRef = (_a, ref) => {
|
|
19
|
+
var _b;
|
|
20
|
+
var { children, label, leftIcon, onOptionChange, options, placeholder, rightIcon, selectedOption: selectedOptions, value, dropDownWidth, disabled, disableSearch } = _a, props = __rest(_a, ["children", "label", "leftIcon", "onOptionChange", "options", "placeholder", "rightIcon", "selectedOption", "value", "dropDownWidth", "disabled", "disableSearch"]);
|
|
21
|
+
const [open, setOpen] = useState(false);
|
|
22
|
+
const [usingInput, setUsingInput] = useState(false);
|
|
23
|
+
const [computedValue, setComputedValue] = useState(value);
|
|
24
|
+
const wrapperRef = useRef(null);
|
|
25
|
+
useImperativeHandle(ref, () => ({
|
|
26
|
+
setOpen,
|
|
27
|
+
}));
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (!open)
|
|
30
|
+
return;
|
|
31
|
+
const handler = (event) => {
|
|
32
|
+
let element = event.target;
|
|
33
|
+
while (element && element !== document.body.parentElement) {
|
|
34
|
+
if (element === wrapperRef.current)
|
|
35
|
+
break;
|
|
36
|
+
element = element.parentElement;
|
|
37
|
+
}
|
|
38
|
+
if (element === document.body.parentElement) {
|
|
39
|
+
setOpen(false);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
document.addEventListener('click', handler);
|
|
43
|
+
return () => {
|
|
44
|
+
document.removeEventListener('click', handler);
|
|
45
|
+
};
|
|
46
|
+
}, [open]);
|
|
47
|
+
const onOptionClick = (option) => {
|
|
48
|
+
var _a;
|
|
49
|
+
const isActive = (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.findIndex(item => item.id === option.id)) !== -1;
|
|
50
|
+
if (isActive) {
|
|
51
|
+
onOptionChange && onOptionChange((_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.filter(item => item.id !== option.id)) !== null && _a !== void 0 ? _a : []);
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
onOptionChange && onOptionChange([...(selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : []), option]);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
if (usingInput)
|
|
59
|
+
return;
|
|
60
|
+
if (value) {
|
|
61
|
+
setComputedValue(value);
|
|
62
|
+
}
|
|
63
|
+
else if (selectedOptions) {
|
|
64
|
+
if ((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) === (options === null || options === void 0 ? void 0 : options.length)) {
|
|
65
|
+
setComputedValue('Todos');
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
setComputedValue(selectedOptions.map(option => option.text).sort().join(', '));
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
setComputedValue('');
|
|
73
|
+
}
|
|
74
|
+
}, [value, selectedOptions, disableSearch, open, usingInput, options]);
|
|
75
|
+
useEffect(() => {
|
|
76
|
+
if (!open)
|
|
77
|
+
setUsingInput(false);
|
|
78
|
+
}, [open]);
|
|
79
|
+
const onInputChange = (event) => {
|
|
80
|
+
if (disableSearch)
|
|
81
|
+
return;
|
|
82
|
+
setComputedValue(event.target.value);
|
|
83
|
+
setUsingInput(true);
|
|
84
|
+
};
|
|
85
|
+
const filteredOptions = useMemo(() => {
|
|
86
|
+
if (!options)
|
|
87
|
+
return [];
|
|
88
|
+
if (!usingInput || disableSearch)
|
|
89
|
+
return options;
|
|
90
|
+
const normalizedValue = (computedValue || '')
|
|
91
|
+
.trim()
|
|
92
|
+
.toLowerCase()
|
|
93
|
+
.normalize('NFD')
|
|
94
|
+
.replace(/[\u0300-\u036f]/g, '');
|
|
95
|
+
if (!normalizedValue)
|
|
96
|
+
return options;
|
|
97
|
+
const items = [];
|
|
98
|
+
for (const option of options) {
|
|
99
|
+
if (option.text
|
|
100
|
+
.toLowerCase()
|
|
101
|
+
.normalize('NFD')
|
|
102
|
+
.replace(/[\u0300-\u036f]/g, '')
|
|
103
|
+
.includes(normalizedValue)) {
|
|
104
|
+
items.push(option);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
return items;
|
|
108
|
+
}, [options, usingInput, disableSearch, computedValue]);
|
|
109
|
+
return (React.createElement(MultiSelectWrapper, Object.assign({}, props, { ref: wrapperRef }),
|
|
110
|
+
React.createElement(Input, { disabled: disabled, leftIcon: leftIcon, rightIcon: React.createElement(React.Fragment, null,
|
|
111
|
+
rightIcon,
|
|
112
|
+
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) }),
|
|
113
|
+
open && (React.createElement(DropdownWrapper, null,
|
|
114
|
+
React.createElement(Dropdown, { dropDownTop: props.dropDownTop, dropDownWidth: dropDownWidth, dropDownMaxHeight: props.dropDownMaxHeight },
|
|
115
|
+
((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0 && (React.createElement("div", null, filteredOptions.map(option => {
|
|
116
|
+
var _a, _b;
|
|
117
|
+
return (React.createElement(OptionButton, { selected: (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.some(selectedOption => option.id === selectedOption.id)) !== null && _a !== void 0 ? _a : false, key: option.id, onClick: () => onOptionClick(option) },
|
|
118
|
+
React.createElement("input", { type: "checkbox", checked: (_b = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.some(selectedOption => option.id === selectedOption.id)) !== null && _b !== void 0 ? _b : false, onChange: () => onOptionClick(option) }),
|
|
119
|
+
option.icon,
|
|
120
|
+
React.createElement(OptionText, null, option.text)));
|
|
121
|
+
}))),
|
|
122
|
+
children)))));
|
|
123
|
+
};
|
|
124
|
+
export const MultiSelect = React.forwardRef(MultiSelectFowardRef);
|
|
125
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { MultiSelect } from './index';
|
|
3
|
+
declare const meta: Meta<typeof MultiSelect>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof MultiSelect>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
//# sourceMappingURL=stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAoB,MAAM,SAAS,CAAA;AAGvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAYC,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAoBzC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { MultiSelect } from './index';
|
|
13
|
+
import React from 'react';
|
|
14
|
+
const meta = {
|
|
15
|
+
title: 'Components/MultiSelect',
|
|
16
|
+
component: MultiSelect,
|
|
17
|
+
tags: ['autodocs'],
|
|
18
|
+
argTypes: {
|
|
19
|
+
placeholder: { control: 'text' },
|
|
20
|
+
label: { control: 'text' },
|
|
21
|
+
disabled: { control: 'boolean' },
|
|
22
|
+
selectedOption: { control: 'number' },
|
|
23
|
+
onOptionChange: { action: 'selectedOptionChange' },
|
|
24
|
+
dropDownTop: { control: 'boolean' },
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
export default meta;
|
|
28
|
+
const ComponentWrapper = (_a) => {
|
|
29
|
+
var { options } = _a, args = __rest(_a, ["options"]);
|
|
30
|
+
const [selectedOption, setSelectOption] = React.useState([]);
|
|
31
|
+
return (React.createElement(MultiSelect, Object.assign({ selectedOption: selectedOption, onOptionChange: option => setSelectOption(option), options: options !== null && options !== void 0 ? options : (new Array(20)).fill(0).map((_, index) => ({
|
|
32
|
+
id: index,
|
|
33
|
+
text: `Opção ${index + 1}`,
|
|
34
|
+
})) }, args)));
|
|
35
|
+
};
|
|
36
|
+
export const Default = {
|
|
37
|
+
render: () => React.createElement(ComponentWrapper, { label: "Label", placeholder: "Placeholder" }),
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/MultiSelect/stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,WAAW,EAAoB,MAAM,SAAS,CAAA;AACvD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,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;CACiC,CAAA;AAEpC,eAAe,IAAI,CAAA;AAGnB,MAAM,gBAAgB,GAAG,CAAC,EAAsC,EAAE,EAAE;QAA1C,EAAE,OAAO,OAA6B,EAAxB,IAAI,cAAlB,WAAoB,CAAF;IAC1C,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqC,EAAE,CAAC,CAAA;IAEhG,OAAO,CACL,oBAAC,WAAW,kBACV,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,MAAM,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EACjD,OAAO,EACL,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;YACpD,EAAE,EAAE,KAAK;YACT,IAAI,EAAE,SAAS,KAAK,GAAG,CAAC,EAAE;SAC3B,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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export declare const MultiSelectWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
2
|
+
export interface DropdownProps {
|
|
3
|
+
dropDownTop?: boolean;
|
|
4
|
+
dropDownWidth?: string;
|
|
5
|
+
dropDownMaxHeight?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const Dropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DropdownProps>> & string;
|
|
8
|
+
export declare const DropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
9
|
+
export interface OptionButtonProps {
|
|
10
|
+
selected: boolean;
|
|
11
|
+
}
|
|
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
|
+
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
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,6NAU9B,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"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { theme } from '../Themes';
|
|
3
|
+
export const MultiSelectWrapper = styled.div `
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
position: relative;
|
|
7
|
+
.icon {
|
|
8
|
+
transition: transform 0.3s;
|
|
9
|
+
}
|
|
10
|
+
.icon-rotate {
|
|
11
|
+
transform: rotate(180deg) translateY(5px);
|
|
12
|
+
}
|
|
13
|
+
`;
|
|
14
|
+
export const Dropdown = styled.div `
|
|
15
|
+
position: absolute;
|
|
16
|
+
|
|
17
|
+
z-index: ${theme.zIndex.z9};
|
|
18
|
+
|
|
19
|
+
background-color: ${theme.colors.white};
|
|
20
|
+
width: ${({ dropDownWidth }) => (dropDownWidth ? dropDownWidth : '100%')};
|
|
21
|
+
${({ dropDownTop }) => (dropDownTop ? 'bottom: 58px;' : 'margin-top: 4px;')};
|
|
22
|
+
padding: 16px;
|
|
23
|
+
|
|
24
|
+
border-radius: 4px;
|
|
25
|
+
border: 1px solid ${theme.colors.shade20};
|
|
26
|
+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
|
|
27
|
+
height: auto;
|
|
28
|
+
max-height: ${({ dropDownMaxHeight }) => (dropDownMaxHeight ? dropDownMaxHeight : '300px')};
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
`;
|
|
31
|
+
export const DropdownWrapper = styled.div `
|
|
32
|
+
position: relative;
|
|
33
|
+
z-index: ${theme.zIndex.z9};
|
|
34
|
+
`;
|
|
35
|
+
export const OptionButton = styled.button `
|
|
36
|
+
display: flex;
|
|
37
|
+
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: space-between;
|
|
40
|
+
gap: 0.5rem;
|
|
41
|
+
color: ${({ selected }) => (selected ? theme.colors.cyan30 : theme.colors.shade40)};
|
|
42
|
+
background-color: transparent;
|
|
43
|
+
border: none;
|
|
44
|
+
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
|
|
47
|
+
font-family: 'Nunito Sans', sans-serif;
|
|
48
|
+
font-size: ${theme.paragraph.medium};
|
|
49
|
+
text-align: left;
|
|
50
|
+
|
|
51
|
+
height: 46px;
|
|
52
|
+
width: 100%;
|
|
53
|
+
padding: 0;
|
|
54
|
+
|
|
55
|
+
&:not(:last-child) {
|
|
56
|
+
border-bottom: 1px solid ${theme.colors.shade10};
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&:hover {
|
|
60
|
+
color: ${theme.colors.cyan30};
|
|
61
|
+
}
|
|
62
|
+
`;
|
|
63
|
+
export const OptionText = styled.div `
|
|
64
|
+
flex-grow: 1;
|
|
65
|
+
`;
|
|
66
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/MultiSelect/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAU3C,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"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
import React, {
|
|
2
|
+
HTMLAttributes,
|
|
3
|
+
PropsWithChildren,
|
|
4
|
+
ReactNode,
|
|
5
|
+
useEffect,
|
|
6
|
+
useImperativeHandle,
|
|
7
|
+
useMemo,
|
|
8
|
+
useRef,
|
|
9
|
+
useState,
|
|
10
|
+
} from 'react'
|
|
11
|
+
import { chevronDownSVG } from '../../assets/icon'
|
|
12
|
+
import { IconWrapper } from '../IconWrapper'
|
|
13
|
+
import { Input } from '../Input'
|
|
14
|
+
import { theme } from '../Themes'
|
|
15
|
+
import { Dropdown, DropdownWrapper, OptionButton, OptionText, MultiSelectWrapper } from './styles'
|
|
16
|
+
|
|
17
|
+
export interface MultiSelectProps<
|
|
18
|
+
T extends { text: string; id: number; icon?: ReactNode } = { text: string; id: number; icon?: ReactNode },
|
|
19
|
+
> extends HTMLAttributes<HTMLDivElement> {
|
|
20
|
+
disabled?: boolean
|
|
21
|
+
label?: string
|
|
22
|
+
leftIcon?: ReactNode
|
|
23
|
+
onOptionChange?: (option: T[]) => void
|
|
24
|
+
options?: T[]
|
|
25
|
+
placeholder?: string
|
|
26
|
+
rightIcon?: ReactNode
|
|
27
|
+
selectedOption?: T[]
|
|
28
|
+
value?: string
|
|
29
|
+
dropDownTop?: boolean
|
|
30
|
+
dropDownWidth?: string
|
|
31
|
+
disableSearch?: boolean
|
|
32
|
+
dropDownMaxHeight?: string
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export interface SelectRef {
|
|
36
|
+
setOpen(open: boolean): void
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const MultiSelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode }>(
|
|
40
|
+
{
|
|
41
|
+
children,
|
|
42
|
+
label,
|
|
43
|
+
leftIcon,
|
|
44
|
+
onOptionChange,
|
|
45
|
+
options,
|
|
46
|
+
placeholder,
|
|
47
|
+
rightIcon,
|
|
48
|
+
selectedOption: selectedOptions,
|
|
49
|
+
value,
|
|
50
|
+
dropDownWidth,
|
|
51
|
+
disabled,
|
|
52
|
+
disableSearch,
|
|
53
|
+
...props
|
|
54
|
+
}: PropsWithChildren<MultiSelectProps<T>>,
|
|
55
|
+
ref: React.ForwardedRef<SelectRef>,
|
|
56
|
+
) => {
|
|
57
|
+
const [open, setOpen] = useState(false)
|
|
58
|
+
const [usingInput, setUsingInput] = useState(false)
|
|
59
|
+
const [computedValue, setComputedValue] = useState(value)
|
|
60
|
+
const wrapperRef = useRef<HTMLDivElement>(null)
|
|
61
|
+
|
|
62
|
+
useImperativeHandle(ref, () => ({
|
|
63
|
+
setOpen,
|
|
64
|
+
}))
|
|
65
|
+
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
if (!open) return
|
|
68
|
+
const handler = (event: MouseEvent) => {
|
|
69
|
+
let element: HTMLElement | null = event.target as HTMLElement
|
|
70
|
+
while (element && element !== document.body.parentElement) {
|
|
71
|
+
if (element === wrapperRef.current) break
|
|
72
|
+
element = element.parentElement
|
|
73
|
+
}
|
|
74
|
+
if (element === document.body.parentElement) {
|
|
75
|
+
setOpen(false)
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
document.addEventListener('click', handler)
|
|
79
|
+
|
|
80
|
+
return () => {
|
|
81
|
+
document.removeEventListener('click', handler)
|
|
82
|
+
}
|
|
83
|
+
}, [open])
|
|
84
|
+
|
|
85
|
+
const onOptionClick = (option: T) => {
|
|
86
|
+
const isActive = selectedOptions?.findIndex(item => item.id === option.id) !== -1
|
|
87
|
+
if (isActive) {
|
|
88
|
+
onOptionChange && onOptionChange(selectedOptions?.filter(item => item.id !== option.id) ?? [])
|
|
89
|
+
} else {
|
|
90
|
+
onOptionChange && onOptionChange([...(selectedOptions ?? []), option])
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
useEffect(() => {
|
|
95
|
+
if (usingInput) return
|
|
96
|
+
if (value) {
|
|
97
|
+
setComputedValue(value)
|
|
98
|
+
} else if (selectedOptions) {
|
|
99
|
+
if (selectedOptions?.length === options?.length) {
|
|
100
|
+
setComputedValue('Todos')
|
|
101
|
+
} else {
|
|
102
|
+
setComputedValue(selectedOptions.map(option => option.text).sort().join(', '))
|
|
103
|
+
}
|
|
104
|
+
} else {
|
|
105
|
+
setComputedValue('')
|
|
106
|
+
}
|
|
107
|
+
}, [value, selectedOptions, disableSearch, open, usingInput, options])
|
|
108
|
+
|
|
109
|
+
useEffect(() => {
|
|
110
|
+
if (!open) setUsingInput(false)
|
|
111
|
+
}, [open])
|
|
112
|
+
|
|
113
|
+
const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
114
|
+
if (disableSearch) return
|
|
115
|
+
setComputedValue(event.target.value)
|
|
116
|
+
setUsingInput(true)
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
const filteredOptions: T[] = useMemo((): T[] => {
|
|
120
|
+
if (!options) return []
|
|
121
|
+
if (!usingInput || disableSearch) return options
|
|
122
|
+
|
|
123
|
+
const normalizedValue = (computedValue || '')
|
|
124
|
+
.trim()
|
|
125
|
+
.toLowerCase()
|
|
126
|
+
.normalize('NFD')
|
|
127
|
+
.replace(/[\u0300-\u036f]/g, '')
|
|
128
|
+
if (!normalizedValue) return options
|
|
129
|
+
|
|
130
|
+
const items: T[] = []
|
|
131
|
+
for (const option of options) {
|
|
132
|
+
if (
|
|
133
|
+
option.text
|
|
134
|
+
.toLowerCase()
|
|
135
|
+
.normalize('NFD')
|
|
136
|
+
.replace(/[\u0300-\u036f]/g, '')
|
|
137
|
+
.includes(normalizedValue)
|
|
138
|
+
) {
|
|
139
|
+
items.push(option)
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
return items
|
|
143
|
+
}, [options, usingInput, disableSearch, computedValue])
|
|
144
|
+
|
|
145
|
+
return (
|
|
146
|
+
<MultiSelectWrapper {...props} ref={wrapperRef}>
|
|
147
|
+
<Input
|
|
148
|
+
disabled={disabled}
|
|
149
|
+
leftIcon={leftIcon}
|
|
150
|
+
rightIcon={
|
|
151
|
+
<>
|
|
152
|
+
{rightIcon}
|
|
153
|
+
<IconWrapper
|
|
154
|
+
className={`icon ${open ? 'icon-rotate' : ''}`}
|
|
155
|
+
src={chevronDownSVG}
|
|
156
|
+
width="16px"
|
|
157
|
+
color={theme.colors.shade30}
|
|
158
|
+
/>
|
|
159
|
+
</>
|
|
160
|
+
}
|
|
161
|
+
placeholder={placeholder}
|
|
162
|
+
label={label}
|
|
163
|
+
value={computedValue}
|
|
164
|
+
readonly={!open}
|
|
165
|
+
onChange={onInputChange}
|
|
166
|
+
onClick={() => !disabled && setOpen(!open)}
|
|
167
|
+
/>
|
|
168
|
+
{open && (
|
|
169
|
+
<DropdownWrapper>
|
|
170
|
+
<Dropdown
|
|
171
|
+
dropDownTop={props.dropDownTop}
|
|
172
|
+
dropDownWidth={dropDownWidth}
|
|
173
|
+
dropDownMaxHeight={props.dropDownMaxHeight}
|
|
174
|
+
>
|
|
175
|
+
{(options?.length ?? 0) > 0 && (
|
|
176
|
+
<div>
|
|
177
|
+
{filteredOptions.map(option => (
|
|
178
|
+
<OptionButton
|
|
179
|
+
selected={selectedOptions?.some(selectedOption => option.id === selectedOption.id) ?? false}
|
|
180
|
+
key={option.id}
|
|
181
|
+
onClick={() => onOptionClick(option)}
|
|
182
|
+
>
|
|
183
|
+
<input
|
|
184
|
+
type="checkbox"
|
|
185
|
+
checked={selectedOptions?.some(selectedOption => option.id === selectedOption.id) ?? false}
|
|
186
|
+
onChange={() => onOptionClick(option)}
|
|
187
|
+
/>
|
|
188
|
+
{option.icon}
|
|
189
|
+
<OptionText>{option.text}</OptionText>
|
|
190
|
+
</OptionButton>
|
|
191
|
+
))}
|
|
192
|
+
</div>
|
|
193
|
+
)}
|
|
194
|
+
{children}
|
|
195
|
+
</Dropdown>
|
|
196
|
+
</DropdownWrapper>
|
|
197
|
+
)}
|
|
198
|
+
</MultiSelectWrapper>
|
|
199
|
+
)
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
export const MultiSelect = React.forwardRef(MultiSelectFowardRef) as <
|
|
203
|
+
T extends { text: string; id: number; icon?: ReactNode },
|
|
204
|
+
>(
|
|
205
|
+
props: PropsWithChildren<MultiSelectProps<T>> & { ref?: React.ForwardedRef<SelectRef> },
|
|
206
|
+
) => React.ReactElement
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react'
|
|
2
|
+
import { MultiSelect, MultiSelectProps } from './index'
|
|
3
|
+
import React from 'react'
|
|
4
|
+
|
|
5
|
+
const meta: Meta<typeof MultiSelect> = {
|
|
6
|
+
title: 'Components/MultiSelect',
|
|
7
|
+
component: MultiSelect,
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
argTypes: {
|
|
10
|
+
placeholder: { control: 'text' },
|
|
11
|
+
label: { control: 'text' },
|
|
12
|
+
disabled: { control: 'boolean' },
|
|
13
|
+
selectedOption: { control: 'number' },
|
|
14
|
+
onOptionChange: { action: 'selectedOptionChange' },
|
|
15
|
+
dropDownTop: { control: 'boolean' },
|
|
16
|
+
},
|
|
17
|
+
} satisfies Meta<typeof MultiSelect>
|
|
18
|
+
|
|
19
|
+
export default meta
|
|
20
|
+
type Story = StoryObj<typeof MultiSelect>
|
|
21
|
+
|
|
22
|
+
const ComponentWrapper = ({ options, ...args }: MultiSelectProps) => {
|
|
23
|
+
const [selectedOption, setSelectOption] = React.useState<MultiSelectProps['selectedOption']>([])
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<MultiSelect
|
|
27
|
+
selectedOption={selectedOption}
|
|
28
|
+
onOptionChange={option => setSelectOption(option)}
|
|
29
|
+
options={
|
|
30
|
+
options ?? (new Array(20)).fill(0).map((_, index) => ({
|
|
31
|
+
id: index,
|
|
32
|
+
text: `Opção ${index + 1}`,
|
|
33
|
+
}))
|
|
34
|
+
}
|
|
35
|
+
{...args}
|
|
36
|
+
/>
|
|
37
|
+
)
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export const Default: Story = {
|
|
41
|
+
render: () => <ComponentWrapper label="Label" placeholder="Placeholder" />,
|
|
42
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import styled from 'styled-components'
|
|
2
|
+
import { theme } from '../Themes'
|
|
3
|
+
|
|
4
|
+
export const MultiSelectWrapper = styled.div`
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
position: relative;
|
|
8
|
+
.icon {
|
|
9
|
+
transition: transform 0.3s;
|
|
10
|
+
}
|
|
11
|
+
.icon-rotate {
|
|
12
|
+
transform: rotate(180deg) translateY(5px);
|
|
13
|
+
}
|
|
14
|
+
`
|
|
15
|
+
export interface DropdownProps {
|
|
16
|
+
dropDownTop?: boolean
|
|
17
|
+
dropDownWidth?: string
|
|
18
|
+
dropDownMaxHeight?: string
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export const Dropdown = styled.div<DropdownProps>`
|
|
22
|
+
position: absolute;
|
|
23
|
+
|
|
24
|
+
z-index: ${theme.zIndex.z9};
|
|
25
|
+
|
|
26
|
+
background-color: ${theme.colors.white};
|
|
27
|
+
width: ${({ dropDownWidth }) => (dropDownWidth ? dropDownWidth : '100%')};
|
|
28
|
+
${({ dropDownTop }) => (dropDownTop ? 'bottom: 58px;' : 'margin-top: 4px;')};
|
|
29
|
+
padding: 16px;
|
|
30
|
+
|
|
31
|
+
border-radius: 4px;
|
|
32
|
+
border: 1px solid ${theme.colors.shade20};
|
|
33
|
+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
|
|
34
|
+
height: auto;
|
|
35
|
+
max-height: ${({ dropDownMaxHeight }) => (dropDownMaxHeight ? dropDownMaxHeight : '300px')};
|
|
36
|
+
overflow-y: auto;
|
|
37
|
+
`
|
|
38
|
+
|
|
39
|
+
export const DropdownWrapper = styled.div`
|
|
40
|
+
position: relative;
|
|
41
|
+
z-index: ${theme.zIndex.z9};
|
|
42
|
+
`
|
|
43
|
+
|
|
44
|
+
export interface OptionButtonProps {
|
|
45
|
+
selected: boolean
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export const OptionButton = styled.button<OptionButtonProps>`
|
|
49
|
+
display: flex;
|
|
50
|
+
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: space-between;
|
|
53
|
+
gap: 0.5rem;
|
|
54
|
+
color: ${({ selected }) => (selected ? theme.colors.cyan30 : theme.colors.shade40)};
|
|
55
|
+
background-color: transparent;
|
|
56
|
+
border: none;
|
|
57
|
+
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
|
|
60
|
+
font-family: 'Nunito Sans', sans-serif;
|
|
61
|
+
font-size: ${theme.paragraph.medium};
|
|
62
|
+
text-align: left;
|
|
63
|
+
|
|
64
|
+
height: 46px;
|
|
65
|
+
width: 100%;
|
|
66
|
+
padding: 0;
|
|
67
|
+
|
|
68
|
+
&:not(:last-child) {
|
|
69
|
+
border-bottom: 1px solid ${theme.colors.shade10};
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&:hover {
|
|
73
|
+
color: ${theme.colors.cyan30};
|
|
74
|
+
}
|
|
75
|
+
`
|
|
76
|
+
|
|
77
|
+
export const OptionText = styled.div`
|
|
78
|
+
flex-grow: 1;
|
|
79
|
+
`
|