@sis-cc/dotstatsuite-visions 6.4.2 → 6.5.2
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/es/AuthDialog/index.js +210 -0
- package/es/CollapseButtons/CollapseButtons.js +6 -2
- package/es/CollapseButtons/index.js +3 -0
- package/es/TableLayout/lib.js +1 -11
- package/es/ToggleButton/ToggleButton.js +16 -10
- package/es/ToggleButton/index.js +3 -0
- package/es/index.js +1 -0
- package/es/theme.js +10 -0
- package/lib/AuthDialog/index.js +248 -0
- package/lib/CollapseButtons/CollapseButtons.js +6 -2
- package/lib/TableLayout/lib.js +2 -12
- package/lib/ToggleButton/ToggleButton.js +16 -10
- package/lib/index.js +10 -1
- package/lib/theme.js +10 -0
- package/package.json +1 -1
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AuthDialog is an UI component that displays an login popup.
|
|
3
|
+
*
|
|
4
|
+
* @memberOf VISIONS
|
|
5
|
+
* @name AuthDialog
|
|
6
|
+
* @tag component
|
|
7
|
+
* @api public
|
|
8
|
+
* @props
|
|
9
|
+
* AuthDialog.propTypes = {
|
|
10
|
+
* isOpen: PropTypes.bool,
|
|
11
|
+
* labels: PropTypes.shape({
|
|
12
|
+
* anonymous: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
13
|
+
* error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
14
|
+
* header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
15
|
+
* password: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
16
|
+
* user: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
17
|
+
* submit: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
18
|
+
* }),
|
|
19
|
+
* onClose: PropTypes.func.isRequired,
|
|
20
|
+
* onSubmit: PropTypes.func.isRequired
|
|
21
|
+
* };
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
import React, { useState } from 'react';
|
|
25
|
+
import PropTypes from 'prop-types';
|
|
26
|
+
import { isEmpty } from 'ramda';
|
|
27
|
+
import Button from '../Button';
|
|
28
|
+
import Checkbox from '@material-ui/core/Checkbox';
|
|
29
|
+
import CloseIcon from '@material-ui/icons/Close';
|
|
30
|
+
import Dialog from '@material-ui/core/Dialog';
|
|
31
|
+
import IconButton from '@material-ui/core/IconButton';
|
|
32
|
+
import PersonIcon from '@material-ui/icons/Person';
|
|
33
|
+
import TextField from '@material-ui/core/TextField';
|
|
34
|
+
import Typography from '@material-ui/core/Typography';
|
|
35
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
36
|
+
|
|
37
|
+
var useStyles = makeStyles(function (theme) {
|
|
38
|
+
return {
|
|
39
|
+
header: {
|
|
40
|
+
color: 'grey',
|
|
41
|
+
display: 'flex',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
justifyContent: 'space-between'
|
|
44
|
+
},
|
|
45
|
+
headerLabel: {
|
|
46
|
+
display: 'flex',
|
|
47
|
+
alignItems: 'center'
|
|
48
|
+
},
|
|
49
|
+
closeButton: {
|
|
50
|
+
color: 'grey !important',
|
|
51
|
+
padding: 0
|
|
52
|
+
},
|
|
53
|
+
content: {
|
|
54
|
+
alignItems: 'stretch',
|
|
55
|
+
display: 'flex',
|
|
56
|
+
flexDirection: 'column',
|
|
57
|
+
padding: 10,
|
|
58
|
+
backgroundColor: 'rgb(240, 240, 240)'
|
|
59
|
+
},
|
|
60
|
+
error: {
|
|
61
|
+
color: 'red'
|
|
62
|
+
},
|
|
63
|
+
input: {
|
|
64
|
+
backgroundColor: 'white',
|
|
65
|
+
'&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button': {
|
|
66
|
+
'-webkit-appearance': 'none',
|
|
67
|
+
margin: 0
|
|
68
|
+
},
|
|
69
|
+
'&[type=number]': {
|
|
70
|
+
'-moz-appearance': 'textfield'
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
var AuthDialog = function AuthDialog(_ref) {
|
|
77
|
+
var isOpen = _ref.isOpen,
|
|
78
|
+
labels = _ref.labels,
|
|
79
|
+
onClose = _ref.onClose,
|
|
80
|
+
onSubmit = _ref.onSubmit;
|
|
81
|
+
|
|
82
|
+
var classes = useStyles();
|
|
83
|
+
|
|
84
|
+
var _useState = useState(''),
|
|
85
|
+
user = _useState[0],
|
|
86
|
+
setUser = _useState[1];
|
|
87
|
+
|
|
88
|
+
var _useState2 = useState(''),
|
|
89
|
+
password = _useState2[0],
|
|
90
|
+
setPassword = _useState2[1];
|
|
91
|
+
|
|
92
|
+
var _useState3 = useState(false),
|
|
93
|
+
isAnonymous = _useState3[0],
|
|
94
|
+
setIsAnonymous = _useState3[1];
|
|
95
|
+
|
|
96
|
+
var onChangeAnonymous = function onChangeAnonymous() {
|
|
97
|
+
setIsAnonymous(!isAnonymous);
|
|
98
|
+
if (!isAnonymous) {
|
|
99
|
+
setUser('');
|
|
100
|
+
setPassword('');
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
var canSubmit = isAnonymous || !isEmpty(user) && !isEmpty(password);
|
|
105
|
+
|
|
106
|
+
var onClickSubmit = function onClickSubmit() {
|
|
107
|
+
return onSubmit({ user: user, password: password, isAnonymous: isAnonymous });
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
return React.createElement(
|
|
111
|
+
Dialog,
|
|
112
|
+
{ open: isOpen, onClose: onClose },
|
|
113
|
+
React.createElement(
|
|
114
|
+
'div',
|
|
115
|
+
{ className: classes.header },
|
|
116
|
+
React.createElement(
|
|
117
|
+
'div',
|
|
118
|
+
{ className: classes.headerLabel },
|
|
119
|
+
React.createElement(PersonIcon, null),
|
|
120
|
+
React.createElement(
|
|
121
|
+
Typography,
|
|
122
|
+
null,
|
|
123
|
+
labels.header
|
|
124
|
+
)
|
|
125
|
+
),
|
|
126
|
+
React.createElement(
|
|
127
|
+
IconButton,
|
|
128
|
+
{ className: classes.closeButton, onClick: onClose },
|
|
129
|
+
React.createElement(CloseIcon, null)
|
|
130
|
+
)
|
|
131
|
+
),
|
|
132
|
+
React.createElement(
|
|
133
|
+
'form',
|
|
134
|
+
{ className: classes.content },
|
|
135
|
+
React.createElement(
|
|
136
|
+
'label',
|
|
137
|
+
{ htmlFor: 'login' },
|
|
138
|
+
labels.user
|
|
139
|
+
),
|
|
140
|
+
React.createElement(TextField, {
|
|
141
|
+
inputProps: {
|
|
142
|
+
className: classes.input,
|
|
143
|
+
id: 'login',
|
|
144
|
+
autoComplete: 'username',
|
|
145
|
+
name: 'username'
|
|
146
|
+
},
|
|
147
|
+
value: user,
|
|
148
|
+
onChange: function onChange(e) {
|
|
149
|
+
return setUser(e.target.value);
|
|
150
|
+
},
|
|
151
|
+
disabled: isAnonymous
|
|
152
|
+
}),
|
|
153
|
+
React.createElement(
|
|
154
|
+
'label',
|
|
155
|
+
{ htmlFor: 'password' },
|
|
156
|
+
labels.password
|
|
157
|
+
),
|
|
158
|
+
React.createElement(TextField, {
|
|
159
|
+
inputProps: {
|
|
160
|
+
className: classes.input,
|
|
161
|
+
id: 'password',
|
|
162
|
+
autoComplete: 'current-password',
|
|
163
|
+
name: 'password'
|
|
164
|
+
},
|
|
165
|
+
value: password,
|
|
166
|
+
onChange: function onChange(e) {
|
|
167
|
+
return setPassword(e.target.value);
|
|
168
|
+
},
|
|
169
|
+
disabled: isAnonymous,
|
|
170
|
+
type: 'password'
|
|
171
|
+
}),
|
|
172
|
+
React.createElement(
|
|
173
|
+
'div',
|
|
174
|
+
null,
|
|
175
|
+
React.createElement(Checkbox, { checked: isAnonymous, onChange: onChangeAnonymous }),
|
|
176
|
+
labels.anonymous
|
|
177
|
+
),
|
|
178
|
+
labels.error && React.createElement(
|
|
179
|
+
'div',
|
|
180
|
+
{ className: classes.error },
|
|
181
|
+
labels.error
|
|
182
|
+
),
|
|
183
|
+
React.createElement(
|
|
184
|
+
Button,
|
|
185
|
+
{ color: 'primary', disabled: !canSubmit, onClick: onClickSubmit, variant: 'contained' },
|
|
186
|
+
React.createElement(
|
|
187
|
+
'div',
|
|
188
|
+
{ style: { width: '100%' } },
|
|
189
|
+
labels.submit
|
|
190
|
+
)
|
|
191
|
+
)
|
|
192
|
+
)
|
|
193
|
+
);
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
AuthDialog.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
197
|
+
isOpen: PropTypes.bool,
|
|
198
|
+
labels: PropTypes.shape({
|
|
199
|
+
anonymous: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
200
|
+
error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
201
|
+
header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
202
|
+
password: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
203
|
+
user: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
204
|
+
submit: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
|
|
205
|
+
}),
|
|
206
|
+
onClose: PropTypes.func.isRequired,
|
|
207
|
+
onSubmit: PropTypes.func.isRequired
|
|
208
|
+
} : {};
|
|
209
|
+
|
|
210
|
+
export default AuthDialog;
|
|
@@ -38,7 +38,9 @@ var CollapseButtons = function CollapseButtons(props) {
|
|
|
38
38
|
breakpoint = _props$breakpoint === undefined ? function (theme) {
|
|
39
39
|
return theme.breakpoints.down('sm');
|
|
40
40
|
} : _props$breakpoint,
|
|
41
|
-
justify = props.justify
|
|
41
|
+
justify = props.justify,
|
|
42
|
+
_props$textTransform = props.textTransform,
|
|
43
|
+
textTransform = _props$textTransform === undefined ? 'none' : _props$textTransform;
|
|
42
44
|
|
|
43
45
|
|
|
44
46
|
var classes = useStyles();
|
|
@@ -80,6 +82,7 @@ var CollapseButtons = function CollapseButtons(props) {
|
|
|
80
82
|
Grid,
|
|
81
83
|
_extends({ item: true, xs: 12, sm: 12, md: R.nth(nbColumns)(COLUMNS) }, gridButtonsProps, { key: id }),
|
|
82
84
|
React.createElement(ToggleButton, {
|
|
85
|
+
textTransform: textTransform,
|
|
83
86
|
label: label,
|
|
84
87
|
tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
|
|
85
88
|
isOpen: R.prop(id)(toggleId),
|
|
@@ -151,7 +154,8 @@ CollapseButtons.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
151
154
|
isSecondLevelClikable: PropTypes.bool,
|
|
152
155
|
breakpoint: PropTypes.func,
|
|
153
156
|
gridButtonsProps: PropTypes.object,
|
|
154
|
-
justify: PropTypes.string
|
|
157
|
+
justify: PropTypes.string,
|
|
158
|
+
textTransform: PropTypes.string
|
|
155
159
|
} : {};
|
|
156
160
|
|
|
157
161
|
export default CollapseButtons;
|
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
* | 'space-around'
|
|
11
11
|
* | 'space-evenly'
|
|
12
12
|
*
|
|
13
|
+
* textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
|
|
14
|
+
*
|
|
13
15
|
* to manage layout you have three properties
|
|
14
16
|
* nbColumns: numbers of column you want to have
|
|
15
17
|
* gridButtonsProps: mainly to manage breakpoints in the differents layout of buttons but you can change all the grid properties. (nbColumns is use with the "sm" breakpoint)
|
|
@@ -51,6 +53,7 @@
|
|
|
51
53
|
* breakpoint: PropTypes.func,
|
|
52
54
|
* gridButtonsProps: PropTypes.object,
|
|
53
55
|
* justify: PropTypes.string,
|
|
56
|
+
* textTransform: PropTypes.string,
|
|
54
57
|
* };
|
|
55
58
|
* @theme
|
|
56
59
|
* // button (See ToggleButton Component)
|
package/es/TableLayout/lib.js
CHANGED
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
import * as R from 'ramda';
|
|
2
2
|
|
|
3
|
-
export var swap = R.curry(function (index1, index2, list) {
|
|
4
|
-
if (index1 < 0 || index2 < 0 || index1 > list.length - 1 || index2 > list.length - 1) {
|
|
5
|
-
return list; // index out of bound
|
|
6
|
-
}
|
|
7
|
-
var value1 = list[index1];
|
|
8
|
-
var value2 = list[index2];
|
|
9
|
-
return R.pipe(R.set(R.lensIndex(index1), value2), R.set(R.lensIndex(index2), value1))(list);
|
|
10
|
-
});
|
|
11
|
-
|
|
12
3
|
export var changeLayout = function changeLayout(_ref) {
|
|
13
4
|
var dragIndex = _ref.dragIndex,
|
|
14
5
|
hoverIndex = _ref.hoverIndex,
|
|
@@ -17,8 +8,7 @@ export var changeLayout = function changeLayout(_ref) {
|
|
|
17
8
|
currentLayout = _ref.currentLayout;
|
|
18
9
|
|
|
19
10
|
if (R.equals(dragZone, dropZone)) {
|
|
20
|
-
|
|
21
|
-
return R.over(R.lensProp(dropZone), swap(dragIndex, hoverIndex), currentLayout);
|
|
11
|
+
return R.over(R.lensProp(dropZone), R.move(dragIndex, hoverIndex), currentLayout);
|
|
22
12
|
}
|
|
23
13
|
var item = R.pipe(R.prop(dragZone), R.nth(dragIndex))(currentLayout);
|
|
24
14
|
return R.pipe(R.over(R.lensProp(dragZone), R.without([item])), R.over(R.lensProp(dropZone), R.insert(hoverIndex, item)))(currentLayout);
|
|
@@ -24,7 +24,10 @@ var useStyles = makeStyles(function (theme) {
|
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
label: {
|
|
27
|
-
textTransform:
|
|
27
|
+
textTransform: function textTransform(_ref) {
|
|
28
|
+
var _textTransform = _ref.textTransform;
|
|
29
|
+
return _textTransform;
|
|
30
|
+
},
|
|
28
31
|
textAlign: 'left',
|
|
29
32
|
fontSize: '0.9375rem',
|
|
30
33
|
lineHeight: '1.0'
|
|
@@ -36,17 +39,19 @@ var useStyles = makeStyles(function (theme) {
|
|
|
36
39
|
};
|
|
37
40
|
});
|
|
38
41
|
|
|
39
|
-
var ToggleButton = function ToggleButton(
|
|
42
|
+
var ToggleButton = function ToggleButton(_ref2) {
|
|
40
43
|
var _cx;
|
|
41
44
|
|
|
42
|
-
var isOpen =
|
|
43
|
-
label =
|
|
44
|
-
toggle =
|
|
45
|
-
testId =
|
|
46
|
-
|
|
47
|
-
tabindex =
|
|
45
|
+
var isOpen = _ref2.isOpen,
|
|
46
|
+
label = _ref2.label,
|
|
47
|
+
toggle = _ref2.toggle,
|
|
48
|
+
testId = _ref2.testId,
|
|
49
|
+
_ref2$tabindex = _ref2.tabindex,
|
|
50
|
+
tabindex = _ref2$tabindex === undefined ? 0 : _ref2$tabindex,
|
|
51
|
+
_ref2$textTransform = _ref2.textTransform,
|
|
52
|
+
textTransform = _ref2$textTransform === undefined ? 'capitalize' : _ref2$textTransform;
|
|
48
53
|
|
|
49
|
-
var classes = useStyles();
|
|
54
|
+
var classes = useStyles({ textTransform: textTransform });
|
|
50
55
|
return React.createElement(
|
|
51
56
|
Button,
|
|
52
57
|
{
|
|
@@ -69,7 +74,8 @@ ToggleButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
69
74
|
tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
70
75
|
isOpen: PropTypes.bool,
|
|
71
76
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
72
|
-
toggle: PropTypes.func
|
|
77
|
+
toggle: PropTypes.func,
|
|
78
|
+
textTransform: PropTypes.string
|
|
73
79
|
} : {};
|
|
74
80
|
|
|
75
81
|
export default ToggleButton;
|
package/es/ToggleButton/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Button use api of material ui https://material-ui.com/api/button/
|
|
3
3
|
*
|
|
4
|
+
* textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
|
|
5
|
+
*
|
|
4
6
|
* @memberOf VISIONS
|
|
5
7
|
* @name ToggleButton
|
|
6
8
|
* @tag component
|
|
@@ -12,6 +14,7 @@
|
|
|
12
14
|
* isOpen: PropTypes.bool,
|
|
13
15
|
* label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
14
16
|
* toggle: PropTypes.func,
|
|
17
|
+
* textTransform: PropTypes.string,
|
|
15
18
|
* };
|
|
16
19
|
*
|
|
17
20
|
* @theme
|
package/es/index.js
CHANGED
|
@@ -40,4 +40,5 @@ export { default as Tag } from './Tag';
|
|
|
40
40
|
export { default as ToggleButton } from './ToggleButton';
|
|
41
41
|
export { default as Tooltip } from './Tooltip';
|
|
42
42
|
export { default as VerticalButton } from './VerticalButton';
|
|
43
|
+
export { default as AuthDialog } from './AuthDialog';
|
|
43
44
|
export { sisccTheme, innerPalette, T4_BREAKPOINTS } from './theme';
|
package/es/theme.js
CHANGED
|
@@ -47,6 +47,16 @@ export var sisccTheme = function sisccTheme(_ref) {
|
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
49
|
overrides: {
|
|
50
|
+
MuiCheckbox: {
|
|
51
|
+
root: {
|
|
52
|
+
color: outerPalette.primaryMain || innerPalette.primaryMain
|
|
53
|
+
},
|
|
54
|
+
colorSecondary: {
|
|
55
|
+
'&$checked': {
|
|
56
|
+
color: outerPalette.primaryMain || innerPalette.primaryMain
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
50
60
|
MuiTableCell: {
|
|
51
61
|
head: {
|
|
52
62
|
lineHeight: 1.43
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
|
|
5
|
+
var _react = require('react');
|
|
6
|
+
|
|
7
|
+
var _react2 = _interopRequireDefault(_react);
|
|
8
|
+
|
|
9
|
+
var _propTypes = require('prop-types');
|
|
10
|
+
|
|
11
|
+
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
12
|
+
|
|
13
|
+
var _ramda = require('ramda');
|
|
14
|
+
|
|
15
|
+
var _Button = require('../Button');
|
|
16
|
+
|
|
17
|
+
var _Button2 = _interopRequireDefault(_Button);
|
|
18
|
+
|
|
19
|
+
var _Checkbox = require('@material-ui/core/Checkbox');
|
|
20
|
+
|
|
21
|
+
var _Checkbox2 = _interopRequireDefault(_Checkbox);
|
|
22
|
+
|
|
23
|
+
var _Close = require('@material-ui/icons/Close');
|
|
24
|
+
|
|
25
|
+
var _Close2 = _interopRequireDefault(_Close);
|
|
26
|
+
|
|
27
|
+
var _Dialog = require('@material-ui/core/Dialog');
|
|
28
|
+
|
|
29
|
+
var _Dialog2 = _interopRequireDefault(_Dialog);
|
|
30
|
+
|
|
31
|
+
var _IconButton = require('@material-ui/core/IconButton');
|
|
32
|
+
|
|
33
|
+
var _IconButton2 = _interopRequireDefault(_IconButton);
|
|
34
|
+
|
|
35
|
+
var _Person = require('@material-ui/icons/Person');
|
|
36
|
+
|
|
37
|
+
var _Person2 = _interopRequireDefault(_Person);
|
|
38
|
+
|
|
39
|
+
var _TextField = require('@material-ui/core/TextField');
|
|
40
|
+
|
|
41
|
+
var _TextField2 = _interopRequireDefault(_TextField);
|
|
42
|
+
|
|
43
|
+
var _Typography = require('@material-ui/core/Typography');
|
|
44
|
+
|
|
45
|
+
var _Typography2 = _interopRequireDefault(_Typography);
|
|
46
|
+
|
|
47
|
+
var _styles = require('@material-ui/core/styles');
|
|
48
|
+
|
|
49
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* AuthDialog is an UI component that displays an login popup.
|
|
53
|
+
*
|
|
54
|
+
* @memberOf VISIONS
|
|
55
|
+
* @name AuthDialog
|
|
56
|
+
* @tag component
|
|
57
|
+
* @api public
|
|
58
|
+
* @props
|
|
59
|
+
* AuthDialog.propTypes = {
|
|
60
|
+
* isOpen: PropTypes.bool,
|
|
61
|
+
* labels: PropTypes.shape({
|
|
62
|
+
* anonymous: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
63
|
+
* error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
64
|
+
* header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
65
|
+
* password: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
66
|
+
* user: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
67
|
+
* submit: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
68
|
+
* }),
|
|
69
|
+
* onClose: PropTypes.func.isRequired,
|
|
70
|
+
* onSubmit: PropTypes.func.isRequired
|
|
71
|
+
* };
|
|
72
|
+
*/
|
|
73
|
+
|
|
74
|
+
var useStyles = (0, _styles.makeStyles)(function (theme) {
|
|
75
|
+
return {
|
|
76
|
+
header: {
|
|
77
|
+
color: 'grey',
|
|
78
|
+
display: 'flex',
|
|
79
|
+
alignItems: 'center',
|
|
80
|
+
justifyContent: 'space-between'
|
|
81
|
+
},
|
|
82
|
+
headerLabel: {
|
|
83
|
+
display: 'flex',
|
|
84
|
+
alignItems: 'center'
|
|
85
|
+
},
|
|
86
|
+
closeButton: {
|
|
87
|
+
color: 'grey !important',
|
|
88
|
+
padding: 0
|
|
89
|
+
},
|
|
90
|
+
content: {
|
|
91
|
+
alignItems: 'stretch',
|
|
92
|
+
display: 'flex',
|
|
93
|
+
flexDirection: 'column',
|
|
94
|
+
padding: 10,
|
|
95
|
+
backgroundColor: 'rgb(240, 240, 240)'
|
|
96
|
+
},
|
|
97
|
+
error: {
|
|
98
|
+
color: 'red'
|
|
99
|
+
},
|
|
100
|
+
input: {
|
|
101
|
+
backgroundColor: 'white',
|
|
102
|
+
'&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button': {
|
|
103
|
+
'-webkit-appearance': 'none',
|
|
104
|
+
margin: 0
|
|
105
|
+
},
|
|
106
|
+
'&[type=number]': {
|
|
107
|
+
'-moz-appearance': 'textfield'
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
var AuthDialog = function AuthDialog(_ref) {
|
|
114
|
+
var isOpen = _ref.isOpen,
|
|
115
|
+
labels = _ref.labels,
|
|
116
|
+
onClose = _ref.onClose,
|
|
117
|
+
onSubmit = _ref.onSubmit;
|
|
118
|
+
|
|
119
|
+
var classes = useStyles();
|
|
120
|
+
|
|
121
|
+
var _useState = (0, _react.useState)(''),
|
|
122
|
+
user = _useState[0],
|
|
123
|
+
setUser = _useState[1];
|
|
124
|
+
|
|
125
|
+
var _useState2 = (0, _react.useState)(''),
|
|
126
|
+
password = _useState2[0],
|
|
127
|
+
setPassword = _useState2[1];
|
|
128
|
+
|
|
129
|
+
var _useState3 = (0, _react.useState)(false),
|
|
130
|
+
isAnonymous = _useState3[0],
|
|
131
|
+
setIsAnonymous = _useState3[1];
|
|
132
|
+
|
|
133
|
+
var onChangeAnonymous = function onChangeAnonymous() {
|
|
134
|
+
setIsAnonymous(!isAnonymous);
|
|
135
|
+
if (!isAnonymous) {
|
|
136
|
+
setUser('');
|
|
137
|
+
setPassword('');
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
var canSubmit = isAnonymous || !(0, _ramda.isEmpty)(user) && !(0, _ramda.isEmpty)(password);
|
|
142
|
+
|
|
143
|
+
var onClickSubmit = function onClickSubmit() {
|
|
144
|
+
return onSubmit({ user: user, password: password, isAnonymous: isAnonymous });
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
return _react2.default.createElement(
|
|
148
|
+
_Dialog2.default,
|
|
149
|
+
{ open: isOpen, onClose: onClose },
|
|
150
|
+
_react2.default.createElement(
|
|
151
|
+
'div',
|
|
152
|
+
{ className: classes.header },
|
|
153
|
+
_react2.default.createElement(
|
|
154
|
+
'div',
|
|
155
|
+
{ className: classes.headerLabel },
|
|
156
|
+
_react2.default.createElement(_Person2.default, null),
|
|
157
|
+
_react2.default.createElement(
|
|
158
|
+
_Typography2.default,
|
|
159
|
+
null,
|
|
160
|
+
labels.header
|
|
161
|
+
)
|
|
162
|
+
),
|
|
163
|
+
_react2.default.createElement(
|
|
164
|
+
_IconButton2.default,
|
|
165
|
+
{ className: classes.closeButton, onClick: onClose },
|
|
166
|
+
_react2.default.createElement(_Close2.default, null)
|
|
167
|
+
)
|
|
168
|
+
),
|
|
169
|
+
_react2.default.createElement(
|
|
170
|
+
'form',
|
|
171
|
+
{ className: classes.content },
|
|
172
|
+
_react2.default.createElement(
|
|
173
|
+
'label',
|
|
174
|
+
{ htmlFor: 'login' },
|
|
175
|
+
labels.user
|
|
176
|
+
),
|
|
177
|
+
_react2.default.createElement(_TextField2.default, {
|
|
178
|
+
inputProps: {
|
|
179
|
+
className: classes.input,
|
|
180
|
+
id: 'login',
|
|
181
|
+
autoComplete: 'username',
|
|
182
|
+
name: 'username'
|
|
183
|
+
},
|
|
184
|
+
value: user,
|
|
185
|
+
onChange: function onChange(e) {
|
|
186
|
+
return setUser(e.target.value);
|
|
187
|
+
},
|
|
188
|
+
disabled: isAnonymous
|
|
189
|
+
}),
|
|
190
|
+
_react2.default.createElement(
|
|
191
|
+
'label',
|
|
192
|
+
{ htmlFor: 'password' },
|
|
193
|
+
labels.password
|
|
194
|
+
),
|
|
195
|
+
_react2.default.createElement(_TextField2.default, {
|
|
196
|
+
inputProps: {
|
|
197
|
+
className: classes.input,
|
|
198
|
+
id: 'password',
|
|
199
|
+
autoComplete: 'current-password',
|
|
200
|
+
name: 'password'
|
|
201
|
+
},
|
|
202
|
+
value: password,
|
|
203
|
+
onChange: function onChange(e) {
|
|
204
|
+
return setPassword(e.target.value);
|
|
205
|
+
},
|
|
206
|
+
disabled: isAnonymous,
|
|
207
|
+
type: 'password'
|
|
208
|
+
}),
|
|
209
|
+
_react2.default.createElement(
|
|
210
|
+
'div',
|
|
211
|
+
null,
|
|
212
|
+
_react2.default.createElement(_Checkbox2.default, { checked: isAnonymous, onChange: onChangeAnonymous }),
|
|
213
|
+
labels.anonymous
|
|
214
|
+
),
|
|
215
|
+
labels.error && _react2.default.createElement(
|
|
216
|
+
'div',
|
|
217
|
+
{ className: classes.error },
|
|
218
|
+
labels.error
|
|
219
|
+
),
|
|
220
|
+
_react2.default.createElement(
|
|
221
|
+
_Button2.default,
|
|
222
|
+
{ color: 'primary', disabled: !canSubmit, onClick: onClickSubmit, variant: 'contained' },
|
|
223
|
+
_react2.default.createElement(
|
|
224
|
+
'div',
|
|
225
|
+
{ style: { width: '100%' } },
|
|
226
|
+
labels.submit
|
|
227
|
+
)
|
|
228
|
+
)
|
|
229
|
+
)
|
|
230
|
+
);
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
AuthDialog.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
234
|
+
isOpen: _propTypes2.default.bool,
|
|
235
|
+
labels: _propTypes2.default.shape({
|
|
236
|
+
anonymous: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
|
|
237
|
+
error: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
|
|
238
|
+
header: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
|
|
239
|
+
password: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
|
|
240
|
+
user: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
|
|
241
|
+
submit: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node])
|
|
242
|
+
}),
|
|
243
|
+
onClose: _propTypes2.default.func.isRequired,
|
|
244
|
+
onSubmit: _propTypes2.default.func.isRequired
|
|
245
|
+
} : {};
|
|
246
|
+
|
|
247
|
+
exports.default = AuthDialog;
|
|
248
|
+
module.exports = exports['default'];
|
|
@@ -72,7 +72,9 @@ var CollapseButtons = function CollapseButtons(props) {
|
|
|
72
72
|
breakpoint = _props$breakpoint === undefined ? function (theme) {
|
|
73
73
|
return theme.breakpoints.down('sm');
|
|
74
74
|
} : _props$breakpoint,
|
|
75
|
-
justify = props.justify
|
|
75
|
+
justify = props.justify,
|
|
76
|
+
_props$textTransform = props.textTransform,
|
|
77
|
+
textTransform = _props$textTransform === undefined ? 'none' : _props$textTransform;
|
|
76
78
|
|
|
77
79
|
|
|
78
80
|
var classes = useStyles();
|
|
@@ -114,6 +116,7 @@ var CollapseButtons = function CollapseButtons(props) {
|
|
|
114
116
|
_Grid2.default,
|
|
115
117
|
_extends({ item: true, xs: 12, sm: 12, md: R.nth(nbColumns)(COLUMNS) }, gridButtonsProps, { key: id }),
|
|
116
118
|
_react2.default.createElement(_.ToggleButton, {
|
|
119
|
+
textTransform: textTransform,
|
|
117
120
|
label: label,
|
|
118
121
|
tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
|
|
119
122
|
isOpen: R.prop(id)(toggleId),
|
|
@@ -185,7 +188,8 @@ CollapseButtons.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
185
188
|
isSecondLevelClikable: _propTypes2.default.bool,
|
|
186
189
|
breakpoint: _propTypes2.default.func,
|
|
187
190
|
gridButtonsProps: _propTypes2.default.object,
|
|
188
|
-
justify: _propTypes2.default.string
|
|
191
|
+
justify: _propTypes2.default.string,
|
|
192
|
+
textTransform: _propTypes2.default.string
|
|
189
193
|
} : {};
|
|
190
194
|
|
|
191
195
|
exports.default = CollapseButtons;
|
package/lib/TableLayout/lib.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
|
-
exports.addHiddenElement = exports.rejectHiddenElement = exports.changeLayout =
|
|
4
|
+
exports.addHiddenElement = exports.rejectHiddenElement = exports.changeLayout = undefined;
|
|
5
5
|
|
|
6
6
|
var _ramda = require('ramda');
|
|
7
7
|
|
|
@@ -9,15 +9,6 @@ var R = _interopRequireWildcard(_ramda);
|
|
|
9
9
|
|
|
10
10
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
|
|
11
11
|
|
|
12
|
-
var swap = exports.swap = R.curry(function (index1, index2, list) {
|
|
13
|
-
if (index1 < 0 || index2 < 0 || index1 > list.length - 1 || index2 > list.length - 1) {
|
|
14
|
-
return list; // index out of bound
|
|
15
|
-
}
|
|
16
|
-
var value1 = list[index1];
|
|
17
|
-
var value2 = list[index2];
|
|
18
|
-
return R.pipe(R.set(R.lensIndex(index1), value2), R.set(R.lensIndex(index2), value1))(list);
|
|
19
|
-
});
|
|
20
|
-
|
|
21
12
|
var changeLayout = exports.changeLayout = function changeLayout(_ref) {
|
|
22
13
|
var dragIndex = _ref.dragIndex,
|
|
23
14
|
hoverIndex = _ref.hoverIndex,
|
|
@@ -26,8 +17,7 @@ var changeLayout = exports.changeLayout = function changeLayout(_ref) {
|
|
|
26
17
|
currentLayout = _ref.currentLayout;
|
|
27
18
|
|
|
28
19
|
if (R.equals(dragZone, dropZone)) {
|
|
29
|
-
|
|
30
|
-
return R.over(R.lensProp(dropZone), swap(dragIndex, hoverIndex), currentLayout);
|
|
20
|
+
return R.over(R.lensProp(dropZone), R.move(dragIndex, hoverIndex), currentLayout);
|
|
31
21
|
}
|
|
32
22
|
var item = R.pipe(R.prop(dragZone), R.nth(dragIndex))(currentLayout);
|
|
33
23
|
return R.pipe(R.over(R.lensProp(dragZone), R.without([item])), R.over(R.lensProp(dropZone), R.insert(hoverIndex, item)))(currentLayout);
|
|
@@ -53,7 +53,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
|
|
|
53
53
|
}
|
|
54
54
|
},
|
|
55
55
|
label: {
|
|
56
|
-
textTransform:
|
|
56
|
+
textTransform: function textTransform(_ref) {
|
|
57
|
+
var _textTransform = _ref.textTransform;
|
|
58
|
+
return _textTransform;
|
|
59
|
+
},
|
|
57
60
|
textAlign: 'left',
|
|
58
61
|
fontSize: '0.9375rem',
|
|
59
62
|
lineHeight: '1.0'
|
|
@@ -65,17 +68,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
|
|
|
65
68
|
};
|
|
66
69
|
});
|
|
67
70
|
|
|
68
|
-
var ToggleButton = function ToggleButton(
|
|
71
|
+
var ToggleButton = function ToggleButton(_ref2) {
|
|
69
72
|
var _cx;
|
|
70
73
|
|
|
71
|
-
var isOpen =
|
|
72
|
-
label =
|
|
73
|
-
toggle =
|
|
74
|
-
testId =
|
|
75
|
-
|
|
76
|
-
tabindex =
|
|
74
|
+
var isOpen = _ref2.isOpen,
|
|
75
|
+
label = _ref2.label,
|
|
76
|
+
toggle = _ref2.toggle,
|
|
77
|
+
testId = _ref2.testId,
|
|
78
|
+
_ref2$tabindex = _ref2.tabindex,
|
|
79
|
+
tabindex = _ref2$tabindex === undefined ? 0 : _ref2$tabindex,
|
|
80
|
+
_ref2$textTransform = _ref2.textTransform,
|
|
81
|
+
textTransform = _ref2$textTransform === undefined ? 'capitalize' : _ref2$textTransform;
|
|
77
82
|
|
|
78
|
-
var classes = useStyles();
|
|
83
|
+
var classes = useStyles({ textTransform: textTransform });
|
|
79
84
|
return _react2.default.createElement(
|
|
80
85
|
_Button2.default,
|
|
81
86
|
{
|
|
@@ -98,7 +103,8 @@ ToggleButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
98
103
|
tabindex: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
|
99
104
|
isOpen: _propTypes2.default.bool,
|
|
100
105
|
label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
|
|
101
|
-
toggle: _propTypes2.default.func
|
|
106
|
+
toggle: _propTypes2.default.func,
|
|
107
|
+
textTransform: _propTypes2.default.string
|
|
102
108
|
} : {};
|
|
103
109
|
|
|
104
110
|
exports.default = ToggleButton;
|
package/lib/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
|
-
exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.VerticalButton = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Table = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.ScopeList = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.CollapseButtons = exports.Chips = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
|
|
4
|
+
exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.AuthDialog = exports.VerticalButton = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Table = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.ScopeList = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.CollapseButtons = exports.Chips = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
|
|
5
5
|
|
|
6
6
|
var _Alert = require('./Alert');
|
|
7
7
|
|
|
@@ -351,6 +351,15 @@ Object.defineProperty(exports, 'VerticalButton', {
|
|
|
351
351
|
}
|
|
352
352
|
});
|
|
353
353
|
|
|
354
|
+
var _AuthDialog = require('./AuthDialog');
|
|
355
|
+
|
|
356
|
+
Object.defineProperty(exports, 'AuthDialog', {
|
|
357
|
+
enumerable: true,
|
|
358
|
+
get: function get() {
|
|
359
|
+
return _interopRequireDefault(_AuthDialog).default;
|
|
360
|
+
}
|
|
361
|
+
});
|
|
362
|
+
|
|
354
363
|
var _theme = require('./theme');
|
|
355
364
|
|
|
356
365
|
Object.defineProperty(exports, 'sisccTheme', {
|
package/lib/theme.js
CHANGED
|
@@ -50,6 +50,16 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
|
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
overrides: {
|
|
53
|
+
MuiCheckbox: {
|
|
54
|
+
root: {
|
|
55
|
+
color: outerPalette.primaryMain || innerPalette.primaryMain
|
|
56
|
+
},
|
|
57
|
+
colorSecondary: {
|
|
58
|
+
'&$checked': {
|
|
59
|
+
color: outerPalette.primaryMain || innerPalette.primaryMain
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
},
|
|
53
63
|
MuiTableCell: {
|
|
54
64
|
head: {
|
|
55
65
|
lineHeight: 1.43
|