@mirai/ui 1.0.130 → 1.0.131
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 +1 -0
- package/build/components/InputText/InputText.js +1 -1
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/Table/Table.Row.js +9 -11
- package/build/components/Table/Table.Row.js.map +1 -1
- package/build/components/Table/Table.module.css +23 -5
- package/build/components/Table/Table.stories.js +32 -7
- package/build/components/Table/Table.stories.js.map +1 -1
- package/build/components/Table/Table.stories.module.css +8 -4
- package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +746 -1906
- package/build/primitives/Icon/Icon.constants.js +3 -1
- package/build/primitives/Icon/Icon.constants.js.map +1 -1
- package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap +30 -0
- package/build/theme/default.theme.css +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -779,6 +779,7 @@ const MyComponent = () => {
|
|
|
779
779
|
--mirai-ui-table-border-color: var(--mirai-ui-content-border);
|
|
780
780
|
--mirai-ui-table-border-radius: var(--mirai-ui-space-XS);
|
|
781
781
|
--mirai-ui-table-color: var(--mirai-ui-content);
|
|
782
|
+
--mirai-ui-table-color-disabled: var(--mirai-ui-content-border);
|
|
782
783
|
--mirai-ui-table-padding-x: var(--mirai-ui-space-M);
|
|
783
784
|
--mirai-ui-table-padding-y: var(--mirai-ui-space-M);
|
|
784
785
|
--mirai-ui-table-selected-background: var(--mirai-ui-accent-background);
|
|
@@ -102,7 +102,7 @@ var InputText = function InputText(_ref) {
|
|
|
102
102
|
onChange: handleChange,
|
|
103
103
|
onEnter: handleEnter,
|
|
104
104
|
onLeave: handleLeave
|
|
105
|
-
}))), (is.password || is.search) && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
105
|
+
}))), (is.password || is.search && has.value) && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
106
106
|
tabIndex: -1,
|
|
107
107
|
onPress: handlePress
|
|
108
108
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","bool","string","func","multiLine","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n disabled,\n error,\n hint,\n icon,\n label,\n showState = true,\n success,\n type,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [password, setPassword] = useState(true);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const handlePress = (event) => {\n if (is.password) setPassword(!password);\n else if (is.search) onChange(undefined, event);\n };\n\n const is = {\n password: type === 'password',\n search: type === 'search',\n };\n\n const has = {\n icon: !!icon || is.search,\n label: !!label,\n value: others.value !== undefined && others.value?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View className={styles(style.inputContainer, others.className)} style={others.style}>\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n error && style.error,\n focus && !error && style.focus,\n )}\n >\n {has.icon && (\n <Icon\n value={icon || ICON.SEARCH}\n className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n />\n )}\n <View wide className={style.content}>\n {label && <Label {...{ disabled, error, focus, label, required: others.required, value: others.value }} />}\n\n <Input\n {...others}\n disabled={disabled}\n type={!is.password || password ? type : 'text'}\n value={others.value || ''}\n className={styles(style.input, has.label && style.withLabel)}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n </View>\n\n {(is.password || is.search) && !disabled && (\n <Pressable tabIndex={-1} onPress={handlePress}>\n <Icon\n value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n className={style.icon}\n />\n </Pressable>\n )}\n\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.func,\n label: PropTypes.string,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n showState: PropTypes.bool,\n success: PropTypes.bool,\n type: PropTypes.string,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","bool","string","func","multiLine","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n disabled,\n error,\n hint,\n icon,\n label,\n showState = true,\n success,\n type,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [password, setPassword] = useState(true);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const handlePress = (event) => {\n if (is.password) setPassword(!password);\n else if (is.search) onChange(undefined, event);\n };\n\n const is = {\n password: type === 'password',\n search: type === 'search',\n };\n\n const has = {\n icon: !!icon || is.search,\n label: !!label,\n value: others.value !== undefined && others.value?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View className={styles(style.inputContainer, others.className)} style={others.style}>\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n error && style.error,\n focus && !error && style.focus,\n )}\n >\n {has.icon && (\n <Icon\n value={icon || ICON.SEARCH}\n className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n />\n )}\n <View wide className={style.content}>\n {label && <Label {...{ disabled, error, focus, label, required: others.required, value: others.value }} />}\n\n <Input\n {...others}\n disabled={disabled}\n type={!is.password || password ? type : 'text'}\n value={others.value || ''}\n className={styles(style.input, has.label && style.withLabel)}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n </View>\n\n {(is.password || (is.search && has.value)) && !disabled && (\n <Pressable tabIndex={-1} onPress={handlePress}>\n <Icon\n value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n className={style.icon}\n />\n </Pressable>\n )}\n\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.func,\n label: PropTypes.string,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n showState: PropTypes.bool,\n success: PropTypes.bool,\n type: PropTypes.string,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}
|
|
@@ -32,8 +32,6 @@ var TableRow = function TableRow(_ref) {
|
|
|
32
32
|
onSort = _ref.onSort,
|
|
33
33
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
34
34
|
var isHead = dataSource === undefined;
|
|
35
|
-
var fields = Object.keys(schema);
|
|
36
|
-
var tag = isHead ? 'th' : 'td';
|
|
37
35
|
var testId = others['data-testid'];
|
|
38
36
|
var handlePress = function handlePress(field, event) {
|
|
39
37
|
var _event$target = event.target;
|
|
@@ -45,16 +43,16 @@ var TableRow = function TableRow(_ref) {
|
|
|
45
43
|
return /*#__PURE__*/_react.default.createElement("tr", _extends({}, others, {
|
|
46
44
|
role: "tr",
|
|
47
45
|
className: (0, _helpers.styles)(checked && _TableModule.default.selected, onPress && _TableModule.default.onPress)
|
|
48
|
-
}),
|
|
46
|
+
}), Object.keys(schema).filter(function (field) {
|
|
47
|
+
return schema[field].type !== 'hidden';
|
|
48
|
+
}).map(function (field, index) {
|
|
49
49
|
var _React$createElement;
|
|
50
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
50
|
+
return /*#__PURE__*/_react.default.createElement(isHead ? 'th' : 'td', (_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) {
|
|
51
51
|
return handlePress(field, event);
|
|
52
52
|
}), _React$createElement), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
53
53
|
forceRow: true,
|
|
54
|
-
tag: "span"
|
|
55
|
-
|
|
56
|
-
forceRow: true,
|
|
57
|
-
className: _TableModule.default.checkboxColumn
|
|
54
|
+
tag: "span",
|
|
55
|
+
className: (0, _helpers.styles)(_TableModule.default.column, onSelect && index === 0 && _TableModule.default.selectable, !isHead && !(onSelect && index === 0) && _TableModule.default[schema[field].type || 'text'])
|
|
58
56
|
}, onSelect && index === 0 && /*#__PURE__*/_react.default.createElement(_InputOption.InputOption, {
|
|
59
57
|
checked: checked,
|
|
60
58
|
"data-testid": testId ? "".concat(testId, "-checkbox") : undefined,
|
|
@@ -64,9 +62,9 @@ var TableRow = function TableRow(_ref) {
|
|
|
64
62
|
onChange: function onChange(event) {
|
|
65
63
|
return onSelect(dataSource, event);
|
|
66
64
|
}
|
|
67
|
-
}), isHead ? schema[field].label : dataSource[field]
|
|
68
|
-
value: sort[field] ? _primitives.ICON.
|
|
69
|
-
className: (0, _helpers.styles)(_TableModule.default.icon, sort[field] === undefined && _TableModule.default.
|
|
65
|
+
}), isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
66
|
+
value: sort[field] === false ? _primitives.ICON.UP : _primitives.ICON.DOWN,
|
|
67
|
+
className: (0, _helpers.styles)(_TableModule.default.icon, sort[field] === undefined && _TableModule.default.disabled)
|
|
70
68
|
})));
|
|
71
69
|
}));
|
|
72
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","TableRow","checked","dataSource","indeterminate","schema","sort","onPress","onSelect","onSort","others","isHead","undefined","
|
|
1
|
+
{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","TableRow","checked","dataSource","indeterminate","schema","sort","onPress","onSelect","onSort","others","isHead","undefined","testId","handlePress","field","event","target","type","includes","styles","style","selected","Object","keys","filter","map","index","React","createElement","column","selectable","checkbox","label","ICON","UP","DOWN","icon","disabled","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 { ['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 {Object.keys(schema)\n .filter((field) => schema[field].type !== 'hidden')\n .map((field, index) =>\n React.createElement(\n isHead ? 'th' : 'td',\n {\n ['data-testid']: testId ? `${testId}-${field}` : undefined,\n key: field,\n onClick: (event) => handlePress(field, event),\n },\n <View\n forceRow\n tag=\"span\"\n className={styles(\n style.column,\n onSelect && index === 0 && style.selectable,\n !isHead && !(onSelect && index === 0) && style[schema[field].type || 'text'],\n )}\n >\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\n {isHead ? schema[field].label : dataSource[field]}\n\n {isHead && onSort && (\n <Icon\n value={sort[field] === false ? ICON.UP : ICON.DOWN}\n className={styles(style.icon, sort[field] === undefined && style.disabled)}\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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"}
|
|
@@ -45,6 +45,10 @@
|
|
|
45
45
|
border-bottom: solid var(--mirai-ui-border-width) var(--mirai-ui-table-border-color);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
.table th {
|
|
49
|
+
user-select: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
48
52
|
.table th,
|
|
49
53
|
.table td {
|
|
50
54
|
padding: var(--mirai-ui-table-padding-y) var(--mirai-ui-table-padding-x) var(--mirai-ui-table-padding-y) 0;
|
|
@@ -64,15 +68,29 @@
|
|
|
64
68
|
}
|
|
65
69
|
|
|
66
70
|
.table th .icon {
|
|
67
|
-
|
|
71
|
+
/* ? TODO: Ask design */
|
|
72
|
+
/* margin-left: auto; */
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.table th .icon.disabled {
|
|
76
|
+
color: var(--mirai-ui-table-color-disabled);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.table th .column,
|
|
80
|
+
.table .column.selectable {
|
|
81
|
+
gap: calc(var(--mirai-ui-table-padding-x) / 2);
|
|
68
82
|
}
|
|
69
83
|
|
|
70
|
-
.table
|
|
71
|
-
|
|
84
|
+
.table .column.text {
|
|
85
|
+
display: block;
|
|
86
|
+
white-space: nowrap;
|
|
87
|
+
overflow: hidden;
|
|
88
|
+
text-overflow: ellipsis;
|
|
72
89
|
}
|
|
73
90
|
|
|
74
|
-
.table .
|
|
75
|
-
|
|
91
|
+
.table .column.number {
|
|
92
|
+
float: right;
|
|
93
|
+
width: fit-content;
|
|
76
94
|
}
|
|
77
95
|
|
|
78
96
|
.table .checkbox {
|
|
@@ -32,6 +32,13 @@ var Story = function Story(props) {
|
|
|
32
32
|
_useState2 = _slicedToArray(_useState, 2),
|
|
33
33
|
selected = _useState2[0],
|
|
34
34
|
setSelected = _useState2[1];
|
|
35
|
+
var _useState3 = (0, _react.useState)(),
|
|
36
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
37
|
+
search = _useState4[0],
|
|
38
|
+
setSearch = _useState4[1];
|
|
39
|
+
(0, _react.useEffect)(function () {
|
|
40
|
+
setSearch(props.search);
|
|
41
|
+
}, [props.search]);
|
|
35
42
|
var handleScroll = function handleScroll() {
|
|
36
43
|
var _console;
|
|
37
44
|
for (var _len = arguments.length, others = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
@@ -54,19 +61,26 @@ var Story = function Story(props) {
|
|
|
54
61
|
(_console3 = console).log.apply(_console3, ['<Table>::onSelect'].concat(others));
|
|
55
62
|
setSelected.apply(void 0, others);
|
|
56
63
|
};
|
|
57
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
64
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.InputText, {
|
|
65
|
+
name: "search",
|
|
66
|
+
placeholder: "search...",
|
|
67
|
+
type: "search",
|
|
68
|
+
value: search,
|
|
69
|
+
onChange: setSearch
|
|
70
|
+
}), /*#__PURE__*/_react.default.createElement(_Table.Table, _extends({}, props, {
|
|
71
|
+
search: search,
|
|
58
72
|
selected: selected,
|
|
59
73
|
onPress: handlePress,
|
|
60
74
|
onScroll: handleScroll,
|
|
61
75
|
onSelect: handleSelect,
|
|
62
|
-
className: _TableStoriesModule.default.
|
|
63
|
-
}));
|
|
76
|
+
className: _TableStoriesModule.default.table
|
|
77
|
+
})));
|
|
64
78
|
};
|
|
65
79
|
exports.Story = Story;
|
|
66
80
|
var dataSource = [{
|
|
67
81
|
username: 'jose',
|
|
68
82
|
email: 'jose@mirai.com',
|
|
69
|
-
year:
|
|
83
|
+
year: 1,
|
|
70
84
|
tags: ['es', 'en', 'ja'].map(function (language) {
|
|
71
85
|
return /*#__PURE__*/_react.default.createElement(_.Text, {
|
|
72
86
|
key: language,
|
|
@@ -75,6 +89,7 @@ var dataSource = [{
|
|
|
75
89
|
className: _TableStoriesModule.default.tag
|
|
76
90
|
}, language);
|
|
77
91
|
}),
|
|
92
|
+
languages: ['spanish', 'english', 'japanese'],
|
|
78
93
|
action: null
|
|
79
94
|
}, {
|
|
80
95
|
username: 'mario/1',
|
|
@@ -97,6 +112,7 @@ var dataSource = [{
|
|
|
97
112
|
className: _TableStoriesModule.default.tag
|
|
98
113
|
}, language);
|
|
99
114
|
}),
|
|
115
|
+
languages: ['english'],
|
|
100
116
|
year: 2021,
|
|
101
117
|
twitter: undefined,
|
|
102
118
|
action: /*#__PURE__*/_react.default.createElement(_.Button, {
|
|
@@ -107,7 +123,8 @@ var dataSource = [{
|
|
|
107
123
|
email: 'hi@soyjavi.com',
|
|
108
124
|
tags: null,
|
|
109
125
|
year: 2022,
|
|
110
|
-
twitter: 'soyjavi'
|
|
126
|
+
twitter: 'soyjavi',
|
|
127
|
+
bio: "Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world."
|
|
111
128
|
}, {
|
|
112
129
|
username: 'victor',
|
|
113
130
|
email: 'victor@mirai.com',
|
|
@@ -133,7 +150,11 @@ Story.args = (_Story$args = {
|
|
|
133
150
|
},
|
|
134
151
|
tags: {
|
|
135
152
|
label: 'Tags',
|
|
136
|
-
|
|
153
|
+
type: 'component'
|
|
154
|
+
},
|
|
155
|
+
languages: {
|
|
156
|
+
label: 'Languages (hidden)',
|
|
157
|
+
type: 'hidden'
|
|
137
158
|
},
|
|
138
159
|
year: {
|
|
139
160
|
label: 'Year',
|
|
@@ -142,8 +163,12 @@ Story.args = (_Story$args = {
|
|
|
142
163
|
twitter: {
|
|
143
164
|
label: 'Twitter'
|
|
144
165
|
},
|
|
166
|
+
bio: {
|
|
167
|
+
label: 'Biography'
|
|
168
|
+
},
|
|
145
169
|
action: {
|
|
146
|
-
label: 'Action'
|
|
170
|
+
label: 'Action',
|
|
171
|
+
type: 'component'
|
|
147
172
|
}
|
|
148
173
|
},
|
|
149
174
|
search: ''
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.stories.js","names":["title","Story","props","useState","selected","setSelected","handleScroll","others","console","log","handlePress","handleSelect","style","
|
|
1
|
+
{"version":3,"file":"Table.stories.js","names":["title","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","console","log","handlePress","handleSelect","style","table","dataSource","username","email","year","tags","map","language","tag","languages","action","twitter","undefined","bio","storyName","args","inline","schema","label","type","height","width","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, InputText, Text } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n const [selected, setSelected] = useState();\n const [search, setSearch] = useState();\n\n useEffect(() => {\n setSearch(props.search);\n }, [props.search]);\n\n const handleScroll = (...others) => console.log('<Table>::onScroll', ...others);\n\n const handlePress = (...others) => console.log('<Table>::onPress', ...others);\n\n const handleSelect = (...others) => {\n console.log('<Table>::onSelect', ...others);\n setSelected(...others);\n };\n\n return (\n <>\n <InputText name=\"search\" placeholder=\"search...\" type=\"search\" value={search} onChange={setSearch} />\n\n <Table\n {...props}\n search={search}\n selected={selected}\n onPress={handlePress}\n onScroll={handleScroll}\n onSelect={handleSelect}\n className={style.table}\n />\n </>\n );\n};\n\nconst dataSource = [\n {\n username: 'jose',\n email: 'jose@mirai.com',\n year: 1,\n tags: ['es', 'en', 'ja'].map((language) => (\n <Text key={language} bold small className={style.tag}>\n {language}\n </Text>\n )),\n languages: ['spanish', 'english', 'japanese'],\n action: null,\n },\n { username: 'mario/1', email: 'mario.1@mirai.com', tags: null, year: 2005 },\n { username: 'carlos', email: 'carlos@mirai.com', tags: null, year: 2012 },\n {\n username: 'svet',\n email: 'svet@mirai.com',\n tags: ['en'].map((language) => (\n <Text key={language} bold small className={style.tag}>\n {language}\n </Text>\n )),\n languages: ['english'],\n year: 2021,\n twitter: undefined,\n action: <Button small>Click Me</Button>,\n },\n {\n username: 'javi',\n email: 'hi@soyjavi.com',\n tags: null,\n year: 2022,\n twitter: 'soyjavi',\n bio: \"Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world.\",\n },\n { username: 'victor', email: 'victor@mirai.com', tags: null, year: 2021 },\n { username: 'mario/2', email: 'mario.2@mirai.com', tags: null, year: 2022 },\n];\n\nStory.storyName = 'Table';\n\nStory.args = {\n dataSource,\n inline: true,\n schema: {\n username: { label: 'User Name', type: 'text' },\n email: { label: 'Email' },\n tags: { label: 'Tags', type: 'component' },\n languages: { label: 'Languages (hidden)', type: 'hidden' },\n year: { label: 'Year', type: 'number' },\n twitter: { label: 'Twitter' },\n bio: { label: 'Biography' },\n action: { label: 'Action', type: 'component' },\n },\n search: '',\n // inherited properties\n ['data-testid']: 'test-story',\n style: { height: '128px !important;', width: 128, background: 'red' },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
|
|
@@ -1,19 +1,23 @@
|
|
|
1
|
-
.
|
|
1
|
+
.table td:nth-child(6) {
|
|
2
|
+
max-width: 20vw;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.table .tag {
|
|
2
6
|
background-color: var(--mirai-ui-accent-light);
|
|
3
7
|
color: var(--mirai-ui-base);
|
|
4
|
-
padding: calc(var(--mirai-ui-space-XS) /
|
|
8
|
+
padding: calc(var(--mirai-ui-space-XS) / 4) calc(var(--mirai-ui-space-XS) / 2);
|
|
5
9
|
border-radius: var(--mirai-ui-border-radius);
|
|
6
10
|
margin: 0 var(--mirai-ui-border-radius);
|
|
7
11
|
}
|
|
8
12
|
|
|
9
13
|
@media only screen and (max-width: 430px) {
|
|
10
|
-
.
|
|
14
|
+
.table {
|
|
11
15
|
width: 100%;
|
|
12
16
|
}
|
|
13
17
|
}
|
|
14
18
|
|
|
15
19
|
@media only screen and (min-width: 430px) {
|
|
16
|
-
.
|
|
20
|
+
.table {
|
|
17
21
|
height: 50vh;
|
|
18
22
|
width: 50vw;
|
|
19
23
|
}
|