← All changes | backend/views/components/Main/components/SingleSelect.jsx +44 -18 1.3.54 → 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,26 +12,31 @@
11	12	selected,
12	13	disabled = false,
13	14	className = '',
14	15	buttonClass = '',
	16	+ proItems = [],
	17	+ proUrl = 'https://discoplugin.com/pricing/?utm_source=pro-text&utm_medium=free-to-pro&utm_campaign=free-to-pro&utm_id=1',
15	18	}) => {
16	19	return (
17	20	<Listbox
18		- className={`${className} ${disabled ? 'disco-opacity-50' : ''}`}
	21	+ className={`${className} ${disabled ? 'disco:opacity-50' : ''}`}
19	22	disabled={disabled}
20	23	value={selected}
21	24	onChange={!disabled && onchange}
22	25	>
23		- <div className="disco-relative">
	26	+ <div className="disco:relative">
24	27	<Listbox.Button
25		- 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	+ )}
26	32	>
27		- <span className="disco-block disco-truncate">
	33	+ <span className="disco:block disco:truncate">
28	34	{items[selected] || placeholder}
29	35	</span>
30		- <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">
31	37	<ChevronDownIcon
32		- className="disco-h-5 disco-w-5 disco-text-primary"
	38	+ className="disco:h-5 disco:w-5 disco:text-primary"
33	39	aria-hidden="true"
34	40	/>
35	41	</span>
36	42	</Listbox.Button>
		@@ -35,22 +41,27 @@
35	41	</span>
36	42	</Listbox.Button>
37	43	<Transition
38	44	as={Fragment}
39		- leave="disco-transition disco-ease-in disco-duration-100"
40		- leaveFrom="disco-opacity-100"
41		- leaveTo="disco-opacity-0"
	45	+ leave="disco:transition disco:ease-in disco:duration-100"
	46	+ leaveFrom="disco:opacity-100"
	47	+ leaveTo="disco:opacity-0"
42	48	>
43		- <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!">
44	50	{items &&
45	51	Object.keys(items).map((item) => (
46	52	<Listbox.Option
47	53	key={item}
	54	+ disabled={proItems.includes(item)}
48	55	className={({ active }) =>
49		- `disco-relative disco-py-1 disco-pl-4 disco-mb-0 hover:disco-bg-[#dfffefe6] ${
50		- active && !menu
51		- ? 'disco-bg-primary-light'
52		- : 'disco-text-gray-900'
	56	+ `disco:relative disco:py-1 disco:pl-4 disco:mb-0 ${
	57	+ proItems.includes(item)
	58	+ ? 'disco:text-gray-400! disco:cursor-not-allowed!'
	59	+ : `disco:hover:bg-primary-light ${
	60	+ active && !menu
	61	+ ? 'disco:bg-primary-light'
	62	+ : 'disco:text-gray-900'
	63	+ }`
53	64	}`
54	65	}
55	66	value={item}
56	67	>
		@@ -56,15 +67,30 @@
56	67	>
57	68	{({ selected }) => (
58	69	<>
59	70	<span
60		- className={`disco-block disco-truncate ${
	71	+ className={`disco:block disco:truncate ${
61	72	selected && !menu
62		- ? 'disco-font-medium'
63		- : 'disco-font-normal'
	73	+ ? 'disco:font-medium!'
	74	+ : 'disco:font-normal!'
64	75	}`}
65	76	>
66		- {items[item]}
	77	+ {items[item]}{' '}
	78	+ {proItems.includes(item) && (
	79	+ <span className="disco:bg-red-500 disco:px-1.5 disco:py-1 disco:text-xs disco:text-white disco:rounded-md">
	80	+ <a
	81	+ href={proUrl}
	82	+ target="_blank"
	83	+ rel="noreferrer"
	84	+ onClick={(e) =>
	85	+ e.stopPropagation()
	86	+ }
	87	+ className="disco:text-xs disco:text-white disco:hover:text-white! disco:focus:outline-hidden! disco:visited:text-white disco:focus:ring-0!"
	88	+ >
	89	+ {__('Pro', 'disco')}
	90	+ </a>
	91	+ </span>
	92	+ )}
67	93	</span>
68	94	</>
69	95	)}
70	96	</Listbox.Option>