internal PR for squashing (#7)

* update Checklist, Dropdown, RangeSlider to accept optional shorthands * update Checklist, RadioItems - added inline props and shorthand options data, update DataTable - params order changed for shorthand support, added TODO * fill component id if not given * fix Dropdown props to accept array of string * remove comments * fix lint issues * generating seed for component id * lint fix in dash-table * lint fix * remove inline props and lint fix * broken eslint 😬 * prettier fix * set random id inside dash dependency * lint fixes * bug fix * add inline styling support * fix bugs * add column populating in dash-table * disable restricting dependency type * fix radio options type check * add comments to inline props * add tests for shorthands * remove unused imports * remove tests, refactor assign * use ramda.type instead of typeof * backup commit * add auto generating marks to RangeSlider & Slider * add number support for shorthanded options - Checklist, Dropdown * some refactor to get react-docgen working, slider props re-arrange * fix unit test - remove outdated part * update props comment Co-authored-by: Chris Parmer <chris@plot.ly> * fix feedback comments * fix some issues in Checklist, DataTable props * pylint fix * Apply suggestions from code review Co-authored-by: Chris Parmer <chris@plot.ly> * copy paste ProTypes to get doc-gen working * Test Slider and RangeSlider shorthand properties * Test Dropdown shorthand properties * Remove unnecessary imports * random seed moved out to global scope, the test for set_random_id was implemented * fix slider markers - respect steps given * assert comparision is fixed * fix slider issues * Add dropdown option sanitization to some additional required places * Convert labels to strings when an Ojbect is passed as options * Add more variants to Dropdown shorthand test * Extend Slider tests * Add test for Dropdown array value type * fix: update inline description & style * chore: pass black format * chore: react doc-gen fix & flake fix * chore: rename test file names to avoid conflict * Handle undefined options in Dropdown * fix: the case when truncated out input marks handled * fix: correct step calculations implemented for sliders * fix: removed Start and End prefix / suffix from labels on Slider * chore: add labels to dropdown tests * chore: lint fix * fix: dropdown options for test * chore: prettier 😪 * bump dash-renderer to v1.11.0 This new version is not important for most dash users, only dash-embedded, and they get the renderer elsewhere; but as is there's a mismatch between the local and CDN versions of the renderer * fix: removed a test file which was causing percy tests fail * fix: defining emptiness of dictionary implemented correctly, which fixes the disappearing of explicitely given marks * fix: omit 'step' from props * chore: update props description * chore: remove unnecessary prop type checker * fix: range slider test corrected, formatted to have some margins * fix: the test_ddsh001_dropdown_shorthand_properties test restored back and the DropDowns propTypes are fixed * fix: added bool type to CheckList label/value and RadioItem label/value * fix: the edited JS files are reformatted using lint * feat: implemented SI Units format for unit values of slider * feat: added tests to cover slider SI Units format for unit values * chore: eslint fix * fix: the test adopted to propsTypes which now accepts bool for several components * fix: slider numbers whose ten factor is less than 3 and bigger than -3 are not formatted, so that they can have floating numebrs * fix: lint issue fixed * fix: explicit null prevents auto generating marks in sliders * fix: add snapshot for set_auto_id dependency link and asserts * fix: test marks=None and SI units format * fix: test_persistence - give step=1 to expect integer value output, otherwise 0.1 will be auto assigned * fix: checking RadioItems and Checklist to accept new propTypes added in tests Co-authored-by: workaholicpanda <> Co-authored-by: Chris Parmer <chris@plot.ly> Co-authored-by: Szabolcs Markó <akksi@akksi.eu> Co-authored-by: alexcjohnson <alex@plot.ly>
plotly · Sep 18, 2021 · c70ad1e · c70ad1e
1 parent d5df9a7
commit c70ad1e
Show file tree

Hide file tree

Showing 30 changed files with 981 additions and 222 deletions.
diff --git a/components/dash-core-components/package-lock.json b/components/dash-core-components/package-lock.json
diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import {append, includes, without} from 'ramda';
 import React, {Component} from 'react';
+import {sanitizeOptions} from '../utils/optionTypes';
 
 /**
  * Checklist is a component that encapsulates several checkboxes.
@@ -22,8 +23,8 @@ export default class Checklist extends Component {
             style,
             loading_state,
             value,
+            inline,
         } = this.props;
-
         return (
             <div
                 data-dash-is-loading={
@@ -33,77 +34,126 @@ export default class Checklist extends Component {
                 style={style}
                 className={className}
             >
-                {options.map(option => (
-                    <label
-                        key={option.value}
-                        style={labelStyle}
-                        className={labelClassName}
-                    >
-                        <input
-                            checked={includes(option.value, value)}
-                            className={inputClassName}
-                            disabled={Boolean(option.disabled)}
-                            style={inputStyle}
-                            type="checkbox"
-                            onChange={() => {
-                                let newValue;
-                                if (includes(option.value, value)) {
-                                    newValue = without([option.value], value);
-                                } else {
-                                    newValue = append(option.value, value);
-                                }
-                                setProps({value: newValue});
-                            }}
-                        />
-                        {option.label}
-                    </label>
-                ))}
+                {sanitizeOptions(options).map(option => {
+                    return (
+                        <label
+                            key={option.value}
+                            style={Object.assign(
+                                {},
+                                labelStyle,
+                                inline ? {display: 'inline-block'} : {}
+                            )}
+                            className={labelClassName}
+                        >
+                            <input
+                                checked={includes(option.value, value)}
+                                className={inputClassName}
+                                disabled={Boolean(option.disabled)}
+                                style={inputStyle}
+                                type="checkbox"
+                                onChange={() => {
+                                    let newValue;
+                                    if (includes(option.value, value)) {
+                                        newValue = without(
+                                            [option.value],
+                                            value
+                                        );
+                                    } else {
+                                        newValue = append(option.value, value);
+                                    }
+                                    setProps({value: newValue});
+                                }}
+                            />
+                            {option.label}
+                        </label>
+                    );
+                })}
             </div>
         );
     }
 }
 
 Checklist.propTypes = {
-    /**
-     * 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,
-        })
-    ),
+    options: PropTypes.oneOfType([
+        /**
+         * Array of options where the label and the value are the same thing - [string|number|bool]
+         */
+        PropTypes.arrayOf(
+            PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number,
+                PropTypes.bool,
+            ])
+        ),
+        /**
+         * Simpler `options` representation in dictionary format. The order is not guaranteed.
+         * {`value1`: `label1`, `value2`: `label2`, ... }
+         * which is equal to
+         * [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
+         */
+        PropTypes.object,
+        /**
+         * An array of options {label: [string|number], value: [string|number]},
+         * an optional disabled field can be used for each option
+         */
+        PropTypes.arrayOf(
+            PropTypes.exact({
+                /**
+                 * The option's label
+                 */
+                label: PropTypes.oneOfType([
+                    PropTypes.string,
+                    PropTypes.number,
+                    PropTypes.bool,
+                ]).isRequired,
+
+                /**
+                 * The value of the option. This value
+                 * corresponds to the items specified in the
+                 * `value` property.
+                 */
+                value: PropTypes.oneOfType([
+                    PropTypes.string,
+                    PropTypes.number,
+                    PropTypes.bool,
+                ]).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 currently selected value
      */
     value: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+            PropTypes.bool,
+        ])
     ),
 
