Label adjustments

.eslintignore

@@ -1 +1,2 @@
-docs/**/bundle.js
+docs/**/bundle.js
+/**/*.d.ts

docs/src/stories/DefaultValues/index.js

@@ -1,13 +1,13 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import DropdownTreeSelect from '../../../../src'
 import '../../../../dist/styles.css'
 
 import './index.css'
 import data from './data.json'
 
-const onChange = (curNode, selectedNodes) => {
-  console.log('onChange::', curNode, selectedNodes)
+const onChange = (curNode, selectedNodes, all) => {
+  console.log('onChange::', curNode, selectedNodes, all)
 }
 const onAction = (node, action) => {
   console.log('onAction::', action, node)
@@ -16,15 +16,43 @@ const onNodeToggle = curNode => {
   console.log('onNodeToggle::', curNode)
 }
 
-const Simple = () => (
-  <div>
-    <h1>Component with Default Values</h1>
-    <p>
-      Default Values get applied when there is no other user based selection. User can select more values and unselect
-      default values as long as there is at least one user-selected value still present.
-    </p>
-    <DropdownTreeSelect data={data} onChange={onChange} onAction={onAction} onNodeToggle={onNodeToggle} />
-  </div>
-)
+const ref = React.createRef()
+
+const runChange = () => {
+  const arr = Array.from(ref.current.state.tree.values())
+  // ref.current.treeManager.setNodeCheckedState(arr[0]._id, true)
+
+  // let tags = ref.current.treeManager.tags
+
+  ref.current.onTagRemove(arr[0]._id)
+}
+
+const Simple = () => {
+  // const [selected, setSelected] = useState(['iway'])
+
+  // setTimeout(() => {
+  //   setSelected(['marmara-university'])
+  //   console.log('SHOULD UPDATE', selected)
+  // }, 5000)
+
+  // console.log(ref.treeManager.setNodeCheckedState(, checked))
+
+  // if (ref.current) {
+  //   const arr = Array.from(ref.current.state.tree.values())
+  //   ref.current.treeManager.setNodeCheckedState(arr[0]._id, true)
+  // }
+  setTimeout(runChange, 5000)
+
+  return (
+    <div>
+      <h1>Component with Default Values</h1>
+      <p>
+        Default Values get applied when there is no other user based selection. User can select more values and unselect
+        default values as long as there is at least one user-selected value still present.
+      </p>
+      <DropdownTreeSelect ref={ref} data={data} onChange={onChange} onAction={onAction} onNodeToggle={onNodeToggle} />
+    </div>
+  )
+}
 
 export default Simple

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-dropdown-tree-select",
-  "version": "0.0.0-semantic-release",
+  "name": "@sm2dev/react-dropdown-tree-select",
+  "version": "0.1.22",
   "description": "Lightweight, customizable and fast Dropdown Tree Select component for React",
   "keywords": [
     "react",

src/index.js

@@ -213,7 +213,7 @@ class DropdownTreeSelect extends Component {
     this.setState(nextState, () => {
       callback && callback(tags)
     })
-    this.props.onChange(node, tags)
+    this.props.onChange(node, tags, Array.from(this.state.tree.values()))
   }
 
   onAction = (nodeId, action) => {
@@ -305,6 +305,24 @@ class DropdownTreeSelect extends Component {
     const activeDescendant = currentFocus ? `${currentFocus}_li` : undefined
 
     const commonProps = { disabled, readOnly, activeDescendant, texts, mode, clientId: this.clientId }
+    const mergedProps = {
+      ...commonProps,
+      ...{
+        texts: {
+          placeholder: tags && tags.length > 0 ? `(${tags.length}) selected` : commonProps.texts.placeholder || '',
+        },
+      },
+    }
+
+    // const arr = Array.from(this.state.tree.values())
+    // for (let index = 0; index < arr.length; ++index) {
+    //   if (!arr[index].checked && this.state.selected.includes(arr[index].value)) {
+    //     this.treeManager.setNodeCheckedState(
+    //       arr[index]._id,
+    //       this.state.selected.includes(arr[index].value) ? true : false
+    //     )
+    //   }
+    // }
 
     const searchInput = (
       <Input
@@ -315,7 +333,7 @@ class DropdownTreeSelect extends Component {
         onFocus={this.onInputFocus}
         onBlur={this.onInputBlur}
         onKeyDown={this.onKeyboardKeyDown}
-        {...commonProps}
+        {...mergedProps}
         inlineSearchInput={inlineSearchInput}
       />
     )

src/tree-node/index.js

@@ -54,6 +54,7 @@ class TreeNode extends PureComponent {
     className: PropTypes.string,
     title: PropTypes.string,
     label: PropTypes.string.isRequired,
+    labelCount: PropTypes.string,
     value: PropTypes.string.isRequired,
     checked: PropTypes.bool,
     expanded: PropTypes.bool,
@@ -98,6 +99,7 @@ class TreeNode extends PureComponent {
       expanded,
       title,
       label,
+      labelCount,
       partial,
       checked,
       value,
@@ -122,6 +124,7 @@ class TreeNode extends PureComponent {
         <NodeLabel
           title={title}
           label={label}
+          labelCount={labelCount}
           id={_id}
           partial={partial}
           checked={checked}

src/tree-node/node-label.js

@@ -9,6 +9,7 @@ class NodeLabel extends PureComponent {
     actions: PropTypes.array,
     title: PropTypes.string,
     label: PropTypes.string.isRequired,
+    labelCount: PropTypes.string,
     value: PropTypes.string.isRequired,
     checked: PropTypes.bool,
     partial: PropTypes.bool,
@@ -37,7 +38,7 @@ class NodeLabel extends PureComponent {
   }
 
   render() {
-    const { mode, title, label, id, partial, checked } = this.props
+    const { mode, title, label, labelCount, id, partial, checked } = this.props
     const { value, disabled, showPartiallySelected, readOnly, clientId } = this.props
     const nodeLabelProps = { className: 'node-label' }
 
@@ -65,7 +66,10 @@ class NodeLabel extends PureComponent {
             {...sharedProps}
           />
         )}
-        <span {...nodeLabelProps}>{label}</span>
+        <span {...nodeLabelProps}>
+          {label}
+          {labelCount && <span className="node-label-count">({labelCount})</span>}
+        </span>
       </label>
     )
   }

types/react-dropdown-tree-select.d.ts

@@ -1,5 +1,5 @@
 // tslint:disable:interface-name
-declare module 'react-dropdown-tree-select' {
+declare module '@sm2dev/react-dropdown-tree-select' {
   import * as React from 'react'
 
   export type TreeData = Object | TreeNodeProps[]
@@ -39,7 +39,7 @@ declare module 'react-dropdown-tree-select' {
      *
      * Calls the handler with the current node object and all selected nodes (if any)
      */
-    onChange?: (currentNode: TreeNode, selectedNodes: TreeNode[]) => void
+    onChange?: (currentNode: TreeNode, selectedNodes: TreeNode[], allNodes: TreeNode[]) => void
     /**  Fired on click of the action */
     onAction?: (currentNode: TreeNode, currentAction: NodeAction) => void
     /** Fires when a node is expanded or collapsed.
@@ -123,6 +123,7 @@ declare module 'react-dropdown-tree-select' {
   export interface TreeNode {
     /** Checkbox label */
     label: string
+    labelCount?: string
     /** Checkbox value */
     value: string
     /** Initial state of checkbox. if true, checkbox is selected and corresponding pill is rendered. */