← All changes | backend/views/components/Main/components/SingleSelect.jsx +24 -23 1.4.11 → 1.4.19 View file →

		@@ -1,8 +1,9 @@
1	1	import { Listbox, Transition } from '@headlessui/react';
2	2	import { ChevronDownIcon } from '@heroicons/react/24/solid';
3	3	import { __ } from '@wordpress/i18n';
4	4	import { Fragment } from 'react';
	5	+import cn from '../utilities/cn';
5	6
6	7	const SingleSelect = ({
7	8	menu = false,
8	9	placeholder = __('Select', 'disco'),
		@@ -11,31 +12,31 @@
11	12	selected,
12	13	disabled = false,
13	14	className = '',
14	15	buttonClass = '',
15		- // Keys of pro-only options: rendered greyed out with a "Pro" badge and not
16		- // selectable. Matches the option styling used by the Conditions filter
17		- // dropdown.
18	16	proItems = [],
19	17	proUrl = 'https://discoplugin.com/pricing/?utm_source=pro-text&utm_medium=free-to-pro&utm_campaign=free-to-pro&utm_id=1',
20	18	}) => {
21	19	return (
22	20	<Listbox
23		- className={`${className} ${disabled ? 'disco-opacity-50' : ''}`}
	21	+ className={`${className} ${disabled ? 'disco:opacity-50' : ''}`}
24	22	disabled={disabled}
25	23	value={selected}
26	24	onChange={!disabled && onchange}
27	25	>
28		- <div className="disco-relative">
	26	+ <div className="disco:relative">
29	27	<Listbox.Button
30		- className={`disco-relative disco-cursor-pointer disco-w-full disco-rounded-md disco-border disco-text-base disco-border-primary disco-py-2 disco-pl-2.5 disco-pr-8 disco-text-left focus:disco-outline-none ${buttonClass}`}
	28	+ className={cn(
	29	+ `disco:relative disco:cursor-pointer disco:w-full disco:rounded-md disco:border disco:text-base! disco:border-primary disco:py-2 disco:pl-2.5 disco:pr-8 disco:text-left disco:focus:outline-hidden`,
	30	+ buttonClass
	31	+ )}
31	32	>
32		- <span className="disco-block disco-truncate">
	33	+ <span className="disco:block disco:truncate">
33	34	{items[selected] || placeholder}
34	35	</span>
35		- <span className="disco-pointer-events-none disco-absolute disco-inset-y-0 disco-right-0 disco-flex disco-items-center disco-pr-0.5">
	36	+ <span className="disco:pointer-events-none disco:absolute disco:inset-y-0 disco:right-0 disco:flex disco:items-center disco:pr-0.5">
36	37	<ChevronDownIcon
37		- className="disco-h-5 disco-w-5 disco-text-primary"
	38	+ className="disco:h-5 disco:w-5 disco:text-primary"
38	39	aria-hidden="true"
39	40	/>
40	41	</span>
41	42	</Listbox.Button>
		@@ -40,13 +41,13 @@
40	41	</span>
41	42	</Listbox.Button>
42	43	<Transition
43	44	as={Fragment}
44		- leave="disco-transition disco-ease-in disco-duration-100"
45		- leaveFrom="disco-opacity-100"
46		- leaveTo="disco-opacity-0"
	45	+ leave="disco:transition disco:ease-in disco:duration-100"
	46	+ leaveFrom="disco:opacity-100"
	47	+ leaveTo="disco:opacity-0"
47	48	>
48		- <Listbox.Options className="disco-z-50 disco-absolute disco-cursor-pointer disco-mt-1.5 disco-max-h-60 disco-w-full disco-overflow-auto disco-rounded-md disco-bg-white disco-text-base disco-shadow-lg disco-ring-1 disco-ring-black disco-ring-opacity-5 focus:disco-outline-none sm:disco-text-sm">
	49	+ <Listbox.Options className="disco:z-50 disco:absolute disco:cursor-pointer disco:mt-1.5 disco:max-h-60 disco:w-full disco:overflow-auto disco:rounded-md disco:bg-white disco:text-base! disco:shadow-lg disco:ring-1 disco:ring-black/5 disco:focus:outline-hidden disco:sm:text-sm!">
49	50	{items &&
50	51	Object.keys(items).map((item) => (
51	52	<Listbox.Option
52	53	key={item}
		@@ -51,15 +52,15 @@
51	52	<Listbox.Option
52	53	key={item}
53	54	disabled={proItems.includes(item)}
54	55	className={({ active }) =>
55		- `disco-relative disco-py-1 disco-pl-4 disco-mb-0 ${
	56	+ `disco:relative disco:py-1 disco:pl-4 disco:mb-0 ${
56	57	proItems.includes(item)
57		- ? '!disco-text-gray-400 !disco-cursor-not-allowed'
58		- : `hover:disco-bg-[#dfffefe6] ${
	58	+ ? 'disco:text-gray-400! disco:cursor-not-allowed!'
	59	+ : `disco:hover:bg-primary-light ${
59	60	active && !menu
60		- ? 'disco-bg-primary-light'
61		- : 'disco-text-gray-900'
	61	+ ? 'disco:bg-primary-light'
	62	+ : 'disco:text-gray-900'
62	63	}`
63	64	}`
64	65	}
65	66	value={item}
		@@ -66,17 +67,17 @@
66	67	>
67	68	{({ selected }) => (
68	69	<>
69	70	<span
70		- className={`disco-block disco-truncate ${
	71	+ className={`disco:block disco:truncate ${
71	72	selected && !menu
72		- ? 'disco-font-medium'
73		- : 'disco-font-normal'
	73	+ ? 'disco:font-medium!'
	74	+ : 'disco:font-normal!'
74	75	}`}
75	76	>
76	77	{items[item]}{' '}
77	78	{proItems.includes(item) && (
78		- <span className="disco-bg-red-500 disco-px-1.5 disco-py-1 disco-text-xs disco-text-white disco-rounded-md">
	79	+ <span className="disco:bg-red-500 disco:px-1.5 disco:py-1 disco:text-xs disco:text-white disco:rounded-md">
79	80	<a
80	81	href={proUrl}
81	82	target="_blank"
82	83	rel="noreferrer"
		@@ -82,9 +83,9 @@
82	83	rel="noreferrer"
83	84	onClick={(e) =>
84	85	e.stopPropagation()
85	86	}
86		- className="disco-text-xs disco-text-white hover:!disco-text-white focus:!disco-outline-none visited:disco-text-white focus:!disco-ring-0"
	87	+ className="disco:text-xs disco:text-white disco:hover:text-white! disco:focus:outline-hidden! disco:visited:text-white disco:focus:ring-0!"
87	88	>
88	89	{__('Pro', 'disco')}
89	90	</a>
90	91	</span>