Add shorthand options to Core Components#1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
akksi wants to merge 10 commits into from
Closed

Add shorthand options to Core Components #1749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
599908e
Add shorthand option prop types to Dropdown component
akksi Sep 6, 2021
7df1053
Rearrange RangeSlider prop order to allow using Python positional arg…
akksi Sep 8, 2021
80c51aa
Calculate default mark values and positions when mark prop is not def…
akksi Sep 8, 2021
7090828
Calculate default step value for RangeSlider when no step value is pa…
akksi Sep 8, 2021
194efa9
Calculate default RangeSlider value when no value prop is passed
akksi Sep 8, 2021
9464be3
Apply option property shorthands to Checklist component
akksi Sep 8, 2021
e3437b5
Add inline shorthand property to Checklist component
akksi Sep 8, 2021
d97fff4
Allow number values in React Component shorthand type options
akksi Sep 8, 2021
3de703f
Apply shorthand option types to RadioItems core component
akksi Sep 8, 2021
b379492
Allow shorthand data structure for DataTable component
akksi Sep 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 21 additions & 28 deletions components/dash-core-components/src/components/Checklist.react.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import {append, includes, without} from 'ramda';
import React, {Component} from 'react';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
* Checklist is a component that encapsulates several checkboxes.
Expand All@@ -17,6 +19,7 @@ export default class Checklist extends Component {
inputStyle,
labelClassName,
labelStyle,
inline,
options,
setProps,
style,
Expand All@@ -33,10 +36,13 @@ export default class Checklist extends Component {
style={style}
className={className}
>
{options.map(option => (
{mapOptions(options).map(option => (
<label
key={option.value}
style={labelStyle}
style={{
...{display: inline ? 'inline-block' : "block"},
...labelStyle
}}
className={labelClassName}
>
<input
Expand DownExpand Up@@ -64,39 +70,20 @@ export default class Checklist extends Component {
}

Checklist.propTypes = {
/**
* An array of dictionaries as [{label: "Label", value: "Value"}],
* OR an array of options as ["Option 1", "Option 2"]
* OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
*/
options: optionsType,

/**
* The ID of this component, used to identify dash components
* in callbacks. The ID needs to be unique across all of the
* components in an app.
*/
id: PropTypes.string,

/**
* An array of options
*/
options: PropTypes.arrayOf(
PropTypes.exact({
/**
* The checkbox's label
*/
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,

/**
* The value of the checkbox. This value
* corresponds to the items specified in the
* `value` property.
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,

/**
* If true, this checkbox is disabled and can't be clicked on.
*/
disabled: PropTypes.bool,
})
),

/**
* The currently selected value
*/
Expand DownExpand Up@@ -130,6 +117,11 @@ Checklist.propTypes = {
*/
labelStyle: PropTypes.object,

/**
* Shorthand for applying {'display': 'inline-block'} labelStyle
*/
inline: PropTypes.bool,

/**
* The class of the <label> that wraps the checkbox input
* and the option's label
Expand DownExpand Up@@ -194,6 +186,7 @@ Checklist.defaultProps = {
inputClassName: '',
labelStyle: {},
labelClassName: '',
inline: false,
options: [],
value: [],
persisted_props: ['value'],
Expand Down
42 changes: 8 additions & 34 deletions components/dash-core-components/src/components/Dropdown.react.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React, {Component, lazy, Suspense} from 'react';
import dropdown from '../utils/LazyLoader/dropdown';
import {optionsType} from "../utils/sharedPropTypes";

const RealDropdown = lazy(dropdown);

Expand All@@ -25,47 +26,20 @@ export default class Dropdown extends Component {
}

Dropdown.propTypes = {
/**
* An array of dictionaries as [{label: "Label", value: "Value"}],
* OR an array of options as ["Option 1", "Option 2"]
* OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
*/
options: optionsType,

/**
* The ID of this component, used to identify dash components
* in callbacks. The ID needs to be unique across all of the
* components in an app.
*/
id: PropTypes.string,

/**
* An array of options {label: [string|number], value: [string|number]},
* an optional disabled field can be used for each option
*/
options: PropTypes.arrayOf(
PropTypes.exact({
/**
* The dropdown's label
*/
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,

/**
* The value of the dropdown. This value
* corresponds to the items specified in the
* `value` property.
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,

/**
* If true, this option is disabled and cannot be selected.
*/
disabled: PropTypes.bool,

/**
* The HTML 'title' attribute for the option. Allows for
* information on hover. For more information on this attribute,
* see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
*/
title: PropTypes.string,
})
),

/**
* The value of the input. If `multi` is false (the default)
* then value is just a string that corresponds to the values
Expand Down
48 changes: 20 additions & 28 deletions components/dash-core-components/src/components/RadioItems.react.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import './css/react-select@1.0.0-rc.3.min.css';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
* RadioItems is a component that encapsulates several radio item inputs.
Expand All@@ -19,6 +21,7 @@ export default class RadioItems extends Component {
inputStyle,
labelClassName,
labelStyle,
inline,
options,
setProps,
loading_state,
Expand All@@ -38,9 +41,12 @@ export default class RadioItems extends Component {
className={className}
style={style}
>
{options.map(option => (
{mapOptions(options).map(option => (
<label
style={labelStyle}
style={{
...{display: inline ? 'inline-block' : "block"},
...labelStyle
}}
className={labelClassName}
key={option.value}
>
Expand All@@ -63,39 +69,20 @@ export default class RadioItems extends Component {
}

RadioItems.propTypes = {
/**
* An array of dictionaries as [{label: "Label", value: "Value"}],
* OR an array of options as ["Option 1", "Option 2"]
* OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
*/
options: optionsType,

/**
* The ID of this component, used to identify dash components
* in callbacks. The ID needs to be unique across all of the
* components in an app.
*/
id: PropTypes.string,

/**
* An array of options
*/
options: PropTypes.arrayOf(
PropTypes.exact({
/**
* The radio item's label
*/
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,

/**
* The value of the radio item. This value
* corresponds to the items specified in the
* `value` property.
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,

/**
* If true, this radio item is disabled and can't be clicked on.
*/
disabled: PropTypes.bool,
})
),

/**
* The currently selected value
*/
Expand DownExpand Up@@ -127,6 +114,11 @@ RadioItems.propTypes = {
*/
labelStyle: PropTypes.object,

/**
* Shorthand for applying {'display': 'inline-block'} labelStyle
*/
inline: PropTypes.bool,

/**
* The class of the <label> that wraps the radio input
* and the option's label
Expand Down
20 changes: 10 additions & 10 deletions components/dash-core-components/src/components/RangeSlider.react.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,16 @@ export default class RangeSlider extends Component {
}

RangeSlider.propTypes = {
/**
* Minimum allowed value of the slider
*/
min: PropTypes.number,

/**
* Maximum allowed value of the slider
*/
max: PropTypes.number,

/**
* The ID of this component, used to identify dash components
* in callbacks. The ID needs to be unique across all of the
Expand DownExpand Up@@ -88,16 +98,6 @@ RangeSlider.propTypes = {
*/
included: PropTypes.bool,

/**
* Minimum allowed value of the slider
*/
min: PropTypes.number,

/**
* Maximum allowed value of the slider
*/
max: PropTypes.number,

/**
* pushable could be set as true to allow pushing of
* surrounding handles when moving an handle.
Expand Down
17 changes: 12 additions & 5 deletions components/dash-core-components/src/fragments/Dropdown.react.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
import '../components/css/Dropdown.css';

import {propTypes, defaultProps} from '../components/Dropdown.react';
import {mapOptions} from "../utils/shorthandMappers";

// Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
// Split on spaces
Expand All@@ -25,19 +26,25 @@ const DELIMETER = ',';
export default class Dropdown extends Component {
constructor(props) {
super(props);
const formattedOptions = mapOptions(props.options)

this.state = {
options: formattedOptions,
filterOptions: createFilterOptions({
options: props.options,
options: formattedOptions,
tokenizer: TOKENIZER,
}),
};
}

UNSAFE_componentWillReceiveProps(newProps) {
if (newProps.options !== this.props.options) {
const formattedOptions = mapOptions(newProps.options)

this.setState({
options: formattedOptions,
filterOptions: createFilterOptions({
options: newProps.options,
options: formattedOptions,
tokenizer: TOKENIZER,
}),
});
Expand All@@ -49,19 +56,19 @@ export default class Dropdown extends Component {
id,
clearable,
multi,
options,
setProps,
style,
loading_state,
value,
} = this.props;
const {filterOptions} = this.state;
const {options, filterOptions} = this.state;
let selectedValue;
if (type(value) === 'array') {
selectedValue = value.join(DELIMETER);
} else {
selectedValue = value;
}

return (
<div
id={id}
Expand DownExpand Up@@ -98,7 +105,7 @@ export default class Dropdown extends Component {
backspaceRemoves={clearable}
deleteRemoves={clearable}
inputProps={{autoComplete: 'off'}}
{...omit(['setProps', 'value'], this.props)}
{...omit(['setProps', 'value', 'options'], this.props)}
/>
</div>
);
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Add shorthand options to Core Components#1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

akksi
wants to merge
10
commits into

from

 Closed


Add shorthand options to Core Components
#1749
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
599908e

Add shorthand option prop types to Dropdown component


akksi Sep 6, 2021
7df1053

Rearrange RangeSlider prop order to allow using Python positional arg…


akksi Sep 8, 2021
80c51aa

Calculate default mark values and positions when mark prop is not def…


akksi Sep 8, 2021
7090828

Calculate default step value for RangeSlider when no step value is pa…


akksi Sep 8, 2021
194efa9

Calculate default RangeSlider value when no value prop is passed


akksi Sep 8, 2021
9464be3

Apply option property shorthands to Checklist component


akksi Sep 8, 2021
e3437b5

Add inline shorthand property to Checklist component


akksi Sep 8, 2021
d97fff4

Allow number values in React Component shorthand type options


akksi Sep 8, 2021
3de703f

Apply shorthand option types to RadioItems core component


akksi Sep 8, 2021
b379492

Allow shorthand data structure for DataTable component


akksi Sep 9, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


49 changes: 21 additions & 28 deletions
components/dash-core-components/src/components/Checklist.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import {append, includes, without} from 'ramda';
import React, {Component} from 'react';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * Checklist is a component that encapsulates several checkboxes.
Expand All@@ -17,6 +19,7 @@ export default class Checklist extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 style,
Expand All@@ -33,10 +36,13 @@ export default class Checklist extends Component {
 style={style}
 className={className}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 key={option.value}
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 >
 <input
Expand DownExpand Up@@ -64,39 +70,20 @@ export default class Checklist extends Component {
}

Checklist.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The checkbox's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the checkbox. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this checkbox is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -130,6 +117,11 @@ Checklist.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the checkbox input
 * and the option's label
Expand DownExpand Up@@ -194,6 +186,7 @@ Checklist.defaultProps = {
 inputClassName: '',
 labelStyle: {},
 labelClassName: '',
 inline: false,
 options: [],
 value: [],
 persisted_props: ['value'],
Expand Down

42 changes: 8 additions & 34 deletions
components/dash-core-components/src/components/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React, {Component, lazy, Suspense} from 'react';
import dropdown from '../utils/LazyLoader/dropdown';
import {optionsType} from "../utils/sharedPropTypes";

const RealDropdown = lazy(dropdown);

Expand All@@ -25,47 +26,20 @@ export default class Dropdown extends Component {
}

Dropdown.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options {label: [string|number], value: [string|number]},
 * an optional disabled field can be used for each option
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The dropdown's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the dropdown. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this option is disabled and cannot be selected.
 */
 disabled: PropTypes.bool,

 /**
 * The HTML 'title' attribute for the option. Allows for
 * information on hover. For more information on this attribute,
 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
 */
 title: PropTypes.string,
 })
 ),

 /**
 * The value of the input. If `multi` is false (the default)
 * then value is just a string that corresponds to the values
Expand Down

48 changes: 20 additions & 28 deletions
components/dash-core-components/src/components/RadioItems.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import './css/react-select@1.0.0-rc.3.min.css';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * RadioItems is a component that encapsulates several radio item inputs.
Expand All@@ -19,6 +21,7 @@ export default class RadioItems extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 loading_state,
Expand All@@ -38,9 +41,12 @@ export default class RadioItems extends Component {
 className={className}
 style={style}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 key={option.value}
 >
Expand All@@ -63,39 +69,20 @@ export default class RadioItems extends Component {
}

RadioItems.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The radio item's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the radio item. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this radio item is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -127,6 +114,11 @@ RadioItems.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the radio input
 * and the option's label
Expand Down

20 changes: 10 additions & 10 deletions
components/dash-core-components/src/components/RangeSlider.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,16 @@ export default class RangeSlider extends Component {
}

RangeSlider.propTypes = {
 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
Expand DownExpand Up@@ -88,16 +98,6 @@ RangeSlider.propTypes = {
 */
 included: PropTypes.bool,

 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * pushable could be set as true to allow pushing of
 * surrounding handles when moving an handle.
Expand Down

17 changes: 12 additions & 5 deletions
components/dash-core-components/src/fragments/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
import '../components/css/Dropdown.css';

import {propTypes, defaultProps} from '../components/Dropdown.react';
import {mapOptions} from "../utils/shorthandMappers";

// Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
// Split on spaces
Expand All@@ -25,19 +26,25 @@ const DELIMETER = ',';
export default class Dropdown extends Component {
 constructor(props) {
 super(props);
 const formattedOptions = mapOptions(props.options)

 this.state = {
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: props.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 };
 }

 UNSAFE_componentWillReceiveProps(newProps) {
 if (newProps.options !== this.props.options) {
 const formattedOptions = mapOptions(newProps.options)

 this.setState({
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: newProps.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 });
Expand All@@ -49,19 +56,19 @@ export default class Dropdown extends Component {
 id,
 clearable,
 multi,
 options,
 setProps,
 style,
 loading_state,
 value,
 } = this.props;
 const {filterOptions} = this.state;
 const {options, filterOptions} = this.state;
 let selectedValue;
 if (type(value) === 'array') {
 selectedValue = value.join(DELIMETER);
 } else {
 selectedValue = value;
 }

 return (
 <div
 id={id}
Expand DownExpand Up@@ -98,7 +105,7 @@ export default class Dropdown extends Component {
 backspaceRemoves={clearable}
 deleteRemoves={clearable}
 inputProps={{autoComplete: 'off'}}
 {...omit(['setProps', 'value'], this.props)}
 {...omit(['setProps', 'value', 'options'], this.props)}
 />
 </div>
 );
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add shorthand options to Core Components#1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

akksi
wants to merge
10
commits into

from

 Closed


Add shorthand options to Core Components
#1749
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
599908e

Add shorthand option prop types to Dropdown component


akksi Sep 6, 2021
7df1053

Rearrange RangeSlider prop order to allow using Python positional arg…


akksi Sep 8, 2021
80c51aa

Calculate default mark values and positions when mark prop is not def…


akksi Sep 8, 2021
7090828

Calculate default step value for RangeSlider when no step value is pa…


akksi Sep 8, 2021
194efa9

Calculate default RangeSlider value when no value prop is passed


akksi Sep 8, 2021
9464be3

Apply option property shorthands to Checklist component


akksi Sep 8, 2021
e3437b5

Add inline shorthand property to Checklist component


akksi Sep 8, 2021
d97fff4

Allow number values in React Component shorthand type options


akksi Sep 8, 2021
3de703f

Apply shorthand option types to RadioItems core component


akksi Sep 8, 2021
b379492

Allow shorthand data structure for DataTable component


akksi Sep 9, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


49 changes: 21 additions & 28 deletions
components/dash-core-components/src/components/Checklist.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import {append, includes, without} from 'ramda';
import React, {Component} from 'react';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * Checklist is a component that encapsulates several checkboxes.
Expand All@@ -17,6 +19,7 @@ export default class Checklist extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 style,
Expand All@@ -33,10 +36,13 @@ export default class Checklist extends Component {
 style={style}
 className={className}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 key={option.value}
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 >
 <input
Expand DownExpand Up@@ -64,39 +70,20 @@ export default class Checklist extends Component {
}

Checklist.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The checkbox's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the checkbox. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this checkbox is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -130,6 +117,11 @@ Checklist.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the checkbox input
 * and the option's label
Expand DownExpand Up@@ -194,6 +186,7 @@ Checklist.defaultProps = {
 inputClassName: '',
 labelStyle: {},
 labelClassName: '',
 inline: false,
 options: [],
 value: [],
 persisted_props: ['value'],
Expand Down

42 changes: 8 additions & 34 deletions
components/dash-core-components/src/components/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React, {Component, lazy, Suspense} from 'react';
import dropdown from '../utils/LazyLoader/dropdown';
import {optionsType} from "../utils/sharedPropTypes";

const RealDropdown = lazy(dropdown);

Expand All@@ -25,47 +26,20 @@ export default class Dropdown extends Component {
}

Dropdown.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options {label: [string|number], value: [string|number]},
 * an optional disabled field can be used for each option
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The dropdown's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the dropdown. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this option is disabled and cannot be selected.
 */
 disabled: PropTypes.bool,

 /**
 * The HTML 'title' attribute for the option. Allows for
 * information on hover. For more information on this attribute,
 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
 */
 title: PropTypes.string,
 })
 ),

 /**
 * The value of the input. If `multi` is false (the default)
 * then value is just a string that corresponds to the values
Expand Down

48 changes: 20 additions & 28 deletions
components/dash-core-components/src/components/RadioItems.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import './css/react-select@1.0.0-rc.3.min.css';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * RadioItems is a component that encapsulates several radio item inputs.
Expand All@@ -19,6 +21,7 @@ export default class RadioItems extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 loading_state,
Expand All@@ -38,9 +41,12 @@ export default class RadioItems extends Component {
 className={className}
 style={style}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 key={option.value}
 >
Expand All@@ -63,39 +69,20 @@ export default class RadioItems extends Component {
}

RadioItems.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The radio item's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the radio item. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this radio item is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -127,6 +114,11 @@ RadioItems.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the radio input
 * and the option's label
Expand Down

20 changes: 10 additions & 10 deletions
components/dash-core-components/src/components/RangeSlider.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,16 @@ export default class RangeSlider extends Component {
}

RangeSlider.propTypes = {
 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
Expand DownExpand Up@@ -88,16 +98,6 @@ RangeSlider.propTypes = {
 */
 included: PropTypes.bool,

 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * pushable could be set as true to allow pushing of
 * surrounding handles when moving an handle.
Expand Down

17 changes: 12 additions & 5 deletions
components/dash-core-components/src/fragments/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
import '../components/css/Dropdown.css';

import {propTypes, defaultProps} from '../components/Dropdown.react';
import {mapOptions} from "../utils/shorthandMappers";

// Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
// Split on spaces
Expand All@@ -25,19 +26,25 @@ const DELIMETER = ',';
export default class Dropdown extends Component {
 constructor(props) {
 super(props);
 const formattedOptions = mapOptions(props.options)

 this.state = {
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: props.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 };
 }

 UNSAFE_componentWillReceiveProps(newProps) {
 if (newProps.options !== this.props.options) {
 const formattedOptions = mapOptions(newProps.options)

 this.setState({
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: newProps.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 });
Expand All@@ -49,19 +56,19 @@ export default class Dropdown extends Component {
 id,
 clearable,
 multi,
 options,
 setProps,
 style,
 loading_state,
 value,
 } = this.props;
 const {filterOptions} = this.state;
 const {options, filterOptions} = this.state;
 let selectedValue;
 if (type(value) === 'array') {
 selectedValue = value.join(DELIMETER);
 } else {
 selectedValue = value;
 }

 return (
 <div
 id={id}
Expand DownExpand Up@@ -98,7 +105,7 @@ export default class Dropdown extends Component {
 backspaceRemoves={clearable}
 deleteRemoves={clearable}
 inputProps={{autoComplete: 'off'}}
 {...omit(['setProps', 'value'], this.props)}
 {...omit(['setProps', 'value', 'options'], this.props)}
 />
 </div>
 );
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add shorthand options to Core Components#1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

akksi
wants to merge
10
commits into

from

 Closed


Add shorthand options to Core Components
#1749
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
599908e

Add shorthand option prop types to Dropdown component


akksi Sep 6, 2021
7df1053

Rearrange RangeSlider prop order to allow using Python positional arg…


akksi Sep 8, 2021
80c51aa

Calculate default mark values and positions when mark prop is not def…


akksi Sep 8, 2021
7090828

Calculate default step value for RangeSlider when no step value is pa…


akksi Sep 8, 2021
194efa9

Calculate default RangeSlider value when no value prop is passed


akksi Sep 8, 2021
9464be3

Apply option property shorthands to Checklist component


akksi Sep 8, 2021
e3437b5

Add inline shorthand property to Checklist component


akksi Sep 8, 2021
d97fff4

Allow number values in React Component shorthand type options


akksi Sep 8, 2021
3de703f

Apply shorthand option types to RadioItems core component


akksi Sep 8, 2021
b379492

Allow shorthand data structure for DataTable component


akksi Sep 9, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


49 changes: 21 additions & 28 deletions
components/dash-core-components/src/components/Checklist.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import {append, includes, without} from 'ramda';
import React, {Component} from 'react';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * Checklist is a component that encapsulates several checkboxes.
Expand All@@ -17,6 +19,7 @@ export default class Checklist extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 style,
Expand All@@ -33,10 +36,13 @@ export default class Checklist extends Component {
 style={style}
 className={className}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 key={option.value}
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 >
 <input
Expand DownExpand Up@@ -64,39 +70,20 @@ export default class Checklist extends Component {
}

Checklist.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The checkbox's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the checkbox. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this checkbox is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -130,6 +117,11 @@ Checklist.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the checkbox input
 * and the option's label
Expand DownExpand Up@@ -194,6 +186,7 @@ Checklist.defaultProps = {
 inputClassName: '',
 labelStyle: {},
 labelClassName: '',
 inline: false,
 options: [],
 value: [],
 persisted_props: ['value'],
Expand Down

42 changes: 8 additions & 34 deletions
components/dash-core-components/src/components/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React, {Component, lazy, Suspense} from 'react';
import dropdown from '../utils/LazyLoader/dropdown';
import {optionsType} from "../utils/sharedPropTypes";

const RealDropdown = lazy(dropdown);

Expand All@@ -25,47 +26,20 @@ export default class Dropdown extends Component {
}

Dropdown.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options {label: [string|number], value: [string|number]},
 * an optional disabled field can be used for each option
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The dropdown's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the dropdown. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this option is disabled and cannot be selected.
 */
 disabled: PropTypes.bool,

 /**
 * The HTML 'title' attribute for the option. Allows for
 * information on hover. For more information on this attribute,
 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
 */
 title: PropTypes.string,
 })
 ),

 /**
 * The value of the input. If `multi` is false (the default)
 * then value is just a string that corresponds to the values
Expand Down

48 changes: 20 additions & 28 deletions
components/dash-core-components/src/components/RadioItems.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import './css/react-select@1.0.0-rc.3.min.css';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * RadioItems is a component that encapsulates several radio item inputs.
Expand All@@ -19,6 +21,7 @@ export default class RadioItems extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 loading_state,
Expand All@@ -38,9 +41,12 @@ export default class RadioItems extends Component {
 className={className}
 style={style}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 key={option.value}
 >
Expand All@@ -63,39 +69,20 @@ export default class RadioItems extends Component {
}

RadioItems.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The radio item's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the radio item. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this radio item is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -127,6 +114,11 @@ RadioItems.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the radio input
 * and the option's label
Expand Down

20 changes: 10 additions & 10 deletions
components/dash-core-components/src/components/RangeSlider.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,16 @@ export default class RangeSlider extends Component {
}

RangeSlider.propTypes = {
 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
Expand DownExpand Up@@ -88,16 +98,6 @@ RangeSlider.propTypes = {
 */
 included: PropTypes.bool,

 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * pushable could be set as true to allow pushing of
 * surrounding handles when moving an handle.
Expand Down

17 changes: 12 additions & 5 deletions
components/dash-core-components/src/fragments/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
import '../components/css/Dropdown.css';

import {propTypes, defaultProps} from '../components/Dropdown.react';
import {mapOptions} from "../utils/shorthandMappers";

// Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
// Split on spaces
Expand All@@ -25,19 +26,25 @@ const DELIMETER = ',';
export default class Dropdown extends Component {
 constructor(props) {
 super(props);
 const formattedOptions = mapOptions(props.options)

 this.state = {
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: props.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 };
 }

 UNSAFE_componentWillReceiveProps(newProps) {
 if (newProps.options !== this.props.options) {
 const formattedOptions = mapOptions(newProps.options)

 this.setState({
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: newProps.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 });
Expand All@@ -49,19 +56,19 @@ export default class Dropdown extends Component {
 id,
 clearable,
 multi,
 options,
 setProps,
 style,
 loading_state,
 value,
 } = this.props;
 const {filterOptions} = this.state;
 const {options, filterOptions} = this.state;
 let selectedValue;
 if (type(value) === 'array') {
 selectedValue = value.join(DELIMETER);
 } else {
 selectedValue = value;
 }

 return (
 <div
 id={id}
Expand DownExpand Up@@ -98,7 +105,7 @@ export default class Dropdown extends Component {
 backspaceRemoves={clearable}
 deleteRemoves={clearable}
 inputProps={{autoComplete: 'off'}}
 {...omit(['setProps', 'value'], this.props)}
 {...omit(['setProps', 'value', 'options'], this.props)}
 />
 </div>
 );
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Add shorthand options to Core Components#1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

akksi
wants to merge
10
commits into

from

 Closed


Add shorthand options to Core Components
#1749
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
599908e

Add shorthand option prop types to Dropdown component


akksi Sep 6, 2021
7df1053

Rearrange RangeSlider prop order to allow using Python positional arg…


akksi Sep 8, 2021
80c51aa

Calculate default mark values and positions when mark prop is not def…


akksi Sep 8, 2021
7090828

Calculate default step value for RangeSlider when no step value is pa…


akksi Sep 8, 2021
194efa9

Calculate default RangeSlider value when no value prop is passed


akksi Sep 8, 2021
9464be3

Apply option property shorthands to Checklist component


akksi Sep 8, 2021
e3437b5

Add inline shorthand property to Checklist component


akksi Sep 8, 2021
d97fff4

Allow number values in React Component shorthand type options


akksi Sep 8, 2021
3de703f

Apply shorthand option types to RadioItems core component


akksi Sep 8, 2021
b379492

Allow shorthand data structure for DataTable component


akksi Sep 9, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


49 changes: 21 additions & 28 deletions
components/dash-core-components/src/components/Checklist.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import {append, includes, without} from 'ramda';
import React, {Component} from 'react';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * Checklist is a component that encapsulates several checkboxes.
Expand All@@ -17,6 +19,7 @@ export default class Checklist extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 style,
Expand All@@ -33,10 +36,13 @@ export default class Checklist extends Component {
 style={style}
 className={className}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 key={option.value}
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 >
 <input
Expand DownExpand Up@@ -64,39 +70,20 @@ export default class Checklist extends Component {
}

Checklist.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The checkbox's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the checkbox. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this checkbox is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -130,6 +117,11 @@ Checklist.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the checkbox input
 * and the option's label
Expand DownExpand Up@@ -194,6 +186,7 @@ Checklist.defaultProps = {
 inputClassName: '',
 labelStyle: {},
 labelClassName: '',
 inline: false,
 options: [],
 value: [],
 persisted_props: ['value'],
Expand Down

42 changes: 8 additions & 34 deletions
components/dash-core-components/src/components/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React, {Component, lazy, Suspense} from 'react';
import dropdown from '../utils/LazyLoader/dropdown';
import {optionsType} from "../utils/sharedPropTypes";

const RealDropdown = lazy(dropdown);

Expand All@@ -25,47 +26,20 @@ export default class Dropdown extends Component {
}

Dropdown.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options {label: [string|number], value: [string|number]},
 * an optional disabled field can be used for each option
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The dropdown's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the dropdown. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this option is disabled and cannot be selected.
 */
 disabled: PropTypes.bool,

 /**
 * The HTML 'title' attribute for the option. Allows for
 * information on hover. For more information on this attribute,
 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
 */
 title: PropTypes.string,
 })
 ),

 /**
 * The value of the input. If `multi` is false (the default)
 * then value is just a string that corresponds to the values
Expand Down

48 changes: 20 additions & 28 deletions
components/dash-core-components/src/components/RadioItems.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import './css/react-select@1.0.0-rc.3.min.css';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * RadioItems is a component that encapsulates several radio item inputs.
Expand All@@ -19,6 +21,7 @@ export default class RadioItems extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 loading_state,
Expand All@@ -38,9 +41,12 @@ export default class RadioItems extends Component {
 className={className}
 style={style}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 key={option.value}
 >
Expand All@@ -63,39 +69,20 @@ export default class RadioItems extends Component {
}

RadioItems.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The radio item's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the radio item. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this radio item is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -127,6 +114,11 @@ RadioItems.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the radio input
 * and the option's label
Expand Down

20 changes: 10 additions & 10 deletions
components/dash-core-components/src/components/RangeSlider.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,16 @@ export default class RangeSlider extends Component {
}

RangeSlider.propTypes = {
 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
Expand DownExpand Up@@ -88,16 +98,6 @@ RangeSlider.propTypes = {
 */
 included: PropTypes.bool,

 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * pushable could be set as true to allow pushing of
 * surrounding handles when moving an handle.
Expand Down

17 changes: 12 additions & 5 deletions
components/dash-core-components/src/fragments/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
import '../components/css/Dropdown.css';

import {propTypes, defaultProps} from '../components/Dropdown.react';
import {mapOptions} from "../utils/shorthandMappers";

// Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
// Split on spaces
Expand All@@ -25,19 +26,25 @@ const DELIMETER = ',';
export default class Dropdown extends Component {
 constructor(props) {
 super(props);
 const formattedOptions = mapOptions(props.options)

 this.state = {
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: props.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 };
 }

 UNSAFE_componentWillReceiveProps(newProps) {
 if (newProps.options !== this.props.options) {
 const formattedOptions = mapOptions(newProps.options)

 this.setState({
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: newProps.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 });
Expand All@@ -49,19 +56,19 @@ export default class Dropdown extends Component {
 id,
 clearable,
 multi,
 options,
 setProps,
 style,
 loading_state,
 value,
 } = this.props;
 const {filterOptions} = this.state;
 const {options, filterOptions} = this.state;
 let selectedValue;
 if (type(value) === 'array') {
 selectedValue = value.join(DELIMETER);
 } else {
 selectedValue = value;
 }

 return (
 <div
 id={id}
Expand DownExpand Up@@ -98,7 +105,7 @@ export default class Dropdown extends Component {
 backspaceRemoves={clearable}
 deleteRemoves={clearable}
 inputProps={{autoComplete: 'off'}}
 {...omit(['setProps', 'value'], this.props)}
 {...omit(['setProps', 'value', 'options'], this.props)}
 />
 </div>
 );
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add shorthand options to Core Components#1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

akksi
wants to merge
10
commits into

from

 Closed


Add shorthand options to Core Components
#1749
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
599908e

Add shorthand option prop types to Dropdown component


akksi Sep 6, 2021
7df1053

Rearrange RangeSlider prop order to allow using Python positional arg…


akksi Sep 8, 2021
80c51aa

Calculate default mark values and positions when mark prop is not def…


akksi Sep 8, 2021
7090828

Calculate default step value for RangeSlider when no step value is pa…


akksi Sep 8, 2021
194efa9

Calculate default RangeSlider value when no value prop is passed


akksi Sep 8, 2021
9464be3

Apply option property shorthands to Checklist component


akksi Sep 8, 2021
e3437b5

Add inline shorthand property to Checklist component


akksi Sep 8, 2021
d97fff4

Allow number values in React Component shorthand type options


akksi Sep 8, 2021
3de703f

Apply shorthand option types to RadioItems core component


akksi Sep 8, 2021
b379492

Allow shorthand data structure for DataTable component


akksi Sep 9, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


49 changes: 21 additions & 28 deletions
components/dash-core-components/src/components/Checklist.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import {append, includes, without} from 'ramda';
import React, {Component} from 'react';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * Checklist is a component that encapsulates several checkboxes.
Expand All@@ -17,6 +19,7 @@ export default class Checklist extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 style,
Expand All@@ -33,10 +36,13 @@ export default class Checklist extends Component {
 style={style}
 className={className}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 key={option.value}
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 >
 <input
Expand DownExpand Up@@ -64,39 +70,20 @@ export default class Checklist extends Component {
}

Checklist.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The checkbox's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the checkbox. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this checkbox is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -130,6 +117,11 @@ Checklist.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the checkbox input
 * and the option's label
Expand DownExpand Up@@ -194,6 +186,7 @@ Checklist.defaultProps = {
 inputClassName: '',
 labelStyle: {},
 labelClassName: '',
 inline: false,
 options: [],
 value: [],
 persisted_props: ['value'],
Expand Down

42 changes: 8 additions & 34 deletions
components/dash-core-components/src/components/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React, {Component, lazy, Suspense} from 'react';
import dropdown from '../utils/LazyLoader/dropdown';
import {optionsType} from "../utils/sharedPropTypes";

const RealDropdown = lazy(dropdown);

Expand All@@ -25,47 +26,20 @@ export default class Dropdown extends Component {
}

Dropdown.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options {label: [string|number], value: [string|number]},
 * an optional disabled field can be used for each option
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The dropdown's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the dropdown. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this option is disabled and cannot be selected.
 */
 disabled: PropTypes.bool,

 /**
 * The HTML 'title' attribute for the option. Allows for
 * information on hover. For more information on this attribute,
 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
 */
 title: PropTypes.string,
 })
 ),

 /**
 * The value of the input. If `multi` is false (the default)
 * then value is just a string that corresponds to the values
Expand Down

48 changes: 20 additions & 28 deletions
components/dash-core-components/src/components/RadioItems.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import './css/react-select@1.0.0-rc.3.min.css';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * RadioItems is a component that encapsulates several radio item inputs.
Expand All@@ -19,6 +21,7 @@ export default class RadioItems extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 loading_state,
Expand All@@ -38,9 +41,12 @@ export default class RadioItems extends Component {
 className={className}
 style={style}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 key={option.value}
 >
Expand All@@ -63,39 +69,20 @@ export default class RadioItems extends Component {
}

RadioItems.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The radio item's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the radio item. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this radio item is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -127,6 +114,11 @@ RadioItems.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the radio input
 * and the option's label
Expand Down

20 changes: 10 additions & 10 deletions
components/dash-core-components/src/components/RangeSlider.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,16 @@ export default class RangeSlider extends Component {
}

RangeSlider.propTypes = {
 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
Expand DownExpand Up@@ -88,16 +98,6 @@ RangeSlider.propTypes = {
 */
 included: PropTypes.bool,

 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * pushable could be set as true to allow pushing of
 * surrounding handles when moving an handle.
Expand Down

17 changes: 12 additions & 5 deletions
components/dash-core-components/src/fragments/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
import '../components/css/Dropdown.css';

import {propTypes, defaultProps} from '../components/Dropdown.react';
import {mapOptions} from "../utils/shorthandMappers";

// Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
// Split on spaces
Expand All@@ -25,19 +26,25 @@ const DELIMETER = ',';
export default class Dropdown extends Component {
 constructor(props) {
 super(props);
 const formattedOptions = mapOptions(props.options)

 this.state = {
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: props.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 };
 }

 UNSAFE_componentWillReceiveProps(newProps) {
 if (newProps.options !== this.props.options) {
 const formattedOptions = mapOptions(newProps.options)

 this.setState({
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: newProps.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 });
Expand All@@ -49,19 +56,19 @@ export default class Dropdown extends Component {
 id,
 clearable,
 multi,
 options,
 setProps,
 style,
 loading_state,
 value,
 } = this.props;
 const {filterOptions} = this.state;
 const {options, filterOptions} = this.state;
 let selectedValue;
 if (type(value) === 'array') {
 selectedValue = value.join(DELIMETER);
 } else {
 selectedValue = value;
 }

 return (
 <div
 id={id}
Expand DownExpand Up@@ -98,7 +105,7 @@ export default class Dropdown extends Component {
 backspaceRemoves={clearable}
 deleteRemoves={clearable}
 inputProps={{autoComplete: 'off'}}
 {...omit(['setProps', 'value'], this.props)}
 {...omit(['setProps', 'value', 'options'], this.props)}
 />
 </div>
 );
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add shorthand options to Core Components#1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

akksi
wants to merge
10
commits into

from

 Closed


Add shorthand options to Core Components
#1749
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
599908e

Add shorthand option prop types to Dropdown component


akksi Sep 6, 2021
7df1053

Rearrange RangeSlider prop order to allow using Python positional arg…


akksi Sep 8, 2021
80c51aa

Calculate default mark values and positions when mark prop is not def…


akksi Sep 8, 2021
7090828

Calculate default step value for RangeSlider when no step value is pa…


akksi Sep 8, 2021
194efa9

Calculate default RangeSlider value when no value prop is passed


akksi Sep 8, 2021
9464be3

Apply option property shorthands to Checklist component


akksi Sep 8, 2021
e3437b5

Add inline shorthand property to Checklist component


akksi Sep 8, 2021
d97fff4

Allow number values in React Component shorthand type options


akksi Sep 8, 2021
3de703f

Apply shorthand option types to RadioItems core component


akksi Sep 8, 2021
b379492

Allow shorthand data structure for DataTable component


akksi Sep 9, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


49 changes: 21 additions & 28 deletions
components/dash-core-components/src/components/Checklist.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import {append, includes, without} from 'ramda';
import React, {Component} from 'react';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * Checklist is a component that encapsulates several checkboxes.
Expand All@@ -17,6 +19,7 @@ export default class Checklist extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 style,
Expand All@@ -33,10 +36,13 @@ export default class Checklist extends Component {
 style={style}
 className={className}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 key={option.value}
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 >
 <input
Expand DownExpand Up@@ -64,39 +70,20 @@ export default class Checklist extends Component {
}

Checklist.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The checkbox's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the checkbox. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this checkbox is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -130,6 +117,11 @@ Checklist.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the checkbox input
 * and the option's label
Expand DownExpand Up@@ -194,6 +186,7 @@ Checklist.defaultProps = {
 inputClassName: '',
 labelStyle: {},
 labelClassName: '',
 inline: false,
 options: [],
 value: [],
 persisted_props: ['value'],
Expand Down

42 changes: 8 additions & 34 deletions
components/dash-core-components/src/components/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React, {Component, lazy, Suspense} from 'react';
import dropdown from '../utils/LazyLoader/dropdown';
import {optionsType} from "../utils/sharedPropTypes";

const RealDropdown = lazy(dropdown);

Expand All@@ -25,47 +26,20 @@ export default class Dropdown extends Component {
}

Dropdown.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options {label: [string|number], value: [string|number]},
 * an optional disabled field can be used for each option
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The dropdown's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the dropdown. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this option is disabled and cannot be selected.
 */
 disabled: PropTypes.bool,

 /**
 * The HTML 'title' attribute for the option. Allows for
 * information on hover. For more information on this attribute,
 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
 */
 title: PropTypes.string,
 })
 ),

 /**
 * The value of the input. If `multi` is false (the default)
 * then value is just a string that corresponds to the values
Expand Down

48 changes: 20 additions & 28 deletions
components/dash-core-components/src/components/RadioItems.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import './css/react-select@1.0.0-rc.3.min.css';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * RadioItems is a component that encapsulates several radio item inputs.
Expand All@@ -19,6 +21,7 @@ export default class RadioItems extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 loading_state,
Expand All@@ -38,9 +41,12 @@ export default class RadioItems extends Component {
 className={className}
 style={style}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 key={option.value}
 >
Expand All@@ -63,39 +69,20 @@ export default class RadioItems extends Component {
}

RadioItems.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The radio item's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the radio item. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this radio item is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -127,6 +114,11 @@ RadioItems.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the radio input
 * and the option's label
Expand Down

20 changes: 10 additions & 10 deletions
components/dash-core-components/src/components/RangeSlider.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,16 @@ export default class RangeSlider extends Component {
}

RangeSlider.propTypes = {
 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
Expand DownExpand Up@@ -88,16 +98,6 @@ RangeSlider.propTypes = {
 */
 included: PropTypes.bool,

 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * pushable could be set as true to allow pushing of
 * surrounding handles when moving an handle.
Expand Down

17 changes: 12 additions & 5 deletions
components/dash-core-components/src/fragments/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
import '../components/css/Dropdown.css';

import {propTypes, defaultProps} from '../components/Dropdown.react';
import {mapOptions} from "../utils/shorthandMappers";

// Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
// Split on spaces
Expand All@@ -25,19 +26,25 @@ const DELIMETER = ',';
export default class Dropdown extends Component {
 constructor(props) {
 super(props);
 const formattedOptions = mapOptions(props.options)

 this.state = {
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: props.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 };
 }

 UNSAFE_componentWillReceiveProps(newProps) {
 if (newProps.options !== this.props.options) {
 const formattedOptions = mapOptions(newProps.options)

 this.setState({
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: newProps.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 });
Expand All@@ -49,19 +56,19 @@ export default class Dropdown extends Component {
 id,
 clearable,
 multi,
 options,
 setProps,
 style,
 loading_state,
 value,
 } = this.props;
 const {filterOptions} = this.state;
 const {options, filterOptions} = this.state;
 let selectedValue;
 if (type(value) === 'array') {
 selectedValue = value.join(DELIMETER);
 } else {
 selectedValue = value;
 }

 return (
 <div
 id={id}
Expand DownExpand Up@@ -98,7 +105,7 @@ export default class Dropdown extends Component {
 backspaceRemoves={clearable}
 deleteRemoves={clearable}
 inputProps={{autoComplete: 'off'}}
 {...omit(['setProps', 'value'], this.props)}
 {...omit(['setProps', 'value', 'options'], this.props)}
 />
 </div>
 );
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Add shorthand options to Core Components#1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

akksi
wants to merge
10
commits into

from

 Closed


Add shorthand options to Core Components
#1749
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
599908e

Add shorthand option prop types to Dropdown component


akksi Sep 6, 2021
7df1053

Rearrange RangeSlider prop order to allow using Python positional arg…


akksi Sep 8, 2021
80c51aa

Calculate default mark values and positions when mark prop is not def…


akksi Sep 8, 2021
7090828

Calculate default step value for RangeSlider when no step value is pa…


akksi Sep 8, 2021
194efa9

Calculate default RangeSlider value when no value prop is passed


akksi Sep 8, 2021
9464be3

Apply option property shorthands to Checklist component


akksi Sep 8, 2021
e3437b5

Add inline shorthand property to Checklist component


akksi Sep 8, 2021
d97fff4

Allow number values in React Component shorthand type options


akksi Sep 8, 2021
3de703f

Apply shorthand option types to RadioItems core component


akksi Sep 8, 2021
b379492

Allow shorthand data structure for DataTable component


akksi Sep 9, 2021

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


49 changes: 21 additions & 28 deletions
components/dash-core-components/src/components/Checklist.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import {append, includes, without} from 'ramda';
import React, {Component} from 'react';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * Checklist is a component that encapsulates several checkboxes.
Expand All@@ -17,6 +19,7 @@ export default class Checklist extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 style,
Expand All@@ -33,10 +36,13 @@ export default class Checklist extends Component {
 style={style}
 className={className}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 key={option.value}
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 >
 <input
Expand DownExpand Up@@ -64,39 +70,20 @@ export default class Checklist extends Component {
}

Checklist.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The checkbox's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the checkbox. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this checkbox is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -130,6 +117,11 @@ Checklist.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the checkbox input
 * and the option's label
Expand DownExpand Up@@ -194,6 +186,7 @@ Checklist.defaultProps = {
 inputClassName: '',
 labelStyle: {},
 labelClassName: '',
 inline: false,
 options: [],
 value: [],
 persisted_props: ['value'],
Expand Down

42 changes: 8 additions & 34 deletions
components/dash-core-components/src/components/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React, {Component, lazy, Suspense} from 'react';
import dropdown from '../utils/LazyLoader/dropdown';
import {optionsType} from "../utils/sharedPropTypes";

const RealDropdown = lazy(dropdown);

Expand All@@ -25,47 +26,20 @@ export default class Dropdown extends Component {
}

Dropdown.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options {label: [string|number], value: [string|number]},
 * an optional disabled field can be used for each option
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The dropdown's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the dropdown. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this option is disabled and cannot be selected.
 */
 disabled: PropTypes.bool,

 /**
 * The HTML 'title' attribute for the option. Allows for
 * information on hover. For more information on this attribute,
 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
 */
 title: PropTypes.string,
 })
 ),

 /**
 * The value of the input. If `multi` is false (the default)
 * then value is just a string that corresponds to the values
Expand Down

48 changes: 20 additions & 28 deletions
components/dash-core-components/src/components/RadioItems.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import './css/react-select@1.0.0-rc.3.min.css';
import {optionsType} from "../utils/sharedPropTypes";
import {mapOptions} from "../utils/shorthandMappers";

/**
 * RadioItems is a component that encapsulates several radio item inputs.
Expand All@@ -19,6 +21,7 @@ export default class RadioItems extends Component {
 inputStyle,
 labelClassName,
 labelStyle,
 inline,
 options,
 setProps,
 loading_state,
Expand All@@ -38,9 +41,12 @@ export default class RadioItems extends Component {
 className={className}
 style={style}
 >
 {options.map(option => (
 {mapOptions(options).map(option => (
 <label
 style={labelStyle}
 style={{
 ...{display: inline ? 'inline-block' : "block"},
 ...labelStyle
 }}
 className={labelClassName}
 key={option.value}
 >
Expand All@@ -63,39 +69,20 @@ export default class RadioItems extends Component {
}

RadioItems.propTypes = {
 /**
 * An array of dictionaries as [{label: "Label", value: "Value"}],
 * OR an array of options as ["Option 1", "Option 2"]
 * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
 */
 options: optionsType,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
 * components in an app.
 */
 id: PropTypes.string,

 /**
 * An array of options
 */
 options: PropTypes.arrayOf(
 PropTypes.exact({
 /**
 * The radio item's label
 */
 label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * The value of the radio item. This value
 * corresponds to the items specified in the
 * `value` property.
 */
 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 .isRequired,

 /**
 * If true, this radio item is disabled and can't be clicked on.
 */
 disabled: PropTypes.bool,
 })
 ),

 /**
 * The currently selected value
 */
Expand DownExpand Up@@ -127,6 +114,11 @@ RadioItems.propTypes = {
 */
 labelStyle: PropTypes.object,

 /**
 * Shorthand for applying {'display': 'inline-block'} labelStyle
 */
 inline: PropTypes.bool,

 /**
 * The class of the <label> that wraps the radio input
 * and the option's label
Expand Down

20 changes: 10 additions & 10 deletions
components/dash-core-components/src/components/RangeSlider.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,16 @@ export default class RangeSlider extends Component {
}

RangeSlider.propTypes = {
 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * The ID of this component, used to identify dash components
 * in callbacks. The ID needs to be unique across all of the
Expand DownExpand Up@@ -88,16 +98,6 @@ RangeSlider.propTypes = {
 */
 included: PropTypes.bool,

 /**
 * Minimum allowed value of the slider
 */
 min: PropTypes.number,

 /**
 * Maximum allowed value of the slider
 */
 max: PropTypes.number,

 /**
 * pushable could be set as true to allow pushing of
 * surrounding handles when moving an handle.
Expand Down

17 changes: 12 additions & 5 deletions
components/dash-core-components/src/fragments/Dropdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
import '../components/css/Dropdown.css';

import {propTypes, defaultProps} from '../components/Dropdown.react';
import {mapOptions} from "../utils/shorthandMappers";

// Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
// Split on spaces
Expand All@@ -25,19 +26,25 @@ const DELIMETER = ',';
export default class Dropdown extends Component {
 constructor(props) {
 super(props);
 const formattedOptions = mapOptions(props.options)

 this.state = {
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: props.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 };
 }

 UNSAFE_componentWillReceiveProps(newProps) {
 if (newProps.options !== this.props.options) {
 const formattedOptions = mapOptions(newProps.options)

 this.setState({
 options: formattedOptions,
 filterOptions: createFilterOptions({
 options: newProps.options,
 options: formattedOptions,
 tokenizer: TOKENIZER,
 }),
 });
Expand All@@ -49,19 +56,19 @@ export default class Dropdown extends Component {
 id,
 clearable,
 multi,
 options,
 setProps,
 style,
 loading_state,
 value,
 } = this.props;
 const {filterOptions} = this.state;
 const {options, filterOptions} = this.state;
 let selectedValue;
 if (type(value) === 'array') {
 selectedValue = value.join(DELIMETER);
 } else {
 selectedValue = value;
 }

 return (
 <div
 id={id}
Expand DownExpand Up@@ -98,7 +105,7 @@ export default class Dropdown extends Component {
 backspaceRemoves={clearable}
 deleteRemoves={clearable}
 inputProps={{autoComplete: 'off'}}
 {...omit(['setProps', 'value'], this.props)}
 {...omit(['setProps', 'value', 'options'], this.props)}
 />
 </div>
 );
Expand Down
Loading