akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 23:27:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add duplicate list item action

Browse Source
This commit is contained in:
Misode
2021-09-29 01:02:24 +02:00
parent a0b7cb1c81
commit c51acd34e7
5 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/schema/renderHtml.tsx
View File

@@ -145,7 +145,18 @@ const renderHtml: RenderHook = {
[v[index + 1], v[index]] = [v[index], v[index + 1]]
path.model.set(path, v)
}
return <MemoedTreeNode key={cId} path={cPath} schema={children} value={cValue} lang={lang} states={states} ctx={{...ctx, index: (index === 0 ? 1 : 0) + (index === value.length - 1 ? 2 : 0)}}>
const actions: MenuAction[] = [
{
icon: 'duplicate',
label: 'duplicate',
onSelect: () => {
const v = [...path.get()]
v.splice(index, 0, { id: hexId(), node: deepClone(cValue) })
path.model.set(path, v)
},
},
]
return <MemoedTreeNode key={cId} path={cPath} schema={children} value={cValue} {...{lang, states, actions}} ctx={{...ctx, index: (index === 0 ? 1 : 0) + (index === value.length - 1 ? 2 : 0)}}>
{canToggle && <button class="toggle tooltipped tip-se" aria-label={`${locale(lang, 'collapse')}\n${locale(lang, 'collapse_all', 'Ctrl')}`} onClick={collapse(cId)}>{Octicon.chevron_down}</button>}
<button class="remove tooltipped tip-se" aria-label={locale(lang, 'remove')} onClick={onRemove}>{Octicon.trashcan}</button>
{value.length > 1 && <div class="node-move">
@@ -390,6 +401,13 @@ function StringSuffix({ path, getValues, config, node, value, lang, states }: No
}
}
type MenuAction = {
label: string,
description?: string,
icon: keyof typeof Octicon,
onSelect: () => unknown,
}
type TreeNodeProps = {
schema: INode<any>,
path: ModelPath,
@@ -399,9 +417,10 @@ type TreeNodeProps = {
ctx: Record<string, any>,
compare?: any,
label?: string,
actions?: MenuAction[],
children?: ComponentChildren,
}
function TreeNode({ label, schema, path, value, lang, states, ctx, children }: TreeNodeProps) {
function TreeNode({ label, schema, path, value, lang, states, ctx, actions, children }: TreeNodeProps) {
const type = schema.type(path)
const category = schema.category(path)
const context = path.getContext().join('.')
@@ -416,18 +435,21 @@ function TreeNode({ label, schema, path, value, lang, states, ctx, children }: T
delete newCtx.index
const [prefix, suffix, body] = schema.hook(renderHtml, path, value, lang, states, newCtx)
return <div class={`node ${type}-node`} data-category={category}>
<div class="node-header">
<div class="node-header" onContextMenu={onContextMenu}>
<ErrorPopup lang={lang} path={path} />
<HelpPopup lang={lang} path={path} />
{children}
{prefix}
<label onContextMenu={onContextMenu}>
<label>
{label ?? pathLocale(lang, path, `${path.last()}`)}
{active && <div class="node-menu">
{actions?.map(a => <div key={a.label} class="menu-item">
<Btn icon={a.icon} tooltip={locale(lang, a.label)} tooltipLoc="se" onClick={() => a.onSelect()}/>
<span>{a.description ?? locale(lang, a.label)}</span>
</div>)}
<div class="menu-item">
<Btn icon="clippy" tooltip={locale(lang, 'copy_context')} tooltipLoc="se" onClick={() => navigator.clipboard.writeText(context)} />
Context:
<span class="menu-item-context">{context}</span>
<span>{context}</span>
</div>
</div>}
</label>