From c5ebf3bd29d76fd5f0e091b2894346ea926369a7 Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Mon, 13 Dec 2021 02:14:46 -0500 Subject: [PATCH 01/15] Adding prop reorder exceptions --- dash/development/_py_components_generation.py | 20 +++++++++++++++++-- package-lock.json | 1 + 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/dash/development/_py_components_generation.py b/dash/development/_py_components_generation.py index a9ade10760..2d2c802255 100644 --- a/dash/development/_py_components_generation.py +++ b/dash/development/_py_components_generation.py @@ -8,6 +8,15 @@ from ._all_keywords import python_keywords from .base_component import Component +REORDER_EXCEPTIONS = [ + "RangeSlider", + "Slider", + "DataTable", + "Dropdown", + "RadioItem", + "Checklist", +] + # pylint: disable=unused-argument def generate_class_string(typename, props, description, namespace): @@ -62,7 +71,11 @@ def __init__(self, {default_argtext}): super({typename}, self).__init__({argtext}) ''' - filtered_props = reorder_props(filter_props(props)) + filtered_props = ( + filter_props(props) + if typename in REORDER_EXCEPTIONS + else reorder_props(filter_props(props)) + ) wildcard_prefixes = repr(parse_wildcards(props)) list_of_valid_keys = repr(list(map(str, filtered_props.keys()))) docstring = create_docstring( @@ -122,6 +135,7 @@ def generate_class_file(typename, props, description, namespace): + "from dash.development.base_component import " + "Component, _explicitize_args\n\n\n" ) + class_string = generate_class_string(typename, props, description, namespace) file_name = "{:s}.py".format(typename) @@ -210,7 +224,9 @@ def create_docstring(component_name, props, description): Dash component docstring """ # Ensure props are ordered with children first - props = reorder_props(props=props) + props = ( + props if component_name in REORDER_EXCEPTIONS else reorder_props(props=props) + ) return ( "A{n} {name} component.\n{description}\n\nKeyword arguments:\n{args}" diff --git a/package-lock.json b/package-lock.json index e890b457f6..987957cfd7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,7 @@ "requires": true, "packages": { "": { + "name": "dash", "license": "UNLICENSED", "dependencies": { "npm-run-all": "4.1.5" From 1e22cca9203f3321221faadf927a6f7dc64e39c0 Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Thu, 16 Dec 2021 02:19:20 -0500 Subject: [PATCH 02/15] Reworking prop order flag --- components/dash-core-components/package.json | 2 +- components/dash-html-components/package.json | 2 +- components/dash-table/package.json | 2 +- dash/development/_py_components_generation.py | 26 ++++++++++++------- dash/development/_r_components_generation.py | 7 ++++- dash/development/component_generator.py | 23 +++++++++++++--- dash/development/component_loader.py | 2 +- 7 files changed, 46 insertions(+), 18 deletions(-) diff --git a/components/dash-core-components/package.json b/components/dash-core-components/package.json index c0123f2165..dbc3d345ed 100644 --- a/components/dash-core-components/package.json +++ b/components/dash-core-components/package.json @@ -25,7 +25,7 @@ "test:pyimport": "python -m unittest tests/test_dash_import.py", "prebuild:js": "cp node_modules/plotly.js/dist/plotly.min.js dash_core_components_base/plotly.min.js", "build:js": "webpack --mode production", - "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components", + "build:backends": "cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,DataTable,Dropdown,RadioItems,Checklist --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components", "build": "run-s prepublishOnly build:js build:backends", "postbuild": "es-check es5 dash_core_components/*.js", "build:watch": "watch 'npm run build' src", diff --git a/components/dash-html-components/package.json b/components/dash-html-components/package.json index 2ba0298580..43ef55c417 100644 --- a/components/dash-html-components/package.json +++ b/components/dash-html-components/package.json @@ -19,7 +19,7 @@ "uninstall-local": "pip uninstall dash-html-components -y", "lint": "eslint src scripts", "build:js": "webpack --mode production", - "build:backends": "dash-generate-components ./src/components dash_html_components -p package-info.json && cp dash_html_components_base/** dash_html_components && dash-generate-components ./src/components dash_html_components -p package-info.json --r-prefix 'html' --r-suggests 'dash,dashCoreComponents' --jl-prefix 'html' && black dash_html_components", + "build:backends": "cp dash_html_components_base/** dash_html_components && dash-generate-components ./src/components dash_html_components -p package-info.json --r-prefix 'html' --r-suggests 'dash,dashCoreComponents' --jl-prefix 'html' && black dash_html_components", "build": "npm run build:js && npm run build:backends", "postbuild": "es-check es5 dash_html_components/*.js", "build:watch": "watch 'npm run build' src", diff --git a/components/dash-table/package.json b/components/dash-table/package.json index 251a4a1b2e..a6d11b975f 100644 --- a/components/dash-table/package.json +++ b/components/dash-table/package.json @@ -17,7 +17,7 @@ "private::build:js": "run-s \"private::build -- --mode production\"", "private::build:js-test": "run-s \"private::build -- --mode development --config webpack.test.config.js\"", "private::build:js-test-watch": "run-s \"private::build -- --mode development --config webpack.test.config.js --watch\"", - "private::build:backends": "dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json && cp dash_table_base/** dash_table/ && dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json --r-prefix 'dash' --r-suggests 'dash' --jl-prefix 'dash' && black dash_table", + "private::build:backends": "cp dash_table_base/** dash_table/ && dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json -k DataTable --r-prefix 'dash' --r-suggests 'dash' --jl-prefix 'dash' && black dash_table", "private::format.ts": "npm run private::lint.ts -- --fix", "private::format.prettier": "prettier --config .prettierrc --write \"{src,tests,demo}/**/*.{js,ts,tsx}\"", "private::format.black": "black dash_table_base tests", diff --git a/dash/development/_py_components_generation.py b/dash/development/_py_components_generation.py index 2d2c802255..2695549ffb 100644 --- a/dash/development/_py_components_generation.py +++ b/dash/development/_py_components_generation.py @@ -19,7 +19,9 @@ # pylint: disable=unused-argument -def generate_class_string(typename, props, description, namespace): +def generate_class_string( + typename, props, description, namespace, prop_reorder_exceptions +): """Dynamically generate class strings to have nicely formatted docstrings, keyword arguments, and repr. Inspired by http://jameso.be/2013/08/06/namedtuple.html @@ -73,7 +75,8 @@ def __init__(self, {default_argtext}): filtered_props = ( filter_props(props) - if typename in REORDER_EXCEPTIONS + if (prop_reorder_exceptions is not None and typename in prop_reorder_exceptions) + or "ALL" in prop_reorder_exceptions else reorder_props(filter_props(props)) ) wildcard_prefixes = repr(parse_wildcards(props)) @@ -119,7 +122,9 @@ def __init__(self, {default_argtext}): ) -def generate_class_file(typename, props, description, namespace): +def generate_class_file( + typename, props, description, namespace, prop_reorder_exceptions=None +): """Generate a Python class file (.py) given a class string. Parameters ---------- @@ -127,6 +132,7 @@ def generate_class_file(typename, props, description, namespace): props description namespace + prop_reorder_exceptions Returns ------- """ @@ -136,7 +142,9 @@ def generate_class_file(typename, props, description, namespace): + "Component, _explicitize_args\n\n\n" ) - class_string = generate_class_string(typename, props, description, namespace) + class_string = generate_class_string( + typename, props, description, namespace, prop_reorder_exceptions + ) file_name = "{:s}.py".format(typename) file_path = os.path.join(namespace, file_name) @@ -176,7 +184,7 @@ def generate_classes_files(project_shortname, metadata, *component_generators): return components -def generate_class(typename, props, description, namespace): +def generate_class(typename, props, description, namespace, prop_reorder_exceptions): """Generate a Python class object given a class string. Parameters ---------- @@ -187,7 +195,9 @@ def generate_class(typename, props, description, namespace): Returns ------- """ - string = generate_class_string(typename, props, description, namespace) + string = generate_class_string( + typename, props, description, namespace, prop_reorder_exceptions + ) scope = {"Component": Component, "_explicitize_args": _explicitize_args} # pylint: disable=exec-used exec(string, scope) @@ -223,10 +233,6 @@ def create_docstring(component_name, props, description): str Dash component docstring """ - # Ensure props are ordered with children first - props = ( - props if component_name in REORDER_EXCEPTIONS else reorder_props(props=props) - ) return ( "A{n} {name} component.\n{description}\n\nKeyword arguments:\n{args}" diff --git a/dash/development/_r_components_generation.py b/dash/development/_r_components_generation.py index 9afcef4629..65ac56a98c 100644 --- a/dash/development/_r_components_generation.py +++ b/dash/development/_r_components_generation.py @@ -452,7 +452,12 @@ def write_help_file(name, props, description, prefix, rpkg_data): # pylint: disable=too-many-arguments def write_class_file( - name, props, description, project_shortname, prefix=None, rpkg_data=None + name, + props, + description, + project_shortname, + prefix=None, + rpkg_data=None, ): props = reorder_props(props=props) diff --git a/dash/development/component_generator.py b/dash/development/component_generator.py index 79b95315aa..81813a652b 100644 --- a/dash/development/component_generator.py +++ b/dash/development/component_generator.py @@ -8,7 +8,6 @@ import argparse import shutil import functools - import pkg_resources import yaml @@ -20,7 +19,6 @@ from ._jl_components_generation import generate_struct_file from ._jl_components_generation import generate_module - reserved_words = [ "UNDEFINED", "REQUIRED", @@ -38,7 +36,7 @@ class _CombinedFormatter( pass -# pylint: disable=too-many-locals, too-many-arguments +# pylint: disable=too-many-locals, too-many-arguments, too-many-branches def generate_components( components_source, project_shortname, @@ -50,6 +48,7 @@ def generate_components( rsuggests="", jlprefix=None, metadata=None, + keep_prop_order=None, ): project_shortname = project_shortname.replace("-", "_").rstrip("/\\") @@ -119,6 +118,14 @@ def generate_components( functools.partial(generate_struct_file, prefix=jlprefix) ) + if keep_prop_order is not None: + keep_prop_order = [ + component.strip(" ") for component in keep_prop_order.split(",") + ] + generator_methods[0] = functools.partial( + generate_class_file, prop_reorder_exceptions=keep_prop_order + ) + components = generate_classes_files(project_shortname, metadata, *generator_methods) with open(os.path.join(project_shortname, "metadata.json"), "w") as f: @@ -201,6 +208,15 @@ def component_build_arg_parser(): help="Specify a prefix for Dash for R component names, write " "components to R dir, create R package.", ) + parser.add_argument( + "-k", + "--keep-prop-order", + default=None, + help="Specify a comma-separated list of components which will use the prop " + "order described in the component proptypes instead of alphabetically reordered " + "props. Pass the 'ALL' keyword to have every component retain " + "its original prop order.", + ) return parser @@ -216,6 +232,7 @@ def cli(): rimports=args.r_imports, rsuggests=args.r_suggests, jlprefix=args.jl_prefix, + keep_prop_order=args.keep_prop_order, ) diff --git a/dash/development/component_loader.py b/dash/development/component_loader.py index e66ddc65a7..352e100736 100644 --- a/dash/development/component_loader.py +++ b/dash/development/component_loader.py @@ -52,7 +52,7 @@ def load_components(metadata_path, namespace="default_namespace"): # the name of the component atm. name = componentPath.split("/").pop().split(".")[0] component = generate_class( - name, componentData["props"], componentData["description"], namespace + name, componentData["props"], componentData["description"], namespace, None ) components.append(component) From 6db959e182092a65ad2b0ed4d20a54a2651788ec Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Thu, 16 Dec 2021 02:34:23 -0500 Subject: [PATCH 03/15] Removing unnecessary variable --- dash/development/_py_components_generation.py | 9 --------- 1 file changed, 9 deletions(-) diff --git a/dash/development/_py_components_generation.py b/dash/development/_py_components_generation.py index 2695549ffb..af9c805c0f 100644 --- a/dash/development/_py_components_generation.py +++ b/dash/development/_py_components_generation.py @@ -8,15 +8,6 @@ from ._all_keywords import python_keywords from .base_component import Component -REORDER_EXCEPTIONS = [ - "RangeSlider", - "Slider", - "DataTable", - "Dropdown", - "RadioItem", - "Checklist", -] - # pylint: disable=unused-argument def generate_class_string( From 1db2f6e2ecf5cb56157e6e5ec53a61dac01b68f4 Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Thu, 16 Dec 2021 02:48:37 -0500 Subject: [PATCH 04/15] Reverting build:backends script changes --- components/dash-core-components/package.json | 2 +- components/dash-html-components/package.json | 2 +- components/dash-table/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/dash-core-components/package.json b/components/dash-core-components/package.json index dbc3d345ed..f12d526804 100644 --- a/components/dash-core-components/package.json +++ b/components/dash-core-components/package.json @@ -25,7 +25,7 @@ "test:pyimport": "python -m unittest tests/test_dash_import.py", "prebuild:js": "cp node_modules/plotly.js/dist/plotly.min.js dash_core_components_base/plotly.min.js", "build:js": "webpack --mode production", - "build:backends": "cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,DataTable,Dropdown,RadioItems,Checklist --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components", + "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,DataTable,Dropdown,RadioItems,Checklist --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components", "build": "run-s prepublishOnly build:js build:backends", "postbuild": "es-check es5 dash_core_components/*.js", "build:watch": "watch 'npm run build' src", diff --git a/components/dash-html-components/package.json b/components/dash-html-components/package.json index 43ef55c417..2ba0298580 100644 --- a/components/dash-html-components/package.json +++ b/components/dash-html-components/package.json @@ -19,7 +19,7 @@ "uninstall-local": "pip uninstall dash-html-components -y", "lint": "eslint src scripts", "build:js": "webpack --mode production", - "build:backends": "cp dash_html_components_base/** dash_html_components && dash-generate-components ./src/components dash_html_components -p package-info.json --r-prefix 'html' --r-suggests 'dash,dashCoreComponents' --jl-prefix 'html' && black dash_html_components", + "build:backends": "dash-generate-components ./src/components dash_html_components -p package-info.json && cp dash_html_components_base/** dash_html_components && dash-generate-components ./src/components dash_html_components -p package-info.json --r-prefix 'html' --r-suggests 'dash,dashCoreComponents' --jl-prefix 'html' && black dash_html_components", "build": "npm run build:js && npm run build:backends", "postbuild": "es-check es5 dash_html_components/*.js", "build:watch": "watch 'npm run build' src", diff --git a/components/dash-table/package.json b/components/dash-table/package.json index a6d11b975f..71336f1fe0 100644 --- a/components/dash-table/package.json +++ b/components/dash-table/package.json @@ -17,7 +17,7 @@ "private::build:js": "run-s \"private::build -- --mode production\"", "private::build:js-test": "run-s \"private::build -- --mode development --config webpack.test.config.js\"", "private::build:js-test-watch": "run-s \"private::build -- --mode development --config webpack.test.config.js --watch\"", - "private::build:backends": "cp dash_table_base/** dash_table/ && dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json -k DataTable --r-prefix 'dash' --r-suggests 'dash' --jl-prefix 'dash' && black dash_table", + "private::build:backends": "dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json && cp dash_table_base/** dash_table/ && dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json -k DataTable --r-prefix 'dash' --r-suggests 'dash' --jl-prefix 'dash' && black dash_table", "private::format.ts": "npm run private::lint.ts -- --fix", "private::format.prettier": "prettier --config .prettierrc --write \"{src,tests,demo}/**/*.{js,ts,tsx}\"", "private::format.black": "black dash_table_base tests", From 73a03e4f9327849894ca8163629b87ef7458e81b Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Thu, 16 Dec 2021 03:26:38 -0500 Subject: [PATCH 05/15] Adding operator --- dash/development/_py_components_generation.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dash/development/_py_components_generation.py b/dash/development/_py_components_generation.py index af9c805c0f..7440f9a691 100644 --- a/dash/development/_py_components_generation.py +++ b/dash/development/_py_components_generation.py @@ -67,7 +67,7 @@ def __init__(self, {default_argtext}): filtered_props = ( filter_props(props) if (prop_reorder_exceptions is not None and typename in prop_reorder_exceptions) - or "ALL" in prop_reorder_exceptions + or (prop_reorder_exceptions is not None and "ALL" in prop_reorder_exceptions) else reorder_props(filter_props(props)) ) wildcard_prefixes = repr(parse_wildcards(props)) From 0240768bc25772e184692d100046ba9f5a4dfd7f Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Thu, 16 Dec 2021 04:49:13 -0500 Subject: [PATCH 06/15] Adding default positional arg --- dash/development/_py_components_generation.py | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/dash/development/_py_components_generation.py b/dash/development/_py_components_generation.py index 7440f9a691..a557f10e95 100644 --- a/dash/development/_py_components_generation.py +++ b/dash/development/_py_components_generation.py @@ -11,7 +11,7 @@ # pylint: disable=unused-argument def generate_class_string( - typename, props, description, namespace, prop_reorder_exceptions + typename, props, description, namespace, prop_reorder_exceptions=None ): """Dynamically generate class strings to have nicely formatted docstrings, keyword arguments, and repr. @@ -22,6 +22,7 @@ def generate_class_string( props description namespace + prop_reorder_exceptions Returns ------- string @@ -175,7 +176,9 @@ def generate_classes_files(project_shortname, metadata, *component_generators): return components -def generate_class(typename, props, description, namespace, prop_reorder_exceptions): +def generate_class( + typename, props, description, namespace, prop_reorder_exceptions=None +): """Generate a Python class object given a class string. Parameters ---------- From 846bce0aad462ebbbba490c4a1fc62273f7124f9 Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Thu, 16 Dec 2021 13:55:40 -0500 Subject: [PATCH 07/15] Updating docstring function --- dash/development/_py_components_generation.py | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/dash/development/_py_components_generation.py b/dash/development/_py_components_generation.py index a557f10e95..40018a42c0 100644 --- a/dash/development/_py_components_generation.py +++ b/dash/development/_py_components_generation.py @@ -74,7 +74,10 @@ def __init__(self, {default_argtext}): wildcard_prefixes = repr(parse_wildcards(props)) list_of_valid_keys = repr(list(map(str, filtered_props.keys()))) docstring = create_docstring( - component_name=typename, props=filtered_props, description=description + component_name=typename, + props=filtered_props, + description=description, + prop_reorder_exceptions=prop_reorder_exceptions, ).replace("\r\n", "\n") prohibit_events(props) @@ -212,7 +215,7 @@ def required_props(props): return [prop_name for prop_name, prop in list(props.items()) if prop["required"]] -def create_docstring(component_name, props, description): +def create_docstring(component_name, props, description, prop_reorder_exceptions=None): """Create the Dash component docstring. Parameters ---------- @@ -227,6 +230,16 @@ def create_docstring(component_name, props, description): str Dash component docstring """ + # Ensure props are ordered with children first + props = ( + props + if ( + prop_reorder_exceptions is not None + and component_name in prop_reorder_exceptions + ) + or (prop_reorder_exceptions is not None and "ALL" in prop_reorder_exceptions) + else reorder_props(props) + ) return ( "A{n} {name} component.\n{description}\n\nKeyword arguments:\n{args}" From c58d0a814ea5135f7d3da006ab135631f4d6f6f5 Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Fri, 17 Dec 2021 16:05:32 -0500 Subject: [PATCH 08/15] Updated radioitems prop order --- .../src/components/RadioItems.react.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/components/dash-core-components/src/components/RadioItems.react.js b/components/dash-core-components/src/components/RadioItems.react.js index fe6d8e42c1..48bbd8978c 100644 --- a/components/dash-core-components/src/components/RadioItems.react.js +++ b/components/dash-core-components/src/components/RadioItems.react.js @@ -131,13 +131,6 @@ RadioItems.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, - /** * The currently selected value */ @@ -147,6 +140,13 @@ RadioItems.propTypes = { 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 style of the container (div) */ From 5f4c8c76ccacedfc1889b0c1b600c61173eb2455 Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Wed, 12 Jan 2022 13:05:09 -0500 Subject: [PATCH 09/15] Prop order changes for dcc --- components/dash-core-components/package.json | 2 +- .../src/components/Dropdown.react.js | 50 ++++++++-------- .../src/components/RadioItems.react.js | 22 +++---- .../src/components/RangeSlider.react.js | 60 +++++++++---------- .../src/components/Slider.react.js | 42 ++++++------- 5 files changed, 88 insertions(+), 88 deletions(-) diff --git a/components/dash-core-components/package.json b/components/dash-core-components/package.json index f12d526804..f7108f72ec 100644 --- a/components/dash-core-components/package.json +++ b/components/dash-core-components/package.json @@ -25,7 +25,7 @@ "test:pyimport": "python -m unittest tests/test_dash_import.py", "prebuild:js": "cp node_modules/plotly.js/dist/plotly.min.js dash_core_components_base/plotly.min.js", "build:js": "webpack --mode production", - "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,DataTable,Dropdown,RadioItems,Checklist --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components", + "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,Dropdown,RadioItems,Checklist --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components", "build": "run-s prepublishOnly build:js build:backends", "postbuild": "es-check es5 dash_core_components/*.js", "build:watch": "watch 'npm run build' src", diff --git a/components/dash-core-components/src/components/Dropdown.react.js b/components/dash-core-components/src/components/Dropdown.react.js index f329443b8d..e8187648af 100644 --- a/components/dash-core-components/src/components/Dropdown.react.js +++ b/components/dash-core-components/src/components/Dropdown.react.js @@ -107,28 +107,31 @@ 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. + * If true, the user can select multiple values */ - id: PropTypes.string, + multi: PropTypes.bool, /** - * height of each option. Can be increased when label lengths would wrap around + * Whether or not the dropdown is "clearable", that is, whether or + * not a small "x" appears on the right of the dropdown that removes + * the selected value. */ - optionHeight: PropTypes.number, + clearable: PropTypes.bool, /** - * className of the dropdown element + * Whether to enable the searching feature or not */ - className: PropTypes.string, + searchable: PropTypes.bool, /** - * Whether or not the dropdown is "clearable", that is, whether or - * not a small "x" appears on the right of the dropdown that removes - * the selected value. + * The value typed in the DropDown for searching. */ - clearable: PropTypes.bool, + search_value: PropTypes.string, + + /** + * The grey, default text shown when no option is selected + */ + placeholder: PropTypes.string, /** * If true, this dropdown is disabled and the selection cannot be changed. @@ -136,35 +139,32 @@ Dropdown.propTypes = { disabled: PropTypes.bool, /** - * If true, the user can select multiple values + * height of each option. Can be increased when label lengths would wrap around */ - multi: PropTypes.bool, + optionHeight: PropTypes.number, /** - * The grey, default text shown when no option is selected + * Defines CSS styles which will override styles previously set. */ - placeholder: PropTypes.string, + style: PropTypes.object, /** - * Whether to enable the searching feature or not + * className of the dropdown element */ - searchable: PropTypes.bool, + className: PropTypes.string, /** - * The value typed in the DropDown for searching. + * 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. */ - search_value: PropTypes.string, + id: PropTypes.string, /** * Dash-assigned callback that gets fired when the input changes */ setProps: PropTypes.func, - /** - * Defines CSS styles which will override styles previously set. - */ - style: PropTypes.object, - /** * Object that holds the loading state object coming from dash-renderer */ diff --git a/components/dash-core-components/src/components/RadioItems.react.js b/components/dash-core-components/src/components/RadioItems.react.js index 48bbd8978c..2489bacb57 100644 --- a/components/dash-core-components/src/components/RadioItems.react.js +++ b/components/dash-core-components/src/components/RadioItems.react.js @@ -141,11 +141,11 @@ RadioItems.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. + * Indicates whether labelStyle should be inline or not + * True: Automatically set { 'display': 'inline-block' } to labelStyle + * False: No additional styles are passed into labelStyle. */ - id: PropTypes.string, + inline: PropTypes.bool, /** * The style of the container (div) @@ -179,6 +179,13 @@ RadioItems.propTypes = { */ labelClassName: PropTypes.string, + /** + * 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, + /** * Dash-assigned callback that gets fired when the value changes. */ @@ -230,13 +237,6 @@ RadioItems.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, }; RadioItems.defaultProps = { diff --git a/components/dash-core-components/src/components/RangeSlider.react.js b/components/dash-core-components/src/components/RangeSlider.react.js index 61cc795b38..6db2a43b76 100644 --- a/components/dash-core-components/src/components/RangeSlider.react.js +++ b/components/dash-core-components/src/components/RangeSlider.react.js @@ -34,13 +34,6 @@ RangeSlider.propTypes = { */ step: PropTypes.number, - /** - * 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, - /** * Marks on the slider. * The key determines the position (a number), @@ -75,20 +68,23 @@ RangeSlider.propTypes = { allowCross: PropTypes.bool, /** - * Additional CSS class for the root DOM node + * pushable could be set as true to allow pushing of + * surrounding handles when moving an handle. + * When set to a number, the number will be the + * minimum ensured distance between handles. */ - className: PropTypes.string, + pushable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), /** - * Determine how many ranges to render, and multiple handles - * will be rendered (number + 1). + * If true, the handles can't be moved. */ - count: PropTypes.number, + disabled: PropTypes.bool, /** - * If true, the handles can't be moved. + * Determine how many ranges to render, and multiple handles + * will be rendered (number + 1). */ - disabled: PropTypes.bool, + count: PropTypes.number, /** * When the step value is greater than 1, @@ -103,14 +99,6 @@ RangeSlider.propTypes = { */ included: PropTypes.bool, - /** - * pushable could be set as true to allow pushing of - * surrounding handles when moving an handle. - * When set to a number, the number will be the - * minimum ensured distance between handles. - */ - pushable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), - /** * Configuration for tooltips describing the current slider values */ @@ -139,6 +127,17 @@ RangeSlider.propTypes = { ]), }), + /** + * Determines when the component should update its `value` + * property. If `mouseup` (the default) then the slider + * will only trigger its value when the user has finished + * dragging the slider. If `drag`, then the slider will + * update its value continuously as it is being dragged. + * Note that for the latter case, the `drag_value` + * property could be used instead. + */ + updatemode: PropTypes.oneOf(['mouseup', 'drag']), + /** * If true, the slider will be vertical */ @@ -150,15 +149,16 @@ RangeSlider.propTypes = { verticalHeight: PropTypes.number, /** - * Determines when the component should update its `value` - * property. If `mouseup` (the default) then the slider - * will only trigger its value when the user has finished - * dragging the slider. If `drag`, then the slider will - * update its value continuously as it is being dragged. - * Note that for the latter case, the `drag_value` - * property could be used instead. + * Additional CSS class for the root DOM node */ - updatemode: PropTypes.oneOf(['mouseup', 'drag']), + className: PropTypes.string, + + /** + * 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, /** * Dash-assigned callback that gets fired when the value or drag_value changes. diff --git a/components/dash-core-components/src/components/Slider.react.js b/components/dash-core-components/src/components/Slider.react.js index 566e3e8b9f..00c6c41a18 100644 --- a/components/dash-core-components/src/components/Slider.react.js +++ b/components/dash-core-components/src/components/Slider.react.js @@ -33,13 +33,6 @@ Slider.propTypes = { */ step: PropTypes.number, - /** - * 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, - /** * Marks on the slider. * The key determines the position (a number), @@ -68,11 +61,6 @@ Slider.propTypes = { */ drag_value: PropTypes.number, - /** - * Additional CSS class for the root DOM node - */ - className: PropTypes.string, - /** * If true, the handles can't be moved. */ @@ -119,6 +107,18 @@ Slider.propTypes = { ]), }), + /** + * Determines when the component should update its `value` + * property. If `mouseup` (the default) then the slider + * will only trigger its value when the user has finished + * dragging the slider. If `drag`, then the slider will + * update its value continuously as it is being dragged. + * If you want different actions during and after drag, + * leave `updatemode` as `mouseup` and use `drag_value` + * for the continuously updating value. + */ + updatemode: PropTypes.oneOf(['mouseup', 'drag']), + /** * If true, the slider will be vertical */ @@ -130,16 +130,16 @@ Slider.propTypes = { verticalHeight: PropTypes.number, /** - * Determines when the component should update its `value` - * property. If `mouseup` (the default) then the slider - * will only trigger its value when the user has finished - * dragging the slider. If `drag`, then the slider will - * update its value continuously as it is being dragged. - * If you want different actions during and after drag, - * leave `updatemode` as `mouseup` and use `drag_value` - * for the continuously updating value. + * Additional CSS class for the root DOM node */ - updatemode: PropTypes.oneOf(['mouseup', 'drag']), + className: PropTypes.string, + + /** + * 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, /** * Dash-assigned callback that gets fired when the value or drag_value changes. From 1737bc6fa4d85e8ccfff59aba372c7823405ea4a Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Wed, 12 Jan 2022 13:56:54 -0500 Subject: [PATCH 10/15] Updated DataTable prop order --- .../src/dash-table/dash/DataTable.js | 724 +++++++++--------- 1 file changed, 362 insertions(+), 362 deletions(-) diff --git a/components/dash-table/src/dash-table/dash/DataTable.js b/components/dash-table/src/dash-table/dash/DataTable.js index a5babd1a21..4d9c51c0ff 100644 --- a/components/dash-table/src/dash-table/dash/DataTable.js +++ b/components/dash-table/src/dash-table/dash/DataTable.js @@ -137,6 +137,46 @@ export const propTypes = { */ columns: PropTypes.arrayOf( PropTypes.exact({ + /** + * The `id` of the column. + * The column `id` is used to match cells in data with particular columns. + * The `id` is not visible in the table. + */ + id: PropTypes.string.isRequired, + + /** + * The `name` of the column, as it appears in the column header. + * If `name` is a list of strings, then the columns + * will render with multiple headers rows. + */ + name: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.arrayOf(PropTypes.string) + ]).isRequired, + + /** + * If true, the user can select the column by clicking on the checkbox or radio button + * in the column. If there are multiple header rows, true will display the input + * on each row. + * If `last`, the input will only appear on the last header row. If `first` it will only + * appear on the first header row. These are respectively shortcut equivalents to + * `[false, ..., false, true]` and `[true, false, ..., false]`. + * If there are merged, multi-header columns then you can choose which column header + * row to display the input in by supplying an array of booleans. + * For example, `[true, false]` will display the `selectable` input on the first row, + * but now on the second row. + * If the `selectable` input appears on a merged columns, then clicking on that input + * will select *all* of the merged columns associated with it. + * The table-level prop `column_selectable` is used to determine the type of column + * selection to use. + * + */ + selectable: PropTypes.oneOfType([ + PropTypes.oneOf(['first', 'last']), + PropTypes.bool, + PropTypes.arrayOf(PropTypes.bool) + ]), + /** * If true, the user can clear the column by clicking on the `clear` * action button on the column. If there are multiple header rows, true @@ -194,19 +234,6 @@ export const propTypes = { */ editable: PropTypes.bool, - /** - * There are two `filter_options` props in the table. - * This is the column-level filter_options prop and there is - * also the table-level `filter_options` prop. - * These props determine whether the applicable filter relational - * operators will default to `sensitive` or `insensitive` comparison. - * If the column-level `filter_options` prop is set it overrides - * the table-level `filter_options` prop for that column. - */ - filter_options: PropTypes.shape({ - case: PropTypes.oneOf(['sensitive', 'insensitive']) - }), - /** * If true, the user can hide the column by clicking on the `hide` * action button on the column. If there are multiple header rows, true @@ -252,27 +279,40 @@ export const propTypes = { ]), /** - * If true, the user can select the column by clicking on the checkbox or radio button - * in the column. If there are multiple header rows, true will display the input - * on each row. - * If `last`, the input will only appear on the last header row. If `first` it will only - * appear on the first header row. These are respectively shortcut equivalents to - * `[false, ..., false, true]` and `[true, false, ..., false]`. - * If there are merged, multi-header columns then you can choose which column header - * row to display the input in by supplying an array of booleans. - * For example, `[true, false]` will display the `selectable` input on the first row, - * but now on the second row. - * If the `selectable` input appears on a merged columns, then clicking on that input - * will select *all* of the merged columns associated with it. - * The table-level prop `column_selectable` is used to determine the type of column - * selection to use. + * There are two `filter_options` props in the table. + * This is the column-level filter_options prop and there is + * also the table-level `filter_options` prop. + * These props determine whether the applicable filter relational + * operators will default to `sensitive` or `insensitive` comparison. + * If the column-level `filter_options` prop is set it overrides + * the table-level `filter_options` prop for that column. + */ + filter_options: PropTypes.shape({ + case: PropTypes.oneOf(['sensitive', 'insensitive']) + }), + + /** + * The data-type provides support for per column typing and allows for data + * validation and coercion. + * 'numeric': represents both floats and ints. + * 'text': represents a string. + * 'datetime': a string representing a date or date-time, in the form: + * 'YYYY-MM-DD HH:MM:SS.ssssss' or some truncation thereof. Years must + * have 4 digits, unless you use `validation.allow_YY: true`. Also + * accepts 'T' or 't' between date and time, and allows timezone info + * at the end. To convert these strings to Python `datetime` objects, + * use `dateutil.parser.isoparse`. In R use `parse_iso_8601` from the + * `parsedate` library. + * WARNING: these parsers do not work with 2-digit years, if you use + * `validation.allow_YY: true` and do not coerce to 4-digit years. + * And parsers that do work with 2-digit years may make a different + * guess about the century than we make on the front end. + * 'any': represents any type of data. + * Defaults to 'any' if undefined. + * * */ - selectable: PropTypes.oneOfType([ - PropTypes.oneOf(['first', 'last']), - PropTypes.bool, - PropTypes.arrayOf(PropTypes.bool) - ]), + type: PropTypes.oneOf(['any', 'numeric', 'text', 'datetime']), /** * The formatting applied to the column's data. @@ -334,23 +374,6 @@ export const propTypes = { specifier: PropTypes.string }), - /** - * The `id` of the column. - * The column `id` is used to match cells in data with particular columns. - * The `id` is not visible in the table. - */ - id: PropTypes.string.isRequired, - - /** - * The `name` of the column, as it appears in the column header. - * If `name` is a list of strings, then the columns - * will render with multiple headers rows. - */ - name: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.arrayOf(PropTypes.string) - ]).isRequired, - /** * The `presentation` to use to display data. Markdown can be used on * columns with type 'text'. See 'dropdown' for more info. @@ -411,30 +434,7 @@ export const propTypes = { * `action: 'coerce'`, will convert user input to a 4-digit year. */ allow_YY: PropTypes.bool - }), - - /** - * The data-type provides support for per column typing and allows for data - * validation and coercion. - * 'numeric': represents both floats and ints. - * 'text': represents a string. - * 'datetime': a string representing a date or date-time, in the form: - * 'YYYY-MM-DD HH:MM:SS.ssssss' or some truncation thereof. Years must - * have 4 digits, unless you use `validation.allow_YY: true`. Also - * accepts 'T' or 't' between date and time, and allows timezone info - * at the end. To convert these strings to Python `datetime` objects, - * use `dateutil.parser.isoparse`. In R use `parse_iso_8601` from the - * `parsedate` library. - * WARNING: these parsers do not work with 2-digit years, if you use - * `validation.allow_YY: true` and do not coerce to 4-digit years. - * And parsers that do work with 2-digit years may make a different - * guess about the century than we make on the front end. - * 'any': represents any type of data. - * Defaults to 'any' if undefined. - * - * - */ - type: PropTypes.oneOf(['any', 'numeric', 'text', 'datetime']) + }) }) ), @@ -449,107 +449,6 @@ export const propTypes = { column_id: PropTypes.string }), - /** - * If true, headers are included when copying from the table to different - * tabs and elsewhere. Note that headers are ignored when copying from the table onto itself and - * between two tables within the same tab. - */ - include_headers_on_copy_paste: PropTypes.bool, - - /** - * The localization specific formatting information applied to all columns in the table. - * This prop is derived from the [d3.formatLocale](https://github.com/d3/d3-format#formatLocale) data structure specification. - * When left unspecified, each individual nested prop will default to a pre-determined value. - */ - locale_format: PropTypes.exact({ - /** - * (default: ['$', '']). A list of two strings representing the - * prefix and suffix symbols. Typically used for currency, and implemented using d3's - * currency format, but you can use this for other symbols such as measurement units. - */ - symbol: PropTypes.arrayOf(PropTypes.string), - /** - * (default: '.'). The string used for the decimal separator. - */ - decimal: PropTypes.string, - /** - * (default: ','). The string used for the groups separator. - */ - group: PropTypes.string, - /** - * (default: [3]). A list of integers representing the grouping pattern. - */ - grouping: PropTypes.arrayOf(PropTypes.number), - /** - * A list of ten strings used as replacements for numbers 0-9. - */ - numerals: PropTypes.arrayOf(PropTypes.string), - /** - * (default: '%'). The string used for the percentage symbol. - */ - percent: PropTypes.string, - /** - * (default: True). Separate integers with 4-digits or less. - */ - separate_4digits: PropTypes.bool - }), - - /** - * The `markdown_options` property allows customization of the markdown cells behavior. - */ - markdown_options: PropTypes.exact({ - /** - * (default: '_blank'). The link's behavior (_blank opens the link in a - * new tab, _parent opens the link in the parent frame, _self opens the link in the - * current tab, and _top opens the link in the top frame) or a string - */ - link_target: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.oneOf(['_blank', '_parent', '_self', '_top']) - ]), - /** - * (default: False) If True, html may be used in markdown cells - * Be careful enabling html if the content being rendered can come - * from an untrusted user, as this may create an XSS vulnerability. - */ - html: PropTypes.bool - }), - - /** - * The `css` property is a way to embed CSS selectors and rules - * onto the page. - * We recommend starting with the `style_*` properties - * before using this `css` property. - * Example: - * [ - * {"selector": ".dash-spreadsheet", "rule": 'font-family: "monospace"'} - * ] - */ - css: PropTypes.arrayOf( - PropTypes.exact({ - selector: PropTypes.string.isRequired, - rule: PropTypes.string.isRequired - }) - ), - - /** - * The previous state of `data`. `data_previous` - * has the same structure as `data` and it will be updated - * whenever `data` changes, either through a callback or - * by editing the table. - * This is a read-only property: setting this property will not - * have any impact on the table. - */ - data_previous: PropTypes.arrayOf(PropTypes.object), - - /** - * The unix timestamp when the data was last edited. - * Use this property with other timestamp properties - * (such as `n_clicks_timestamp` in `dash_html_components`) - * to determine which property has changed within a callback. - */ - data_timestamp: PropTypes.number, - /** * If True, then the data in all of the cells is editable. * When `editable` is True, particular columns can be made @@ -562,75 +461,6 @@ export const propTypes = { */ editable: PropTypes.bool, - /** - * When selecting multiple cells - * (via clicking on a cell and then shift-clicking on another cell), - * `end_cell` represents the row / column coordinates and IDs of the cell - * in one of the corners of the region. - * `start_cell` represents the coordinates of the other corner. - */ - end_cell: PropTypes.exact({ - row: PropTypes.number, - column: PropTypes.number, - row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - column_id: PropTypes.string - }), - - /** - * Denotes the columns that will be used in the export data file. - * If `all`, all columns will be used (visible + hidden). If `visible`, - * only the visible columns will be used. Defaults to `visible`. - */ - export_columns: PropTypes.oneOf(['all', 'visible']), - - /** - * Denotes the type of the export data file, - * Defaults to `'none'` - */ - export_format: PropTypes.oneOf(['csv', 'xlsx', 'none']), - - /** - * Denotes the format of the headers in the export data file. - * If `'none'`, there will be no header. If `'display'`, then the header - * of the data file will be be how it is currently displayed. Note that - * `'display'` is only supported for `'xlsx'` export_format and will behave - * like `'names'` for `'csv'` export format. If `'ids'` or `'names'`, - * then the headers of data file will be the column id or the column - * names, respectively - */ - export_headers: PropTypes.oneOf(['none', 'ids', 'names', 'display']), - - /** - * `fill_width` toggles between a set of CSS for two common behaviors: - * True: The table container's width will grow to fill the available space; - * False: The table container's width will equal the width of its content. - */ - fill_width: PropTypes.bool, - - /** - * List of columns ids of the columns that are currently hidden. - * See the associated nested prop `columns.hideable`. - */ - hidden_columns: PropTypes.arrayOf(PropTypes.string), - - /** - * The ID of the table. - */ - id: PropTypes.string, - - /** - * If True, then the `active_cell` is in a focused state. - */ - is_focused: PropTypes.bool, - - /** - * If True, then column headers that have neighbors with duplicate names - * will be merged into a single cell. - * This will be applied for single column headers and multi-column - * headers. - */ - merge_duplicate_headers: PropTypes.bool, - /** * `fixed_columns` will "fix" the set of columns so that * they remain visible when scrolling horizontally across @@ -776,11 +606,6 @@ export const propTypes = { PropTypes.oneOfType([PropTypes.string, PropTypes.number]) ), - /** - * Dash-assigned callback that gets fired when the user makes changes. - */ - setProps: PropTypes.func, - /** * When selecting multiple cells * (via clicking on a cell and then shift-clicking on another cell), @@ -796,53 +621,226 @@ export const propTypes = { }), /** - * If True, then the table will be styled like a list view - * and not have borders between the columns. + * When selecting multiple cells + * (via clicking on a cell and then shift-clicking on another cell), + * `end_cell` represents the row / column coordinates and IDs of the cell + * in one of the corners of the region. + * `start_cell` represents the coordinates of the other corner. + */ + end_cell: PropTypes.exact({ + row: PropTypes.number, + column: PropTypes.number, + row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + column_id: PropTypes.string + }), + + /** + * The previous state of `data`. `data_previous` + * has the same structure as `data` and it will be updated + * whenever `data` changes, either through a callback or + * by editing the table. + * This is a read-only property: setting this property will not + * have any impact on the table. + */ + data_previous: PropTypes.arrayOf(PropTypes.object), + + /** + * List of columns ids of the columns that are currently hidden. + * See the associated nested prop `columns.hideable`. + */ + hidden_columns: PropTypes.arrayOf(PropTypes.string), + + /** + * If True, then the `active_cell` is in a focused state. + */ + is_focused: PropTypes.bool, + + /** + * If True, then column headers that have neighbors with duplicate names + * will be merged into a single cell. + * This will be applied for single column headers and multi-column + * headers. + */ + merge_duplicate_headers: PropTypes.bool, + + /** + * The unix timestamp when the data was last edited. + * Use this property with other timestamp properties + * (such as `n_clicks_timestamp` in `dash_html_components`) + * to determine which property has changed within a callback. + */ + data_timestamp: PropTypes.number, + + /** + * If true, headers are included when copying from the table to different + * tabs and elsewhere. Note that headers are ignored when copying from the table onto itself and + * between two tables within the same tab. + */ + include_headers_on_copy_paste: PropTypes.bool, + + /** + * Denotes the columns that will be used in the export data file. + * If `all`, all columns will be used (visible + hidden). If `visible`, + * only the visible columns will be used. Defaults to `visible`. + */ + export_columns: PropTypes.oneOf(['all', 'visible']), + + /** + * Denotes the type of the export data file, + * Defaults to `'none'` + */ + export_format: PropTypes.oneOf(['csv', 'xlsx', 'none']), + + /** + * Denotes the format of the headers in the export data file. + * If `'none'`, there will be no header. If `'display'`, then the header + * of the data file will be be how it is currently displayed. Note that + * `'display'` is only supported for `'xlsx'` export_format and will behave + * like `'names'` for `'csv'` export format. If `'ids'` or `'names'`, + * then the headers of data file will be the column id or the column + * names, respectively + */ + export_headers: PropTypes.oneOf(['none', 'ids', 'names', 'display']), + + /** + * `page_action` refers to a mode of the table where + * not all of the rows are displayed at once: only a subset + * are displayed (a "page") and the next subset of rows + * can viewed by clicking "Next" or "Previous" buttons + * at the bottom of the page. + * Pagination is used to improve performance: instead of + * rendering all of the rows at once (which can be expensive), + * we only display a subset of them. + * With pagination, we can either page through data that exists + * in the table (e.g. page through `10,000` rows in `data` `100` rows at a time) + * or we can update the data on-the-fly with callbacks + * when the user clicks on the "Previous" or "Next" buttons. + * These modes can be toggled with this `page_action` parameter: + * `'native'`: all data is passed to the table up-front, paging logic is + * handled by the table; + * `'custom'`: data is passed to the table one page at a time, paging logic + * is handled via callbacks; + * `'none'`: disables paging, render all of the data at once. + */ + page_action: PropTypes.oneOf(['custom', 'native', 'none']), + + /** + * `page_current` represents which page the user is on. + * Use this property to index through data in your callbacks with + * backend paging. + */ + page_current: PropTypes.number, + + /** + * `page_count` represents the number of the pages in the + * paginated table. This is really only useful when performing + * backend pagination, since the front end is able to use the + * full size of the table to calculate the number of pages. + */ + page_count: PropTypes.number, + + /** + * `page_size` represents the number of rows that will be + * displayed on a particular page when `page_action` is `'custom'` or `'native'` + */ + page_size: PropTypes.number, + + /** + * If `filter_action` is enabled, then the current filtering + * string is represented in this `filter_query` + * property. + */ + filter_query: PropTypes.string, + + /** + * The `filter_action` property controls the behavior of the `filtering` UI. + * If `'none'`, then the filtering UI is not displayed. + * If `'native'`, then the filtering UI is displayed and the filtering + * logic is handled by the table. That is, it is performed on the data + * that exists in the `data` property. + * If `'custom'`, then the filtering UI is displayed but it is the + * responsibility of the developer to program the filtering + * through a callback (where `filter_query` or `derived_filter_query_structure` would be the input + * and `data` would be the output). + */ + filter_action: PropTypes.oneOfType([ + PropTypes.oneOf(['custom', 'native', 'none']), + PropTypes.shape({ + type: PropTypes.oneOf(['custom', 'native']).isRequired, + operator: PropTypes.oneOf(['and', 'or']) + }) + ]), + + /** + * There are two `filter_options` props in the table. + * This is the table-level filter_options prop and there is + * also the column-level `filter_options` prop. + * These props determine whether the applicable filter relational + * operators will default to `sensitive` or `insensitive` comparison. + * If the column-level `filter_options` prop is set it overrides + * the table-level `filter_options` prop for that column. */ - style_as_list_view: PropTypes.bool, - + filter_options: PropTypes.shape({ + case: PropTypes.oneOf(['sensitive', 'insensitive']) + }), /** - * `page_action` refers to a mode of the table where - * not all of the rows are displayed at once: only a subset - * are displayed (a "page") and the next subset of rows - * can viewed by clicking "Next" or "Previous" buttons - * at the bottom of the page. - * Pagination is used to improve performance: instead of - * rendering all of the rows at once (which can be expensive), - * we only display a subset of them. - * With pagination, we can either page through data that exists - * in the table (e.g. page through `10,000` rows in `data` `100` rows at a time) - * or we can update the data on-the-fly with callbacks - * when the user clicks on the "Previous" or "Next" buttons. - * These modes can be toggled with this `page_action` parameter: - * `'native'`: all data is passed to the table up-front, paging logic is - * handled by the table; - * `'custom'`: data is passed to the table one page at a time, paging logic - * is handled via callbacks; - * `'none'`: disables paging, render all of the data at once. + * The `sort_action` property enables data to be + * sorted on a per-column basis. + * If `'none'`, then the sorting UI is not displayed. + * If `'native'`, then the sorting UI is displayed and the sorting + * logic is handled by the table. That is, it is performed on the data + * that exists in the `data` property. + * If `'custom'`, the the sorting UI is displayed but it is the + * responsibility of the developer to program the sorting + * through a callback (where `sort_by` would be the input and `data` + * would be the output). + * Clicking on the sort arrows will update the + * `sort_by` property. */ - page_action: PropTypes.oneOf(['custom', 'native', 'none']), + sort_action: PropTypes.oneOf(['custom', 'native', 'none']), /** - * `page_current` represents which page the user is on. - * Use this property to index through data in your callbacks with - * backend paging. + * Sorting can be performed across multiple columns + * (e.g. sort by country, sort within each country, + * sort by year) or by a single column. + * NOTE - With multi-column sort, it's currently + * not possible to determine the order in which + * the columns were sorted through the UI. + * See [https://github.com/plotly/dash-table/issues/170](https://github.com/plotly/dash-table/issues/170) */ - page_current: PropTypes.number, + sort_mode: PropTypes.oneOf(['single', 'multi']), /** - * `page_count` represents the number of the pages in the - * paginated table. This is really only useful when performing - * backend pagination, since the front end is able to use the - * full size of the table to calculate the number of pages. + * `sort_by` describes the current state + * of the sorting UI. + * That is, if the user clicked on the sort arrow + * of a column, then this property will be updated + * with the column ID and the direction + * (`asc` or `desc`) of the sort. + * For multi-column sorting, this will be a list of + * sorting parameters, in the order in which they were + * clicked. */ - page_count: PropTypes.number, + sort_by: PropTypes.arrayOf( + PropTypes.exact({ + column_id: PropTypes.string.isRequired, + direction: PropTypes.oneOf(['asc', 'desc']).isRequired + }) + ), /** - * `page_size` represents the number of rows that will be - * displayed on a particular page when `page_action` is `'custom'` or `'native'` + * An array of string, number and boolean values that are treated as `None` + * (i.e. ignored and always displayed last) when sorting. + * This value will be used by columns without `sort_as_null`. + * Defaults to `[]`. */ - page_size: PropTypes.number, + sort_as_null: PropTypes.arrayOf( + PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.bool + ]) + ), /** * `dropdown` specifies dropdown options for different columns. @@ -1146,102 +1144,94 @@ export const propTypes = { tooltip_duration: PropTypes.number, /** - * If `filter_action` is enabled, then the current filtering - * string is represented in this `filter_query` - * property. + * The localization specific formatting information applied to all columns in the table. + * This prop is derived from the [d3.formatLocale](https://github.com/d3/d3-format#formatLocale) data structure specification. + * When left unspecified, each individual nested prop will default to a pre-determined value. */ - filter_query: PropTypes.string, + locale_format: PropTypes.exact({ + /** + * (default: ['$', '']). A list of two strings representing the + * prefix and suffix symbols. Typically used for currency, and implemented using d3's + * currency format, but you can use this for other symbols such as measurement units. + */ + symbol: PropTypes.arrayOf(PropTypes.string), + /** + * (default: '.'). The string used for the decimal separator. + */ + decimal: PropTypes.string, + /** + * (default: ','). The string used for the groups separator. + */ + group: PropTypes.string, + /** + * (default: [3]). A list of integers representing the grouping pattern. + */ + grouping: PropTypes.arrayOf(PropTypes.number), + /** + * A list of ten strings used as replacements for numbers 0-9. + */ + numerals: PropTypes.arrayOf(PropTypes.string), + /** + * (default: '%'). The string used for the percentage symbol. + */ + percent: PropTypes.string, + /** + * (default: True). Separate integers with 4-digits or less. + */ + separate_4digits: PropTypes.bool + }), /** - * The `filter_action` property controls the behavior of the `filtering` UI. - * If `'none'`, then the filtering UI is not displayed. - * If `'native'`, then the filtering UI is displayed and the filtering - * logic is handled by the table. That is, it is performed on the data - * that exists in the `data` property. - * If `'custom'`, then the filtering UI is displayed but it is the - * responsibility of the developer to program the filtering - * through a callback (where `filter_query` or `derived_filter_query_structure` would be the input - * and `data` would be the output). + * If True, then the table will be styled like a list view + * and not have borders between the columns. */ - filter_action: PropTypes.oneOfType([ - PropTypes.oneOf(['custom', 'native', 'none']), - PropTypes.shape({ - type: PropTypes.oneOf(['custom', 'native']).isRequired, - operator: PropTypes.oneOf(['and', 'or']) - }) - ]), + style_as_list_view: PropTypes.bool, /** - * There are two `filter_options` props in the table. - * This is the table-level filter_options prop and there is - * also the column-level `filter_options` prop. - * These props determine whether the applicable filter relational - * operators will default to `sensitive` or `insensitive` comparison. - * If the column-level `filter_options` prop is set it overrides - * the table-level `filter_options` prop for that column. - */ - filter_options: PropTypes.shape({ - case: PropTypes.oneOf(['sensitive', 'insensitive']) - }), - /** - * The `sort_action` property enables data to be - * sorted on a per-column basis. - * If `'none'`, then the sorting UI is not displayed. - * If `'native'`, then the sorting UI is displayed and the sorting - * logic is handled by the table. That is, it is performed on the data - * that exists in the `data` property. - * If `'custom'`, the the sorting UI is displayed but it is the - * responsibility of the developer to program the sorting - * through a callback (where `sort_by` would be the input and `data` - * would be the output). - * Clicking on the sort arrows will update the - * `sort_by` property. + * `fill_width` toggles between a set of CSS for two common behaviors: + * True: The table container's width will grow to fill the available space; + * False: The table container's width will equal the width of its content. */ - sort_action: PropTypes.oneOf(['custom', 'native', 'none']), + fill_width: PropTypes.bool, /** - * Sorting can be performed across multiple columns - * (e.g. sort by country, sort within each country, - * sort by year) or by a single column. - * NOTE - With multi-column sort, it's currently - * not possible to determine the order in which - * the columns were sorted through the UI. - * See [https://github.com/plotly/dash-table/issues/170](https://github.com/plotly/dash-table/issues/170) + * The `markdown_options` property allows customization of the markdown cells behavior. */ - sort_mode: PropTypes.oneOf(['single', 'multi']), + markdown_options: PropTypes.exact({ + /** + * (default: '_blank'). The link's behavior (_blank opens the link in a + * new tab, _parent opens the link in the parent frame, _self opens the link in the + * current tab, and _top opens the link in the top frame) or a string + */ + link_target: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.oneOf(['_blank', '_parent', '_self', '_top']) + ]), + /** + * (default: False) If True, html may be used in markdown cells + * Be careful enabling html if the content being rendered can come + * from an untrusted user, as this may create an XSS vulnerability. + */ + html: PropTypes.bool + }), /** - * `sort_by` describes the current state - * of the sorting UI. - * That is, if the user clicked on the sort arrow - * of a column, then this property will be updated - * with the column ID and the direction - * (`asc` or `desc`) of the sort. - * For multi-column sorting, this will be a list of - * sorting parameters, in the order in which they were - * clicked. + * The `css` property is a way to embed CSS selectors and rules + * onto the page. + * We recommend starting with the `style_*` properties + * before using this `css` property. + * Example: + * [ + * {"selector": ".dash-spreadsheet", "rule": 'font-family: "monospace"'} + * ] */ - sort_by: PropTypes.arrayOf( + css: PropTypes.arrayOf( PropTypes.exact({ - column_id: PropTypes.string.isRequired, - direction: PropTypes.oneOf(['asc', 'desc']).isRequired + selector: PropTypes.string.isRequired, + rule: PropTypes.string.isRequired }) ), - /** - * An array of string, number and boolean values that are treated as `None` - * (i.e. ignored and always displayed last) when sorting. - * This value will be used by columns without `sort_as_null`. - * Defaults to `[]`. - */ - sort_as_null: PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.bool - ]) - ), - /** * CSS styles to be applied to the outer `table` container. * This is commonly used for setting properties like the @@ -1495,6 +1485,16 @@ export const propTypes = { PropTypes.oneOfType([PropTypes.string, PropTypes.number]) ), + /** + * The ID of the table. + */ + id: PropTypes.string, + + /** + * Dash-assigned callback that gets fired when the user makes changes. + */ + setProps: PropTypes.func, + /** * Object that holds the loading state object coming from dash-renderer */ From 15599ae535322c362f41aa344d721f28521d7fb7 Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Thu, 13 Jan 2022 11:59:10 -0500 Subject: [PATCH 11/15] Update Checklist prop order --- .../src/components/Checklist.react.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js index fc9a207982..7ff69df32c 100644 --- a/components/dash-core-components/src/components/Checklist.react.js +++ b/components/dash-core-components/src/components/Checklist.react.js @@ -147,13 +147,6 @@ 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, - /** * The class of the container (div) */ @@ -186,6 +179,13 @@ Checklist.propTypes = { */ labelClassName: PropTypes.string, + /** + * 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, + /** * Dash-assigned callback that gets fired when the value changes. */ From d9e386bd17c3bf3bedde62ee78e2ef73bf1f2a94 Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Thu, 13 Jan 2022 13:41:54 -0500 Subject: [PATCH 12/15] Updated DataTable prop order --- .../src/dash-table/dash/DataTable.js | 94 +++++++++---------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/components/dash-table/src/dash-table/dash/DataTable.js b/components/dash-table/src/dash-table/dash/DataTable.js index 0f7da5b9d9..beca21fc1d 100644 --- a/components/dash-table/src/dash-table/dash/DataTable.js +++ b/components/dash-table/src/dash-table/dash/DataTable.js @@ -155,6 +155,36 @@ export const propTypes = { PropTypes.arrayOf(PropTypes.string) ]).isRequired, + /** + * The data-type provides support for per column typing and allows for data + * validation and coercion. + * 'numeric': represents both floats and ints. + * 'text': represents a string. + * 'datetime': a string representing a date or date-time, in the form: + * 'YYYY-MM-DD HH:MM:SS.ssssss' or some truncation thereof. Years must + * have 4 digits, unless you use `validation.allow_YY: true`. Also + * accepts 'T' or 't' between date and time, and allows timezone info + * at the end. To convert these strings to Python `datetime` objects, + * use `dateutil.parser.isoparse`. In R use `parse_iso_8601` from the + * `parsedate` library. + * WARNING: these parsers do not work with 2-digit years, if you use + * `validation.allow_YY: true` and do not coerce to 4-digit years. + * And parsers that do work with 2-digit years may make a different + * guess about the century than we make on the front end. + * 'any': represents any type of data. + * Defaults to 'any' if undefined. + * + * + */ + type: PropTypes.oneOf(['any', 'numeric', 'text', 'datetime']), + + /** + * The `presentation` to use to display data. Markdown can be used on + * columns with type 'text'. See 'dropdown' for more info. + * Defaults to 'input' for ['datetime', 'numeric', 'text', 'any']. + */ + presentation: PropTypes.oneOf(['input', 'dropdown', 'markdown']), + /** * If true, the user can select the column by clicking on the checkbox or radio button * in the column. If there are multiple header rows, true will display the input @@ -292,29 +322,6 @@ export const propTypes = { case: PropTypes.oneOf(['sensitive', 'insensitive']) }), - /** - * The data-type provides support for per column typing and allows for data - * validation and coercion. - * 'numeric': represents both floats and ints. - * 'text': represents a string. - * 'datetime': a string representing a date or date-time, in the form: - * 'YYYY-MM-DD HH:MM:SS.ssssss' or some truncation thereof. Years must - * have 4 digits, unless you use `validation.allow_YY: true`. Also - * accepts 'T' or 't' between date and time, and allows timezone info - * at the end. To convert these strings to Python `datetime` objects, - * use `dateutil.parser.isoparse`. In R use `parse_iso_8601` from the - * `parsedate` library. - * WARNING: these parsers do not work with 2-digit years, if you use - * `validation.allow_YY: true` and do not coerce to 4-digit years. - * And parsers that do work with 2-digit years may make a different - * guess about the century than we make on the front end. - * 'any': represents any type of data. - * Defaults to 'any' if undefined. - * - * - */ - type: PropTypes.oneOf(['any', 'numeric', 'text', 'datetime']), - /** * The formatting applied to the column's data. * This prop is derived from the [d3-format](https://github.com/d3/d3-format) library specification. Apart from @@ -375,13 +382,6 @@ export const propTypes = { specifier: PropTypes.string }), - /** - * The `presentation` to use to display data. Markdown can be used on - * columns with type 'text'. See 'dropdown' for more info. - * Defaults to 'input' for ['datetime', 'numeric', 'text', 'any']. - */ - presentation: PropTypes.oneOf(['input', 'dropdown', 'markdown']), - /** * The `on_change` behavior of the column for user-initiated modifications. */ @@ -439,17 +439,6 @@ export const propTypes = { }) ), - /** - * The row and column indices and IDs of the currently active cell. - * `row_id` is only returned if the data rows have an `id` key. - */ - active_cell: PropTypes.exact({ - row: PropTypes.number, - column: PropTypes.number, - row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - column_id: PropTypes.string - }), - /** * If True, then the data in all of the cells is editable. * When `editable` is True, particular columns can be made @@ -544,12 +533,6 @@ export const propTypes = { */ column_selectable: PropTypes.oneOf(['single', 'multi', false]), - /** - * If True, then a `x` will appear next to each `row` - * and the user can delete the row. - */ - row_deletable: PropTypes.bool, - /** * If True (default), then it is possible to click and navigate * table cells. @@ -568,6 +551,23 @@ export const propTypes = { */ row_selectable: PropTypes.oneOf(['single', 'multi', false]), + /** + * If True, then a `x` will appear next to each `row` + * and the user can delete the row. + */ + row_deletable: PropTypes.bool, + + /** + * The row and column indices and IDs of the currently active cell. + * `row_id` is only returned if the data rows have an `id` key. + */ + active_cell: PropTypes.exact({ + row: PropTypes.number, + column: PropTypes.number, + row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + column_id: PropTypes.string + }), + /** * `selected_cells` represents the set of cells that are selected, * as an array of objects, each item similar to `active_cell`. From 63e709effab83eca55d59b8c8bf1c4b51957b7d4 Mon Sep 17 00:00:00 2001 From: Hammad Khan Date: Thu, 13 Jan 2022 15:04:18 -0500 Subject: [PATCH 13/15] Update DatePickerSingle, DatePickerRange, Input, Link prop orders --- components/dash-core-components/package.json | 2 +- .../src/components/Checklist.react.js | 14 +- .../src/components/DatePickerRange.react.js | 160 +++++++------- .../src/components/DatePickerSingle.react.js | 127 ++++++------ .../src/components/Input.react.js | 195 +++++++++--------- .../src/components/Link.react.js | 32 +-- 6 files changed, 266 insertions(+), 264 deletions(-) diff --git a/components/dash-core-components/package.json b/components/dash-core-components/package.json index 7d9139cb75..5e862d5740 100644 --- a/components/dash-core-components/package.json +++ b/components/dash-core-components/package.json @@ -25,7 +25,7 @@ "test:pyimport": "python -m unittest tests/test_dash_import.py", "prebuild:js": "cp node_modules/plotly.js/dist/plotly.min.js dash_core_components_base/plotly.min.js", "build:js": "webpack --mode production", - "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,Dropdown,RadioItems,Checklist --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components", + "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,Dropdown,RadioItems,Checklist,DatePickerSingle,DatePickerRange,Input,Link --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components", "build": "run-s prepublishOnly build:js build:backends", "postbuild": "es-check es5 dash_core_components/*.js", "build:watch": "watch 'npm run build' src", diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js index 7ff69df32c..f86b1c6a4b 100644 --- a/components/dash-core-components/src/components/Checklist.react.js +++ b/components/dash-core-components/src/components/Checklist.react.js @@ -147,6 +147,13 @@ Checklist.propTypes = { ]) ), + /** + * 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, + /** * The class of the container (div) */ @@ -237,13 +244,6 @@ 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 = { diff --git a/components/dash-core-components/src/components/DatePickerRange.react.js b/components/dash-core-components/src/components/DatePickerRange.react.js index 4d197653b7..e9bcdebd5b 100644 --- a/components/dash-core-components/src/components/DatePickerRange.react.js +++ b/components/dash-core-components/src/components/DatePickerRange.react.js @@ -27,13 +27,6 @@ export default class DatePickerRange extends Component { } DatePickerRange.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, - /** * Specifies the starting date for the component. * Accepts datetime.datetime objects or strings @@ -41,18 +34,6 @@ DatePickerRange.propTypes = { */ start_date: PropTypes.string, - /** - * The HTML element ID of the start date input field. - * Not used by Dash, only by CSS. - */ - start_date_id: PropTypes.string, - - /** - * The HTML element ID of the end date input field. - * Not used by Dash, only by CSS. - */ - end_date_id: PropTypes.string, - /** * Specifies the ending date for the component. * Accepts datetime.datetime objects or strings @@ -82,12 +63,20 @@ DatePickerRange.propTypes = { disabled_days: PropTypes.arrayOf(PropTypes.string), /** - * Specifies the month that is initially presented when the user - * opens the calendar. Accepts datetime.datetime objects or strings - * in the format 'YYYY-MM-DD' - * + * Specifies a minimum number of nights that must be selected between + * the startDate and the endDate */ - initial_visible_month: PropTypes.string, + minimum_nights: PropTypes.number, + + /** + * Determines when the component should update + * its value. If `bothdates`, then the DatePicker + * will only trigger its value when the user has + * finished picking both dates. If `singledate`, then + * the DatePicker will update its value + * as one date is picked. + */ + updatemode: PropTypes.oneOf(['singledate', 'bothdates']), /** * Text that will be displayed in the first input @@ -102,22 +91,19 @@ DatePickerRange.propTypes = { end_date_placeholder_text: PropTypes.string, /** - * Size of rendered calendar days, higher number - * means bigger day size and larger calendar overall - */ - day_size: PropTypes.number, - - /** - * Orientation of calendar, either vertical or horizontal. - * Valid options are 'vertical' or 'horizontal'. + * Specifies the month that is initially presented when the user + * opens the calendar. Accepts datetime.datetime objects or strings + * in the format 'YYYY-MM-DD' + * */ - calendar_orientation: PropTypes.oneOf(['vertical', 'horizontal']), + initial_visible_month: PropTypes.string, /** - * Determines whether the calendar and days operate - * from left to right or from right to left + * Whether or not the dropdown is "clearable", that is, whether or + * not a small "x" appears on the right of the dropdown that removes + * the selected value. */ - is_RTL: PropTypes.bool, + clearable: PropTypes.bool, /** * If True, the calendar will automatically open when cleared @@ -125,22 +111,23 @@ DatePickerRange.propTypes = { reopen_calendar_on_clear: PropTypes.bool, /** - * Number of calendar months that are shown when calendar is opened - */ - number_of_months_shown: PropTypes.number, - - /** - * If True, calendar will open in a screen overlay portal, - * not supported on vertical calendar + * Specifies the format that the selected dates will be displayed + * valid formats are variations of "MM YY DD". For example: + * "MM YY DD" renders as '05 10 97' for May 10th 1997 + * "MMMM, YY" renders as 'May, 1997' for May 10th 1997 + * "M, D, YYYY" renders as '07, 10, 1997' for September 10th 1997 + * "MMMM" renders as 'May' for May 10 1997 */ - with_portal: PropTypes.bool, + display_format: PropTypes.string, /** - * If True, calendar will open in a full screen overlay portal, will - * take precedent over 'withPortal' if both are set to true, - * not supported on vertical calendar + * Specifies the format that the month will be displayed in the calendar, + * valid formats are variations of "MM YY". For example: + * "MM YY" renders as '05 97' for May 1997 + * "MMMM, YYYY" renders as 'May, 1997' for May 1997 + * "MMM, YY" renders as 'Sep, 97' for September 1997 */ - with_full_screen_portal: PropTypes.bool, + month_format: PropTypes.string, /** * Specifies what day is the first day of the week, values must be @@ -149,10 +136,10 @@ DatePickerRange.propTypes = { first_day_of_week: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]), /** - * Specifies a minimum number of nights that must be selected between - * the startDate and the endDate + * If True the calendar will display days that rollover into + * the next month */ - minimum_nights: PropTypes.number, + show_outside_days: PropTypes.bool, /** * If True the calendar will not close when the user has selected a value @@ -161,29 +148,40 @@ DatePickerRange.propTypes = { stay_open_on_select: PropTypes.bool, /** - * If True the calendar will display days that rollover into - * the next month + * Orientation of calendar, either vertical or horizontal. + * Valid options are 'vertical' or 'horizontal'. */ - show_outside_days: PropTypes.bool, + calendar_orientation: PropTypes.oneOf(['vertical', 'horizontal']), /** - * Specifies the format that the month will be displayed in the calendar, - * valid formats are variations of "MM YY". For example: - * "MM YY" renders as '05 97' for May 1997 - * "MMMM, YYYY" renders as 'May, 1997' for May 1997 - * "MMM, YY" renders as 'Sep, 97' for September 1997 + * Number of calendar months that are shown when calendar is opened */ - month_format: PropTypes.string, + number_of_months_shown: PropTypes.number, /** - * Specifies the format that the selected dates will be displayed - * valid formats are variations of "MM YY DD". For example: - * "MM YY DD" renders as '05 10 97' for May 10th 1997 - * "MMMM, YY" renders as 'May, 1997' for May 10th 1997 - * "M, D, YYYY" renders as '07, 10, 1997' for September 10th 1997 - * "MMMM" renders as 'May' for May 10 1997 + * If True, calendar will open in a screen overlay portal, + * not supported on vertical calendar */ - display_format: PropTypes.string, + with_portal: PropTypes.bool, + + /** + * If True, calendar will open in a full screen overlay portal, will + * take precedent over 'withPortal' if both are set to true, + * not supported on vertical calendar + */ + with_full_screen_portal: PropTypes.bool, + + /** + * Size of rendered calendar days, higher number + * means bigger day size and larger calendar overall + */ + day_size: PropTypes.number, + + /** + * Determines whether the calendar and days operate + * from left to right or from right to left + */ + is_RTL: PropTypes.bool, /** * If True, no dates can be selected. @@ -191,16 +189,16 @@ DatePickerRange.propTypes = { disabled: PropTypes.bool, /** - * Whether or not the dropdown is "clearable", that is, whether or - * not a small "x" appears on the right of the dropdown that removes - * the selected value. + * The HTML element ID of the start date input field. + * Not used by Dash, only by CSS. */ - clearable: PropTypes.bool, + start_date_id: PropTypes.string, /** - * Dash-assigned callback that gets fired when the value changes. + * The HTML element ID of the end date input field. + * Not used by Dash, only by CSS. */ - setProps: PropTypes.func, + end_date_id: PropTypes.string, /** * CSS styles appended to wrapper div @@ -213,14 +211,16 @@ DatePickerRange.propTypes = { className: PropTypes.string, /** - * Determines when the component should update - * its value. If `bothdates`, then the DatePicker - * will only trigger its value when the user has - * finished picking both dates. If `singledate`, then - * the DatePicker will update its value - * as one date is picked. + * 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. */ - updatemode: PropTypes.oneOf(['singledate', 'bothdates']), + id: PropTypes.string, + + /** + * Dash-assigned callback that gets fired when the value changes. + */ + setProps: PropTypes.func, /** * Object that holds the loading state object coming from dash-renderer diff --git a/components/dash-core-components/src/components/DatePickerSingle.react.js b/components/dash-core-components/src/components/DatePickerSingle.react.js index 85ef116ac8..792e9f6b75 100644 --- a/components/dash-core-components/src/components/DatePickerSingle.react.js +++ b/components/dash-core-components/src/components/DatePickerSingle.react.js @@ -27,13 +27,6 @@ export default class DatePickerSingle extends Component { } DatePickerSingle.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, - /** * Specifies the starting date for the component, best practice is to pass * value via datetime object @@ -61,6 +54,13 @@ DatePickerSingle.propTypes = { */ disabled_days: PropTypes.arrayOf(PropTypes.string), + /** + * Text that will be displayed in the input + * box of the date picker when no date is selected. + * Default value is 'Start Date' + */ + placeholder: PropTypes.string, + /** * Specifies the month that is initially presented when the user * opens the calendar. Accepts datetime.datetime objects or strings @@ -70,88 +70,89 @@ DatePickerSingle.propTypes = { initial_visible_month: PropTypes.string, /** - * Size of rendered calendar days, higher number - * means bigger day size and larger calendar overall + * Whether or not the dropdown is "clearable", that is, whether or + * not a small "x" appears on the right of the dropdown that removes + * the selected value. */ - day_size: PropTypes.number, + clearable: PropTypes.bool, /** - * Orientation of calendar, either vertical or horizontal. - * Valid options are 'vertical' or 'horizontal'. + * If True, the calendar will automatically open when cleared */ - calendar_orientation: PropTypes.oneOf(['vertical', 'horizontal']), + reopen_calendar_on_clear: PropTypes.bool, /** - * Determines whether the calendar and days operate - * from left to right or from right to left + * Specifies the format that the selected dates will be displayed + * valid formats are variations of "MM YY DD". For example: + * "MM YY DD" renders as '05 10 97' for May 10th 1997 + * "MMMM, YY" renders as 'May, 1997' for May 10th 1997 + * "M, D, YYYY" renders as '07, 10, 1997' for September 10th 1997 + * "MMMM" renders as 'May' for May 10 1997 */ - is_RTL: PropTypes.bool, + display_format: PropTypes.string, + /** - * Text that will be displayed in the input - * box of the date picker when no date is selected. - * Default value is 'Start Date' + * Specifies the format that the month will be displayed in the calendar, + * valid formats are variations of "MM YY". For example: + * "MM YY" renders as '05 97' for May 1997 + * "MMMM, YYYY" renders as 'May, 1997' for May 1997 + * "MMM, YY" renders as 'Sep, 97' for September 1997 */ - placeholder: PropTypes.string, + month_format: PropTypes.string, /** - * If True, the calendar will automatically open when cleared + * Specifies what day is the first day of the week, values must be + * from [0, ..., 6] with 0 denoting Sunday and 6 denoting Saturday */ - reopen_calendar_on_clear: PropTypes.bool, + first_day_of_week: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]), /** - * Number of calendar months that are shown when calendar is opened + * If True the calendar will display days that rollover into + * the next month */ - number_of_months_shown: PropTypes.number, + show_outside_days: PropTypes.bool, /** - * If True, calendar will open in a screen overlay portal, - * not supported on vertical calendar + * If True the calendar will not close when the user has selected a value + * and will wait until the user clicks off the calendar */ - with_portal: PropTypes.bool, + stay_open_on_select: PropTypes.bool, /** - * If True, calendar will open in a full screen overlay portal, will - * take precedent over 'withPortal' if both are set to True, - * not supported on vertical calendar + * Orientation of calendar, either vertical or horizontal. + * Valid options are 'vertical' or 'horizontal'. */ - with_full_screen_portal: PropTypes.bool, + calendar_orientation: PropTypes.oneOf(['vertical', 'horizontal']), /** - * Specifies what day is the first day of the week, values must be - * from [0, ..., 6] with 0 denoting Sunday and 6 denoting Saturday + * Number of calendar months that are shown when calendar is opened */ - first_day_of_week: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]), + number_of_months_shown: PropTypes.number, /** - * If True the calendar will not close when the user has selected a value - * and will wait until the user clicks off the calendar + * If True, calendar will open in a screen overlay portal, + * not supported on vertical calendar */ - stay_open_on_select: PropTypes.bool, + with_portal: PropTypes.bool, /** - * If True the calendar will display days that rollover into - * the next month + * If True, calendar will open in a full screen overlay portal, will + * take precedent over 'withPortal' if both are set to True, + * not supported on vertical calendar */ - show_outside_days: PropTypes.bool, + with_full_screen_portal: PropTypes.bool, /** - * Specifies the format that the month will be displayed in the calendar, - * valid formats are variations of "MM YY". For example: - * "MM YY" renders as '05 97' for May 1997 - * "MMMM, YYYY" renders as 'May, 1997' for May 1997 - * "MMM, YY" renders as 'Sep, 97' for September 1997 + * Size of rendered calendar days, higher number + * means bigger day size and larger calendar overall */ - month_format: PropTypes.string, + day_size: PropTypes.number, /** - * Specifies the format that the selected dates will be displayed - * valid formats are variations of "MM YY DD". For example: - * "MM YY DD" renders as '05 10 97' for May 10th 1997 - * "MMMM, YY" renders as 'May, 1997' for May 10th 1997 - * "M, D, YYYY" renders as '07, 10, 1997' for September 10th 1997 - * "MMMM" renders as 'May' for May 10 1997 + * Determines whether the calendar and days operate + * from left to right or from right to left */ - display_format: PropTypes.string, + is_RTL: PropTypes.bool, /** * If True, no dates can be selected. @@ -159,26 +160,26 @@ DatePickerSingle.propTypes = { disabled: PropTypes.bool, /** - * Whether or not the dropdown is "clearable", that is, whether or - * not a small "x" appears on the right of the dropdown that removes - * the selected value. + * CSS styles appended to wrapper div */ - clearable: PropTypes.bool, + style: PropTypes.object, /** - * Dash-assigned callback that gets fired when the value changes. + * Appends a CSS class to the wrapper div component. */ - setProps: PropTypes.func, + className: PropTypes.string, /** - * CSS styles appended to wrapper div + * 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. */ - style: PropTypes.object, + id: PropTypes.string, /** - * Appends a CSS class to the wrapper div component. + * Dash-assigned callback that gets fired when the value changes. */ - className: PropTypes.string, + setProps: PropTypes.func, /** * Object that holds the loading state object coming from dash-renderer diff --git a/components/dash-core-components/src/components/Input.react.js b/components/dash-core-components/src/components/Input.react.js index 99573b4935..18bf374a99 100644 --- a/components/dash-core-components/src/components/Input.react.js +++ b/components/dash-core-components/src/components/Input.react.js @@ -165,34 +165,11 @@ Input.defaultProps = { }; Input.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, - /** * The value of the input */ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - /** - * The input's inline styles - */ - style: PropTypes.object, - - /** - * The class of the input element - */ - className: PropTypes.string, - - /** - * If true, changes to input will be sent back to the Dash server only on enter or when losing focus. - * If it's false, it will sent the value back on every change. - */ - debounce: PropTypes.bool, - /** * The type of control to render. */ @@ -210,30 +187,24 @@ Input.propTypes = { ]), /** - * This attribute indicates whether the value of the control can be automatically completed by the browser. + * If true, changes to input will be sent back to the Dash server only on enter or when losing focus. + * If it's false, it will sent the value back on every change. */ - autoComplete: PropTypes.string, + debounce: PropTypes.bool, /** - * The element should be automatically focused after the page loaded. - * autoFocus is an HTML boolean attribute - it is enabled by a boolean or - * 'autoFocus'. Alternative capitalizations `autofocus` & `AUTOFOCUS` - * are also acccepted. + * A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a