|
| 1 | +import { KolInputNumber, KolInputText, KolButton, KolInputCheckbox, KolDrawer, KolCard } from '@public-ui/react-v19'; |
| 2 | +import React, { useEffect, useState } from 'react'; |
| 3 | +import { translate } from '@docusaurus/Translate'; |
| 4 | + |
| 5 | +export type TreeItemData = { |
| 6 | + _label: string; |
| 7 | + _href?: string; |
| 8 | + _active?: boolean; |
| 9 | +}; |
| 10 | + |
| 11 | +const TREE_ITEMS_POOL: TreeItemData[] = [ |
| 12 | + { _label: 'Home', _href: '#/', _active: true }, |
| 13 | + { _label: 'Page 1', _href: '#/page-1' }, |
| 14 | + { _label: 'Page 2', _href: '#/page-2' }, |
| 15 | + { _label: 'Page 3', _href: '#/page-3' }, |
| 16 | + { _label: 'Page 4', _href: '#/page-4' }, |
| 17 | + { _label: 'Page 5', _href: '#/page-5' }, |
| 18 | +]; |
| 19 | + |
| 20 | +const TreeItemsProperty = (props: { |
| 21 | + label: string; |
| 22 | + _on?: { |
| 23 | + onInput?: (event: Event, value: unknown) => void; |
| 24 | + }; |
| 25 | +}) => { |
| 26 | + const [isEditing, setIsEditing] = useState(false); |
| 27 | + const [itemCount, setItemCount] = useState(3); |
| 28 | + const [items, setItems] = useState<TreeItemData[]>(TREE_ITEMS_POOL); |
| 29 | + const currentItems = items.slice(0, itemCount); |
| 30 | + |
| 31 | + useEffect(() => { |
| 32 | + props._on?.onInput?.(new Event('input'), currentItems); |
| 33 | + }, [items, itemCount]); |
| 34 | + |
| 35 | + const handleCountChange = (_event: Event, value: unknown) => { |
| 36 | + const count = Math.min(Math.max(Number(value) || 1, 1), items.length); |
| 37 | + setItemCount(count); |
| 38 | + }; |
| 39 | + |
| 40 | + const handleItemChange = (index: number, field: keyof TreeItemData, value: unknown) => { |
| 41 | + const newItems = [...items]; |
| 42 | + if (field === '_active') { |
| 43 | + newItems[index] = { ...newItems[index], [field]: value as boolean }; |
| 44 | + } else { |
| 45 | + newItems[index] = { ...newItems[index], [field]: value as string }; |
| 46 | + } |
| 47 | + setItems(newItems); |
| 48 | + }; |
| 49 | + |
| 50 | + return ( |
| 51 | + <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}> |
| 52 | + <KolInputNumber |
| 53 | + _label={props.label} |
| 54 | + _min={1} |
| 55 | + _max={items.length} |
| 56 | + _value={itemCount} |
| 57 | + _on={{ onInput: handleCountChange }} |
| 58 | + /> |
| 59 | + |
| 60 | + {currentItems.length > 0 && ( |
| 61 | + <KolButton |
| 62 | + _label={translate({ id: 'preview.component.tree.items.edit' })} |
| 63 | + _variant="secondary" |
| 64 | + _on={{ onClick: () => setIsEditing(!isEditing) }} |
| 65 | + /> |
| 66 | + )} |
| 67 | + |
| 68 | + <KolDrawer |
| 69 | + _label={translate({ id: 'preview.component.tree.items.edit' })} |
| 70 | + _open={isEditing} |
| 71 | + _align="right" |
| 72 | + _hasCloser |
| 73 | + _on={{ onClose: () => setIsEditing(false) }} |
| 74 | + > |
| 75 | + <div className="flex flex-col gap-4 py-4"> |
| 76 | + {currentItems.map((item, index) => ( |
| 77 | + <KolCard key={index} _label={`Item ${index + 1}`}> |
| 78 | + <div className="flex flex-col gap-2"> |
| 79 | + <KolInputText |
| 80 | + _label="Label" |
| 81 | + _value={item._label} |
| 82 | + _on={{ |
| 83 | + onInput: (e: Event) => { |
| 84 | + const target = e.target as HTMLInputElement; |
| 85 | + handleItemChange(index, '_label', target.value); |
| 86 | + }, |
| 87 | + }} |
| 88 | + /> |
| 89 | + |
| 90 | + <KolInputText |
| 91 | + _label="URL/Href" |
| 92 | + _value={item._href} |
| 93 | + _on={{ |
| 94 | + onInput: (e: Event) => { |
| 95 | + const target = e.target as HTMLInputElement; |
| 96 | + handleItemChange(index, '_href', target.value); |
| 97 | + }, |
| 98 | + }} |
| 99 | + /> |
| 100 | + |
| 101 | + <KolInputCheckbox |
| 102 | + _label="Active" |
| 103 | + _checked={item._active ?? false} |
| 104 | + _variant="switch" |
| 105 | + _on={{ |
| 106 | + onInput: (_e: Event, checked: unknown) => { |
| 107 | + handleItemChange(index, '_active', !!checked); |
| 108 | + }, |
| 109 | + }} |
| 110 | + /> |
| 111 | + </div> |
| 112 | + </KolCard> |
| 113 | + ))} |
| 114 | + |
| 115 | + <KolButton |
| 116 | + _label={translate({ id: 'preview.component.tree.items.closeedit' })} |
| 117 | + _variant="primary" |
| 118 | + _on={{ onClick: () => setIsEditing(false) }} |
| 119 | + /> |
| 120 | + </div> |
| 121 | + </KolDrawer> |
| 122 | + </div> |
| 123 | + ); |
| 124 | +}; |
| 125 | + |
| 126 | +export default TreeItemsProperty; |
0 commit comments