pattern and version pickers using headlessUI
This commit is contained in:
Enoch Riese
parent
c1b53465cf
commit
b65635c74c
6 changed files with 56 additions and 141 deletions
|
|
@ -1,47 +1,44 @@
|
|||
import React from 'react'
|
||||
import DesignIcon from 'shared/components/icons/design.js'
|
||||
import Link from 'next/link'
|
||||
import DesignIcon from 'shared/components/icons/design'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import {Picker, PickerLink} from 'shared/components/picker'
|
||||
|
||||
const PatternPicker = ({ app }) => {
|
||||
const { t } = useTranslation(['common'])
|
||||
|
||||
return (
|
||||
<div className="dropdown w-full md:w-auto">
|
||||
<div tabIndex="0" className={`
|
||||
m-0 btn btn-neutral flex flex-row gap-2 btn-outline
|
||||
md:btn-ghost
|
||||
hover:bg-neutral hover:border-neutral-content
|
||||
`}>
|
||||
<DesignIcon />
|
||||
<span>{t('designs')}</span>
|
||||
</div>
|
||||
<ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 overflow-y-scroll navdrop">
|
||||
{Object.keys(app.navigation).map(section => (
|
||||
<React.Fragment key={section}>
|
||||
const pickerProps = {
|
||||
Icon: DesignIcon,
|
||||
title: t('designs'),
|
||||
className: 'overflow-y-scroll navdrop'
|
||||
}
|
||||
|
||||
return (<Picker {...pickerProps}>
|
||||
{Object.keys(app.navigation).map(section => {
|
||||
const sectionProps = {
|
||||
selectedItem: t(app.navigation[section].__title),
|
||||
isStatic: true
|
||||
}
|
||||
const sectionTitle = t(app.navigation[section].__title);
|
||||
{return (<React.Fragment key={section}>
|
||||
<li className={`
|
||||
capitalize font-bold text-base-content text-center
|
||||
opacity-50 border-b2 my-2 border-base-content
|
||||
`}>
|
||||
{t(app.navigation[section].__title)}
|
||||
`} {...sectionProps}>
|
||||
{sectionTitle}
|
||||
</li>
|
||||
{Object.keys(app.navigation[section]).filter((p)=>!p.startsWith('__')).map(pattern => {
|
||||
return (
|
||||
<li key={pattern}>
|
||||
<Link href={app.navigation[section][pattern].__slug}>
|
||||
<button className="btn btn-ghost">
|
||||
<span className="text-base-content">
|
||||
{app.navigation[section][pattern].__title}
|
||||
</span>
|
||||
</button>
|
||||
</Link>
|
||||
</li>
|
||||
)})}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
const patternProps = {
|
||||
href: app.navigation[section][pattern].__slug,
|
||||
key: pattern
|
||||
}
|
||||
|
||||
return (<PickerLink {...patternProps} >
|
||||
<span className="sr-only">{sectionTitle}</span> {app.navigation[section][pattern].__title}
|
||||
</PickerLink>)
|
||||
})}
|
||||
</React.Fragment>)}
|
||||
})}
|
||||
</Picker>)
|
||||
}
|
||||
|
||||
export default PatternPicker
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React from 'react'
|
||||
import VersionsIcon from 'shared/components/icons/versions.js'
|
||||
import Link from 'next/link'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import versions from 'site/versions.json'
|
||||
import useVersion from 'site/hooks/useVersion.js'
|
||||
import {Picker, PickerLink} from 'shared/components/picker'
|
||||
|
||||
export const defaultVersion = 'next'
|
||||
|
||||
|
|
@ -23,31 +23,16 @@ const PatternPicker = ({ app }) => {
|
|||
const { t } = useTranslation(['common'])
|
||||
const version = useVersion()
|
||||
|
||||
return (
|
||||
<div className="dropdown w-full md:w-auto">
|
||||
<div tabIndex="0" className={`
|
||||
m-0 btn btn-neutral flex flex-row gap-2 btn-outline
|
||||
md:btn-ghost
|
||||
hover:bg-neutral hover:border-neutral-content
|
||||
`}>
|
||||
<VersionsIcon />
|
||||
<span>{formatVersionTitle(version)}</span>
|
||||
</div>
|
||||
<ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 overflow-y-scroll navdrop">
|
||||
const pickerProps = {
|
||||
title: formatVersionTitle(version),
|
||||
Icon: VersionsIcon
|
||||
}
|
||||
|
||||
return (<Picker {...pickerProps}>
|
||||
{[defaultVersion, ...versions].map(v => (
|
||||
<li key={v}>
|
||||
<Link href={formatVersionUri(v)}>
|
||||
<button className="btn btn-ghost">
|
||||
<span className="text-base-content captialize">
|
||||
{formatVersionTitle(v)}
|
||||
</span>
|
||||
</button>
|
||||
</Link>
|
||||
</li>
|
||||
<PickerLink key={v} href={formatVersionUri(v)}>{formatVersionTitle(v)}</PickerLink>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
</Picker>)
|
||||
}
|
||||
|
||||
export default PatternPicker
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@ import themes from 'shared/themes/index.js'
|
|||
import LocaleIcon from 'shared/components/icons/i18n.js'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Link from 'next/link'
|
||||
import Picker, {PickerLink} from './picker';
|
||||
import { Menu } from '@headlessui/react'
|
||||
import {Picker, PickerLink} from './picker';
|
||||
|
||||
const LocalePicker = ({ app, iconOnly=false }) => {
|
||||
const { t } = useTranslation(['locales'])
|
||||
|
|
@ -13,7 +11,7 @@ const LocalePicker = ({ app, iconOnly=false }) => {
|
|||
const pickerProps = {
|
||||
iconOnly,
|
||||
Icon: LocaleIcon,
|
||||
selectedItem: t(router.locale)
|
||||
title: t(router.locale)
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -28,34 +26,6 @@ const LocalePicker = ({ app, iconOnly=false }) => {
|
|||
))}
|
||||
</Picker>
|
||||
)
|
||||
|
||||
// return (
|
||||
// <div className="dropdown dropdown-end w-auto">
|
||||
// <div tabIndex="0" className={ iconOnly
|
||||
// ? 'btn btn-sm'
|
||||
// : `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
|
||||
// md:btn-ghost
|
||||
// hover:bg-neutral hover:border-neutral-content
|
||||
// `
|
||||
// }>
|
||||
// <LocaleIcon />
|
||||
// {!iconOnly && <span>{t(router.locale)}</span>}
|
||||
// </div>
|
||||
// <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
|
||||
// {router.locales.map(locale => (
|
||||
// <li key={locale}>
|
||||
// <Link href={router.asPath} locale={locale}>
|
||||
// <a className="btn btn-ghost text-base-content hover:bg-base-200">
|
||||
// <span className="text-base-content">
|
||||
// {t(locale)}
|
||||
// </span>
|
||||
// </a>
|
||||
// </Link>
|
||||
// </li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// </div>
|
||||
// )
|
||||
}
|
||||
|
||||
export default LocalePicker
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ import {useRef, forwardRef} from 'react'
|
|||
import { Menu } from '@headlessui/react'
|
||||
import Link from 'next/link'
|
||||
|
||||
const Picker = ({Icon, className, selectedItem, iconOnly=false, children}) => {
|
||||
export const Picker = ({Icon, className, title, iconOnly=false, children, isStatic=false}) => {
|
||||
|
||||
return (<Menu as="div" className={`dropdown dropdown-end ${className} w-auto`}>
|
||||
return (<Menu as="div" className={`dropdown dropdown-end w-auto`}>
|
||||
<Menu.Button className={iconOnly
|
||||
? `btn btn-sm`
|
||||
: `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
|
||||
|
|
@ -13,16 +13,14 @@ const Picker = ({Icon, className, selectedItem, iconOnly=false, children}) => {
|
|||
`}
|
||||
aria-label="Choose Theme">
|
||||
<Icon />
|
||||
{!iconOnly && <span>{selectedItem}</span>}
|
||||
{!iconOnly && <span>{title}</span>}
|
||||
</Menu.Button>
|
||||
<Menu.Items as="ul" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
|
||||
<Menu.Items as="ul" className={`p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 ${className}`} static={isStatic}>
|
||||
{children}
|
||||
</Menu.Items>
|
||||
</Menu>)
|
||||
}
|
||||
|
||||
export default Picker
|
||||
|
||||
const itemClass = (active) => "btn btn-ghost " + (active ? 'bg-base-200' : '')
|
||||
|
||||
export const PickerLink = (props) => {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import themes from 'shared/themes/index.js'
|
||||
import ThemeIcon from 'shared/components/icons/theme.js'
|
||||
import {useRef} from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Picker, {PickerButton} from './picker';
|
||||
import {Picker, PickerButton} from './picker';
|
||||
import { Menu } from '@headlessui/react'
|
||||
|
||||
const ThemePicker = ({ app, className, iconOnly=false }) => {
|
||||
|
|
@ -17,7 +16,7 @@ const ThemePicker = ({ app, className, iconOnly=false }) => {
|
|||
className,
|
||||
iconOnly,
|
||||
Icon: ThemeIcon,
|
||||
selectedItem: t(`${app.theme}Theme`)
|
||||
title: t(`${app.theme}Theme`)
|
||||
}
|
||||
return (<Picker {...pickerProps}>
|
||||
{Object.keys(themes).map(theme => (
|
||||
|
|
@ -27,41 +26,6 @@ const ThemePicker = ({ app, className, iconOnly=false }) => {
|
|||
</PickerButton>
|
||||
))}
|
||||
</Picker>)
|
||||
|
||||
|
||||
|
||||
// return (
|
||||
// <div className={`dropdown dropdown-end ${className} w-auto`}>
|
||||
// <div tabIndex="0" className={iconOnly
|
||||
// ? `btn btn-sm`
|
||||
// : `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
|
||||
// md:btn-ghost
|
||||
// hover:bg-neutral hover:border-neutral-content
|
||||
// `}
|
||||
// >
|
||||
// <ThemeIcon />
|
||||
// {!iconOnly && <span>{t(`${app.theme}Theme`)}</span>}
|
||||
// </div>
|
||||
// <ul
|
||||
// tabIndex="0"
|
||||
// className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52"
|
||||
// >
|
||||
// {Object.keys(themes).map(theme => (
|
||||
// <li key={theme}>
|
||||
// <button
|
||||
// onClick={() => app.setTheme(theme)}
|
||||
// className="btn btn-ghost hover:bg-base-200"
|
||||
// >
|
||||
// <span className="text-base-content">
|
||||
// {t(`${theme}Theme`)}
|
||||
// </span>
|
||||
// </button>
|
||||
// </li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// </div>
|
||||
// )
|
||||
// return null;
|
||||
}
|
||||
|
||||
export default ThemePicker
|
||||
|
|
|
|||
|
|
@ -57,10 +57,11 @@ const WorkbenchWrapper = ({ app, design, preload=false, from=false, layout=false
|
|||
// If we don't have the required measurements,
|
||||
// force view to measurements
|
||||
useEffect(() => {
|
||||
if (!gistReady) return
|
||||
if (gistReady && gist._state?.view !== 'measurements'
|
||||
&& !hasRequiredMeasurements
|
||||
) updateGist(['_state', 'view'], 'measurements')
|
||||
}, [gistReady, gist._state.view, hasRequiredMeasurements])
|
||||
}, [gistReady, gist._state?.view, hasRequiredMeasurements])
|
||||
|
||||
// If we need to preload the gist, do so
|
||||
useEffect(() => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue