diff --git a/.eslintignore b/.eslintignore index 65fc7146..b5d555ab 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ -docs/**/bundle.js \ No newline at end of file +docs/**/bundle.js +/**/*.d.ts \ No newline at end of file diff --git a/docs/src/stories/DefaultValues/data.json b/docs/src/stories/DefaultValues/data.json index fa3a3747..dec4129c 100644 --- a/docs/src/stories/DefaultValues/data.json +++ b/docs/src/stories/DefaultValues/data.json @@ -2,12 +2,14 @@ { "label": "VP Accounting", "tagClassName": "special", - "isDefaultValue": true, "children": [ { "label": "iWay", "children": [ - { "label": "Universidad de Especialidades del Espíritu Santo", "value": "universidad-de-especialidades-del-espíritu-santo" }, + { + "label": "Universidad de Especialidades del Espíritu Santo", + "value": "universidad-de-especialidades-del-espíritu-santo" + }, { "label": "Marmara University", "value": "marmara-university" }, { "label": "Baghdad College of Pharmacy", "value": "baghdad-college-of-pharmacy" } ], @@ -35,7 +37,10 @@ { "label": "Utilization Review", "children": [ - { "label": "University of Minnesota - Twin Cities Campus", "value": "university-of-minnesota---twin-cities-campus" }, + { + "label": "University of Minnesota - Twin Cities Campus", + "value": "university-of-minnesota---twin-cities-campus" + }, { "label": "Moldova State Agricultural University", "value": "moldova-state-agricultural-university" }, { "label": "Andrews University", "value": "andrews-university" }, { "label": "Usmanu Danfodiyo University Sokoto", "value": "usmanu-danfodiyo-university-sokoto" } @@ -48,7 +53,10 @@ { "label": "Universidad Autónoma del Caribe", "value": "universidad-autónoma-del-caribe" }, { "label": "National University of Uzbekistan", "value": "national-university-of-uzbekistan" }, { "label": "Ladoke Akintola University of Technology", "value": "ladoke-akintola-university-of-technology" }, - { "label": "Kohat University of Science and Technology (KUST)", "value": "kohat-university-of-science-and-technology--(kust)" }, + { + "label": "Kohat University of Science and Technology (KUST)", + "value": "kohat-university-of-science-and-technology--(kust)" + }, { "label": "Hvanneyri Agricultural University", "value": "hvanneyri-agricultural-university" } ], "value": "norton-utilities" @@ -58,7 +66,6 @@ }, { "label": "Database Administrator III", - "disabled": true, "children": [ { "label": "TFS", @@ -69,7 +76,10 @@ "label": "Ecole Nationale Supérieure d'Agronomie et des Industries Alimentaires", "value": "ecole-nationale-supérieure-d'agronomie-et-des-industries-alimentaires" }, - { "label": "Ho Chi Minh City University of Natural Sciences", "value": "ho-chi-minh-city-university-of-natural-sciences" } + { + "label": "Ho Chi Minh City University of Natural Sciences", + "value": "ho-chi-minh-city-university-of-natural-sciences" + } ], "value": "tfs" }, @@ -77,7 +87,10 @@ "label": "Overhaul", "children": [ { "label": "Technological University (Taunggyi)", "value": "technological-university-(taunggyi)" }, - { "label": "Universidad de Las Palmas de Gran Canaria", "value": "universidad-de-las-palmas-de-gran-canaria" }, + { + "label": "Universidad de Las Palmas de Gran Canaria", + "value": "universidad-de-las-palmas-de-gran-canaria" + }, { "label": "Olympia College", "value": "olympia-college" }, { "label": "Franklin and Marshall College", "value": "franklin-and-marshall-college" }, { @@ -140,7 +153,7 @@ { "label": "Enzyme Kinetics", "children": [ - { "label": "Universidad del Valle de Guatemala", "isDefaultValue": true, "value": "universidad-del-valle-de-guatemala" }, + { "label": "Universidad del Valle de Guatemala", "value": "universidad-del-valle-de-guatemala" }, { "label": "Ecole Nationale Supérieure d'Electronique, d'Electrotechnique, d'Informatique et d'Hydraulique de Toulouse", "value": "ecole-nationale-supérieure-d'electronique,-d'electrotechnique,-d'informatique-et-d'hydraulique-de-toulouse" @@ -167,7 +180,10 @@ "children": [ { "label": "National University", "value": "national-university" }, { "label": "Ecole de l'Air", "value": "ecole-de-l'air" }, - { "label": "Vietnam National University of Agriculture", "value": "vietnam-national-university-of-agriculture" }, + { + "label": "Vietnam National University of Agriculture", + "value": "vietnam-national-university-of-agriculture" + }, { "label": "St. Petersburg State University of Aerospace Instrumentation", "value": "st.-petersburg-state-university-of-aerospace-instrumentation" @@ -221,7 +237,10 @@ "children": [ { "label": "Prague College", "value": "prague-college" }, { "label": "Wakayama Medical College", "value": "wakayama-medical-college" }, - { "label": "South University of Science and Technology of China ", "value": "south-university-of-science-and-technology-of-china-" }, + { + "label": "South University of Science and Technology of China ", + "value": "south-university-of-science-and-technology-of-china-" + }, { "label": "Campbell University", "value": "campbell-university" } ], "value": "mac-os" @@ -277,7 +296,10 @@ "label": "FTO", "children": [ { "label": "Université de Skikda", "value": "université-de-skikda" }, - { "label": "University College of Technology & Innovation (UCTI)", "value": "university-college-of-technology-&-innovation-(ucti)" }, + { + "label": "University College of Technology & Innovation (UCTI)", + "value": "university-college-of-technology-&-innovation-(ucti)" + }, { "label": "Ahmedabad University", "value": "ahmedabad-university" }, { "label": "Universidad Intercontinental", "value": "universidad-intercontinental" }, { "label": "Atlantic Union College", "value": "atlantic-union-college" } @@ -311,7 +333,10 @@ { "label": "Zero Waste", "children": [ - { "label": "University of Italian Studies for Foreigners of Siena", "value": "university-of-italian-studies-for-foreigners-of-siena" }, + { + "label": "University of Italian Studies for Foreigners of Siena", + "value": "university-of-italian-studies-for-foreigners-of-siena" + }, { "label": "Klaipeda University", "value": "klaipeda-university" }, { "label": "Tallinn University", "value": "tallinn-university" } ], @@ -392,7 +417,10 @@ "label": "Zooarchaeology", "children": [ { "label": "Hebei Medical University", "value": "hebei-medical-university" }, - { "label": "Bharath Institue Of Higher Education & Research", "value": "bharath-institue-of-higher-education-&-research" }, + { + "label": "Bharath Institue Of Higher Education & Research", + "value": "bharath-institue-of-higher-education-&-research" + }, { "label": "Universität Hannover", "value": "universität-hannover" } ], "value": "zooarchaeology" @@ -406,8 +434,14 @@ { "label": "IOT", "children": [ - { "label": "Belarussian National Technical University", "value": "belarussian-national-technical-university" }, - { "label": "Tokyo University of Pharmacy and Life Science", "value": "tokyo-university-of-pharmacy-and-life-science" }, + { + "label": "Belarussian National Technical University", + "value": "belarussian-national-technical-university" + }, + { + "label": "Tokyo University of Pharmacy and Life Science", + "value": "tokyo-university-of-pharmacy-and-life-science" + }, { "label": "Brickfields Asia College", "value": "brickfields-asia-college" }, { "label": "Samar State University", "value": "samar-state-university" }, { "label": "West Bengal University of Technology", "value": "west-bengal-university-of-technology" } @@ -418,7 +452,10 @@ "label": "Lymphatic Drainage", "children": [ { "label": "Free University Amsterdam", "value": "free-university-amsterdam" }, - { "label": "Friedrich-Alexander Universität Erlangen-Nürnberg", "value": "friedrich-alexander-universität-erlangen-nürnberg" }, + { + "label": "Friedrich-Alexander Universität Erlangen-Nürnberg", + "value": "friedrich-alexander-universität-erlangen-nürnberg" + }, { "label": "Sinnar University", "value": "sinnar-university" }, { "label": "Okayama University of Science", "value": "okayama-university-of-science" } ], @@ -529,9 +566,15 @@ { "label": "Semantic HTML", "children": [ - { "label": "Southwest University of Finance and Economics", "value": "southwest-university-of-finance-and-economics" }, + { + "label": "Southwest University of Finance and Economics", + "value": "southwest-university-of-finance-and-economics" + }, { "label": "Civil Aviation University of China", "value": "civil-aviation-university-of-china" }, - { "label": "Belarussian State Technological University", "value": "belarussian-state-technological-university" } + { + "label": "Belarussian State Technological University", + "value": "belarussian-state-technological-university" + } ], "value": "semantic-html" }, @@ -595,7 +638,10 @@ { "label": "Grinnell College", "value": "grinnell-college" }, { "label": "Chinju National University of Education", "value": "chinju-national-university-of-education" }, { "label": "Dokkyo University School of Medicine", "value": "dokkyo-university-school-of-medicine" }, - { "label": "University of New England, Westbrook College Campus", "value": "university-of-new-england,-westbrook-college-campus" }, + { + "label": "University of New England, Westbrook College Campus", + "value": "university-of-new-england,-westbrook-college-campus" + }, { "label": "Miami University of Ohio - Hamilton", "value": "miami-university-of-ohio---hamilton" } ], "value": "hse-management-systems" @@ -610,9 +656,15 @@ "label": "Multi-Unit", "children": [ { "label": "Strayer University", "value": "strayer-university" }, - { "label": "National Kaohsiung University of Applied Sciences", "value": "national-kaohsiung-university-of-applied-sciences" }, + { + "label": "National Kaohsiung University of Applied Sciences", + "value": "national-kaohsiung-university-of-applied-sciences" + }, { "label": "Philadelphia University", "value": "philadelphia-university" }, - { "label": "National Institute of Mental Health and Neuro Sciences", "value": "national-institute-of-mental-health-and-neuro-sciences" }, + { + "label": "National Institute of Mental Health and Neuro Sciences", + "value": "national-institute-of-mental-health-and-neuro-sciences" + }, { "label": "Vardhaman Mahaveer Open University", "value": "vardhaman-mahaveer-open-university" } ], "value": "multi-unit" @@ -636,7 +688,10 @@ "children": [ { "label": "Al-Bukhari International University", "value": "al-bukhari-international-university" }, { "label": "Technical University of Denmark", "value": "technical-university-of-denmark" }, - { "label": "Postgraduate lnstitute of Medical Education and Research", "value": "postgraduate-lnstitute-of-medical-education-and-research" } + { + "label": "Postgraduate lnstitute of Medical Education and Research", + "value": "postgraduate-lnstitute-of-medical-education-and-research" + } ], "value": "biostatistics" }, @@ -670,8 +725,14 @@ { "label": "Christ University", "value": "christ-university" }, { "label": "Janos Selye University", "value": "janos-selye-university" }, { "label": "Zagazig University", "value": "zagazig-university" }, - { "label": "Constantin Brancoveanu University Pitesti", "value": "constantin-brancoveanu-university-pitesti" }, - { "label": "Southwest University of Political Science and Law", "value": "southwest-university-of-political-science-and-law" } + { + "label": "Constantin Brancoveanu University Pitesti", + "value": "constantin-brancoveanu-university-pitesti" + }, + { + "label": "Southwest University of Political Science and Law", + "value": "southwest-university-of-political-science-and-law" + } ], "value": "federal-grants-management" }, @@ -687,7 +748,10 @@ { "label": "CDMA", "children": [ - { "label": "College of Telecommunication & Information ", "value": "college-of-telecommunication-&-information-" }, + { + "label": "College of Telecommunication & Information ", + "value": "college-of-telecommunication-&-information-" + }, { "label": "Nagasaki Prefectural University", "value": "nagasaki-prefectural-university" }, { "label": "Gustav-Siewerth-Akademie", "value": "gustav-siewerth-akademie" } ], @@ -738,7 +802,10 @@ { "label": "Adeyemi College of Education", "value": "adeyemi-college-of-education" }, { "label": "Université de Sherbrooke", "value": "université-de-sherbrooke" }, { "label": "University College of Applied Sciences", "value": "university-college-of-applied-sciences" }, - { "label": "Johns Hopkins University, SAIS Bologna Center", "value": "johns-hopkins-university,-sais-bologna-center" } + { + "label": "Johns Hopkins University, SAIS Bologna Center", + "value": "johns-hopkins-university,-sais-bologna-center" + } ], "value": "abstracting" }, @@ -746,7 +813,10 @@ "label": "WTL", "children": [ { "label": "Universidad de Córdoba", "value": "universidad-de-córdoba" }, - { "label": "Institut National Polytechnique de Grenoble", "value": "institut-national-polytechnique-de-grenoble" }, + { + "label": "Institut National Polytechnique de Grenoble", + "value": "institut-national-polytechnique-de-grenoble" + }, { "label": "Kyonggi University", "value": "kyonggi-university" } ], "value": "wtl" @@ -775,7 +845,10 @@ { "label": "Shandong Medical University", "value": "shandong-medical-university" }, { "label": "Al Khawarizmi International College", "value": "al-khawarizmi-international-college" }, { "label": "Nippon Dental University", "value": "nippon-dental-university" }, - { "label": "Komsomolsk-on-Amur State Technical University", "value": "komsomolsk-on-amur-state-technical-university" }, + { + "label": "Komsomolsk-on-Amur State Technical University", + "value": "komsomolsk-on-amur-state-technical-university" + }, { "label": "Lingnan University", "value": "lingnan-university" } ], "value": "workforce-development" @@ -784,12 +857,18 @@ "label": "Digital Journalism", "children": [ { "label": "The College of St. Scholastica", "value": "the-college-of-st.-scholastica" }, - { "label": "Universidad Autónoma de la Ciudad de México", "value": "universidad-autónoma-de-la-ciudad-de-méxico" }, + { + "label": "Universidad Autónoma de la Ciudad de México", + "value": "universidad-autónoma-de-la-ciudad-de-méxico" + }, { "label": "University of Information Technology and Management in Rzeszow", "value": "university-of-information-technology-and-management-in-rzeszow" }, - { "label": "Liaquat University of Medical & Health Sciences Jamshoro", "value": "liaquat-university-of-medical-&-health-sciences-jamshoro" } + { + "label": "Liaquat University of Medical & Health Sciences Jamshoro", + "value": "liaquat-university-of-medical-&-health-sciences-jamshoro" + } ], "value": "digital-journalism" }, diff --git a/docs/src/stories/DefaultValues/index.js b/docs/src/stories/DefaultValues/index.js index e17653e5..d7816d91 100644 --- a/docs/src/stories/DefaultValues/index.js +++ b/docs/src/stories/DefaultValues/index.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import DropdownTreeSelect from '../../../../src' import '../../../../dist/styles.css' @@ -6,8 +6,8 @@ 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 = () => ( -
-

Component with Default Values

-

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

- -
-) +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 ( +
+

Component with Default Values

+

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

+ +
+ ) +} export default Simple diff --git a/package.json b/package.json index 7138e623..31c19cb7 100644 --- a/package.json +++ b/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", diff --git a/src/index.js b/src/index.js index 2944850f..e69691a5 100644 --- a/src/index.js +++ b/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 = ( ) diff --git a/src/tree-node/index.js b/src/tree-node/index.js index 4c58a49c..2c094d62 100644 --- a/src/tree-node/index.js +++ b/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 { )} - {label} + + {label} + {labelCount && ({labelCount})} + ) } diff --git a/types/react-dropdown-tree-select.d.ts b/types/react-dropdown-tree-select.d.ts index b9e4f2b8..5c787ccd 100644 --- a/types/react-dropdown-tree-select.d.ts +++ b/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. */