@dktunited-techoff/techoff-suite-ui 1.14.9 → 1.15.0

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.
Files changed (18) hide show
  1. package/esm/components/TsDropdowns/TsDropdown/TsDropdown.css +5 -0
  2. package/esm/components/TsDropdowns/TsDropdown/TsDropdown.d.ts +1 -1
  3. package/esm/components/TsDropdowns/TsDropdown/TsDropdown.js +57 -5
  4. package/esm/components/TsDropdowns/TsDropdown/TsDropdown.js.map +1 -1
  5. package/esm/components/TsDropdowns/TsDropdown/TsDropdown.tsx +81 -3
  6. package/esm/components/TsDropdowns/TsDropdown/TsDropdown.types.d.ts +3 -2
  7. package/esm/components/TsDropdowns/TsDropdown/TsDropdown.types.ts +3 -2
  8. package/lib/components/TsDropdowns/TsDropdown/TsDropdown.css +5 -0
  9. package/lib/components/TsDropdowns/TsDropdown/TsDropdown.d.ts +1 -1
  10. package/lib/components/TsDropdowns/TsDropdown/TsDropdown.js +57 -5
  11. package/lib/components/TsDropdowns/TsDropdown/TsDropdown.js.map +1 -1
  12. package/lib/components/TsDropdowns/TsDropdown/TsDropdown.tsx +81 -3
  13. package/lib/components/TsDropdowns/TsDropdown/TsDropdown.types.d.ts +3 -2
  14. package/lib/components/TsDropdowns/TsDropdown/TsDropdown.types.ts +3 -2
  15. package/package.json +1 -1
  16. package/src/components/TsDropdowns/TsDropdown/TsDropdown.css +5 -0
  17. package/src/components/TsDropdowns/TsDropdown/TsDropdown.tsx +81 -3
  18. package/src/components/TsDropdowns/TsDropdown/TsDropdown.types.ts +3 -2
package/esm/components/TsDropdowns/TsDropdown/TsDropdown.css CHANGED
@@ -11,6 +11,11 @@
11
11
  border: 1px solid #949494;
12
12
  cursor: pointer;
13
13
  }
14
+ .ts-dropdown-input .icon .ts-icon{
15
+ background-color: #3542ba;
16
+ color: #ffffff;
17
+ border-radius: 50%;
18
+ }
14
19
  .ts-dropdown-input--disabled {
15
20
  background: #fafafa;
16
21
  cursor: not-allowed;
package/esm/components/TsDropdowns/TsDropdown/TsDropdown.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { TsDropdownProps } from './TsDropdown.types';
3
3
  import './TsDropdown.css';
4
- export declare const TsDropdown: <T>({ containerRef, error, errorAction, label, noItemFoundMessage, options, placeholder, reloadOptionsOn, searchPlaceholder, value, disabled, searchable, action, getOptionLabel, getOptionValue, loadOptions, onChange, }: TsDropdownProps<T>) => React.JSX.Element;
4
+ export declare const TsDropdown: <T>({ containerRef, error, errorAction, label, noItemFoundMessage, options, placeholder, reloadOptionsOn, searchPlaceholder, value, disabled, searchable, action, listMode, getOptionLabel, getOptionValue, loadOptions, onChange, }: TsDropdownProps<T>) => React.JSX.Element;
package/esm/components/TsDropdowns/TsDropdown/TsDropdown.js CHANGED
@@ -4,13 +4,15 @@ import { TsIcon } from '../../TsIcon/TsIcon';
4
4
  import { TsInput } from '../../TsInput/TsInput/TsInput';
5
5
  import { useClickOutside } from '../../../hooks/use-click-outside';
6
6
  import { TsLoader } from '../../TsLoader/TsLoader';
7
+ import { TsCheckbox } from '../../TsCheckbox/TsCheckbox';
7
8
  import './TsDropdown.css';
8
- export const TsDropdown = ({ containerRef, error, errorAction, label, noItemFoundMessage, options, placeholder, reloadOptionsOn = [], searchPlaceholder, value, disabled, searchable, action, getOptionLabel, getOptionValue, loadOptions, onChange, }) => {
9
+ export const TsDropdown = ({ containerRef, error, errorAction, label, noItemFoundMessage, options, placeholder, reloadOptionsOn = [], searchPlaceholder, value, disabled, searchable, action, listMode, getOptionLabel, getOptionValue, loadOptions, onChange, }) => {
9
10
  const [showDropdownMenu, setShowDropdownMenu] = useState(false);
10
11
  const [searchValue, setSearchValue] = useState('');
11
12
  const [items, setItems] = useState(options ?? []);
12
13
  const [isLoading, setIsLoading] = useState(false);
13
14
  const [isFetchError, setIsFetchError] = useState(false);
15
+ const [itemsChoose, setItemsChoose] = useState(value);
14
16
  const dropdownRef = useClickOutside(() => setShowDropdownMenu(false));
15
17
  const dropdownMenuRef = useRef(null);
16
18
  // ########
@@ -32,6 +34,34 @@ export const TsDropdown = ({ containerRef, error, errorAction, label, noItemFoun
32
34
  onChange(item);
33
35
  };
34
36
  const handleToggleDropdownMenu = () => !disabled && setShowDropdownMenu(!showDropdownMenu);
37
+ const handleEmptyList = (event) => {
38
+ event.stopPropagation();
39
+ setItemsChoose([]);
40
+ onChange(undefined);
41
+ };
42
+ const handleManageItem = (event, action, value) => {
43
+ event.stopPropagation();
44
+ switch (action) {
45
+ case 'remove':
46
+ if (itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value)).length === 0) {
47
+ onChange(undefined);
48
+ }
49
+ else {
50
+ onChange([...itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value))]);
51
+ }
52
+ setItemsChoose([...itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value))]);
53
+ break;
54
+ case 'add':
55
+ if (itemsChoose) {
56
+ setItemsChoose([...itemsChoose, value]);
57
+ onChange([...itemsChoose, value]);
58
+ }
59
+ else {
60
+ setItemsChoose([value]);
61
+ onChange([value]);
62
+ }
63
+ }
64
+ };
35
65
  // ########
