@mirai/ui 1.0.68 → 1.0.70
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 +65 -0
- package/build/components/Action/Action.stories.js +1 -1
- package/build/components/Action/Action.stories.js.map +1 -1
- package/build/components/Notification/Notification.js +10 -6
- package/build/components/Notification/Notification.js.map +1 -1
- package/build/components/Notification/Notification.module.css +28 -4
- package/build/components/Notification/Notification.stories.js +1 -0
- package/build/components/Notification/Notification.stories.js.map +1 -1
- package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap +72 -2
- package/build/components/Table/Table.Row.js +10 -8
- package/build/components/Table/Table.Row.js.map +1 -1
- package/build/components/Table/Table.js +36 -12
- package/build/components/Table/Table.js.map +1 -1
- package/build/components/Table/Table.module.css +25 -11
- package/build/components/Table/Table.stories.js +41 -35
- package/build/components/Table/Table.stories.js.map +1 -1
- package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +1419 -52
- package/build/theme/default.theme.css +5 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -703,6 +703,71 @@ const MyComponent = (props) => {
|
|
|
703
703
|
--mirai-ui-modal-shadow: var(--mirai-ui-shadow);
|
|
704
704
|
```
|
|
705
705
|
|
|
706
|
+
### Table
|
|
707
|
+
|
|
708
|
+
This component helps you to create a pure html table receiving the following props:
|
|
709
|
+
|
|
710
|
+
- `dataSource:arrayOf(shape)` The datasource of your model data schema
|
|
711
|
+
- `schema:shape` the model data schema
|
|
712
|
+
- `search:string` the query string you want use for filter the datasource
|
|
713
|
+
- `selected:arrayOf(dataSource.row)` if you want pre-select some rows in 1st render
|
|
714
|
+
- `onPress:function` executed once press in any row
|
|
715
|
+
- `onScroll:function` executed once scroll the table
|
|
716
|
+
- `onSelect:function` executed once select a determinate row
|
|
717
|
+
|
|
718
|
+
```jsx
|
|
719
|
+
import { InputText, Table } from '@mirai/ui';
|
|
720
|
+
|
|
721
|
+
const dataSource = [
|
|
722
|
+
{ username: 'jose', email: 'jose@mirai.com', year: 2012 },
|
|
723
|
+
{ username: 'mario/1', email: 'mario.1@mirai.com', year: 2005 },
|
|
724
|
+
{ username: 'carlos', email: 'carlos@mirai.com', year: 2012 },
|
|
725
|
+
{ username: 'svet', email: 'svet@mirai.com', year: 2021, action: <Button>View</Button> },
|
|
726
|
+
{ username: 'javi', email: 'hi@soyjavi.com', year: 2022, twitter: 'soyjavi' },
|
|
727
|
+
{ username: 'victor', email: 'victor@mirai.com', year: 2021 },
|
|
728
|
+
{ username: 'mario/2', email: 'mario.2@mirai.com', year: 2022 },
|
|
729
|
+
];
|
|
730
|
+
|
|
731
|
+
const schema = {
|
|
732
|
+
username: { label: 'User Name', type: 'text' },
|
|
733
|
+
email: { label: 'Email' },
|
|
734
|
+
year: { label: 'Year', type: 'number' },
|
|
735
|
+
twitter: { label: 'Twitter' },
|
|
736
|
+
action: { label: 'Action' },
|
|
737
|
+
};
|
|
738
|
+
|
|
739
|
+
const MyComponent = () => {
|
|
740
|
+
const [visible, setVisible] = useState(false);
|
|
741
|
+
|
|
742
|
+
<>
|
|
743
|
+
<InputText name="search" type="search" label="Search..." value={search} onChange={setSearch} />
|
|
744
|
+
|
|
745
|
+
<Table
|
|
746
|
+
{...{ dataSource, schema, search }}
|
|
747
|
+
search={search}
|
|
748
|
+
selected={[dataSource[4]]}
|
|
749
|
+
onPress={(row) => console.log('::onPress::', row)}
|
|
750
|
+
onSelect={(row) => console.log('::onSelect::', row)}
|
|
751
|
+
onScroll={(event) => console.log('::onScroll::', event)}
|
|
752
|
+
className={style.scrollview}
|
|
753
|
+
/>
|
|
754
|
+
</>;
|
|
755
|
+
};
|
|
756
|
+
```
|
|
757
|
+
|
|
758
|
+
**Theming variables**
|
|
759
|
+
|
|
760
|
+
```css
|
|
761
|
+
--mirai-ui-table-background: var(--mirai-ui-base);
|
|
762
|
+
--mirai-ui-table-border-color: var(--mirai-ui-content-border);
|
|
763
|
+
--mirai-ui-table-border-radius: var(--mirai-ui-space-XS);
|
|
764
|
+
--mirai-ui-table-color: var(--mirai-ui-content);
|
|
765
|
+
--mirai-ui-table-padding-x: var(--mirai-ui-space-M);
|
|
766
|
+
--mirai-ui-table-padding-y: var(--mirai-ui-space-M);
|
|
767
|
+
--mirai-ui-table-selected-background: var(--mirai-ui-accent-background);
|
|
768
|
+
--mirai-ui-table-selected-color: var(--mirai-ui-accent);
|
|
769
|
+
```
|
|
770
|
+
|
|
706
771
|
### Tooltip
|
|
707
772
|
|
|
708
773
|
This component helps you to create a tooltip over a determinate component receiving the following props:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","disabled","large","small","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Action } from './Action';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n children: 'children',\n disabled: false,\n large: false,\n small: false,\n tag: '
|
|
1
|
+
{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","disabled","large","small","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Action } from './Action';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n children: 'children',\n disabled: false,\n large: false,\n small: false,\n tag: 'button',\n wide: false,\n ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n onEnter: { action: 'onEnter' },\n onLeave: { action: 'onLeave' },\n onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE;AAAK,GACV,aAAa,EAAG,YAAY,CAC9B;AAEDT,KAAK,CAACU,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}
|
|
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var _helpers = require("../../helpers");
|
|
10
10
|
var _primitives = require("../../primitives");
|
|
11
11
|
var _NotificationModule = _interopRequireDefault(require("./Notification.module.css"));
|
|
12
|
-
var _excluded = ["children", "error", "inline", "small", "success", "warning", "onClose"];
|
|
12
|
+
var _excluded = ["children", "error", "inline", "large", "small", "success", "warning", "onClose"];
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
15
15
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
@@ -19,6 +19,7 @@ var Notification = function Notification(_ref) {
|
|
|
19
19
|
error = _ref.error,
|
|
20
20
|
_ref$inline = _ref.inline,
|
|
21
21
|
inline = _ref$inline === void 0 ? false : _ref$inline,
|
|
22
|
+
large = _ref.large,
|
|
22
23
|
small = _ref.small,
|
|
23
24
|
success = _ref.success,
|
|
24
25
|
warning = _ref.warning,
|
|
@@ -26,20 +27,22 @@ var Notification = function Notification(_ref) {
|
|
|
26
27
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
27
28
|
return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
|
|
28
29
|
row: true,
|
|
29
|
-
className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined, inline ? _NotificationModule.default.inline : _NotificationModule.default.outlined, inline && _NotificationModule.default.inline, small && _NotificationModule.default.small, others.className)
|
|
30
|
+
className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined, inline ? _NotificationModule.default.inline : _NotificationModule.default.outlined, inline && _NotificationModule.default.inline, large ? _NotificationModule.default.large : small && _NotificationModule.default.small, others.className)
|
|
30
31
|
}), /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
32
|
+
headline: large,
|
|
33
|
+
level: large ? 1 : undefined,
|
|
34
|
+
paragraph: small,
|
|
31
35
|
value: (0, _helpers.getIconState)({
|
|
32
36
|
error: error,
|
|
33
37
|
success: success,
|
|
34
38
|
warning: warning
|
|
35
39
|
}),
|
|
36
|
-
|
|
37
|
-
className: (0, _helpers.styles)(_NotificationModule.default.icon, small && _NotificationModule.default.small)
|
|
40
|
+
className: _NotificationModule.default.icon
|
|
38
41
|
}), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
39
42
|
small: small,
|
|
40
43
|
className: (0, _helpers.styles)(_NotificationModule.default.text, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined)
|
|
41
|
-
}, children), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
42
|
-
className: (0, _helpers.styles)(_NotificationModule.default.pressable, _NotificationModule.default.icon
|
|
44
|
+
}, children), !large && onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
45
|
+
className: (0, _helpers.styles)(_NotificationModule.default.pressable, _NotificationModule.default.icon),
|
|
43
46
|
onPress: onClose
|
|
44
47
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
45
48
|
value: _primitives.ICON.CLOSE,
|
|
@@ -52,6 +55,7 @@ Notification.propTypes = {
|
|
|
52
55
|
children: _propTypes.default.string.isRequired,
|
|
53
56
|
error: _propTypes.default.bool,
|
|
54
57
|
inline: _propTypes.default.bool,
|
|
58
|
+
large: _propTypes.default.bool,
|
|
55
59
|
small: _propTypes.default.bool,
|
|
56
60
|
success: _propTypes.default.bool,
|
|
57
61
|
warning: _propTypes.default.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","names":["Notification","children","error","inline","small","success","warning","onClose","others","styles","style","notification","undefined","outlined","className","getIconState","icon","text","pressable","ICON","CLOSE","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, inline = false, small, success, warning, onClose, ...others }) => (\n <View\n {...others}\n row\n className={styles(\n style.notification,\n error ? style.error : warning ? style.warning : success ? style.success : undefined,\n inline ? style.inline : style.outlined,\n inline && style.inline,\n small && style.small,\n others.className,\n )}\n >\n <Icon\n
|
|
1
|
+
{"version":3,"file":"Notification.js","names":["Notification","children","error","inline","large","small","success","warning","onClose","others","styles","style","notification","undefined","outlined","className","getIconState","icon","text","pressable","ICON","CLOSE","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, inline = false, large, small, success, warning, onClose, ...others }) => (\n <View\n {...others}\n row\n className={styles(\n style.notification,\n error ? style.error : warning ? style.warning : success ? style.success : undefined,\n inline ? style.inline : style.outlined,\n inline && style.inline,\n large ? style.large : small && style.small,\n others.className,\n )}\n >\n <Icon\n headline={large}\n level={large ? 1 : undefined}\n paragraph={small}\n value={getIconState({ error, success, warning })}\n className={style.icon}\n />\n <Text\n small={small}\n className={styles(\n style.text,\n error ? style.error : warning ? style.warning : success ? style.success : undefined,\n )}\n >\n {children}\n </Text>\n {!large && onClose && (\n <Pressable className={styles(style.pressable, style.icon)} onPress={onClose}>\n <Icon value={ICON.CLOSE} paragraph={small} />\n </Pressable>\n )}\n </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n children: PropTypes.string.isRequired,\n error: PropTypes.bool,\n inline: PropTypes.bool,\n large: PropTypes.bool,\n small: PropTypes.bool,\n success: PropTypes.bool,\n warning: PropTypes.bool,\n onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA8C;AAAA;AAAA;AAAA;AAAA;AAE9C,IAAMA,YAAY,GAAG,SAAfA,YAAY;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEC,KAAK,QAALA,KAAK;IAAA,mBAAEC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAEC,OAAO,QAAPA,OAAO;IAAEC,OAAO,QAAPA,OAAO;IAAKC,MAAM;EAAA,oBACzG,6BAAC,gBAAI,eACCA,MAAM;IACV,GAAG;IACH,SAAS,EAAE,IAAAC,eAAM,EACfC,2BAAK,CAACC,YAAY,EAClBV,KAAK,GAAGS,2BAAK,CAACT,KAAK,GAAGK,OAAO,GAAGI,2BAAK,CAACJ,OAAO,GAAGD,OAAO,GAAGK,2BAAK,CAACL,OAAO,GAAGO,SAAS,EACnFV,MAAM,GAAGQ,2BAAK,CAACR,MAAM,GAAGQ,2BAAK,CAACG,QAAQ,EACtCX,MAAM,IAAIQ,2BAAK,CAACR,MAAM,EACtBC,KAAK,GAAGO,2BAAK,CAACP,KAAK,GAAGC,KAAK,IAAIM,2BAAK,CAACN,KAAK,EAC1CI,MAAM,CAACM,SAAS;EAChB,iBAEF,6BAAC,gBAAI;IACH,QAAQ,EAAEX,KAAM;IAChB,KAAK,EAAEA,KAAK,GAAG,CAAC,GAAGS,SAAU;IAC7B,SAAS,EAAER,KAAM;IACjB,KAAK,EAAE,IAAAW,qBAAY,EAAC;MAAEd,KAAK,EAALA,KAAK;MAAEI,OAAO,EAAPA,OAAO;MAAEC,OAAO,EAAPA;IAAQ,CAAC,CAAE;IACjD,SAAS,EAAEI,2BAAK,CAACM;EAAK,EACtB,eACF,6BAAC,gBAAI;IACH,KAAK,EAAEZ,KAAM;IACb,SAAS,EAAE,IAAAK,eAAM,EACfC,2BAAK,CAACO,IAAI,EACVhB,KAAK,GAAGS,2BAAK,CAACT,KAAK,GAAGK,OAAO,GAAGI,2BAAK,CAACJ,OAAO,GAAGD,OAAO,GAAGK,2BAAK,CAACL,OAAO,GAAGO,SAAS;EACnF,GAEDZ,QAAQ,CACJ,EACN,CAACG,KAAK,IAAII,OAAO,iBAChB,6BAAC,qBAAS;IAAC,SAAS,EAAE,IAAAE,eAAM,EAACC,2BAAK,CAACQ,SAAS,EAAER,2BAAK,CAACM,IAAI,CAAE;IAAC,OAAO,EAAET;EAAQ,gBAC1E,6BAAC,gBAAI;IAAC,KAAK,EAAEY,gBAAI,CAACC,KAAM;IAAC,SAAS,EAAEhB;EAAM,EAAG,CAEhD,CACI;AAAA,CACR;AAAC;AAEFL,YAAY,CAACsB,WAAW,GAAG,wBAAwB;AAEnDtB,YAAY,CAACuB,SAAS,GAAG;EACvBtB,QAAQ,EAAEuB,kBAAS,CAACC,MAAM,CAACC,UAAU;EACrCxB,KAAK,EAAEsB,kBAAS,CAACG,IAAI;EACrBxB,MAAM,EAAEqB,kBAAS,CAACG,IAAI;EACtBvB,KAAK,EAAEoB,kBAAS,CAACG,IAAI;EACrBtB,KAAK,EAAEmB,kBAAS,CAACG,IAAI;EACrBrB,OAAO,EAAEkB,kBAAS,CAACG,IAAI;EACvBpB,OAAO,EAAEiB,kBAAS,CAACG,IAAI;EACvBnB,OAAO,EAAEgB,kBAAS,CAACI;AACrB,CAAC"}
|
|
@@ -11,6 +11,11 @@
|
|
|
11
11
|
width: 100%;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
.notification.large {
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
align-items: center;
|
|
17
|
+
}
|
|
18
|
+
|
|
14
19
|
.notification.outlined.small {
|
|
15
20
|
padding: var(--mirai-ui-notification-padding-small);
|
|
16
21
|
}
|
|
@@ -46,24 +51,43 @@
|
|
|
46
51
|
color: var(--mirai-ui-warning);
|
|
47
52
|
}
|
|
48
53
|
|
|
49
|
-
.notification:not(.small) .text {
|
|
54
|
+
.notification:not(.large):not(.small) .text {
|
|
50
55
|
margin-left: var(--mirai-ui-notification-padding);
|
|
51
56
|
margin-right: var(--mirai-ui-notification-padding);
|
|
52
57
|
}
|
|
53
58
|
|
|
59
|
+
.notification.large .text {
|
|
60
|
+
margin-bottom: var(--mirai-ui-notification-padding);
|
|
61
|
+
margin-top: var(--mirai-ui-notification-padding);
|
|
62
|
+
}
|
|
63
|
+
|
|
54
64
|
.notification.small .text {
|
|
55
65
|
margin-left: var(--mirai-ui-notification-padding-small);
|
|
56
66
|
margin-right: var(--mirai-ui-notification-padding-small);
|
|
57
67
|
}
|
|
58
68
|
|
|
59
|
-
.outlined .text {
|
|
69
|
+
.notification.outlined .text {
|
|
60
70
|
flex: 1;
|
|
61
71
|
}
|
|
62
72
|
|
|
63
|
-
.notification .
|
|
73
|
+
.notification.large:not(.outlined) .text {
|
|
74
|
+
color: var(--mirai-ui-content);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.notification:not(.large):not(.small) .icon {
|
|
64
78
|
margin-top: calc(calc(var(--mirai-ui-line-height-headline-3) - var(--mirai-ui-font-size-headline-3)) / 2);
|
|
65
79
|
}
|
|
66
80
|
|
|
67
|
-
.notification .icon
|
|
81
|
+
.notification.large .icon {
|
|
82
|
+
font-size: var(--mirai-ui-space-XL);
|
|
83
|
+
line-height: var(--mirai-ui-space-XL);
|
|
84
|
+
height: var(--mirai-ui-space-XL);
|
|
85
|
+
width: var(--mirai-ui-space-XL);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.notification.small .icon {
|
|
68
89
|
margin-top: calc(calc(var(--mirai-ui-line-height-small) - var(--mirai-ui-font-size-paragraph)) / 2);
|
|
69
90
|
}
|
|
91
|
+
|
|
92
|
+
.notification .icon.small {
|
|
93
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.stories.js","names":["title","Story","props","storyName","args","children","error","inline","small","success","warning","argTypes","onClose","action"],"sources":["../../../src/components/Notification/Notification.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Notification } from './Notification';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Notification {...props} />;\n\nStory.storyName = 'Notification';\n\nStory.args = {\n children: 'children',\n error: false,\n inline: false,\n small: false,\n success: false,\n warning: false,\n ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,0BAAY,EAAKA,KAAK,CAAI;AAAA;AAAC;AAE5DD,KAAK,CAACE,SAAS,GAAG,cAAc;AAEhCF,KAAK,CAACG,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,KAAK;EACZC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE;AAAK,GACb,aAAa,EAAG,YAAY,CAC9B;
|
|
1
|
+
{"version":3,"file":"Notification.stories.js","names":["title","Story","props","storyName","args","children","error","inline","large","small","success","warning","argTypes","onClose","action"],"sources":["../../../src/components/Notification/Notification.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Notification } from './Notification';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Notification {...props} />;\n\nStory.storyName = 'Notification';\n\nStory.args = {\n children: 'children',\n error: false,\n inline: false,\n large: false,\n small: false,\n success: false,\n warning: false,\n ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,0BAAY,EAAKA,KAAK,CAAI;AAAA;AAAC;AAE5DD,KAAK,CAACE,SAAS,GAAG,cAAc;AAEhCF,KAAK,CAACG,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,KAAK;EACZC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE;AAAK,GACb,aAAa,EAAG,YAAY,CAC9B;AAEDV,KAAK,CAACW,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU;AAC/B,CAAC"}
|
|
@@ -105,6 +105,76 @@ exports[`component:<Notification> prop:inline 1`] = `
|
|
|
105
105
|
</DocumentFragment>
|
|
106
106
|
`;
|
|
107
107
|
|
|
108
|
+
exports[`component:<Notification> prop:large & prop:inline 1`] = `
|
|
109
|
+
<DocumentFragment>
|
|
110
|
+
<div
|
|
111
|
+
class="view row notification inline inline large"
|
|
112
|
+
>
|
|
113
|
+
<span
|
|
114
|
+
class="icon headline-1 icon"
|
|
115
|
+
>
|
|
116
|
+
<svg
|
|
117
|
+
fill="currentColor"
|
|
118
|
+
height="1em"
|
|
119
|
+
stroke="currentColor"
|
|
120
|
+
stroke-width="0"
|
|
121
|
+
viewBox="0 0 24 24"
|
|
122
|
+
width="1em"
|
|
123
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
124
|
+
>
|
|
125
|
+
<path
|
|
126
|
+
d="M0 0h24v24H0V0z"
|
|
127
|
+
fill="none"
|
|
128
|
+
/>
|
|
129
|
+
<path
|
|
130
|
+
d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
|
|
131
|
+
/>
|
|
132
|
+
</svg>
|
|
133
|
+
</span>
|
|
134
|
+
<span
|
|
135
|
+
class="text paragraph text"
|
|
136
|
+
>
|
|
137
|
+
Lorem Ipsum...
|
|
138
|
+
</span>
|
|
139
|
+
</div>
|
|
140
|
+
</DocumentFragment>
|
|
141
|
+
`;
|
|
142
|
+
|
|
143
|
+
exports[`component:<Notification> prop:large 1`] = `
|
|
144
|
+
<DocumentFragment>
|
|
145
|
+
<div
|
|
146
|
+
class="view row notification outlined large"
|
|
147
|
+
>
|
|
148
|
+
<span
|
|
149
|
+
class="icon headline-1 icon"
|
|
150
|
+
>
|
|
151
|
+
<svg
|
|
152
|
+
fill="currentColor"
|
|
153
|
+
height="1em"
|
|
154
|
+
stroke="currentColor"
|
|
155
|
+
stroke-width="0"
|
|
156
|
+
viewBox="0 0 24 24"
|
|
157
|
+
width="1em"
|
|
158
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
159
|
+
>
|
|
160
|
+
<path
|
|
161
|
+
d="M0 0h24v24H0V0z"
|
|
162
|
+
fill="none"
|
|
163
|
+
/>
|
|
164
|
+
<path
|
|
165
|
+
d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
|
|
166
|
+
/>
|
|
167
|
+
</svg>
|
|
168
|
+
</span>
|
|
169
|
+
<span
|
|
170
|
+
class="text paragraph text"
|
|
171
|
+
>
|
|
172
|
+
Lorem Ipsum...
|
|
173
|
+
</span>
|
|
174
|
+
</div>
|
|
175
|
+
</DocumentFragment>
|
|
176
|
+
`;
|
|
177
|
+
|
|
108
178
|
exports[`component:<Notification> prop:onClose 1`] = `
|
|
109
179
|
<DocumentFragment>
|
|
110
180
|
<div
|
|
@@ -171,7 +241,7 @@ exports[`component:<Notification> prop:small & prop:inline 1`] = `
|
|
|
171
241
|
class="view row notification inline inline small"
|
|
172
242
|
>
|
|
173
243
|
<span
|
|
174
|
-
class="icon paragraph icon
|
|
244
|
+
class="icon paragraph icon"
|
|
175
245
|
>
|
|
176
246
|
<svg
|
|
177
247
|
fill="currentColor"
|
|
@@ -206,7 +276,7 @@ exports[`component:<Notification> prop:small 1`] = `
|
|
|
206
276
|
class="view row notification outlined small"
|
|
207
277
|
>
|
|
208
278
|
<span
|
|
209
|
-
class="icon paragraph icon
|
|
279
|
+
class="icon paragraph icon"
|
|
210
280
|
>
|
|
211
281
|
<svg
|
|
212
282
|
fill="currentColor"
|
|
@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
|
|
|
11
11
|
var _primitives = require("../../primitives");
|
|
12
12
|
var _InputOption = require("../InputOption");
|
|
13
13
|
var _TableModule = _interopRequireDefault(require("./Table.module.css"));
|
|
14
|
-
var _excluded = ["dataSource", "
|
|
14
|
+
var _excluded = ["checked", "dataSource", "indeterminate", "schema", "sort", "onPress", "onSelect", "onSort"];
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
17
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -21,9 +21,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
21
21
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
22
22
|
var CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];
|
|
23
23
|
var TableRow = function TableRow(_ref) {
|
|
24
|
-
var
|
|
24
|
+
var checked = _ref.checked,
|
|
25
|
+
dataSource = _ref.dataSource,
|
|
26
|
+
indeterminate = _ref.indeterminate,
|
|
25
27
|
schema = _ref.schema,
|
|
26
|
-
selected = _ref.selected,
|
|
27
28
|
_ref$sort = _ref.sort,
|
|
28
29
|
sort = _ref$sort === void 0 ? {} : _ref$sort,
|
|
29
30
|
onPress = _ref.onPress,
|
|
@@ -43,7 +44,7 @@ var TableRow = function TableRow(_ref) {
|
|
|
43
44
|
};
|
|
44
45
|
return /*#__PURE__*/_react.default.createElement("tr", _extends({}, others, {
|
|
45
46
|
role: "tr",
|
|
46
|
-
className: (0, _helpers.styles)(
|
|
47
|
+
className: (0, _helpers.styles)(checked && _TableModule.default.selected, onPress && _TableModule.default.onPress)
|
|
47
48
|
}), fields.map(function (field, index) {
|
|
48
49
|
var _React$createElement;
|
|
49
50
|
return /*#__PURE__*/_react.default.createElement(tag, (_React$createElement = {}, _defineProperty(_React$createElement, 'data-testid', testId ? "".concat(testId, "-").concat(field) : undefined), _defineProperty(_React$createElement, "key", field), _defineProperty(_React$createElement, "onClick", function onClick(event) {
|
|
@@ -52,9 +53,9 @@ var TableRow = function TableRow(_ref) {
|
|
|
52
53
|
row: true,
|
|
53
54
|
tag: "span"
|
|
54
55
|
}, onSelect && index === 0 && /*#__PURE__*/_react.default.createElement(_InputOption.InputOption, {
|
|
55
|
-
checked:
|
|
56
|
+
checked: checked,
|
|
56
57
|
"data-testid": testId ? "".concat(testId, "-checkbox") : undefined,
|
|
57
|
-
|
|
58
|
+
indeterminate: indeterminate,
|
|
58
59
|
name: "checkbox",
|
|
59
60
|
className: _TableModule.default.checkbox,
|
|
60
61
|
onChange: function onChange(event) {
|
|
@@ -62,16 +63,17 @@ var TableRow = function TableRow(_ref) {
|
|
|
62
63
|
}
|
|
63
64
|
}), isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
64
65
|
value: sort[field] ? _primitives.ICON.DOWN : _primitives.ICON.UP,
|
|
65
|
-
className: sort[field] === undefined && _TableModule.default.
|
|
66
|
+
className: (0, _helpers.styles)(_TableModule.default.icon, sort[field] === undefined && _TableModule.default.hide)
|
|
66
67
|
})));
|
|
67
68
|
}));
|
|
68
69
|
};
|
|
69
70
|
exports.TableRow = TableRow;
|
|
70
71
|
TableRow.displayName = 'Table:Row';
|
|
71
72
|
TableRow.propTypes = {
|
|
73
|
+
checked: _propTypes.default.bool,
|
|
72
74
|
dataSource: _propTypes.default.shape({}),
|
|
75
|
+
indeterminate: _propTypes.default.bool,
|
|
73
76
|
schema: _propTypes.default.shape({}).isRequired,
|
|
74
|
-
selected: _propTypes.default.bool,
|
|
75
77
|
sort: _propTypes.default.shape({}),
|
|
76
78
|
onPress: _propTypes.default.func,
|
|
77
79
|
onSelect: _propTypes.default.func,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","TableRow","dataSource","
|
|
1
|
+
{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","TableRow","checked","dataSource","indeterminate","schema","sort","onPress","onSelect","onSort","others","isHead","undefined","fields","Object","keys","tag","testId","handlePress","field","event","target","type","includes","styles","style","selected","map","index","React","createElement","checkbox","label","ICON","DOWN","UP","icon","hide","displayName","propTypes","PropTypes","bool","shape","isRequired","func"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport style from './Table.module.css';\n\nconst CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];\n\nconst TableRow = ({ checked, dataSource, indeterminate, schema, sort = {}, onPress, onSelect, onSort, ...others }) => {\n const isHead = dataSource === undefined;\n const fields = Object.keys(schema);\n const tag = isHead ? 'th' : 'td';\n const { ['data-testid']: testId } = others;\n\n const handlePress = (field, event) => {\n const { target: { type } = {} } = event;\n if (CUSTOM_EVENT_TYPES.includes(type)) return;\n\n isHead ? onSort(field) : onPress && onPress(dataSource, event);\n };\n\n return (\n <tr {...others} role=\"tr\" className={styles(checked && style.selected, onPress && style.onPress)}>\n {fields.map((field, index) =>\n React.createElement(\n tag,\n {\n ['data-testid']: testId ? `${testId}-${field}` : undefined,\n key: field,\n onClick: (event) => handlePress(field, event),\n },\n <View row tag=\"span\">\n {onSelect && index === 0 && (\n <InputOption\n checked={checked}\n data-testid={testId ? `${testId}-checkbox` : undefined}\n indeterminate={indeterminate}\n name=\"checkbox\"\n className={style.checkbox}\n onChange={(event) => onSelect(dataSource, event)}\n />\n )}\n {isHead ? schema[field].label : dataSource[field]}\n {isHead && onSort && (\n <Icon\n value={sort[field] ? ICON.DOWN : ICON.UP}\n className={styles(style.icon, sort[field] === undefined && style.hide)}\n />\n )}\n </View>,\n ),\n )}\n </tr>\n );\n};\n\nTableRow.displayName = 'Table:Row';\n\nTableRow.propTypes = {\n checked: PropTypes.bool,\n dataSource: PropTypes.shape({}),\n indeterminate: PropTypes.bool,\n schema: PropTypes.shape({}).isRequired,\n sort: PropTypes.shape({}),\n onPress: PropTypes.func,\n onSelect: PropTypes.func,\n onSort: PropTypes.func,\n};\n\nexport { TableRow };\n"],"mappings":"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"}
|
|
@@ -8,14 +8,17 @@ exports.Table = void 0;
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
|
+
var _primitives = require("../../primitives");
|
|
11
12
|
var _helpers2 = require("./helpers");
|
|
12
13
|
var _TableModule = _interopRequireDefault(require("./Table.module.css"));
|
|
13
14
|
var _Table = require("./Table.Row");
|
|
14
|
-
var _excluded = ["dataSource", "schema", "search", "onPress", "onSelect"];
|
|
15
|
+
var _excluded = ["dataSource", "inline", "schema", "search", "selected", "onPress", "onScroll", "onSelect"];
|
|
15
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
17
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
19
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
20
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
19
22
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
20
23
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
21
24
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
@@ -30,12 +33,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
30
33
|
var Table = function Table(_ref) {
|
|
31
34
|
var _ref$dataSource = _ref.dataSource,
|
|
32
35
|
dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
|
|
36
|
+
_ref$inline = _ref.inline,
|
|
37
|
+
inline = _ref$inline === void 0 ? true : _ref$inline,
|
|
33
38
|
schema = _ref.schema,
|
|
34
39
|
search = _ref.search,
|
|
40
|
+
_ref$selected = _ref.selected,
|
|
41
|
+
propSelected = _ref$selected === void 0 ? [] : _ref$selected,
|
|
35
42
|
onPress = _ref.onPress,
|
|
43
|
+
onScroll = _ref.onScroll,
|
|
36
44
|
onSelect = _ref.onSelect,
|
|
37
45
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
38
|
-
var _useState = (0, _react.useState)(
|
|
46
|
+
var _useState = (0, _react.useState)(propSelected),
|
|
39
47
|
_useState2 = _slicedToArray(_useState, 2),
|
|
40
48
|
selected = _useState2[0],
|
|
41
49
|
setSelected = _useState2[1];
|
|
@@ -43,14 +51,21 @@ var Table = function Table(_ref) {
|
|
|
43
51
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
44
52
|
sort = _useState4[0],
|
|
45
53
|
setSort = _useState4[1];
|
|
46
|
-
var handleSelect = function handleSelect(row) {
|
|
54
|
+
var handleSelect = function handleSelect(row, event) {
|
|
47
55
|
setSelected(function () {
|
|
48
56
|
var exists = selected.includes(row);
|
|
49
57
|
var next = selected.filter(function (item) {
|
|
50
58
|
return item !== row;
|
|
51
59
|
});
|
|
52
60
|
if (!exists) next.push(row);
|
|
53
|
-
onSelect(next);
|
|
61
|
+
onSelect(next, event);
|
|
62
|
+
return next;
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
var handleHeadSelect = function handleHeadSelect(row, event) {
|
|
66
|
+
setSelected(function () {
|
|
67
|
+
var next = selected.length !== dataSource.length ? dataSource : [];
|
|
68
|
+
onSelect(next, event);
|
|
54
69
|
return next;
|
|
55
70
|
});
|
|
56
71
|
};
|
|
@@ -58,13 +73,19 @@ var Table = function Table(_ref) {
|
|
|
58
73
|
setSort(sort[field] === undefined ? _defineProperty({}, field, true) : sort[field] ? _defineProperty({}, field, false) : {});
|
|
59
74
|
};
|
|
60
75
|
var testId = others['data-testid'];
|
|
61
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
62
|
-
|
|
76
|
+
return /*#__PURE__*/_react.default.createElement(onScroll ? _primitives.ScrollView : !inline ? _primitives.View : _react.Fragment, onScroll || !inline ? _objectSpread(_objectSpread({}, others), {}, {
|
|
77
|
+
onScroll: onScroll,
|
|
78
|
+
className: (0, _helpers.styles)(!inline && _TableModule.default.outlined, others.className)
|
|
79
|
+
}) : undefined, /*#__PURE__*/_react.default.createElement("table", _extends({}, !onScroll ? others : undefined, {
|
|
80
|
+
className: (0, _helpers.styles)(_TableModule.default.table, !onScroll && !inline && others.className)
|
|
63
81
|
}), /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
|
|
82
|
+
checked: selected.length === dataSource.length,
|
|
83
|
+
indeterminate: selected.length > 0,
|
|
64
84
|
schema: schema,
|
|
65
85
|
sort: sort,
|
|
66
|
-
onSelect: onSelect ?
|
|
67
|
-
onSort: handleSort
|
|
86
|
+
onSelect: onSelect ? handleHeadSelect : undefined,
|
|
87
|
+
onSort: handleSort,
|
|
88
|
+
"data-testid": testId ? "".concat(testId, "-head") : undefined
|
|
68
89
|
})), /*#__PURE__*/_react.default.createElement("tbody", null, (0, _react.useMemo)(function () {
|
|
69
90
|
return (0, _helpers2.select)(dataSource, {
|
|
70
91
|
search: search,
|
|
@@ -72,22 +93,25 @@ var Table = function Table(_ref) {
|
|
|
72
93
|
});
|
|
73
94
|
}, [dataSource, search, sort]).map(function (row, index) {
|
|
74
95
|
return /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
|
|
75
|
-
|
|
96
|
+
checked: selected.includes(row),
|
|
76
97
|
dataSource: row,
|
|
77
98
|
key: index,
|
|
78
99
|
schema: schema,
|
|
79
|
-
selected: selected.includes(row),
|
|
80
100
|
onPress: onPress,
|
|
81
|
-
onSelect: onSelect ? handleSelect : undefined
|
|
101
|
+
onSelect: onSelect ? handleSelect : undefined,
|
|
102
|
+
"data-testid": testId ? "".concat(testId, "-").concat(index) : undefined
|
|
82
103
|
});
|
|
83
|
-
})));
|
|
104
|
+
}))));
|
|
84
105
|
};
|
|
85
106
|
exports.Table = Table;
|
|
86
107
|
Table.propTypes = {
|
|
87
108
|
dataSource: _propTypes.default.arrayOf(_propTypes.default.shape({})),
|
|
109
|
+
inline: _propTypes.default.bool,
|
|
88
110
|
schema: _propTypes.default.shape({}).isRequired,
|
|
89
111
|
search: _propTypes.default.string,
|
|
112
|
+
selected: _propTypes.default.arrayOf(_propTypes.default.shape()),
|
|
90
113
|
onPress: _propTypes.default.func,
|
|
114
|
+
onScroll: _propTypes.default.func,
|
|
91
115
|
onSelect: _propTypes.default.func
|
|
92
116
|
};
|
|
93
117
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","names":["Table","dataSource","schema","search","onPress","onSelect","others","useState","
|
|
1
|
+
{"version":3,"file":"Table.js","names":["Table","dataSource","inline","schema","search","selected","propSelected","onPress","onScroll","onSelect","others","useState","setSelected","sort","setSort","handleSelect","row","event","exists","includes","next","filter","item","push","handleHeadSelect","length","handleSort","field","undefined","testId","React","createElement","ScrollView","View","Fragment","className","styles","style","outlined","table","useMemo","select","map","index","propTypes","PropTypes","arrayOf","shape","bool","isRequired","string","func"],"sources":["../../../src/components/Table/Table.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { Fragment, useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ScrollView, View } from '../../primitives';\nimport { select } from './helpers';\nimport style from './Table.module.css';\nimport { TableRow } from './Table.Row';\n\nexport const Table = ({\n dataSource = [],\n inline = true,\n schema,\n search,\n selected: propSelected = [],\n onPress,\n onScroll,\n onSelect,\n ...others\n}) => {\n const [selected, setSelected] = useState(propSelected);\n const [sort, setSort] = useState({});\n\n const handleSelect = (row, event) => {\n setSelected(() => {\n const exists = selected.includes(row);\n const next = selected.filter((item) => item !== row);\n if (!exists) next.push(row);\n\n onSelect(next, event);\n\n return next;\n });\n };\n\n const handleHeadSelect = (row, event) => {\n setSelected(() => {\n const next = selected.length !== dataSource.length ? dataSource : [];\n onSelect(next, event);\n\n return next;\n });\n };\n\n const handleSort = (field) => {\n setSort(sort[field] === undefined ? { [field]: true } : sort[field] ? { [field]: false } : {});\n };\n\n const { ['data-testid']: testId } = others;\n\n return React.createElement(\n onScroll ? ScrollView : !inline ? View : Fragment,\n onScroll || !inline\n ? { ...others, onScroll, className: styles(!inline && style.outlined, others.className) }\n : undefined,\n <table\n {...(!onScroll ? others : undefined)}\n className={styles(style.table, !onScroll && !inline && others.className)}\n >\n <thead>\n <TableRow\n checked={selected.length === dataSource.length}\n indeterminate={selected.length > 0}\n schema={schema}\n sort={sort}\n onSelect={onSelect ? handleHeadSelect : undefined}\n onSort={handleSort}\n data-testid={testId ? `${testId}-head` : undefined}\n />\n </thead>\n <tbody>\n {useMemo(() => select(dataSource, { search, sort }), [dataSource, search, sort]).map((row, index) => (\n <TableRow\n checked={selected.includes(row)}\n dataSource={row}\n key={index}\n schema={schema}\n onPress={onPress}\n onSelect={onSelect ? handleSelect : undefined}\n data-testid={testId ? `${testId}-${index}` : undefined}\n />\n ))}\n </tbody>\n </table>,\n );\n};\n\nTable.propTypes = {\n dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n inline: PropTypes.bool,\n schema: PropTypes.shape({}).isRequired,\n search: PropTypes.string,\n selected: PropTypes.arrayOf(PropTypes.shape()),\n onPress: PropTypes.func,\n onScroll: PropTypes.func,\n onSelect: PropTypes.func,\n};\n"],"mappings":"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"}
|