linear-react-components-ui 1.1.6 → 1.1.8
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/.eslintcache +1 -1
- package/lib/form/FieldPeriod.js +1 -1
- package/lib/inputs/base/types.d.ts +2 -0
- package/lib/inputs/date/index.js +1 -2
- package/lib/inputs/errorMessage/index.d.ts +0 -1
- package/lib/inputs/inputHOC.d.ts +0 -1
- package/lib/inputs/mask/BaseMask.d.ts +2 -6
- package/lib/inputs/mask/BaseMask.js +91 -10
- package/lib/inputs/mask/Cnpj.d.ts +0 -1
- package/lib/inputs/mask/Cpf.d.ts +0 -1
- package/lib/inputs/mask/Cpf.js +1 -1
- package/lib/inputs/mask/Phone.d.ts +0 -1
- package/lib/inputs/mask/ZipCode.d.ts +0 -1
- package/lib/inputs/mask/helpers.d.ts +48 -12
- package/lib/inputs/mask/helpers.js +56 -12
- package/lib/inputs/mask/index.d.ts +2 -3
- package/lib/inputs/mask/types.d.ts +16 -19
- package/lib/inputs/number/BaseNumber.d.ts +0 -1
- package/lib/inputs/number/Currency.d.ts +0 -1
- package/lib/inputs/number/Decimal.d.ts +0 -1
- package/lib/inputs/number/index.d.ts +0 -1
- package/lib/inputs/number/types.d.ts +1 -2
- package/lib/inputs/period/index.js +44 -25
- package/lib/inputs/search/index.d.ts +0 -1
- package/lib/inputs/select/ActionButtons.d.ts +0 -1
- package/lib/inputs/select/Dropdown.d.ts +0 -1
- package/lib/inputs/select/helper.d.ts +0 -1
- package/lib/inputs/types.d.ts +2 -3
- package/package.json +2 -2
- package/lib/inputs/mask/imaskHOC.d.ts +0 -20
- package/lib/inputs/mask/imaskHOC.js +0 -205
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { IDropdownSelectProps } from '../types.js';
|
|
2
2
|
import { GetSimpleFilteredParams, GetMultipleFilteredParams } from './types.js';
|
|
3
3
|
import 'react';
|
|
4
|
-
import 'imask';
|
|
5
4
|
import '../../@types/PermissionAttr.js';
|
|
6
5
|
import '../../@types/DataCombo.js';
|
|
7
6
|
import '../base/types.js';
|
package/lib/inputs/types.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ReactNode, MouseEvent, MutableRefObject, CSSProperties, KeyboardEvent, ReactElement } from 'react';
|
|
2
|
-
import IMask from 'imask';
|
|
3
2
|
import { PermissionAttr, OnDenied } from '../@types/PermissionAttr.js';
|
|
4
3
|
import { DataCombo } from '../@types/DataCombo.js';
|
|
5
4
|
import { IBaseProps, CustomInputEvent } from './base/types.js';
|
|
@@ -64,7 +63,7 @@ interface IMaskHOCProps {
|
|
|
64
63
|
inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
|
|
65
64
|
placeholderChar?: string;
|
|
66
65
|
lazy?: boolean;
|
|
67
|
-
definitions?:
|
|
66
|
+
definitions?: any;
|
|
68
67
|
groups?: object;
|
|
69
68
|
pattern?: string;
|
|
70
69
|
format?: () => void;
|
|
@@ -99,7 +98,7 @@ interface IMaskHOCProps {
|
|
|
99
98
|
rounded?: boolean;
|
|
100
99
|
errorMessages?: string[];
|
|
101
100
|
skeletonize?: boolean;
|
|
102
|
-
mask?:
|
|
101
|
+
mask?: any;
|
|
103
102
|
isDateField?: boolean;
|
|
104
103
|
autoCompleteMask?: 'left' | 'right';
|
|
105
104
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "linear-react-components-ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.8",
|
|
4
4
|
"description": "Linear Sistemas ReactJs Components",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib/index.cjs",
|
|
@@ -46,12 +46,12 @@
|
|
|
46
46
|
"browserslist": "4.23.0",
|
|
47
47
|
"esbuild": "0.21.5",
|
|
48
48
|
"history": "5.0.0",
|
|
49
|
-
"imask": "6.4.3",
|
|
50
49
|
"init": "0.1.2",
|
|
51
50
|
"lodash": "4.17.21",
|
|
52
51
|
"moment": "2.30.1",
|
|
53
52
|
"prop-types": "15.8.1",
|
|
54
53
|
"react-dev-utils": "12.0.0",
|
|
54
|
+
"react-imask": "^7.6.1",
|
|
55
55
|
"react-router-dom": "6.21.3",
|
|
56
56
|
"react-syntax-highlighter": "15.5.0",
|
|
57
57
|
"semver": "7.5.4",
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { IMaskHOCProps } from '../types.js';
|
|
3
|
-
import 'imask';
|
|
4
|
-
import '../../@types/PermissionAttr.js';
|
|
5
|
-
import '../../@types/DataCombo.js';
|
|
6
|
-
import '../base/types.js';
|
|
7
|
-
import '../../@types/Align.js';
|
|
8
|
-
import '../../@types/Period.js';
|
|
9
|
-
import '../../internals/types.js';
|
|
10
|
-
import '../../@types/Position.js';
|
|
11
|
-
import '../../drawer/types.js';
|
|
12
|
-
import '../../@types/Icon.js';
|
|
13
|
-
import '../../icons/helper.js';
|
|
14
|
-
|
|
15
|
-
declare const IMaskHOC: <ComponentProps extends IMaskHOCProps>(ComposedComponent: React__default.ComponentType<ComponentProps>) => {
|
|
16
|
-
(props: ComponentProps): JSX.Element;
|
|
17
|
-
displayName: string;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export { IMaskHOC as default };
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _imask = _interopRequireDefault(require("imask"));
|
|
9
|
-
var helpers = _interopRequireWildcard(require("./helpers"));
|
|
10
|
-
var _permissionValidations = require("../../permissionValidations");
|
|
11
|
-
var _format_number = require("../number/format_number");
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
-
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); }
|
|
16
|
-
const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
|
|
17
|
-
const IMaskHOC = ComposedComponent => {
|
|
18
|
-
const MaskedComponent = props => {
|
|
19
|
-
const {
|
|
20
|
-
permissionAttr,
|
|
21
|
-
skeletonize,
|
|
22
|
-
inputRef,
|
|
23
|
-
placeholderChar = '_',
|
|
24
|
-
lazy = false,
|
|
25
|
-
pattern = '',
|
|
26
|
-
radix = ' ',
|
|
27
|
-
thousandsSeparator = '',
|
|
28
|
-
mapToRadix = [],
|
|
29
|
-
scale = 2,
|
|
30
|
-
signed = false,
|
|
31
|
-
normalizeZeros = true,
|
|
32
|
-
padFractionalZeros = true,
|
|
33
|
-
mask,
|
|
34
|
-
commit = () => {},
|
|
35
|
-
parse,
|
|
36
|
-
format,
|
|
37
|
-
definitions,
|
|
38
|
-
groups,
|
|
39
|
-
min,
|
|
40
|
-
max,
|
|
41
|
-
dispatch,
|
|
42
|
-
value = '',
|
|
43
|
-
onChange,
|
|
44
|
-
isDateField = false,
|
|
45
|
-
autoCompleteMask
|
|
46
|
-
} = props;
|
|
47
|
-
const maskOptions = {
|
|
48
|
-
placeholderChar: placeholderChar === '' ? ' ' : placeholderChar,
|
|
49
|
-
lazy,
|
|
50
|
-
pattern,
|
|
51
|
-
radix,
|
|
52
|
-
thousandsSeparator,
|
|
53
|
-
mapToRadix,
|
|
54
|
-
scale,
|
|
55
|
-
signed,
|
|
56
|
-
normalizeZeros,
|
|
57
|
-
padFractionalZeros,
|
|
58
|
-
mask,
|
|
59
|
-
commit,
|
|
60
|
-
parse,
|
|
61
|
-
format,
|
|
62
|
-
definitions,
|
|
63
|
-
groups,
|
|
64
|
-
min,
|
|
65
|
-
max,
|
|
66
|
-
dispatch
|
|
67
|
-
};
|
|
68
|
-
const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
|
|
69
|
-
const elementRef = (0, _react.useRef)(null);
|
|
70
|
-
const maskRef = (0, _react.useRef)(null);
|
|
71
|
-
const {
|
|
72
|
-
hideContent,
|
|
73
|
-
unvisible,
|
|
74
|
-
disabled,
|
|
75
|
-
readOnly
|
|
76
|
-
} = onDenied;
|
|
77
|
-
const dontInitMask = hideContent || unvisible || skeletonize;
|
|
78
|
-
const disableCallbacks = disabled || readOnly;
|
|
79
|
-
const setValue = newValue => {
|
|
80
|
-
if (maskRef.current) {
|
|
81
|
-
if (props.unmask) maskRef.current.unmaskedValue = newValue.toString();
|
|
82
|
-
maskRef.current.value = String(newValue);
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
const onAccept = (0, _react.useCallback)(() => {
|
|
86
|
-
if (onChange && !disableCallbacks && maskRef.current) {
|
|
87
|
-
const {
|
|
88
|
-
unmaskedValue,
|
|
89
|
-
value: maskedValue,
|
|
90
|
-
el
|
|
91
|
-
} = maskRef.current;
|
|
92
|
-
const name = el.name || el.input && el.input.name;
|
|
93
|
-
onChange({
|
|
94
|
-
target: {
|
|
95
|
-
value: isDateField ? maskedValue : unmaskedValue,
|
|
96
|
-
name
|
|
97
|
-
}
|
|
98
|
-
}, props.unmask ? unmaskedValue : maskRef.current.value);
|
|
99
|
-
}
|
|
100
|
-
}, [onChange]);
|
|
101
|
-
const onComplete = (0, _react.useCallback)(() => {
|
|
102
|
-
if (props.onComplete && !disableCallbacks && maskRef.current) {
|
|
103
|
-
const {
|
|
104
|
-
unmaskedValue,
|
|
105
|
-
value: maskedValue,
|
|
106
|
-
el
|
|
107
|
-
} = maskRef.current;
|
|
108
|
-
const name = el.name || el.input && el.input.name;
|
|
109
|
-
props.onComplete({
|
|
110
|
-
target: {
|
|
111
|
-
value: isDateField ? maskedValue : unmaskedValue,
|
|
112
|
-
name
|
|
113
|
-
}
|
|
114
|
-
}, props.unmask ? unmaskedValue : maskRef.current.value);
|
|
115
|
-
}
|
|
116
|
-
}, [props.onComplete]);
|
|
117
|
-
const autoCompleteMaskValue = (0, _react.useCallback)(eventTargetValue => {
|
|
118
|
-
if (autoCompleteMask && eventTargetValue.length && maskRef.current && elementRef.current) {
|
|
119
|
-
const sizeMask = maskRef.current.mask.toString().replace(/\D+/g, '').length;
|
|
120
|
-
if (sizeMask > eventTargetValue.length) {
|
|
121
|
-
switch (autoCompleteMask) {
|
|
122
|
-
case 'left':
|
|
123
|
-
setValue(eventTargetValue.padStart(sizeMask, '0'));
|
|
124
|
-
break;
|
|
125
|
-
case 'right':
|
|
126
|
-
setValue(eventTargetValue.padEnd(sizeMask, '0'));
|
|
127
|
-
break;
|
|
128
|
-
default:
|
|
129
|
-
setValue(eventTargetValue);
|
|
130
|
-
break;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
}, [autoCompleteMask, maskRef.current, elementRef.current]);
|
|
135
|
-
const getMask = () => {
|
|
136
|
-
const element = elementRef.current;
|
|
137
|
-
if (element) {
|
|
138
|
-
const maskCurrent = maskRef.current;
|
|
139
|
-
if (!maskCurrent) {
|
|
140
|
-
maskRef.current = (0, _imask.default)(element, maskOptions);
|
|
141
|
-
if (value && typeof value !== 'number' && value.trim() !== '' || value && typeof value === 'number') onAccept();
|
|
142
|
-
setValue(value);
|
|
143
|
-
} else {
|
|
144
|
-
maskCurrent.updateOptions(maskOptions);
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
const destroyMask = () => {
|
|
149
|
-
if (maskRef.current) {
|
|
150
|
-
maskRef.current.destroy();
|
|
151
|
-
maskRef.current = null;
|
|
152
|
-
}
|
|
153
|
-
};
|
|
154
|
-
(0, _react.useEffect)(() => {
|
|
155
|
-
if (props.handlerSetOnDenied) props.handlerSetOnDenied(onDenied);
|
|
156
|
-
if (!props.mask || dontInitMask) return;
|
|
157
|
-
getMask();
|
|
158
|
-
}, [maskOptions]);
|
|
159
|
-
(0, _react.useEffect)(() => {
|
|
160
|
-
if (!maskRef.current) return;
|
|
161
|
-
const maskCurrent = maskRef.current;
|
|
162
|
-
maskCurrent.on('accept', onAccept);
|
|
163
|
-
maskCurrent.on('complete', onComplete);
|
|
164
|
-
|
|
165
|
-
// eslint-disable-next-line consistent-return
|
|
166
|
-
return () => {
|
|
167
|
-
maskCurrent.off('accept', onAccept);
|
|
168
|
-
maskCurrent.off('complete', onComplete);
|
|
169
|
-
};
|
|
170
|
-
}, [onAccept, onComplete]);
|
|
171
|
-
(0, _react.useEffect)(() => {
|
|
172
|
-
if (maskOptions.mask && !dontInitMask) {
|
|
173
|
-
if (maskRef.current) {
|
|
174
|
-
const formattedValue = isDateField ? value : (0, _format_number.numberToPtBR)(value) || '';
|
|
175
|
-
setValue(formattedValue);
|
|
176
|
-
} else {
|
|
177
|
-
getMask();
|
|
178
|
-
}
|
|
179
|
-
} else if (!dontInitMask) {
|
|
180
|
-
destroyMask();
|
|
181
|
-
if (value && elementRef.current) elementRef.current.value = value;
|
|
182
|
-
}
|
|
183
|
-
}, [value, isDateField]);
|
|
184
|
-
(0, _react.useEffect)(() => destroyMask, []);
|
|
185
|
-
return /*#__PURE__*/_react.default.createElement(ComposedComponent, _extends({}, helpers.extractNonMaskProps(props, maskOptions), {
|
|
186
|
-
onDeniedActions: onDenied,
|
|
187
|
-
defaultValue: value,
|
|
188
|
-
onBlur: e => {
|
|
189
|
-
autoCompleteMaskValue(e.target.value);
|
|
190
|
-
if (props.onBlur) props.onBlur(e);
|
|
191
|
-
},
|
|
192
|
-
onChange: e => setValue(e.target.value),
|
|
193
|
-
inputRef: el => {
|
|
194
|
-
elementRef.current = el;
|
|
195
|
-
if (inputRef) {
|
|
196
|
-
if (typeof inputRef === 'object') inputRef.current = el;else inputRef(el);
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
}));
|
|
200
|
-
};
|
|
201
|
-
const nestedComponentName = ComposedComponent.displayName || ComposedComponent.name || 'Component';
|
|
202
|
-
MaskedComponent.displayName = "IMask(".concat(nestedComponentName, ")");
|
|
203
|
-
return MaskedComponent;
|
|
204
|
-
};
|
|
205
|
-
var _default = exports.default = IMaskHOC;
|