36
66
  // Watchers
37
67
  useEffect(() => {
@@ -79,8 +109,16 @@ export const TsDropdown = ({ containerRef, error, errorAction, label, noItemFoun
79
109
  ${disabled ? 'ts-dropdown-input--disabled' : ''}
80
110
  ${error && error !== '' ? 'ts-dropdown-container--error' : ''}
81
111
  `, onClick: handleToggleDropdownMenu },
82
- !value && React.createElement("div", { className: "ts-dropdown-input--placeholder" }, placeholder),
83
- value && React.createElement("div", { className: "ts-dropdown-input--value" }, getOptionLabel(value)),
112
+ !value && (!itemsChoose || itemsChoose.length === 0) && React.createElement("div", { className: "ts-dropdown-input--placeholder" }, placeholder),
113
+ value && !listMode && React.createElement("div", { className: "ts-dropdown-input--value" }, getOptionLabel(value)),
114
+ listMode && itemsChoose?.length > 0 && (React.createElement(React.Fragment, null,
115
+ itemsChoose.length > 2 ? (React.createElement("div", { className: "ts-dropdown-input--value" },
116
+ itemsChoose.map(item => getOptionValue(item)).slice(0, 2).join(", "),
117
+ " & ",
118
+ itemsChoose.length - 2,
119
+ " others")) : (React.createElement("div", { className: "ts-dropdown-input--value" }, itemsChoose.map(item => getOptionValue(item)).join(", "))),
120
+ React.createElement("div", { className: "icon", onClick: (event) => handleEmptyList(event) },
121
+ React.createElement(TsIcon, { name: 'close' })))),
84
122
  React.createElement("div", { className: "ts-dropdown-input--chevron" }, showDropdownMenu ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" },
85
123
  React.createElement("path", { d: "M11.9999 10.8286L7.0502 15.7783L5.63599 14.3641L11.9999 7.99996L18.3639 14.3641L16.9497 15.7783L11.9999 10.8286Z" }))) : (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" },
86
124
  React.createElement("path", { d: "M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z" })))))),
@@ -96,10 +134,24 @@ export const TsDropdown = ({ containerRef, error, errorAction, label, noItemFoun
96
134
  React.createElement(TsLoader, { size: "sm" }))),
97
135
  !isLoading && isFetchError && (React.createElement("div", { className: "ts-dropdown-menu-error-text" }, "An error occured, try again later.")),
98
136
  !isLoading && !isFetchError && items.length === 0 && (React.createElement("div", { className: "ts-dropdown-menu-error-text" }, noItemFoundMessage ?? 'No option found.')),
99
- !isLoading &&
137
+ !listMode &&
138
+ !isLoading &&
100
139
  !isFetchError &&
101
140
  items.length > 0 &&
102
- items.map(item => (React.createElement("div", { key: getOptionValue(item), className: "ts-dropdown-menu-item", onClick: () => handleSelectItem(item) }, getOptionLabel(item))))),
141
+ items.map(item => (React.createElement("div", { key: getOptionValue(item), className: "ts-dropdown-menu-item", onClick: () => handleSelectItem(item) }, getOptionLabel(item)))),
142
+ listMode &&
143
+ !isLoading &&
144
+ !isFetchError &&
145
+ items.filter(item => !(itemsChoose ?? []).map(item => getOptionValue(item)).includes(getOptionValue(item))).concat(itemsChoose ?? []).length > 0 &&
146
+ items.filter(item => !(itemsChoose ?? []).map(item => getOptionValue(item)).includes(getOptionValue(item))).concat(itemsChoose ?? [])
147
+ .sort((a, b) => {
148
+ const aIncluded = itemsChoose?.includes(a) ? 1 : 0;
149
+ const bIncluded = itemsChoose?.includes(b) ? 1 : 0;
150
+ return bIncluded - aIncluded;
151
+ })
152
+ .map(item => (React.createElement("div", { key: getOptionLabel(item), className: "ts-dropdown-menu-item", onClick: (event) => handleManageItem(event, itemsChoose && itemsChoose?.map(item => getOptionValue(item)).includes(getOptionValue(item)) ? 'remove' : 'add', item) },
153
+ listMode && (React.createElement(TsCheckbox, { checked: itemsChoose?.map(item => getOptionValue(item)).includes(getOptionValue(item)), onChange: () => { } })),
154
+ getOptionValue(item))))),
103
155
  action && React.createElement("div", { className: "ts-dropdown-action" }, action)))));
104
156
  };
105
157
  //# sourceMappingURL=TsDropdown.js.map
package/esm/components/TsDropdowns/TsDropdown/TsDropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsDropdown.js","sourceRoot":"","sources":["../../../../src/components/TsDropdowns/TsDropdown/TsDropdown.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TsDropdown.js","sourceRoot":"","sources":["../../../../src/components/TsDropdowns/TsDropdown/TsDropdown.tsx"],"names":[],"mappings":"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"}
package/esm/components/TsDropdowns/TsDropdown/TsDropdown.tsx CHANGED
@@ -5,8 +5,10 @@ import { TsIcon } from '../../TsIcon/TsIcon';
5
5
  import { TsInput } from '../../TsInput/TsInput/TsInput';
6
6
  import { useClickOutside } from '../../../hooks/use-click-outside';
7
7
  import { TsLoader } from '../../TsLoader/TsLoader';
8
+ import { TsCheckbox } from '../../TsCheckbox/TsCheckbox';
8
9
  import './TsDropdown.css';
9
10
 
11
+
10
12
  export const TsDropdown = <T,>({
11
13
  containerRef,
12
14
  error,
@@ -21,6 +23,7 @@ export const TsDropdown = <T,>({
21
23
  disabled,
22
24
  searchable,
23
25
  action,
26
+ listMode,
24
27
  getOptionLabel,
25
28
  getOptionValue,
26
29
  loadOptions,
@@ -31,6 +34,7 @@ export const TsDropdown = <T,>({
31
34
  const [items, setItems] = useState<T[]>(options ?? []);
32
35
  const [isLoading, setIsLoading] = useState<boolean>(false);
33
36
  const [isFetchError, setIsFetchError] = useState<boolean>(false);
37
+ const [itemsChoose, setItemsChoose] = useState<T[]>(value as T[]);
34
38
  const dropdownRef = useClickOutside(() => setShowDropdownMenu(false));
35
39
  const dropdownMenuRef = useRef<HTMLDivElement>(null);
36
40
 
@@ -55,6 +59,34 @@ export const TsDropdown = <T,>({
55
59
  };
56
60
  const handleToggleDropdownMenu = () => !disabled && setShowDropdownMenu(!showDropdownMenu);
57
61
 
62
+ const handleEmptyList = (event: React.MouseEvent<HTMLDivElement>) => {
63
+ event.stopPropagation();
64
+ setItemsChoose([]);
65
+ onChange(undefined)
66
+ }
67
+
68
+ const handleManageItem = (event: React.FormEvent<HTMLDivElement>, action: string, value: T) => {
69
+ event.stopPropagation();
70
+ switch(action){
71
+ case 'remove':
72
+ if(itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value)).length === 0){
73
+ onChange(undefined);
74
+ }else {
75
+ onChange([...itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value))])
76
+ }
77
+ setItemsChoose([...itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value))]);
78
+ break;
79
+ case 'add':
80
+ if(itemsChoose){
81
+ setItemsChoose([...itemsChoose, value]);
82
+ onChange([...itemsChoose, value])
83
+ }else {
84
+ setItemsChoose([value]);
85
+ onChange([value])
86
+ }
87
+ }
88
+ }
89
+
58
90
  // ########
59
91
  // Watchers
60
92
  useEffect(() => {
@@ -106,8 +138,22 @@ export const TsDropdown = <T,>({
106
138
  `}
107
139
  onClick={handleToggleDropdownMenu}
108
140
  >
109
- {!value && <div className="ts-dropdown-input--placeholder">{placeholder}</div>}
110
- {value && <div className="ts-dropdown-input--value">{getOptionLabel(value)}</div>}
141
+ {!value && (!itemsChoose || itemsChoose.length === 0) && <div className="ts-dropdown-input--placeholder">{placeholder}</div>}
142
+ {value && !listMode && <div className="ts-dropdown-input--value">{getOptionLabel(value as T)}</div>}
143
+ {listMode && itemsChoose?.length > 0 && (
144
+ <>
145
+ {itemsChoose.length > 2 ? (
146
+ <div className="ts-dropdown-input--value">
147
+ {itemsChoose.map(item => getOptionValue(item)).slice(0, 2).join(", ")} & {itemsChoose.length - 2} others
148
+ </div>
149
+ ) : (
150
+ <div className="ts-dropdown-input--value">{itemsChoose.map(item => getOptionValue(item)).join(", ")}</div>
151
+ )}
152
+ <div className="icon" onClick={(event) => handleEmptyList(event)}>
153
+ <TsIcon name='close' />
154
+ </div>
155
+ </>
156
+ )}
111
157
  <div className="ts-dropdown-input--chevron">
112
158
  {showDropdownMenu ? (
113
159
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
@@ -161,7 +207,8 @@ export const TsDropdown = <T,>({
161
207
  {!isLoading && !isFetchError && items.length === 0 && (
162
208
  <div className="ts-dropdown-menu-error-text">{noItemFoundMessage ?? 'No option found.'}</div>
163
209
  )}
164
- {!isLoading &&
210
+ {!listMode &&
211
+ !isLoading &&
165
212
  !isFetchError &&
166
213
  items.length > 0 &&
167
214
  items.map(item => (
@@ -173,6 +220,37 @@ export const TsDropdown = <T,>({
173
220
  {getOptionLabel(item)}
174
221
  </div>
175
222
  ))}
223
+ {listMode &&
224
+ !isLoading &&
225
+ !isFetchError &&
226
+ items.filter(item => !(itemsChoose ?? []).map(item => getOptionValue(item)).includes(getOptionValue(item))).concat(itemsChoose ?? []).length > 0 &&
227
+ items.filter(item => !(itemsChoose ?? []).map(item => getOptionValue(item)).includes(getOptionValue(item))).concat(itemsChoose ?? [])
228
+ .sort((a, b) => {
229
+ const aIncluded = itemsChoose?.includes(a) ? 1 : 0;
230
+ const bIncluded = itemsChoose?.includes(b) ? 1 : 0;
231
+ return bIncluded - aIncluded;
232
+ })
233
+ .map(item => (
234
+ <div
235
+ key={getOptionLabel(item)}
236
+ className="ts-dropdown-menu-item"
237
+ onClick={
238
+ (event) => handleManageItem(
239
+ event,
240
+ itemsChoose && itemsChoose?.map(item => getOptionValue(item)).includes(getOptionValue(item)) ? 'remove' : 'add',
241
+ item
242
+ )
243
+ }
244
+ >
245
+ {listMode && (
246
+ <TsCheckbox
247
+ checked={itemsChoose?.map(item => getOptionValue(item)).includes(getOptionValue(item))}
248
+ onChange={() => {}}
249
+ />
250
+ )}
251
+ {getOptionValue(item)}
252
+ </div>
253
+ ))}
176
254
  </div>
177
255
  {action && <div className="ts-dropdown-action">{action}</div>}
178
256
  </div>
package/esm/components/TsDropdowns/TsDropdown/TsDropdown.types.d.ts CHANGED
@@ -8,13 +8,14 @@ export type TsDropdownProps<T> = {
8
8
  placeholder?: string;
9
9
  reloadOptionsOn?: any[];
10
10
  searchPlaceholder?: string;
11
- value?: T;
11
+ value?: T | T[];
12
12
  disabled?: boolean;
13
13
  searchable?: boolean;
14
14
  action?: ReactNode;
15
15
  errorAction?: string;
16
+ listMode?: boolean;
16
17
  getOptionLabel: (option: T) => string;
17
18
  getOptionValue: (option: T) => string;
18
19
  loadOptions?: (search?: string) => Promise<T[]>;
19
- onChange: (value?: T) => void;
20
+ onChange: (value?: T | T[]) => void;
20
21
  };
package/esm/components/TsDropdowns/TsDropdown/TsDropdown.types.ts CHANGED
@@ -9,13 +9,14 @@ export type TsDropdownProps<T> = {
9
9
  placeholder?: string;
10
10
  reloadOptionsOn?: any[];
11
11
  searchPlaceholder?: string;
12
- value?: T;
12
+ value?: T | T[];
13
13
  disabled?: boolean;
14
14
  searchable?: boolean;
15
15
  action?: ReactNode;
16
16
  errorAction?: string;
17
+ listMode?: boolean;
17
18
  getOptionLabel: (option: T) => string;
18
19
  getOptionValue: (option: T) => string;
19
20
  loadOptions?: (search?: string) => Promise<T[]>;
20
- onChange: (value?: T) => void;
21
+ onChange: (value?: T | T[]) => void;
21
22
  };
package/lib/components/TsDropdowns/TsDropdown/TsDropdown.css CHANGED
@@ -11,6 +11,11 @@
11
11
  border: 1px solid #949494;
12
12
  cursor: pointer;
13
13
  }
14
+ .ts-dropdown-input .icon .ts-icon{
15
+ background-color: #3542ba;
16
+ color: #ffffff;
17
+ border-radius: 50%;
18
+ }
14
19
  .ts-dropdown-input--disabled {
15
20
  background: #fafafa;
16
21
  cursor: not-allowed;
package/lib/components/TsDropdowns/TsDropdown/TsDropdown.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { TsDropdownProps } from './TsDropdown.types';
3
3
  import './TsDropdown.css';
4
- export declare const TsDropdown: <T>({ containerRef, error, errorAction, label, noItemFoundMessage, options, placeholder, reloadOptionsOn, searchPlaceholder, value, disabled, searchable, action, getOptionLabel, getOptionValue, loadOptions, onChange, }: TsDropdownProps<T>) => React.JSX.Element;
4
+ export declare const TsDropdown: <T>({ containerRef, error, errorAction, label, noItemFoundMessage, options, placeholder, reloadOptionsOn, searchPlaceholder, value, disabled, searchable, action, listMode, getOptionLabel, getOptionValue, loadOptions, onChange, }: TsDropdownProps<T>) => React.JSX.Element;
package/lib/components/TsDropdowns/TsDropdown/TsDropdown.js CHANGED
@@ -7,13 +7,15 @@ const TsIcon_1 = require("../../TsIcon/TsIcon");
7
7
  const TsInput_1 = require("../../TsInput/TsInput/TsInput");
8
8
  const use_click_outside_1 = require("../../../hooks/use-click-outside");
9
9
  const TsLoader_1 = require("../../TsLoader/TsLoader");
10
+ const TsCheckbox_1 = require("../../TsCheckbox/TsCheckbox");
10
11
  require("./TsDropdown.css");
11
- const TsDropdown = ({ containerRef, error, errorAction, label, noItemFoundMessage, options, placeholder, reloadOptionsOn = [], searchPlaceholder, value, disabled, searchable, action, getOptionLabel, getOptionValue, loadOptions, onChange, }) => {
12
+ const TsDropdown = ({ containerRef, error, errorAction, label, noItemFoundMessage, options, placeholder, reloadOptionsOn = [], searchPlaceholder, value, disabled, searchable, action, listMode, getOptionLabel, getOptionValue, loadOptions, onChange, }) => {
12
13
  const [showDropdownMenu, setShowDropdownMenu] = (0, react_1.useState)(false);
13
14
  const [searchValue, setSearchValue] = (0, react_1.useState)('');
14
15
  const [items, setItems] = (0, react_1.useState)(options ?? []);
15
16
  const [isLoading, setIsLoading] = (0, react_1.useState)(false);
16
17
  const [isFetchError, setIsFetchError] = (0, react_1.useState)(false);
18
+ const [itemsChoose, setItemsChoose] = (0, react_1.useState)(value);
17
19
  const dropdownRef = (0, use_click_outside_1.useClickOutside)(() => setShowDropdownMenu(false));
18
20
  const dropdownMenuRef = (0, react_1.useRef)(null);
19
21
  // ########
@@ -35,6 +37,34 @@ const TsDropdown = ({ containerRef, error, errorAction, label, noItemFoundMessag
35
37
  onChange(item);
36
38
  };
37
39
  const handleToggleDropdownMenu = () => !disabled && setShowDropdownMenu(!showDropdownMenu);
40
+ const handleEmptyList = (event) => {
41
+ event.stopPropagation();
42
+ setItemsChoose([]);
43
+ onChange(undefined);
44
+ };
45
+ const handleManageItem = (event, action, value) => {
46
+ event.stopPropagation();
47
+ switch (action) {
48
+ case 'remove':
49
+ if (itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value)).length === 0) {
50
+ onChange(undefined);
51
+ }
52
+ else {
53
+ onChange([...itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value))]);
54
+ }
55
+ setItemsChoose([...itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value))]);
56
+ break;
57
+ case 'add':
58
+ if (itemsChoose) {
59
+ setItemsChoose([...itemsChoose, value]);
60
+ onChange([...itemsChoose, value]);
61
+ }
62
+ else {
63
+ setItemsChoose([value]);
64
+ onChange([value]);
65
+ }
66
+ }
67
+ };
38
68
  // ########
39
69
  // Watchers
40
70
  (0, react_1.useEffect)(() => {
@@ -82,8 +112,16 @@ const TsDropdown = ({ containerRef, error, errorAction, label, noItemFoundMessag
82
112
  ${disabled ? 'ts-dropdown-input--disabled' : ''}
83
113
  ${error && error !== '' ? 'ts-dropdown-container--error' : ''}
84
114
  `, onClick: handleToggleDropdownMenu },
85
- !value && React.createElement("div", { className: "ts-dropdown-input--placeholder" }, placeholder),
86
- value && React.createElement("div", { className: "ts-dropdown-input--value" }, getOptionLabel(value)),
115
+ !value && (!itemsChoose || itemsChoose.length === 0) && React.createElement("div", { className: "ts-dropdown-input--placeholder" }, placeholder),
116
+ value && !listMode && React.createElement("div", { className: "ts-dropdown-input--value" }, getOptionLabel(value)),
117
+ listMode && itemsChoose?.length > 0 && (React.createElement(React.Fragment, null,
118
+ itemsChoose.length > 2 ? (React.createElement("div", { className: "ts-dropdown-input--value" },
119
+ itemsChoose.map(item => getOptionValue(item)).slice(0, 2).join(", "),
120
+ " & ",
121
+ itemsChoose.length - 2,
122
+ " others")) : (React.createElement("div", { className: "ts-dropdown-input--value" }, itemsChoose.map(item => getOptionValue(item)).join(", "))),
123
+ React.createElement("div", { className: "icon", onClick: (event) => handleEmptyList(event) },
124
+ React.createElement(TsIcon_1.TsIcon, { name: 'close' })))),
87
125
  React.createElement("div", { className: "ts-dropdown-input--chevron" }, showDropdownMenu ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" },
88
126
  React.createElement("path", { d: "M11.9999 10.8286L7.0502 15.7783L5.63599 14.3641L11.9999 7.99996L18.3639 14.3641L16.9497 15.7783L11.9999 10.8286Z" }))) : (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" },
89
127
  React.createElement("path", { d: "M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z" })))))),
@@ -99,10 +137,24 @@ const TsDropdown = ({ containerRef, error, errorAction, label, noItemFoundMessag
99
137
  React.createElement(TsLoader_1.TsLoader, { size: "sm" }))),
100
138
  !isLoading && isFetchError && (React.createElement("div", { className: "ts-dropdown-menu-error-text" }, "An error occured, try again later.")),
101
139
  !isLoading && !isFetchError && items.length === 0 && (React.createElement("div", { className: "ts-dropdown-menu-error-text" }, noItemFoundMessage ?? 'No option found.')),
102
- !isLoading &&
140
+ !listMode &&
141
+ !isLoading &&
103
142
  !isFetchError &&
104
143
  items.length > 0 &&
105
- items.map(item => (React.createElement("div", { key: getOptionValue(item), className: "ts-dropdown-menu-item", onClick: () => handleSelectItem(item) }, getOptionLabel(item))))),
144
+ items.map(item => (React.createElement("div", { key: getOptionValue(item), className: "ts-dropdown-menu-item", onClick: () => handleSelectItem(item) }, getOptionLabel(item)))),
145
+ listMode &&
146
+ !isLoading &&
147
+ !isFetchError &&
148
+ items.filter(item => !(itemsChoose ?? []).map(item => getOptionValue(item)).includes(getOptionValue(item))).concat(itemsChoose ?? []).length > 0 &&
149
+ items.filter(item => !(itemsChoose ?? []).map(item => getOptionValue(item)).includes(getOptionValue(item))).concat(itemsChoose ?? [])
150
+ .sort((a, b) => {
151
+ const aIncluded = itemsChoose?.includes(a) ? 1 : 0;
152
+ const bIncluded = itemsChoose?.includes(b) ? 1 : 0;
153
+ return bIncluded - aIncluded;
154
+ })
155
+ .map(item => (React.createElement("div", { key: getOptionLabel(item), className: "ts-dropdown-menu-item", onClick: (event) => handleManageItem(event, itemsChoose && itemsChoose?.map(item => getOptionValue(item)).includes(getOptionValue(item)) ? 'remove' : 'add', item) },
156
+ listMode && (React.createElement(TsCheckbox_1.TsCheckbox, { checked: itemsChoose?.map(item => getOptionValue(item)).includes(getOptionValue(item)), onChange: () => { } })),
157
+ getOptionValue(item))))),
106
158
  action && React.createElement("div", { className: "ts-dropdown-action" }, action)))));
107
159
  };
108
160
  exports.TsDropdown = TsDropdown;
package/lib/components/TsDropdowns/TsDropdown/TsDropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsDropdown.js","sourceRoot":"","sources":["../../../../src/components/TsDropdowns/TsDropdown/TsDropdown.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TsDropdown.js","sourceRoot":"","sources":["../../../../src/components/TsDropdowns/TsDropdown/TsDropdown.tsx"],"names":[],"mappings":"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"}
package/lib/components/TsDropdowns/TsDropdown/TsDropdown.tsx CHANGED
@@ -5,8 +5,10 @@ import { TsIcon } from '../../TsIcon/TsIcon';
5
5
  import { TsInput } from '../../TsInput/TsInput/TsInput';
6
6
  import { useClickOutside } from '../../../hooks/use-click-outside';
7
7
  import { TsLoader } from '../../TsLoader/TsLoader';
8
+ import { TsCheckbox } from '../../TsCheckbox/TsCheckbox';
8
9
  import './TsDropdown.css';
9
10
 
11
+
10
12
  export const TsDropdown = <T,>({
11
13
  containerRef,
12
14
  error,
@@ -21,6 +23,7 @@ export const TsDropdown = <T,>({
21
23
  disabled,
22
24
  searchable,
23
25
  action,
26
+ listMode,
24
27
  getOptionLabel,
25
28
  getOptionValue,
26
29
  loadOptions,
@@ -31,6 +34,7 @@ export const TsDropdown = <T,>({
31
34
  const [items, setItems] = useState<T[]>(options ?? []);
32
35
  const [isLoading, setIsLoading] = useState<boolean>(false);
33
36
  const [isFetchError, setIsFetchError] = useState<boolean>(false);
37
+ const [itemsChoose, setItemsChoose] = useState<T[]>(value as T[]);
34
38
  const dropdownRef = useClickOutside(() => setShowDropdownMenu(false));
35
39
  const dropdownMenuRef = useRef<HTMLDivElement>(null);
36
40
 
@@ -55,6 +59,34 @@ export const TsDropdown = <T,>({
55
59
  };
56
60
  const handleToggleDropdownMenu = () => !disabled && setShowDropdownMenu(!showDropdownMenu);
57
61
 
62
+ const handleEmptyList = (event: React.MouseEvent<HTMLDivElement>) => {
63
+ event.stopPropagation();
64
+ setItemsChoose([]);
65
+ onChange(undefined)
66
+ }
67
+
68
+ const handleManageItem = (event: React.FormEvent<HTMLDivElement>, action: string, value: T) => {
69
+ event.stopPropagation();
70
+ switch(action){
71
+ case 'remove':
72
+ if(itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value)).length === 0){
73
+ onChange(undefined);
74
+ }else {
75
+ onChange([...itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value))])
76
+ }
77
+ setItemsChoose([...itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value))]);
78
+ break;
79
+ case 'add':
80
+ if(itemsChoose){
81
+ setItemsChoose([...itemsChoose, value]);
82
+ onChange([...itemsChoose, value])
83
+ }else {
84
+ setItemsChoose([value]);
85
+ onChange([value])
86
+ }
87
+ }
88
+ }
89
+
58
90
  // ########
59
91
  // Watchers
60
92
  useEffect(() => {
@@ -106,8 +138,22 @@ export const TsDropdown = <T,>({
106
138
  `}
107
139
  onClick={handleToggleDropdownMenu}
108
140
  >
109
- {!value && <div className="ts-dropdown-input--placeholder">{placeholder}</div>}
110
- {value && <div className="ts-dropdown-input--value">{getOptionLabel(value)}</div>}
141
+ {!value && (!itemsChoose || itemsChoose.length === 0) && <div className="ts-dropdown-input--placeholder">{placeholder}</div>}
142
+ {value && !listMode && <div className="ts-dropdown-input--value">{getOptionLabel(value as T)}</div>}
143
+ {listMode && itemsChoose?.length > 0 && (
144
+ <>
145
+ {itemsChoose.length > 2 ? (
146
+ <div className="ts-dropdown-input--value">
147
+ {itemsChoose.map(item => getOptionValue(item)).slice(0, 2).join(", ")} & {itemsChoose.length - 2} others
148
+ </div>
149
+ ) : (
150
+ <div className="ts-dropdown-input--value">{itemsChoose.map(item => getOptionValue(item)).join(", ")}</div>
151
+ )}
152
+ <div className="icon" onClick={(event) => handleEmptyList(event)}>
153
+ <TsIcon name='close' />
154
+ </div>
155
+ </>
156
+ )}
111
157
  <div className="ts-dropdown-input--chevron">
112
158
  {showDropdownMenu ? (
113
159
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
@@ -161,7 +207,8 @@ export const TsDropdown = <T,>({
161
207
  {!isLoading && !isFetchError && items.length === 0 && (
162
208
  <div className="ts-dropdown-menu-error-text">{noItemFoundMessage ?? 'No option found.'}</div>
163
209
  )}
164
- {!isLoading &&
210
+ {!listMode &&
211
+ !isLoading &&
165
212
  !isFetchError &&
166
213
  items.length > 0 &&
167
214
  items.map(item => (
@@ -173,6 +220,37 @@ export const TsDropdown = <T,>({
173
220
  {getOptionLabel(item)}
174
221
  </div>
175
222
  ))}
223
+ {listMode &&
224
+ !isLoading &&
225
+ !isFetchError &&
226
+ items.filter(item => !(itemsChoose ?? []).map(item => getOptionValue(item)).includes(getOptionValue(item))).concat(itemsChoose ?? []).length > 0 &&
227
+ items.filter(item => !(itemsChoose ?? []).map(item => getOptionValue(item)).includes(getOptionValue(item))).concat(itemsChoose ?? [])
228
+ .sort((a, b) => {
229
+ const aIncluded = itemsChoose?.includes(a) ? 1 : 0;
230
+ const bIncluded = itemsChoose?.includes(b) ? 1 : 0;
231
+ return bIncluded - aIncluded;
232
+ })
233
+ .map(item => (
234
+ <div
235
+ key={getOptionLabel(item)}
236
+ className="ts-dropdown-menu-item"
237
+ onClick={
238
+ (event) => handleManageItem(
239
+ event,
240
+ itemsChoose && itemsChoose?.map(item => getOptionValue(item)).includes(getOptionValue(item)) ? 'remove' : 'add',
241
+ item
242
+ )
243
+ }
244
+ >
245
+ {listMode && (
246
+ <TsCheckbox
247
+ checked={itemsChoose?.map(item => getOptionValue(item)).includes(getOptionValue(item))}
248
+ onChange={() => {}}
249
+ />
250
+ )}
251
+ {getOptionValue(item)}
252
+ </div>
253
+ ))}
176
254
  </div>
177
255
  {action && <div className="ts-dropdown-action">{action}</div>}
178
256
  </div>
package/lib/components/TsDropdowns/TsDropdown/TsDropdown.types.d.ts CHANGED
@@ -8,13 +8,14 @@ export type TsDropdownProps<T> = {
8
8
  placeholder?: string;
9
9
  reloadOptionsOn?: any[];
10
10
  searchPlaceholder?: string;
11
- value?: T;
11
+ value?: T | T[];
12
12
  disabled?: boolean;
13
13
  searchable?: boolean;
14
14
  action?: ReactNode;
15
15
  errorAction?: string;
16
+ listMode?: boolean;
16
17
  getOptionLabel: (option: T) => string;
17
18
  getOptionValue: (option: T) => string;
18
19
  loadOptions?: (search?: string) => Promise<T[]>;
19
- onChange: (value?: T) => void;
20
+ onChange: (value?: T | T[]) => void;
20
21
  };
package/lib/components/TsDropdowns/TsDropdown/TsDropdown.types.ts CHANGED
@@ -9,13 +9,14 @@ export type TsDropdownProps<T> = {
9
9
  placeholder?: string;
10
10
  reloadOptionsOn?: any[];
11
11
  searchPlaceholder?: string;
12
- value?: T;
12
+ value?: T | T[];
13
13
  disabled?: boolean;
14
14
  searchable?: boolean;
15
15
  action?: ReactNode;
16
16
  errorAction?: string;
17
+ listMode?: boolean;
17
18
  getOptionLabel: (option: T) => string;
18
19
  getOptionValue: (option: T) => string;
19
20
  loadOptions?: (search?: string) => Promise<T[]>;
20
- onChange: (value?: T) => void;
21
+ onChange: (value?: T | T[]) => void;
21
22
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.14.9",
3
+ "version": "1.15.0",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsDropdowns/TsDropdown/TsDropdown.css CHANGED
@@ -11,6 +11,11 @@
11
11
  border: 1px solid #949494;
12
12
  cursor: pointer;
13
13
  }
14
+ .ts-dropdown-input .icon .ts-icon{
15
+ background-color: #3542ba;
16
+ color: #ffffff;
17
+ border-radius: 50%;
18
+ }
14
19
  .ts-dropdown-input--disabled {
15
20
  background: #fafafa;
16
21
  cursor: not-allowed;
package/src/components/TsDropdowns/TsDropdown/TsDropdown.tsx CHANGED
@@ -5,8 +5,10 @@ import { TsIcon } from '../../TsIcon/TsIcon';
5
5
  import { TsInput } from '../../TsInput/TsInput/TsInput';
6
6
  import { useClickOutside } from '../../../hooks/use-click-outside';
7
7
  import { TsLoader } from '../../TsLoader/TsLoader';
8
+ import { TsCheckbox } from '../../TsCheckbox/TsCheckbox';
8
9
  import './TsDropdown.css';
9
10
 
11
+
10
12
  export const TsDropdown = <T,>({
11
13
  containerRef,
12
14
  error,
@@ -21,6 +23,7 @@ export const TsDropdown = <T,>({
21
23
  disabled,
22
24
  searchable,
23
25
  action,
26
+ listMode,
24
27
  getOptionLabel,
25
28
  getOptionValue,
26
29
  loadOptions,
@@ -31,6 +34,7 @@ export const TsDropdown = <T,>({
31
34
  const [items, setItems] = useState<T[]>(options ?? []);
32
35
  const [isLoading, setIsLoading] = useState<boolean>(false);
33
36
  const [isFetchError, setIsFetchError] = useState<boolean>(false);
37
+ const [itemsChoose, setItemsChoose] = useState<T[]>(value as T[]);
34
38
  const dropdownRef = useClickOutside(() => setShowDropdownMenu(false));
35
39
  const dropdownMenuRef = useRef<HTMLDivElement>(null);
36
40
 
@@ -55,6 +59,34 @@ export const TsDropdown = <T,>({
55
59
  };
56
60
  const handleToggleDropdownMenu = () => !disabled && setShowDropdownMenu(!showDropdownMenu);
57
61
 
62
+ const handleEmptyList = (event: React.MouseEvent<HTMLDivElement>) => {
63
+ event.stopPropagation();
64
+ setItemsChoose([]);
65
+ onChange(undefined)
66
+ }
67
+
68
+ const handleManageItem = (event: React.FormEvent<HTMLDivElement>, action: string, value: T) => {
69
+ event.stopPropagation();
70
+ switch(action){
71
+ case 'remove':
72
+ if(itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value)).length === 0){
73
+ onChange(undefined);
74
+ }else {
75
+ onChange([...itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value))])
76
+ }
77
+ setItemsChoose([...itemsChoose.filter(item => getOptionValue(item) !== getOptionValue(value))]);
78
+ break;
79
+ case 'add':
80
+ if(itemsChoose){
81
+ setItemsChoose([...itemsChoose, value]);
82
+ onChange([...itemsChoose, value])
83
+ }else {
84
+ setItemsChoose([value]);
85
+ onChange([value])
86
+ }
87
+ }
88
+ }
89
+
58
90
  // ########
59
91
  // Watchers
60
92
  useEffect(() => {
@@ -106,8 +138,22 @@ export const TsDropdown = <T,>({
106
138
  `}
107
139
  onClick={handleToggleDropdownMenu}
108
140
  >
109
- {!value && <div className="ts-dropdown-input--placeholder">{placeholder}</div>}
110
- {value && <div className="ts-dropdown-input--value">{getOptionLabel(value)}</div>}
141
+ {!value && (!itemsChoose || itemsChoose.length === 0) && <div className="ts-dropdown-input--placeholder">{placeholder}</div>}
142
+ {value && !listMode && <div className="ts-dropdown-input--value">{getOptionLabel(value as T)}</div>}
143
+ {listMode && itemsChoose?.length > 0 && (
144
+ <>
145
+ {itemsChoose.length > 2 ? (
146
+ <div className="ts-dropdown-input--value">
147
+ {itemsChoose.map(item => getOptionValue(item)).slice(0, 2).join(", ")} & {itemsChoose.length - 2} others
148
+ </div>
149
+ ) : (
150
+ <div className="ts-dropdown-input--value">{itemsChoose.map(item => getOptionValue(item)).join(", ")}</div>
151
+ )}
152
+ <div className="icon" onClick={(event) => handleEmptyList(event)}>
153
+ <TsIcon name='close' />
154
+ </div>
155
+ </>
156
+ )}
111
157
  <div className="ts-dropdown-input--chevron">
112
158
  {showDropdownMenu ? (
113
159
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
@@ -161,7 +207,8 @@ export const TsDropdown = <T,>({
161
207
  {!isLoading && !isFetchError && items.length === 0 && (
162
208
  <div className="ts-dropdown-menu-error-text">{noItemFoundMessage ?? 'No option found.'}</div>
163
209
  )}
164
- {!isLoading &&
210
+ {!listMode &&
211
+ !isLoading &&
165
212
  !isFetchError &&
166
213
  items.length > 0 &&
167
214
  items.map(item => (
@@ -173,6 +220,37 @@ export const TsDropdown = <T,>({
173
220
  {getOptionLabel(item)}
174
221
  </div>
175
222
  ))}
223
+ {listMode &&
224
+ !isLoading &&
225
+ !isFetchError &&
226
+ items.filter(item => !(itemsChoose ?? []).map(item => getOptionValue(item)).includes(getOptionValue(item))).concat(itemsChoose ?? []).length > 0 &&
227
+ items.filter(item => !(itemsChoose ?? []).map(item => getOptionValue(item)).includes(getOptionValue(item))).concat(itemsChoose ?? [])
228
+ .sort((a, b) => {
229
+ const aIncluded = itemsChoose?.includes(a) ? 1 : 0;
230
+ const bIncluded = itemsChoose?.includes(b) ? 1 : 0;
231
+ return bIncluded - aIncluded;
232
+ })
233
+ .map(item => (
234
+ <div
235
+ key={getOptionLabel(item)}
236
+ className="ts-dropdown-menu-item"
237
+ onClick={
238
+ (event) => handleManageItem(
239
+ event,
240
+ itemsChoose && itemsChoose?.map(item => getOptionValue(item)).includes(getOptionValue(item)) ? 'remove' : 'add',
241
+ item
242
+ )
243
+ }
244
+ >
245
+ {listMode && (
246
+ <TsCheckbox
247
+ checked={itemsChoose?.map(item => getOptionValue(item)).includes(getOptionValue(item))}
248
+ onChange={() => {}}
249
+ />
250
+ )}
251
+ {getOptionValue(item)}
252
+ </div>
253
+ ))}
176
254
  </div>
177
255
  {action && <div className="ts-dropdown-action">{action}</div>}
178
256
  </div>
package/src/components/TsDropdowns/TsDropdown/TsDropdown.types.ts CHANGED
@@ -9,13 +9,14 @@ export type TsDropdownProps<T> = {
9
9
  placeholder?: string;
10
10
  reloadOptionsOn?: any[];
11
11
  searchPlaceholder?: string;
12
- value?: T;
12
+ value?: T | T[];
13
13
  disabled?: boolean;
14
14
  searchable?: boolean;
15
15
  action?: ReactNode;
16
16
  errorAction?: string;
17
+ listMode?: boolean;
17
18
  getOptionLabel: (option: T) => string;
18
19
  getOptionValue: (option: T) => string;
19
20
  loadOptions?: (search?: string) => Promise<T[]>;
20
- onChange: (value?: T) => void;
21
+ onChange: (value?: T | T[]) => void;
21
22
  };