Add shorthand options to Core Components

components/dash-core-components/src/components/Checklist.react.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import {append, includes, without} from 'ramda';
 import React, {Component} from 'react';
+import {optionsType} from "../utils/sharedPropTypes";
+import {mapOptions} from "../utils/shorthandMappers";
 
 /**
  * Checklist is a component that encapsulates several checkboxes.
@@ -17,6 +19,7 @@ export default class Checklist extends Component {
             inputStyle,
             labelClassName,
             labelStyle,
+            inline,
             options,
             setProps,
             style,
@@ -33,10 +36,13 @@ export default class Checklist extends Component {
                 style={style}
                 className={className}
             >
-                {options.map(option => (
+                {mapOptions(options).map(option => (
                     <label
                         key={option.value}
-                        style={labelStyle}
+                        style={{
+                            ...{display: inline ? 'inline-block' : "block"},
+                            ...labelStyle
+                        }}
                         className={labelClassName}
                     >
                         <input
@@ -64,39 +70,20 @@ export default class Checklist extends Component {
 }
 
 Checklist.propTypes = {
+    /**
+     * An array of dictionaries as [{label: "Label", value: "Value"}],
+     * OR an array of options as ["Option 1", "Option 2"]
+     * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
+     */
+    options: optionsType,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
      * components in an app.
      */
     id: PropTypes.string,
 
-    /**
-     * An array of options
-     */
-    options: PropTypes.arrayOf(
-        PropTypes.exact({
-            /**
-             * The checkbox's label
-             */
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * The value of the checkbox. This value
-             * corresponds to the items specified in the
-             * `value` property.
-             */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * If true, this checkbox is disabled and can't be clicked on.
-             */
-            disabled: PropTypes.bool,
-        })
-    ),
-
     /**
      * The currently selected value
      */
