@mirai/ui 1.0.208 → 1.0.210
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/build/components/Calendar/__tests__/__snapshots__/Calendar.test.jsx.snap +32 -32
- package/build/components/InputSelect/InputSelect.js +0 -1
- package/build/components/InputSelect/InputSelect.js.map +1 -1
- package/build/components/InputText/InputText.module.css +2 -0
- package/build/components/Slider/__tests__/__snapshots__/Slider.test.js.snap +8 -8
- package/build/components/Table/Table.Row.js +7 -1
- package/build/components/Table/Table.Row.js.map +1 -1
- package/build/components/Table/Table.module.css +4 -0
- package/build/components/Table/Table.stories.js +6 -3
- package/build/components/Table/Table.stories.js.map +1 -1
- package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +80 -20
- package/build/primitives/Input/Input.js +17 -9
- package/build/primitives/Input/Input.js.map +1 -1
- package/build/primitives/ScrollView/ScrollView.js +3 -2
- package/build/primitives/ScrollView/ScrollView.js.map +1 -1
- package/build/primitives/ScrollView/ScrollView.module.css +9 -13
- package/build/primitives/ScrollView/__tests__/__snapshots__/ScrollView.test.js.snap +10 -10
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ exports[`component:<Calendar> desktop environment prop:captions 1`] = `
|
|
|
6
6
|
class="view container"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
|
-
class="scrollview snap horizontal scrollview"
|
|
9
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
10
10
|
>
|
|
11
11
|
<div
|
|
12
12
|
class="view month"
|
|
@@ -1531,7 +1531,7 @@ exports[`component:<Calendar> desktop environment prop:disabledDates 1`] = `
|
|
|
1531
1531
|
class="view container"
|
|
1532
1532
|
>
|
|
1533
1533
|
<div
|
|
1534
|
-
class="scrollview snap horizontal scrollview"
|
|
1534
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
1535
1535
|
>
|
|
1536
1536
|
<div
|
|
1537
1537
|
class="view month"
|
|
@@ -2751,7 +2751,7 @@ exports[`component:<Calendar> desktop environment prop:disabledPast 1`] = `
|
|
|
2751
2751
|
class="view container"
|
|
2752
2752
|
>
|
|
2753
2753
|
<div
|
|
2754
|
-
class="scrollview snap horizontal scrollview"
|
|
2754
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
2755
2755
|
>
|
|
2756
2756
|
<div
|
|
2757
2757
|
class="view month"
|
|
@@ -3996,7 +3996,7 @@ exports[`component:<Calendar> desktop environment prop:format 1`] = `
|
|
|
3996
3996
|
class="view container"
|
|
3997
3997
|
>
|
|
3998
3998
|
<div
|
|
3999
|
-
class="scrollview snap horizontal scrollview"
|
|
3999
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
4000
4000
|
>
|
|
4001
4001
|
<div
|
|
4002
4002
|
class="view month"
|
|
@@ -5216,7 +5216,7 @@ exports[`component:<Calendar> desktop environment prop:from 1`] = `
|
|
|
5216
5216
|
class="view container"
|
|
5217
5217
|
>
|
|
5218
5218
|
<div
|
|
5219
|
-
class="scrollview snap horizontal scrollview"
|
|
5219
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
5220
5220
|
>
|
|
5221
5221
|
<div
|
|
5222
5222
|
class="view month"
|
|
@@ -6436,7 +6436,7 @@ exports[`component:<Calendar> desktop environment prop:highlights 1`] = `
|
|
|
6436
6436
|
class="view container"
|
|
6437
6437
|
>
|
|
6438
6438
|
<div
|
|
6439
|
-
class="scrollview snap horizontal scrollview"
|
|
6439
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
6440
6440
|
>
|
|
6441
6441
|
<div
|
|
6442
6442
|
class="view month"
|
|
@@ -7656,7 +7656,7 @@ exports[`component:<Calendar> desktop environment prop:locale 1`] = `
|
|
|
7656
7656
|
class="view container"
|
|
7657
7657
|
>
|
|
7658
7658
|
<div
|
|
7659
|
-
class="scrollview snap horizontal scrollview"
|
|
7659
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
7660
7660
|
>
|
|
7661
7661
|
<div
|
|
7662
7662
|
class="view month"
|
|
@@ -8876,7 +8876,7 @@ exports[`component:<Calendar> desktop environment prop:locale en-US 1`] = `
|
|
|
8876
8876
|
class="view container"
|
|
8877
8877
|
>
|
|
8878
8878
|
<div
|
|
8879
|
-
class="scrollview snap horizontal scrollview"
|
|
8879
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
8880
8880
|
>
|
|
8881
8881
|
<div
|
|
8882
8882
|
class="view month"
|
|
@@ -10096,7 +10096,7 @@ exports[`component:<Calendar> desktop environment prop:months 1`] = `
|
|
|
10096
10096
|
class="view container"
|
|
10097
10097
|
>
|
|
10098
10098
|
<div
|
|
10099
|
-
class="scrollview snap horizontal scrollview"
|
|
10099
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
10100
10100
|
>
|
|
10101
10101
|
<div
|
|
10102
10102
|
class="view month"
|
|
@@ -11902,7 +11902,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:disabledDates
|
|
|
11902
11902
|
class="view container"
|
|
11903
11903
|
>
|
|
11904
11904
|
<div
|
|
11905
|
-
class="scrollview snap horizontal scrollview"
|
|
11905
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
11906
11906
|
>
|
|
11907
11907
|
<div
|
|
11908
11908
|
class="view month"
|
|
@@ -13122,7 +13122,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMaxDays 1
|
|
|
13122
13122
|
class="view container"
|
|
13123
13123
|
>
|
|
13124
13124
|
<div
|
|
13125
|
-
class="scrollview snap horizontal scrollview"
|
|
13125
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
13126
13126
|
>
|
|
13127
13127
|
<div
|
|
13128
13128
|
class="view month"
|
|
@@ -14342,7 +14342,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMinDays 1
|
|
|
14342
14342
|
class="view container"
|
|
14343
14343
|
>
|
|
14344
14344
|
<div
|
|
14345
|
-
class="scrollview snap horizontal scrollview"
|
|
14345
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
14346
14346
|
>
|
|
14347
14347
|
<div
|
|
14348
14348
|
class="view month"
|
|
@@ -15562,7 +15562,7 @@ exports[`component:<Calendar> desktop environment prop:range renders 1`] = `
|
|
|
15562
15562
|
class="view container"
|
|
15563
15563
|
>
|
|
15564
15564
|
<div
|
|
15565
|
-
class="scrollview snap horizontal scrollview"
|
|
15565
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
15566
15566
|
>
|
|
15567
15567
|
<div
|
|
15568
15568
|
class="view month"
|
|
@@ -16782,7 +16782,7 @@ exports[`component:<Calendar> desktop environment prop:to 1`] = `
|
|
|
16782
16782
|
class="view container"
|
|
16783
16783
|
>
|
|
16784
16784
|
<div
|
|
16785
|
-
class="scrollview snap horizontal scrollview"
|
|
16785
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
16786
16786
|
>
|
|
16787
16787
|
<div
|
|
16788
16788
|
class="view month"
|
|
@@ -17977,7 +17977,7 @@ exports[`component:<Calendar> desktop environment renders 1`] = `
|
|
|
17977
17977
|
class="view container"
|
|
17978
17978
|
>
|
|
17979
17979
|
<div
|
|
17980
|
-
class="scrollview snap horizontal scrollview"
|
|
17980
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
17981
17981
|
>
|
|
17982
17982
|
<div
|
|
17983
17983
|
class="view month"
|
|
@@ -19197,7 +19197,7 @@ exports[`component:<Calendar> inherit:className 1`] = `
|
|
|
19197
19197
|
class="view container mirai"
|
|
19198
19198
|
>
|
|
19199
19199
|
<div
|
|
19200
|
-
class="scrollview snap horizontal scrollview"
|
|
19200
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
19201
19201
|
>
|
|
19202
19202
|
<div
|
|
19203
19203
|
class="view month"
|
|
@@ -20417,7 +20417,7 @@ exports[`component:<Calendar> mobile environment prop:captions 1`] = `
|
|
|
20417
20417
|
class="view container"
|
|
20418
20418
|
>
|
|
20419
20419
|
<div
|
|
20420
|
-
class="scrollview snap horizontal scrollview"
|
|
20420
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
20421
20421
|
>
|
|
20422
20422
|
<div
|
|
20423
20423
|
class="view month"
|
|
@@ -21942,7 +21942,7 @@ exports[`component:<Calendar> mobile environment prop:disabledDates 1`] = `
|
|
|
21942
21942
|
class="view container"
|
|
21943
21943
|
>
|
|
21944
21944
|
<div
|
|
21945
|
-
class="scrollview snap horizontal scrollview"
|
|
21945
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
21946
21946
|
>
|
|
21947
21947
|
<div
|
|
21948
21948
|
class="view month"
|
|
@@ -23162,7 +23162,7 @@ exports[`component:<Calendar> mobile environment prop:disabledPast 1`] = `
|
|
|
23162
23162
|
class="view container"
|
|
23163
23163
|
>
|
|
23164
23164
|
<div
|
|
23165
|
-
class="scrollview snap horizontal scrollview"
|
|
23165
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
23166
23166
|
>
|
|
23167
23167
|
<div
|
|
23168
23168
|
class="view month"
|
|
@@ -24407,7 +24407,7 @@ exports[`component:<Calendar> mobile environment prop:format 1`] = `
|
|
|
24407
24407
|
class="view container"
|
|
24408
24408
|
>
|
|
24409
24409
|
<div
|
|
24410
|
-
class="scrollview snap horizontal scrollview"
|
|
24410
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
24411
24411
|
>
|
|
24412
24412
|
<div
|
|
24413
24413
|
class="view month"
|
|
@@ -25627,7 +25627,7 @@ exports[`component:<Calendar> mobile environment prop:from 1`] = `
|
|
|
25627
25627
|
class="view container"
|
|
25628
25628
|
>
|
|
25629
25629
|
<div
|
|
25630
|
-
class="scrollview snap horizontal scrollview"
|
|
25630
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
25631
25631
|
>
|
|
25632
25632
|
<div
|
|
25633
25633
|
class="view month"
|
|
@@ -26847,7 +26847,7 @@ exports[`component:<Calendar> mobile environment prop:highlights 1`] = `
|
|
|
26847
26847
|
class="view container"
|
|
26848
26848
|
>
|
|
26849
26849
|
<div
|
|
26850
|
-
class="scrollview snap horizontal scrollview"
|
|
26850
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
26851
26851
|
>
|
|
26852
26852
|
<div
|
|
26853
26853
|
class="view month"
|
|
@@ -28067,7 +28067,7 @@ exports[`component:<Calendar> mobile environment prop:locale 1`] = `
|
|
|
28067
28067
|
class="view container"
|
|
28068
28068
|
>
|
|
28069
28069
|
<div
|
|
28070
|
-
class="scrollview snap horizontal scrollview"
|
|
28070
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
28071
28071
|
>
|
|
28072
28072
|
<div
|
|
28073
28073
|
class="view month"
|
|
@@ -29287,7 +29287,7 @@ exports[`component:<Calendar> mobile environment prop:locale en-US 1`] = `
|
|
|
29287
29287
|
class="view container"
|
|
29288
29288
|
>
|
|
29289
29289
|
<div
|
|
29290
|
-
class="scrollview snap horizontal scrollview"
|
|
29290
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
29291
29291
|
>
|
|
29292
29292
|
<div
|
|
29293
29293
|
class="view month"
|
|
@@ -30507,7 +30507,7 @@ exports[`component:<Calendar> mobile environment prop:months 1`] = `
|
|
|
30507
30507
|
class="view container"
|
|
30508
30508
|
>
|
|
30509
30509
|
<div
|
|
30510
|
-
class="scrollview snap horizontal scrollview"
|
|
30510
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
30511
30511
|
>
|
|
30512
30512
|
<div
|
|
30513
30513
|
class="view month"
|
|
@@ -32313,7 +32313,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:disabledDates 1
|
|
|
32313
32313
|
class="view container"
|
|
32314
32314
|
>
|
|
32315
32315
|
<div
|
|
32316
|
-
class="scrollview snap horizontal scrollview"
|
|
32316
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
32317
32317
|
>
|
|
32318
32318
|
<div
|
|
32319
32319
|
class="view month"
|
|
@@ -33533,7 +33533,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMaxDays 1`
|
|
|
33533
33533
|
class="view container"
|
|
33534
33534
|
>
|
|
33535
33535
|
<div
|
|
33536
|
-
class="scrollview snap horizontal scrollview"
|
|
33536
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
33537
33537
|
>
|
|
33538
33538
|
<div
|
|
33539
33539
|
class="view month"
|
|
@@ -34753,7 +34753,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMinDays 1`
|
|
|
34753
34753
|
class="view container"
|
|
34754
34754
|
>
|
|
34755
34755
|
<div
|
|
34756
|
-
class="scrollview snap horizontal scrollview"
|
|
34756
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
34757
34757
|
>
|
|
34758
34758
|
<div
|
|
34759
34759
|
class="view month"
|
|
@@ -35973,7 +35973,7 @@ exports[`component:<Calendar> mobile environment prop:range renders 1`] = `
|
|
|
35973
35973
|
class="view container"
|
|
35974
35974
|
>
|
|
35975
35975
|
<div
|
|
35976
|
-
class="scrollview snap horizontal scrollview"
|
|
35976
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
35977
35977
|
>
|
|
35978
35978
|
<div
|
|
35979
35979
|
class="view month"
|
|
@@ -37193,7 +37193,7 @@ exports[`component:<Calendar> mobile environment prop:to 1`] = `
|
|
|
37193
37193
|
class="view container"
|
|
37194
37194
|
>
|
|
37195
37195
|
<div
|
|
37196
|
-
class="scrollview snap horizontal scrollview"
|
|
37196
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
37197
37197
|
>
|
|
37198
37198
|
<div
|
|
37199
37199
|
class="view month"
|
|
@@ -38388,7 +38388,7 @@ exports[`component:<Calendar> mobile environment renders 1`] = `
|
|
|
38388
38388
|
class="view container"
|
|
38389
38389
|
>
|
|
38390
38390
|
<div
|
|
38391
|
-
class="scrollview snap horizontal scrollview"
|
|
38391
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
38392
38392
|
>
|
|
38393
38393
|
<div
|
|
38394
38394
|
class="view month"
|
|
@@ -39609,7 +39609,7 @@ exports[`component:<Calendar> testId 1`] = `
|
|
|
39609
39609
|
data-testid="mirai"
|
|
39610
39610
|
>
|
|
39611
39611
|
<div
|
|
39612
|
-
class="scrollview snap horizontal scrollview"
|
|
39612
|
+
class="scrollview snap horizontal notIndicator scrollview"
|
|
39613
39613
|
>
|
|
39614
39614
|
<div
|
|
39615
39615
|
class="view month"
|
|
@@ -91,7 +91,6 @@ var InputSelect = function InputSelect(_ref) {
|
|
|
91
91
|
disabled: disabled,
|
|
92
92
|
value: others.value || '',
|
|
93
93
|
className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel, !!label && !(focus || error || has.value) && _InputTextModule.default.empty),
|
|
94
|
-
style: undefined,
|
|
95
94
|
onChange: handleChange,
|
|
96
95
|
onEnter: handleEnter,
|
|
97
96
|
onLeave: handleLeave
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSelect.js","names":["InputSelect","caption","disabled","error","hint","label","showRequired","showState","success","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","stateIcon","role","styles","style","inputContainer","className","inputBorder","content","required","input","withLabel","empty","ICON","EXPAND_MORE","icon","select","displayName","propTypes","PropTypes","string","bool","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\n\nconst InputSelect = ({\n caption,\n disabled,\n error,\n hint,\n label,\n showRequired = false,\n showState = true,\n success,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n event.target?.blur();\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 has = {\n label: !!label,\n value: others.value !== undefined && others.value?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View\n role={others.role || 'input-select'}\n className={styles(style.inputContainer, others.className)}\n style={others.style}\n >\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n focus && !error && style.focus,\n error && style.error,\n )}\n >\n {caption && (\n <Text action lighten className={style.caption}>\n {caption}\n </Text>\n )}\n\n <View wide className={style.content}>\n {label && (\n <Label\n {...{\n disabled,\n error,\n focus,\n label,\n required: showRequired && others.required,\n value: others.value,\n }}\n />\n )}\n\n <Select\n {...others}\n disabled={disabled}\n value={others.value || ''}\n className={styles(\n style.input,\n has.label && style.withLabel,\n !!label && !(focus || error || has.value) && style.empty,\n )}\n
|
|
1
|
+
{"version":3,"file":"InputSelect.js","names":["InputSelect","caption","disabled","error","hint","label","showRequired","showState","success","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","stateIcon","role","styles","style","inputContainer","className","inputBorder","content","required","input","withLabel","empty","ICON","EXPAND_MORE","icon","select","displayName","propTypes","PropTypes","string","bool","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\n\nconst InputSelect = ({\n caption,\n disabled,\n error,\n hint,\n label,\n showRequired = false,\n showState = true,\n success,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n event.target?.blur();\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 has = {\n label: !!label,\n value: others.value !== undefined && others.value?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View\n role={others.role || 'input-select'}\n className={styles(style.inputContainer, others.className)}\n style={others.style}\n >\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n focus && !error && style.focus,\n error && style.error,\n )}\n >\n {caption && (\n <Text action lighten className={style.caption}>\n {caption}\n </Text>\n )}\n\n <View wide className={style.content}>\n {label && (\n <Label\n {...{\n disabled,\n error,\n focus,\n label,\n required: showRequired && others.required,\n value: others.value,\n }}\n />\n )}\n\n <Select\n {...others}\n disabled={disabled}\n value={others.value || ''}\n className={styles(\n style.input,\n has.label && style.withLabel,\n !!label && !(focus || error || has.value) && style.empty,\n )}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n </View>\n\n {!disabled && <Icon value={ICON.EXPAND_MORE} className={styles(style.icon, style.select)} />}\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n caption: PropTypes.string,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n label: PropTypes.string,\n name: PropTypes.string.isRequired,\n showRequired: PropTypes.bool,\n showState: PropTypes.bool,\n success: PropTypes.bool,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":"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"}
|
|
@@ -32,7 +32,7 @@ exports[`component:<Slider> inherit:className 1`] = `
|
|
|
32
32
|
</span>
|
|
33
33
|
</div>
|
|
34
34
|
<div
|
|
35
|
-
class="scrollview snap horizontal scrollView"
|
|
35
|
+
class="scrollview snap horizontal notIndicator scrollView"
|
|
36
36
|
style="width: 360px;"
|
|
37
37
|
>
|
|
38
38
|
<div
|
|
@@ -145,7 +145,7 @@ exports[`component:<Slider> prop:auto 1`] = `
|
|
|
145
145
|
</span>
|
|
146
146
|
</div>
|
|
147
147
|
<div
|
|
148
|
-
class="scrollview snap horizontal scrollView"
|
|
148
|
+
class="scrollview snap horizontal notIndicator scrollView"
|
|
149
149
|
style="width: 360px;"
|
|
150
150
|
>
|
|
151
151
|
<div
|
|
@@ -258,7 +258,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
258
258
|
</span>
|
|
259
259
|
</div>
|
|
260
260
|
<div
|
|
261
|
-
class="scrollview snap horizontal scrollView"
|
|
261
|
+
class="scrollview snap horizontal notIndicator scrollView"
|
|
262
262
|
style="width: 360px;"
|
|
263
263
|
>
|
|
264
264
|
<div
|
|
@@ -391,7 +391,7 @@ exports[`component:<Slider> prop:fullScreen 1`] = `
|
|
|
391
391
|
style="width: 1024px;"
|
|
392
392
|
>
|
|
393
393
|
<div
|
|
394
|
-
class="scrollview snap horizontal scrollView"
|
|
394
|
+
class="scrollview snap horizontal notIndicator scrollView"
|
|
395
395
|
style="width: 870.4px;"
|
|
396
396
|
>
|
|
397
397
|
<div
|
|
@@ -444,7 +444,7 @@ exports[`component:<Slider> prop:fullScreen 1`] = `
|
|
|
444
444
|
</div>
|
|
445
445
|
</div>
|
|
446
446
|
<div
|
|
447
|
-
class="scrollview snap horizontal thumbnails"
|
|
447
|
+
class="scrollview snap horizontal notIndicator thumbnails"
|
|
448
448
|
>
|
|
449
449
|
<div
|
|
450
450
|
class="pressable thumbnail active"
|
|
@@ -507,7 +507,7 @@ exports[`component:<Slider> prop:index 1`] = `
|
|
|
507
507
|
</span>
|
|
508
508
|
</div>
|
|
509
509
|
<div
|
|
510
|
-
class="scrollview snap horizontal scrollView"
|
|
510
|
+
class="scrollview snap horizontal notIndicator scrollView"
|
|
511
511
|
style="width: 360px;"
|
|
512
512
|
>
|
|
513
513
|
<div
|
|
@@ -620,7 +620,7 @@ exports[`component:<Slider> renders 1`] = `
|
|
|
620
620
|
</span>
|
|
621
621
|
</div>
|
|
622
622
|
<div
|
|
623
|
-
class="scrollview snap horizontal scrollView"
|
|
623
|
+
class="scrollview snap horizontal notIndicator scrollView"
|
|
624
624
|
style="width: 360px;"
|
|
625
625
|
>
|
|
626
626
|
<div
|
|
@@ -734,7 +734,7 @@ exports[`component:<Slider> testId 1`] = `
|
|
|
734
734
|
</span>
|
|
735
735
|
</div>
|
|
736
736
|
<div
|
|
737
|
-
class="scrollview snap horizontal scrollView"
|
|
737
|
+
class="scrollview snap horizontal notIndicator scrollView"
|
|
738
738
|
style="width: 360px;"
|
|
739
739
|
>
|
|
740
740
|
<div
|
|
@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
11
|
var _primitives = require("../../primitives");
|
|
12
12
|
var _InputOption = require("../InputOption");
|
|
13
|
+
var _Tooltip = require("../Tooltip");
|
|
13
14
|
var _Table = require("./Table.ColumnFilter");
|
|
14
15
|
var _Table2 = require("./Table.constants");
|
|
15
16
|
var _TableModule = _interopRequireDefault(require("./Table.module.css"));
|
|
@@ -74,6 +75,7 @@ var Row = function Row(_ref) {
|
|
|
74
75
|
label = _schema$field.label,
|
|
75
76
|
_schema$field$sort = _schema$field.sort,
|
|
76
77
|
hasSort = _schema$field$sort === void 0 ? true : _schema$field$sort,
|
|
78
|
+
tooltip = _schema$field.tooltip,
|
|
77
79
|
_schema$field$type = _schema$field.type,
|
|
78
80
|
type = _schema$field$type === void 0 ? 'text' : _schema$field$type;
|
|
79
81
|
return /*#__PURE__*/_react.default.createElement(_primitives.Primitive, {
|
|
@@ -96,7 +98,11 @@ var Row = function Row(_ref) {
|
|
|
96
98
|
},
|
|
97
99
|
className: _TableModule.default.checkbox,
|
|
98
100
|
testId: testId ? "".concat(testId, "-checkbox") : undefined
|
|
99
|
-
}), isHead ?
|
|
101
|
+
}), isHead ? tooltip ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
102
|
+
text: tooltip
|
|
103
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Primitive, {
|
|
104
|
+
className: _TableModule.default.tooltip
|
|
105
|
+
}, label)) : label : dataSource[field], isHead && (onSort && hasSort || onFilter && hasFilter) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
100
106
|
row: true,
|
|
101
107
|
className: _TableModule.default.icons
|
|
102
108
|
}, onSort && hasSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","Row","checked","dataSource","indeterminate","l10n","schema","sort","onFilter","onPress","onSelect","onSort","others","useState","focus","setFocus","isHead","undefined","testId","handlePress","field","event","target","type","includes","handleFocus","handleSelect","preventDefault","styles","style","selected","Object","keys","filter","hidden","map","index","hasFilter","label","hasSort","React","createElement","Primitive","tag","key","onClick","column","selectable","value","checkbox","icons","ICON","UP","DOWN","icon","disabled","bind","displayName","propTypes","PropTypes","bool","shape","L10N_SHAPE","isRequired","func"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Primitive, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport { ColumnFilter } from './Table.ColumnFilter';\nimport { L10N_SHAPE } from './Table.constants';\nimport style from './Table.module.css';\n\nconst CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];\n\nconst Row = ({\n checked,\n dataSource,\n indeterminate,\n l10n,\n schema,\n sort = {},\n onFilter,\n onPress,\n onSelect,\n onSort,\n ...others\n}) => {\n const [focus, setFocus] = useState();\n\n const isHead = dataSource === undefined;\n const { 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) : undefined;\n };\n\n const handleFocus = (field) => {\n setFocus(field);\n };\n\n const handleSelect = (dataSource, event) => {\n event.preventDefault();\n onSelect(dataSource, event);\n };\n\n return (\n <Primitive tag=\"tr\" {...others} className={styles(checked && style.selected, onPress && style.onPress)}>\n {Object.keys(schema)\n .filter((field) => !schema[field].hidden)\n .map((field, index) => {\n const { filter: hasFilter = true, label, sort: hasSort = true, type = 'text' } = schema[field];\n\n return React.createElement(\n Primitive,\n {\n tag: isHead ? 'th' : 'td',\n testId: testId ? `${testId}-${field}` : undefined,\n key: field,\n onClick: !isHead || hasSort ? (event) => handlePress(field, event) : undefined,\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[type],\n )}\n >\n {onSelect && index === 0 && (\n <InputOption\n checked={checked}\n indeterminate={indeterminate}\n name=\"checkbox\"\n onChange={(value, event) => handleSelect(dataSource, event)}\n className={style.checkbox}\n testId={testId ? `${testId}-checkbox` : undefined}\n />\n )}\n\n {isHead ? label : dataSource[field]}\n\n {isHead && ((onSort && hasSort) || (onFilter && hasFilter)) && (\n <View row className={style.icons}>\n {onSort && hasSort && (\n <Icon\n value={sort[field] === false ? ICON.UP : ICON.DOWN}\n className={styles(style.icon, sort[field] === undefined && style.disabled)}\n />\n )}\n {onFilter && hasFilter && (\n <ColumnFilter\n field={schema[field]?.bind || field}\n l10n={l10n}\n schema={schema}\n visible={field === focus}\n onFocus={handleFocus}\n onSubmit={onFilter}\n />\n )}\n </View>\n )}\n </View>,\n );\n })}\n </Primitive>\n );\n};\n\nRow.displayName = 'Component:Table:Row';\n\nRow.propTypes = {\n checked: PropTypes.bool,\n dataSource: PropTypes.shape({}),\n indeterminate: PropTypes.bool,\n l10n: L10N_SHAPE,\n schema: PropTypes.shape({}).isRequired,\n sort: PropTypes.shape({}),\n onFilter: PropTypes.func,\n onPress: PropTypes.func,\n onSelect: PropTypes.func,\n onSort: PropTypes.func,\n};\n\nexport { Row };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,kBAAkB,GAAG,CAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC;AAE7E,IAAMC,GAAG,GAAG,SAANA,GAAG,OAYH;EAAA,IAXJC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACVC,aAAa,QAAbA,aAAa;IACbC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAG,CAAC,CAAC;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACHC,MAAM;EAET,gBAA0B,IAAAC,eAAQ,GAAE;IAAA;IAA7BC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,MAAM,GAAGb,UAAU,KAAKc,SAAS;EACvC,IAAQC,MAAM,GAAKN,MAAM,CAAjBM,MAAM;EAEd,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,KAAK,EAAEC,KAAK,EAAK;IACpC,oBAAkCA,KAAK,CAA/BC,MAAM;IAAd,2CAA2B,CAAC,CAAC;IAA7B,IAAkBC,IAAI,iBAAJA,IAAI;IACtB,IAAIvB,kBAAkB,CAACwB,QAAQ,CAACD,IAAI,CAAC,EAAE;IAEvCP,MAAM,GAAGL,MAAM,CAACS,KAAK,CAAC,GAAGX,OAAO,GAAGA,OAAO,CAACN,UAAU,EAAEkB,KAAK,CAAC,GAAGJ,SAAS;EAC3E,CAAC;EAED,IAAMQ,WAAW,GAAG,SAAdA,WAAW,CAAIL,KAAK,EAAK;IAC7BL,QAAQ,CAACK,KAAK,CAAC;EACjB,CAAC;EAED,IAAMM,YAAY,GAAG,SAAfA,YAAY,CAAIvB,UAAU,EAAEkB,KAAK,EAAK;IAC1CA,KAAK,CAACM,cAAc,EAAE;IACtBjB,QAAQ,CAACP,UAAU,EAAEkB,KAAK,CAAC;EAC7B,CAAC;EAED,oBACE,6BAAC,qBAAS;IAAC,GAAG,EAAC;EAAI,GAAKT,MAAM;IAAE,SAAS,EAAE,IAAAgB,eAAM,EAAC1B,OAAO,IAAI2B,oBAAK,CAACC,QAAQ,EAAErB,OAAO,IAAIoB,oBAAK,CAACpB,OAAO;EAAE,IACpGsB,MAAM,CAACC,IAAI,CAAC1B,MAAM,CAAC,CACjB2B,MAAM,CAAC,UAACb,KAAK;IAAA,OAAK,CAACd,MAAM,CAACc,KAAK,CAAC,CAACc,MAAM;EAAA,EAAC,CACxCC,GAAG,CAAC,UAACf,KAAK,EAAEgB,KAAK,EAAK;IAAA;IACrB,
|
|
1
|
+
{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","Row","checked","dataSource","indeterminate","l10n","schema","sort","onFilter","onPress","onSelect","onSort","others","useState","focus","setFocus","isHead","undefined","testId","handlePress","field","event","target","type","includes","handleFocus","handleSelect","preventDefault","styles","style","selected","Object","keys","filter","hidden","map","index","hasFilter","label","hasSort","tooltip","React","createElement","Primitive","tag","key","onClick","column","selectable","value","checkbox","icons","ICON","UP","DOWN","icon","disabled","bind","displayName","propTypes","PropTypes","bool","shape","L10N_SHAPE","isRequired","func"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Primitive, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport { Tooltip } from '../Tooltip';\nimport { ColumnFilter } from './Table.ColumnFilter';\nimport { L10N_SHAPE } from './Table.constants';\nimport style from './Table.module.css';\n\nconst CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];\n\nconst Row = ({\n checked,\n dataSource,\n indeterminate,\n l10n,\n schema,\n sort = {},\n onFilter,\n onPress,\n onSelect,\n onSort,\n ...others\n}) => {\n const [focus, setFocus] = useState();\n\n const isHead = dataSource === undefined;\n const { 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) : undefined;\n };\n\n const handleFocus = (field) => {\n setFocus(field);\n };\n\n const handleSelect = (dataSource, event) => {\n event.preventDefault();\n onSelect(dataSource, event);\n };\n\n return (\n <Primitive tag=\"tr\" {...others} className={styles(checked && style.selected, onPress && style.onPress)}>\n {Object.keys(schema)\n .filter((field) => !schema[field].hidden)\n .map((field, index) => {\n const { filter: hasFilter = true, label, sort: hasSort = true, tooltip, type = 'text' } = schema[field];\n\n return React.createElement(\n Primitive,\n {\n tag: isHead ? 'th' : 'td',\n testId: testId ? `${testId}-${field}` : undefined,\n key: field,\n onClick: !isHead || hasSort ? (event) => handlePress(field, event) : undefined,\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[type],\n )}\n >\n {onSelect && index === 0 && (\n <InputOption\n checked={checked}\n indeterminate={indeterminate}\n name=\"checkbox\"\n onChange={(value, event) => handleSelect(dataSource, event)}\n className={style.checkbox}\n testId={testId ? `${testId}-checkbox` : undefined}\n />\n )}\n\n {isHead ? (\n tooltip ? (\n <Tooltip text={tooltip}>\n <Primitive className={style.tooltip}>{label}</Primitive>\n </Tooltip>\n ) : (\n label\n )\n ) : (\n dataSource[field]\n )}\n\n {isHead && ((onSort && hasSort) || (onFilter && hasFilter)) && (\n <View row className={style.icons}>\n {onSort && hasSort && (\n <Icon\n value={sort[field] === false ? ICON.UP : ICON.DOWN}\n className={styles(style.icon, sort[field] === undefined && style.disabled)}\n />\n )}\n {onFilter && hasFilter && (\n <ColumnFilter\n field={schema[field]?.bind || field}\n l10n={l10n}\n schema={schema}\n visible={field === focus}\n onFocus={handleFocus}\n onSubmit={onFilter}\n />\n )}\n </View>\n )}\n </View>,\n );\n })}\n </Primitive>\n );\n};\n\nRow.displayName = 'Component:Table:Row';\n\nRow.propTypes = {\n checked: PropTypes.bool,\n dataSource: PropTypes.shape({}),\n indeterminate: PropTypes.bool,\n l10n: L10N_SHAPE,\n schema: PropTypes.shape({}).isRequired,\n sort: PropTypes.shape({}),\n onFilter: PropTypes.func,\n onPress: PropTypes.func,\n onSelect: PropTypes.func,\n onSort: PropTypes.func,\n};\n\nexport { Row };\n"],"mappings":"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"}
|
|
@@ -194,7 +194,8 @@ Story.args = {
|
|
|
194
194
|
},
|
|
195
195
|
schema: {
|
|
196
196
|
username: {
|
|
197
|
-
label: 'User Name'
|
|
197
|
+
label: 'User Name',
|
|
198
|
+
tooltip: 'The name user is recognized.'
|
|
198
199
|
},
|
|
199
200
|
email: {
|
|
200
201
|
label: 'Email'
|
|
@@ -208,7 +209,8 @@ Story.args = {
|
|
|
208
209
|
label: 'Active',
|
|
209
210
|
type: 'component',
|
|
210
211
|
bind: 'active',
|
|
211
|
-
sort: false
|
|
212
|
+
sort: false,
|
|
213
|
+
tooltip: 'Marks if user is available.'
|
|
212
214
|
},
|
|
213
215
|
tags: {
|
|
214
216
|
label: /*#__PURE__*/_react.default.createElement(_.View, {
|
|
@@ -216,7 +218,8 @@ Story.args = {
|
|
|
216
218
|
className: _TableStoriesModule.default.label
|
|
217
219
|
}, /*#__PURE__*/_react.default.createElement(_.Text, null, "\uD83C\uDFF7\uFE0F"), "Languages"),
|
|
218
220
|
type: 'component',
|
|
219
|
-
bind: 'languages'
|
|
221
|
+
bind: 'languages',
|
|
222
|
+
tooltip: 'Spoken languages'
|
|
220
223
|
},
|
|
221
224
|
languages: {
|
|
222
225
|
hidden: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.stories.js","names":["title","tags","value","map","language","style","tag","handleSwitch","event","stopPropagation","console","log","dataSource","username","email","active","activeSwitch","year","undefined","action","languages","twitter","actionTitle","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","handlePress","handleSelect","table","storyName","args","filter","field","min","max","values","inline","l10n","actionCancel","actionSubmit","labelMax","labelMin","schema","label","type","hidden","bind","sort","options","bio","testId","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, Icon, ICON, InputText, Switch, Text, View } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nconst tags = (value) =>\n value.map((language) => (\n <Text key={language} bold tiny className={style.tag}>\n {language}\n </Text>\n ));\n\nconst handleSwitch = (value, event) => {\n event.stopPropagation();\n console.log('::switch::', value);\n};\n\nconst dataSource = [\n {\n username: 'jose',\n email: 'jose@mirai.com',\n active: true,\n activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n year: undefined,\n action: null,\n },\n {\n username: 'mario/1',\n email: 'mario.1@mirai.com',\n active: true,\n activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n languages: 1,\n tags: tags(['ES']),\n year: 0,\n },\n {\n username: 'svet',\n email: 'svet@mirai.com',\n active: true,\n activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n languages: [3, 1, 0],\n tags: tags(['RU', 'ES', 'EN']),\n year: 2021,\n twitter: undefined,\n action: <Button small>Click Me</Button>,\n actionTitle: 'Click Me',\n },\n {\n username: 'javi',\n email: 'hi@soyjavi.com',\n active: true,\n activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n tags: null,\n languages: [2, 1, 0, 4],\n tags: tags(['EU', 'ES', 'EN', 'TH']),\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 {\n username: 'victor',\n email: 'victor@mirai.com',\n active: false,\n activeSwitch: <Switch name=\"active\" onChange={handleSwitch} />,\n languages: [1, 0],\n tags: tags(['ES', 'EN']),\n year: 2021,\n },\n {\n username: 'mario/2',\n email: 'mario.2@mirai.com',\n active: false,\n activeSwitch: <Switch name=\"active\" onChange={handleSwitch} />,\n languages: 1,\n tags: tags(['ES']),\n year: 2022,\n },\n];\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\nStory.storyName = 'Table';\n\nStory.args = {\n dataSource,\n filter: [\n { field: 'email', value: '@mirai.com' },\n { field: 'nonExistent', value: '@mirai.com' },\n { field: 'email', value: '@soyjavi.com' },\n { field: 'year', min: 1, max: 2022 },\n { field: 'languages', values: [3, 0] },\n ],\n inline: true,\n l10n: {\n actionCancel: 'Cancel',\n actionSubmit: 'Submit',\n labelMax: 'Max',\n labelMin: 'Min',\n },\n schema: {\n username: { label: 'User Name' },\n email: { label: 'Email' },\n active: { label: 'Active', type: 'boolean', hidden: true },\n activeSwitch: { label: 'Active', type: 'component', bind: 'active', sort: false },\n tags: {\n label: (\n <View row className={style.label}>\n <Text>🏷️</Text>\n Languages\n </View>\n ),\n type: 'component',\n bind: 'languages',\n },\n languages: {\n hidden: true,\n type: 'options',\n options: { 1: 'Spanish', 2: 'Basque', 0: 'English', 3: 'Rusian', 4: 'Thai' },\n },\n year: { label: 'Year', type: 'number' },\n twitter: { label: 'Twitter' },\n bio: { label: 'Biography' },\n action: { label: 'Action', type: 'component', sort: false, filter: false },\n },\n search: '',\n // store: 'mirai',\n // inherited properties\n testId: 'test-story',\n style: {\n background: 'green',\n },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.stories.js","names":["title","tags","value","map","language","style","tag","handleSwitch","event","stopPropagation","console","log","dataSource","username","email","active","activeSwitch","year","undefined","action","languages","twitter","actionTitle","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","handlePress","handleSelect","table","storyName","args","filter","field","min","max","values","inline","l10n","actionCancel","actionSubmit","labelMax","labelMin","schema","label","tooltip","type","hidden","bind","sort","options","bio","testId","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, Icon, ICON, InputText, Switch, Text, View } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nconst tags = (value) =>\n value.map((language) => (\n <Text key={language} bold tiny className={style.tag}>\n {language}\n </Text>\n ));\n\nconst handleSwitch = (value, event) => {\n event.stopPropagation();\n console.log('::switch::', value);\n};\n\nconst dataSource = [\n {\n username: 'jose',\n email: 'jose@mirai.com',\n active: true,\n activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n year: undefined,\n action: null,\n },\n {\n username: 'mario/1',\n email: 'mario.1@mirai.com',\n active: true,\n activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n languages: 1,\n tags: tags(['ES']),\n year: 0,\n },\n {\n username: 'svet',\n email: 'svet@mirai.com',\n active: true,\n activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n languages: [3, 1, 0],\n tags: tags(['RU', 'ES', 'EN']),\n year: 2021,\n twitter: undefined,\n action: <Button small>Click Me</Button>,\n actionTitle: 'Click Me',\n },\n {\n username: 'javi',\n email: 'hi@soyjavi.com',\n active: true,\n activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n tags: null,\n languages: [2, 1, 0, 4],\n tags: tags(['EU', 'ES', 'EN', 'TH']),\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 {\n username: 'victor',\n email: 'victor@mirai.com',\n active: false,\n activeSwitch: <Switch name=\"active\" onChange={handleSwitch} />,\n languages: [1, 0],\n tags: tags(['ES', 'EN']),\n year: 2021,\n },\n {\n username: 'mario/2',\n email: 'mario.2@mirai.com',\n active: false,\n activeSwitch: <Switch name=\"active\" onChange={handleSwitch} />,\n languages: 1,\n tags: tags(['ES']),\n year: 2022,\n },\n];\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\nStory.storyName = 'Table';\n\nStory.args = {\n dataSource,\n filter: [\n { field: 'email', value: '@mirai.com' },\n { field: 'nonExistent', value: '@mirai.com' },\n { field: 'email', value: '@soyjavi.com' },\n { field: 'year', min: 1, max: 2022 },\n { field: 'languages', values: [3, 0] },\n ],\n inline: true,\n l10n: {\n actionCancel: 'Cancel',\n actionSubmit: 'Submit',\n labelMax: 'Max',\n labelMin: 'Min',\n },\n schema: {\n username: { label: 'User Name', tooltip: 'The name user is recognized.' },\n email: { label: 'Email' },\n active: { label: 'Active', type: 'boolean', hidden: true },\n activeSwitch: {\n label: 'Active',\n type: 'component',\n bind: 'active',\n sort: false,\n tooltip: 'Marks if user is available.',\n },\n tags: {\n label: (\n <View row className={style.label}>\n <Text>🏷️</Text>\n Languages\n </View>\n ),\n type: 'component',\n bind: 'languages',\n tooltip: 'Spoken languages',\n },\n languages: {\n hidden: true,\n type: 'options',\n options: { 1: 'Spanish', 2: 'Basque', 0: 'English', 3: 'Rusian', 4: 'Thai' },\n },\n year: { label: 'Year', type: 'number' },\n twitter: { label: 'Twitter' },\n bio: { label: 'Biography' },\n action: { label: 'Action', type: 'component', sort: false, filter: false },\n },\n search: '',\n // store: 'mirai',\n // inherited properties\n testId: 'test-story',\n style: {\n background: 'green',\n },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
exports[`component:<Table> inherit:className 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
5
|
<div
|
|
6
|
-
class="scrollview snap container mirai"
|
|
6
|
+
class="scrollview snap vertical notIndicator container mirai"
|
|
7
7
|
>
|
|
8
8
|
<table
|
|
9
9
|
class="table"
|
|
@@ -110,7 +110,13 @@ exports[`component:<Table> inherit:className 1`] = `
|
|
|
110
110
|
<span
|
|
111
111
|
class="view forceRow column"
|
|
112
112
|
>
|
|
113
|
-
|
|
113
|
+
<span>
|
|
114
|
+
<div
|
|
115
|
+
class="dispatcher tooltip"
|
|
116
|
+
>
|
|
117
|
+
Twitter
|
|
118
|
+
</div>
|
|
119
|
+
</span>
|
|
114
120
|
<div
|
|
115
121
|
class="view row icons"
|
|
116
122
|
>
|
|
@@ -419,7 +425,7 @@ exports[`component:<Table> inherit:className 1`] = `
|
|
|
419
425
|
exports[`component:<Table> prop:filter 1`] = `
|
|
420
426
|
<DocumentFragment>
|
|
421
427
|
<div
|
|
422
|
-
class="scrollview snap container"
|
|
428
|
+
class="scrollview snap vertical notIndicator container"
|
|
423
429
|
>
|
|
424
430
|
<div
|
|
425
431
|
class="view row wide filters"
|
|
@@ -736,7 +742,13 @@ exports[`component:<Table> prop:filter 1`] = `
|
|
|
736
742
|
<span
|
|
737
743
|
class="view forceRow column"
|
|
738
744
|
>
|
|
739
|
-
|
|
745
|
+
<span>
|
|
746
|
+
<div
|
|
747
|
+
class="dispatcher tooltip"
|
|
748
|
+
>
|
|
749
|
+
Twitter
|
|
750
|
+
</div>
|
|
751
|
+
</span>
|
|
740
752
|
<div
|
|
741
753
|
class="view row icons"
|
|
742
754
|
>
|
|
@@ -1002,7 +1014,7 @@ exports[`component:<Table> prop:filter 1`] = `
|
|
|
1002
1014
|
exports[`component:<Table> prop:inline (false 1`] = `
|
|
1003
1015
|
<DocumentFragment>
|
|
1004
1016
|
<div
|
|
1005
|
-
class="scrollview snap container outlined"
|
|
1017
|
+
class="scrollview snap vertical notIndicator container outlined"
|
|
1006
1018
|
>
|
|
1007
1019
|
<table
|
|
1008
1020
|
class="table"
|
|
@@ -1109,7 +1121,13 @@ exports[`component:<Table> prop:inline (false 1`] = `
|
|
|
1109
1121
|
<span
|
|
1110
1122
|
class="view forceRow column"
|
|
1111
1123
|
>
|
|
1112
|
-
|
|
1124
|
+
<span>
|
|
1125
|
+
<div
|
|
1126
|
+
class="dispatcher tooltip"
|
|
1127
|
+
>
|
|
1128
|
+
Twitter
|
|
1129
|
+
</div>
|
|
1130
|
+
</span>
|
|
1113
1131
|
<div
|
|
1114
1132
|
class="view row icons"
|
|
1115
1133
|
>
|
|
@@ -1418,7 +1436,7 @@ exports[`component:<Table> prop:inline (false 1`] = `
|
|
|
1418
1436
|
exports[`component:<Table> prop:onScroll 1`] = `
|
|
1419
1437
|
<DocumentFragment>
|
|
1420
1438
|
<div
|
|
1421
|
-
class="scrollview snap container"
|
|
1439
|
+
class="scrollview snap vertical notIndicator container"
|
|
1422
1440
|
data-testid="onScroll"
|
|
1423
1441
|
>
|
|
1424
1442
|
<table
|
|
@@ -1536,7 +1554,13 @@ exports[`component:<Table> prop:onScroll 1`] = `
|
|
|
1536
1554
|
<span
|
|
1537
1555
|
class="view forceRow column"
|
|
1538
1556
|
>
|
|
1539
|
-
|
|
1557
|
+
<span>
|
|
1558
|
+
<div
|
|
1559
|
+
class="dispatcher tooltip"
|
|
1560
|
+
>
|
|
1561
|
+
Twitter
|
|
1562
|
+
</div>
|
|
1563
|
+
</span>
|
|
1540
1564
|
<div
|
|
1541
1565
|
class="view row icons"
|
|
1542
1566
|
>
|
|
@@ -1931,7 +1955,7 @@ exports[`component:<Table> prop:onScroll 1`] = `
|
|
|
1931
1955
|
exports[`component:<Table> prop:onSelect 1`] = `
|
|
1932
1956
|
<DocumentFragment>
|
|
1933
1957
|
<div
|
|
1934
|
-
class="scrollview snap container"
|
|
1958
|
+
class="scrollview snap vertical notIndicator container"
|
|
1935
1959
|
data-testid="onSelect"
|
|
1936
1960
|
>
|
|
1937
1961
|
<table
|
|
@@ -2064,7 +2088,13 @@ exports[`component:<Table> prop:onSelect 1`] = `
|
|
|
2064
2088
|
<span
|
|
2065
2089
|
class="view forceRow column"
|
|
2066
2090
|
>
|
|
2067
|
-
|
|
2091
|
+
<span>
|
|
2092
|
+
<div
|
|
2093
|
+
class="dispatcher tooltip"
|
|
2094
|
+
>
|
|
2095
|
+
Twitter
|
|
2096
|
+
</div>
|
|
2097
|
+
</span>
|
|
2068
2098
|
<div
|
|
2069
2099
|
class="view row icons"
|
|
2070
2100
|
>
|
|
@@ -2564,7 +2594,7 @@ exports[`component:<Table> prop:onSelect 1`] = `
|
|
|
2564
2594
|
exports[`component:<Table> prop:search 1`] = `
|
|
2565
2595
|
<DocumentFragment>
|
|
2566
2596
|
<div
|
|
2567
|
-
class="scrollview snap container"
|
|
2597
|
+
class="scrollview snap vertical notIndicator container"
|
|
2568
2598
|
>
|
|
2569
2599
|
<table
|
|
2570
2600
|
class="table"
|
|
@@ -2671,7 +2701,13 @@ exports[`component:<Table> prop:search 1`] = `
|
|
|
2671
2701
|
<span
|
|
2672
2702
|
class="view forceRow column"
|
|
2673
2703
|
>
|
|
2674
|
-
|
|
2704
|
+
<span>
|
|
2705
|
+
<div
|
|
2706
|
+
class="dispatcher tooltip"
|
|
2707
|
+
>
|
|
2708
|
+
Twitter
|
|
2709
|
+
</div>
|
|
2710
|
+
</span>
|
|
2675
2711
|
<div
|
|
2676
2712
|
class="view row icons"
|
|
2677
2713
|
>
|
|
@@ -2778,7 +2814,7 @@ exports[`component:<Table> prop:search 1`] = `
|
|
|
2778
2814
|
exports[`component:<Table> prop:selected 1`] = `
|
|
2779
2815
|
<DocumentFragment>
|
|
2780
2816
|
<div
|
|
2781
|
-
class="scrollview snap container"
|
|
2817
|
+
class="scrollview snap vertical notIndicator container"
|
|
2782
2818
|
>
|
|
2783
2819
|
<table
|
|
2784
2820
|
class="table"
|
|
@@ -2885,7 +2921,13 @@ exports[`component:<Table> prop:selected 1`] = `
|
|
|
2885
2921
|
<span
|
|
2886
2922
|
class="view forceRow column"
|
|
2887
2923
|
>
|
|
2888
|
-
|
|
2924
|
+
<span>
|
|
2925
|
+
<div
|
|
2926
|
+
class="dispatcher tooltip"
|
|
2927
|
+
>
|
|
2928
|
+
Twitter
|
|
2929
|
+
</div>
|
|
2930
|
+
</span>
|
|
2889
2931
|
<div
|
|
2890
2932
|
class="view row icons"
|
|
2891
2933
|
>
|
|
@@ -3196,7 +3238,7 @@ exports[`component:<Table> prop:selected 1`] = `
|
|
|
3196
3238
|
exports[`component:<Table> prop:store 1`] = `
|
|
3197
3239
|
<DocumentFragment>
|
|
3198
3240
|
<div
|
|
3199
|
-
class="scrollview snap container"
|
|
3241
|
+
class="scrollview snap vertical notIndicator container"
|
|
3200
3242
|
>
|
|
3201
3243
|
<div
|
|
3202
3244
|
class="view row wide filters"
|
|
@@ -3435,7 +3477,13 @@ exports[`component:<Table> prop:store 1`] = `
|
|
|
3435
3477
|
<span
|
|
3436
3478
|
class="view forceRow column"
|
|
3437
3479
|
>
|
|
3438
|
-
|
|
3480
|
+
<span>
|
|
3481
|
+
<div
|
|
3482
|
+
class="dispatcher tooltip"
|
|
3483
|
+
>
|
|
3484
|
+
Twitter
|
|
3485
|
+
</div>
|
|
3486
|
+
</span>
|
|
3439
3487
|
<div
|
|
3440
3488
|
class="view row icons"
|
|
3441
3489
|
>
|
|
@@ -3562,7 +3610,7 @@ exports[`component:<Table> prop:store 1`] = `
|
|
|
3562
3610
|
exports[`component:<Table> renders 1`] = `
|
|
3563
3611
|
<DocumentFragment>
|
|
3564
3612
|
<div
|
|
3565
|
-
class="scrollview snap container"
|
|
3613
|
+
class="scrollview snap vertical notIndicator container"
|
|
3566
3614
|
>
|
|
3567
3615
|
<table
|
|
3568
3616
|
class="table"
|
|
@@ -3669,7 +3717,13 @@ exports[`component:<Table> renders 1`] = `
|
|
|
3669
3717
|
<span
|
|
3670
3718
|
class="view forceRow column"
|
|
3671
3719
|
>
|
|
3672
|
-
|
|
3720
|
+
<span>
|
|
3721
|
+
<div
|
|
3722
|
+
class="dispatcher tooltip"
|
|
3723
|
+
>
|
|
3724
|
+
Twitter
|
|
3725
|
+
</div>
|
|
3726
|
+
</span>
|
|
3673
3727
|
<div
|
|
3674
3728
|
class="view row icons"
|
|
3675
3729
|
>
|
|
@@ -3978,7 +4032,7 @@ exports[`component:<Table> renders 1`] = `
|
|
|
3978
4032
|
exports[`component:<Table> testId 1`] = `
|
|
3979
4033
|
<DocumentFragment>
|
|
3980
4034
|
<div
|
|
3981
|
-
class="scrollview snap container"
|
|
4035
|
+
class="scrollview snap vertical notIndicator container"
|
|
3982
4036
|
data-testid="mirai"
|
|
3983
4037
|
>
|
|
3984
4038
|
<table
|
|
@@ -4096,7 +4150,13 @@ exports[`component:<Table> testId 1`] = `
|
|
|
4096
4150
|
<span
|
|
4097
4151
|
class="view forceRow column"
|
|
4098
4152
|
>
|
|
4099
|
-
|
|
4153
|
+
<span>
|
|
4154
|
+
<div
|
|
4155
|
+
class="dispatcher tooltip"
|
|
4156
|
+
>
|
|
4157
|
+
Twitter
|
|
4158
|
+
</div>
|
|
4159
|
+
</span>
|
|
4100
4160
|
<div
|
|
4101
4161
|
class="view row icons"
|
|
4102
4162
|
>
|
|
@@ -20,6 +20,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
20
20
|
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
21
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
22
22
|
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); }
|
|
23
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
24
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
25
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
26
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
27
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
28
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
29
|
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; }
|
|
24
30
|
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; }
|
|
25
31
|
var Input = function Input(_ref) {
|
|
@@ -34,16 +40,18 @@ var Input = function Input(_ref) {
|
|
|
34
40
|
onLeave = _ref.onLeave,
|
|
35
41
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
36
42
|
var ref = (0, _react.useRef)(null);
|
|
43
|
+
var _useState = (0, _react.useState)(),
|
|
44
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
45
|
+
height = _useState2[0],
|
|
46
|
+
setHeight = _useState2[1];
|
|
37
47
|
(0, _react.useEffect)(function () {
|
|
38
48
|
var errors = (0, _helpers.getInputErrors)(_objectSpread(_objectSpread({}, others), {}, {
|
|
39
49
|
type: type
|
|
40
50
|
}));
|
|
41
51
|
if (errors && onError) onError(errors);
|
|
42
|
-
if (autoResize && multiLine
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
clientHeight = _ref$current.clientHeight;
|
|
46
|
-
if (scrollHeight > clientHeight) resize();
|
|
52
|
+
if (autoResize && multiLine) {
|
|
53
|
+
setHeight(ref.current.clientHeight);
|
|
54
|
+
resize(others.value);
|
|
47
55
|
}
|
|
48
56
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
49
57
|
}, []);
|
|
@@ -57,11 +65,11 @@ var Input = function Input(_ref) {
|
|
|
57
65
|
value: value
|
|
58
66
|
})));
|
|
59
67
|
onChange && onChange(value || '', event);
|
|
60
|
-
if (autoResize && multiLine) resize();
|
|
68
|
+
if (autoResize && multiLine) resize(value);
|
|
61
69
|
};
|
|
62
|
-
var resize = function resize() {
|
|
63
|
-
ref.current
|
|
64
|
-
ref.current.style.height = ref.current.scrollHeight
|
|
70
|
+
var resize = function resize(value) {
|
|
71
|
+
if (!(ref !== null && ref !== void 0 && ref.current)) return;
|
|
72
|
+
ref.current.style.height = "".concat(value ? ref.current.scrollHeight : height, "px");
|
|
65
73
|
};
|
|
66
74
|
return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread(_objectSpread({}, others), {}, {
|
|
67
75
|
disabled: disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["Input","autoResize","disabled","multiLine","type","onChange","onEnter","onError","onLeave","others","ref","useRef","useEffect","errors","getInputErrors","current","
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Input","autoResize","disabled","multiLine","type","onChange","onEnter","onError","onLeave","others","ref","useRef","useState","height","setHeight","useEffect","errors","getInputErrors","current","clientHeight","resize","value","handleChange","next","event","isNaN","parseValue","style","scrollHeight","React","createElement","Primitive","undefined","role","tag","test","target","onFocus","onBlur","className","styles","input","displayName","propTypes","PropTypes","bool","name","string","isRequired","func"],"sources":["../../../src/primitives/Input/Input.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseValue } from './helpers';\nimport style from './Input.module.css';\n\nconst Input = ({ autoResize, disabled, multiLine, type = 'text', onChange, onEnter, onError, onLeave, ...others }) => {\n const ref = useRef(null);\n\n const [height, setHeight] = useState();\n\n useEffect(() => {\n const errors = getInputErrors({ ...others, type });\n if (errors && onError) onError(errors);\n\n if (autoResize && multiLine) {\n setHeight(ref.current.clientHeight);\n resize(others.value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChange = (next = '', event) => {\n if (type === 'number' && isNaN(next)) return;\n const value = parseValue(next, type, others);\n\n onError && onError(getInputErrors({ ...others, type, value }));\n onChange && onChange(value || '', event);\n if (autoResize && multiLine) resize(value);\n };\n\n const resize = (value) => {\n if (!ref?.current) return;\n ref.current.style.height = `${value ? ref.current.scrollHeight : height}px`;\n };\n\n return React.createElement(Primitive, {\n ...others,\n disabled,\n ref: autoResize ? ref : undefined,\n role: others.role || 'input',\n tag: multiLine ? 'textarea' : 'input',\n test: undefined,\n type: !multiLine ? type : undefined,\n value: others.value || '',\n ...(!disabled\n ? {\n onChange: (event) => handleChange(event.target.value, event),\n onFocus: onEnter,\n onBlur: onLeave,\n }\n : {}),\n className: styles(style.input, autoResize && multiLine && style.autoResize, others.className),\n });\n};\n\nInput.displayName = 'Primitive:Input';\n\nInput.propTypes = {\n autoResize: PropTypes.bool,\n disabled: PropTypes.bool,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n type: PropTypes.string,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onError: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { Input };\n"],"mappings":"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"}
|
|
@@ -29,7 +29,8 @@ var ScrollView = function ScrollView(_ref) {
|
|
|
29
29
|
horizontal = _ref.horizontal,
|
|
30
30
|
_ref$scrollEventThrot = _ref.scrollEventThrottle,
|
|
31
31
|
scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 16 : _ref$scrollEventThrot,
|
|
32
|
-
scrollIndicator = _ref.scrollIndicator,
|
|
32
|
+
_ref$scrollIndicator = _ref.scrollIndicator,
|
|
33
|
+
scrollIndicator = _ref$scrollIndicator === void 0 ? false : _ref$scrollIndicator,
|
|
33
34
|
scrollTo = _ref.scrollTo,
|
|
34
35
|
_ref$snap = _ref.snap,
|
|
35
36
|
snap = _ref$snap === void 0 ? true : _ref$snap,
|
|
@@ -77,7 +78,7 @@ var ScrollView = function ScrollView(_ref) {
|
|
|
77
78
|
role: others.role || 'scrollview',
|
|
78
79
|
tag: tag,
|
|
79
80
|
onScroll: onScroll ? handleScroll : undefined,
|
|
80
|
-
className: (0, _helpers.styles)(_ScrollViewModule.default.scrollview, snap && _ScrollViewModule.default.snap, horizontal
|
|
81
|
+
className: (0, _helpers.styles)(_ScrollViewModule.default.scrollview, snap && _ScrollViewModule.default.snap, horizontal ? _ScrollViewModule.default.horizontal : _ScrollViewModule.default.vertical, !scrollIndicator && _ScrollViewModule.default.notIndicator, others.className),
|
|
81
82
|
style: _objectSpread(_objectSpread({}, others.style), {}, {
|
|
82
83
|
height: height,
|
|
83
84
|
width: width
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollView.js","names":["ScrollView","behavior","children","height","horizontal","scrollEventThrottle","scrollIndicator","scrollTo","snap","tag","width","onScroll","others","ref","useRef","timeout","useEffect","current","undefined","handleScroll","target","clientHeight","clientWidth","scrollHeight","scrollWidth","scrollTop","scrollLeft","x","parseInt","y","offsetX","offsetY","clearTimeout","setTimeout","percentX","percentY","React","createElement","Primitive","role","className","styles","style","scrollview","
|
|
1
|
+
{"version":3,"file":"ScrollView.js","names":["ScrollView","behavior","children","height","horizontal","scrollEventThrottle","scrollIndicator","scrollTo","snap","tag","width","onScroll","others","ref","useRef","timeout","useEffect","current","undefined","handleScroll","target","clientHeight","clientWidth","scrollHeight","scrollWidth","scrollTop","scrollLeft","x","parseInt","y","offsetX","offsetY","clearTimeout","setTimeout","percentX","percentY","React","createElement","Primitive","role","className","styles","style","scrollview","vertical","notIndicator","displayName","propTypes","PropTypes","string","node","isRequired","number","bool","func"],"sources":["../../../src/primitives/ScrollView/ScrollView.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './ScrollView.module.css';\n\nconst ScrollView = ({\n behavior = 'smooth',\n children,\n height,\n horizontal,\n scrollEventThrottle = 16, // * 60fps\n scrollIndicator = false,\n scrollTo,\n snap = true,\n tag = 'div',\n width,\n onScroll,\n ...others\n}) => {\n const ref = useRef();\n\n let timeout = null;\n\n useEffect(() => {\n const { current = {} } = ref || {};\n if (!current.scrollTo || scrollTo === undefined) return;\n\n current.scrollTo({ [horizontal ? 'left' : 'top']: scrollTo, behavior });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [scrollTo]);\n\n const handleScroll = ({\n target: { clientHeight, clientWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft } = {},\n }) => {\n const x = parseInt(scrollLeft, 10);\n const y = parseInt(scrollTop, 10);\n const offsetX = scrollWidth - clientWidth;\n const offsetY = scrollHeight - clientHeight;\n\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n onScroll({\n x,\n y,\n percentX: offsetX ? parseInt((x * 100) / offsetX, 10) : 0,\n percentY: offsetY ? parseInt((y * 100) / offsetY, 10) : 0,\n });\n }, scrollEventThrottle);\n };\n\n return React.createElement(\n Primitive,\n {\n ...others,\n ref,\n role: others.role || 'scrollview',\n tag,\n onScroll: onScroll ? handleScroll : undefined,\n className: styles(\n style.scrollview,\n snap && style.snap,\n horizontal ? style.horizontal : style.vertical,\n !scrollIndicator && style.notIndicator,\n others.className,\n ),\n style: { ...others.style, height, width },\n },\n children,\n );\n};\n\nScrollView.displayName = 'Primitive:ScrollView';\n\nScrollView.propTypes = {\n behavior: PropTypes.string,\n children: PropTypes.node.isRequired,\n height: PropTypes.number,\n horizontal: PropTypes.bool,\n scrollEventThrottle: PropTypes.number,\n scrollIndicator: PropTypes.bool,\n scrollTo: PropTypes.number,\n snap: PropTypes.bool,\n tag: PropTypes.string,\n width: PropTypes.number,\n onScroll: PropTypes.func,\n};\n\nexport { ScrollView };\n"],"mappings":"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"}
|
|
@@ -5,34 +5,30 @@
|
|
|
5
5
|
width: fit-content;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.scrollview
|
|
8
|
+
.scrollview.horizontal {
|
|
9
|
+
flex-direction: row;
|
|
10
|
+
overflow-x: scroll;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.scrollview.vertical {
|
|
9
14
|
flex-direction: column;
|
|
10
15
|
overflow-y: scroll;
|
|
11
16
|
}
|
|
12
17
|
|
|
13
|
-
.scrollview.snap
|
|
18
|
+
.scrollview.snap.vertical {
|
|
14
19
|
scroll-snap-type: y mandatory;
|
|
15
20
|
}
|
|
16
21
|
|
|
17
|
-
.scrollview.horizontal {
|
|
18
|
-
flex-direction: row;
|
|
19
|
-
overflow-x: scroll;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
22
|
.scrollview.snap.horizontal {
|
|
23
23
|
scroll-snap-type: x mandatory;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.
|
|
27
|
-
/* TODO: Just need this empty class */
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.scrollview:not(.indicator) {
|
|
26
|
+
.scrollview.notIndicator {
|
|
31
27
|
scrollbar-width: none;
|
|
32
28
|
-ms-overflow-style: none;
|
|
33
29
|
}
|
|
34
30
|
|
|
35
|
-
.scrollview
|
|
31
|
+
.scrollview.notIndicator::-webkit-scrollbar {
|
|
36
32
|
display: none;
|
|
37
33
|
}
|
|
38
34
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
exports[`primitive:<ScrollView> inherit:className 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
5
|
<div
|
|
6
|
-
class="scrollview snap mirai"
|
|
6
|
+
class="scrollview snap vertical notIndicator mirai"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
9
|
style="height: 128px; width: 128px;"
|
|
@@ -62,7 +62,7 @@ exports[`primitive:<ScrollView> inherit:className 1`] = `
|
|
|
62
62
|
exports[`primitive:<ScrollView> prop:height 1`] = `
|
|
63
63
|
<DocumentFragment>
|
|
64
64
|
<div
|
|
65
|
-
class="scrollview snap"
|
|
65
|
+
class="scrollview snap vertical notIndicator"
|
|
66
66
|
style="height: 256px;"
|
|
67
67
|
>
|
|
68
68
|
<div
|
|
@@ -122,7 +122,7 @@ exports[`primitive:<ScrollView> prop:height 1`] = `
|
|
|
122
122
|
exports[`primitive:<ScrollView> prop:horizontal 1`] = `
|
|
123
123
|
<DocumentFragment>
|
|
124
124
|
<div
|
|
125
|
-
class="scrollview snap horizontal"
|
|
125
|
+
class="scrollview snap horizontal notIndicator"
|
|
126
126
|
>
|
|
127
127
|
<div
|
|
128
128
|
style="height: 128px; width: 128px;"
|
|
@@ -181,7 +181,7 @@ exports[`primitive:<ScrollView> prop:horizontal 1`] = `
|
|
|
181
181
|
exports[`primitive:<ScrollView> prop:scrollIndicator 1`] = `
|
|
182
182
|
<DocumentFragment>
|
|
183
183
|
<div
|
|
184
|
-
class="scrollview snap
|
|
184
|
+
class="scrollview snap vertical"
|
|
185
185
|
>
|
|
186
186
|
<div
|
|
187
187
|
style="height: 128px; width: 128px;"
|
|
@@ -240,7 +240,7 @@ exports[`primitive:<ScrollView> prop:scrollIndicator 1`] = `
|
|
|
240
240
|
exports[`primitive:<ScrollView> prop:scrollto 1`] = `
|
|
241
241
|
<DocumentFragment>
|
|
242
242
|
<div
|
|
243
|
-
class="scrollview snap"
|
|
243
|
+
class="scrollview snap vertical notIndicator"
|
|
244
244
|
>
|
|
245
245
|
<div
|
|
246
246
|
style="height: 128px; width: 128px;"
|
|
@@ -299,7 +299,7 @@ exports[`primitive:<ScrollView> prop:scrollto 1`] = `
|
|
|
299
299
|
exports[`primitive:<ScrollView> prop:snap 1`] = `
|
|
300
300
|
<DocumentFragment>
|
|
301
301
|
<div
|
|
302
|
-
class="scrollview"
|
|
302
|
+
class="scrollview vertical notIndicator"
|
|
303
303
|
>
|
|
304
304
|
<div
|
|
305
305
|
style="height: 128px; width: 128px;"
|
|
@@ -358,7 +358,7 @@ exports[`primitive:<ScrollView> prop:snap 1`] = `
|
|
|
358
358
|
exports[`primitive:<ScrollView> prop:tag 1`] = `
|
|
359
359
|
<DocumentFragment>
|
|
360
360
|
<section
|
|
361
|
-
class="scrollview snap"
|
|
361
|
+
class="scrollview snap vertical notIndicator"
|
|
362
362
|
>
|
|
363
363
|
<div
|
|
364
364
|
style="height: 128px; width: 128px;"
|
|
@@ -417,7 +417,7 @@ exports[`primitive:<ScrollView> prop:tag 1`] = `
|
|
|
417
417
|
exports[`primitive:<ScrollView> prop:width 1`] = `
|
|
418
418
|
<DocumentFragment>
|
|
419
419
|
<div
|
|
420
|
-
class="scrollview snap"
|
|
420
|
+
class="scrollview snap vertical notIndicator"
|
|
421
421
|
style="width: 256px;"
|
|
422
422
|
>
|
|
423
423
|
<div
|
|
@@ -477,7 +477,7 @@ exports[`primitive:<ScrollView> prop:width 1`] = `
|
|
|
477
477
|
exports[`primitive:<ScrollView> renders 1`] = `
|
|
478
478
|
<DocumentFragment>
|
|
479
479
|
<div
|
|
480
|
-
class="scrollview snap"
|
|
480
|
+
class="scrollview snap vertical notIndicator"
|
|
481
481
|
>
|
|
482
482
|
<div
|
|
483
483
|
style="height: 128px; width: 128px;"
|
|
@@ -536,7 +536,7 @@ exports[`primitive:<ScrollView> renders 1`] = `
|
|
|
536
536
|
exports[`primitive:<ScrollView> testId 1`] = `
|
|
537
537
|
<DocumentFragment>
|
|
538
538
|
<div
|
|
539
|
-
class="scrollview snap"
|
|
539
|
+
class="scrollview snap vertical notIndicator"
|
|
540
540
|
data-testid="mirai"
|
|
541
541
|
>
|
|
542
542
|
<div
|