Drag and Drop sortable condition tree
drag and drop sortable condition
npm install react-sortable-condition --save
<SortableCondition
defaultDataSource={data}
onChange={v => console.log('change', v)}
onDragState={v => console.log('drag', v)}
onVisible={v => console.log('visible', v)}
onMoveNode={v => console.log('move', v)}
maxDepth={3}
>
<SortableCondition.Condition
onAdd={() => console.log('add')}
onDelete={() => console.log('delelte')}
addIcon={<Icon type="plus-circle" ></Icon>}
deleteIcon={<Icon type="close-circle" ></Icon>}
/>
<SortableCondition.Pattern>
<TestPattern ></TestPattern>
</SortableCondition.Pattern>
</SortableCondition>
condition data structure
{
type: 'and' | 'or'
expanded: boolean
children: condition-data-structure[] | pattern-data-structure[] | undefined
}
pattern data structure
{
type: 'normal',
expanded: boolean
patterns: any // data for pattern
children: undefined
}
all typo in typings
Props of Sortablecondition
Props |
Usage | Typo | Default |
---|---|---|---|
onDragState | trigger when drag start and end | (value: DragStateData |
|
onMoveNode | trigger when moved node | (value: MoveStateData |
|
onVisible | trigger when expaned node | (value: VisibilityStateData |
|
onChange | trigger by treeData change behaviours | (value: ConditionTreeItem |
|
children | <Condition ></Condition> or <Pattern ></Pattern> |
||
dataSource | set fullcontrol datasource, generate by useTreeData hooks | ConditionTreeItem |
|
defaultDataSource | set un-fullcontrol initial datasource | DataItem |
[] |
maxDepth | set max-depth of sortable-condition | number | 3 |
className | set classname of SortableCondition | string | |
rowHeight | set node rowheight, will overwrite condition and pattern row height | number | 62 |
Props of Sortablecondition.Condition
Props |
Usage | Typo | Default |
---|---|---|---|
onAdd | trigger when add condition node | (node: ConditionItem |
|
onDelete | trigger when delete condition node | (node: ConditionItem |
|
onType | trigger when change condition node type | (node: ConditionItem |
|
onConvert | trigger when convert condition node to pattern node | (node: ConditionItem |
|
className | set classname of Condition | string | |
rowHeight | set condition rowheight | number | 62 |
indent | set width between line and node | number | 44 |
Props of Sortablecondition.Pattern
Props |
Usage | Typo | Default |
---|---|---|---|
onAdd | trigger when add pattern node | (node: PatternItem |
|
onDelete | trigger when delete pattern node | (node: PatternItem |
|
onType | trigger when change pattern node type | (node: PatternItem |
|
onConvert | trigger when convert pattern node to condition node | (node: PatternItem |
|
className | set classname of Pattern | string | |
children | set render pattern in Pattern | React.ReactNode | ‘this is a pattern’ |
rowHeight | set pattern rowheight | number | 62 |
Note: Pattern.children see like below, TestPattern
will get patterns
from treeData
const TestPattern = ({ patterns, onChange }: { patterns?: any; onChange?: Function }) => {
console.log('patterns', patterns)
const handleClick = () => {
console.log('clicked')
if (onChange) {
onChange({ patterns: 2 })
}
}
return <span onClick={handleClick}>1</span>
}
Usage of useTreeData hooks
Params |
Usage | Typo | Defalut |
---|---|---|---|
initialTreeData | initial treedata | DataItem |
Return |
Usage | Typo | Defalut |
---|---|---|---|
treeData | datasouce of <SortableCondition ></SortableCondition> |
ConditionTreeData |
|
dispatch | the way of how to change treeData, see dispatch params) | React.Dispatch |