@@ -130,6 +117,11 @@ Checklist.propTypes = {
      */
     labelStyle: PropTypes.object,
 
+    /**
+     * Shorthand for applying {'display': 'inline-block'} labelStyle
+     */
+    inline: PropTypes.bool,
+
     /**
      * The class of the <label> that wraps the checkbox input
      *  and the option's label
@@ -194,6 +186,7 @@ Checklist.defaultProps = {
     inputClassName: '',
     labelStyle: {},
     labelClassName: '',
+    inline: false,
     options: [],
     value: [],
     persisted_props: ['value'],

components/dash-core-components/src/components/Dropdown.react.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {Component, lazy, Suspense} from 'react';
 import dropdown from '../utils/LazyLoader/dropdown';
+import {optionsType} from "../utils/sharedPropTypes";
 
 const RealDropdown = lazy(dropdown);
 
@@ -25,47 +26,20 @@ export default class Dropdown extends Component {
 }
 
 Dropdown.propTypes = {
+    /**
+     * An array of dictionaries as [{label: "Label", value: "Value"}],
+     * OR an array of options as ["Option 1", "Option 2"]
+     * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
+     */
+    options: optionsType,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
      * components in an app.
      */
     id: PropTypes.string,
 
-    /**
-     * An array of options {label: [string|number], value: [string|number]},
-     * an optional disabled field can be used for each option
-     */
-    options: PropTypes.arrayOf(
-        PropTypes.exact({
-            /**
-             * The dropdown's label
-             */
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * The value of the dropdown. This value
-             * corresponds to the items specified in the
-             * `value` property.
-             */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * If true, this option is disabled and cannot be selected.
-             */
-            disabled: PropTypes.bool,
-
-            /**
-             * The HTML 'title' attribute for the option. Allows for
-             * information on hover. For more information on this attribute,
-             * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
-             */
-            title: PropTypes.string,
-        })
-    ),
-
     /**
      * The value of the input. If `multi` is false (the default)
      * then value is just a string that corresponds to the values

components/dash-core-components/src/components/RadioItems.react.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import './css/react-select@1.0.0-rc.3.min.css';
+import {optionsType} from "../utils/sharedPropTypes";
+import {mapOptions} from "../utils/shorthandMappers";
 
 /**
  * RadioItems is a component that encapsulates several radio item inputs.
@@ -19,6 +21,7 @@ export default class RadioItems extends Component {
             inputStyle,
             labelClassName,
             labelStyle,
+            inline,
             options,
             setProps,
             loading_state,
@@ -38,9 +41,12 @@ export default class RadioItems extends Component {
                 className={className}
                 style={style}
             >
-                {options.map(option => (
+                {mapOptions(options).map(option => (
                     <label
-                        style={labelStyle}
+                        style={{
+                            ...{display: inline ? 'inline-block' : "block"},
+                            ...labelStyle
+                        }}
                         className={labelClassName}
                         key={option.value}
                     >
@@ -63,39 +69,20 @@ export default class RadioItems extends Component {
 }
 
 RadioItems.propTypes = {
+    /**
+     * An array of dictionaries as [{label: "Label", value: "Value"}],
+     * OR an array of options as ["Option 1", "Option 2"]
+     * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
+     */
+    options: optionsType,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
      * components in an app.
      */
     id: PropTypes.string,
 
-    /**
-     * An array of options
-     */
-    options: PropTypes.arrayOf(
-        PropTypes.exact({
-            /**
-             * The radio item's label
-             */
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * The value of the radio item. This value
-             * corresponds to the items specified in the
-             * `value` property.
-             */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * If true, this radio item is disabled and can't be clicked on.
-             */
-            disabled: PropTypes.bool,
-        })
-    ),
-
     /**
      * The currently selected value
      */
@@ -127,6 +114,11 @@ RadioItems.propTypes = {
      */
     labelStyle: PropTypes.object,
 
+    /**
+     * Shorthand for applying {'display': 'inline-block'} labelStyle
+     */
+    inline: PropTypes.bool,
+
     /**
      * The class of the <label> that wraps the radio input
      *  and the option's label

components/dash-core-components/src/components/RangeSlider.react.js

@@ -19,6 +19,16 @@ export default class RangeSlider extends Component {
 }
 
 RangeSlider.propTypes = {
+    /**
+     * Minimum allowed value of the slider
+     */
+    min: PropTypes.number,
+
+    /**
+     * Maximum allowed value of the slider
+     */
+    max: PropTypes.number,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
@@ -88,16 +98,6 @@ RangeSlider.propTypes = {
      */
     included: PropTypes.bool,
 
-    /**
-     * Minimum allowed value of the slider
-     */
-    min: PropTypes.number,
-
-    /**
-     * Maximum allowed value of the slider
-     */
-    max: PropTypes.number,
-
     /**
      * pushable could be set as true to allow pushing of
      * surrounding handles when moving an handle.

components/dash-core-components/src/fragments/Dropdown.react.js

@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
 import '../components/css/Dropdown.css';
 
 import {propTypes, defaultProps} from '../components/Dropdown.react';
+import {mapOptions} from "../utils/shorthandMappers";
 
 // Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
 // Split on spaces
@@ -25,19 +26,25 @@ const DELIMETER = ',';
 export default class Dropdown extends Component {
     constructor(props) {
         super(props);
+        const formattedOptions = mapOptions(props.options)
+
         this.state = {
+            options: formattedOptions,
             filterOptions: createFilterOptions({
-                options: props.options,
+                options: formattedOptions,
                 tokenizer: TOKENIZER,
             }),
         };
     }
 
     UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.options !== this.props.options) {
+            const formattedOptions = mapOptions(newProps.options)
+
             this.setState({
+                options: formattedOptions,
                 filterOptions: createFilterOptions({
-                    options: newProps.options,
+                    options: formattedOptions,
                     tokenizer: TOKENIZER,
                 }),
             });
@@ -49,19 +56,19 @@ export default class Dropdown extends Component {
             id,
             clearable,
             multi,
-            options,
             setProps,
             style,
             loading_state,
             value,
         } = this.props;
-        const {filterOptions} = this.state;
+        const {options, filterOptions} = this.state;
         let selectedValue;
         if (type(value) === 'array') {
             selectedValue = value.join(DELIMETER);
         } else {
             selectedValue = value;
         }
+
         return (
             <div
                 id={id}
@@ -98,7 +105,7 @@ export default class Dropdown extends Component {
                     backspaceRemoves={clearable}
                     deleteRemoves={clearable}
                     inputProps={{autoComplete: 'off'}}
-                    {...omit(['setProps', 'value'], this.props)}
+                    {...omit(['setProps', 'value', 'options'], this.props)}
                 />
             </div>
         );