period-ui 0.2.1 → 0.2.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.
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { RefObject, ReactNode } from 'react';
|
|
2
|
+
type InputRestriction = 'numeric' | 'alpha' | 'alphanumeric' | 'none';
|
|
2
3
|
type InputFieldProps = {
|
|
3
4
|
isRequired?: boolean;
|
|
4
5
|
isDisabled?: boolean;
|
|
5
6
|
value?: any;
|
|
7
|
+
mask?: string;
|
|
8
|
+
restriction?: InputRestriction;
|
|
6
9
|
leadingElement?: ReactNode;
|
|
7
10
|
trailingElement?: ReactNode;
|
|
8
11
|
onBlur?: (event?: any) => void;
|
|
9
12
|
onChange?: (event?: any) => void;
|
|
10
13
|
onFocus?: (event?: any) => void;
|
|
14
|
+
onMaskedChange?: (value: string) => void;
|
|
11
15
|
className?: string;
|
|
12
16
|
};
|
|
13
17
|
type IntrinsicInputFieldProps = InputFieldProps & JSX.IntrinsicElements['input'];
|
|
@@ -15,6 +19,6 @@ export type TextFieldProps = IntrinsicInputFieldProps & {
|
|
|
15
19
|
ref?: RefObject<any>;
|
|
16
20
|
inputForwardedRef?: RefObject<any>;
|
|
17
21
|
};
|
|
18
|
-
export declare function TextField({ isRequired, isDisabled, type, name, value, placeholder, width, onBlur, onChange, className, leadingElement, trailingElement, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare function TextField({ isRequired, isDisabled, type, name, value, placeholder, width, mask, restriction, onBlur, onChange, className, leadingElement, trailingElement, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
19
23
|
export {};
|
|
20
24
|
//# sourceMappingURL=text-field.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/text-field/text-field.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/text-field/text-field.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAI1D,KAAK,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,CAAC;AAEtE,KAAK,eAAe,GAAG;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,wBAAwB,GAAG,eAAe,GAAG,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAEjF,MAAM,MAAM,cAAc,GAAG,wBAAwB,GAAG;IACtD,GAAG,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACrB,iBAAiB,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;CACpC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,UAAU,EACV,UAAU,EACV,IAAa,EACb,IAAI,EACJ,KAAU,EACV,WAAW,EACX,KAAK,EACL,IAAI,EACJ,WAAoB,EACpB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,EACd,eAAe,GAChB,EAAE,cAAc,2CA0EhB"}
|
|
@@ -4,7 +4,43 @@ exports.TextField = TextField;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const tailwind_utils_1 = require("../../../utils/tailwind-utils");
|
|
6
6
|
const components_1 = require("../../../components");
|
|
7
|
-
function TextField({ isRequired, isDisabled, type = 'text', name, value, placeholder, width, onBlur, onChange, className, leadingElement, trailingElement, }) {
|
|
8
|
-
|
|
7
|
+
function TextField({ isRequired, isDisabled, type = 'text', name, value = '', placeholder, width, mask, restriction = 'none', onBlur, onChange, className, leadingElement, trailingElement, }) {
|
|
8
|
+
function handleChange(event) {
|
|
9
|
+
let inputValue = event.target.value;
|
|
10
|
+
if (mask) {
|
|
11
|
+
let allowedPattern = /./g;
|
|
12
|
+
if (restriction === 'numeric')
|
|
13
|
+
allowedPattern = /[0-9]/g;
|
|
14
|
+
if (restriction === 'alpha')
|
|
15
|
+
allowedPattern = /[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]/g;
|
|
16
|
+
if (restriction === 'alphanumeric')
|
|
17
|
+
allowedPattern = /[a-zA-Z0-9\s]/g;
|
|
18
|
+
const clean = (inputValue.match(allowedPattern) || []).join('');
|
|
19
|
+
let masked = '';
|
|
20
|
+
let maskIndex = 0;
|
|
21
|
+
let valueIndex = 0;
|
|
22
|
+
while (maskIndex < mask.length && valueIndex < clean.length) {
|
|
23
|
+
if (mask[maskIndex] === '#') {
|
|
24
|
+
masked += clean[valueIndex];
|
|
25
|
+
valueIndex++;
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
masked += mask[maskIndex];
|
|
29
|
+
}
|
|
30
|
+
maskIndex++;
|
|
31
|
+
}
|
|
32
|
+
inputValue = masked;
|
|
33
|
+
}
|
|
34
|
+
const syntheticEvent = {
|
|
35
|
+
...event,
|
|
36
|
+
target: {
|
|
37
|
+
...event.target,
|
|
38
|
+
name,
|
|
39
|
+
value: inputValue,
|
|
40
|
+
},
|
|
41
|
+
};
|
|
42
|
+
onChange?.(syntheticEvent);
|
|
43
|
+
}
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)('flex items-center w-full', 'border border-gray-04 rounded-lg bg-white', 'hover:border-blue-02 focus-within:border-blue-01 focus-within:hover:border-blue-01', 'focus-within:ring-1 focus-within:ring-blue-01', className), children: [leadingElement && (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 pl-4 text-gray-01", children: leadingElement }), (0, jsx_runtime_1.jsx)("input", { required: isRequired, disabled: isDisabled, type: type, name: name, value: value, placeholder: placeholder, width: width, onBlur: onBlur, onChange: handleChange, className: (0, tailwind_utils_1.tailwind)('flex-grow py-4 px-4 bg-transparent text-gray-01', 'focus:outline-none', leadingElement ? 'px-2' : 'px-4', components_1.TextStyle[components_1.TextVariant.BODY]) }), trailingElement && (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 pr-4 text-gray-01", children: trailingElement })] }));
|
|
9
45
|
}
|
|
10
46
|
//# sourceMappingURL=text-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/molecules/text-field/text-field.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/molecules/text-field/text-field.tsx"],"names":[],"mappings":";;AA6BA,8BAyFC;;AApHD,kEAAyD;AACzD,oDAA6D;AA0B7D,SAAgB,SAAS,CAAC,EACxB,UAAU,EACV,UAAU,EACV,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,WAAW,EACX,KAAK,EACL,IAAI,EACJ,WAAW,GAAG,MAAM,EACpB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,EACd,eAAe,GACA;IACf,SAAS,YAAY,CAAC,KAAoC;QACxD,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAEpC,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,cAAc,GAAG,IAAI,CAAC;YAC1B,IAAI,WAAW,KAAK,SAAS;gBAAE,cAAc,GAAG,QAAQ,CAAC;YACzD,IAAI,WAAW,KAAK,OAAO;gBAAE,cAAc,GAAG,yBAAyB,CAAC;YACxE,IAAI,WAAW,KAAK,cAAc;gBAAE,cAAc,GAAG,gBAAgB,CAAC;YAEtE,MAAM,KAAK,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAEhE,IAAI,MAAM,GAAG,EAAE,CAAC;YAChB,IAAI,SAAS,GAAG,CAAC,CAAC;YAClB,IAAI,UAAU,GAAG,CAAC,CAAC;YAEnB,OAAO,SAAS,GAAG,IAAI,CAAC,MAAM,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC5D,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC5B,MAAM,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC;oBAC5B,UAAU,EAAE,CAAC;gBACf,CAAC;qBAAM,CAAC;oBACN,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;gBAC5B,CAAC;gBACD,SAAS,EAAE,CAAC;YACd,CAAC;YAED,UAAU,GAAG,MAAM,CAAC;QACtB,CAAC;QAED,MAAM,cAAc,GAAG;YACrB,GAAG,KAAK;YACR,MAAM,EAAE;gBACN,GAAG,KAAK,CAAC,MAAM;gBACf,IAAI;gBACJ,KAAK,EAAE,UAAU;aAClB;SAC+B,CAAC;QAEnC,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC;IAC7B,CAAC;IAED,OAAO,CACL,iCACE,SAAS,EAAE,IAAA,yBAAQ,EACjB,0BAA0B,EAC1B,2CAA2C,EAC3C,oFAAoF,EACpF,+CAA+C,EAC/C,SAAS,CACV,aAEA,cAAc,IAAI,gCAAK,SAAS,EAAC,iCAAiC,YAAE,cAAc,GAAO,EAE1F,kCACE,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,EACpB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,IAAA,yBAAQ,EACjB,iDAAiD,EACjD,oBAAoB,EACpB,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAChC,sBAAS,CAAC,wBAAW,CAAC,IAAI,CAAC,CAC5B,GACD,EAED,eAAe,IAAI,gCAAK,SAAS,EAAC,iCAAiC,YAAE,eAAe,GAAO,IACxF,CACP,CAAC;AACJ,CAAC"}
|