@pingux/astro 2.33.0-alpha.0 → 2.33.0-alpha.10
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/lib/cjs/components/ButtonBar/ButtonBar.stories.js +61 -5
- package/lib/cjs/components/Tabs/Tabs.stories.js +2 -2
- package/lib/cjs/components/Tabs/Tabs.style.js +0 -1
- package/lib/cjs/hooks/useComponentToggle/useComponentToggle.js +1 -3
- package/lib/cjs/hooks/useField/useField.d.ts +33 -35
- package/lib/cjs/hooks/useField/useField.js +1 -1
- package/lib/cjs/hooks/useOverlayPanelState/index.d.ts +1 -0
- package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.d.ts +32 -0
- package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.js +0 -10
- package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.test.d.ts +1 -0
- package/lib/cjs/hooks/useProgressiveState/index.d.ts +1 -0
- package/lib/cjs/hooks/useProgressiveState/useProgressiveState.d.ts +11 -0
- package/lib/cjs/hooks/useProgressiveState/useProgressiveState.js +3 -6
- package/lib/cjs/hooks/useProgressiveState/useProgressiveState.test.d.ts +1 -0
- package/lib/cjs/hooks/useProgressiveState/useProgressiveState.test.js +7 -16
- package/lib/cjs/hooks/usePropWarning/index.d.ts +1 -0
- package/lib/cjs/hooks/usePropWarning/usePropWarning.d.ts +13 -0
- package/lib/cjs/hooks/usePropWarning/usePropWarning.js +0 -8
- package/lib/cjs/hooks/usePropWarning/usePropWarning.test.d.ts +1 -0
- package/lib/cjs/hooks/usePropWarning/usePropWarning.test.js +13 -9
- package/lib/cjs/hooks/useRockerButton/index.d.ts +1 -0
- package/lib/cjs/hooks/useRockerButton/useRockerButton.d.ts +241 -0
- package/lib/cjs/hooks/useSelectField/index.d.ts +1 -0
- package/lib/cjs/hooks/useSelectField/useSelectField.d.ts +55 -0
- package/lib/cjs/hooks/useSelectField/useSelectField.js +10 -10
- package/lib/cjs/types/item.d.ts +4 -7
- package/lib/cjs/types/popoverContainer.d.ts +1 -0
- package/lib/cjs/types/shared/style.d.ts +6 -0
- package/lib/cjs/utils/designUtils/figmaLinks.js +4 -2
- package/lib/components/ButtonBar/ButtonBar.stories.js +57 -3
- package/lib/components/Tabs/Tabs.stories.js +3 -3
- package/lib/components/Tabs/Tabs.style.js +0 -1
- package/lib/hooks/useComponentToggle/useComponentToggle.js +1 -3
- package/lib/hooks/useField/useField.js +2 -0
- package/lib/hooks/useOverlayPanelState/useOverlayPanelState.js +0 -11
- package/lib/hooks/useProgressiveState/useProgressiveState.js +3 -7
- package/lib/hooks/useProgressiveState/useProgressiveState.test.js +7 -16
- package/lib/hooks/usePropWarning/usePropWarning.js +0 -8
- package/lib/hooks/usePropWarning/usePropWarning.test.js +13 -9
- package/lib/hooks/useSelectField/useSelectField.js +11 -9
- package/lib/utils/designUtils/figmaLinks.js +4 -2
- package/package.json +1 -1
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
5
5
|
_Object$defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports["default"] = exports.RightAligned = exports.Default = void 0;
|
8
|
+
exports["default"] = exports.SecondaryRightAligned = exports.Secondary = exports.RightAligned = exports.Default = void 0;
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
10
10
|
var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
|
11
11
|
var _index = require("../../index");
|
@@ -60,12 +60,39 @@ var RightAligned = function RightAligned() {
|
|
60
60
|
return (0, _react2.jsx)(_index.ButtonBar, {
|
61
61
|
align: "right"
|
62
62
|
}, (0, _react2.jsx)(_index.Button, {
|
63
|
+
variant: "link",
|
64
|
+
"data-id": "cancel-button",
|
65
|
+
onPress: function onPress() {
|
66
|
+
return alert('Cancel button pressed');
|
67
|
+
}
|
68
|
+
}, "Cancel"), (0, _react2.jsx)(_index.Button, {
|
63
69
|
variant: "primary",
|
64
70
|
"data-id": "next-button",
|
65
71
|
onPress: function onPress() {
|
66
72
|
return alert('Next button pressed');
|
67
73
|
}
|
68
|
-
}, "Next")
|
74
|
+
}, "Next"));
|
75
|
+
};
|
76
|
+
exports.RightAligned = RightAligned;
|
77
|
+
RightAligned.parameters = {
|
78
|
+
design: {
|
79
|
+
type: 'figma',
|
80
|
+
url: _figmaLinks.FIGMA_LINKS.buttonBar.rightAligned
|
81
|
+
}
|
82
|
+
};
|
83
|
+
var Secondary = function Secondary() {
|
84
|
+
return (0, _react2.jsx)(_index.ButtonBar, null, (0, _react2.jsx)(_index.Button, {
|
85
|
+
variant: "primary",
|
86
|
+
"data-id": "save-button",
|
87
|
+
onPress: function onPress() {
|
88
|
+
return alert('Save button pressed');
|
89
|
+
}
|
90
|
+
}, "Save"), (0, _react2.jsx)(_index.Button, {
|
91
|
+
"data-id": "close-button",
|
92
|
+
onPress: function onPress() {
|
93
|
+
return alert('Close button pressed');
|
94
|
+
}
|
95
|
+
}, "Close"), (0, _react2.jsx)(_index.Button, {
|
69
96
|
variant: "link",
|
70
97
|
"data-id": "cancel-button",
|
71
98
|
onPress: function onPress() {
|
@@ -73,10 +100,39 @@ var RightAligned = function RightAligned() {
|
|
73
100
|
}
|
74
101
|
}, "Cancel"));
|
75
102
|
};
|
76
|
-
exports.
|
77
|
-
|
103
|
+
exports.Secondary = Secondary;
|
104
|
+
Secondary.parameters = {
|
78
105
|
design: {
|
79
106
|
type: 'figma',
|
80
|
-
url: _figmaLinks.FIGMA_LINKS.buttonBar.
|
107
|
+
url: _figmaLinks.FIGMA_LINKS.buttonBar.secondary
|
108
|
+
}
|
109
|
+
};
|
110
|
+
var SecondaryRightAligned = function SecondaryRightAligned() {
|
111
|
+
return (0, _react2.jsx)(_index.ButtonBar, {
|
112
|
+
align: "right"
|
113
|
+
}, (0, _react2.jsx)(_index.Button, {
|
114
|
+
variant: "link",
|
115
|
+
"data-id": "cancel-button",
|
116
|
+
onPress: function onPress() {
|
117
|
+
return alert('Cancel button pressed');
|
118
|
+
}
|
119
|
+
}, "Cancel"), (0, _react2.jsx)(_index.Button, {
|
120
|
+
"data-id": "close-button",
|
121
|
+
onPress: function onPress() {
|
122
|
+
return alert('Close button pressed');
|
123
|
+
}
|
124
|
+
}, "Close"), (0, _react2.jsx)(_index.Button, {
|
125
|
+
variant: "primary",
|
126
|
+
"data-id": "next-button",
|
127
|
+
onPress: function onPress() {
|
128
|
+
return alert('Next button pressed');
|
129
|
+
}
|
130
|
+
}, "Next"));
|
131
|
+
};
|
132
|
+
exports.SecondaryRightAligned = SecondaryRightAligned;
|
133
|
+
SecondaryRightAligned.parameters = {
|
134
|
+
design: {
|
135
|
+
type: 'figma',
|
136
|
+
url: _figmaLinks.FIGMA_LINKS.buttonBar.secondaryRightAligned
|
81
137
|
}
|
82
138
|
};
|
@@ -196,11 +196,11 @@ var ContentSlots = function ContentSlots() {
|
|
196
196
|
marginLeft: 6,
|
197
197
|
marginTop: 10
|
198
198
|
};
|
199
|
-
var afterTabNode = (0, _react2.jsx)(_index.Badge, {
|
199
|
+
var afterTabNode = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, {
|
200
200
|
variant: "countNeutral",
|
201
201
|
sx: nodeSx,
|
202
202
|
label: "14"
|
203
|
-
});
|
203
|
+
}));
|
204
204
|
return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Tabs, {
|
205
205
|
items: tabs,
|
206
206
|
mb: 50
|
@@ -14,9 +14,7 @@ var useComponentToggle = function useComponentToggle(props) {
|
|
14
14
|
ComponentToRenderIfFalse = props.ComponentToRenderIfFalse,
|
15
15
|
condition = props.condition,
|
16
16
|
onConditionChange = props.onConditionChange;
|
17
|
-
var _useProgressiveState = (0, _index.useProgressiveState)(condition,
|
18
|
-
return null;
|
19
|
-
}),
|
17
|
+
var _useProgressiveState = (0, _index.useProgressiveState)(condition, false),
|
20
18
|
_useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
|
21
19
|
isToggled = _useProgressiveState2[0],
|
22
20
|
setIsToggled = _useProgressiveState2[1];
|
@@ -1,5 +1,5 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
import { Key } from 'react';
|
2
|
+
import { AriaLabelingProps, CollectionChildren, DOMProps } from '@react-types/shared';
|
3
3
|
import { LabelProps as ThemeUILabelProps } from 'theme-ui';
|
4
4
|
import { BoxProps } from '../../types';
|
5
5
|
/**
|
@@ -22,7 +22,29 @@ interface LabelProps extends ThemeUILabelProps {
|
|
22
22
|
[className: string]: boolean;
|
23
23
|
};
|
24
24
|
}
|
25
|
-
interface
|
25
|
+
export interface FieldControlInputProps extends AriaLabelingProps, DOMProps {
|
26
|
+
autoComplete?: string;
|
27
|
+
autoCorrect?: string;
|
28
|
+
autoFocus?: boolean;
|
29
|
+
className?: string;
|
30
|
+
defaultSelected?: boolean;
|
31
|
+
defaultValue?: string | number;
|
32
|
+
disabled?: boolean;
|
33
|
+
id?: string;
|
34
|
+
isFocused?: boolean;
|
35
|
+
isIndeterminate?: boolean;
|
36
|
+
maxLength?: number;
|
37
|
+
name?: string;
|
38
|
+
onChange: (event: CustomChangeEventType | React.ChangeEvent) => void | undefined;
|
39
|
+
placeholder?: string;
|
40
|
+
readOnly?: boolean;
|
41
|
+
required?: boolean;
|
42
|
+
role?: string;
|
43
|
+
spellCheck?: boolean;
|
44
|
+
type?: string;
|
45
|
+
value?: string | number;
|
46
|
+
}
|
47
|
+
export interface ControlProps extends React.HTMLAttributes<Element> {
|
26
48
|
statusClasses?: {
|
27
49
|
[className: string]: boolean;
|
28
50
|
};
|
@@ -31,14 +53,14 @@ export interface UseFieldProps<T> {
|
|
31
53
|
autocomplete?: string;
|
32
54
|
autoComplete?: string;
|
33
55
|
autoCorrect?: string;
|
34
|
-
children?: React.ReactNode
|
56
|
+
children?: React.ReactNode | CollectionChildren<T>;
|
35
57
|
className?: string;
|
36
58
|
containerProps?: ContainerProps;
|
37
|
-
controlProps?: ControlProps
|
59
|
+
controlProps?: ControlProps;
|
38
60
|
defaultText?: string;
|
39
61
|
defaultValue?: string | number;
|
40
62
|
direction?: string;
|
41
|
-
disabledKeys?: string[]
|
63
|
+
disabledKeys?: string[] | Iterable<Key>;
|
42
64
|
hasAutoFocus?: boolean;
|
43
65
|
hasNoStatusIndicator?: boolean;
|
44
66
|
helperText?: string;
|
@@ -62,7 +84,7 @@ export interface UseFieldProps<T> {
|
|
62
84
|
onFocus?: (e: React.FocusEvent) => void;
|
63
85
|
onFocusChange?: (isFocused: boolean) => void;
|
64
86
|
onLoadMore?: () => void;
|
65
|
-
onOpenChange?: () =>
|
87
|
+
onOpenChange?: (isOpen: boolean) => unknown;
|
66
88
|
onSelectionChange?: (key: string) => void;
|
67
89
|
placeholder?: string | number;
|
68
90
|
role?: string;
|
@@ -84,32 +106,7 @@ type CustomChangeEventType = {
|
|
84
106
|
};
|
85
107
|
declare const useField: <T>(props: UseFieldProps<T>) => {
|
86
108
|
fieldContainerProps: any;
|
87
|
-
fieldControlInputProps:
|
88
|
-
'aria-label'?: string | undefined;
|
89
|
-
'aria-labelledby'?: string | undefined;
|
90
|
-
'aria-describedby'?: string | undefined;
|
91
|
-
'aria-details'?: string | undefined;
|
92
|
-
id: string | undefined;
|
93
|
-
autoComplete: string | undefined;
|
94
|
-
autoCorrect: string | undefined;
|
95
|
-
autoFocus: boolean | undefined;
|
96
|
-
className: string;
|
97
|
-
defaultSelected: boolean | undefined;
|
98
|
-
defaultValue: string | number | undefined;
|
99
|
-
disabled: boolean | undefined;
|
100
|
-
isFocused: boolean;
|
101
|
-
isIndeterminate: boolean | undefined;
|
102
|
-
maxLength: number | undefined;
|
103
|
-
name: string | undefined;
|
104
|
-
onChange: (e: CustomChangeEventType) => any;
|
105
|
-
placeholder: string | number | undefined;
|
106
|
-
readOnly: boolean | undefined;
|
107
|
-
required: boolean | undefined;
|
108
|
-
role: string | undefined;
|
109
|
-
spellCheck: string | undefined;
|
110
|
-
type: string | undefined;
|
111
|
-
value: string | number | undefined;
|
112
|
-
};
|
109
|
+
fieldControlInputProps: FieldControlInputProps;
|
113
110
|
fieldControlWrapperProps: {
|
114
111
|
id?: string | undefined;
|
115
112
|
statusClasses?: {
|
@@ -120,6 +117,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
120
117
|
isDisabled?: boolean | undefined;
|
121
118
|
variant?: string | undefined;
|
122
119
|
as?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
|
120
|
+
style?: string | import("react").CSSProperties | undefined;
|
123
121
|
grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
|
124
122
|
accentColor?: import("theme-ui").StylePropertyValue<import("csstype").Property.AccentColor | undefined>;
|
125
123
|
alignContent?: import("theme-ui").StylePropertyValue<import("csstype").Property.AlignContent | undefined>;
|
@@ -1118,7 +1116,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
1118
1116
|
color?: string | undefined;
|
1119
1117
|
content?: string | undefined;
|
1120
1118
|
translate?: "yes" | "no" | undefined;
|
1121
|
-
key?:
|
1119
|
+
key?: Key | null | undefined;
|
1122
1120
|
defaultChecked?: boolean | undefined;
|
1123
1121
|
defaultValue?: string | number | readonly string[] | undefined;
|
1124
1122
|
suppressContentEditableWarning?: boolean | undefined;
|
@@ -1433,7 +1431,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
1433
1431
|
color?: string | undefined;
|
1434
1432
|
content?: string | undefined;
|
1435
1433
|
translate?: "yes" | "no" | undefined;
|
1436
|
-
key?:
|
1434
|
+
key?: Key | null | undefined;
|
1437
1435
|
defaultChecked?: boolean | undefined;
|
1438
1436
|
defaultValue?: string | number | readonly string[] | undefined;
|
1439
1437
|
suppressContentEditableWarning?: boolean | undefined;
|
@@ -25,7 +25,7 @@ var _constants = require("../../components/Label/constants");
|
|
25
25
|
var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
|
26
26
|
var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
|
27
27
|
var _ = require("..");
|
28
|
-
var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "className", "containerProps", "controlProps", "defaultValue", "hasAutoFocus", "hasNoStatusIndicator", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "role", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"];
|
28
|
+
var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "className", "containerProps", "controlProps", "defaultValue", "hasAutoFocus", "hasNoStatusIndicator", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "role", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"]; // eslint-disable-next-line import/no-unresolved
|
29
29
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
30
30
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
31
31
|
/**
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './useOverlayPanelState';
|
@@ -0,0 +1,32 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { OverlayTriggerState } from 'react-stately';
|
3
|
+
interface UseOverlayPanelStateProps {
|
4
|
+
isDefaultOpen?: boolean;
|
5
|
+
isOpen?: boolean;
|
6
|
+
onOpenChange?: (isOpen: boolean) => void;
|
7
|
+
transitionDuration?: number;
|
8
|
+
}
|
9
|
+
export interface UseOverlayPanelReturnState extends OverlayTriggerState {
|
10
|
+
isTransitioning?: boolean;
|
11
|
+
}
|
12
|
+
interface UseOverlayPanelStateReturnValues {
|
13
|
+
state: UseOverlayPanelReturnState;
|
14
|
+
onClose: (stateProp?: OverlayTriggerState, triggerRef?: React.RefObject<HTMLButtonElement>, onCloseProp?: VoidFunction) => void;
|
15
|
+
isTransitioning: boolean;
|
16
|
+
}
|
17
|
+
interface UseOverlayPanelState {
|
18
|
+
/**
|
19
|
+
* Returns state-related data and functions for use with a Modal component.
|
20
|
+
* @param {Object} [props] Properties provided to the state
|
21
|
+
*
|
22
|
+
* @param {boolean} [prop.isDefaultOpen] Whether the modal is open by default (uncontrolled).
|
23
|
+
* @param {boolean} [prop.isOpen] Whether the modal is currently open (controlled).
|
24
|
+
* @param {function} [prop.onOpenChange] Handler that is called when the open state changes.
|
25
|
+
* @param {number} [prop.transitionDuration] Number value of the length of the transition in ms.
|
26
|
+
*
|
27
|
+
* @returns {Object} `{ isOpen: Boolean, open: Function, close: Function, toggle: Function }`
|
28
|
+
*/
|
29
|
+
(props?: UseOverlayPanelStateProps): UseOverlayPanelStateReturnValues;
|
30
|
+
}
|
31
|
+
declare const useOverlayPanelState: UseOverlayPanelState;
|
32
|
+
export default useOverlayPanelState;
|
@@ -18,16 +18,6 @@ var _reactStately = require("react-stately");
|
|
18
18
|
var _useMountTransition = _interopRequireDefault(require("../useMountTransition"));
|
19
19
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
20
20
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
21
|
-
/**
|
22
|
-
* Returns state-related data and functions for use with a Modal component.
|
23
|
-
* @param {Object} [props] Properties provided to the state
|
24
|
-
* @param {Boolean} [props.isDefaultOpen] Whether the modal is open by default (uncontrolled).
|
25
|
-
* @param {Boolean} [props.isOpen] Whether the modal is currently open (controlled).
|
26
|
-
* @param {Function} [props.onOpenChange] Handler that is called when the open state changes.
|
27
|
-
* @param {Number} [props.transitionDuration] Number value of the length of the transition in ms.
|
28
|
-
* `(isOpen: boolean) => void`
|
29
|
-
* @returns {Object} `{ isOpen: Boolean, open: Function, close: Function, toggle: Function }`
|
30
|
-
*/
|
31
21
|
var useOverlayPanelState = function useOverlayPanelState() {
|
32
22
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
33
23
|
var isDefaultOpen = props.isDefaultOpen,
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './useProgressiveState';
|
@@ -0,0 +1,11 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
interface UseProgressiveState {
|
3
|
+
/**
|
4
|
+
* A custom hook that provides stateful capabilities when the associated prop is not supplied
|
5
|
+
* @param {T} prop The intended prop to be controlled by state
|
6
|
+
* @param {U} initial The initial state value, used only if the given prop is undefined
|
7
|
+
*/
|
8
|
+
<T, U>(prop: T | undefined, initial: U): [U, React.Dispatch<U>] | [T, () => undefined];
|
9
|
+
}
|
10
|
+
declare const useProgressiveState: UseProgressiveState;
|
11
|
+
export default useProgressiveState;
|
@@ -6,17 +6,14 @@ _Object$defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports["default"] = void 0;
|
8
8
|
var _react = require("react");
|
9
|
-
/**
|
10
|
-
* A custom hook that provides stateful capabilities when the associated prop is not supplied
|
11
|
-
* @param {*} prop The intended prop to be controlled by state
|
12
|
-
* @param {*} initial The initial state value, used only if the given prop is undefined
|
13
|
-
*/
|
14
9
|
var useProgressiveState = function useProgressiveState(prop, initial) {
|
15
10
|
var controlledState = (0, _react.useState)(initial);
|
16
11
|
if (prop === undefined) {
|
17
12
|
return controlledState;
|
18
13
|
}
|
19
|
-
return [prop, function () {
|
14
|
+
return [prop, function () {
|
15
|
+
return undefined;
|
16
|
+
}];
|
20
17
|
};
|
21
18
|
var _default = useProgressiveState;
|
22
19
|
exports["default"] = _default;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -1,29 +1,19 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
5
4
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
6
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
7
5
|
var _react = _interopRequireDefault(require("react"));
|
8
6
|
var _react2 = require("@testing-library/react");
|
9
7
|
var _reactHooks = require("@testing-library/react-hooks");
|
10
8
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
11
9
|
var _useProgressiveState3 = _interopRequireDefault(require("./useProgressiveState"));
|
12
10
|
var _react3 = require("@emotion/react");
|
13
|
-
var _excluded = ["count"];
|
14
|
-
var testId = 'test';
|
15
|
-
var defaultProps = {
|
16
|
-
'data-testid': testId
|
17
|
-
};
|
18
11
|
var hookProps = {
|
19
12
|
prop: 'count',
|
20
13
|
initial: 0
|
21
14
|
};
|
22
|
-
|
23
|
-
/* eslint-disable react/prop-types */
|
24
15
|
var TestComponent = function TestComponent(_ref) {
|
25
|
-
var count = _ref.count
|
26
|
-
others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
16
|
+
var count = _ref.count;
|
27
17
|
var _useProgressiveState = (0, _useProgressiveState3["default"])(count, 0),
|
28
18
|
_useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
|
29
19
|
countVal = _useProgressiveState2[0],
|
@@ -31,18 +21,19 @@ var TestComponent = function TestComponent(_ref) {
|
|
31
21
|
var handleClick = function handleClick() {
|
32
22
|
return setCountVal(countVal + 1);
|
33
23
|
};
|
34
|
-
return (0, _react3.jsx)("button",
|
24
|
+
return (0, _react3.jsx)("button", {
|
25
|
+
type: "button",
|
35
26
|
onClick: handleClick
|
36
|
-
}
|
27
|
+
}, countVal);
|
37
28
|
};
|
38
29
|
var getComponent = function getComponent() {
|
39
30
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
40
|
-
return (0, _react2.render)((0, _react3.jsx)(TestComponent,
|
31
|
+
return (0, _react2.render)((0, _react3.jsx)(TestComponent, props));
|
41
32
|
};
|
42
33
|
describe('State Utils', function () {
|
43
34
|
it('should update the state when no prop is provided', function () {
|
44
35
|
getComponent();
|
45
|
-
var component = _react2.screen.
|
36
|
+
var component = _react2.screen.getByRole('button');
|
46
37
|
expect(component).toHaveTextContent('0');
|
47
38
|
_userEvent["default"].click(component);
|
48
39
|
expect(component).toHaveTextContent('1');
|
@@ -53,7 +44,7 @@ describe('State Utils', function () {
|
|
53
44
|
getComponent({
|
54
45
|
count: 5
|
55
46
|
});
|
56
|
-
var component = _react2.screen.
|
47
|
+
var component = _react2.screen.getByRole('button');
|
57
48
|
expect(component).toHaveTextContent('5');
|
58
49
|
_userEvent["default"].click(component);
|
59
50
|
expect(component).toHaveTextContent('5');
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './usePropWarning';
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
interface UsePropWarning {
|
3
|
+
/**
|
4
|
+
* Provides a development-only console warning for props that we don't want consumers to use
|
5
|
+
* @param {Object} props - The whole props object
|
6
|
+
* @param {String} propToWarn - Specify prop to warn not to use
|
7
|
+
* @param {String} propToUse - Specify prop that should be used instead
|
8
|
+
* @param {Boolean} [allowDuplicates] - If allow duplicate warning messages
|
9
|
+
*/
|
10
|
+
(props: React.ComponentProps<React.ComponentType>, propToWarn: string, propToUse: string, allowDuplicates?: boolean): void;
|
11
|
+
}
|
12
|
+
declare const usePropWarning: UsePropWarning;
|
13
|
+
export default usePropWarning;
|
@@ -10,14 +10,6 @@ var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
|
|
10
10
|
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
11
11
|
var _react = require("react");
|
12
12
|
var alreadyShown = new _set["default"]();
|
13
|
-
|
14
|
-
/**
|
15
|
-
* Provides a development-only console warning for props that we don't want consumers to use
|
16
|
-
* @param {Object} props - The whole props object
|
17
|
-
* @param {String} propToWarn - Specify prop to warn not to use
|
18
|
-
* @param {String} propToUse - Specify prop that should be used instead
|
19
|
-
* @param {Boolean} [allowDuplicates] - If allow duplicate warning messages
|
20
|
-
*/
|
21
13
|
var usePropWarning = function usePropWarning(props, propToWarn, propToUse, allowDuplicates) {
|
22
14
|
(0, _react.useEffect)(function () {
|
23
15
|
if (!allowDuplicates && alreadyShown.has(propToWarn)) {
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -7,7 +7,7 @@ describe('usePropWarning', function () {
|
|
7
7
|
beforeEach(function () {
|
8
8
|
process.env.NODE_ENV = 'development';
|
9
9
|
global.console.warn = function () {
|
10
|
-
return jest.
|
10
|
+
return jest.fn();
|
11
11
|
}; // eslint-disable-line no-console
|
12
12
|
});
|
13
13
|
|
@@ -16,8 +16,9 @@ describe('usePropWarning', function () {
|
|
16
16
|
jest.clearAllMocks();
|
17
17
|
});
|
18
18
|
test('default', function () {
|
19
|
-
var props = {
|
20
|
-
|
19
|
+
var props = {
|
20
|
+
disabled: true
|
21
|
+
};
|
21
22
|
var spy = jest.spyOn(console, 'warn');
|
22
23
|
expect(spy).not.toHaveBeenCalled();
|
23
24
|
(0, _reactHooks.renderHook)(function () {
|
@@ -26,8 +27,9 @@ describe('usePropWarning', function () {
|
|
26
27
|
expect(spy).toHaveBeenCalledTimes(1);
|
27
28
|
});
|
28
29
|
test('does not warn if prop does not exist', function () {
|
29
|
-
var props = {
|
30
|
-
|
30
|
+
var props = {
|
31
|
+
isDisabled: true
|
32
|
+
};
|
31
33
|
var spy = jest.spyOn(console, 'warn');
|
32
34
|
expect(spy).not.toHaveBeenCalled();
|
33
35
|
(0, _reactHooks.renderHook)(function () {
|
@@ -36,8 +38,9 @@ describe('usePropWarning', function () {
|
|
36
38
|
expect(spy).not.toHaveBeenCalled();
|
37
39
|
});
|
38
40
|
test('showns duplicated messages if explicitly allowed', function () {
|
39
|
-
var props = {
|
40
|
-
|
41
|
+
var props = {
|
42
|
+
disabled: true
|
43
|
+
};
|
41
44
|
var spy = jest.spyOn(console, 'warn');
|
42
45
|
(0, _reactHooks.renderHook)(function () {
|
43
46
|
return (0, _usePropWarning["default"])(props, 'disabled', 'isDisabled', true);
|
@@ -49,8 +52,9 @@ describe('usePropWarning', function () {
|
|
49
52
|
});
|
50
53
|
test('does not warn if it is in production environment', function () {
|
51
54
|
process.env.NODE_ENV = 'production';
|
52
|
-
var props = {
|
53
|
-
|
55
|
+
var props = {
|
56
|
+
disabled: true
|
57
|
+
};
|
54
58
|
var spy = jest.spyOn(console, 'warn');
|
55
59
|
expect(spy).not.toHaveBeenCalled();
|
56
60
|
(0, _reactHooks.renderHook)(function () {
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './useRockerButton';
|