Use Disclosure component for collapsible service groups, add transition

hide collapse arrow if disabled

dont break layout for icons in group title

no-shadow
pull/1626/head
shamoon 2 years ago
parent 041fae1fb3
commit 714e0a4517

@ -1,14 +1,12 @@
import classNames from "classnames"; import classNames from "classnames";
import { Transition } from '@headlessui/react' import { Disclosure, Transition } from '@headlessui/react';
import { useState } from 'react' import { MdKeyboardArrowDown } from "react-icons/md";
import List from "components/services/list"; import List from "components/services/list";
import ResolvedIcon from "components/resolvedicon"; import ResolvedIcon from "components/resolvedicon";
export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse}) { export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse}) {
const [isShowing, setIsShowing] = useState(true)
return ( return (
<div <div
key={services.name} key={services.name}
@ -18,18 +16,37 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
"flex-1 p-1" "flex-1 p-1"
)} )}
> >
<div className="flex"> <Disclosure defaultOpen>
{/* eslint-disable-next-line no-shadow */} {({ open }) => (
<button type="button" disabled={disableCollapse} onClick={() => setIsShowing((isShowing) => !isShowing)} className="grow select-none items-center"> <>
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
{layout?.icon && {layout?.icon &&
<div className="flex-shrink-0 mr-2 w-7 h-7"> <div className="flex-shrink-0 mr-2 w-7 h-7">
<ResolvedIcon icon={layout.icon} /> <ResolvedIcon icon={layout.icon} />
</div> </div>
} }
<h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2> <h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
</button> <MdKeyboardArrowDown className={classNames(
</div> disableCollapse ? 'hidden' : '',
<Transition show={isShowing}><List group={group} services={services.services} layout={layout} /></Transition> 'transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
open ? 'rotate-180 transform' : ''
)} />
</Disclosure.Button>
<Transition
enter="transition duration-200 ease-out"
enterFrom="transform scale-75 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-75 opacity-0"
>
<Disclosure.Panel>
<List group={group} services={services.services} layout={layout} />
</Disclosure.Panel>
</Transition>
</>
)}
</Disclosure>
</div> </div>
); );
} }

@ -9,6 +9,11 @@ module.exports = {
"./src/components/**/*.{js,ts,jsx,tsx}", "./src/components/**/*.{js,ts,jsx,tsx}",
"./src/widgets/**/*.{js,ts,jsx,tsx}", "./src/widgets/**/*.{js,ts,jsx,tsx}",
], ],
variants: {
extend: {
display: ["group-hover"],
},
},
theme: { theme: {
extend: { extend: {
colors: { colors: {

Loading…
Cancel
Save