uxcore-tree-select - npm Package Compare versions

Comparing version 0.4.21 to 0.4.22

build/Select.js

@@ -794,2 +794,3 @@ 'use strict';
   onSearch: noop,
+  onAllClear: noop,
   showArrow: true,
@@ -837,2 +838,3 @@ dropdownMatchSelectWidth: true,
     _this7.fireChange([]);
+    props.onAllClear();
   };
@@ -839,0 +841,0 @@

demo/TreeSelectDemo.js

@@ -45,2 +45,13 @@ /**
 
+const setArrayChildren = (arr, children, value) => {
+  arr.forEach((item) => {
+    if (item.value === value) {
+      item.children = children;
+    } else if (item.children && item.children.length) {
+      item.children = setArrayChildren(item.children, children, value);
+    }
+  });
+  return arr;
+};
+
 class Demo extends React.Component {
@@ -54,2 +65,3 @@ constructor(props) {
       multipleValue: [],
+      treeCheckStrictlyValue: ['0-0-0-value'],
       simpleTreeData: [
@@ -66,2 +78,20 @@ { key: 1, pId: 0, label: 'test1', value: '1' },
       },
+      asyncTreeData: [
+        {
+          label: 'label-1',
+          value: 'asdc1'
+        },
+        {
+          label: 'label-2',
+          value: 'asdc2'
+        },
+        {
+          label: 'label-3',
+          value: 'asdc3'
+        }
+      ],
+      asyncTreeValue: [
+        { label: 'label-1', value: 'asdc1' },
+        { label: 'label-4', value: 'asdc4' },
+      ]
     };
@@ -84,5 +114,8 @@ }
   }
+  onAllClear() {
+    console.log('onAllClear');
+  }
   onChange(value) {
-    console.log('onChange', arguments);
-    this.setState({ value });
+    console.log('onChange', value);
+    // this.setState({ value });
   }
@@ -93,5 +126,4 @@ onMultipleChange(value) {
   }
-  onSelect() {
-    // use onChange instead
-    console.log('onselect', arguments);
+  onSelect(value) {
+    console.log('onselect', value);
   }
@@ -102,2 +134,20 @@ filterTreeNode(input, child) {
   }
+  loadData = (node) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const asyncTreeData = setArrayChildren(
+          [...this.state.asyncTreeData],
+          [
+            {
+              label: 'label-x-1',
+              value: 'asdc4'
+            }
+          ],
+          node.props.value
+        );
+        this.setState({ asyncTreeData });
+        resolve();
+      }, 2000);
+    });
+  }
   render() {
@@ -139,3 +189,3 @@ return (
           // labelInValue={true}
-          treeCheckable={true}
+          // treeCheckable={true}
         />
@@ -177,3 +227,3 @@ <h2>multiple middle select</h2>
           locale="en-us"
-          labelInValue={true}
+          // labelInValue={true}
           treeCheckable={true}
@@ -215,3 +265,3 @@ />
           treeCheckStrictly
-          value={this.state.value}
+          value={this.state.treeCheckStrictlyValue}
           treeData={gData}
@@ -301,15 +351,12 @@ treeNodeFilterProp="label"
           searchPlaceholder="please search"
-          maxTagTextLength={10}
-          value={this.state.value}
-          treeData={this.state.simpleTreeData}
-          treeNodeFilterProp="title"
-          treeDataSimpleMode={this.state.treeDataSimpleMode}
-          // treeCheckable
-          // showCheckedStrategy={SHOW_PARENT}
-          onChange={this.onChange.bind(this)}
+          value={this.state.asyncTreeValue}
+          treeData={this.state.asyncTreeData}
+          onChange={(value) => {
+            this.setState({ asyncTreeValue: value })
+          }}
           onSelect={this.onSelect.bind(this)}
-          loadData={node => {
-            console.log(node);
-            return Promise.resolve();
-          }}
+          loadData={this.loadData}
+          onAllClear={this.onAllClear}
+          multiple
+          labelInValue
         />
@@ -316,0 +363,0 @@ </div>

package.json

 {
   "name": "uxcore-tree-select",
-  "version": "0.4.21",
+  "version": "0.4.22",
   "description": "uxcore-tree-select component for uxcore.",
@@ -5,0 +5,0 @@ "repository": "https://github.com/uxcore/uxcore-tree-select.git",

README.md

@@ -72,2 +72,3 @@ ## uxcore-tree-select
 |onSearch | called when input changed | function | - |
+|onAllClear | called when click all clear | function | - |
 |showCheckedStrategy | `TreeSelect.SHOW_ALL`: show all checked treeNodes (Include parent treeNode). `TreeSelect.SHOW_PARENT`: show checked treeNodes (Just show parent treeNode). Default just show child. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
@@ -74,0 +75,0 @@ |treeIcon | show tree icon | bool | false |

src/Select.jsx

@@ -89,2 +89,3 @@ // customized rc-tree-select  https://github.com/react-component/tree-select/blob/master/src/Select.jsx
     onSearch: noop,
+    onAllClear: noop,
     showArrow: true,
@@ -240,2 +241,3 @@ dropdownMatchSelectWidth: true,
     this.fireChange([]);
+    props.onAllClear();
   }
@@ -242,0 +244,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

229990

0.53%

Lines of code

4704

1.07%

Number of lines in readme file

102

0.99%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes