react-sortable-condition
drag and drop sortable condition
Screenshots
Install
npm install react-sortable-condition --save
Usage
<SortableCondition = = = = = => <SortableCondition.Condition = = = = /> <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): void | |
onMoveNode | trigger when moved node | (value: MoveStateData): void | |
onVisible | trigger when expaned node | (value: VisibilityStateData): void | |
onChange | trigger by treeData change behaviours | (value: ConditionTreeItem[]): void | |
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, path: NextPath) => void | |
onDelete | trigger when delete condition node | (node: ConditionItem, path: NextPath) => void | |
onType | trigger when change condition node type | (node: ConditionItem, path: NextPath) => void | |
onConvert | trigger when convert condition node to pattern node | (node: ConditionItem, path: NextPath) => void | |
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, path: NextPath) => void | |
onDelete | trigger when delete pattern node | (node: PatternItem, path: NextPath) => void | |
onType | trigger when change pattern node type | (node: PatternItem, path: NextPath) => void | |
onConvert | trigger when convert pattern node to condition node | (node: PatternItem, path: NextPath) => void | |
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
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