← All changes | backend/views/components/Main/components/AsyncMultiSelect.jsx +19 -19 1.4.13 → 1.4.17 View file →

		@@ -7,9 +7,9 @@
7	7	queryHook,
8	8	selected = [],
9	9	placeHolder,
10	10	endpoint = '',
11		- widthClass = 'disco-w-96',
	11	+ widthClass = 'disco:w-96',
12	12	}) => {
13	13	const searchRef = useRef();
14	14	const dropdownRef = useRef();
15	15	const debounceRef = useRef(null);
		@@ -79,15 +79,15 @@
79	79
80	80	// item loading state content
81	81	if (isLoading) {
82	82	content = (
83		- <div className="disco-py-4">{__('Searching...', 'disco')}</div>
	83	+ <div className="disco:py-4">{__('Searching...', 'disco')}</div>
84	84	);
85	85	}
86	86
87	87	// error state content
88	88	if (isError) {
89		- content = <div className="disco-py-4">{error?.data?.message}</div>;
	89	+ content = <div className="disco:py-4">{error?.data?.message}</div>;
90	90	}
91	91
92	92	// successfully item fetching state
93	93	if (showSearchResult && !isError && !isLoading) {
		@@ -93,9 +93,9 @@
93	93	if (showSearchResult && !isError && !isLoading) {
94	94	content = data.map((item) => (
95	95	<div
96	96	key={item.id}
97		- className="disco-flex disco-items-center disco-gap-4 disco-my-4"
	97	+ className="disco:flex disco:items-center disco:gap-4 disco:my-4"
98	98	>
99	99	<input
100	100	checked={selected.find((_item) => _item.id === item.id)}
101	101	type="checkbox"
		@@ -101,29 +101,29 @@
101	101	type="checkbox"
102	102	name=""
103	103	id={item.id}
104	104	onChange={() => handleSelect(item)}
105		- className="!disco-hidden"
	105	+ className="disco:hidden!"
106	106	/>
107	107
108	108	<label
109		- className={`disco-text-sm disco-flex disco-items-center disco-gap-3 `}
	109	+ className={`disco:text-sm disco:flex disco:items-center disco:gap-3 `}
110	110	htmlFor={item.id}
111	111	>
112	112	<div
113		- className={`disco-shrink-0 disco-h-4 disco-w-4 disco-rounded disco-border disco-flex disco-justify-center disco-items-center ${
	113	+ className={`disco:shrink-0 disco:h-4 disco:w-4 disco:rounded-sm disco:border disco:flex disco:justify-center disco:items-center ${
114	114	selected.find((_item) => _item.id === item.id)
115		- ? 'disco-border-primary-dark'
116		- : 'disco-border-gray-500 '
	115	+ ? 'disco:border-primary-dark'
	116	+ : 'disco:border-gray-500 '
117	117	}`}
118	118	>
119	119	{selected.find((_item) => _item.id === item.id) && (
120		- <CheckIcon className="disco-text-primary-dark" />
	120	+ <CheckIcon className="disco:text-primary-dark" />
121	121	)}
122	122	</div>
123	123	{item.image && (
124	124	<img
125		- className="disco-shrink-0 disco-rounded disco-h-8 disco-w-8 disco-object-cover"
	125	+ className="disco:shrink-0 disco:rounded disco:h-8 disco:w-8 disco:object-cover"
126	126	src={item.image}
127	127	alt={item.name}
128	128	/>
129	129	)}
		@@ -133,20 +133,20 @@
133	133	));
134	134	}
135	135
136	136	return (
137		- <div ref={dropdownRef} className={`disco-relative ${widthClass}`}>
138		- <div className="disco-relative disco-max-w-md disco-border disco-border-gray-200 disco-rounded-md">
	137	+ <div ref={dropdownRef} className={`disco:relative ${widthClass}`}>
	138	+ <div className="disco:relative disco:max-w-md disco:border disco:border-gray-200 disco:rounded-md">
139	139	<div
140	140	onClick={() => {
141	141	searchRef.current.focus();
142	142	}}
143		- className="disco-flex disco-gap-1.5 disco-flex-wrap disco-items-center !disco-rounded-md disco-px-2 disco-py-1.5 disco-text-sm disco-outline-none"
	143	+ className="disco:flex disco:gap-1.5 disco:flex-wrap disco:items-center disco:rounded-md! disco:px-2 disco:py-1.5 disco:text-sm disco:outline-hidden"
144	144	>
145	145	{selected.length > 0 &&
146	146	selected.map((item) => (
147	147	<div
148		- className="disco-text-xs disco-px-1.5 disco-py-1.5 disco-rounded disco-flex disco-items-center disco-bg-gray-200"
	148	+ className="disco:text-xs disco:px-1.5 disco:py-1.5 disco:rounded disco:flex disco:items-center disco:bg-gray-200"
149	149	key={item.id}
150	150	>
151	151	<span>{`${item.id} - ${item.name}`}</span>
152	152
		@@ -152,9 +152,9 @@
152	152
153	153	<XMarkIcon
154	154	role="button"
155	155	onClick={() => handleRemoveItem(item.id)}
156		- className="disco-ml-1 disco-h-3 disco-w-3 "
	156	+ className="disco:ml-1 disco:h-3 disco:w-3 "
157	157	/>
158	158	</div>
159	159	))}
160	160	<input
		@@ -164,9 +164,9 @@
164	164	}
165	165	}}
166	166	ref={searchRef}
167	167	onChange={handleSearch}
168		- className="!disco-border-none !disco-p-0 !disco-min-h-[0px] !disco-shadow-none"
	168	+ className="disco:border-none! disco:p-0! disco:min-h-0! disco:shadow-none!"
169	169	type="text"
170	170	placeholder={placeHolder}
171	171	/>
172	172	</div>
		@@ -172,11 +172,11 @@
172	172	</div>
173	173	</div>
174	174	{showSearchResult && (
175	175	<div
176		- className={`disco-absolute disco-mt-2 ${widthClass} disco-shadow-lg disco-z-50`}
	176	+ className={`disco:absolute disco:mt-2 ${widthClass} disco:shadow-lg disco:z-50`}
177	177	>
178		- <div className="disco-border disco-border-gray-200 disco-bg-white disco-rounded-md disco-px-4 disco-max-h-96 disco-overflow-y-auto">
	178	+ <div className="disco:border disco:border-gray-200 disco:bg-white disco:rounded-md disco:px-4 disco:max-h-96 disco:overflow-y-auto">
179	179	{content}
180	180	</div>
181	181	</div>
182	182	)}