period-ui 0.2.0 → 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.
- package/dist/components/molecules/text-field/text-field.d.ts +8 -2
- package/dist/components/molecules/text-field/text-field.d.ts.map +1 -1
- package/dist/components/molecules/text-field/text-field.js +38 -2
- package/dist/components/molecules/text-field/text-field.js.map +1 -1
- package/dist/containers/form-control/form-control.d.ts.map +1 -1
- package/dist/containers/form-control/form-control.js +1 -1
- package/dist/containers/form-control/form-control.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
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;
|
|
9
|
+
leadingElement?: ReactNode;
|
|
10
|
+
trailingElement?: ReactNode;
|
|
6
11
|
onBlur?: (event?: any) => void;
|
|
7
12
|
onChange?: (event?: any) => void;
|
|
8
13
|
onFocus?: (event?: any) => void;
|
|
14
|
+
onMaskedChange?: (value: string) => void;
|
|
9
15
|
className?: string;
|
|
10
16
|
};
|
|
11
17
|
type IntrinsicInputFieldProps = InputFieldProps & JSX.IntrinsicElements['input'];
|
|
@@ -13,6 +19,6 @@ export type TextFieldProps = IntrinsicInputFieldProps & {
|
|
|
13
19
|
ref?: RefObject<any>;
|
|
14
20
|
inputForwardedRef?: RefObject<any>;
|
|
15
21
|
};
|
|
16
|
-
export declare function TextField({ isRequired, isDisabled, type, name, value, placeholder, width, onBlur, onChange, className, }: 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;
|
|
17
23
|
export {};
|
|
18
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,MAAM,OAAO,CAAC;
|
|
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, }) {
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-control.d.ts","sourceRoot":"","sources":["../../../src/containers/form-control/form-control.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"form-control.d.ts","sourceRoot":"","sources":["../../../src/containers/form-control/form-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAc,YAAY,EAAE,MAAM,QAAQ,CAAC;AAKnE,OAAO,EAAE,cAAc,EAA4B,MAAM,sBAAsB,CAAC;AAEhF,KAAK,mBAAmB,GAAG;IACzB,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,mBAAmB,KAAK,KAAK,CAAC,YAAY,CAAC;CACrE,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,UAAU,EACV,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,UAAuC,EACvC,QAAQ,GACT,EAAE,KAAK,2CAuCP;AAED,YAAY,EAAE,KAAK,IAAI,gBAAgB,EAAE,CAAC"}
|
|
@@ -13,6 +13,6 @@ function FormControl({ isDisabled, isRequired, formName, label, formProps, class
|
|
|
13
13
|
const isTouched = (!formName && !formProps) || formProps?.touched[formName ?? ''];
|
|
14
14
|
const isErrorVisible = errorText && isTouched;
|
|
15
15
|
const isHelperVisible = !isErrorVisible && helperText;
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)('flex flex-col space-y-2 w-full', containerClassName), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)('flex flex-col space-y-2', widthClassName, className), children: [label && ((0, jsx_runtime_1.jsx)(form_label_1.FormLabel, {
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)('flex flex-col space-y-2 w-full', containerClassName), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)('flex flex-col space-y-2', widthClassName, className), children: [label && ((0, jsx_runtime_1.jsx)(form_label_1.FormLabel, { isRequired: isRequired, hideRequiredMark: hideRequiredMark, label: label, optionalLabel: optionalLabel, toolTipProps: toolTipProps })), (0, jsx_runtime_1.jsx)("div", { className: (0, tailwind_utils_1.tailwind)(widthClassName), children: children ? children({ isErrorVisible: !!isErrorVisible }) : null })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)({ hidden: !isHelperVisible && !isErrorVisible }), children: [isHelperVisible && ((0, jsx_runtime_1.jsx)(form_helper_1.FormHelper, { helperText: helperText, color: isDisabled ? __1.TextColors.BLACK_03 : __1.TextColors.BLACK_02 })), isErrorVisible && (0, jsx_runtime_1.jsx)(form_error_1.FormError, { className: "w-full", errorText: errorText })] })] }));
|
|
17
17
|
}
|
|
18
18
|
//# sourceMappingURL=form-control.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/containers/form-control/form-control.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/containers/form-control/form-control.tsx"],"names":[],"mappings":";;AA8BA,kCAsDC;;AAlFD,8BAAmE;AACnE,+DAAsD;AACtD,wDAAoD;AACpD,0DAAsD;AACtD,wDAAoD;AACpD,6DAAgF;AAuBhF,SAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,UAAU,EACV,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,GAAG,mCAAc,CAAC,WAAW,EACvC,QAAQ,GACF;IACN,MAAM,cAAc,GAAG,6CAAwB,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,CAAC,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,IAAI,SAAS,EAAE,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;IAClF,MAAM,cAAc,GAAG,SAAS,IAAI,SAAS,CAAC;IAC9C,MAAM,eAAe,GAAG,CAAC,cAAc,IAAI,UAAU,CAAC;IAEtD,OAAO,CACL,iCAAK,SAAS,EAAE,IAAA,yBAAQ,EAAC,gCAAgC,EAAE,kBAAkB,CAAC,aAC5E,iCAAK,SAAS,EAAE,IAAA,yBAAQ,EAAC,yBAAyB,EAAE,cAAc,EAAE,SAAS,CAAC,aAE3E,KAAK,IAAI,CACR,uBAAC,sBAAS,IACR,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,GAC1B,CACH,EAED,gCAAK,SAAS,EAAE,IAAA,yBAAQ,EAAC,cAAc,CAAC,YACrC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAC7D,IACF,EAEN,iCAAK,SAAS,EAAE,IAAA,yBAAQ,EAAC,EAAE,MAAM,EAAE,CAAC,eAAe,IAAI,CAAC,cAAc,EAAE,CAAC,aAEtE,eAAe,IAAI,CAClB,uBAAC,wBAAU,IACT,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,cAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAU,CAAC,QAAQ,GAC7D,CACH,EAGA,cAAc,IAAI,uBAAC,sBAAS,IAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,GAAI,IACrE,IACF,CACP,CAAC;AACJ,CAAC"}
|