README
react-sortable-condition
drag and drop sortable condition
Screenshots
Install
npm install react-sortable-condition --save
Usage
<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" />}
deleteIcon={<Icon type="close-circle" />}
/>
<SortableCondition.Pattern>
<TestPattern />
</SortableCondition.Pattern>
</SortableCondition>
- see real demo in example
- see how to work with react-hooks in useTreeData-example
- see more api in api-chapter
Data Structure
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
}
Rules
- pattern's data no chidlren data
- condition's children at least one
- convert only available with no-siblingitems-node
- cant't delete root node
- drag condition node to all-pattern-children'node will spreed condition's pattern children
- drag pattern node to all-condition-childrn'node will convert pattern node to condition node
- children is always same kinds
API
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 /> or <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 |
Useage | 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 |
Useage | 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>
}
Useage of useTreeData hooks
Params |
Useage | Typo | Defalut |
---|---|---|---|
initialTreeData | initial treedata | DataItem |
Return |
Useage | Typo | Defalut |
---|---|---|---|
treeData | datasouce of <SortableCondition /> |
ConditionTreeData |
|
dispatch | the way of how to change treeData, see dispatch params | React.Dispatch |
Themes
- antd - just import this files