FIX (label, value): [EXPERIMENTAL] allow dotted path in valueField an… (

#18) * FIX (label, value): allow dotted path in valueField, labelField, searchBy and sortBy issue #17
sanusart · Jul 19, 2019 · 43eefe0 · 43eefe0
1 parent 88d2513
commit 43eefe0
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 64 deletions.
diff --git a/dist/react-dropdown-select.js b/dist/react-dropdown-select.js
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
@@ -1,13 +1,13 @@
 module.exports = {
-  pathPrefix: "/react-dropdown-select",
+  pathPrefix: '/react-dropdown-select',
   plugins: [
     `gatsby-plugin-emotion`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         path: `${__dirname}/src/pages`,
-        name: "markdown-pages",
-      },
+        name: 'markdown-pages'
+      }
     },
     `gatsby-transformer-remark`,
     `gatsby-plugin-catch-links`
@@ -32,6 +32,6 @@ module.exports = {
         path: 'examples',
         displayName: 'Examples'
       }
-    ],
+    ]
   }
 };
diff --git a/docs/src/examples/AccessDataByPath.js b/docs/src/examples/AccessDataByPath.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import Select from '../../../src';
+import { options } from '../options';
+
+const AccessDataByPath = ({ title }) => (
+  <React.Fragment>
+    <Title>
+      <h2>{title}</h2>
+      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/AccessDataByPath.js">
+        Source
+      </a>
+    </Title>
+    <p>"Label" is accessed via <code>company.catchPhrase</code> nested property of the <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/options.js#L21">options</a> object</p>
+    <Select
+      multi
+      options={options}
+      values={[]}
+      valueField="address.city"
+      labelField="company.catchPhrase"
+      searchBy="company.catchPhrase"
+      onChange={(value) =>
+        console.log(`%c > onChange ${title} `, 'background: #555; color: tomato', value)
+      }
+    />
+  </React.Fragment>
+);
+
+AccessDataByPath.propTypes = {};
+
+const Title = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+`;
+
+export default AccessDataByPath;
diff --git a/docs/src/pages/api.md b/docs/src/pages/api.md
@@ -28,11 +28,11 @@ title: 'API'
 | separator                                                                                   | bool        | false          | Separator line between close all and dropdown handle                                                                                   |
 | dropdownHandle                                                                              | bool        | true           | Dropdown handle to open/close dropdown                                                                                                 |
 | dropdownHeight                                                                              | string      | "300px"        | Minimum height of a dropdown                                                                                                           |
-| [direction](https://sanusart.github.io/react-dropdown-select/examples/#Right-to-left)                                                                                   | string      | "ltr"          | direction of a dropdown "ltr", "rtl" or "auto"                                                                                         |
-| searchBy                                                                                    | string      | label          | Search by object property in values                                                                                                    |
-| sortBy                                                                                      | string      | null           | Sort by object property in values                                                                                                      |
-| labelField                                                                                  | string      | "label"        | Field in data to use for label                                                                                                         |
-| valueField                                                                                  | string      | "value"        | Field in data to use for value                                                                                                         |
+| [direction](https://sanusart.github.io/react-dropdown-select/examples/#Right-to-left)       | string      | "ltr"          | direction of a dropdown "ltr", "rtl" or "auto"                                                                                         |
+| searchBy                                                                                    | string      | label          | Search by object property (or nested property with dot notation) in values                                                                                                    |
+| sortBy                                                                                      | string      | null           | Sort by object property (or nested property with dot notation) in values                                                                                                      |
+| labelField                                                                                  | string      | "label"        | Field (or nested property with dot notation) in data to use for label                                                                               |
+| valueField                                                                                  | string      | "value"        | Field (or nested property with dot notation) in data to use for value                                                                               |
 | color                                                                                       | string      | "#0074D9"      | Base color to use in component, also can be overwritten via CSS                                                                        |
 | closeOnScroll                                                                               | bool        | false          | If true, scrolling the page will close the dropdown                                                                                    |
 | closeOnSelect                                                                               | bool        | false          | If true, selecting option will close the dropdown                                                                                      |

diff --git a/docs/src/pages/examples.js b/docs/src/pages/examples.js
@@ -24,6 +24,7 @@ import Rtl from '../examples/Rtl';
 import DropdownAutoPosition from '../examples/DropdownAutoPosition';
 import NoData from '../examples/NoData';
 import ExternalClear from '../examples/ExternalClear';
+import AccessDataByPath from '../examples/AccessDataByPath';
 
 const demoOptions = options.map((option) => ({
   ...option,
@@ -96,6 +97,10 @@ const Examples = () => (
       <ExternalClear options={demoOptions} title={`External clear and add`} />
     </Wrapper>
 
+    <Wrapper>
+      <AccessDataByPath title={`Access data by dotted path`} />
+    </Wrapper>
+
     <br />
     <br />
     <br />

diff --git a/lib/components/Content.js b/lib/components/Content.js