@commercetools-uikit/view-switcher 15.1.2 → 15.2.2
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/README.md +53 -38
- package/dist/commercetools-uikit-view-switcher.cjs.dev.js +22 -5
- package/dist/commercetools-uikit-view-switcher.cjs.prod.js +14 -3
- package/dist/commercetools-uikit-view-switcher.esm.js +21 -5
- package/dist/declarations/src/view-switcher.d.ts +2 -1
- package/dist/declarations/src/view-switcher.styles.d.ts +1 -1
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -1,26 +1,28 @@
|
|
|
1
|
+
<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
|
|
2
|
+
<!-- This file is created by the `yarn generate-readme` script. -->
|
|
3
|
+
|
|
1
4
|
# ViewSwitcher
|
|
2
5
|
|
|
3
6
|
## Description
|
|
4
7
|
|
|
5
|
-
|
|
8
|
+
The `<ViewSwitcher>` component allow users to toggle between two or more different views of the same, similar or related content items within the same space on screen.
|
|
6
9
|
|
|
7
10
|
## When to use
|
|
8
11
|
|
|
9
|
-
|
|
12
|
+
Let users toggle between different formatting's, like with a grid view and a table view.
|
|
10
13
|
|
|
11
14
|
## When not to use
|
|
12
15
|
|
|
13
|
-
Do not use the ViewSwitcher as
|
|
16
|
+
**Do not use the `<ViewSwitcher>` as tabs.**
|
|
14
17
|
Tabs should be used when the content on the page is divided into related sections but without any overlap.
|
|
15
|
-
See tabs as separate of content.
|
|
16
18
|
|
|
17
|
-
Do not use the ViewSwitcher as
|
|
18
|
-
Toggles are used for
|
|
19
|
+
**Do not use the `<ViewSwitcher>` as toggle.**
|
|
20
|
+
Toggles are used for "yes/no" or "on/off" binary decisions.
|
|
19
21
|
|
|
20
|
-
## Do's and Don'ts
|
|
22
|
+
## Do's and Don'ts
|
|
21
23
|
|
|
22
|
-
- If you use an icon within the ViewSwitcher
|
|
23
|
-
- No colored icons are allowed. Only color-solid (black)
|
|
24
|
+
- If you use an icon within the `<ViewSwitcher>`, each switch needs to have an icon.
|
|
25
|
+
- No colored icons are allowed. Only `--color-solid` (black).
|
|
24
26
|
- Do not use two lines of text in one switch field.
|
|
25
27
|
|
|
26
28
|
## Installation
|
|
@@ -46,11 +48,19 @@ npm --save install react
|
|
|
46
48
|
## Usage
|
|
47
49
|
|
|
48
50
|
```jsx
|
|
51
|
+
import { useState } from 'react';
|
|
49
52
|
import ViewSwitcher from '@commercetools-uikit/view-switcher';
|
|
50
53
|
|
|
51
|
-
|
|
54
|
+
/**
|
|
55
|
+
* 1. Uncontrolled mode
|
|
56
|
+
*
|
|
57
|
+
* The component controls its own internal state and switching between options.
|
|
58
|
+
* The `defaultSelected` value is only used on the initial render. Changes to that value
|
|
59
|
+
* are not reflected in the component state.
|
|
60
|
+
*/
|
|
61
|
+
const UncontrolledExample = () => (
|
|
52
62
|
<ViewSwitcher.Group
|
|
53
|
-
defaultSelected="
|
|
63
|
+
defaultSelected="button 2"
|
|
54
64
|
onChange={(value) => console.log(value)}
|
|
55
65
|
>
|
|
56
66
|
<ViewSwitcher.Button isDisabled value="button 1">
|
|
@@ -61,19 +71,41 @@ const Example = () => (
|
|
|
61
71
|
</ViewSwitcher.Group>
|
|
62
72
|
);
|
|
63
73
|
|
|
64
|
-
|
|
74
|
+
/**
|
|
75
|
+
* 2. Controlled mode
|
|
76
|
+
*
|
|
77
|
+
* The component is controlled from a parent component, using the prop `selectedValue`.
|
|
78
|
+
* The component does not use an internal state and the parent must implement the `onChange` callback.
|
|
79
|
+
*/
|
|
80
|
+
const ControlledExample = () => {
|
|
81
|
+
const [seletedValue, setSelectedValue] = useState('button 1');
|
|
82
|
+
|
|
83
|
+
return (
|
|
84
|
+
<ViewSwitcher.Group
|
|
85
|
+
selectedValue={seletedValue}
|
|
86
|
+
onChange={setSelectedValue}
|
|
87
|
+
>
|
|
88
|
+
<ViewSwitcher.Button isDisabled value="button 1">
|
|
89
|
+
View 1
|
|
90
|
+
</ViewSwitcher.Button>
|
|
91
|
+
<ViewSwitcher.Button value="button 2">View 2</ViewSwitcher.Button>
|
|
92
|
+
<ViewSwitcher.Button value="button 3">View 3</ViewSwitcher.Button>
|
|
93
|
+
</ViewSwitcher.Group>
|
|
94
|
+
);
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export { UncontrolledExample, ControlledExample };
|
|
65
98
|
```
|
|
66
99
|
|
|
67
100
|
## Properties
|
|
68
101
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `defaultSelected` | `string` | ✅ | | Indicates the default selected button |
|
|
102
|
+
| Props | Type | Required | Default | Description |
|
|
103
|
+
| ----------------- | ---------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
104
|
+
| `isCondensed` | `boolean` | | | Indicates that the view switcher can be reduced to save space. |
|
|
105
|
+
| `children` | `ReactNode` | ✅ | | Pass one or more `ViewSwitcher.Button` components. |
|
|
106
|
+
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Will be triggered whenever a `ViewSwitcher.Button` is selected. Called with the ViewSwitcherButton value.
This function is only required when the component is controlled. |
|
|
107
|
+
| `defaultSelected` | `string` | | | Passing this prop makes the component an uncontrolled component.
Indicates the default selected button it is only used to as an initial state once, when the component mounts. |
|
|
108
|
+
| `selectedValue` | `string` | | | Passing this prop makes the component an controlled component.
Controlled components also require to pass a `onChange` callback function. |
|
|
77
109
|
|
|
78
110
|
## Signatures
|
|
79
111
|
|
|
@@ -83,23 +115,6 @@ export default Example;
|
|
|
83
115
|
(value: string) => void
|
|
84
116
|
```
|
|
85
117
|
|
|
86
|
-
### ViewSwitcher.Button
|
|
87
|
-
|
|
88
|
-
| Props | Type | Required | Default | Description |
|
|
89
|
-
| ------------ | --------------------------------------------------- | :------: | ------- | ------------------------------------------------------------ |
|
|
90
|
-
| `isDisabled` | `boolean` | | | If `true`, indicates that the button is in a disabled state. |
|
|
91
|
-
| `children` | `ReactNode` | ✅ | | Indicates the label of the `ViewSwitcher.Button`. |
|
|
92
|
-
| `onClick` | `Function`<br/>[See signature.](#signature-onClick) | | | Will be triggered whenever a button is clicked. |
|
|
93
|
-
| `value` | `string` | ✅ | | The value identifying this `ViewSwitcher.Button`. |
|
|
94
|
-
|
|
95
|
-
## Signatures
|
|
96
|
-
|
|
97
|
-
### Signature `onClick`
|
|
98
|
-
|
|
99
|
-
```ts
|
|
100
|
-
(value: string) => void
|
|
101
|
-
```
|
|
102
|
-
|
|
103
118
|
## Invariants
|
|
104
119
|
|
|
105
|
-
1.
|
|
120
|
+
1. The `ViewSwitcher.Group` must have at least one `ViewSwitcher.Button` element as `children`
|
|
@@ -6,6 +6,7 @@ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
|
6
6
|
var _pt = require('prop-types');
|
|
7
7
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
8
8
|
var react$1 = require('react');
|
|
9
|
+
var isNil = require('lodash/isNil');
|
|
9
10
|
var react = require('@emotion/react');
|
|
10
11
|
var AccessibleButton = require('@commercetools-uikit/accessible-button');
|
|
11
12
|
var designSystem = require('@commercetools-uikit/design-system');
|
|
@@ -17,6 +18,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
|
|
|
17
18
|
|
|
18
19
|
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
19
20
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
21
|
+
var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
20
22
|
var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
|
|
21
23
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
22
24
|
|
|
@@ -76,26 +78,40 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
76
78
|
} : {
|
|
77
79
|
name: "xd53is-ViewSwitcher",
|
|
78
80
|
styles: "display:flex;label:ViewSwitcher;",
|
|
79
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
81
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdHYyIsImZpbGUiOiJ2aWV3LXN3aXRjaGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoaWxkcmVuLFxuICBpc1ZhbGlkRWxlbWVudCxcbiAgY2xvbmVFbGVtZW50LFxuICB1c2VTdGF0ZSxcbiAgdHlwZSBSZWFjdE5vZGUsXG4gIHR5cGUgUmVhY3RFbGVtZW50LFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgaXNOaWwgZnJvbSAnbG9kYXNoL2lzTmlsJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBWaWV3U3dpdGNoZXJCdXR0b24gZnJvbSAnLi92aWV3LXN3aXRjaGVyLWJ1dHRvbic7XG5pbXBvcnQgeyB3YXJuaW5nIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuXG50eXBlIFRSZWFjdENoaWxkID0ge1xuICB0eXBlPzogeyBkaXNwbGF5TmFtZTogc3RyaW5nIH07XG59ICYgUmVhY3RFbGVtZW50O1xuXG5leHBvcnQgdHlwZSBUVmlld1N3aXRjaGVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgdGhhdCB0aGUgdmlldyBzd2l0Y2hlciBjYW4gYmUgcmVkdWNlZCB0byBzYXZlIHNwYWNlLlxuICAgKi9cbiAgaXNDb25kZW5zZWQ/OiBib29sZWFuO1xuICAvKipcbiAgICogUGFzcyBvbmUgb3IgbW9yZSBgVmlld1N3aXRjaGVyLkJ1dHRvbmAgY29tcG9uZW50cy5cbiAgICovXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBXaWxsIGJlIHRyaWdnZXJlZCB3aGVuZXZlciBhIGBWaWV3U3dpdGNoZXIuQnV0dG9uYCBpcyBzZWxlY3RlZC4gQ2FsbGVkIHdpdGggdGhlIFZpZXdTd2l0Y2hlckJ1dHRvbiB2YWx1ZS5cbiAgICogVGhpcyBmdW5jdGlvbiBpcyBvbmx5IHJlcXVpcmVkIHdoZW4gdGhlIGNvbXBvbmVudCBpcyBjb250cm9sbGVkLlxuICAgKi9cbiAgb25DaGFuZ2U/OiAodmFsdWU6IHN0cmluZykgPT4gdm9pZDtcbiAgLyoqXG4gICAqIFBhc3NpbmcgdGhpcyBwcm9wIG1ha2VzIHRoZSBjb21wb25lbnQgYW4gdW5jb250cm9sbGVkIGNvbXBvbmVudC5cbiAgICogSW5kaWNhdGVzIHRoZSBkZWZhdWx0IHNlbGVjdGVkIGJ1dHRvbiBpdCBpcyBvbmx5IHVzZWQgdG8gYXMgYW4gaW5pdGlhbCBzdGF0ZSBvbmNlLCB3aGVuIHRoZSBjb21wb25lbnQgbW91bnRzLlxuICAgKi9cbiAgZGVmYXVsdFNlbGVjdGVkPzogc3RyaW5nO1xuICAvKipcbiAgICogUGFzc2luZyB0aGlzIHByb3AgbWFrZXMgdGhlIGNvbXBvbmVudCBhbiBjb250cm9sbGVkIGNvbXBvbmVudC5cbiAgICogQ29udHJvbGxlZCBjb21wb25lbnRzIGFsc28gcmVxdWlyZSB0byBwYXNzIGEgYG9uQ2hhbmdlYCBjYWxsYmFjayBmdW5jdGlvbi5cbiAgICovXG4gIHNlbGVjdGVkVmFsdWU/OiBzdHJpbmc7XG59O1xuXG5jb25zdCBWaWV3U3dpdGNoZXIgPSAocHJvcHM6IFRWaWV3U3dpdGNoZXJQcm9wcykgPT4ge1xuICBjb25zdCBpc0NvbnRyb2xsZWRDb21wb25lbnQgPSAhaXNOaWwocHJvcHMuc2VsZWN0ZWRWYWx1ZSk7XG4gIGNvbnN0IGhhc09uQ2hhbmdlID0gIWlzTmlsKHByb3BzLm9uQ2hhbmdlKTtcbiAgLyoqXG4gICAqIFRoaXMgaW50ZXJuYWwgc3RhdGUgaXMgb25seSB1c2VkIHdoZW4gdGhlIGNvbXBvbmVudCBpcyB1bmNvbnRyb2xsZWQgKFwiZGVmYXVsdFNlbGVjdGVkXCIgaXMgcGFzc2VkKS5cbiAgICogV2hlbiBjb250cm9sbGVkIChcInNlbGVjdGVkVmFsdWVcIikgdGhlIHN0YXRlIHdpbGwgbm90IGJlIHVwZGF0ZWQgb3IgdXNlZC5cbiAgICovXG4gIGNvbnN0IFtzZWxlY3RlZEJ1dHRvbiwgc2V0U2VsZWN0ZWRCdXR0b25dID0gdXNlU3RhdGU8c3RyaW5nIHwgdW5kZWZpbmVkPihcbiAgICBwcm9wcy5kZWZhdWx0U2VsZWN0ZWRcbiAgKTtcblxuICBpZiAoaXNDb250cm9sbGVkQ29tcG9uZW50KSB7XG4gICAgd2FybmluZyhcbiAgICAgIGhhc09uQ2hhbmdlLFxuICAgICAgYHVpLWtpdC9WaWV3U3dpdGNoZXI6IG1pc3NpbmcgcmVxdWlyZWQgcHJvcCBcIm9uQ2hhbmdlXCIgd2hlbiB1c2luZyB0aGUgXCJ2YWx1ZVwiIHByb3AgKGNvbnRyb2xsZWQgY29tcG9uZW50KS5gXG4gICAgKTtcbiAgfVxuXG4gIHdhcm5pbmcoXG4gICAgIXByb3BzLnNlbGVjdGVkVmFsdWUgfHwgIXByb3BzLmRlZmF1bHRTZWxlY3RlZCxcbiAgICBgdWkta2l0L1ZpZXdTd2l0Y2hlcjogcGFzc2VkIGJvdGggXCJzZWxlY3RlZFZhbHVlXCIgKHVuY29udHJvbGxlZCBjb21wb25lbnQpIHByb3AgYW5kIFwiZGVmYXVsdFNlbGVjdGVkXCIgKHVuY29udHJvbGxlZCBjb21wb25lbnQpLiBQbGVhc2UgcGFzcyBvbmx5IG9uZSBhcyB0aGUgY29tcG9uZW50IGNhbiBvbmx5IGJlIGVpdGhlciBjb250cm9sbGVkIG9yIHVuY29udHJvbGxlZC5gXG4gICk7XG5cbiAgd2FybmluZyhcbiAgICAocHJvcHMuY2hpbGRyZW4gYXMgVFJlYWN0Q2hpbGRbXSkubGVuZ3RoID4gMCxcbiAgICAnVmlld1N3aXRjaGVyLkdyb3VwIG11c3QgY29udGFpbiBhdCBsZWFzdCBvbmUgVmlld1N3aXRjaGVyLkJ1dHRvbidcbiAgKTtcblxuICBjb25zdCB2aWV3U3dpdGNoZXJFbGVtZW50cyA9IENoaWxkcmVuLm1hcChwcm9wcy5jaGlsZHJlbiwgKGNoaWxkLCBpbmRleCkgPT4ge1xuICAgIGlmIChcbiAgICAgIGNoaWxkICYmXG4gICAgICBpc1ZhbGlkRWxlbWVudChjaGlsZCkgJiZcbiAgICAgIChjaGlsZCBhcyBUUmVhY3RDaGlsZCkudHlwZS5kaXNwbGF5TmFtZSA9PT0gVmlld1N3aXRjaGVyQnV0dG9uLmRpc3BsYXlOYW1lXG4gICAgKSB7XG4gICAgICBjb25zdCBpc0J1dHRvbkFjdGl2ZSA9XG4gICAgICAgIChpc0NvbnRyb2xsZWRDb21wb25lbnQgPyBwcm9wcy5zZWxlY3RlZFZhbHVlIDogc2VsZWN0ZWRCdXR0b24pID09PVxuICAgICAgICBjaGlsZC5wcm9wcy52YWx1ZTtcbiAgICAgIGNvbnN0IGNsb25lZENoaWxkID0gY2xvbmVFbGVtZW50KGNoaWxkLCB7XG4gICAgICAgIG9uQ2xpY2s6ICgpID0+IHtcbiAgICAgICAgICBpZiAoIWlzQ29udHJvbGxlZENvbXBvbmVudCkge1xuICAgICAgICAgICAgc2V0U2VsZWN0ZWRCdXR0b24oY2hpbGQucHJvcHMudmFsdWUpO1xuICAgICAgICAgIH1cblxuICAgICAgICAgIGlmICghaXNCdXR0b25BY3RpdmUpIHtcbiAgICAgICAgICAgIGNoaWxkLnByb3BzLm9uQ2xpY2s/LihjaGlsZC5wcm9wcy52YWx1ZSk7XG4gICAgICAgICAgICBwcm9wcy5vbkNoYW5nZT8uKGNoaWxkLnByb3BzLnZhbHVlKTtcbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIGlzQ29uZGVuc2VkOiBwcm9wcy5pc0NvbmRlbnNlZCxcbiAgICAgICAgaXNBY3RpdmU6IGlzQnV0dG9uQWN0aXZlLFxuICAgICAgICBpc0ZpcnN0QnV0dG9uOiBpbmRleCA9PT0gMCxcbiAgICAgICAgaXNMYXN0QnV0dG9uOlxuICAgICAgICAgIGluZGV4ID09PSAoKHByb3BzLmNoaWxkcmVuIGFzIFRSZWFjdENoaWxkW10pLmxlbmd0aCA/PyAxKSAtIDEsXG4gICAgICB9KTtcbiAgICAgIHJldHVybiBjbG9uZWRDaGlsZDtcbiAgICB9XG4gICAgcmV0dXJuIGNoaWxkO1xuICB9KTtcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgYH1cbiAgICA+XG4gICAgICB7dmlld1N3aXRjaGVyRWxlbWVudHN9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBWaWV3U3dpdGNoZXI7XG4iXX0= */",
|
|
80
82
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
81
83
|
};
|
|
82
84
|
|
|
83
85
|
var ViewSwitcher$1 = function ViewSwitcher(props) {
|
|
86
|
+
var isControlledComponent = !isNil__default["default"](props.selectedValue);
|
|
87
|
+
var hasOnChange = !isNil__default["default"](props.onChange);
|
|
88
|
+
/**
|
|
89
|
+
* This internal state is only used when the component is uncontrolled ("defaultSelected" is passed).
|
|
90
|
+
* When controlled ("selectedValue") the state will not be updated or used.
|
|
91
|
+
*/
|
|
92
|
+
|
|
84
93
|
var _useState = react$1.useState(props.defaultSelected),
|
|
85
94
|
_useState2 = _slicedToArray(_useState, 2),
|
|
86
95
|
selectedButton = _useState2[0],
|
|
87
96
|
setSelectedButton = _useState2[1];
|
|
88
97
|
|
|
98
|
+
if (isControlledComponent) {
|
|
99
|
+
process.env.NODE_ENV !== "production" ? utils.warning(hasOnChange, "ui-kit/ViewSwitcher: missing required prop \"onChange\" when using the \"value\" prop (controlled component).") : void 0;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
process.env.NODE_ENV !== "production" ? utils.warning(!props.selectedValue || !props.defaultSelected, "ui-kit/ViewSwitcher: passed both \"selectedValue\" (uncontrolled component) prop and \"defaultSelected\" (uncontrolled component). Please pass only one as the component can only be either controlled or uncontrolled.") : void 0;
|
|
89
103
|
process.env.NODE_ENV !== "production" ? utils.warning(props.children.length > 0, 'ViewSwitcher.Group must contain at least one ViewSwitcher.Button') : void 0;
|
|
90
104
|
|
|
91
105
|
var viewSwitcherElements = _mapInstanceProperty__default["default"](react$1.Children).call(react$1.Children, props.children, function (child, index) {
|
|
92
106
|
if (child && /*#__PURE__*/react$1.isValidElement(child) && child.type.displayName === Button.displayName) {
|
|
93
107
|
var _length;
|
|
94
108
|
|
|
95
|
-
var isButtonActive = selectedButton === child.props.value;
|
|
109
|
+
var isButtonActive = (isControlledComponent ? props.selectedValue : selectedButton) === child.props.value;
|
|
96
110
|
var clonedChild = /*#__PURE__*/react$1.cloneElement(child, {
|
|
97
111
|
onClick: function onClick() {
|
|
98
|
-
|
|
112
|
+
if (!isControlledComponent) {
|
|
113
|
+
setSelectedButton(child.props.value);
|
|
114
|
+
}
|
|
99
115
|
|
|
100
116
|
if (!isButtonActive) {
|
|
101
117
|
var _child$props$onClick, _child$props, _props$onChange;
|
|
@@ -125,12 +141,13 @@ ViewSwitcher$1.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
125
141
|
isCondensed: _pt__default["default"].bool,
|
|
126
142
|
children: _pt__default["default"].node.isRequired,
|
|
127
143
|
onChange: _pt__default["default"].func,
|
|
128
|
-
defaultSelected: _pt__default["default"].string
|
|
144
|
+
defaultSelected: _pt__default["default"].string,
|
|
145
|
+
selectedValue: _pt__default["default"].string
|
|
129
146
|
} : {};
|
|
130
147
|
var Group = ViewSwitcher$1;
|
|
131
148
|
|
|
132
149
|
// NOTE: This string will be replaced on build time with the package version.
|
|
133
|
-
var version = "15.
|
|
150
|
+
var version = "15.2.2";
|
|
134
151
|
|
|
135
152
|
var ViewSwitcher = {
|
|
136
153
|
Group: Group,
|
|
@@ -6,6 +6,7 @@ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
|
6
6
|
require('prop-types');
|
|
7
7
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
8
8
|
var react$1 = require('react');
|
|
9
|
+
var isNil = require('lodash/isNil');
|
|
9
10
|
var react = require('@emotion/react');
|
|
10
11
|
var AccessibleButton = require('@commercetools-uikit/accessible-button');
|
|
11
12
|
var designSystem = require('@commercetools-uikit/design-system');
|
|
@@ -16,6 +17,7 @@ require('@commercetools-uikit/utils');
|
|
|
16
17
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
17
18
|
|
|
18
19
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
20
|
+
var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
19
21
|
var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
|
|
20
22
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
21
23
|
|
|
@@ -63,6 +65,13 @@ var _ref = {
|
|
|
63
65
|
} ;
|
|
64
66
|
|
|
65
67
|
var ViewSwitcher$1 = function ViewSwitcher(props) {
|
|
68
|
+
var isControlledComponent = !isNil__default["default"](props.selectedValue);
|
|
69
|
+
!isNil__default["default"](props.onChange);
|
|
70
|
+
/**
|
|
71
|
+
* This internal state is only used when the component is uncontrolled ("defaultSelected" is passed).
|
|
72
|
+
* When controlled ("selectedValue") the state will not be updated or used.
|
|
73
|
+
*/
|
|
74
|
+
|
|
66
75
|
var _useState = react$1.useState(props.defaultSelected),
|
|
67
76
|
_useState2 = _slicedToArray(_useState, 2),
|
|
68
77
|
selectedButton = _useState2[0],
|
|
@@ -72,10 +81,12 @@ var ViewSwitcher$1 = function ViewSwitcher(props) {
|
|
|
72
81
|
if (child && /*#__PURE__*/react$1.isValidElement(child) && child.type.displayName === Button.displayName) {
|
|
73
82
|
var _length;
|
|
74
83
|
|
|
75
|
-
var isButtonActive = selectedButton === child.props.value;
|
|
84
|
+
var isButtonActive = (isControlledComponent ? props.selectedValue : selectedButton) === child.props.value;
|
|
76
85
|
var clonedChild = /*#__PURE__*/react$1.cloneElement(child, {
|
|
77
86
|
onClick: function onClick() {
|
|
78
|
-
|
|
87
|
+
if (!isControlledComponent) {
|
|
88
|
+
setSelectedButton(child.props.value);
|
|
89
|
+
}
|
|
79
90
|
|
|
80
91
|
if (!isButtonActive) {
|
|
81
92
|
var _child$props$onClick, _child$props, _props$onChange;
|
|
@@ -105,7 +116,7 @@ ViewSwitcher$1.propTypes = {};
|
|
|
105
116
|
var Group = ViewSwitcher$1;
|
|
106
117
|
|
|
107
118
|
// NOTE: This string will be replaced on build time with the package version.
|
|
108
|
-
var version = "15.
|
|
119
|
+
var version = "15.2.2";
|
|
109
120
|
|
|
110
121
|
var ViewSwitcher = {
|
|
111
122
|
Group: Group,
|
|
@@ -2,6 +2,7 @@ import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
|
|
|
2
2
|
import _pt from 'prop-types';
|
|
3
3
|
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
|
4
4
|
import { cloneElement, useState, Children, isValidElement } from 'react';
|
|
5
|
+
import isNil from 'lodash/isNil';
|
|
5
6
|
import { css } from '@emotion/react';
|
|
6
7
|
import AccessibleButton from '@commercetools-uikit/accessible-button';
|
|
7
8
|
import { customProperties } from '@commercetools-uikit/design-system';
|
|
@@ -65,26 +66,40 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
65
66
|
} : {
|
|
66
67
|
name: "xd53is-ViewSwitcher",
|
|
67
68
|
styles: "display:flex;label:ViewSwitcher;",
|
|
68
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
69
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZXctc3dpdGNoZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdHYyIsImZpbGUiOiJ2aWV3LXN3aXRjaGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoaWxkcmVuLFxuICBpc1ZhbGlkRWxlbWVudCxcbiAgY2xvbmVFbGVtZW50LFxuICB1c2VTdGF0ZSxcbiAgdHlwZSBSZWFjdE5vZGUsXG4gIHR5cGUgUmVhY3RFbGVtZW50LFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgaXNOaWwgZnJvbSAnbG9kYXNoL2lzTmlsJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBWaWV3U3dpdGNoZXJCdXR0b24gZnJvbSAnLi92aWV3LXN3aXRjaGVyLWJ1dHRvbic7XG5pbXBvcnQgeyB3YXJuaW5nIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuXG50eXBlIFRSZWFjdENoaWxkID0ge1xuICB0eXBlPzogeyBkaXNwbGF5TmFtZTogc3RyaW5nIH07XG59ICYgUmVhY3RFbGVtZW50O1xuXG5leHBvcnQgdHlwZSBUVmlld1N3aXRjaGVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgdGhhdCB0aGUgdmlldyBzd2l0Y2hlciBjYW4gYmUgcmVkdWNlZCB0byBzYXZlIHNwYWNlLlxuICAgKi9cbiAgaXNDb25kZW5zZWQ/OiBib29sZWFuO1xuICAvKipcbiAgICogUGFzcyBvbmUgb3IgbW9yZSBgVmlld1N3aXRjaGVyLkJ1dHRvbmAgY29tcG9uZW50cy5cbiAgICovXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBXaWxsIGJlIHRyaWdnZXJlZCB3aGVuZXZlciBhIGBWaWV3U3dpdGNoZXIuQnV0dG9uYCBpcyBzZWxlY3RlZC4gQ2FsbGVkIHdpdGggdGhlIFZpZXdTd2l0Y2hlckJ1dHRvbiB2YWx1ZS5cbiAgICogVGhpcyBmdW5jdGlvbiBpcyBvbmx5IHJlcXVpcmVkIHdoZW4gdGhlIGNvbXBvbmVudCBpcyBjb250cm9sbGVkLlxuICAgKi9cbiAgb25DaGFuZ2U/OiAodmFsdWU6IHN0cmluZykgPT4gdm9pZDtcbiAgLyoqXG4gICAqIFBhc3NpbmcgdGhpcyBwcm9wIG1ha2VzIHRoZSBjb21wb25lbnQgYW4gdW5jb250cm9sbGVkIGNvbXBvbmVudC5cbiAgICogSW5kaWNhdGVzIHRoZSBkZWZhdWx0IHNlbGVjdGVkIGJ1dHRvbiBpdCBpcyBvbmx5IHVzZWQgdG8gYXMgYW4gaW5pdGlhbCBzdGF0ZSBvbmNlLCB3aGVuIHRoZSBjb21wb25lbnQgbW91bnRzLlxuICAgKi9cbiAgZGVmYXVsdFNlbGVjdGVkPzogc3RyaW5nO1xuICAvKipcbiAgICogUGFzc2luZyB0aGlzIHByb3AgbWFrZXMgdGhlIGNvbXBvbmVudCBhbiBjb250cm9sbGVkIGNvbXBvbmVudC5cbiAgICogQ29udHJvbGxlZCBjb21wb25lbnRzIGFsc28gcmVxdWlyZSB0byBwYXNzIGEgYG9uQ2hhbmdlYCBjYWxsYmFjayBmdW5jdGlvbi5cbiAgICovXG4gIHNlbGVjdGVkVmFsdWU/OiBzdHJpbmc7XG59O1xuXG5jb25zdCBWaWV3U3dpdGNoZXIgPSAocHJvcHM6IFRWaWV3U3dpdGNoZXJQcm9wcykgPT4ge1xuICBjb25zdCBpc0NvbnRyb2xsZWRDb21wb25lbnQgPSAhaXNOaWwocHJvcHMuc2VsZWN0ZWRWYWx1ZSk7XG4gIGNvbnN0IGhhc09uQ2hhbmdlID0gIWlzTmlsKHByb3BzLm9uQ2hhbmdlKTtcbiAgLyoqXG4gICAqIFRoaXMgaW50ZXJuYWwgc3RhdGUgaXMgb25seSB1c2VkIHdoZW4gdGhlIGNvbXBvbmVudCBpcyB1bmNvbnRyb2xsZWQgKFwiZGVmYXVsdFNlbGVjdGVkXCIgaXMgcGFzc2VkKS5cbiAgICogV2hlbiBjb250cm9sbGVkIChcInNlbGVjdGVkVmFsdWVcIikgdGhlIHN0YXRlIHdpbGwgbm90IGJlIHVwZGF0ZWQgb3IgdXNlZC5cbiAgICovXG4gIGNvbnN0IFtzZWxlY3RlZEJ1dHRvbiwgc2V0U2VsZWN0ZWRCdXR0b25dID0gdXNlU3RhdGU8c3RyaW5nIHwgdW5kZWZpbmVkPihcbiAgICBwcm9wcy5kZWZhdWx0U2VsZWN0ZWRcbiAgKTtcblxuICBpZiAoaXNDb250cm9sbGVkQ29tcG9uZW50KSB7XG4gICAgd2FybmluZyhcbiAgICAgIGhhc09uQ2hhbmdlLFxuICAgICAgYHVpLWtpdC9WaWV3U3dpdGNoZXI6IG1pc3NpbmcgcmVxdWlyZWQgcHJvcCBcIm9uQ2hhbmdlXCIgd2hlbiB1c2luZyB0aGUgXCJ2YWx1ZVwiIHByb3AgKGNvbnRyb2xsZWQgY29tcG9uZW50KS5gXG4gICAgKTtcbiAgfVxuXG4gIHdhcm5pbmcoXG4gICAgIXByb3BzLnNlbGVjdGVkVmFsdWUgfHwgIXByb3BzLmRlZmF1bHRTZWxlY3RlZCxcbiAgICBgdWkta2l0L1ZpZXdTd2l0Y2hlcjogcGFzc2VkIGJvdGggXCJzZWxlY3RlZFZhbHVlXCIgKHVuY29udHJvbGxlZCBjb21wb25lbnQpIHByb3AgYW5kIFwiZGVmYXVsdFNlbGVjdGVkXCIgKHVuY29udHJvbGxlZCBjb21wb25lbnQpLiBQbGVhc2UgcGFzcyBvbmx5IG9uZSBhcyB0aGUgY29tcG9uZW50IGNhbiBvbmx5IGJlIGVpdGhlciBjb250cm9sbGVkIG9yIHVuY29udHJvbGxlZC5gXG4gICk7XG5cbiAgd2FybmluZyhcbiAgICAocHJvcHMuY2hpbGRyZW4gYXMgVFJlYWN0Q2hpbGRbXSkubGVuZ3RoID4gMCxcbiAgICAnVmlld1N3aXRjaGVyLkdyb3VwIG11c3QgY29udGFpbiBhdCBsZWFzdCBvbmUgVmlld1N3aXRjaGVyLkJ1dHRvbidcbiAgKTtcblxuICBjb25zdCB2aWV3U3dpdGNoZXJFbGVtZW50cyA9IENoaWxkcmVuLm1hcChwcm9wcy5jaGlsZHJlbiwgKGNoaWxkLCBpbmRleCkgPT4ge1xuICAgIGlmIChcbiAgICAgIGNoaWxkICYmXG4gICAgICBpc1ZhbGlkRWxlbWVudChjaGlsZCkgJiZcbiAgICAgIChjaGlsZCBhcyBUUmVhY3RDaGlsZCkudHlwZS5kaXNwbGF5TmFtZSA9PT0gVmlld1N3aXRjaGVyQnV0dG9uLmRpc3BsYXlOYW1lXG4gICAgKSB7XG4gICAgICBjb25zdCBpc0J1dHRvbkFjdGl2ZSA9XG4gICAgICAgIChpc0NvbnRyb2xsZWRDb21wb25lbnQgPyBwcm9wcy5zZWxlY3RlZFZhbHVlIDogc2VsZWN0ZWRCdXR0b24pID09PVxuICAgICAgICBjaGlsZC5wcm9wcy52YWx1ZTtcbiAgICAgIGNvbnN0IGNsb25lZENoaWxkID0gY2xvbmVFbGVtZW50KGNoaWxkLCB7XG4gICAgICAgIG9uQ2xpY2s6ICgpID0+IHtcbiAgICAgICAgICBpZiAoIWlzQ29udHJvbGxlZENvbXBvbmVudCkge1xuICAgICAgICAgICAgc2V0U2VsZWN0ZWRCdXR0b24oY2hpbGQucHJvcHMudmFsdWUpO1xuICAgICAgICAgIH1cblxuICAgICAgICAgIGlmICghaXNCdXR0b25BY3RpdmUpIHtcbiAgICAgICAgICAgIGNoaWxkLnByb3BzLm9uQ2xpY2s/LihjaGlsZC5wcm9wcy52YWx1ZSk7XG4gICAgICAgICAgICBwcm9wcy5vbkNoYW5nZT8uKGNoaWxkLnByb3BzLnZhbHVlKTtcbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIGlzQ29uZGVuc2VkOiBwcm9wcy5pc0NvbmRlbnNlZCxcbiAgICAgICAgaXNBY3RpdmU6IGlzQnV0dG9uQWN0aXZlLFxuICAgICAgICBpc0ZpcnN0QnV0dG9uOiBpbmRleCA9PT0gMCxcbiAgICAgICAgaXNMYXN0QnV0dG9uOlxuICAgICAgICAgIGluZGV4ID09PSAoKHByb3BzLmNoaWxkcmVuIGFzIFRSZWFjdENoaWxkW10pLmxlbmd0aCA/PyAxKSAtIDEsXG4gICAgICB9KTtcbiAgICAgIHJldHVybiBjbG9uZWRDaGlsZDtcbiAgICB9XG4gICAgcmV0dXJuIGNoaWxkO1xuICB9KTtcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgYH1cbiAgICA+XG4gICAgICB7dmlld1N3aXRjaGVyRWxlbWVudHN9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBWaWV3U3dpdGNoZXI7XG4iXX0= */",
|
|
69
70
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
70
71
|
};
|
|
71
72
|
|
|
72
73
|
var ViewSwitcher$1 = function ViewSwitcher(props) {
|
|
74
|
+
var isControlledComponent = !isNil(props.selectedValue);
|
|
75
|
+
var hasOnChange = !isNil(props.onChange);
|
|
76
|
+
/**
|
|
77
|
+
* This internal state is only used when the component is uncontrolled ("defaultSelected" is passed).
|
|
78
|
+
* When controlled ("selectedValue") the state will not be updated or used.
|
|
79
|
+
*/
|
|
80
|
+
|
|
73
81
|
var _useState = useState(props.defaultSelected),
|
|
74
82
|
_useState2 = _slicedToArray(_useState, 2),
|
|
75
83
|
selectedButton = _useState2[0],
|
|
76
84
|
setSelectedButton = _useState2[1];
|
|
77
85
|
|
|
86
|
+
if (isControlledComponent) {
|
|
87
|
+
process.env.NODE_ENV !== "production" ? warning(hasOnChange, "ui-kit/ViewSwitcher: missing required prop \"onChange\" when using the \"value\" prop (controlled component).") : void 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
process.env.NODE_ENV !== "production" ? warning(!props.selectedValue || !props.defaultSelected, "ui-kit/ViewSwitcher: passed both \"selectedValue\" (uncontrolled component) prop and \"defaultSelected\" (uncontrolled component). Please pass only one as the component can only be either controlled or uncontrolled.") : void 0;
|
|
78
91
|
process.env.NODE_ENV !== "production" ? warning(props.children.length > 0, 'ViewSwitcher.Group must contain at least one ViewSwitcher.Button') : void 0;
|
|
79
92
|
|
|
80
93
|
var viewSwitcherElements = _mapInstanceProperty(Children).call(Children, props.children, function (child, index) {
|
|
81
94
|
if (child && /*#__PURE__*/isValidElement(child) && child.type.displayName === Button.displayName) {
|
|
82
95
|
var _length;
|
|
83
96
|
|
|
84
|
-
var isButtonActive = selectedButton === child.props.value;
|
|
97
|
+
var isButtonActive = (isControlledComponent ? props.selectedValue : selectedButton) === child.props.value;
|
|
85
98
|
var clonedChild = /*#__PURE__*/cloneElement(child, {
|
|
86
99
|
onClick: function onClick() {
|
|
87
|
-
|
|
100
|
+
if (!isControlledComponent) {
|
|
101
|
+
setSelectedButton(child.props.value);
|
|
102
|
+
}
|
|
88
103
|
|
|
89
104
|
if (!isButtonActive) {
|
|
90
105
|
var _child$props$onClick, _child$props, _props$onChange;
|
|
@@ -114,12 +129,13 @@ ViewSwitcher$1.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
114
129
|
isCondensed: _pt.bool,
|
|
115
130
|
children: _pt.node.isRequired,
|
|
116
131
|
onChange: _pt.func,
|
|
117
|
-
defaultSelected: _pt.string
|
|
132
|
+
defaultSelected: _pt.string,
|
|
133
|
+
selectedValue: _pt.string
|
|
118
134
|
} : {};
|
|
119
135
|
var Group = ViewSwitcher$1;
|
|
120
136
|
|
|
121
137
|
// NOTE: This string will be replaced on build time with the package version.
|
|
122
|
-
var version = "15.
|
|
138
|
+
var version = "15.2.2";
|
|
123
139
|
|
|
124
140
|
var ViewSwitcher = {
|
|
125
141
|
Group: Group,
|
|
@@ -3,7 +3,8 @@ export declare type TViewSwitcherProps = {
|
|
|
3
3
|
isCondensed?: boolean;
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
onChange?: (value: string) => void;
|
|
6
|
-
defaultSelected
|
|
6
|
+
defaultSelected?: string;
|
|
7
|
+
selectedValue?: string;
|
|
7
8
|
};
|
|
8
9
|
declare const ViewSwitcher: (props: TViewSwitcherProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
9
10
|
export default ViewSwitcher;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { TViewSwitcherButtonProps } from './view-switcher-button';
|
|
2
|
-
export declare const getButtonStyles: (isDisabled?: TViewSwitcherButtonProps['isDisabled'], isActive?: TViewSwitcherButtonProps['isActive'], isCondensed?: TViewSwitcherButtonProps['isCondensed'], isFirstButton?: TViewSwitcherButtonProps['isFirstButton'], isLastButton?: TViewSwitcherButtonProps['isLastButton']) => (false | import("@emotion/
|
|
2
|
+
export declare const getButtonStyles: (isDisabled?: TViewSwitcherButtonProps['isDisabled'], isActive?: TViewSwitcherButtonProps['isActive'], isCondensed?: TViewSwitcherButtonProps['isCondensed'], isFirstButton?: TViewSwitcherButtonProps['isFirstButton'], isLastButton?: TViewSwitcherButtonProps['isLastButton']) => (false | import("@emotion/react").SerializedStyles | undefined)[];
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/view-switcher",
|
|
3
3
|
"description": "ViewSwitchers allow users to toggle between two or more different views of the same, similar or related content items within the same space on screen.",
|
|
4
|
-
"version": "15.
|
|
4
|
+
"version": "15.2.2",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,11 +21,12 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.17.2",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.17.2",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "15.
|
|
25
|
-
"@commercetools-uikit/design-system": "15.
|
|
26
|
-
"@commercetools-uikit/utils": "15.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "15.2.2",
|
|
25
|
+
"@commercetools-uikit/design-system": "15.2.2",
|
|
26
|
+
"@commercetools-uikit/utils": "15.2.2",
|
|
27
27
|
"@emotion/react": "^11.4.0",
|
|
28
28
|
"@emotion/styled": "^11.3.0",
|
|
29
|
+
"lodash": "4.17.21",
|
|
29
30
|
"prop-types": "15.8.1"
|
|
30
31
|
},
|
|
31
32
|
"devDependencies": {
|