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

react-sortable-condition's Issues

拖动无法保持state

拖动之后state无法保持。

解决办法是将数据保持在treeData上，拖动之后重新恢复

之前 #2 可能随时有一些误解了。

拖拽and or 节点会展开内部数据

custom

• icon sets
• maxdepth

maxDepth失效

人为的操作treeData会导致maxDepth限制失效。

treedata context

好像吧treeData放在context好像合适一点。

这样有些交互就变得容易一点。因为有全局的treedata 数据了。

ROADMAP

TODO

• - add searchmethod

v1.0.1

增加context使用方式。修复相关问题

v1.0.0

默认只有一个组件导出使用。不再支持babel-plugin-import。

v.0.2.2

• 增加antd-style ui part
• 支持设置rowheight和node和line间距

减少代码量

有些类似添加减少节点的。可以使用同一个函数，需要对andor normal区分

remove getnodeatpath

因为我们可以直接拿到noed from props。所以好像并不是很需要重新获取一遍。 - #29

TODO

• - 修复目前的fullcontrol mode - #42

icon的优化

• 是否可以在不可点击的时候不显示add icon。其他方式类同
• configs是否可以是哪个context进行配置

props传递

传递props到react-sortable-condition

节点转换

在以下情况下可以转换

1. 转换之后节点需要和兄弟节点相同类型。

拖拽normal节点和andor节点同级别会创建一个andor节点

• 是否会影响state

现在fullcontrol mode不太合理

写的比较早。

实践中发现目前treedata通过外部控制的方式实现方式不太合理。

• - 得找个时间修一下

typo

• config on condtion and pattern

style

1. same default style
2. btn same as default, to right
3. hover will visiable btns

点击创建或者删除节点。

如何在点击的时候拿到nodepath很重要。 - 其实时会调用(props: NodeData) => title。所以可以拿到这部分数数据。