@dilicorp/ui 1.0.0 → 1.1.0

package/dist/components/form-builder/components/input-percentage.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare type Props = {
+    name: string;
+    attrs: {
+        [key: string]: any;
+    };
+    handleChange: (params: any) => void;
+    max?: number | string;
+    decimals?: number;
+};
+export declare const InputPercentage: ({ attrs, handleChange, max, decimals, name }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=input-percentage.d.ts.map

package/dist/components/form-builder/components/input-percentage.js

@@ -0,0 +1,22 @@
+import { FastField, Field } from 'formik';
+import React from 'react';
+import numberHelper from '../../../utils/number-helper';
+export const InputPercentage = ({ attrs, handleChange, max = 100, decimals = 2, name }) => {
+    const { maxLength = 8 } = attrs;
+    const handleChangePercentage = (event) => {
+        const { value } = event.currentTarget;
+        const percentage = numberHelper.percentageSanitize(value, decimals);
+        if (typeof max === 'number' && max < Number(percentage)) {
+            return;
+        }
+        handleChange({
+            currentTarget: {
+                name,
+                value: percentage ? `${percentage}%` : ''
+            }
+        });
+    };
+    const { fastField = true, ...restAttrs } = attrs;
+    const Tag = fastField ? FastField : Field;
+    return (React.createElement(Tag, { name: name }, ({ field }) => (React.createElement("input", { ...field, max: max, ...restAttrs, onChange: handleChangePercentage, min: "0", maxLength: maxLength }))));
+};

package/dist/components/form-builder/components/input.d.ts

@@ -3,7 +3,7 @@ import { FormikProps } from 'formik';
 import { FormBuilderBasicsItem } from '../form-builder.types';
 export interface FormBuildItemInput extends Omit<FormBuilderBasicsItem, 'prefix'> {
     component?: 'input';
-    type?: 'text' | 'button' | 'checkbox' | 'email' | 'file' | 'hidden' | 'number' | 'submit' | 'reset' | 'color';
+    type?: 'text' | 'button' | 'checkbox' | 'email' | 'file' | 'hidden' | 'number' | 'submit' | 'reset' | 'color' | 'percentage';
     mask?: string | Array<string | RegExp>;
     multiple?: boolean;
     currency?: {
@@ -13,6 +13,7 @@ export interface FormBuildItemInput extends Omit<FormBuilderBasicsItem, 'prefix'
     suffix?: string | React.ReactNode;
     prefix?: string | React.ReactNode;
     fastField?: boolean;
+    decimals?: number;
 }
 declare type Props = Omit<FormBuildItemInput, 'component'> & {
     actions: FormikProps<any>;

package/dist/components/form-builder/components/input.js

@@ -4,8 +4,9 @@ import classNames from 'classnames';
 import { InputCurrency } from './input-currency';
 import { InputMask } from './input-mask';
 import { InputPrefixSuffix } from './input-prefix-suffix';
+import { InputPercentage } from './input-percentage';
 export default function Input(props) {
-    const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix, fastField = true, ...elements } = props;
+    const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix, fastField = true, decimals = 2, ...elements } = props;
     const validOptions = {
         alt: elements.alt,
         autoComplete: elements.autoComplete,
@@ -71,12 +72,15 @@ export default function Input(props) {
         ...attrsInput,
         fastField
     };
+    if (type === 'percentage') {
+        return React.createElement(InputPercentage, { ...{ name, attrs, currency, handleChange, decimals, max: elements.max } });
+    }
     if (currency)
         return React.createElement(InputCurrency, { ...{ name, attrs, currency, handleChange } });
     if (mask)
         return React.createElement(InputMask, { ...{ name, attrs, mask } });
     if (prefix || suffix)
-        return React.createElement(InputPrefixSuffix, { ...{ attrs, suffix, prefix } });
+        return React.createElement(InputPrefixSuffix, { ...{ attrs, suffix, prefix, handleChange } });
     const Tag = fastField ? FastField : Field;
     return (React.createElement(Tag, { ...attrsInput, as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
             event.currentTarget.readOnly = false;

package/dist/utils/number-helper.d.ts

@@ -3,6 +3,7 @@ declare class NumberHelper {
     sanitize(string: string): string;
     currency(value?: number, locale?: string, format?: string): string;
     currencySanitize(value: string): string | null;
+    percentageSanitize(value: string, decimals?: number): string | null;
 }
 declare const _default: NumberHelper;
 export default _default;

package/dist/utils/number-helper.js

@@ -21,5 +21,16 @@ class NumberHelper {
             return `${integer}.0${decimal}`;
         return `${integer}.${decimal}`;
     }
+    percentageSanitize(value, decimals = 2) {
+        var _a;
+        const sanitize = (Number(this.sanitize(value))).toString();
+        const integer = (_a = sanitize.slice(0, -decimals)) !== null && _a !== void 0 ? _a : 0;
+        const decimal = sanitize.slice(-decimals);
+        if (value.replace(/\D/g, '') === '00' || sanitize === '')
+            return null;
+        if (decimal.length === 1)
+            return `${integer}.0${decimal}`;
+        return `${integer}.${decimal}`;
+    }
 }
 export default new NumberHelper();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilicorp/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A simple UI design for Dilicorp",
   "repository": {
     "type": "git",