tenjin-ui-kit 0.3.49 → 0.3.51
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/components/input/index.js +84 -49
- package/package.json +1 -1
|
@@ -9,10 +9,10 @@ var _material = require("@mui/material");
|
|
|
9
9
|
var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
|
|
10
10
|
var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
|
|
11
11
|
var _styles = require("@mui/material/styles");
|
|
12
|
-
var _react =
|
|
12
|
+
var _react = require("react");
|
|
13
13
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
14
14
|
var _text = _interopRequireDefault(require("../text"));
|
|
15
|
-
var _excluded = ["label", "id", "fullWidth", "disableAutocomplete", "startIcon", "endIcon", "size", "error", "errorMessage", "isRequired", "isDisabled", "isPastDateDisabled", "readOnly", "helperText", "autoFocus", "onBlurDelay"];
|
|
15
|
+
var _excluded = ["label", "id", "fullWidth", "disableAutocomplete", "startIcon", "endIcon", "size", "error", "errorMessage", "isRequired", "isDisabled", "isPastDateDisabled", "readOnly", "helperText", "autoFocus", "onBlurDelay", "restrictSpecialChars", "input", "meta"];
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
|
|
18
18
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
@@ -20,9 +20,16 @@ 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) {
|
|
32
|
+
var _input$value;
|
|
26
33
|
var label = _ref.label,
|
|
27
34
|
id = _ref.id,
|
|
28
35
|
fullWidth = _ref.fullWidth,
|
|
@@ -39,27 +46,86 @@ var Input = function Input(_ref) {
|
|
|
39
46
|
helperText = _ref.helperText,
|
|
40
47
|
autoFocus = _ref.autoFocus,
|
|
41
48
|
onBlurDelay = _ref.onBlurDelay,
|
|
49
|
+
_ref$restrictSpecialC = _ref.restrictSpecialChars,
|
|
50
|
+
restrictSpecialChars = _ref$restrictSpecialC === void 0 ? false : _ref$restrictSpecialC,
|
|
51
|
+
input = _ref.input,
|
|
52
|
+
meta = _ref.meta,
|
|
42
53
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
43
54
|
var theme = (0, _styles.useTheme)();
|
|
44
55
|
var minDate = new Date().toISOString().split("T")[0];
|
|
45
|
-
|
|
56
|
+
var isUsingRFF = !!input && typeof input.onChange === "function";
|
|
57
|
+
var _useState = (0, _react.useState)(rest.value || ""),
|
|
58
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
59
|
+
localValue = _useState2[0],
|
|
60
|
+
setLocalValue = _useState2[1];
|
|
61
|
+
var _useState3 = (0, _react.useState)(false),
|
|
62
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
63
|
+
localError = _useState4[0],
|
|
64
|
+
setLocalError = _useState4[1];
|
|
65
|
+
var _useState5 = (0, _react.useState)(""),
|
|
66
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
67
|
+
localErrorMessage = _useState6[0],
|
|
68
|
+
setLocalErrorMessage = _useState6[1];
|
|
69
|
+
(0, _react.useEffect)(function () {
|
|
70
|
+
if (!isUsingRFF && rest.value !== undefined) {
|
|
71
|
+
setLocalValue(rest.value);
|
|
72
|
+
}
|
|
73
|
+
}, [rest.value, isUsingRFF]);
|
|
74
|
+
var showError = function showError(message) {
|
|
75
|
+
setLocalError(true);
|
|
76
|
+
setLocalErrorMessage(message);
|
|
77
|
+
};
|
|
78
|
+
var clearError = function clearError() {
|
|
79
|
+
setLocalError(false);
|
|
80
|
+
setLocalErrorMessage("");
|
|
81
|
+
};
|
|
82
|
+
var handleChange = function handleChange(e) {
|
|
83
|
+
var value = e.target.value;
|
|
84
|
+
if (restrictSpecialChars) {
|
|
85
|
+
var filteredValue = value.replace(/[^a-zA-Z0-9.,@_\-() ]/g, "");
|
|
86
|
+
if (filteredValue !== value) {
|
|
87
|
+
showError("Only letters, numbers, and . , _ - @ ( ) are allowed.");
|
|
88
|
+
value = filteredValue;
|
|
89
|
+
} else {
|
|
90
|
+
clearError();
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
setLocalValue(value);
|
|
94
|
+
if (isUsingRFF) {
|
|
95
|
+
input.onChange(_objectSpread(_objectSpread({}, e), {}, {
|
|
96
|
+
target: _objectSpread(_objectSpread({}, e.target), {}, {
|
|
97
|
+
value: value
|
|
98
|
+
})
|
|
99
|
+
}));
|
|
100
|
+
} else if (typeof rest.onChange === "function") {
|
|
101
|
+
rest.onChange(_objectSpread(_objectSpread({}, e), {}, {
|
|
102
|
+
target: _objectSpread(_objectSpread({}, e.target), {}, {
|
|
103
|
+
value: value
|
|
104
|
+
})
|
|
105
|
+
}));
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
var value = isUsingRFF ? (_input$value = input.value) !== null && _input$value !== void 0 ? _input$value : "" : localValue;
|
|
109
|
+
var effectiveError = localError || isUsingRFF && (meta === null || meta === void 0 ? void 0 : meta.touched) && (meta.error || errorMessage) || errorMessage || error;
|
|
110
|
+
return /*#__PURE__*/React.createElement(_FormControl.default, {
|
|
46
111
|
variant: "standard",
|
|
47
112
|
fullWidth: fullWidth
|
|
48
|
-
}, label && /*#__PURE__*/
|
|
113
|
+
}, label && /*#__PURE__*/React.createElement(_material.FormLabel, {
|
|
49
114
|
sx: {
|
|
50
115
|
fontSize: "0.8rem",
|
|
51
116
|
fontWeight: 500,
|
|
52
117
|
paddingBottom: "0.2rem"
|
|
53
118
|
},
|
|
54
119
|
htmlFor: id
|
|
55
|
-
}, /*#__PURE__*/
|
|
120
|
+
}, /*#__PURE__*/React.createElement(_text.default, null, label, isRequired ? /*#__PURE__*/React.createElement("span", {
|
|
56
121
|
style: {
|
|
57
122
|
color: "red"
|
|
58
123
|
}
|
|
59
|
-
}, " * ") : "")),
|
|
124
|
+
}, " * ") : "")), /*#__PURE__*/React.createElement(_material.OutlinedInput, _extends({
|
|
60
125
|
id: id,
|
|
126
|
+
value: value,
|
|
61
127
|
required: isRequired,
|
|
62
|
-
autoComplete: disableAutocomplete ? "
|
|
128
|
+
autoComplete: disableAutocomplete ? "off" : "on",
|
|
63
129
|
sx: {
|
|
64
130
|
"& input": {
|
|
65
131
|
backgroundColor: isDisabled && "#DDDDDD",
|
|
@@ -75,48 +141,14 @@ var Input = function Input(_ref) {
|
|
|
75
141
|
},
|
|
76
142
|
startAdornment: startIcon,
|
|
77
143
|
endAdornment: endIcon,
|
|
78
|
-
helperText: errorMessage,
|
|
79
|
-
disabled: isDisabled,
|
|
80
|
-
onBlur: function onBlur(e) {
|
|
81
|
-
setTimeout(function () {
|
|
82
|
-
if (e && typeof rest.onBlur === "function") {
|
|
83
|
-
rest.onBlur(e);
|
|
84
|
-
}
|
|
85
|
-
}, onBlurDelay || 100);
|
|
86
|
-
},
|
|
87
|
-
autoFocus: !!autoFocus ? rest.value ? rest.value : true : false,
|
|
88
|
-
inputProps: _objectSpread({
|
|
89
|
-
readOnly: readOnly ? "readOnly" : null
|
|
90
|
-
}, isPastDateDisabled && {
|
|
91
|
-
min: minDate
|
|
92
|
-
})
|
|
93
|
-
}, rest)), error && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.OutlinedInput, _extends({
|
|
94
|
-
required: isRequired,
|
|
95
|
-
id: id,
|
|
96
|
-
autoComplete: disableAutocomplete ? "nothing" : null,
|
|
97
144
|
disabled: isDisabled,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
backgroundColor: isDisabled && "#DDDDDD",
|
|
101
|
-
color: isDisabled && "#000000"
|
|
102
|
-
},
|
|
103
|
-
"& label": {
|
|
104
|
-
fontWeight: 500
|
|
105
|
-
},
|
|
106
|
-
"& svg": {
|
|
107
|
-
marginRight: startIcon ? theme.spacing(1) : 0,
|
|
108
|
-
marginLeft: endIcon ? theme.spacing(1) : 0
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
startAdornment: startIcon,
|
|
112
|
-
endAdornment: endIcon,
|
|
113
|
-
helperText: errorMessage,
|
|
114
|
-
error: true,
|
|
145
|
+
error: !!effectiveError,
|
|
146
|
+
onChange: handleChange,
|
|
115
147
|
onBlur: function onBlur(e) {
|
|
116
148
|
setTimeout(function () {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
149
|
+
var _input$onBlur;
|
|
150
|
+
if (isUsingRFF) (_input$onBlur = input.onBlur) === null || _input$onBlur === void 0 ? void 0 : _input$onBlur.call(input, e);
|
|
151
|
+
if (typeof rest.onBlur === "function") rest.onBlur(e);
|
|
120
152
|
}, onBlurDelay || 100);
|
|
121
153
|
},
|
|
122
154
|
autoFocus: !!autoFocus ? rest.value ? rest.value : true : false,
|
|
@@ -125,12 +157,12 @@ var Input = function Input(_ref) {
|
|
|
125
157
|
}, isPastDateDisabled && {
|
|
126
158
|
min: minDate
|
|
127
159
|
})
|
|
128
|
-
}, rest)), /*#__PURE__*/
|
|
160
|
+
}, rest)), effectiveError && /*#__PURE__*/React.createElement(_material.FormHelperText, {
|
|
129
161
|
sx: {
|
|
130
162
|
color: "red"
|
|
131
163
|
},
|
|
132
164
|
id: "component-error-text"
|
|
133
|
-
},
|
|
165
|
+
}, localErrorMessage || helperText));
|
|
134
166
|
};
|
|
135
167
|
Input.propTypes = {
|
|
136
168
|
label: _propTypes.default.string,
|
|
@@ -144,7 +176,10 @@ Input.propTypes = {
|
|
|
144
176
|
isDisabled: _propTypes.default.bool,
|
|
145
177
|
readOnly: _propTypes.default.bool,
|
|
146
178
|
// Added readOnly prop type
|
|
147
|
-
autoFocus: _propTypes.default.bool
|
|
179
|
+
autoFocus: _propTypes.default.bool,
|
|
180
|
+
restrictSpecialChars: _propTypes.default.bool,
|
|
181
|
+
input: _propTypes.default.object,
|
|
182
|
+
meta: _propTypes.default.object
|
|
148
183
|
};
|
|
149
184
|
var _default = Input;
|
|
150
185
|
exports.default = _default;
|