@dilicorp/ui 0.2.52 → 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/molecules/alert.d.ts

@@ -7,10 +7,12 @@ export declare type AlertProps = {
     color?: 'default' | 'success' | 'info' | 'warning' | 'error';
     showButton?: boolean;
     buttonText?: string;
+    onClose?: () => void;
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const Alert: React.ForwardRefExoticComponent<{
     color?: "success" | "info" | "warning" | "default" | "error" | undefined;
     showButton?: boolean | undefined;
     buttonText?: string | undefined;
+    onClose?: (() => void) | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<AlertRef>>;
 //# sourceMappingURL=alert.d.ts.map

package/dist/molecules/alert.js

@@ -3,10 +3,13 @@ import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { Button } from '../atoms/button';
 export const Alert = forwardRef((props, ref) => {
-    const { children, className, showButton, buttonText = 'Ok', color } = props;
+    const { children, className, showButton, buttonText = 'Ok', color, onClose } = props;
     const [display, setDisplay] = useState(false);
     const open = () => setDisplay(true);
-    const close = () => setDisplay(false);
+    const close = () => {
+        setDisplay(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
     useImperativeHandle(ref, () => ({
         open: () => open(),
         close: () => close()

package/dist/molecules/modal/modal.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 export const Modal = forwardRef((props, ref) => {
     const { children, title, closeFn, className, innerRef } = props;
     const classes = classNames(className !== null && className !== void 0 ? className : 'alert-small');
-    return (React.createElement(Alert, { ref: ref !== null && ref !== void 0 ? ref : innerRef, className: classes },
+    return (React.createElement(Alert, { ref: ref !== null && ref !== void 0 ? ref : innerRef, className: classes, onClose: closeFn },
         React.createElement("div", { className: "modal modal-sm" },
             React.createElement("div", { className: "modal-header" },
                 React.createElement("div", { className: "title" }, title),

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": "0.2.52",
+  "version": "1.1.0",
   "description": "A simple UI design for Dilicorp",
   "repository": {
     "type": "git",

package/dist/atoms/panel/panel-container.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-declare type PanelContainerProps = {
-    children: React.ReactNode;
-};
-export declare const PanelContainer: {
-    ({ children }: PanelContainerProps): JSX.Element;
-    displayName: string;
-};
-export {};
-//# sourceMappingURL=panel-container.d.ts.map

package/dist/atoms/panel/panel-container.js

@@ -1,6 +0,0 @@
-import React from 'react';
-export const PanelContainer = ({ children }) => {
-    return (React.createElement("div", { className: "panel-container" },
-        React.createElement("div", { className: "row" }, children)));
-};
-PanelContainer.displayName = 'PanelContainer';

package/dist/atoms/panel/panel-field.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-declare type PanelFieldProps = {
-    label: string;
-    value?: React.ReactNode;
-    forceShow?: boolean;
-};
-export declare const PanelField: {
-    ({ label, value, forceShow }: PanelFieldProps): JSX.Element | null;
-    displayName: string;
-};
-export {};
-//# sourceMappingURL=panel-field.d.ts.map

package/dist/atoms/panel/panel-field.js

@@ -1,10 +0,0 @@
-import React from 'react';
-export const PanelField = ({ label, value, forceShow = true }) => {
-    if (!forceShow && !value)
-        return null;
-    return (React.createElement("div", { className: "panel-field" },
-        label,
-        ": ",
-        React.createElement("strong", null, value)));
-};
-PanelField.displayName = 'PanelField';

package/dist/atoms/panel/panel-group.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { ColProps } from '../col';
-declare type Props = {
-    label?: string;
-    value?: React.ReactNode | string;
-    big?: boolean;
-    upper?: boolean;
-} & ColProps;
-export declare const PanelGroup: {
-    ({ value, label, size, big, upper }: Props): JSX.Element;
-    displayName: string;
-};
-export {};
-//# sourceMappingURL=panel-group.d.ts.map

package/dist/atoms/panel/panel-group.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Col } from '../col';
-export const PanelGroup = ({ value, label, size = [12, 6], big = false, upper = true }) => {
-    return (React.createElement(Col, { size: size },
-        React.createElement("div", { className: "panel-group" },
-            React.createElement("label", null, label),
-            React.createElement("div", { className: `${upper ? ' upper' : ''} text${big ? ' big' : ''}` }, value || '-'))));
-};
-PanelGroup.displayName = 'PanelGroup';

package/dist/atoms/panel/panel.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-export declare const Panel: {
-    Container: {
-        ({ children }: {
-            children: import("react").ReactNode;
-        }): JSX.Element;
-        displayName: string;
-    };
-    Group: {
-        ({ value, label, size, big, upper }: {
-            label?: string | undefined;
-            value?: import("react").ReactNode;
-            big?: boolean | undefined;
-            upper?: boolean | undefined;
-        } & {
-            size?: boolean | ("none" | 1 | 2 | 3 | 4 | 5 | "auto" | 6 | 7 | 8 | 9 | 10 | 11 | 12) | ("none" | 1 | 2 | 3 | 4 | 5 | "auto" | 6 | 7 | 8 | 9 | 10 | 11 | 12)[] | undefined;
-        } & import("react").HTMLAttributes<HTMLDivElement>): JSX.Element;
-        displayName: string;
-    };
-    Field: {
-        ({ label, value, forceShow }: {
-            label: string;
-            value?: import("react").ReactNode;
-            forceShow?: boolean | undefined;
-        }): JSX.Element | null;
-        displayName: string;
-    };
-};
-//# sourceMappingURL=panel.d.ts.map

package/dist/atoms/panel/panel.js

@@ -1,8 +0,0 @@
-import { PanelContainer } from './panel-container';
-import { PanelField } from './panel-field';
-import { PanelGroup } from './panel-group';
-export const Panel = {
-    Container: PanelContainer,
-    Group: PanelGroup,
-    Field: PanelField
-};

package/dist/components/modal/modal.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { AlertRef } from '../../molecules/alert';
-export declare type ModalProps = {
-    children: React.ReactNode;
-    title?: string;
-    closeFn?: () => void;
-    className?: string;
-    innerRef?: React.ForwardedRef<AlertRef>;
-};
-export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<AlertRef>>;
-//# sourceMappingURL=modal.d.ts.map

package/dist/components/modal/modal.js

@@ -1,15 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Button } from '../../atoms/button';
-import { Alert } from '../../molecules/alert';
-import classNames from 'classnames';
-export const Modal = forwardRef((props, ref) => {
-    const { children, title, closeFn, className, innerRef } = props;
-    const classes = classNames(className !== null && className !== void 0 ? className : 'alert-small');
-    return (React.createElement(Alert, { ref: ref !== null && ref !== void 0 ? ref : innerRef, className: classes },
-        React.createElement("div", { className: "modal modal-sm" },
-            React.createElement("div", { className: "modal-header" },
-                React.createElement("div", { className: "title" }, title),
-                React.createElement(Button, { small: true, onClick: closeFn }, "\u00D7")),
-            React.createElement("div", { className: "modal-body" }, children))));
-});
-Modal.displayName = 'Modal';