react-sortable-condition

a sortable condition tree

Usage no npm install needed!

<script type="module">
  import reactSortableCondition from 'https://cdn.skypack.dev/react-sortable-condition';
</script>

README

react-sortable-condition

drag and drop sortable condition

npm NPM

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>

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

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