From 6a632cc88e88b79771284cdea61dc503868f2ce7 Mon Sep 17 00:00:00 2001 From: ellinge Date: Thu, 9 May 2019 22:12:11 +0200 Subject: [PATCH 01/11] =?UTF-8?q?feat:=20Group=20logically=20related=20pro?= =?UTF-8?q?ps=20together=20(#242)=20=E2=9A=A1=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING: Property changes | Description | Usage before | Usage after | | --------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------- | | Added a new `mode` prop | `simpleSelect={true}` / `simpleSelect` | `mode='simpleSelect'` | | Bundled text props into a single object | `placeholderText='My text'`
`noMatchesText='No matches'` | `texts={{ placeholder: 'My text', noMatches: 'No matches' }}` | --- README.md | 78 +++++++++--------- __snapshots__/src/index.test.js.md | 20 ++++- __snapshots__/src/index.test.js.snap | Bin 3581 -> 3720 bytes __snapshots__/src/tree-node/index.test.js.md | 4 +- .../src/tree-node/index.test.js.snap | Bin 1177 -> 1181 bytes docs/src/stories/Options/index.js | 19 +++-- src/a11y/a11y.test.js | 10 +-- src/index.js | 48 ++++++----- src/index.keyboardNav.test.js | 2 +- src/index.test.js | 12 +-- src/input/index.js | 14 ++-- src/input/index.test.js | 2 +- src/tree-manager/index.js | 12 +-- src/tree-manager/tests/index.test.js | 2 +- src/tree-manager/tests/initialState.test.js | 2 +- src/tree-manager/tests/partialSelect.test.js | 8 +- src/tree-manager/tests/radioSelect.test.js | 16 ++-- src/tree-manager/tests/simpleSelect.test.js | 2 +- .../tests/stateTransitions.test.js | 14 ++-- src/tree-node/index.js | 15 ++-- src/tree-node/index.test.js | 4 +- src/tree-node/node-label.js | 15 ++-- src/tree-node/node-label.test.js | 4 +- src/tree/index.js | 15 ++-- src/trigger/index.js | 9 +- types/react-dropdown-tree-select.d.ts | 45 ++++++---- 26 files changed, 199 insertions(+), 173 deletions(-) diff --git a/README.md b/README.md index 1f41460d..aecabd37 100644 --- a/README.md +++ b/README.md @@ -45,20 +45,19 @@ A lightweight and fast control to render a select component that can display hie - [onChange](#onchange) - [onNodeToggle](#onnodetoggle) - [data](#data) - - [placeholderText](#placeholdertext) - - [noMatchesText](#nomatchestext) + - [texts](#texts) - [keepTreeOnSearch](#keeptreeonsearch) - [keepChildrenOnSearch](#keepchildrenonsearch) - [keepOpenOnSelect](#keepopenonselect) - - [simpleSelect](#simpleselect) - - [radioSelect](#radioSelect) + - [mode](#mode) + - [multiSelect](#multiSelect) + - [simpleSelect](#simpleSelect) + - [radioSelect](#radioSelect) - [showPartiallySelected](#showpartiallyselected) - [showDropdown](#showDropdown) - [showDropdownAlways](#showDropdownAlways) - [form states (disabled|readOnly)](#formstates) - [id](#id) - - [label](#label) - - [labelRemove](#labelRemove) - [Styling and Customization](#styling-and-customization) - [Using default styles](#default-styles) - [Customizing with Bootstrap, Material Design styles](#customizing-styles) @@ -283,17 +282,20 @@ The `action` object requires the following structure: An array renders a tree with multiple root level items whereas an object renders a tree with a single root element (e.g. a `Select All` root node). -### placeholderText +### texts -Type: `string` - -The text to display as placeholder on the search box. Defaults to `Choose...` - -### noMatchesText +Texts to override various labels, place holders & messages used in the component. You can also use this to provide translated messages. -Type: `string` +The `texts` object requires the following structure: -The text to display when the search does not find results in the content list. Defaults to `No matches found` +```js +{ + placeholder, // optional: The text to display as placeholder on the search box. Defaults to `Choose...` + noMatches, // optional: The text to display when the search does not find results in the content list. Defaults to `No matches found` + label, // optional: Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#') + labelRemove, // optional: The text to display for `aria-label` on tag delete buttons which is combined with `aria-labelledby` pointing to the node label. Defaults to `Remove` +} +``` ### keepTreeOnSearch @@ -317,21 +319,29 @@ Keeps single selects open after selection. Defaults to `false` _NOTE_ this works only in combination with `simpleSelect` or `radioSelect` -### simpleSelect +### mode -Type: `bool` (default: `false`) +Type: `string` (default: `multiSelect`) -Turns the dropdown into a simple, single select dropdown. If you pass tree data, only immediate children are picked, grandchildren nodes are ignored. Defaults to `false`. +Defines how the dropdown is rendered / behaves -_NOTE_ if multiple nodes in data are selected, `checked` or `isDefaultValue`, only the first visited node is selected +#### multiSelect -### radioSelect +This is the default mode. A multi selectable dropdown which supports hierarchical data. -Type: `bool` (default: `false`) +#### simpleSelect + +Turns the dropdown into a simple, single select dropdown. If you pass tree data, only immediate children are picked, grandchildren nodes are ignored. -Turns the dropdown into radio select dropdown. Similar to simpleSelect but keeps tree/children. Defaults to `false`. +⚠️ If multiple nodes in data are selected - by setting either `checked` or `isDefaultValue`, only the first visited node stays selected. -_NOTE_ if multiple nodes in data are selected, `checked` or `isDefaultValue`, only the first visited node is selected +#### radioSelect + +Turns the dropdown into radio select dropdown. + +Like `simpleSelect`, you can only select one value; but keeps the tree/children structure. + +⚠️ If multiple nodes in data are selected - by setting either `checked` or `isDefaultValue`, only the first visited node stays selected. ### showPartiallySelected @@ -366,18 +376,6 @@ Specific id for container. The container renders with a default id of `rdtsN` wh Use to ensure a own unique id when a simple counter is not sufficient, e.g in a partial server render (SSR) -### label - -Type: `string` - -Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#') - -### labelRemove - -Type: `string` - -The text to display for `aria-label` on tag delete buttons which is combined with `aria-labelledby` pointing to the node label. Defaults to `Remove` - ## Styling and Customization ### Default styles @@ -386,10 +384,10 @@ The component brings minimal styles for bare-bones functional rendering. It is k #### Using WebPack -If you're using a bundler like webpack, make sure you configure webpack to import the default styles. To do so, simply add this rule to your webpack config: +If you're using a bundler like WebPack, make sure you configure WebPack to import the default styles. To do so, simply add this rule to your WebPack config: ```js -// allow webpack to import/bundle styles from node_modules for this component +// allow WebPack to import/bundle styles from node_modules for this component module: { rules: [ { @@ -470,10 +468,10 @@ Node toggling also achieves the expand/collapse effect by manipulating css class ### How do I change the placeholder text? -The default [placeholder](#placeholdertext) is `Choose...`. If you want to change this to something else, you can use `placeholderText` property to set it. +The default [placeholder](#texts) is `Choose...`. If you want to change this to something else, you can use `placeholder` property to set it. ```jsx - + ``` ### How do I tweak styles? @@ -486,11 +484,11 @@ Easy style customization is one of the design goals of this component. Every vis } ``` -The css classes needed to overide can be found by inspecting the component via developer tools (chrome/safari/ie) or firebug (firefox). You can also inspect the [source code](/src) or look in [examples](/docs/index.css). +The css classes needed to override can be found by inspecting the component via developer tools (Chrome/Safari/IE/Edge/Firefox). You can also inspect the [source code](/src) or look in [examples](/docs/index.css). ### I do not want the default styles, do I need to fork the project? -Absolutely not! Simply do not import the styles (webpack) or include it in your html (link tags). Roughly, this is the HTML/CSS skeleton rendered by the component: +Absolutely not! Simply do not import the styles (WebPack) or include it in your html (link tags). Roughly, this is the HTML/CSS skeleton rendered by the component: ```pug div.react-dropdown-tree-select diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md index 6be6a723..58ac58de 100644 --- a/__snapshots__/src/index.test.js.md +++ b/__snapshots__/src/index.test.js.md @@ -18,6 +18,7 @@ Generated by [AVA](https://ava.li).
@@ -177,6 +180,7 @@ Generated by [AVA](https://ava.li). disabled={true} onTrigger={Function {}} showDropdown={false} + texts={{}} > @@ -267,10 +272,11 @@ Generated by [AVA](https://ava.li). ] } id="rdts" + mode="radioSelect" onBlur={Function onBlur {}} onChange={Function onChange {}} onFocus={Function onFocus {}} - radioSelect={true} + texts={{}} >