test view with options menu
This commit is contained in:
parent
29d904cd7c
commit
ef69ea1e3c
5 changed files with 174 additions and 3 deletions
|
@ -10,7 +10,7 @@ import { MenuItem } from '../shared/menu-item.mjs'
|
||||||
export const ns = ['design-options']
|
export const ns = ['design-options']
|
||||||
|
|
||||||
// Emojis for option groups :)
|
// Emojis for option groups :)
|
||||||
const emojis = {
|
export const emojis = {
|
||||||
advanced: '🤓',
|
advanced: '🤓',
|
||||||
fit: '👕',
|
fit: '👕',
|
||||||
style: '💃🏽',
|
style: '💃🏽',
|
||||||
|
|
|
@ -63,8 +63,8 @@ export const MenuItem = ({
|
||||||
passProps = {},
|
passProps = {},
|
||||||
changed,
|
changed,
|
||||||
loadDocs,
|
loadDocs,
|
||||||
Input,
|
Input = () => {},
|
||||||
Value,
|
Value = () => {},
|
||||||
allowOverride = false,
|
allowOverride = false,
|
||||||
allowToggle = false,
|
allowToggle = false,
|
||||||
control = Infinity,
|
control = Infinity,
|
||||||
|
|
48
sites/shared/components/workbench/views/test/index.mjs
Normal file
48
sites/shared/components/workbench/views/test/index.mjs
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { PanZoomPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs'
|
||||||
|
import { TestMenu, ns as menuNs } from './menu.mjs'
|
||||||
|
import { objUpdate } from 'shared/utils.mjs'
|
||||||
|
|
||||||
|
export const ns = []
|
||||||
|
|
||||||
|
export const TestView = ({
|
||||||
|
design,
|
||||||
|
pattern,
|
||||||
|
setView,
|
||||||
|
settings,
|
||||||
|
ui,
|
||||||
|
update,
|
||||||
|
language,
|
||||||
|
account,
|
||||||
|
DynamicDocs,
|
||||||
|
}) => {
|
||||||
|
if (!pattern) return null
|
||||||
|
if (settings.sample) pattern.sample()
|
||||||
|
else pattern.draft()
|
||||||
|
|
||||||
|
const renderProps = pattern.getRenderProps()
|
||||||
|
const patternConfig = pattern.getConfig()
|
||||||
|
return (
|
||||||
|
<div className="flex flex-row">
|
||||||
|
<div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
|
||||||
|
<PanZoomPattern {...{ renderProps }} />
|
||||||
|
</div>
|
||||||
|
<div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
|
||||||
|
<TestMenu
|
||||||
|
{...{
|
||||||
|
design,
|
||||||
|
pattern,
|
||||||
|
patternConfig,
|
||||||
|
settings,
|
||||||
|
ui,
|
||||||
|
update,
|
||||||
|
language,
|
||||||
|
account,
|
||||||
|
DynamicDocs,
|
||||||
|
renderProps,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
45
sites/shared/components/workbench/views/test/menu.mjs
Normal file
45
sites/shared/components/workbench/views/test/menu.mjs
Normal file
|
@ -0,0 +1,45 @@
|
||||||
|
import { TestOptions, ns as optionsNs } from './options.mjs'
|
||||||
|
|
||||||
|
export const ns = [...optionsNs]
|
||||||
|
|
||||||
|
const TestOption = ({ config, settings, control, name, ...rest }) => {
|
||||||
|
return (
|
||||||
|
<MenuItem
|
||||||
|
{...{
|
||||||
|
...rest,
|
||||||
|
changed: settings.sample === name,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TestMenu = ({
|
||||||
|
design,
|
||||||
|
patternConfig,
|
||||||
|
settings,
|
||||||
|
ui,
|
||||||
|
update,
|
||||||
|
language,
|
||||||
|
account,
|
||||||
|
DynamicDocs,
|
||||||
|
inspector = false,
|
||||||
|
renderProps,
|
||||||
|
}) => {
|
||||||
|
const control = account.control
|
||||||
|
const menuProps = {
|
||||||
|
design,
|
||||||
|
patternConfig,
|
||||||
|
settings,
|
||||||
|
update,
|
||||||
|
language,
|
||||||
|
account,
|
||||||
|
DynamicDocs,
|
||||||
|
control,
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="grow mb-12">
|
||||||
|
<TestOptions {...menuProps} />
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
78
sites/shared/components/workbench/views/test/options.mjs
Normal file
78
sites/shared/components/workbench/views/test/options.mjs
Normal file
|
@ -0,0 +1,78 @@
|
||||||
|
import { MenuItem } from 'shared/components/workbench/menus/shared/menu-item.mjs'
|
||||||
|
import { WorkbenchMenu } from 'shared/components/workbench/menus/shared/index.mjs'
|
||||||
|
import {
|
||||||
|
emojis,
|
||||||
|
ns as designMenuNs,
|
||||||
|
} from 'shared/components/workbench/menus/design-options/index.mjs'
|
||||||
|
import { OptionsIcon } from 'shared/components/icons.mjs'
|
||||||
|
import { optionsMenuStructure, optionType } from 'shared/utils.mjs'
|
||||||
|
|
||||||
|
const TestOptionInput = ({ config, changed, name, t, updateFunc }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p>{t(`${name}.d`)}</p>
|
||||||
|
<div className="text-center">
|
||||||
|
<button
|
||||||
|
className={`btn btn-primary`}
|
||||||
|
disabled={changed}
|
||||||
|
onClick={() => updateFunc([name], true)}
|
||||||
|
>
|
||||||
|
{' '}
|
||||||
|
{t('testThisOption')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
const TestOption = ({ name, passProps, ...rest }) => {
|
||||||
|
return (
|
||||||
|
<MenuItem
|
||||||
|
{...{
|
||||||
|
...rest,
|
||||||
|
name,
|
||||||
|
passProps,
|
||||||
|
changed: passProps.settings.sample?.option === name,
|
||||||
|
Input: TestOptionInput,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ns = [...designMenuNs]
|
||||||
|
export const TestOptions = ({
|
||||||
|
design,
|
||||||
|
patternConfig,
|
||||||
|
settings,
|
||||||
|
update,
|
||||||
|
language,
|
||||||
|
account,
|
||||||
|
isFirst = true,
|
||||||
|
DynamicDocs = false,
|
||||||
|
}) => {
|
||||||
|
const menuNs = [`o_${design}`, ...ns]
|
||||||
|
const optionsMenu = optionsMenuStructure(patternConfig.options)
|
||||||
|
const getDocsPath = (option) =>
|
||||||
|
`patterns/${design}/options${option ? '/' + option.toLowerCase() : ''}`
|
||||||
|
return (
|
||||||
|
<WorkbenchMenu
|
||||||
|
{...{
|
||||||
|
config: optionsMenu,
|
||||||
|
control: account.control,
|
||||||
|
DynamicDocs,
|
||||||
|
emojis,
|
||||||
|
getDocsPath,
|
||||||
|
Icon: OptionsIcon,
|
||||||
|
Item: TestOption,
|
||||||
|
isFirst,
|
||||||
|
name: 'design-options:designOptions',
|
||||||
|
language,
|
||||||
|
ns: menuNs,
|
||||||
|
passProps: { settings },
|
||||||
|
updateFunc: (path, value) => {
|
||||||
|
if (value) update.settings(['sample'], { type: 'option', option: path[0] })
|
||||||
|
else update.settings(['sample'])
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue