@sis-cc/dotstatsuite-visions 7.14.3 → 7.14.5
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 +3 -3
- package/es/ChartsConfig/Axis.js +7 -7
- package/es/ChartsConfig/Input.js +150 -0
- package/es/ChartsConfig/styles.js +9 -0
- package/lib/AuthDialog/index.js +3 -3
- package/lib/ChartsConfig/Axis.js +10 -6
- package/lib/ChartsConfig/Input.js +183 -0
- package/lib/ChartsConfig/styles.js +9 -0
- package/package.json +1 -1
package/es/AuthDialog/index.js
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* user: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
17
17
|
* submit: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
18
18
|
* }),
|
|
19
|
-
* onClose: PropTypes.func
|
|
19
|
+
* onClose: PropTypes.func,
|
|
20
20
|
* onSubmit: PropTypes.func.isRequired
|
|
21
21
|
* };
|
|
22
22
|
* @demoReady
|
|
@@ -124,7 +124,7 @@ var AuthDialog = function AuthDialog(_ref) {
|
|
|
124
124
|
labels.header
|
|
125
125
|
)
|
|
126
126
|
),
|
|
127
|
-
React.createElement(
|
|
127
|
+
onClose && React.createElement(
|
|
128
128
|
IconButton,
|
|
129
129
|
{ className: classes.closeButton, onClick: onClose },
|
|
130
130
|
React.createElement(CloseIcon, null)
|
|
@@ -204,7 +204,7 @@ AuthDialog.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
204
204
|
user: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
205
205
|
submit: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
|
|
206
206
|
}),
|
|
207
|
-
onClose: PropTypes.func
|
|
207
|
+
onClose: PropTypes.func,
|
|
208
208
|
onSubmit: PropTypes.func.isRequired
|
|
209
209
|
} : {};
|
|
210
210
|
|
package/es/ChartsConfig/Axis.js
CHANGED
|
@@ -4,11 +4,11 @@ import React from 'react';
|
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import * as R from 'ramda';
|
|
6
6
|
import Grid from '@material-ui/core/Grid';
|
|
7
|
-
import Input from '
|
|
7
|
+
import Input from './Input';
|
|
8
8
|
import { isActive } from './utils';
|
|
9
9
|
import ContainerTitle from './ContainerTitle';
|
|
10
10
|
import { useStyles } from './styles';
|
|
11
|
-
|
|
11
|
+
import cx from 'classnames';
|
|
12
12
|
var AxisConfig = function AxisConfig(_ref) {
|
|
13
13
|
var icon = _ref.icon,
|
|
14
14
|
label = _ref.label,
|
|
@@ -24,10 +24,10 @@ var AxisConfig = function AxisConfig(_ref) {
|
|
|
24
24
|
{ variant: 'grey', icon: icon, label: label, gridItemProps: { xs: 12 } },
|
|
25
25
|
React.createElement(
|
|
26
26
|
Grid,
|
|
27
|
-
{ container: true, spacing: 1 },
|
|
27
|
+
{ container: true, spacing: 1, className: classes.inputContainer },
|
|
28
28
|
isActive(min) && React.createElement(
|
|
29
29
|
Grid,
|
|
30
|
-
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.axis },
|
|
30
|
+
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: cx(classes.axis, classes.wrapper) },
|
|
31
31
|
React.createElement(Input, _extends({}, min, {
|
|
32
32
|
value: R.when(R.isNil, R.always(''))(min.value),
|
|
33
33
|
type: 'number',
|
|
@@ -40,7 +40,7 @@ var AxisConfig = function AxisConfig(_ref) {
|
|
|
40
40
|
),
|
|
41
41
|
isActive(max) && React.createElement(
|
|
42
42
|
Grid,
|
|
43
|
-
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.axis },
|
|
43
|
+
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: cx(classes.axis, classes.wrapper) },
|
|
44
44
|
React.createElement(Input, _extends({}, max, {
|
|
45
45
|
value: R.when(R.isNil, R.always(''))(max.value),
|
|
46
46
|
type: 'number',
|
|
@@ -53,7 +53,7 @@ var AxisConfig = function AxisConfig(_ref) {
|
|
|
53
53
|
),
|
|
54
54
|
isActive(pivot) && React.createElement(
|
|
55
55
|
Grid,
|
|
56
|
-
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.axis },
|
|
56
|
+
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: cx(classes.axis, classes.wrapper) },
|
|
57
57
|
React.createElement(Input, _extends({}, pivot, {
|
|
58
58
|
value: R.when(R.isNil, R.always(''))(pivot.value),
|
|
59
59
|
type: 'number',
|
|
@@ -66,7 +66,7 @@ var AxisConfig = function AxisConfig(_ref) {
|
|
|
66
66
|
),
|
|
67
67
|
isActive(step) && React.createElement(
|
|
68
68
|
Grid,
|
|
69
|
-
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.axis },
|
|
69
|
+
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: cx(classes.axis, classes.wrapper) },
|
|
70
70
|
React.createElement(Input, _extends({}, step, {
|
|
71
71
|
value: R.when(R.isNil, R.always(''))(step.value),
|
|
72
72
|
type: 'number',
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
2
|
+
|
|
3
|
+
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
|
4
|
+
|
|
5
|
+
import React, { useEffect, useState } from 'react';
|
|
6
|
+
import PropTypes from 'prop-types';
|
|
7
|
+
import * as R from 'ramda';
|
|
8
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
9
|
+
import TextField from '@material-ui/core/TextField';
|
|
10
|
+
import InputAdornment from '@material-ui/core/InputAdornment';
|
|
11
|
+
import IconButton from '@material-ui/core/IconButton';
|
|
12
|
+
import Done from '@material-ui/icons/Done';
|
|
13
|
+
import RotateLeftIcon from '@material-ui/icons/RotateLeft';
|
|
14
|
+
|
|
15
|
+
var useStyles = makeStyles(function () {
|
|
16
|
+
return {
|
|
17
|
+
visibility: {
|
|
18
|
+
visibility: 'hidden'
|
|
19
|
+
},
|
|
20
|
+
input: {
|
|
21
|
+
'&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button': {
|
|
22
|
+
'-webkit-appearance': 'none',
|
|
23
|
+
margin: 0
|
|
24
|
+
},
|
|
25
|
+
'&[type=number]': {
|
|
26
|
+
'-moz-appearance': 'textfield'
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
var LefttIcon = function LefttIcon(_ref) {
|
|
33
|
+
var Icon = _ref.Icon;
|
|
34
|
+
return React.createElement(Icon, null);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
LefttIcon.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
38
|
+
Icon: PropTypes.object
|
|
39
|
+
} : {};
|
|
40
|
+
|
|
41
|
+
var RightIcon = function RightIcon(_ref2) {
|
|
42
|
+
var onSubmit = _ref2.onSubmit,
|
|
43
|
+
_ref2$Icon = _ref2.Icon,
|
|
44
|
+
Icon = _ref2$Icon === undefined ? Done : _ref2$Icon;
|
|
45
|
+
return React.createElement(
|
|
46
|
+
IconButton,
|
|
47
|
+
{ color: 'primary', onClick: function onClick() {
|
|
48
|
+
return onSubmit();
|
|
49
|
+
} },
|
|
50
|
+
React.createElement(Icon, null)
|
|
51
|
+
);
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
RightIcon.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
55
|
+
Icon: PropTypes.object,
|
|
56
|
+
onSubmit: PropTypes.func,
|
|
57
|
+
classes: PropTypes.object
|
|
58
|
+
} : {};
|
|
59
|
+
|
|
60
|
+
var MyInput = function MyInput(_ref3) {
|
|
61
|
+
var id = _ref3.id,
|
|
62
|
+
value = _ref3.value,
|
|
63
|
+
onSubmit = _ref3.onSubmit,
|
|
64
|
+
onReset = _ref3.onReset,
|
|
65
|
+
resetLabel = _ref3.resetLabel,
|
|
66
|
+
placeholder = _ref3.placeholder,
|
|
67
|
+
props = _objectWithoutProperties(_ref3, ['id', 'value', 'onSubmit', 'onReset', 'resetLabel', 'placeholder']);
|
|
68
|
+
|
|
69
|
+
var classes = useStyles();
|
|
70
|
+
|
|
71
|
+
var _useState = useState(value || ''),
|
|
72
|
+
inputValue = _useState[0],
|
|
73
|
+
setInputValue = _useState[1];
|
|
74
|
+
|
|
75
|
+
useEffect(function () {
|
|
76
|
+
setInputValue(value);
|
|
77
|
+
}, [value]);
|
|
78
|
+
|
|
79
|
+
var resetId = 'reset-' + id;
|
|
80
|
+
|
|
81
|
+
var handleBlur = function handleBlur(event) {
|
|
82
|
+
if (R.is(Function, onSubmit) && inputValue !== value) {
|
|
83
|
+
onSubmit(event.target.value);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
var handleReset = function handleReset() {
|
|
88
|
+
if (R.is(Function, onReset)) {
|
|
89
|
+
onReset();
|
|
90
|
+
} else {
|
|
91
|
+
setInputValue(value);
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
var onEnterLabel = function onEnterLabel(event) {
|
|
96
|
+
if (event.key === 'Enter') {
|
|
97
|
+
if (R.is(Function, onSubmit)) {
|
|
98
|
+
onSubmit(event.target.value);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
var handleChange = function handleChange(event) {
|
|
104
|
+
setInputValue(event.target.value);
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
var endAdornment = R.is(Function, onReset) || inputValue !== value ? React.createElement(
|
|
108
|
+
InputAdornment,
|
|
109
|
+
{ position: 'end' },
|
|
110
|
+
React.createElement(
|
|
111
|
+
IconButton,
|
|
112
|
+
{
|
|
113
|
+
id: resetId,
|
|
114
|
+
'aria-label': resetLabel,
|
|
115
|
+
onKeyPress: onEnterLabel,
|
|
116
|
+
onClick: handleReset
|
|
117
|
+
},
|
|
118
|
+
React.createElement(RotateLeftIcon, { fontSize: 'small' })
|
|
119
|
+
)
|
|
120
|
+
) : null;
|
|
121
|
+
|
|
122
|
+
return React.createElement(TextField, _extends({
|
|
123
|
+
inputProps: {
|
|
124
|
+
className: classes.input
|
|
125
|
+
},
|
|
126
|
+
onBlur: handleBlur,
|
|
127
|
+
margin: 'dense',
|
|
128
|
+
variant: 'outlined',
|
|
129
|
+
onKeyPress: onEnterLabel,
|
|
130
|
+
onChange: handleChange,
|
|
131
|
+
id: id,
|
|
132
|
+
value: inputValue,
|
|
133
|
+
InputProps: {
|
|
134
|
+
endAdornment: endAdornment
|
|
135
|
+
},
|
|
136
|
+
placeholder: R.is(Number)(placeholder) ? R.toString(placeholder) : placeholder
|
|
137
|
+
}, R.omit(['isActive'])(props)));
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
export { MyInput };
|
|
141
|
+
MyInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
142
|
+
id: PropTypes.string,
|
|
143
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
144
|
+
onSubmit: PropTypes.func,
|
|
145
|
+
onReset: PropTypes.func,
|
|
146
|
+
resetLabel: PropTypes.string,
|
|
147
|
+
placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
148
|
+
} : {};
|
|
149
|
+
|
|
150
|
+
export default MyInput;
|
|
@@ -36,6 +36,15 @@ export var useStyles = makeStyles(function (theme) {
|
|
|
36
36
|
},
|
|
37
37
|
marginDense: {
|
|
38
38
|
marginBottom: '0px !important'
|
|
39
|
+
},
|
|
40
|
+
wrapper: {
|
|
41
|
+
'& fieldset': {
|
|
42
|
+
minWidth: 44,
|
|
43
|
+
paddingRight: 0,
|
|
44
|
+
marginRight: 0,
|
|
45
|
+
paddingLeft: 0,
|
|
46
|
+
marginLeft: 0
|
|
47
|
+
}
|
|
39
48
|
}
|
|
40
49
|
};
|
|
41
50
|
});
|
package/lib/AuthDialog/index.js
CHANGED
|
@@ -66,7 +66,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
66
66
|
* user: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
67
67
|
* submit: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
68
68
|
* }),
|
|
69
|
-
* onClose: PropTypes.func
|
|
69
|
+
* onClose: PropTypes.func,
|
|
70
70
|
* onSubmit: PropTypes.func.isRequired
|
|
71
71
|
* };
|
|
72
72
|
* @demoReady
|
|
@@ -161,7 +161,7 @@ var AuthDialog = function AuthDialog(_ref) {
|
|
|
161
161
|
labels.header
|
|
162
162
|
)
|
|
163
163
|
),
|
|
164
|
-
_react2.default.createElement(
|
|
164
|
+
onClose && _react2.default.createElement(
|
|
165
165
|
_IconButton2.default,
|
|
166
166
|
{ className: classes.closeButton, onClick: onClose },
|
|
167
167
|
_react2.default.createElement(_Close2.default, null)
|
|
@@ -241,7 +241,7 @@ AuthDialog.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
241
241
|
user: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
|
|
242
242
|
submit: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node])
|
|
243
243
|
}),
|
|
244
|
-
onClose: _propTypes2.default.func
|
|
244
|
+
onClose: _propTypes2.default.func,
|
|
245
245
|
onSubmit: _propTypes2.default.func.isRequired
|
|
246
246
|
} : {};
|
|
247
247
|
|
package/lib/ChartsConfig/Axis.js
CHANGED
|
@@ -20,7 +20,7 @@ var _Grid = require('@material-ui/core/Grid');
|
|
|
20
20
|
|
|
21
21
|
var _Grid2 = _interopRequireDefault(_Grid);
|
|
22
22
|
|
|
23
|
-
var _Input = require('
|
|
23
|
+
var _Input = require('./Input');
|
|
24
24
|
|
|
25
25
|
var _Input2 = _interopRequireDefault(_Input);
|
|
26
26
|
|
|
@@ -32,6 +32,10 @@ var _ContainerTitle2 = _interopRequireDefault(_ContainerTitle);
|
|
|
32
32
|
|
|
33
33
|
var _styles = require('./styles');
|
|
34
34
|
|
|
35
|
+
var _classnames = require('classnames');
|
|
36
|
+
|
|
37
|
+
var _classnames2 = _interopRequireDefault(_classnames);
|
|
38
|
+
|
|
35
39
|
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; } }
|
|
36
40
|
|
|
37
41
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -51,10 +55,10 @@ var AxisConfig = function AxisConfig(_ref) {
|
|
|
51
55
|
{ variant: 'grey', icon: icon, label: label, gridItemProps: { xs: 12 } },
|
|
52
56
|
_react2.default.createElement(
|
|
53
57
|
_Grid2.default,
|
|
54
|
-
{ container: true, spacing: 1 },
|
|
58
|
+
{ container: true, spacing: 1, className: classes.inputContainer },
|
|
55
59
|
(0, _utils.isActive)(min) && _react2.default.createElement(
|
|
56
60
|
_Grid2.default,
|
|
57
|
-
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.axis },
|
|
61
|
+
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: (0, _classnames2.default)(classes.axis, classes.wrapper) },
|
|
58
62
|
_react2.default.createElement(_Input2.default, _extends({}, min, {
|
|
59
63
|
value: R.when(R.isNil, R.always(''))(min.value),
|
|
60
64
|
type: 'number',
|
|
@@ -67,7 +71,7 @@ var AxisConfig = function AxisConfig(_ref) {
|
|
|
67
71
|
),
|
|
68
72
|
(0, _utils.isActive)(max) && _react2.default.createElement(
|
|
69
73
|
_Grid2.default,
|
|
70
|
-
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.axis },
|
|
74
|
+
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: (0, _classnames2.default)(classes.axis, classes.wrapper) },
|
|
71
75
|
_react2.default.createElement(_Input2.default, _extends({}, max, {
|
|
72
76
|
value: R.when(R.isNil, R.always(''))(max.value),
|
|
73
77
|
type: 'number',
|
|
@@ -80,7 +84,7 @@ var AxisConfig = function AxisConfig(_ref) {
|
|
|
80
84
|
),
|
|
81
85
|
(0, _utils.isActive)(pivot) && _react2.default.createElement(
|
|
82
86
|
_Grid2.default,
|
|
83
|
-
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.axis },
|
|
87
|
+
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: (0, _classnames2.default)(classes.axis, classes.wrapper) },
|
|
84
88
|
_react2.default.createElement(_Input2.default, _extends({}, pivot, {
|
|
85
89
|
value: R.when(R.isNil, R.always(''))(pivot.value),
|
|
86
90
|
type: 'number',
|
|
@@ -93,7 +97,7 @@ var AxisConfig = function AxisConfig(_ref) {
|
|
|
93
97
|
),
|
|
94
98
|
(0, _utils.isActive)(step) && _react2.default.createElement(
|
|
95
99
|
_Grid2.default,
|
|
96
|
-
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.axis },
|
|
100
|
+
{ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: (0, _classnames2.default)(classes.axis, classes.wrapper) },
|
|
97
101
|
_react2.default.createElement(_Input2.default, _extends({}, step, {
|
|
98
102
|
value: R.when(R.isNil, R.always(''))(step.value),
|
|
99
103
|
type: 'number',
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.MyInput = undefined;
|
|
5
|
+
|
|
6
|
+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
7
|
+
|
|
8
|
+
var _react = require('react');
|
|
9
|
+
|
|
10
|
+
var _react2 = _interopRequireDefault(_react);
|
|
11
|
+
|
|
12
|
+
var _propTypes = require('prop-types');
|
|
13
|
+
|
|
14
|
+
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
15
|
+
|
|
16
|
+
var _ramda = require('ramda');
|
|
17
|
+
|
|
18
|
+
var R = _interopRequireWildcard(_ramda);
|
|
19
|
+
|
|
20
|
+
var _styles = require('@material-ui/core/styles');
|
|
21
|
+
|
|
22
|
+
var _TextField = require('@material-ui/core/TextField');
|
|
23
|
+
|
|
24
|
+
var _TextField2 = _interopRequireDefault(_TextField);
|
|
25
|
+
|
|
26
|
+
var _InputAdornment = require('@material-ui/core/InputAdornment');
|
|
27
|
+
|
|
28
|
+
var _InputAdornment2 = _interopRequireDefault(_InputAdornment);
|
|
29
|
+
|
|
30
|
+
var _IconButton = require('@material-ui/core/IconButton');
|
|
31
|
+
|
|
32
|
+
var _IconButton2 = _interopRequireDefault(_IconButton);
|
|
33
|
+
|
|
34
|
+
var _Done = require('@material-ui/icons/Done');
|
|
35
|
+
|
|
36
|
+
var _Done2 = _interopRequireDefault(_Done);
|
|
37
|
+
|
|
38
|
+
var _RotateLeft = require('@material-ui/icons/RotateLeft');
|
|
39
|
+
|
|
40
|
+
var _RotateLeft2 = _interopRequireDefault(_RotateLeft);
|
|
41
|
+
|
|
42
|
+
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; } }
|
|
43
|
+
|
|
44
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
45
|
+
|
|
46
|
+
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
|
47
|
+
|
|
48
|
+
var useStyles = (0, _styles.makeStyles)(function () {
|
|
49
|
+
return {
|
|
50
|
+
visibility: {
|
|
51
|
+
visibility: 'hidden'
|
|
52
|
+
},
|
|
53
|
+
input: {
|
|
54
|
+
'&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button': {
|
|
55
|
+
'-webkit-appearance': 'none',
|
|
56
|
+
margin: 0
|
|
57
|
+
},
|
|
58
|
+
'&[type=number]': {
|
|
59
|
+
'-moz-appearance': 'textfield'
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
var LefttIcon = function LefttIcon(_ref) {
|
|
66
|
+
var Icon = _ref.Icon;
|
|
67
|
+
return _react2.default.createElement(Icon, null);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
LefttIcon.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
71
|
+
Icon: _propTypes2.default.object
|
|
72
|
+
} : {};
|
|
73
|
+
|
|
74
|
+
var RightIcon = function RightIcon(_ref2) {
|
|
75
|
+
var onSubmit = _ref2.onSubmit,
|
|
76
|
+
_ref2$Icon = _ref2.Icon,
|
|
77
|
+
Icon = _ref2$Icon === undefined ? _Done2.default : _ref2$Icon;
|
|
78
|
+
return _react2.default.createElement(
|
|
79
|
+
_IconButton2.default,
|
|
80
|
+
{ color: 'primary', onClick: function onClick() {
|
|
81
|
+
return onSubmit();
|
|
82
|
+
} },
|
|
83
|
+
_react2.default.createElement(Icon, null)
|
|
84
|
+
);
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
RightIcon.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
88
|
+
Icon: _propTypes2.default.object,
|
|
89
|
+
onSubmit: _propTypes2.default.func,
|
|
90
|
+
classes: _propTypes2.default.object
|
|
91
|
+
} : {};
|
|
92
|
+
|
|
93
|
+
var MyInput = function MyInput(_ref3) {
|
|
94
|
+
var id = _ref3.id,
|
|
95
|
+
value = _ref3.value,
|
|
96
|
+
onSubmit = _ref3.onSubmit,
|
|
97
|
+
onReset = _ref3.onReset,
|
|
98
|
+
resetLabel = _ref3.resetLabel,
|
|
99
|
+
placeholder = _ref3.placeholder,
|
|
100
|
+
props = _objectWithoutProperties(_ref3, ['id', 'value', 'onSubmit', 'onReset', 'resetLabel', 'placeholder']);
|
|
101
|
+
|
|
102
|
+
var classes = useStyles();
|
|
103
|
+
|
|
104
|
+
var _useState = (0, _react.useState)(value || ''),
|
|
105
|
+
inputValue = _useState[0],
|
|
106
|
+
setInputValue = _useState[1];
|
|
107
|
+
|
|
108
|
+
(0, _react.useEffect)(function () {
|
|
109
|
+
setInputValue(value);
|
|
110
|
+
}, [value]);
|
|
111
|
+
|
|
112
|
+
var resetId = 'reset-' + id;
|
|
113
|
+
|
|
114
|
+
var handleBlur = function handleBlur(event) {
|
|
115
|
+
if (R.is(Function, onSubmit) && inputValue !== value) {
|
|
116
|
+
onSubmit(event.target.value);
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
var handleReset = function handleReset() {
|
|
121
|
+
if (R.is(Function, onReset)) {
|
|
122
|
+
onReset();
|
|
123
|
+
} else {
|
|
124
|
+
setInputValue(value);
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
var onEnterLabel = function onEnterLabel(event) {
|
|
129
|
+
if (event.key === 'Enter') {
|
|
130
|
+
if (R.is(Function, onSubmit)) {
|
|
131
|
+
onSubmit(event.target.value);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
var handleChange = function handleChange(event) {
|
|
137
|
+
setInputValue(event.target.value);
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
var endAdornment = R.is(Function, onReset) || inputValue !== value ? _react2.default.createElement(
|
|
141
|
+
_InputAdornment2.default,
|
|
142
|
+
{ position: 'end' },
|
|
143
|
+
_react2.default.createElement(
|
|
144
|
+
_IconButton2.default,
|
|
145
|
+
{
|
|
146
|
+
id: resetId,
|
|
147
|
+
'aria-label': resetLabel,
|
|
148
|
+
onKeyPress: onEnterLabel,
|
|
149
|
+
onClick: handleReset
|
|
150
|
+
},
|
|
151
|
+
_react2.default.createElement(_RotateLeft2.default, { fontSize: 'small' })
|
|
152
|
+
)
|
|
153
|
+
) : null;
|
|
154
|
+
|
|
155
|
+
return _react2.default.createElement(_TextField2.default, _extends({
|
|
156
|
+
inputProps: {
|
|
157
|
+
className: classes.input
|
|
158
|
+
},
|
|
159
|
+
onBlur: handleBlur,
|
|
160
|
+
margin: 'dense',
|
|
161
|
+
variant: 'outlined',
|
|
162
|
+
onKeyPress: onEnterLabel,
|
|
163
|
+
onChange: handleChange,
|
|
164
|
+
id: id,
|
|
165
|
+
value: inputValue,
|
|
166
|
+
InputProps: {
|
|
167
|
+
endAdornment: endAdornment
|
|
168
|
+
},
|
|
169
|
+
placeholder: R.is(Number)(placeholder) ? R.toString(placeholder) : placeholder
|
|
170
|
+
}, R.omit(['isActive'])(props)));
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
exports.MyInput = MyInput;
|
|
174
|
+
MyInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
175
|
+
id: _propTypes2.default.string,
|
|
176
|
+
value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
|
177
|
+
onSubmit: _propTypes2.default.func,
|
|
178
|
+
onReset: _propTypes2.default.func,
|
|
179
|
+
resetLabel: _propTypes2.default.string,
|
|
180
|
+
placeholder: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])
|
|
181
|
+
} : {};
|
|
182
|
+
|
|
183
|
+
exports.default = MyInput;
|
|
@@ -46,6 +46,15 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
|
|
|
46
46
|
},
|
|
47
47
|
marginDense: {
|
|
48
48
|
marginBottom: '0px !important'
|
|
49
|
+
},
|
|
50
|
+
wrapper: {
|
|
51
|
+
'& fieldset': {
|
|
52
|
+
minWidth: 44,
|
|
53
|
+
paddingRight: 0,
|
|
54
|
+
marginRight: 0,
|
|
55
|
+
paddingLeft: 0,
|
|
56
|
+
marginLeft: 0
|
|
57
|
+
}
|
|
49
58
|
}
|
|
50
59
|
};
|
|
51
60
|
});
|