@ballistix.digital/react-components 0.3.4 → 0.4.0

package/dist/index.js

@@ -512,8 +512,36 @@ var IconElement = function (props) {
     return component;
 };
 
+var useMappedValue = function (format) {
+    var _a = React.useState(''), mappedValue = _a[0], setMappedValue = _a[1];
+    React.useEffect(function () {
+        setMappedValue('');
+    }, [format]);
+    var handleMapValue = function (inputValue) {
+        var strippedValue = inputValue.replace(/\D/g, ''); // remove all non-numeric characters
+        var formattedNumber = '';
+        var valueIndex = 0;
+        for (var i = 0; i < format.length; i++) {
+            if (format[i] === 'X') {
+                if (valueIndex >= strippedValue.length) {
+                    break;
+                }
+                formattedNumber += strippedValue[valueIndex];
+                valueIndex++;
+            }
+            else {
+                formattedNumber += format[i];
+            }
+        }
+        setMappedValue(formattedNumber);
+    };
+    return [mappedValue, handleMapValue];
+};
+
 var InputGroupForm = function (props) {
-    var name = props.name, _a = props.htmlType, htmlType = _a === void 0 ? 'text' : _a, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, value = props.value, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.isValid, isValid = _c === void 0 ? true : _c, isDisabled = props.isDisabled, isRequired = props.isRequired, onChange = props.onChange, stylesOverrides = props.styles;
+    var name = props.name, _a = props.htmlType, htmlType = _a === void 0 ? 'text' : _a, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, value = props.value, map = props.map, error = props.error, _b = props.type, type = _b === void 0 ? 'normal' : _b, isDisabled = props.isDisabled, isRequired = props.isRequired, isTouched = props.isTouched, _c = props.isSolo, isSolo = _c === void 0 ? false : _c, onChange = props.onChange, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var _d = useMappedValue(map !== null && map !== void 0 ? map : ''), mappedValue = _d[0], setMappedValue = _d[1];
+    var isValid = error === undefined;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$e.base);
         var keys = calculateNestedKeys(styles$e.base);
@@ -524,7 +552,19 @@ var InputGroupForm = function (props) {
     };
     var styles = handleGenerateStyle();
     var invalidIcon = (jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
-    return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles.head }, { children: [label && (jsxRuntime.jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !isRequired && jsxRuntime.jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.body }, { children: [leading && jsxRuntime.jsx("div", __assign({ className: styles.leading }, { children: leading })), jsxRuntime.jsx("input", { type: htmlType, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: value, disabled: isDisabled, onChange: onChange }), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), !isValid && jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsxRuntime.jsx("div", __assign({ className: styles.foot }, { children: description && jsxRuntime.jsx("p", __assign({ className: styles.description }, { children: description })) }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles.head }, { children: [label && (jsxRuntime.jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !isRequired && jsxRuntime.jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.body }, { children: [leading && jsxRuntime.jsx("div", __assign({ className: styles.leading }, { children: leading })), jsxRuntime.jsx("input", { type: htmlType, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, disabled: isDisabled, onChange: function (e) {
+                            if (map) {
+                                setMappedValue(e.currentTarget.value);
+                            }
+                            onChange(e);
+                        }, onBlur: function (e) {
+                            if (map) {
+                                var result = e.currentTarget;
+                                result.value = mappedValue;
+                                onChange(result);
+                            }
+                            onBlur(e);
+                        } }), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), !isValid && jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.foot }, { children: [description && !error && (jsxRuntime.jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsxRuntime.jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
 };
 
 var base$d = {
@@ -537,7 +577,8 @@ var base$d = {
     leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
     input: 'block w-full',
     trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
-    description: 'text-gray-500 text-xs',
+    description: 'text-gray-400 text-xs mt-1',
+    error: 'text-red-500 text-xs ml-5 mt-1',
 };
 var leading = {
     input: 'pl-10',