Skip to content

Commit c70ad1e

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

30 files changed

+981
-222
lines changed

‎components/dash-core-components/package-lock.json

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+114-56
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PropTypes from 'prop-types';
22
import {append, includes, without} from 'ramda';
33
import React, {Component} from 'react';
4+
import {sanitizeOptions} from '../utils/optionTypes';
45

56
/**
67
* Checklist is a component that encapsulates several checkboxes.
@@ -22,8 +23,8 @@ export default class Checklist extends Component {
2223
style,
2324
loading_state,
2425
value,
26+
inline,
2527
} = this.props;
26-
2728
return (
2829
<div
2930
data-dash-is-loading={
@@ -33,77 +34,126 @@ export default class Checklist extends Component {
3334
style={style}
3435
className={className}
3536
>
36-
{options.map(option => (
37-
<label
38-
key={option.value}
39-
style={labelStyle}
40-
className={labelClassName}
41-
>
42-
<input
43-
checked={includes(option.value, value)}
44-
className={inputClassName}
45-
disabled={Boolean(option.disabled)}
46-
style={inputStyle}
47-
type="checkbox"
48-
onChange={() => {
49-
let newValue;
50-
if (includes(option.value, value)) {
51-
newValue = without([option.value], value);
52-
} else {
53-
newValue = append(option.value, value);
54-
}
55-
setProps({value: newValue});
56-
}}
57-
/>
58-
{option.label}
59-
</label>
60-
))}
37+
{sanitizeOptions(options).map(option => {
38+
return (
39+
<label
40+
key={option.value}
41+
style={Object.assign(
42+
{},
43+
labelStyle,
44+
inline ? {display: 'inline-block'} : {}
45+
)}
46+
className={labelClassName}
47+
>
48+
<input
49+
checked={includes(option.value, value)}
50+
className={inputClassName}
51+
disabled={Boolean(option.disabled)}
52+
style={inputStyle}
53+
type="checkbox"
54+
onChange={() => {
55+
let newValue;
56+
if (includes(option.value, value)) {
57+
newValue = without(
58+
[option.value],
59+
value
60+
);
61+
} else {
62+
newValue = append(option.value, value);
63+
}
64+
setProps({value: newValue});
65+
}}
66+
/>
67+
{option.label}
68+
</label>
69+
);
70+
})}
6171
</div>
6272
);
6373
}
6474
}
6575

6676
Checklist.propTypes = {
67-
/**
68-
* The ID of this component, used to identify dash components
69-
* in callbacks. The ID needs to be unique across all of the
70-
* components in an app.
71-
*/
72-
id: PropTypes.string,
73-
7477
/**
7578
* An array of options
7679
*/
77-
options: PropTypes.arrayOf(
78-
PropTypes.exact({
79-
/**
80-
* The checkbox's label
81-
*/
82-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
83-
.isRequired,
84-
85-
/**
86-
* The value of the checkbox. This value
87-
* corresponds to the items specified in the
88-
* `value` property.
89-
*/
90-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
91-
.isRequired,
92-
93-
/**
94-
* If true, this checkbox is disabled and can't be clicked on.
95-
*/
96-
disabled: PropTypes.bool,
97-
})
98-
),
80+
options: PropTypes.oneOfType([
81+
/**
82+
* Array of options where the label and the value are the same thing - [string|number|bool]
83+
*/
84+
PropTypes.arrayOf(
85+
PropTypes.oneOfType([
86+
PropTypes.string,
87+
PropTypes.number,
88+
PropTypes.bool,
89+
])
90+
),
91+
/**
92+
* Simpler `options` representation in dictionary format. The order is not guaranteed.
93+
* {`value1`: `label1`, `value2`: `label2`, ... }
94+
* which is equal to
95+
* [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
96+
*/
97+
PropTypes.object,
98+
/**
99+
* An array of options {label: [string|number], value: [string|number]},
100+
* an optional disabled field can be used for each option
101+
*/
102+
PropTypes.arrayOf(
103+
PropTypes.exact({
104+
/**
105+
* The option's label
106+
*/
107+
label: PropTypes.oneOfType([
108+
PropTypes.string,
109+
PropTypes.number,
110+
PropTypes.bool,
111+
]).isRequired,
112+
113+
/**
114+
* The value of the option. This value
115+
* corresponds to the items specified in the
116+
* `value` property.
117+
*/
118+
value: PropTypes.oneOfType([
119+
PropTypes.string,
120+
PropTypes.number,
121+
PropTypes.bool,
122+
]).isRequired,
123+
124+
/**
125+
* If true, this option is disabled and cannot be selected.
126+
*/
127+
disabled: PropTypes.bool,
128+
129+
/**
130+
* The HTML 'title' attribute for the option. Allows for
131+
* information on hover. For more information on this attribute,
132+
* see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
133+
*/
134+
title: PropTypes.string,
135+
})
136+
),
137+
]),
99138

