@patternfly/react-core 4.267.13 → 4.268.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/components/Dropdown/DropdownToggleCheckbox.d.ts +6 -0
- package/components/Dropdown/DropdownToggleCheckbox.d.ts.map +1 -1
- package/components/Dropdown/DropdownToggleCheckbox.js +6 -3
- package/components/Dropdown/DropdownToggleCheckbox.js.map +1 -1
- package/dist/esm/components/Dropdown/DropdownToggleCheckbox.d.ts +6 -0
- package/dist/esm/components/Dropdown/DropdownToggleCheckbox.d.ts.map +1 -1
- package/dist/esm/components/Dropdown/DropdownToggleCheckbox.js +6 -3
- package/dist/esm/components/Dropdown/DropdownToggleCheckbox.js.map +1 -1
- package/dist/js/components/Dropdown/DropdownToggleCheckbox.d.ts +6 -0
- package/dist/js/components/Dropdown/DropdownToggleCheckbox.d.ts.map +1 -1
- package/dist/js/components/Dropdown/DropdownToggleCheckbox.js +6 -3
- package/dist/js/components/Dropdown/DropdownToggleCheckbox.js.map +1 -1
- package/dist/umd/react-core.min.js +1 -1
- package/package.json +2 -2
- package/src/components/Dropdown/DropdownToggleCheckbox.tsx +26 -1
- package/src/components/Dropdown/examples/Dropdown.md +9 -2
- package/src/components/Dropdown/examples/DropdownSplitButton.tsx +1 -1
- package/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx +140 -0
- package/src/components/Page/examples/Page.md +63 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 4.268.0 (2023-01-09)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **Dropdown:** support inProgress variation ([#8436](https://github.com/patternfly/patternfly-react/issues/8436)) ([28e1a7a](https://github.com/patternfly/patternfly-react/commit/28e1a7afa7422639afb3a694db552427bcabe6dc))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [4.267.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.267.13...@patternfly/react-core@4.267.14) (2023-01-06)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @patternfly/react-core
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## 4.267.13 (2023-01-06)
|
|
7
26
|
|
|
8
27
|
|
|
@@ -10,6 +10,8 @@ export interface DropdownToggleCheckboxProps extends Omit<React.HTMLProps<HTMLIn
|
|
|
10
10
|
isDisabled?: boolean;
|
|
11
11
|
/** Flag to show if the checkbox is checked */
|
|
12
12
|
isChecked?: boolean | null;
|
|
13
|
+
/** @beta Flag to show if the checkbox is in progress */
|
|
14
|
+
isInProgress?: boolean | null;
|
|
13
15
|
/** Alternate Flag to show if the checkbox is checked */
|
|
14
16
|
checked?: boolean | null;
|
|
15
17
|
/** A callback for when the checkbox selection changes */
|
|
@@ -20,6 +22,10 @@ export interface DropdownToggleCheckboxProps extends Omit<React.HTMLProps<HTMLIn
|
|
|
20
22
|
id: string;
|
|
21
23
|
/** Aria-label of the checkbox */
|
|
22
24
|
'aria-label': string;
|
|
25
|
+
/** @beta Text describing current loading status or progress */
|
|
26
|
+
defaultProgressAriaValueText?: string;
|
|
27
|
+
/** @beta Aria-label for the default progress icon to describe what is loading */
|
|
28
|
+
defaultProgressAriaLabel?: string;
|
|
23
29
|
/** Value to overwrite the randomly generated data-ouia-component-id.*/
|
|
24
30
|
ouiaId?: number | string;
|
|
25
31
|
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownToggleCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownToggleCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;AAG1E,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC,EAC3F,SAAS;IACX,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,iFAAiF;IACjF,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iLAAiL;IACjL,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBAAa,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,2BAA2B,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;IAC/G,MAAM,CAAC,WAAW,SAA4B;IAC9C,MAAM,CAAC,YAAY,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAK5D;gBAEU,KAAK,EAAE,2BAA2B;IAO9C,YAAY,UAAW,MAAM,SAAS,CAAC,gBAAgB,CAAC,UAEtD;IAEF,gBAAgB,gBASd;IAEF,MAAM;CA0DP"}
|
|
@@ -3,6 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
|
|
4
4
|
import { css } from '@patternfly/react-styles';
|
|
5
5
|
import { getOUIAProps, getDefaultOUIAId } from '../../helpers';
|
|
6
|
+
import { Spinner } from '../Spinner';
|
|
6
7
|
export class DropdownToggleCheckbox extends React.Component {
|
|
7
8
|
constructor(props) {
|
|
8
9
|
super(props);
|
|
@@ -26,14 +27,16 @@ export class DropdownToggleCheckbox extends React.Component {
|
|
|
26
27
|
};
|
|
27
28
|
}
|
|
28
29
|
render() {
|
|
29
|
-
const _a = this.props, { className, isValid, isDisabled, isChecked, children, ouiaId, ouiaSafe,
|
|
30
|
+
const _a = this.props, { className, isValid, isDisabled, isChecked, isInProgress = false, defaultProgressAriaLabel, defaultProgressAriaValueText = 'Loading...', children, ouiaId, ouiaSafe,
|
|
30
31
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
31
32
|
onChange, checked } = _a,
|
|
32
33
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
33
|
-
props = __rest(_a, ["className", "isValid", "isDisabled", "isChecked", "children", "ouiaId", "ouiaSafe", "onChange", "checked"]);
|
|
34
|
+
props = __rest(_a, ["className", "isValid", "isDisabled", "isChecked", "isInProgress", "defaultProgressAriaLabel", "defaultProgressAriaValueText", "children", "ouiaId", "ouiaSafe", "onChange", "checked"]);
|
|
35
|
+
const spinner = (React.createElement(Spinner, { diameter: "1em", isSVG: true, "aria-valuetext": defaultProgressAriaValueText, "aria-live": "polite", "aria-label": defaultProgressAriaLabel }));
|
|
34
36
|
const text = children && (React.createElement("span", { className: css(styles.dropdownToggleText, className), "aria-hidden": "true", id: `${props.id}-text` }, children));
|
|
35
|
-
return (React.createElement("label", { className: css(styles.dropdownToggleCheck, className), htmlFor: props.id },
|
|
37
|
+
return (React.createElement("label", { className: css(styles.dropdownToggleCheck, isInProgress && styles.modifiers.inProgress, className), htmlFor: props.id },
|
|
36
38
|
React.createElement("input", Object.assign({}, props, (this.calculateChecked() !== undefined && { onChange: this.handleChange }), { type: "checkbox", ref: elem => elem && (elem.indeterminate = isChecked === null), "aria-invalid": !isValid, disabled: isDisabled, checked: this.calculateChecked() }, getOUIAProps(DropdownToggleCheckbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))),
|
|
39
|
+
isInProgress && React.createElement("span", { className: css(styles.dropdownToggleProgress, className) }, spinner),
|
|
37
40
|
text));
|
|
38
41
|
}
|
|
39
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownToggleCheckbox.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,2DAA2D,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAa,gBAAgB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownToggleCheckbox.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,8 @@ export interface DropdownToggleCheckboxProps extends Omit<React.HTMLProps<HTMLIn
|
|
|
10
10
|
isDisabled?: boolean;
|
|
11
11
|
/** Flag to show if the checkbox is checked */
|
|
12
12
|
isChecked?: boolean | null;
|
|
13
|
+
/** @beta Flag to show if the checkbox is in progress */
|
|
14
|
+
isInProgress?: boolean | null;
|
|
13
15
|
/** Alternate Flag to show if the checkbox is checked */
|
|
14
16
|
checked?: boolean | null;
|
|
15
17
|
/** A callback for when the checkbox selection changes */
|
|
@@ -20,6 +22,10 @@ export interface DropdownToggleCheckboxProps extends Omit<React.HTMLProps<HTMLIn
|
|
|
20
22
|
id: string;
|
|
21
23
|
/** Aria-label of the checkbox */
|
|
22
24
|
'aria-label': string;
|
|
25
|
+
/** @beta Text describing current loading status or progress */
|
|
26
|
+
defaultProgressAriaValueText?: string;
|
|
27
|
+
/** @beta Aria-label for the default progress icon to describe what is loading */
|
|
28
|
+
defaultProgressAriaLabel?: string;
|
|
23
29
|
/** Value to overwrite the randomly generated data-ouia-component-id.*/
|
|
24
30
|
ouiaId?: number | string;
|
|
25
31
|
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownToggleCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownToggleCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;AAG1E,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC,EAC3F,SAAS;IACX,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,iFAAiF;IACjF,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iLAAiL;IACjL,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBAAa,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,2BAA2B,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;IAC/G,MAAM,CAAC,WAAW,SAA4B;IAC9C,MAAM,CAAC,YAAY,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAK5D;gBAEU,KAAK,EAAE,2BAA2B;IAO9C,YAAY,UAAW,MAAM,SAAS,CAAC,gBAAgB,CAAC,UAEtD;IAEF,gBAAgB,gBASd;IAEF,MAAM;CA0DP"}
|
|
@@ -3,6 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
|
|
4
4
|
import { css } from '@patternfly/react-styles';
|
|
5
5
|
import { getOUIAProps, getDefaultOUIAId } from '../../helpers';
|
|
6
|
+
import { Spinner } from '../Spinner';
|
|
6
7
|
export class DropdownToggleCheckbox extends React.Component {
|
|
7
8
|
constructor(props) {
|
|
8
9
|
super(props);
|
|
@@ -26,14 +27,16 @@ export class DropdownToggleCheckbox extends React.Component {
|
|
|
26
27
|
};
|
|
27
28
|
}
|
|
28
29
|
render() {
|
|
29
|
-
const _a = this.props, { className, isValid, isDisabled, isChecked, children, ouiaId, ouiaSafe,
|
|
30
|
+
const _a = this.props, { className, isValid, isDisabled, isChecked, isInProgress = false, defaultProgressAriaLabel, defaultProgressAriaValueText = 'Loading...', children, ouiaId, ouiaSafe,
|
|
30
31
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
31
32
|
onChange, checked } = _a,
|
|
32
33
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
33
|
-
props = __rest(_a, ["className", "isValid", "isDisabled", "isChecked", "children", "ouiaId", "ouiaSafe", "onChange", "checked"]);
|
|
34
|
+
props = __rest(_a, ["className", "isValid", "isDisabled", "isChecked", "isInProgress", "defaultProgressAriaLabel", "defaultProgressAriaValueText", "children", "ouiaId", "ouiaSafe", "onChange", "checked"]);
|
|
35
|
+
const spinner = (React.createElement(Spinner, { diameter: "1em", isSVG: true, "aria-valuetext": defaultProgressAriaValueText, "aria-live": "polite", "aria-label": defaultProgressAriaLabel }));
|
|
34
36
|
const text = children && (React.createElement("span", { className: css(styles.dropdownToggleText, className), "aria-hidden": "true", id: `${props.id}-text` }, children));
|
|
35
|
-
return (React.createElement("label", { className: css(styles.dropdownToggleCheck, className), htmlFor: props.id },
|
|
37
|
+
return (React.createElement("label", { className: css(styles.dropdownToggleCheck, isInProgress && styles.modifiers.inProgress, className), htmlFor: props.id },
|
|
36
38
|
React.createElement("input", Object.assign({}, props, (this.calculateChecked() !== undefined && { onChange: this.handleChange }), { type: "checkbox", ref: elem => elem && (elem.indeterminate = isChecked === null), "aria-invalid": !isValid, disabled: isDisabled, checked: this.calculateChecked() }, getOUIAProps(DropdownToggleCheckbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))),
|
|
39
|
+
isInProgress && React.createElement("span", { className: css(styles.dropdownToggleProgress, className) }, spinner),
|
|
37
40
|
text));
|
|
38
41
|
}
|
|
39
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownToggleCheckbox.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,2DAA2D,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAa,gBAAgB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownToggleCheckbox.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,8 @@ export interface DropdownToggleCheckboxProps extends Omit<React.HTMLProps<HTMLIn
|
|
|
10
10
|
isDisabled?: boolean;
|
|
11
11
|
/** Flag to show if the checkbox is checked */
|
|
12
12
|
isChecked?: boolean | null;
|
|
13
|
+
/** @beta Flag to show if the checkbox is in progress */
|
|
14
|
+
isInProgress?: boolean | null;
|
|
13
15
|
/** Alternate Flag to show if the checkbox is checked */
|
|
14
16
|
checked?: boolean | null;
|
|
15
17
|
/** A callback for when the checkbox selection changes */
|
|
@@ -20,6 +22,10 @@ export interface DropdownToggleCheckboxProps extends Omit<React.HTMLProps<HTMLIn
|
|
|
20
22
|
id: string;
|
|
21
23
|
/** Aria-label of the checkbox */
|
|
22
24
|
'aria-label': string;
|
|
25
|
+
/** @beta Text describing current loading status or progress */
|
|
26
|
+
defaultProgressAriaValueText?: string;
|
|
27
|
+
/** @beta Aria-label for the default progress icon to describe what is loading */
|
|
28
|
+
defaultProgressAriaLabel?: string;
|
|
23
29
|
/** Value to overwrite the randomly generated data-ouia-component-id.*/
|
|
24
30
|
ouiaId?: number | string;
|
|
25
31
|
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownToggleCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownToggleCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;AAG1E,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC,EAC3F,SAAS;IACX,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,iFAAiF;IACjF,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iLAAiL;IACjL,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBAAa,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,2BAA2B,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;IAC/G,MAAM,CAAC,WAAW,SAA4B;IAC9C,MAAM,CAAC,YAAY,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAK5D;gBAEU,KAAK,EAAE,2BAA2B;IAO9C,YAAY,UAAW,MAAM,SAAS,CAAC,gBAAgB,CAAC,UAEtD;IAEF,gBAAgB,gBASd;IAEF,MAAM;CA0DP"}
|
|
@@ -6,6 +6,7 @@ const React = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
const dropdown_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Dropdown/dropdown"));
|
|
7
7
|
const react_styles_1 = require("@patternfly/react-styles");
|
|
8
8
|
const helpers_1 = require("../../helpers");
|
|
9
|
+
const Spinner_1 = require("../Spinner");
|
|
9
10
|
class DropdownToggleCheckbox extends React.Component {
|
|
10
11
|
constructor(props) {
|
|
11
12
|
super(props);
|
|
@@ -29,14 +30,16 @@ class DropdownToggleCheckbox extends React.Component {
|
|
|
29
30
|
};
|
|
30
31
|
}
|
|
31
32
|
render() {
|
|
32
|
-
const _a = this.props, { className, isValid, isDisabled, isChecked, children, ouiaId, ouiaSafe,
|
|
33
|
+
const _a = this.props, { className, isValid, isDisabled, isChecked, isInProgress = false, defaultProgressAriaLabel, defaultProgressAriaValueText = 'Loading...', children, ouiaId, ouiaSafe,
|
|
33
34
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
34
35
|
onChange, checked } = _a,
|
|
35
36
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
36
|
-
props = tslib_1.__rest(_a, ["className", "isValid", "isDisabled", "isChecked", "children", "ouiaId", "ouiaSafe", "onChange", "checked"]);
|
|
37
|
+
props = tslib_1.__rest(_a, ["className", "isValid", "isDisabled", "isChecked", "isInProgress", "defaultProgressAriaLabel", "defaultProgressAriaValueText", "children", "ouiaId", "ouiaSafe", "onChange", "checked"]);
|
|
38
|
+
const spinner = (React.createElement(Spinner_1.Spinner, { diameter: "1em", isSVG: true, "aria-valuetext": defaultProgressAriaValueText, "aria-live": "polite", "aria-label": defaultProgressAriaLabel }));
|
|
37
39
|
const text = children && (React.createElement("span", { className: react_styles_1.css(dropdown_1.default.dropdownToggleText, className), "aria-hidden": "true", id: `${props.id}-text` }, children));
|
|
38
|
-
return (React.createElement("label", { className: react_styles_1.css(dropdown_1.default.dropdownToggleCheck, className), htmlFor: props.id },
|
|
40
|
+
return (React.createElement("label", { className: react_styles_1.css(dropdown_1.default.dropdownToggleCheck, isInProgress && dropdown_1.default.modifiers.inProgress, className), htmlFor: props.id },
|
|
39
41
|
React.createElement("input", Object.assign({}, props, (this.calculateChecked() !== undefined && { onChange: this.handleChange }), { type: "checkbox", ref: elem => elem && (elem.indeterminate = isChecked === null), "aria-invalid": !isValid, disabled: isDisabled, checked: this.calculateChecked() }, helpers_1.getOUIAProps(DropdownToggleCheckbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))),
|
|
42
|
+
isInProgress && React.createElement("span", { className: react_styles_1.css(dropdown_1.default.dropdownToggleProgress, className) }, spinner),
|
|
40
43
|
text));
|
|
41
44
|
}
|
|
42
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownToggleCheckbox.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,iHAA+E;AAC/E,2DAA+C;AAE/C,2CAA0E;
|
|
1
|
+
{"version":3,"file":"DropdownToggleCheckbox.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownToggleCheckbox.tsx"],"names":[],"mappings":"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"}
|