jiangweixian / react-sortable-condition

Drag and Drop sortable condition tree

react-sortable-condition

drag and drop sortable condition

• react-sortable-condition
  • Screenshots
  • Install
  • Usage
  • Data Structure
  • Rules
  • API
  • Themes

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

1. pattern's data no chidlren data
2. condition's children at least one
3. convert only available with no-siblingitems-node
4. cant't delete root node
5. drag condition node to all-pattern-children'node will spreed condition's pattern children
6. drag pattern node to all-condition-childrn'node will convert pattern node to condition node
7. 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	Usage	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	Usage	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

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 />	ConditionTreeData[]
dispatch	the way of how to change treeData, see dispatch params	React.Dispatch

Themes

• antd - just import this files