goblin-gadgets 2.0.9 → 2.0.12
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/.editorconfig +9 -9
- package/.eslintrc.js +28 -28
- package/.zou-flow +3 -0
- package/builders/builders.js +5 -5
- package/package.json +2 -2
- package/widgets/accordion/styles.js +16 -16
- package/widgets/button-combo/widget.js +1 -0
- package/widgets/calendar/scenarios.js +50 -50
- package/widgets/calendar-boards/styles.js +29 -29
- package/widgets/calendar-list/styles.js +35 -35
- package/widgets/chat-balloon/scenarios.js +47 -47
- package/widgets/chat-dialog/styles.js +15 -15
- package/widgets/check-list/styles.js +66 -66
- package/widgets/checkbox-nc/scenarios.js +41 -41
- package/widgets/color-picker/props.js +71 -1
- package/widgets/color-picker/scenarios.js +1 -1
- package/widgets/color-picker/styles.js +26 -2
- package/widgets/color-picker/widget.js +59 -1
- package/widgets/dialog/styles.js +29 -29
- package/widgets/directory-input-nc/widget.js +20 -20
- package/widgets/document-container/scenarios.js +39 -39
- package/widgets/document-container/styles.js +69 -69
- package/widgets/drag-cab/styles.js +56 -56
- package/widgets/drag-carrier/styles.js +21 -21
- package/widgets/flat-combo/styles.js +21 -21
- package/widgets/gauge/scenarios.js +83 -83
- package/widgets/glyph-detail/service.js +9 -9
- package/widgets/glyphs-dialog/styles.js +37 -37
- package/widgets/guild-user-logo/widget.js +2 -0
- package/widgets/helpers/rect-helpers.js +10 -10
- package/widgets/helpers/shortcut-helpers.js +56 -56
- package/widgets/hinter-field/reducer.js +18 -18
- package/widgets/hinter-field/widget.js +0 -3
- package/widgets/hinter-field-nc/scenarios.js +47 -47
- package/widgets/key-trap.js +96 -96
- package/widgets/label/props.js +1 -1
- package/widgets/label/scenarios.js +1 -1
- package/widgets/label/widget.js +7 -7
- package/widgets/label-nc/scenarios.js +29 -29
- package/widgets/label-row/props.js +1 -1
- package/widgets/label-row/scenarios.js +1 -1
- package/widgets/label-row/widget.js +7 -7
- package/widgets/pivot/custom.css +320 -320
- package/widgets/radio-list/styles.js +48 -48
- package/widgets/scrollable-container/styles.js +58 -58
- package/widgets/scrollable-linkable-container/reducer.js +18 -18
- package/widgets/scrollable-linkable-container/styles.js +42 -42
- package/widgets/select/styles.js +68 -68
- package/widgets/stack-navigation/service.js +4 -4
- package/widgets/table/reducer.js +4 -0
- package/widgets/table/widget.js +7 -5
- package/widgets/text-field-nc/scenarios.js +67 -67
- package/widgets/text-field-typed-nc/widget.js +1 -0
- package/widgets/text-input-nc/scenarios.js +44 -44
- package/widgets/triangle/scenarios.js +33 -33
- package/widgets/widget-doc/styles.js +15 -15
- package/widgets/widget-doc-menu/styles.js +12 -12
- package/widgets/widget-doc-property/styles.js +75 -75
- package/widgets/work-dialog/styles.js +31 -31
package/.editorconfig
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
root = true
|
|
2
|
-
|
|
3
|
-
[*.{js,jsx,json}]
|
|
4
|
-
indent_style = space
|
|
5
|
-
indent_size = 2
|
|
6
|
-
charset = utf-8
|
|
7
|
-
trim_trailing_whitespace = true
|
|
8
|
-
insert_final_newline = true
|
|
9
|
-
max_line_length = 80
|
|
1
|
+
root = true
|
|
2
|
+
|
|
3
|
+
[*.{js,jsx,json}]
|
|
4
|
+
indent_style = space
|
|
5
|
+
indent_size = 2
|
|
6
|
+
charset = utf-8
|
|
7
|
+
trim_trailing_whitespace = true
|
|
8
|
+
insert_final_newline = true
|
|
9
|
+
max_line_length = 80
|
package/.eslintrc.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
module.exports = {
|
|
4
|
-
root: true,
|
|
5
|
-
parserOptions: {
|
|
6
|
-
ecmaVersion: 7,
|
|
7
|
-
sourceType: 'module',
|
|
8
|
-
ecmaFeatures: {
|
|
9
|
-
jsx: true,
|
|
10
|
-
},
|
|
11
|
-
},
|
|
12
|
-
env: {
|
|
13
|
-
browser: true,
|
|
14
|
-
mocha: true,
|
|
15
|
-
node: true,
|
|
16
|
-
es6: true,
|
|
17
|
-
},
|
|
18
|
-
parser: 'babel-eslint',
|
|
19
|
-
plugins: ['react', 'babel'],
|
|
20
|
-
extends: ['prettier', 'eslint:recommended', 'plugin:react/recommended'],
|
|
21
|
-
rules: {
|
|
22
|
-
// Other rules
|
|
23
|
-
'no-console': 'off',
|
|
24
|
-
'valid-jsdoc': ['error', {requireReturn: false}],
|
|
25
|
-
'eqeqeq': 'error',
|
|
26
|
-
'react/display-name': 'off',
|
|
27
|
-
},
|
|
28
|
-
};
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
root: true,
|
|
5
|
+
parserOptions: {
|
|
6
|
+
ecmaVersion: 7,
|
|
7
|
+
sourceType: 'module',
|
|
8
|
+
ecmaFeatures: {
|
|
9
|
+
jsx: true,
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
env: {
|
|
13
|
+
browser: true,
|
|
14
|
+
mocha: true,
|
|
15
|
+
node: true,
|
|
16
|
+
es6: true,
|
|
17
|
+
},
|
|
18
|
+
parser: 'babel-eslint',
|
|
19
|
+
plugins: ['react', 'babel'],
|
|
20
|
+
extends: ['prettier', 'eslint:recommended', 'plugin:react/recommended'],
|
|
21
|
+
rules: {
|
|
22
|
+
// Other rules
|
|
23
|
+
'no-console': 'off',
|
|
24
|
+
'valid-jsdoc': ['error', {requireReturn: false}],
|
|
25
|
+
'eqeqeq': 'error',
|
|
26
|
+
'react/display-name': 'off',
|
|
27
|
+
},
|
|
28
|
+
};
|
package/.zou-flow
ADDED
package/builders/builders.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
//T:2019-02-27
|
|
2
|
-
|
|
3
|
-
module.exports = {
|
|
4
|
-
buildGadget: require('./gadget.js'),
|
|
5
|
-
};
|
|
1
|
+
//T:2019-02-27
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
buildGadget: require('./gadget.js'),
|
|
5
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "goblin-gadgets",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.12",
|
|
4
4
|
"description": "Gadgets library",
|
|
5
5
|
"main": "./builders/builders.js",
|
|
6
6
|
"scripts": {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"goblin-theme": "^2.0.0",
|
|
27
27
|
"leaflet": "1.2.0",
|
|
28
28
|
"mocha": "^5.2.0",
|
|
29
|
-
"monaco-editor": "^0.
|
|
29
|
+
"monaco-editor": "^0.31.1",
|
|
30
30
|
"mousetrap": "^1.6.1",
|
|
31
31
|
"prettier": "2.0.4",
|
|
32
32
|
"prop-types": "^15.5.10",
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
/******************************************************************************/
|
|
2
|
-
|
|
3
|
-
export const propNames = ['transition', 'hasOverflow'];
|
|
4
|
-
|
|
5
|
-
export default function styles(theme, props) {
|
|
6
|
-
const {transition, hasOverflow} = props;
|
|
7
|
-
|
|
8
|
-
const accordion = {
|
|
9
|
-
overflowY: hasOverflow === false ? null : 'hidden',
|
|
10
|
-
transition: transition,
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
return {accordion};
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/******************************************************************************/
|
|
1
|
+
/******************************************************************************/
|
|
2
|
+
|
|
3
|
+
export const propNames = ['transition', 'hasOverflow'];
|
|
4
|
+
|
|
5
|
+
export default function styles(theme, props) {
|
|
6
|
+
const {transition, hasOverflow} = props;
|
|
7
|
+
|
|
8
|
+
const accordion = {
|
|
9
|
+
overflowY: hasOverflow === false ? null : 'hidden',
|
|
10
|
+
transition: transition,
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
return {accordion};
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/******************************************************************************/
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
export default [
|
|
2
|
-
{
|
|
3
|
-
name: 'March 2019',
|
|
4
|
-
props: {
|
|
5
|
-
startDate: '2019-01-01',
|
|
6
|
-
endDate: '2019-12-31',
|
|
7
|
-
visibleDate: '2019-03-01',
|
|
8
|
-
dates: 'march2019',
|
|
9
|
-
badges: 'march2019',
|
|
10
|
-
frame: true,
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
name: 'Avril 2019',
|
|
15
|
-
props: {
|
|
16
|
-
startDate: '2019-01-01',
|
|
17
|
-
endDate: '2019-12-31',
|
|
18
|
-
visibleDate: '2019-04-01',
|
|
19
|
-
dates: 'april2019',
|
|
20
|
-
badges: 'april2019',
|
|
21
|
-
frame: true,
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
name: 'double 2019',
|
|
26
|
-
props: {
|
|
27
|
-
startDate: '2019-01-01',
|
|
28
|
-
endDate: '2019-12-31',
|
|
29
|
-
visibleDate: '2019-03-01',
|
|
30
|
-
frame: true,
|
|
31
|
-
monthCount: 2,
|
|
32
|
-
hideDaysOutOfMonth: true,
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
name: 'triple 2019',
|
|
37
|
-
props: {
|
|
38
|
-
startDate: '2019-01-01',
|
|
39
|
-
endDate: '2019-12-31',
|
|
40
|
-
visibleDate: '2019-09-01',
|
|
41
|
-
frame: true,
|
|
42
|
-
monthCount: 3,
|
|
43
|
-
hideDaysOutOfMonth: true,
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
name: 'empty',
|
|
48
|
-
props: {},
|
|
49
|
-
},
|
|
50
|
-
];
|
|
1
|
+
export default [
|
|
2
|
+
{
|
|
3
|
+
name: 'March 2019',
|
|
4
|
+
props: {
|
|
5
|
+
startDate: '2019-01-01',
|
|
6
|
+
endDate: '2019-12-31',
|
|
7
|
+
visibleDate: '2019-03-01',
|
|
8
|
+
dates: 'march2019',
|
|
9
|
+
badges: 'march2019',
|
|
10
|
+
frame: true,
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
name: 'Avril 2019',
|
|
15
|
+
props: {
|
|
16
|
+
startDate: '2019-01-01',
|
|
17
|
+
endDate: '2019-12-31',
|
|
18
|
+
visibleDate: '2019-04-01',
|
|
19
|
+
dates: 'april2019',
|
|
20
|
+
badges: 'april2019',
|
|
21
|
+
frame: true,
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
name: 'double 2019',
|
|
26
|
+
props: {
|
|
27
|
+
startDate: '2019-01-01',
|
|
28
|
+
endDate: '2019-12-31',
|
|
29
|
+
visibleDate: '2019-03-01',
|
|
30
|
+
frame: true,
|
|
31
|
+
monthCount: 2,
|
|
32
|
+
hideDaysOutOfMonth: true,
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
name: 'triple 2019',
|
|
37
|
+
props: {
|
|
38
|
+
startDate: '2019-01-01',
|
|
39
|
+
endDate: '2019-12-31',
|
|
40
|
+
visibleDate: '2019-09-01',
|
|
41
|
+
frame: true,
|
|
42
|
+
monthCount: 3,
|
|
43
|
+
hideDaysOutOfMonth: true,
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: 'empty',
|
|
48
|
+
props: {},
|
|
49
|
+
},
|
|
50
|
+
];
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
/******************************************************************************/
|
|
2
|
-
|
|
3
|
-
export default function styles(theme) {
|
|
4
|
-
const radioBoxStyle = {
|
|
5
|
-
width: '400px',
|
|
6
|
-
display: 'flex',
|
|
7
|
-
padding: '0px 10px',
|
|
8
|
-
flexDirection: 'column',
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
const detailBoxStyle = {
|
|
12
|
-
height: '240px',
|
|
13
|
-
maxHeight: '240px',
|
|
14
|
-
minWidth: '250px',
|
|
15
|
-
padding: '10px',
|
|
16
|
-
display: 'flex',
|
|
17
|
-
flexDirection: 'column',
|
|
18
|
-
flexGrow: '1',
|
|
19
|
-
border: '1px solid ' + theme.palette.tableBorder,
|
|
20
|
-
overflowY: 'auto',
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
return {
|
|
24
|
-
radioBox: radioBoxStyle,
|
|
25
|
-
detailBox: detailBoxStyle,
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
/******************************************************************************/
|
|
1
|
+
/******************************************************************************/
|
|
2
|
+
|
|
3
|
+
export default function styles(theme) {
|
|
4
|
+
const radioBoxStyle = {
|
|
5
|
+
width: '400px',
|
|
6
|
+
display: 'flex',
|
|
7
|
+
padding: '0px 10px',
|
|
8
|
+
flexDirection: 'column',
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const detailBoxStyle = {
|
|
12
|
+
height: '240px',
|
|
13
|
+
maxHeight: '240px',
|
|
14
|
+
minWidth: '250px',
|
|
15
|
+
padding: '10px',
|
|
16
|
+
display: 'flex',
|
|
17
|
+
flexDirection: 'column',
|
|
18
|
+
flexGrow: '1',
|
|
19
|
+
border: '1px solid ' + theme.palette.tableBorder,
|
|
20
|
+
overflowY: 'auto',
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
return {
|
|
24
|
+
radioBox: radioBoxStyle,
|
|
25
|
+
detailBox: detailBoxStyle,
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/******************************************************************************/
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
/******************************************************************************/
|
|
2
|
-
|
|
3
|
-
export default function styles(theme) {
|
|
4
|
-
const boxStyle = {
|
|
5
|
-
display: 'flex',
|
|
6
|
-
flexDirection: 'column',
|
|
7
|
-
flexGrow: '1',
|
|
8
|
-
margin: '0px 0px 0px 20px',
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
const listStyle = {
|
|
12
|
-
height: '200px',
|
|
13
|
-
display: 'flex',
|
|
14
|
-
flexDirection: 'column',
|
|
15
|
-
flexGrow: '1',
|
|
16
|
-
margin: '5px 0px 0px 0px',
|
|
17
|
-
backgroundColor: theme.palette.viewBackground,
|
|
18
|
-
overflowY: 'auto',
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
const buttonsStyle = {
|
|
22
|
-
maxHeight: '32px',
|
|
23
|
-
display: 'flex',
|
|
24
|
-
flexDirection: 'row',
|
|
25
|
-
flexGrow: '1',
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
return {
|
|
29
|
-
box: boxStyle,
|
|
30
|
-
list: listStyle,
|
|
31
|
-
buttons: buttonsStyle,
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/******************************************************************************/
|
|
1
|
+
/******************************************************************************/
|
|
2
|
+
|
|
3
|
+
export default function styles(theme) {
|
|
4
|
+
const boxStyle = {
|
|
5
|
+
display: 'flex',
|
|
6
|
+
flexDirection: 'column',
|
|
7
|
+
flexGrow: '1',
|
|
8
|
+
margin: '0px 0px 0px 20px',
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const listStyle = {
|
|
12
|
+
height: '200px',
|
|
13
|
+
display: 'flex',
|
|
14
|
+
flexDirection: 'column',
|
|
15
|
+
flexGrow: '1',
|
|
16
|
+
margin: '5px 0px 0px 0px',
|
|
17
|
+
backgroundColor: theme.palette.viewBackground,
|
|
18
|
+
overflowY: 'auto',
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const buttonsStyle = {
|
|
22
|
+
maxHeight: '32px',
|
|
23
|
+
display: 'flex',
|
|
24
|
+
flexDirection: 'row',
|
|
25
|
+
flexGrow: '1',
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
return {
|
|
29
|
+
box: boxStyle,
|
|
30
|
+
list: listStyle,
|
|
31
|
+
buttons: buttonsStyle,
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/******************************************************************************/
|
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
export default [
|
|
2
|
-
{
|
|
3
|
-
name: 'sended',
|
|
4
|
-
props: {
|
|
5
|
-
type: 'sended',
|
|
6
|
-
backgroundColor: '#254f95',
|
|
7
|
-
dateTime: '31.03.2019 - 11:03',
|
|
8
|
-
message: 'Salut, comment vas-tu ?',
|
|
9
|
-
},
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
name: 'received',
|
|
13
|
-
props: {
|
|
14
|
-
type: 'received',
|
|
15
|
-
backgroundColor: '#259544',
|
|
16
|
-
dateTime: '31.03.2019 - 11:12',
|
|
17
|
-
message: 'Merci, bien',
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
name: 'huge',
|
|
22
|
-
props: {
|
|
23
|
-
type: 'sended',
|
|
24
|
-
backgroundColor: '#254f95',
|
|
25
|
-
dateTime: '25.12.2019 - 23:00',
|
|
26
|
-
message:
|
|
27
|
-
"Un jeune vieillard, assis debout sur un mur de pierre en bois, lisait un journal plié en quatre dans sa poche, à la lueur d'une bougie éteinte.",
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
name: 'fun',
|
|
32
|
-
props: {
|
|
33
|
-
type: 'received',
|
|
34
|
-
look: 'whatsapp',
|
|
35
|
-
dateTimeColor: '#5c29a2',
|
|
36
|
-
backgroundColor: '#b684b1',
|
|
37
|
-
textColor: 'black',
|
|
38
|
-
dateTime: '25.12.2019 - 23:00',
|
|
39
|
-
message:
|
|
40
|
-
"Un jeune vieillard, assis debout sur un mur de pierre en bois, lisait un journal plié en quatre dans sa poche, à la lueur d'une bougie éteinte.",
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
name: 'empty',
|
|
45
|
-
props: {},
|
|
46
|
-
},
|
|
47
|
-
];
|
|
1
|
+
export default [
|
|
2
|
+
{
|
|
3
|
+
name: 'sended',
|
|
4
|
+
props: {
|
|
5
|
+
type: 'sended',
|
|
6
|
+
backgroundColor: '#254f95',
|
|
7
|
+
dateTime: '31.03.2019 - 11:03',
|
|
8
|
+
message: 'Salut, comment vas-tu ?',
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
name: 'received',
|
|
13
|
+
props: {
|
|
14
|
+
type: 'received',
|
|
15
|
+
backgroundColor: '#259544',
|
|
16
|
+
dateTime: '31.03.2019 - 11:12',
|
|
17
|
+
message: 'Merci, bien',
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
name: 'huge',
|
|
22
|
+
props: {
|
|
23
|
+
type: 'sended',
|
|
24
|
+
backgroundColor: '#254f95',
|
|
25
|
+
dateTime: '25.12.2019 - 23:00',
|
|
26
|
+
message:
|
|
27
|
+
"Un jeune vieillard, assis debout sur un mur de pierre en bois, lisait un journal plié en quatre dans sa poche, à la lueur d'une bougie éteinte.",
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
name: 'fun',
|
|
32
|
+
props: {
|
|
33
|
+
type: 'received',
|
|
34
|
+
look: 'whatsapp',
|
|
35
|
+
dateTimeColor: '#5c29a2',
|
|
36
|
+
backgroundColor: '#b684b1',
|
|
37
|
+
textColor: 'black',
|
|
38
|
+
dateTime: '25.12.2019 - 23:00',
|
|
39
|
+
message:
|
|
40
|
+
"Un jeune vieillard, assis debout sur un mur de pierre en bois, lisait un journal plié en quatre dans sa poche, à la lueur d'une bougie éteinte.",
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: 'empty',
|
|
45
|
+
props: {},
|
|
46
|
+
},
|
|
47
|
+
];
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
/******************************************************************************/
|
|
2
|
-
|
|
3
|
-
export default function styles() {
|
|
4
|
-
const boxStyle = {
|
|
5
|
-
display: 'flex',
|
|
6
|
-
flexDirection: 'column',
|
|
7
|
-
padding: '20px',
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
return {
|
|
11
|
-
box: boxStyle,
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
/******************************************************************************/
|
|
1
|
+
/******************************************************************************/
|
|
2
|
+
|
|
3
|
+
export default function styles() {
|
|
4
|
+
const boxStyle = {
|
|
5
|
+
display: 'flex',
|
|
6
|
+
flexDirection: 'column',
|
|
7
|
+
padding: '20px',
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
return {
|
|
11
|
+
box: boxStyle,
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/******************************************************************************/
|
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
/******************************************************************************/
|
|
2
|
-
|
|
3
|
-
export const propNames = ['direction', 'width', 'height'];
|
|
4
|
-
|
|
5
|
-
export default function styles(theme, props) {
|
|
6
|
-
const {direction: directionProp, width, height} = props;
|
|
7
|
-
|
|
8
|
-
let direction, wrap, overflowX, overflowY;
|
|
9
|
-
switch (directionProp) {
|
|
10
|
-
case 'row':
|
|
11
|
-
direction = 'row';
|
|
12
|
-
wrap = null;
|
|
13
|
-
overflowX = 'auto';
|
|
14
|
-
overflowY = null;
|
|
15
|
-
break;
|
|
16
|
-
case 'wrap':
|
|
17
|
-
direction = 'column';
|
|
18
|
-
wrap = 'wrap';
|
|
19
|
-
overflowX = 'auto';
|
|
20
|
-
overflowY = null;
|
|
21
|
-
break;
|
|
22
|
-
default:
|
|
23
|
-
// column
|
|
24
|
-
direction = 'column';
|
|
25
|
-
wrap = null;
|
|
26
|
-
overflowX = null;
|
|
27
|
-
overflowY = 'auto';
|
|
28
|
-
break;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const boxStyle = {
|
|
32
|
-
width,
|
|
33
|
-
height,
|
|
34
|
-
display: 'flex',
|
|
35
|
-
flexDirection: 'column',
|
|
36
|
-
flexGrow: width ? null : '1',
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
const rowsStyle = {
|
|
40
|
-
width,
|
|
41
|
-
height,
|
|
42
|
-
display: 'flex',
|
|
43
|
-
flexDirection: direction,
|
|
44
|
-
flexGrow: width ? null : '1',
|
|
45
|
-
flexWrap: wrap,
|
|
46
|
-
alignItems: 'flex-start',
|
|
47
|
-
overflowX: overflowX,
|
|
48
|
-
overflowY: overflowY,
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
const headerStyle = {
|
|
52
|
-
minHeight: '32px',
|
|
53
|
-
flexGrow: '1',
|
|
54
|
-
display: 'flex',
|
|
55
|
-
flexDirection: 'row',
|
|
56
|
-
margin: '-5px 0px 5px 0px',
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
return {
|
|
60
|
-
box: boxStyle,
|
|
61
|
-
rows: rowsStyle,
|
|
62
|
-
header: headerStyle,
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/******************************************************************************/
|
|
1
|
+
/******************************************************************************/
|
|
2
|
+
|
|
3
|
+
export const propNames = ['direction', 'width', 'height'];
|
|
4
|
+
|
|
5
|
+
export default function styles(theme, props) {
|
|
6
|
+
const {direction: directionProp, width, height} = props;
|
|
7
|
+
|
|
8
|
+
let direction, wrap, overflowX, overflowY;
|
|
9
|
+
switch (directionProp) {
|
|
10
|
+
case 'row':
|
|
11
|
+
direction = 'row';
|
|
12
|
+
wrap = null;
|
|
13
|
+
overflowX = 'auto';
|
|
14
|
+
overflowY = null;
|
|
15
|
+
break;
|
|
16
|
+
case 'wrap':
|
|
17
|
+
direction = 'column';
|
|
18
|
+
wrap = 'wrap';
|
|
19
|
+
overflowX = 'auto';
|
|
20
|
+
overflowY = null;
|
|
21
|
+
break;
|
|
22
|
+
default:
|
|
23
|
+
// column
|
|
24
|
+
direction = 'column';
|
|
25
|
+
wrap = null;
|
|
26
|
+
overflowX = null;
|
|
27
|
+
overflowY = 'auto';
|
|
28
|
+
break;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const boxStyle = {
|
|
32
|
+
width,
|
|
33
|
+
height,
|
|
34
|
+
display: 'flex',
|
|
35
|
+
flexDirection: 'column',
|
|
36
|
+
flexGrow: width ? null : '1',
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const rowsStyle = {
|
|
40
|
+
width,
|
|
41
|
+
height,
|
|
42
|
+
display: 'flex',
|
|
43
|
+
flexDirection: direction,
|
|
44
|
+
flexGrow: width ? null : '1',
|
|
45
|
+
flexWrap: wrap,
|
|
46
|
+
alignItems: 'flex-start',
|
|
47
|
+
overflowX: overflowX,
|
|
48
|
+
overflowY: overflowY,
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const headerStyle = {
|
|
52
|
+
minHeight: '32px',
|
|
53
|
+
flexGrow: '1',
|
|
54
|
+
display: 'flex',
|
|
55
|
+
flexDirection: 'row',
|
|
56
|
+
margin: '-5px 0px 5px 0px',
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
return {
|
|
60
|
+
box: boxStyle,
|
|
61
|
+
rows: rowsStyle,
|
|
62
|
+
header: headerStyle,
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/******************************************************************************/
|