100139
/**
101140
* The currently selected value
102141
*/
103142
value: PropTypes.arrayOf(
104-
PropTypes.oneOfType([PropTypes.string, PropTypes.number])
143+
PropTypes.oneOfType([
144+
PropTypes.string,
145+
PropTypes.number,
146+
PropTypes.bool,
147+
])
105148
),
106149

150+
/**
151+
* The ID of this component, used to identify dash components
152+
* in callbacks. The ID needs to be unique across all of the
153+
* components in an app.
154+
*/
155+
id: PropTypes.string,
156+
107157
/**
108158
* The class of the container (div)
109159
*/
@@ -187,6 +237,13 @@ Checklist.propTypes = {
187237
* session: window.sessionStorage, data is cleared once the browser quit.
188238
*/
189239
persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
240+
241+
/**
242+
* Indicates whether labelStyle should be inline or not
243+
* True: Automatically set { 'display': 'inline-block' } to labelStyle
244+
* False: No additional styles are passed into labelStyle.
245+
*/
246+
inline: PropTypes.bool,
190247
};
191248

192249
Checklist.defaultProps = {
@@ -198,4 +255,5 @@ Checklist.defaultProps = {
198255
value: [],
199256
persisted_props: ['value'],
200257
persistence_type: 'local',
258+
inline: false,
201259
};

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

+68-37
Original file line numberDiff line numberDiff line change
@@ -25,46 +25,65 @@ export default class Dropdown extends Component {
2525
}
2626

2727
Dropdown.propTypes = {
28-
/**
29-
* The ID of this component, used to identify dash components
30-
* in callbacks. The ID needs to be unique across all of the
31-
* components in an app.
32-
*/
33-
id: PropTypes.string,
34-
3528
/**
3629
* An array of options {label: [string|number], value: [string|number]},
3730
* an optional disabled field can be used for each option
3831
*/
39-
options: PropTypes.arrayOf(
40-
PropTypes.exact({
41-
/**
42-
* The dropdown's label
43-
*/
44-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
45-
.isRequired,
46-
47-
/**
48-
* The value of the dropdown. This value
49-
* corresponds to the items specified in the
50-
* `value` property.
51-
*/
52-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
53-
.isRequired,
54-
55-
/**
56-
* If true, this option is disabled and cannot be selected.
57-
*/
58-
disabled: PropTypes.bool,
59-
60-
/**
61-
* The HTML 'title' attribute for the option. Allows for
62-
* information on hover. For more information on this attribute,
63-
* see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
64-
*/
65-
title: PropTypes.string,
66-
})
67-
),
32+
options: PropTypes.oneOfType([
33+
/**
34+
* Array of options where the label and the value are the same thing - [string|number|bool]
35+
*/
36+
PropTypes.arrayOf(
37+
PropTypes.oneOfType([
38+
PropTypes.string,
39+
PropTypes.number,
40+
PropTypes.bool,
41+
])
42+
),
43+
/**
44+
* Simpler `options` representation in dictionary format. The order is not guaranteed.
45+
* {`value1`: `label1`, `value2`: `label2`, ... }
46+
* which is equal to
47+
* [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
48+
*/
49+
PropTypes.object,
50+
/**
51+
* An array of options {label: [string|number], value: [string|number]},
52+
* an optional disabled field can be used for each option
53+
*/
54+
PropTypes.arrayOf(
55+
PropTypes.exact({
56+
/**
57+
* The option's label
58+
*/
59+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
60+
.isRequired,
61+
62+
/**
63+
* The value of the option. This value
64+
* corresponds to the items specified in the
65+
* `value` property.
66+
*/
67+
value: PropTypes.oneOfType([
68+
PropTypes.string,
69+
PropTypes.number,
70+
PropTypes.bool,
71+
]).isRequired,
72+
73+
/**
74+
* If true, this option is disabled and cannot be selected.
75+
*/
76+
disabled: PropTypes.bool,
77+
78+
/**
79+
* The HTML 'title' attribute for the option. Allows for
80+
* information on hover. For more information on this attribute,
81+
* see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
82+
*/
83+
title: PropTypes.string,
84+
})
85+
),
86+
]),
6887

6988
/**
7089
* The value of the input. If `multi` is false (the default)
@@ -77,11 +96,23 @@ Dropdown.propTypes = {
7796
value: PropTypes.oneOfType([
7897
PropTypes.string,
7998
PropTypes.number,
99+
PropTypes.bool,
80100
PropTypes.arrayOf(
81-
PropTypes.oneOfType([PropTypes.string, PropTypes.number])
101+
PropTypes.oneOfType([
102+
PropTypes.string,
103+
PropTypes.number,
104+
PropTypes.bool,
105+
])
82106
),
83107
]),
84108

109+
/**
110+
* The ID of this component, used to identify dash components
111+
* in callbacks. The ID needs to be unique across all of the
112+
* components in an app.
113+
*/
114+
id: PropTypes.string,
115+
85116
/**
86117
* height of each option. Can be increased when label lengths would wrap around
87118
*/

0 commit comments

Comments
 (0)