React-sortable-condition NPM

react-sortable-condition

drag and drop sortable condition

react-sortable-condition

Screenshots

sortablecondition

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): 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

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