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