Adding prop reorder exceptions (#1866)

* Adding prop reorder exceptions * Reworking prop order flag * Removing unnecessary variable * Reverting build:backends script changes * Adding operator * Adding default positional arg * Updating docstring function * Updated radioitems prop order * Prop order changes for dcc * Updated DataTable prop order * Update Checklist prop order * Updated DataTable prop order * Update DatePickerSingle, DatePickerRange, Input, Link prop orders * Re-running tests * Re-running tests

Author: HammadTheOne

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": "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",

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

@@ -148,11 +148,11 @@ 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.
+ * 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 class of the container (div)
@@ -186,6 +186,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.
  */
@@ -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 = {

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

@@ -27,32 +27,13 @@ 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
  * in the format 'YYYY-MM-DD'
  */
  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,45 +91,43 @@ 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
  */
  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,46 +148,57 @@ 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.
  */
  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