mirror of
https://github.com/idanoo/autobrr
synced 2025-07-22 16:29:12 +00:00
refactor(web): update deprecated HeadlessUI v2 components (#1580)
* refactor(web): move away from old headless UI dot notation * refactor(web): refactor `Disclosure` component * refactor(web): rename formik's `Field` to `FormikField` and keep original HeadlessUI component names
This commit is contained in:
martylukyy
GitHub
parent
21a8e27260
commit
7d7bf9ed4c
13 changed files with 185 additions and 176 deletions
|
|
@ -3,7 +3,7 @@
|
|||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { Switch, Field, Label, Description } from "@headlessui/react";
|
||||
import { classNames } from "@utils";
|
||||
|
||||
interface CheckboxProps {
|
||||
|
|
@ -23,7 +23,7 @@ export const Checkbox = ({
|
|||
setValue,
|
||||
disabled
|
||||
}: CheckboxProps) => (
|
||||
<Switch.Group
|
||||
<Field
|
||||
as="div"
|
||||
className={classNames(className ?? "py-2", "flex items-center justify-between")}
|
||||
onClick={(e) => {
|
||||
|
|
@ -34,14 +34,14 @@ export const Checkbox = ({
|
|||
{(label || description) ? (
|
||||
<div className="flex flex-col mr-4">
|
||||
{label ? (
|
||||
<Switch.Label as="p" className="text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white" passive>
|
||||
<Label as="p" className="text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white" passive>
|
||||
{label}
|
||||
</Switch.Label>
|
||||
</Label>
|
||||
) : null}
|
||||
{description ? (
|
||||
<Switch.Description className="text-sm text-gray-500 dark:text-gray-400">
|
||||
<Description className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{description}
|
||||
</Switch.Description>
|
||||
</Description>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
|
@ -81,5 +81,5 @@ export const Checkbox = ({
|
|||
)}
|
||||
</span>
|
||||
</Switch>
|
||||
</Switch.Group>
|
||||
</Field>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
import toast from "react-hot-toast";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
import { Disclosure } from "@headlessui/react";
|
||||
import { Disclosure, DisclosureButton } from "@headlessui/react";
|
||||
import { Bars3Icon, XMarkIcon, MegaphoneIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
import { APIClient } from "@api/APIClient";
|
||||
|
|
@ -60,7 +60,7 @@ export const Header = () => {
|
|||
<RightNav logoutMutation={logoutMutation.mutate} />
|
||||
<div className="-mr-2 flex sm:hidden">
|
||||
{/* Mobile menu button */}
|
||||
<Disclosure.Button className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
|
||||
<DisclosureButton className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
|
||||
<span className="sr-only">Open main menu</span>
|
||||
{open ? (
|
||||
<XMarkIcon
|
||||
|
|
@ -73,7 +73,7 @@ export const Header = () => {
|
|||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
</DisclosureButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import {Link} from "@tanstack/react-router";
|
||||
import { Disclosure } from "@headlessui/react";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { DisclosurePanel } from "@headlessui/react";
|
||||
|
||||
import { classNames } from "@utils";
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ import { NAV_ROUTES } from "./_shared";
|
|||
import type { RightNavProps } from "./_shared";
|
||||
|
||||
export const MobileNav = (props: RightNavProps) => (
|
||||
<Disclosure.Panel className="border-b border-gray-300 dark:border-gray-700 md:hidden">
|
||||
<DisclosurePanel className="border-b border-gray-300 dark:border-gray-700 md:hidden">
|
||||
<div className="px-2 py-3 space-y-1 sm:px-3">
|
||||
{NAV_ROUTES.map((item) => (
|
||||
<Link
|
||||
|
|
@ -48,5 +48,5 @@ export const MobileNav = (props: RightNavProps) => (
|
|||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</DisclosurePanel>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { Fragment } from "react";
|
||||
import { UserIcon } from "@heroicons/react/24/solid";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
|
||||
|
||||
import { classNames } from "@utils";
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ export const RightNav = (props: RightNavProps) => {
|
|||
<Menu as="div" className="ml-2 relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Menu.Button
|
||||
<MenuButton
|
||||
className={classNames(
|
||||
open ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-white" : "hover:text-gray-900 dark:hover:text-white",
|
||||
"text-gray-600 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 px-3 py-2 rounded-2xl text-sm font-medium",
|
||||
|
|
@ -62,7 +62,7 @@ export const RightNav = (props: RightNavProps) => {
|
|||
className="inline ml-1 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
|
|
@ -73,11 +73,11 @@ export const RightNav = (props: RightNavProps) => {
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<MenuItems
|
||||
static
|
||||
className="origin-top-right absolute right-0 mt-2 w-48 z-10 divide-y divide-gray-100 dark:divide-gray-750 rounded-md shadow-lg bg-white dark:bg-gray-800 border border-gray-250 dark:border-gray-775 focus:outline-none"
|
||||
>
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
to="/settings/account"
|
||||
|
|
@ -95,8 +95,8 @@ export const RightNav = (props: RightNavProps) => {
|
|||
Account
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
to="/settings"
|
||||
|
|
@ -114,8 +114,8 @@ export const RightNav = (props: RightNavProps) => {
|
|||
Settings
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
|
|
@ -136,8 +136,8 @@ export const RightNav = (props: RightNavProps) => {
|
|||
Log out
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import { Field } from "formik";
|
||||
import { Field as FormikField } from "formik";
|
||||
import Select from "react-select";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { Field, Label, Description } from "@headlessui/react";
|
||||
import type { FieldProps, FieldValidator } from "formik";
|
||||
|
||||
import { classNames } from "@utils";
|
||||
|
|
@ -55,7 +55,7 @@ export const TextFieldWide = ({
|
|||
</label>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Field
|
||||
<FormikField
|
||||
name={name}
|
||||
value={defaultValue}
|
||||
required={required}
|
||||
|
|
@ -81,7 +81,7 @@ export const TextFieldWide = ({
|
|||
data-1p-ignore
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</FormikField>
|
||||
{help && (
|
||||
<p className="mt-2 text-sm text-gray-500" id={`${name}-description`}>{help}</p>
|
||||
)}
|
||||
|
|
@ -130,7 +130,7 @@ export const PasswordFieldWide = ({
|
|||
</label>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Field
|
||||
<FormikField
|
||||
name={name}
|
||||
defaultValue={defaultValue}
|
||||
validate={validate}
|
||||
|
|
@ -159,7 +159,7 @@ export const PasswordFieldWide = ({
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
</FormikField>
|
||||
{help && (
|
||||
<p className="mt-2 text-sm text-gray-500" id={`${name}-description`}>{help}</p>
|
||||
)}
|
||||
|
|
@ -203,7 +203,7 @@ export const NumberFieldWide = ({
|
|||
</label>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Field
|
||||
<FormikField
|
||||
name={name}
|
||||
defaultValue={defaultValue ?? 0}
|
||||
>
|
||||
|
|
@ -229,7 +229,7 @@ export const NumberFieldWide = ({
|
|||
placeholder={placeholder}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</FormikField>
|
||||
{help && (
|
||||
<p className="mt-2 text-sm text-gray-500 dark:text-gray-500" id={`${name}-description`}>{help}</p>
|
||||
)}
|
||||
|
|
@ -255,23 +255,23 @@ export const SwitchGroupWide = ({
|
|||
defaultValue
|
||||
}: SwitchGroupWideProps) => (
|
||||
<ul className="px-4 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<Switch.Group as="li" className="py-4 flex items-center justify-between">
|
||||
<Field as="li" className="py-4 flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<Switch.Label as="div" passive className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
<Label as="div" passive className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
<div className="flex">
|
||||
{tooltip ? (
|
||||
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
|
||||
) : label}
|
||||
</div>
|
||||
</Switch.Label>
|
||||
</Label>
|
||||
{description && (
|
||||
<Switch.Description className="text-sm text-gray-500 dark:text-gray-700">
|
||||
<Description className="text-sm text-gray-500 dark:text-gray-700">
|
||||
{description}
|
||||
</Switch.Description>
|
||||
</Description>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Field
|
||||
<FormikField
|
||||
name={name}
|
||||
defaultValue={defaultValue as boolean}
|
||||
type="checkbox"
|
||||
|
|
@ -288,8 +288,8 @@ export const SwitchGroupWide = ({
|
|||
}}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</Switch.Group>
|
||||
</FormikField>
|
||||
</Field>
|
||||
</ul>
|
||||
);
|
||||
|
||||
|
|
@ -314,7 +314,7 @@ export const SelectFieldWide = ({
|
|||
</label>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Field name={name} type="select">
|
||||
<FormikField name={name} type="select">
|
||||
{({
|
||||
field,
|
||||
form: { setFieldValue }
|
||||
|
|
@ -352,7 +352,7 @@ export const SelectFieldWide = ({
|
|||
options={options}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</FormikField>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
import { Field, useFormikContext } from "formik";
|
||||
import { RadioGroup } from "@headlessui/react";
|
||||
import { RadioGroup, Description, Label, Radio } from "@headlessui/react";
|
||||
import { classNames } from "@utils";
|
||||
|
||||
export interface radioFieldsetOption {
|
||||
|
|
@ -47,12 +47,12 @@ function RadioFieldsetWide({ name, legend, options }: props) {
|
|||
<Field name={name} type="radio">
|
||||
{() => (
|
||||
<RadioGroup value={values[name]} onChange={onChange}>
|
||||
<RadioGroup.Label className="sr-only">
|
||||
<Label className="sr-only">
|
||||
{legend}
|
||||
</RadioGroup.Label>
|
||||
</Label>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-md -space-y-px">
|
||||
{options.map((setting, settingIdx) => (
|
||||
<RadioGroup.Option
|
||||
<Radio
|
||||
key={setting.value}
|
||||
value={setting.value}
|
||||
className={({ checked }) =>
|
||||
|
|
@ -82,7 +82,7 @@ function RadioFieldsetWide({ name, legend, options }: props) {
|
|||
aria-hidden="true"
|
||||
/>
|
||||
<div className="ml-3 flex flex-col w-full">
|
||||
<RadioGroup.Label
|
||||
<Label
|
||||
as="span"
|
||||
className={classNames(
|
||||
"block text-md text-gray-900 dark:text-gray-300",
|
||||
|
|
@ -93,17 +93,17 @@ function RadioFieldsetWide({ name, legend, options }: props) {
|
|||
{setting.label}
|
||||
{setting.type && <span className="rounded bg-orange-500 text-orange-900 px-1 ml-2 text-sm">{setting.type}</span>}
|
||||
</div>
|
||||
</RadioGroup.Label>
|
||||
<RadioGroup.Description
|
||||
</Label>
|
||||
<Description
|
||||
as="span"
|
||||
className="block text-sm text-gray-700 dark:text-gray-400"
|
||||
>
|
||||
{setting.description}
|
||||
</RadioGroup.Description>
|
||||
</Description>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
</Radio>
|
||||
))}
|
||||
</div>
|
||||
</RadioGroup>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { Fragment } from "react";
|
||||
import { Field, FieldProps } from "formik";
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { Listbox, ListboxButton, Label, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/solid";
|
||||
import { MultiSelect as RMSC } from "react-multi-select-component";
|
||||
|
||||
|
|
@ -166,11 +166,11 @@ export function DownloadClientSelect({
|
|||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Label className="block text-xs font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">
|
||||
<Label className="block text-xs font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">
|
||||
Client
|
||||
</Listbox.Label>
|
||||
</Label>
|
||||
<div className="mt-1 relative">
|
||||
<Listbox.Button className="block w-full shadow-sm sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
|
||||
<ListboxButton className="block w-full shadow-sm sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
|
||||
<span className="block truncate">
|
||||
{field.value
|
||||
? clients.find((c) => c.id === field.value)?.name
|
||||
|
|
@ -181,7 +181,7 @@ export function DownloadClientSelect({
|
|||
className="h-5 w-5 text-gray-400 dark:text-gray-300"
|
||||
aria-hidden="true" />
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
|
|
@ -190,14 +190,14 @@ export function DownloadClientSelect({
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
<ListboxOptions
|
||||
static
|
||||
className="absolute z-10 mt-1 w-full border border-gray-400 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto focus:outline-none sm:text-sm"
|
||||
>
|
||||
{clients
|
||||
.filter((c) => c.type === action.type)
|
||||
.map((client) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
key={client.id}
|
||||
className={({ active }) => classNames(
|
||||
active
|
||||
|
|
@ -232,9 +232,9 @@ export function DownloadClientSelect({
|
|||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
{meta.touched && meta.error && (
|
||||
<p className="error text-sm text-red-600 mt-1">* {meta.error}</p>
|
||||
|
|
@ -294,13 +294,13 @@ export const Select = ({
|
|||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Label className="flex text-xs font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">
|
||||
<Label className="flex text-xs font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">
|
||||
{tooltip ? (
|
||||
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
|
||||
) : label}
|
||||
</Listbox.Label>
|
||||
</Label>
|
||||
<div className="mt-1 relative">
|
||||
<Listbox.Button className="block w-full relative shadow-sm sm:text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
|
||||
<ListboxButton className="block w-full relative shadow-sm sm:text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
|
||||
<span className="block truncate">
|
||||
{field.value
|
||||
? options.find((c) => c.value === field.value)?.label
|
||||
|
|
@ -313,7 +313,7 @@ export const Select = ({
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
|
|
@ -322,12 +322,12 @@ export const Select = ({
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
<ListboxOptions
|
||||
static
|
||||
className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 focus:outline-none sm:text-sm"
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
key={opt.value}
|
||||
className={({ active: hovered, selected }) =>
|
||||
classNames(
|
||||
|
|
@ -359,9 +359,9 @@ export const Select = ({
|
|||
</span>
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -395,11 +395,11 @@ export const SelectWide = ({
|
|||
{({ open }) => (
|
||||
<div className="py-4 flex items-center justify-between">
|
||||
|
||||
<Listbox.Label className="block text-sm font-medium text-gray-900 dark:text-white">
|
||||
<Label className="block text-sm font-medium text-gray-900 dark:text-white">
|
||||
{label}
|
||||
</Listbox.Label>
|
||||
</Label>
|
||||
<div className="w-full">
|
||||
<Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
|
||||
<ListboxButton className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
|
||||
<span className="block truncate">
|
||||
{field.value
|
||||
? options.find((c) => c.value === field.value)?.label
|
||||
|
|
@ -412,7 +412,7 @@ export const SelectWide = ({
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
|
|
@ -421,12 +421,12 @@ export const SelectWide = ({
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
<ListboxOptions
|
||||
static
|
||||
className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
key={opt.value}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
|
|
@ -464,9 +464,9 @@ export const SelectWide = ({
|
|||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -512,14 +512,14 @@ export const AgeSelect = ({
|
|||
{({ open }) => (
|
||||
<>
|
||||
<div className="mt-0 relative">
|
||||
<Listbox.Button className="block w-full relative shadow-sm text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-400">
|
||||
<ListboxButton className="block w-full relative shadow-sm text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-400">
|
||||
<span className="block truncate text-gray-500 dark:text-white">
|
||||
{duration ? options.find(opt => opt.value === duration)?.label : 'Select...'}
|
||||
</span>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<ChevronUpDownIcon className="h-5 w-5 text-gray-700 dark:text-gray-500" aria-hidden="true" />
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
|
|
@ -527,9 +527,9 @@ export const AgeSelect = ({
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-white focus:outline-none text-sm">
|
||||
<ListboxOptions className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-white focus:outline-none text-sm">
|
||||
{options.map((option) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
key={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`relative cursor-default select-none py-2 pl-3 pr-9 ${selected ? "font-bold text-black dark:text-white bg-gray-300 dark:bg-gray-950" : active ? "text-black dark:text-gray-100 font-normal bg-gray-200 dark:bg-gray-800" : "text-gray-700 dark:text-gray-300 font-normal"
|
||||
|
|
@ -547,9 +547,9 @@ export const AgeSelect = ({
|
|||
)}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
*/
|
||||
|
||||
import type { FieldProps } from "formik";
|
||||
import { Field } from "formik";
|
||||
import { Switch as HeadlessSwitch } from "@headlessui/react";
|
||||
import { Field as FormikField } from "formik";
|
||||
import { Field, Label, Description } from "@headlessui/react";
|
||||
|
||||
import { classNames } from "@utils";
|
||||
import { DocsTooltip } from "@components/tooltips/DocsTooltip";
|
||||
|
|
@ -30,7 +30,7 @@ const SwitchGroup = ({
|
|||
disabled,
|
||||
className
|
||||
}: SwitchGroupProps) => (
|
||||
<HeadlessSwitch.Group
|
||||
<Field
|
||||
as="div"
|
||||
className={classNames(
|
||||
className ?? "py-2",
|
||||
|
|
@ -38,7 +38,7 @@ const SwitchGroup = ({
|
|||
)}
|
||||
>
|
||||
{label && <div className="flex flex-col">
|
||||
<HeadlessSwitch.Label
|
||||
<Label
|
||||
passive
|
||||
as={heading ? "h2" : "span"}
|
||||
className={classNames(
|
||||
|
|
@ -51,16 +51,16 @@ const SwitchGroup = ({
|
|||
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
|
||||
) : label}
|
||||
</div>
|
||||
</HeadlessSwitch.Label>
|
||||
</Label>
|
||||
{description && (
|
||||
<HeadlessSwitch.Description as="span" className="text-sm mt-1 pr-4 text-gray-500 dark:text-gray-400">
|
||||
<Description as="span" className="text-sm mt-1 pr-4 text-gray-500 dark:text-gray-400">
|
||||
{description}
|
||||
</HeadlessSwitch.Description>
|
||||
</Description>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
|
||||
<Field name={name} type="checkbox">
|
||||
<FormikField name={name} type="checkbox">
|
||||
{({
|
||||
field,
|
||||
form: { setFieldValue }
|
||||
|
|
@ -75,8 +75,8 @@ const SwitchGroup = ({
|
|||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</HeadlessSwitch.Group>
|
||||
</FormikField>
|
||||
</Field>
|
||||
);
|
||||
|
||||
export { SwitchGroup };
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { Fragment, useEffect, useRef, useState } from "react";
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
|
||||
import { DebounceInput } from "react-debounce-input";
|
||||
import {
|
||||
Cog6ToothIcon,
|
||||
|
|
@ -307,12 +307,12 @@ const LogsDropdown = () => {
|
|||
|
||||
return (
|
||||
<Menu as="div">
|
||||
<Menu.Button className="px-4 py-2">
|
||||
<MenuButton className="px-4 py-2">
|
||||
<Cog6ToothIcon
|
||||
className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
@ -322,11 +322,11 @@ const LogsDropdown = () => {
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<MenuItems
|
||||
className="absolute right-0 mt-1 origin-top-right bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
|
||||
>
|
||||
<div className="p-3">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{() => (
|
||||
<Checkbox
|
||||
label="Scroll to bottom on new message"
|
||||
|
|
@ -334,8 +334,8 @@ const LogsDropdown = () => {
|
|||
setValue={(newValue) => onSetValue("scrollOnNewLog", newValue)}
|
||||
/>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{() => (
|
||||
<Checkbox
|
||||
label="Indent log lines"
|
||||
|
|
@ -344,8 +344,8 @@ const LogsDropdown = () => {
|
|||
setValue={(newValue) => onSetValue("indentLogLines", newValue)}
|
||||
/>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{() => (
|
||||
<Checkbox
|
||||
label="Hide wrapped text"
|
||||
|
|
@ -354,9 +354,9 @@ const LogsDropdown = () => {
|
|||
setValue={(newValue) => onSetValue("hideWrappedText", newValue)}
|
||||
/>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,16 @@
|
|||
import { Dispatch, FC, Fragment, MouseEventHandler, useCallback, useEffect, useReducer, useRef, useState } from "react";
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { toast } from "react-hot-toast";
|
||||
import { Listbox, Menu, Transition } from "@headlessui/react";
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxOption, ListboxOptions,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Transition
|
||||
} from "@headlessui/react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
ArrowsRightLeftIcon,
|
||||
|
|
@ -114,9 +123,9 @@ export function Filters() {
|
|||
<PlusIcon className="h-5 w-5 mr-1" />
|
||||
Create Filter
|
||||
</button>
|
||||
<Menu.Button className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-sm text-sm font-medium rounded-r-md transition text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
|
||||
<MenuButton className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-sm text-sm font-medium rounded-r-md transition text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
|
||||
<ChevronDownIcon className="h-5 w-5" />
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
|
|
@ -127,8 +136,8 @@ export function Filters() {
|
|||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute z-10 right-0 mt-0.5 bg-white dark:bg-gray-700 rounded-md shadow-lg">
|
||||
<Menu.Item>
|
||||
<MenuItems className="absolute z-10 right-0 mt-0.5 bg-white dark:bg-gray-700 rounded-md shadow-lg">
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -142,8 +151,8 @@ export function Filters() {
|
|||
<span>Import filter</span>
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -380,12 +389,12 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
title={`Remove filter: ${filter.name}`}
|
||||
text="Are you sure you want to remove this filter? This action cannot be undone."
|
||||
/>
|
||||
<Menu.Button className="px-4 py-2">
|
||||
<MenuButton className="px-4 py-2">
|
||||
<EllipsisHorizontalIcon
|
||||
className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
@ -395,12 +404,12 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<MenuItems
|
||||
anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2
|
||||
className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
|
||||
>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
// to={filter.id.toString()}
|
||||
|
|
@ -423,8 +432,8 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Edit
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -442,8 +451,8 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Export JSON
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -462,8 +471,8 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Export JSON to Discord
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -482,8 +491,8 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Toggle
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -502,10 +511,10 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Duplicate
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -524,9 +533,9 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Delete
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
|
@ -712,7 +721,7 @@ const ListboxFilter = ({
|
|||
onChange={onChange}
|
||||
>
|
||||
<div className="relative">
|
||||
<Listbox.Button className="relative w-full py-2 pr-4 text-left dark:text-gray-400 text-sm">
|
||||
<ListboxButton className="relative w-full py-2 pr-4 text-left dark:text-gray-400 text-sm">
|
||||
<span className="block truncate">{label}</span>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pointer-events-none">
|
||||
<ChevronDownIcon
|
||||
|
|
@ -720,18 +729,18 @@ const ListboxFilter = ({
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
<ListboxOptions
|
||||
className="w-52 absolute z-10 mt-1 right-0 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-none sm:text-sm"
|
||||
>
|
||||
{children}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
|
|
@ -774,7 +783,7 @@ interface FilterOptionProps {
|
|||
}
|
||||
|
||||
const FilterOption = ({ label, value }: FilterOptionProps) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
className={({ active }) => classNames(
|
||||
"cursor-pointer select-none relative py-2 px-4",
|
||||
active ? "text-black dark:text-gray-200 bg-gray-100 dark:bg-gray-900" : "text-gray-700 dark:text-gray-400"
|
||||
|
|
@ -798,7 +807,7 @@ const FilterOption = ({ label, value }: FilterOptionProps) => (
|
|||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
);
|
||||
|
||||
export const SortSelectFilter = ({ dispatch }: any) => {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import * as React from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
|
||||
import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
import { classNames } from "@utils";
|
||||
|
|
@ -36,7 +36,7 @@ const ListboxFilter = ({
|
|||
onChange={onChange}
|
||||
>
|
||||
<div className="relative mt-1">
|
||||
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-800 rounded-lg shadow-md cursor-pointer dark:text-gray-400 sm:text-sm">
|
||||
<ListboxButton className="relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-800 rounded-lg shadow-md cursor-pointer dark:text-gray-400 sm:text-sm">
|
||||
<span className="block truncate">{label}</span>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<ChevronDownIcon
|
||||
|
|
@ -44,19 +44,19 @@ const ListboxFilter = ({
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
<ListboxOptions
|
||||
className="absolute z-10 w-full mt-1 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<FilterOption label="All" value="" />
|
||||
{children}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
|
|
@ -91,7 +91,7 @@ interface FilterOptionProps {
|
|||
}
|
||||
|
||||
const FilterOption = ({ label, value }: FilterOptionProps) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
className={({ active }) => classNames(
|
||||
"cursor-pointer select-none relative py-2 pl-10 pr-4",
|
||||
active ? "text-black dark:text-gray-200 bg-gray-100 dark:bg-gray-900" : "text-gray-700 dark:text-gray-400"
|
||||
|
|
@ -115,7 +115,7 @@ const FilterOption = ({ label, value }: FilterOptionProps) => (
|
|||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
);
|
||||
|
||||
export const PushStatusSelectColumnFilter = ({
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { Fragment, useMemo, useRef, useState } from "react";
|
||||
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import {
|
||||
ArrowsRightLeftIcon,
|
||||
|
|
@ -302,12 +302,12 @@ const FeedItemDropdown = ({
|
|||
title={`Force run feed: ${feed.name}`}
|
||||
text={`Are you sure you want to force run the ${feed.name} feed? Respecting RSS interval rules is crucial to avoid potential IP bans.`}
|
||||
/>
|
||||
<Menu.Button className="px-4 py-2">
|
||||
<MenuButton className="px-4 py-2">
|
||||
<EllipsisHorizontalIcon
|
||||
className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
@ -317,11 +317,11 @@ const FeedItemDropdown = ({
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<MenuItems
|
||||
className="absolute right-0 w-56 mt-2 origin-top-right bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
|
||||
>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -340,8 +340,8 @@ const FeedItemDropdown = ({
|
|||
Edit
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -360,10 +360,10 @@ const FeedItemDropdown = ({
|
|||
Toggle
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={() => toggleForceRunModal()}
|
||||
|
|
@ -382,8 +382,8 @@ const FeedItemDropdown = ({
|
|||
Force run
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<ExternalLink
|
||||
href={`${baseUrl()}api/feeds/${feed.id}/latest`}
|
||||
className="font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm text-gray-900 dark:text-gray-300 hover:bg-blue-600 hover:text-white"
|
||||
|
|
@ -394,8 +394,8 @@ const FeedItemDropdown = ({
|
|||
/>
|
||||
View latest run
|
||||
</ExternalLink>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -415,10 +415,10 @@ const FeedItemDropdown = ({
|
|||
Clear feed cache
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -437,9 +437,9 @@ const FeedItemDropdown = ({
|
|||
Delete
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
import { Fragment, MouseEvent, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { ArrowPathIcon, LockClosedIcon, LockOpenIcon, PlusIcon } from "@heroicons/react/24/solid";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import {
|
||||
ArrowsPointingInIcon,
|
||||
|
|
@ -462,12 +462,12 @@ const ListItemDropdown = ({
|
|||
title={`Remove network: ${network.name}`}
|
||||
text="Are you sure you want to remove this network? This action cannot be undone."
|
||||
/>
|
||||
<Menu.Button className="px-4 py-2">
|
||||
<MenuButton className="px-4 py-2">
|
||||
<EllipsisHorizontalIcon
|
||||
className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
@ -477,11 +477,11 @@ const ListItemDropdown = ({
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<MenuItems
|
||||
className="absolute right-0 w-56 mt-2 origin-top-right bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
|
||||
>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -500,8 +500,8 @@ const ListItemDropdown = ({
|
|||
Edit
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
{/*<Menu.Item>*/}
|
||||
</MenuItem>
|
||||
{/*<MenuItem>*/}
|
||||
{/* {({ active }) => (*/}
|
||||
{/* <button*/}
|
||||
{/* className={classNames(*/}
|
||||
|
|
@ -520,8 +520,8 @@ const ListItemDropdown = ({
|
|||
{/* {network.enabled ? "Disable" : "Enable"}*/}
|
||||
{/* </button>*/}
|
||||
{/* )}*/}
|
||||
{/*</Menu.Item>*/}
|
||||
<Menu.Item>
|
||||
{/*</MenuItem>*/}
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -546,10 +546,10 @@ const ListItemDropdown = ({
|
|||
Restart
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -568,9 +568,9 @@ const ListItemDropdown = ({
|
|||
Delete
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
|
@ -776,9 +776,9 @@ const IRCLogsDropdown = () => {
|
|||
// at IRCLogsDropdown (http://localhost:3000/src/screens/settings/Irc.tsx?t=1694269937935:1354:53)
|
||||
return (
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
|
||||
<MenuButton className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
|
||||
<span className="flex items-center">Options <Cog6ToothIcon className="ml-1 w-4 h-4" /></span>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
@ -788,10 +788,10 @@ const IRCLogsDropdown = () => {
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<MenuItems
|
||||
className="absolute z-10 right-0 mt-2 px-3 py-2 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-750 focus:outline-none"
|
||||
>
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{() => (
|
||||
<Checkbox
|
||||
label="Scroll to bottom on new message"
|
||||
|
|
@ -799,8 +799,8 @@ const IRCLogsDropdown = () => {
|
|||
setValue={(newValue) => onSetValue("scrollOnNewLog", newValue)}
|
||||
/>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue