@dilicorp/ui 0.2.17 → 0.2.19

package/dist/atoms/icon.d.ts

@@ -6,6 +6,7 @@ export declare type IconProps = {
     className?: string;
     id?: string;
     size?: 'lg' | 'md' | 'sm';
+    title?: string;
 };
-export declare const Icon: ({ icon, brand, pluxee, className, id, size }: IconProps) => JSX.Element;
+export declare const Icon: ({ pluxee, icon, brand, className, id, size, ...props }: IconProps) => JSX.Element;
 //# sourceMappingURL=icon.d.ts.map

package/dist/atoms/icon.js

@@ -1,14 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as fab from '@fortawesome/free-brands-svg-icons';
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import stringHelper from '../utils/string-helper';
 import React from 'react';
 import { PluxeeIcon } from './pluxee-icon/pluxee-icon';
-export const Icon = ({ icon, brand, pluxee, className = '', id, size }) => {
+export const Icon = (_a) => {
+    var { pluxee, icon, brand, className = '', id, size } = _a, props = __rest(_a, ["pluxee", "icon", "brand", "className", "id", "size"]);
     if (pluxee) {
-        return React.createElement(PluxeeIcon, { icon: icon, size: size });
+        return (React.createElement(PluxeeIcon, Object.assign({ icon: icon, size: size }, props)));
     }
     const sanitize = stringHelper.toCamelCase(icon);
     const ico = brand ? fab[sanitize] : fa[sanitize];
-    return React.createElement(FontAwesomeIcon, { id: id, icon: ico, className: className });
+    return (React.createElement(FontAwesomeIcon, Object.assign({ id: id, icon: ico, className: className }, props)));
 };

package/dist/atoms/input-datepicker.d.ts

@@ -13,6 +13,7 @@ export declare type InputDatepickerProps = {
     minDate?: Date | null;
     maxDate?: Date | null;
     currentValue?: string;
+    disabled?: boolean;
 };
 export declare const InputDatepicker: (props: InputDatepickerProps) => JSX.Element;
 //# sourceMappingURL=input-datepicker.d.ts.map

package/dist/atoms/input-datepicker.js

@@ -11,7 +11,7 @@ registerLocale('es-CO', es);
 registerLocale('en-US', en);
 // example use https://reactdatepicker.com
 export const InputDatepicker = (props) => {
-    const { name, id = name, value, onChange, onBlur, locale = 'pt-BR', dateFormat = 'dd/MM/yyyy', placeholder = 'DD/MM/YYYY', minDate, maxDate, currentValue } = props;
+    const { name, id = name, value, onChange, onBlur, locale = 'pt-BR', dateFormat = 'dd/MM/yyyy', placeholder = 'DD/MM/YYYY', minDate, maxDate, currentValue, disabled } = props;
     const [date, setDate] = React.useState(dateHelper.stringToDate(currentValue || value));
     const handleDateSelect = (currentDate) => {
         if (onChange) {
@@ -29,5 +29,5 @@ export const InputDatepicker = (props) => {
     return (React.createElement(ReactDatePicker, { name: name, id: id, "data-testid": id, locale: locale, dateFormat: dateFormat, className: "form-control", selected: date, onChange: handleDateSelect, placeholderText: placeholder, autoComplete: "off", 
         // showMonthDropdown
         // useShortMonthInDropdown
-        minDate: minDate, maxDate: maxDate, showYearDropdown: true, yearDropdownItemNumber: 5, scrollableYearDropdown: true, tabIndex: 2, onBlur: handleBlur, customInput: React.createElement(MaskedTextInput, { type: "text", mask: mask }) }));
+        minDate: minDate, maxDate: maxDate, showYearDropdown: true, yearDropdownItemNumber: 5, scrollableYearDropdown: true, tabIndex: 2, onBlur: handleBlur, customInput: React.createElement(MaskedTextInput, { type: "text", mask: mask }), disabled: disabled }));
 };

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

@@ -9,6 +9,7 @@ declare type Props = React.InputHTMLAttributes<HTMLInputElement> & {
     actions: FormikProps<any>;
     value?: string;
     options: Option[];
+    fastField?: boolean;
 };
 export default function Checkbox(props: Props): JSX.Element[] | null;
 export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 export default function Checkbox(props) {
-    const { name, actions, value = [], options, id = name, tabIndex = 0, disabled } = props;
+    const { name, actions, value = [], options, id = name, tabIndex = 0, disabled, fastField = true } = props;
     if (!options.length)
         return null;
     const curValue = actions.values[name] || value || [];
@@ -21,7 +21,8 @@ export default function Checkbox(props) {
                 : [...values, value]);
         }
     };
+    const Tag = fastField ? FastField : Field;
     return options.map((option, index) => (React.createElement("div", { className: "form-check", key: `${name}-${index}` },
-        React.createElement(FastField, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}`, checked: isChecked(option) }, { disabled }, { className: "form-check-input", type: "checkbox", tabIndex: tabIndex, onChange: handleChange })),
+        React.createElement(Tag, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}`, checked: isChecked(option) }, { disabled }, { className: "form-check-input", type: "checkbox", tabIndex: tabIndex, onChange: handleChange })),
         React.createElement("label", { className: "form-check-label", htmlFor: `${id}-${index}` }, option.label))));
 }

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

@@ -1,4 +1,15 @@
-import { FastField } from 'formik';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { FastField, Field } from 'formik';
 import React from 'react';
 import numberHelper from '../../../utils/number-helper';
 export const InputCurrency = ({ attrs, handleChange, currency, name }) => {
@@ -13,5 +24,7 @@ export const InputCurrency = ({ attrs, handleChange, currency, name }) => {
             }
         });
     };
-    return (React.createElement(FastField, { name: name }, ({ field }) => React.createElement("input", Object.assign({}, field, attrs, { onChange: handleChangeCurrency, min: "0", maxLength: maxLength }))));
+    const { fastField = true } = attrs, restAttrs = __rest(attrs, ["fastField"]);
+    const Tag = fastField ? FastField : Field;
+    return (React.createElement(Tag, { name: name }, ({ field }) => React.createElement("input", Object.assign({}, field, restAttrs, { onChange: handleChangeCurrency, min: "0", maxLength: maxLength }))));
 };

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

@@ -1,6 +1,19 @@
-import { FastField } from 'formik';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { FastField, Field } from 'formik';
 import React from 'react';
 import ReactInputMask from 'react-input-mask';
 export const InputMask = ({ attrs, mask, name }) => {
-    return (React.createElement(FastField, { name: name }, ({ field }) => React.createElement(ReactInputMask, Object.assign({}, field, attrs, { mask: mask }))));
+    const { fastField = true } = attrs, restAttrs = __rest(attrs, ["fastField"]);
+    const Tag = fastField ? FastField : Field;
+    return (React.createElement(Tag, { name: name }, ({ field }) => React.createElement(ReactInputMask, Object.assign({}, field, restAttrs, { mask: mask }))));
 };

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

@@ -1,10 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 export const InputPrefixSuffix = ({ attrs, suffix, prefix }) => {
     var _a;
+    const { fastField = true } = attrs, restAttrs = __rest(attrs, ["fastField"]);
+    const Tag = fastField ? FastField : Field;
     return (React.createElement("div", { className: "position-relative" },
         prefix && React.createElement("div", { className: "input-prefix" }, typeof prefix === 'string' ? React.createElement("span", null, prefix) : prefix),
-        React.createElement(FastField, Object.assign({}, attrs, { readOnly: true, onFocus: (event) => {
+        React.createElement(Tag, Object.assign({}, restAttrs, { readOnly: true, onFocus: (event) => {
                 event.currentTarget.readOnly = false;
             } }, ((prefix && typeof prefix === 'string') && {
             style: {

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

@@ -12,6 +12,7 @@ export interface FormBuildItemInput extends Omit<FormBuilderBasicsItem, 'prefix'
     };
     suffix?: string | React.ReactNode;
     prefix?: string | React.ReactNode;
+    fastField?: boolean;
 }
 declare type Props = Omit<FormBuildItemInput, 'component'> & {
     actions: FormikProps<any>;

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

@@ -10,13 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 import classNames from 'classnames';
 import { InputCurrency } from './input-currency';
 import { InputMask } from './input-mask';
 import { InputPrefixSuffix } from './input-prefix-suffix';
 export default function Input(props) {
-    const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix } = props, elements = __rest(props, ["name", "id", "type", "tabIndex", "actions", "mask", "multiple", "currency", "className", "prefix", "suffix"]);
+    const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix, fastField = true } = props, elements = __rest(props, ["name", "id", "type", "tabIndex", "actions", "mask", "multiple", "currency", "className", "prefix", "suffix", "fastField"]);
     const validOptions = {
         alt: elements.alt,
         autoComplete: elements.autoComplete,
@@ -57,15 +57,17 @@ export default function Input(props) {
     };
     const curValue = actions.values[name];
     const classes = classNames(className, 'form-control');
-    const attrs = Object.assign(Object.assign({}, validOptions), { value: curValue, className: classes, name,
+    const attrsInput = Object.assign(Object.assign({}, validOptions), { value: curValue, className: classes, name,
         id, 'data-testid': id, type: type === 'number' ? 'text' : type, tabIndex, autoComplete: 'none', onChange: handleChange });
+    const attrs = Object.assign(Object.assign({}, attrsInput), { fastField });
     if (currency)
         return React.createElement(InputCurrency, Object.assign({}, { name, attrs, currency, handleChange }));
     if (mask)
         return React.createElement(InputMask, Object.assign({}, { name, attrs, mask }));
     if (prefix || suffix)
         return React.createElement(InputPrefixSuffix, Object.assign({}, { attrs, suffix, prefix }));
-    return (React.createElement(FastField, Object.assign({}, attrs, { as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
+    const Tag = fastField ? FastField : Field;
+    return (React.createElement(Tag, Object.assign({}, attrsInput, { as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
             event.currentTarget.readOnly = false;
         } })));
 }

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

@@ -9,6 +9,7 @@ declare type Props = React.InputHTMLAttributes<HTMLInputElement> & {
     actions: FormikProps<any>;
     value?: string;
     options: Option[];
+    fastField?: boolean;
 };
 export default function Radio(props: Props): JSX.Element[] | null;
 export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 export default function Radio(props) {
-    const { name, actions, value, options, id = name, tabIndex = 0, disabled } = props;
+    const { name, actions, value, options, id = name, tabIndex = 0, disabled, fastField = true } = props;
     if (!options.length)
         return null;
     const curValue = actions.values[name] || value;
@@ -18,7 +18,8 @@ export default function Radio(props) {
             actions.setFieldValue(name, event.currentTarget.value);
         }
     };
+    const Tag = fastField ? FastField : Field;
     return options.map((option, index) => (React.createElement("div", { className: "form-check", key: `${name}-${index}` },
-        React.createElement(FastField, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}` }, isChecked(option), { disabled }, { type: "radio", tabIndex: tabIndex, className: "form-check-input", onChange: handleChange })),
+        React.createElement(Tag, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}` }, isChecked(option), { disabled }, { type: "radio", tabIndex: tabIndex, className: "form-check-input", onChange: handleChange })),
         React.createElement("label", { className: "form-check-label", htmlFor: `${id}-${index}` }, option.label))));
 }

package/dist/components/side-navigation-bar/side-navigation-bar-item.js

@@ -14,7 +14,7 @@ import { Icon } from '../../atoms/icon';
 import { Link } from '../../index';
 const InnerItem = ({ icon, iconSize = 'md', pluxee, label, dataLink }) => {
     return (React.createElement(React.Fragment, null,
-        icon && React.createElement(Icon, { icon: icon, pluxee: pluxee, size: iconSize }),
+        icon && React.createElement(Icon, { title: label, icon: icon, pluxee: pluxee, size: iconSize }),
         React.createElement("span", { title: label, style: Object.assign({}, (iconSize === 'sm' && { fontSize: 12 })), className: "link_name", "data-link": `${dataLink ? 'link' : 'container'}` }, label)));
 };
 export const SideNavigationBarItem = (props) => {

package/package.json

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