+    /**
+     * 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,
+
     /**
      * The class of the container (div)
      */
@@ -187,6 +237,13 @@ Checklist.propTypes = {
      * session: window.sessionStorage, data is cleared once the browser quit.
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
+    /**
+     * Indicates whether labelStyle should be inline or not
+     * True: Automatically set { 'display': 'inline-block' } to labelStyle
+     * False: No additional styles are passed into labelStyle.
+     */
+    inline: PropTypes.bool,
 };
 
 Checklist.defaultProps = {
@@ -198,4 +255,5 @@ Checklist.defaultProps = {
     value: [],
     persisted_props: ['value'],
     persistence_type: 'local',
+    inline: false,
 };
diff --git a/components/dash-core-components/src/components/Dropdown.react.js b/components/dash-core-components/src/components/Dropdown.react.js
@@ -25,46 +25,65 @@ export default class Dropdown extends Component {
 }
 
 Dropdown.propTypes = {
-    /**
-     * 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,
-        })
-    ),
+    options: PropTypes.oneOfType([
+        /**
+         * Array of options where the label and the value are the same thing - [string|number|bool]
+         */
+        PropTypes.arrayOf(
+            PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number,
+                PropTypes.bool,
+            ])
+        ),
+        /**
+         * Simpler `options` representation in dictionary format. The order is not guaranteed.
+         * {`value1`: `label1`, `value2`: `label2`, ... }
+         * which is equal to
+         * [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
+         */
+        PropTypes.object,
+        /**
+         * An array of options {label: [string|number], value: [string|number]},
+         * an optional disabled field can be used for each option
+         */
+        PropTypes.arrayOf(
+            PropTypes.exact({
+                /**
+                 * The option's label
+                 */
+                label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+                    .isRequired,
+
+                /**
+                 * The value of the option. This value
+                 * corresponds to the items specified in the
+                 * `value` property.
+                 */
+                value: PropTypes.oneOfType([
+                    PropTypes.string,
+                    PropTypes.number,
+                    PropTypes.bool,
+                ]).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)
@@ -77,11 +96,23 @@ Dropdown.propTypes = {
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number,
+        PropTypes.bool,
         PropTypes.arrayOf(
-            PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+            PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number,
+                PropTypes.bool,
+            ])
         ),
     ]),
 
+    /**
+     * 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,
+
     /**
      * height of each option. Can be increased when label lengths would wrap around
      */