← All changes | backend/views/components/Analytics/components/ui-blocks/DataTable.jsx +24 -24 1.4.5 → 1.4.19 View file →

		@@ -6,9 +6,9 @@
6	6	import ProLockOverlay from './ProLockOverlay';
7	7	import TableFooterWithPagination from './TableFooterWithPagination';
8	8
9	9	const SortIcon = ({ active, dir }) => (
10		- <span className="disco-ml-0.5 disco-text-[10px]">
	10	+ <span className="disco:ml-0.5 disco:text-[10px]">
11	11	{active ? (dir === 'asc' ? '↑' : '↓') : '↕'}
12	12	</span>
13	13	);
14	14
		@@ -28,9 +28,9 @@
28	28	totalPages = 1,
29	29	onPageChange,
30	30	isLoading = false,
31	31	rowKey = 'id',
32		- cellPadding = 'disco-px-4',
	32	+ cellPadding = 'disco:px-4',
33	33	className = '',
34	34	locked = false,
35	35	visibleRows = 2,
36	36	lockOverlay,
		@@ -38,12 +38,12 @@
38	38	const overlayProps = lockOverlay ?? {
39	39	size: 'lg',
40	40	label: __('Upgrade to pro', 'disco'),
41	41	titleClassName:
42		- 'disco-max-w-md disco-text-base disco-font-normal disco-text-[#111827] disco-leading-snug',
	42	+ 'disco:max-w-md disco:text-base disco:font-normal disco:text-[#111827] disco:leading-snug',
43	43	title: (
44	44	<>
45		- <strong className="disco-font-semibold">
	45	+ <strong className="disco:font-semibold">
46	46	{__('Upgrade to Disco Pro', 'disco')}
47	47	</strong>{' '}
48	48	{__(
49	49	"to see which products respond best to discounts — and which ones you're over-discounting.",
		@@ -78,27 +78,27 @@
78	78
79	79	return (
80	80	<div
81	81	className={cn(
82		- `disco-bg-white disco-rounded-xl disco-border disco-border-[#e5e7eb] disco-overflow-hidden ${className}`
	82	+ `disco:bg-white disco:rounded-xl disco:border disco:border-[#e5e7eb] disco:overflow-hidden ${className}`
83	83	)}
84	84	>
85	85	{/* Toolbar */}
86		- <div className="disco-flex disco-items-center disco-justify-between disco-px-4 disco-py-3 disco-border-b disco-border-[#f3f4f6]">
87		- <span className="disco-text-sm disco-font-semibold disco-text-[#1f2937]">
	86	+ <div className="disco:flex disco:items-center disco:justify-between disco:px-4 disco:py-3 disco:border-b disco:border-[#f3f4f6]">
	87	+ <span className="disco:text-sm disco:font-semibold disco:text-[#1f2937]">
88	88	{__(title)}
89		- <span className="disco-text-[#9ca3af] disco-font-normal disco-text-xs">
	89	+ <span className="disco:text-[#9ca3af] disco:font-normal disco:text-xs">
90	90	({total})
91	91	</span>
92	92	</span>
93		- <div className="disco-relative">
94		- <Search className="disco-absolute disco-left-2.5 disco-top-1/2 disco--translate-y-1/2 disco-size-3 disco-text-[#9ca3af]" />
	93	+ <div className="disco:relative">
	94	+ <Search className="disco:absolute disco:left-2.5 disco:top-1/2 disco:-translate-y-1/2 disco:size-3 disco:text-[#9ca3af]" />
95	95	<input
96	96	type="text"
97	97	placeholder={searchPlaceholder}
98	98	value={search}
99	99	onChange={(e) => onSearchChange(e.target.value)}
100		- className="!disco-pl-7 disco-pr-3 disco-py-1.5 disco-text-xs disco-border !disco-border-gray-300 !disco-rounded-lg disco-bg-gray-100 disco-text-gray-500 placeholder:disco-text-gray-400 !disco-outline-none focus:!disco-border-primary disco-w-44 focus:!disco-shadow-none"
	100	+ className={`disco:pl-7! disco:pr-3! disco:py-1.5! disco:text-xs! disco:border disco:border-gray-300! disco:rounded-lg! disco:bg-gray-100! disco:text-gray-500! disco:placeholder:text-gray-400 disco:outline-hidden! disco:focus:border-primary! disco:w-44 disco:focus:shadow-none! ${locked && 'disco:cursor-not-allowed'}`}
101	101	disabled={locked}
102	102	/>
103	103	</div>
104	104	</div>
		@@ -105,9 +105,9 @@
105	105
106	106	{/* Table */}
107	107	<div
108	108	ref={tableWrapRef}
109		- className="disco-relative disco-overflow-x-auto"
	109	+ className="disco:relative disco:overflow-x-auto"
110	110	style={
111	111	showLock && overlayTop !== null
112	112	? { minHeight: overlayTop + 200 }
113	113	: undefined
		@@ -115,11 +115,11 @@
115	115	>
116	116	{showLock && overlayTop !== null && (
117	117	<ProLockOverlay
118	118	{...overlayProps}
119		- position="disco-inset-x-0 disco-bottom-0"
120		- rounded="disco-rounded-none"
121		- className="disco-bg-white/[0.94]"
	119	+ position="disco:inset-x-0 disco:bottom-0"
	120	+ rounded="disco:rounded-none"
	121	+ className="disco:bg-white/94"
122	122	style={{ top: overlayTop }}
123	123	/>
124	124	)}
125	125	{data.length === 0 && !isLoading ? (
		@@ -124,11 +124,11 @@
124	124	)}
125	125	{data.length === 0 && !isLoading ? (
126	126	<EmptyData title={title.split(' ').at(-1)} />
127	127	) : (
128		- <table className="disco-w-full disco-text-xs">
	128	+ <table className="disco:w-full disco:text-xs">
129	129	<thead>
130		- <tr className="disco-bg-[#f9fafb] disco-border-b disco-border-[#f3f4f6]">
	130	+ <tr className="disco:bg-[#f9fafb] disco:border-b disco:border-[#f3f4f6]">
131	131	{columns.map((col) => (
132	132	<th
133	133	key={col.key}
134	134	onClick={() =>
		@@ -137,14 +137,14 @@
137	137	onSort(col.key)
138	138	}
139	139	className={cn(
140	140	cellPadding,
141		- 'disco-py-2.5 disco-text-left disco-font-semibold disco-tracking-[0.06em] disco-uppercase disco-text-[10px] disco-whitespace-nowrap',
	141	+ 'disco:py-2.5 disco:text-left disco:font-semibold disco:tracking-[0.06em] disco:uppercase disco:text-[10px] disco:whitespace-nowrap',
142	142	col.sortable &&
143		- 'disco-cursor-pointer disco-select-none',
	143	+ 'disco:cursor-pointer disco:select-none',
144	144	sortKey === col.key
145		- ? 'disco-text-[#2fa86d]'
146		- : 'disco-text-[#9ca3af]'
	145	+ ? 'disco:text-[#2fa86d]'
	146	+ : 'disco:text-[#9ca3af]'
147	147	)}
148	148	>
149	149	{col.label}
150	150	{col.sortable && (
		@@ -161,18 +161,18 @@
161	161	{isLoading
162	162	? Array.from({ length: 5 }).map((_, i) => (
163	163	<tr
164	164	key={i}
165		- className="disco-border-b disco-border-[#f3f4f6] last:disco-border-0"
	165	+ className="disco:border-b disco:border-[#f3f4f6] disco:last:border-0"
166	166	>
167	167	<td
168	168	colSpan={columns.length}
169	169	className={cn(
170	170	cellPadding,
171		- 'disco-py-3'
	171	+ 'disco:py-3'
172	172	)}
173	173	>
174		- <div className="disco-h-5 disco-animate-pulse disco-rounded disco-bg-[#f3f4f6]" />
	174	+ <div className="disco:h-5 disco:animate-pulse disco:rounded disco:bg-[#f3f4f6]" />
175	175	</td>
176	176	</tr>
177	177	))
178	178	: data.map((item, index) =>