@commercetools-uikit/quick-filters 19.12.0 → 19.13.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/README.md
CHANGED
|
@@ -7,8 +7,6 @@
|
|
|
7
7
|
|
|
8
8
|
The `QuickFilters` component displays a selection of `Tag` components that represent the available filter actions.
|
|
9
9
|
|
|
10
|
-
This description is a stub and shold be expanded as development continues.
|
|
11
|
-
|
|
12
10
|
## Installation
|
|
13
11
|
|
|
14
12
|
```
|
|
@@ -32,16 +30,63 @@ npm --save install react
|
|
|
32
30
|
## Usage
|
|
33
31
|
|
|
34
32
|
```jsx
|
|
33
|
+
import { useState } from 'react';
|
|
35
34
|
import QuickFilters from '@commercetools-uikit/quick-filters';
|
|
36
35
|
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
const App = () => {
|
|
37
|
+
const [items, setItems] = useState([
|
|
38
|
+
{
|
|
39
|
+
id: '1',
|
|
40
|
+
label: 'Accepted',
|
|
41
|
+
isActive: true,
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
id: '2',
|
|
45
|
+
label: 'Rejected',
|
|
46
|
+
isActive: false,
|
|
47
|
+
},
|
|
48
|
+
]);
|
|
49
|
+
|
|
50
|
+
const onItemClick = (clickedItem) => {
|
|
51
|
+
const updatedItems = items.map((item) => {
|
|
52
|
+
return {
|
|
53
|
+
...item,
|
|
54
|
+
isActive: item.id === clickedItem.id ? !item.isActive : false,
|
|
55
|
+
};
|
|
56
|
+
});
|
|
57
|
+
setItems(updatedItems);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
return <QuickFilters items={items} onItemClick={onItemClick} />;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export default App;
|
|
41
64
|
```
|
|
42
65
|
|
|
43
66
|
## Properties
|
|
44
67
|
|
|
45
|
-
| Props
|
|
46
|
-
|
|
|
47
|
-
| `
|
|
68
|
+
| Props | Type | Required | Default | Description |
|
|
69
|
+
| ------------- | ------------------------------------------------------------------- | :------: | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
70
|
+
| `items` | `Array: TQuickFiltersItem[]`<br/>[See signature.](#signature-items) | ✅ | | collection of quick filter items@param item.id unique identifier for the item.
@param item.label label to display
@param item.isActive the current active state of the item |
|
|
71
|
+
| `onItemClick` | `Function`<br/>[See signature.](#signature-onItemClick) | ✅ | | callback fn, executed when an item is clicked |
|
|
72
|
+
|
|
73
|
+
## Signatures
|
|
74
|
+
|
|
75
|
+
### Signature `items`
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
{
|
|
79
|
+
/** unique identifier for the item. */
|
|
80
|
+
id: string;
|
|
81
|
+
/* label to display */
|
|
82
|
+
label: string;
|
|
83
|
+
/* the current active state of the item */
|
|
84
|
+
isActive: boolean;
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Signature `onItemClick`
|
|
89
|
+
|
|
90
|
+
```ts
|
|
91
|
+
(item: TQuickFiltersItem) => void
|
|
92
|
+
```
|
|
@@ -2,16 +2,46 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
6
|
+
var Tag = require('@commercetools-uikit/tag');
|
|
7
|
+
var react = require('@emotion/react');
|
|
8
|
+
var designSystem = require('@commercetools-uikit/design-system');
|
|
5
9
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
6
10
|
|
|
7
|
-
function
|
|
8
|
-
|
|
9
|
-
|
|
11
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
12
|
+
|
|
13
|
+
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
14
|
+
var Tag__default = /*#__PURE__*/_interopDefault(Tag);
|
|
15
|
+
|
|
16
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
17
|
+
const listStyles = /*#__PURE__*/react.css("all:unset;display:inline-flex;flex-wrap:wrap;gap:", designSystem.designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:listStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInF1aWNrLWZpbHRlcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCc0IiLCJmaWxlIjoicXVpY2stZmlsdGVycy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgVGFnIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RhZyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxuZXhwb3J0IHR5cGUgVFF1aWNrRmlsdGVyc0l0ZW0gPSB7XG4gIC8qKiB1bmlxdWUgaWRlbnRpZmllciBmb3IgdGhlIGl0ZW0uICovXG4gIGlkOiBzdHJpbmc7XG4gIC8qIGxhYmVsIHRvIGRpc3BsYXkgKi9cbiAgbGFiZWw6IHN0cmluZztcbiAgLyogdGhlIGN1cnJlbnQgYWN0aXZlIHN0YXRlIG9mIHRoZSBpdGVtICovXG4gIGlzQWN0aXZlOiBib29sZWFuO1xufTtcblxuZXhwb3J0IHR5cGUgVFF1aWNrRmlsdGVyc1Byb3BzID0ge1xuICAvKipcbiAgICogY29sbGVjdGlvbiBvZiBxdWljayBmaWx0ZXIgaXRlbXNcbiAgICpcbiAgICogQHBhcmFtIGl0ZW0uaWQgdW5pcXVlIGlkZW50aWZpZXIgZm9yIHRoZSBpdGVtLlxuICAgKiBAcGFyYW0gaXRlbS5sYWJlbCBsYWJlbCB0byBkaXNwbGF5XG4gICAqIEBwYXJhbSBpdGVtLmlzQWN0aXZlIHRoZSBjdXJyZW50IGFjdGl2ZSBzdGF0ZSBvZiB0aGUgaXRlbVxuICAgKi9cbiAgaXRlbXM6IFRRdWlja0ZpbHRlcnNJdGVtW107XG5cbiAgLyoqIGNhbGxiYWNrIGZuLCBleGVjdXRlZCB3aGVuIGFuIGl0ZW0gaXMgY2xpY2tlZCAqL1xuICBvbkl0ZW1DbGljazogKGl0ZW06IFRRdWlja0ZpbHRlcnNJdGVtKSA9PiB2b2lkO1xufTtcblxuY29uc3QgbGlzdFN0eWxlcyA9IGNzc2BcbiAgYWxsOiB1bnNldDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGZsZXgtd3JhcDogd3JhcDtcbiAgZ2FwOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuYDtcblxuY29uc3QgbGlzdEl0ZW1TdHlsZXMgPSBjc3NgXG4gIGFsbDogdW5zZXQ7XG5gO1xuXG5mdW5jdGlvbiBRdWlja0ZpbHRlcnMoeyBpdGVtcywgb25JdGVtQ2xpY2sgfTogVFF1aWNrRmlsdGVyc1Byb3BzKSB7XG4gIHJldHVybiAoXG4gICAgPHVsIGNzcz17bGlzdFN0eWxlc30+XG4gICAgICB7aXRlbXMubWFwKChpdGVtKSA9PiAoXG4gICAgICAgIDxsaSBrZXk9e2l0ZW0uaWR9IGNzcz17bGlzdEl0ZW1TdHlsZXN9PlxuICAgICAgICAgIDxUYWdcbiAgICAgICAgICAgIHRvbmU9e2l0ZW0uaXNBY3RpdmUgPyAncHJpbWFyeScgOiAnc3VyZmFjZSd9XG4gICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBvbkl0ZW1DbGljayhpdGVtKX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7aXRlbS5sYWJlbH1cbiAgICAgICAgICA8L1RhZz5cbiAgICAgICAgPC9saT5cbiAgICAgICkpfVxuICAgIDwvdWw+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IFF1aWNrRmlsdGVycztcbiJdfQ== */");
|
|
18
|
+
const listItemStyles = process.env.NODE_ENV === "production" ? {
|
|
19
|
+
name: "zp4mm8",
|
|
20
|
+
styles: "all:unset"
|
|
21
|
+
} : {
|
|
22
|
+
name: "1xcam7i-listItemStyles",
|
|
23
|
+
styles: "all:unset;label:listItemStyles;",
|
|
24
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInF1aWNrLWZpbHRlcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDMEIiLCJmaWxlIjoicXVpY2stZmlsdGVycy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgVGFnIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RhZyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxuZXhwb3J0IHR5cGUgVFF1aWNrRmlsdGVyc0l0ZW0gPSB7XG4gIC8qKiB1bmlxdWUgaWRlbnRpZmllciBmb3IgdGhlIGl0ZW0uICovXG4gIGlkOiBzdHJpbmc7XG4gIC8qIGxhYmVsIHRvIGRpc3BsYXkgKi9cbiAgbGFiZWw6IHN0cmluZztcbiAgLyogdGhlIGN1cnJlbnQgYWN0aXZlIHN0YXRlIG9mIHRoZSBpdGVtICovXG4gIGlzQWN0aXZlOiBib29sZWFuO1xufTtcblxuZXhwb3J0IHR5cGUgVFF1aWNrRmlsdGVyc1Byb3BzID0ge1xuICAvKipcbiAgICogY29sbGVjdGlvbiBvZiBxdWljayBmaWx0ZXIgaXRlbXNcbiAgICpcbiAgICogQHBhcmFtIGl0ZW0uaWQgdW5pcXVlIGlkZW50aWZpZXIgZm9yIHRoZSBpdGVtLlxuICAgKiBAcGFyYW0gaXRlbS5sYWJlbCBsYWJlbCB0byBkaXNwbGF5XG4gICAqIEBwYXJhbSBpdGVtLmlzQWN0aXZlIHRoZSBjdXJyZW50IGFjdGl2ZSBzdGF0ZSBvZiB0aGUgaXRlbVxuICAgKi9cbiAgaXRlbXM6IFRRdWlja0ZpbHRlcnNJdGVtW107XG5cbiAgLyoqIGNhbGxiYWNrIGZuLCBleGVjdXRlZCB3aGVuIGFuIGl0ZW0gaXMgY2xpY2tlZCAqL1xuICBvbkl0ZW1DbGljazogKGl0ZW06IFRRdWlja0ZpbHRlcnNJdGVtKSA9PiB2b2lkO1xufTtcblxuY29uc3QgbGlzdFN0eWxlcyA9IGNzc2BcbiAgYWxsOiB1bnNldDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGZsZXgtd3JhcDogd3JhcDtcbiAgZ2FwOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuYDtcblxuY29uc3QgbGlzdEl0ZW1TdHlsZXMgPSBjc3NgXG4gIGFsbDogdW5zZXQ7XG5gO1xuXG5mdW5jdGlvbiBRdWlja0ZpbHRlcnMoeyBpdGVtcywgb25JdGVtQ2xpY2sgfTogVFF1aWNrRmlsdGVyc1Byb3BzKSB7XG4gIHJldHVybiAoXG4gICAgPHVsIGNzcz17bGlzdFN0eWxlc30+XG4gICAgICB7aXRlbXMubWFwKChpdGVtKSA9PiAoXG4gICAgICAgIDxsaSBrZXk9e2l0ZW0uaWR9IGNzcz17bGlzdEl0ZW1TdHlsZXN9PlxuICAgICAgICAgIDxUYWdcbiAgICAgICAgICAgIHRvbmU9e2l0ZW0uaXNBY3RpdmUgPyAncHJpbWFyeScgOiAnc3VyZmFjZSd9XG4gICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBvbkl0ZW1DbGljayhpdGVtKX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7aXRlbS5sYWJlbH1cbiAgICAgICAgICA8L1RhZz5cbiAgICAgICAgPC9saT5cbiAgICAgICkpfVxuICAgIDwvdWw+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IFF1aWNrRmlsdGVycztcbiJdfQ== */",
|
|
25
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
26
|
+
};
|
|
27
|
+
function QuickFilters(_ref) {
|
|
28
|
+
let items = _ref.items,
|
|
29
|
+
onItemClick = _ref.onItemClick;
|
|
30
|
+
return jsxRuntime.jsx("ul", {
|
|
31
|
+
css: listStyles,
|
|
32
|
+
children: _mapInstanceProperty__default["default"](items).call(items, item => jsxRuntime.jsx("li", {
|
|
33
|
+
css: listItemStyles,
|
|
34
|
+
children: jsxRuntime.jsx(Tag__default["default"], {
|
|
35
|
+
tone: item.isActive ? 'primary' : 'surface',
|
|
36
|
+
onClick: () => onItemClick(item),
|
|
37
|
+
children: item.label
|
|
38
|
+
})
|
|
39
|
+
}, item.id))
|
|
10
40
|
});
|
|
11
41
|
}
|
|
12
42
|
|
|
13
43
|
// NOTE: This string will be replaced on build time with the package version.
|
|
14
|
-
var version = "19.
|
|
44
|
+
var version = "19.13.0";
|
|
15
45
|
|
|
16
46
|
exports["default"] = QuickFilters;
|
|
17
47
|
exports.version = version;
|
|
@@ -2,16 +2,40 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
6
|
+
var Tag = require('@commercetools-uikit/tag');
|
|
7
|
+
var react = require('@emotion/react');
|
|
8
|
+
var designSystem = require('@commercetools-uikit/design-system');
|
|
5
9
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
6
10
|
|
|
7
|
-
function
|
|
8
|
-
|
|
9
|
-
|
|
11
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
12
|
+
|
|
13
|
+
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
14
|
+
var Tag__default = /*#__PURE__*/_interopDefault(Tag);
|
|
15
|
+
|
|
16
|
+
const listStyles = /*#__PURE__*/react.css("all:unset;display:inline-flex;flex-wrap:wrap;gap:", designSystem.designTokens.spacing20, ";" + ("" ), "" );
|
|
17
|
+
const listItemStyles = {
|
|
18
|
+
name: "zp4mm8",
|
|
19
|
+
styles: "all:unset"
|
|
20
|
+
} ;
|
|
21
|
+
function QuickFilters(_ref) {
|
|
22
|
+
let items = _ref.items,
|
|
23
|
+
onItemClick = _ref.onItemClick;
|
|
24
|
+
return jsxRuntime.jsx("ul", {
|
|
25
|
+
css: listStyles,
|
|
26
|
+
children: _mapInstanceProperty__default["default"](items).call(items, item => jsxRuntime.jsx("li", {
|
|
27
|
+
css: listItemStyles,
|
|
28
|
+
children: jsxRuntime.jsx(Tag__default["default"], {
|
|
29
|
+
tone: item.isActive ? 'primary' : 'surface',
|
|
30
|
+
onClick: () => onItemClick(item),
|
|
31
|
+
children: item.label
|
|
32
|
+
})
|
|
33
|
+
}, item.id))
|
|
10
34
|
});
|
|
11
35
|
}
|
|
12
36
|
|
|
13
37
|
// NOTE: This string will be replaced on build time with the package version.
|
|
14
|
-
var version = "19.
|
|
38
|
+
var version = "19.13.0";
|
|
15
39
|
|
|
16
40
|
exports["default"] = QuickFilters;
|
|
17
41
|
exports.version = version;
|
|
@@ -1,12 +1,37 @@
|
|
|
1
|
+
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
|
2
|
+
import Tag from '@commercetools-uikit/tag';
|
|
3
|
+
import { css } from '@emotion/react';
|
|
4
|
+
import { designTokens } from '@commercetools-uikit/design-system';
|
|
1
5
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
2
6
|
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
|
|
7
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
8
|
+
const listStyles = /*#__PURE__*/css("all:unset;display:inline-flex;flex-wrap:wrap;gap:", designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:listStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInF1aWNrLWZpbHRlcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCc0IiLCJmaWxlIjoicXVpY2stZmlsdGVycy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgVGFnIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RhZyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxuZXhwb3J0IHR5cGUgVFF1aWNrRmlsdGVyc0l0ZW0gPSB7XG4gIC8qKiB1bmlxdWUgaWRlbnRpZmllciBmb3IgdGhlIGl0ZW0uICovXG4gIGlkOiBzdHJpbmc7XG4gIC8qIGxhYmVsIHRvIGRpc3BsYXkgKi9cbiAgbGFiZWw6IHN0cmluZztcbiAgLyogdGhlIGN1cnJlbnQgYWN0aXZlIHN0YXRlIG9mIHRoZSBpdGVtICovXG4gIGlzQWN0aXZlOiBib29sZWFuO1xufTtcblxuZXhwb3J0IHR5cGUgVFF1aWNrRmlsdGVyc1Byb3BzID0ge1xuICAvKipcbiAgICogY29sbGVjdGlvbiBvZiBxdWljayBmaWx0ZXIgaXRlbXNcbiAgICpcbiAgICogQHBhcmFtIGl0ZW0uaWQgdW5pcXVlIGlkZW50aWZpZXIgZm9yIHRoZSBpdGVtLlxuICAgKiBAcGFyYW0gaXRlbS5sYWJlbCBsYWJlbCB0byBkaXNwbGF5XG4gICAqIEBwYXJhbSBpdGVtLmlzQWN0aXZlIHRoZSBjdXJyZW50IGFjdGl2ZSBzdGF0ZSBvZiB0aGUgaXRlbVxuICAgKi9cbiAgaXRlbXM6IFRRdWlja0ZpbHRlcnNJdGVtW107XG5cbiAgLyoqIGNhbGxiYWNrIGZuLCBleGVjdXRlZCB3aGVuIGFuIGl0ZW0gaXMgY2xpY2tlZCAqL1xuICBvbkl0ZW1DbGljazogKGl0ZW06IFRRdWlja0ZpbHRlcnNJdGVtKSA9PiB2b2lkO1xufTtcblxuY29uc3QgbGlzdFN0eWxlcyA9IGNzc2BcbiAgYWxsOiB1bnNldDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGZsZXgtd3JhcDogd3JhcDtcbiAgZ2FwOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuYDtcblxuY29uc3QgbGlzdEl0ZW1TdHlsZXMgPSBjc3NgXG4gIGFsbDogdW5zZXQ7XG5gO1xuXG5mdW5jdGlvbiBRdWlja0ZpbHRlcnMoeyBpdGVtcywgb25JdGVtQ2xpY2sgfTogVFF1aWNrRmlsdGVyc1Byb3BzKSB7XG4gIHJldHVybiAoXG4gICAgPHVsIGNzcz17bGlzdFN0eWxlc30+XG4gICAgICB7aXRlbXMubWFwKChpdGVtKSA9PiAoXG4gICAgICAgIDxsaSBrZXk9e2l0ZW0uaWR9IGNzcz17bGlzdEl0ZW1TdHlsZXN9PlxuICAgICAgICAgIDxUYWdcbiAgICAgICAgICAgIHRvbmU9e2l0ZW0uaXNBY3RpdmUgPyAncHJpbWFyeScgOiAnc3VyZmFjZSd9XG4gICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBvbkl0ZW1DbGljayhpdGVtKX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7aXRlbS5sYWJlbH1cbiAgICAgICAgICA8L1RhZz5cbiAgICAgICAgPC9saT5cbiAgICAgICkpfVxuICAgIDwvdWw+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IFF1aWNrRmlsdGVycztcbiJdfQ== */");
|
|
9
|
+
const listItemStyles = process.env.NODE_ENV === "production" ? {
|
|
10
|
+
name: "zp4mm8",
|
|
11
|
+
styles: "all:unset"
|
|
12
|
+
} : {
|
|
13
|
+
name: "1xcam7i-listItemStyles",
|
|
14
|
+
styles: "all:unset;label:listItemStyles;",
|
|
15
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInF1aWNrLWZpbHRlcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDMEIiLCJmaWxlIjoicXVpY2stZmlsdGVycy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgVGFnIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RhZyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxuZXhwb3J0IHR5cGUgVFF1aWNrRmlsdGVyc0l0ZW0gPSB7XG4gIC8qKiB1bmlxdWUgaWRlbnRpZmllciBmb3IgdGhlIGl0ZW0uICovXG4gIGlkOiBzdHJpbmc7XG4gIC8qIGxhYmVsIHRvIGRpc3BsYXkgKi9cbiAgbGFiZWw6IHN0cmluZztcbiAgLyogdGhlIGN1cnJlbnQgYWN0aXZlIHN0YXRlIG9mIHRoZSBpdGVtICovXG4gIGlzQWN0aXZlOiBib29sZWFuO1xufTtcblxuZXhwb3J0IHR5cGUgVFF1aWNrRmlsdGVyc1Byb3BzID0ge1xuICAvKipcbiAgICogY29sbGVjdGlvbiBvZiBxdWljayBmaWx0ZXIgaXRlbXNcbiAgICpcbiAgICogQHBhcmFtIGl0ZW0uaWQgdW5pcXVlIGlkZW50aWZpZXIgZm9yIHRoZSBpdGVtLlxuICAgKiBAcGFyYW0gaXRlbS5sYWJlbCBsYWJlbCB0byBkaXNwbGF5XG4gICAqIEBwYXJhbSBpdGVtLmlzQWN0aXZlIHRoZSBjdXJyZW50IGFjdGl2ZSBzdGF0ZSBvZiB0aGUgaXRlbVxuICAgKi9cbiAgaXRlbXM6IFRRdWlja0ZpbHRlcnNJdGVtW107XG5cbiAgLyoqIGNhbGxiYWNrIGZuLCBleGVjdXRlZCB3aGVuIGFuIGl0ZW0gaXMgY2xpY2tlZCAqL1xuICBvbkl0ZW1DbGljazogKGl0ZW06IFRRdWlja0ZpbHRlcnNJdGVtKSA9PiB2b2lkO1xufTtcblxuY29uc3QgbGlzdFN0eWxlcyA9IGNzc2BcbiAgYWxsOiB1bnNldDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGZsZXgtd3JhcDogd3JhcDtcbiAgZ2FwOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuYDtcblxuY29uc3QgbGlzdEl0ZW1TdHlsZXMgPSBjc3NgXG4gIGFsbDogdW5zZXQ7XG5gO1xuXG5mdW5jdGlvbiBRdWlja0ZpbHRlcnMoeyBpdGVtcywgb25JdGVtQ2xpY2sgfTogVFF1aWNrRmlsdGVyc1Byb3BzKSB7XG4gIHJldHVybiAoXG4gICAgPHVsIGNzcz17bGlzdFN0eWxlc30+XG4gICAgICB7aXRlbXMubWFwKChpdGVtKSA9PiAoXG4gICAgICAgIDxsaSBrZXk9e2l0ZW0uaWR9IGNzcz17bGlzdEl0ZW1TdHlsZXN9PlxuICAgICAgICAgIDxUYWdcbiAgICAgICAgICAgIHRvbmU9e2l0ZW0uaXNBY3RpdmUgPyAncHJpbWFyeScgOiAnc3VyZmFjZSd9XG4gICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBvbkl0ZW1DbGljayhpdGVtKX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7aXRlbS5sYWJlbH1cbiAgICAgICAgICA8L1RhZz5cbiAgICAgICAgPC9saT5cbiAgICAgICkpfVxuICAgIDwvdWw+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IFF1aWNrRmlsdGVycztcbiJdfQ== */",
|
|
16
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
17
|
+
};
|
|
18
|
+
function QuickFilters(_ref) {
|
|
19
|
+
let items = _ref.items,
|
|
20
|
+
onItemClick = _ref.onItemClick;
|
|
21
|
+
return jsx("ul", {
|
|
22
|
+
css: listStyles,
|
|
23
|
+
children: _mapInstanceProperty(items).call(items, item => jsx("li", {
|
|
24
|
+
css: listItemStyles,
|
|
25
|
+
children: jsx(Tag, {
|
|
26
|
+
tone: item.isActive ? 'primary' : 'surface',
|
|
27
|
+
onClick: () => onItemClick(item),
|
|
28
|
+
children: item.label
|
|
29
|
+
})
|
|
30
|
+
}, item.id))
|
|
6
31
|
});
|
|
7
32
|
}
|
|
8
33
|
|
|
9
34
|
// NOTE: This string will be replaced on build time with the package version.
|
|
10
|
-
var version = "19.
|
|
35
|
+
var version = "19.13.0";
|
|
11
36
|
|
|
12
37
|
export { QuickFilters as default, version };
|
|
@@ -1,8 +1,20 @@
|
|
|
1
|
+
export type TQuickFiltersItem = {
|
|
2
|
+
/** unique identifier for the item. */
|
|
3
|
+
id: string;
|
|
4
|
+
label: string;
|
|
5
|
+
isActive: boolean;
|
|
6
|
+
};
|
|
1
7
|
export type TQuickFiltersProps = {
|
|
2
8
|
/**
|
|
3
|
-
*
|
|
9
|
+
* collection of quick filter items
|
|
10
|
+
*
|
|
11
|
+
* @param item.id unique identifier for the item.
|
|
12
|
+
* @param item.label label to display
|
|
13
|
+
* @param item.isActive the current active state of the item
|
|
4
14
|
*/
|
|
5
|
-
|
|
15
|
+
items: TQuickFiltersItem[];
|
|
16
|
+
/** callback fn, executed when an item is clicked */
|
|
17
|
+
onItemClick: (item: TQuickFiltersItem) => void;
|
|
6
18
|
};
|
|
7
|
-
declare function QuickFilters(
|
|
19
|
+
declare function QuickFilters({ items, onItemClick }: TQuickFiltersProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
8
20
|
export default QuickFilters;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/quick-filters",
|
|
3
3
|
"description": "The `QuickFilters` component displays filter controls.",
|
|
4
|
-
"version": "19.
|
|
4
|
+
"version": "19.13.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
+
"@commercetools-uikit/design-system": "workspace:^",
|
|
25
|
+
"@commercetools-uikit/tag": "workspace:^",
|
|
24
26
|
"@emotion/react": "^11.10.5",
|
|
25
27
|
"@emotion/styled": "^11.10.5",
|
|
26
28
|
"prop-types": "15.8.1",
|