linear-react-components-ui 0.4.77-beta.8 → 1.0.0-rc.1

package/lib/form/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,27 +8,25 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function get() {
-    return _Field["default"];
+    return _Field.default;
   }
 });
 Object.defineProperty(exports, "FieldArray", {
   enumerable: true,
   get: function get() {
-    return _FieldArray["default"];
+    return _FieldArray.default;
   }
 });
 Object.defineProperty(exports, "FieldNumber", {
   enumerable: true,
   get: function get() {
-    return _FieldNumber["default"];
+    return _FieldNumber.default;
   }
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _lodash = _interopRequireDefault(require("lodash"));
 
 var _helpers = require("./helpers");
@@ -45,15 +43,15 @@ var _dialog = require("../dialog");
 
 var _withFormSecurity = require("./withFormSecurity");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -76,12 +74,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var Form = function Form(_ref) {
-  var submitOnPressEnterKey = _ref.submitOnPressEnterKey,
+  var _ref$submitOnPressEnt = _ref.submitOnPressEnterKey,
+      submitOnPressEnterKey = _ref$submitOnPressEnt === void 0 ? true : _ref$submitOnPressEnt,
       dataSource = _ref.dataSource,
       securityBeforeUnload = _ref.securityBeforeUnload,
       handlerReset = _ref.handlerReset,
       handlerSubmit = _ref.handlerSubmit,
-      children = _ref.children,
       handlerValidates = _ref.handlerValidates,
       style = _ref.style,
       customClass = _ref.customClass,
@@ -92,7 +90,8 @@ var Form = function Form(_ref) {
       externalFieldErrors = _ref.externalFieldErrors,
       onSubmit = _ref.onSubmit,
       skeletonize = _ref.skeletonize,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      children = _ref.children;
 
   var _useState = (0, _react.useState)(dataSource),
       _useState2 = _slicedToArray(_useState, 2),
@@ -121,8 +120,10 @@ var Form = function Form(_ref) {
     var validatorsArray = !(validators instanceof Array) ? [validators] : validators;
     var errors = [];
     validatorsArray.forEach(function (validator) {
-      var result = validator(fieldValue);
-      if (result) errors = [].concat(_toConsumableArray(errors), [result]);
+      if (typeof validator === 'function') {
+        var result = validator(fieldValue);
+        if (result) errors = [].concat(_toConsumableArray(errors), [result]);
+      }
     });
     return errors;
   };
@@ -132,8 +133,8 @@ var Form = function Form(_ref) {
     var dataValidate = value || data;
     var currentFieldErrors = {};
 
-    _lodash["default"].forEach(fieldsValidators.current, function (validators, fieldName) {
-      var fieldValue = _lodash["default"].get(dataValidate, fieldName);
+    _lodash.default.forEach(fieldsValidators.current, function (validators, fieldName) {
+      var fieldValue = _lodash.default.get(dataValidate, fieldName);
 
       var messages = getValidatesErrorMessages(validators, fieldValue);
 
@@ -143,30 +144,14 @@ var Form = function Form(_ref) {
     });
 
     if (updateState) setFieldErrors(currentFieldErrors);
-    return _lodash["default"].isEmpty(currentFieldErrors);
+    return _lodash.default.isEmpty(currentFieldErrors);
   };
 
   var onFieldChange = function onFieldChange(event) {
     var target = event.target;
-    (0, _helpers.changeValue)(dataSource, target);
-    (0, _helpers.changeValue)(data, target);
-
-    var newData = _extends({}, data);
-
-    if (context && context.onChangedData) {
-      var onChangedData = context.onChangedData;
-
-      if (!_lodash["default"].isEqual(newData, originalData)) {
-        onChangedData(true);
-      } else {
-        onChangedData(false);
-      }
-    }
-
-    setData(newData); // TODO - Usar debounce para evitar chamada a cada letra digitada
-
-    if (onValidateForm) onValidateForm(checkIsValid(newData, false));
-    if (onDataChange) onDataChange(newData);
+    setData(function (prevState) {
+      return (0, _helpers.changeValue)(prevState, target);
+    });
   };
 
   var onValidate = function onValidate(fieldName, fieldValue, validators) {
@@ -175,7 +160,7 @@ var Form = function Form(_ref) {
       var errors = getValidatesErrorMessages(validators, fieldValue);
 
       if (errors.length === 0) {
-        currentFieldErrors = _lodash["default"].omit(currentFieldErrors, fieldName);
+        currentFieldErrors = _lodash.default.omit(currentFieldErrors, fieldName);
       } else {
         currentFieldErrors = _extends({}, currentFieldErrors, _defineProperty({}, fieldName, errors));
       }
@@ -195,19 +180,20 @@ var Form = function Form(_ref) {
   };
 
   var onRemoveFieldValidators = function onRemoveFieldValidators(fieldName) {
-    var newFieldsValidators = _lodash["default"].omit(fieldsValidators.current, fieldName);
+    var newFieldsValidators = _lodash.default.omit(fieldsValidators.current, fieldName);
 
     fieldsValidators.current = newFieldsValidators;
   };
 
   var onBeforeUnload = function onBeforeUnload(e) {
-    e.preventDefault();
+    var event = e;
+    event.preventDefault();
 
-    if (_lodash["default"].isEqual(data, originalData)) {
+    if (_lodash.default.isEqual(data, originalData)) {
       return;
     }
 
-    e.returnValue = true;
+    event.returnValue = true;
   };
 
   var submitOnEnter = function submitOnEnter(event) {
@@ -217,31 +203,16 @@ var Form = function Form(_ref) {
     }
   };
 
-  var getContextValue = function getContextValue() {
-    return {
-      skeletonize: skeletonize,
-      handlerFieldChange: onFieldChange,
-      handlerFieldValidade: onValidate,
-      handlerStoreValidators: function handlerStoreValidators(fieldName, fieldValidates) {
-        fieldsValidators.current = _extends({}, fieldsValidators.current, _defineProperty({}, fieldName, fieldValidates));
-      },
-      handlerRemoveValidators: onRemoveFieldValidators,
-      data: data,
-      fieldErrors: fieldErrors,
-      externalFieldErrors: externalFieldErrors
-    };
-  };
-
   var formProps = function formProps() {
     var propsForm = null;
 
     if (!disabled) {
       propsForm = {
-        onSubmit: function onSubmit(e) {
-          return e.preventDefault();
+        onSubmit: function onSubmit(event) {
+          return event.preventDefault();
         },
-        onKeyPress: function onKeyPress(e) {
-          return submitOnEnter(e);
+        onKeyPress: function onKeyPress(event) {
+          return submitOnEnter(event);
         }
       };
     }
@@ -250,10 +221,24 @@ var Form = function Form(_ref) {
   };
 
   (0, _react.useEffect)(function () {
+    if (!_lodash.default.isEmpty(context)) {
+      var onChangedData = context.onChangedData;
+
+      if (!_lodash.default.isEqual(data, originalData)) {
+        onChangedData(true);
+      } else {
+        onChangedData(false);
+      }
+    } // TODO - Usar debounce para evitar chamada a cada letra digitada
+
+
+    if (onDataChange) onDataChange(data);
+    if (onValidateForm) onValidateForm(checkIsValid(data, false));
+
     if (!disabled) {
       handlerSubmit(onFormSubmit);
       if (handlerReset) handlerReset(onReset);
-      if (handlerValidates) handlerValidates(checkIsValid);
+      if (handlerValidates) handlerValidates(checkIsValid(data));
     }
   }, [data]);
   (0, _react.useEffect)(function () {
@@ -269,7 +254,9 @@ var Form = function Form(_ref) {
   (0, _react.useEffect)(function () {
     if (!disabled) {
       if (submitOnPressEnterKey !== submitFormOnEnter || dataSource !== originalData) {
-        setData(dataSource);
+        setData(function (prevState) {
+          return !_lodash.default.isEqual(data, dataSource) ? dataSource : prevState;
+        });
         setOriginalData(function (prevState) {
           return prevState || dataSource;
         });
@@ -277,56 +264,34 @@ var Form = function Form(_ref) {
       }
     }
   }, [submitOnPressEnterKey, dataSource]);
-  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_helpers.FormContext.Provider, {
-    value: getContextValue()
-  }, /*#__PURE__*/_react["default"].createElement("form", _extends({
+  var contextValues = {
+    skeletonize: skeletonize,
+    handlerFieldChange: onFieldChange,
+    handlerFieldValidade: onValidate,
+    handlerStoreValidators: function handlerStoreValidators(fieldName, fieldValidates) {
+      fieldsValidators.current = _extends({}, fieldsValidators.current, _defineProperty({}, fieldName, fieldValidates));
+    },
+    handlerRemoveValidators: onRemoveFieldValidators,
+    data: data,
+    fieldErrors: fieldErrors,
+    externalFieldErrors: externalFieldErrors
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_helpers.FormContext.Provider, {
+    value: contextValues
+  }, /*#__PURE__*/_react.default.createElement("form", _extends({
     style: style
   }, formProps(), {
     role: "presentation",
     className: "form-component ".concat(customClass)
-  }), children)), /*#__PURE__*/_react["default"].createElement(_dialog.DialogQuestion, {
+  }), children)), /*#__PURE__*/_react.default.createElement(_dialog.DialogQuestion, {
     zIndex: "99999999",
     title: securityTitle || 'Dados Alterados',
     text: securityText || 'Você possui dados alterados, confirma o fechamento?',
-    visible: !!context && context.showQuestion,
+    visible: !_lodash.default.isEmpty(context) && context.showQuestion,
     onConfirmClick: context ? context.onConfirmClick : function () {},
     onUnconfirmClick: context ? context.onUnconfirmClick : function () {}
   }));
 };
 
-Form.propTypes = {
-  dataSource: _propTypes["default"].object.isRequired,
-  children: _propTypes["default"].any.isRequired,
-  onSubmit: _propTypes["default"].func.isRequired,
-  handlerSubmit: _propTypes["default"].func.isRequired,
-  handlerReset: _propTypes["default"].func,
-  handlerValidates: _propTypes["default"].func,
-  onValidateForm: _propTypes["default"].func,
-  submitOnPressEnterKey: _propTypes["default"].bool,
-  style: _propTypes["default"].object,
-  customClass: _propTypes["default"].string,
-  onDataChange: _propTypes["default"].func,
-  securityBeforeUnload: _propTypes["default"].bool,
-  securityTitle: _propTypes["default"].string,
-  securityText: _propTypes["default"].string,
-  externalFieldErrors: _propTypes["default"].object,
-  skeletonize: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool
-};
-Form.defaultProps = {
-  onValidateForm: undefined,
-  submitOnPressEnterKey: true,
-  style: {},
-  handlerReset: undefined,
-  handlerValidates: undefined,
-  customClass: '',
-  onDataChange: undefined,
-  securityBeforeUnload: false,
-  securityTitle: null,
-  securityText: null,
-  externalFieldErrors: {},
-  skeletonize: false,
-  disabled: false
-};
 var _default = Form;
-exports["default"] = _default;
+exports.default = _default;

package/lib/form/types.d.ts

@@ -0,0 +1,167 @@
+import { ReactNode, CSSProperties, ChangeEvent, ComponentType, MouseEventHandler } from 'react';
+
+declare type Validator = (value: string) => string | undefined;
+declare type PeriodValidator = (value: {
+    initialData: string;
+    finalData: string;
+}) => string | undefined;
+declare type OnFielChangeEvent = Event & {
+    target: HTMLInputElement;
+};
+interface IFormProps {
+    dataSource: object;
+    children: ReactNode;
+    onSubmit: (data: object) => void;
+    handlerSubmit: (value: () => void) => void;
+    handlerReset?: (value: () => void) => void;
+    handlerValidates?: (value: any) => void;
+    onValidateForm?: (value: boolean) => void;
+    submitOnPressEnterKey?: boolean;
+    style?: CSSProperties;
+    customClass?: string;
+    onDataChange?: (data: object) => void;
+    securityBeforeUnload?: boolean;
+    securityTitle?: string;
+    securityText?: string;
+    externalFieldErrors?: object;
+    skeletonize?: boolean;
+    disabled?: boolean;
+}
+interface IFieldProps extends WithFieldProps {
+    data?: object;
+    dataSource?: object;
+    name: string;
+    value?: string;
+    label?: string;
+    handlerFieldChange?: (event: ChangeEvent) => ChangeEvent;
+    handlerFieldValidade?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
+    component: ComponentType<any>;
+    componentType?: 'Radio' | 'Checkbox';
+    onChange?: (event: ChangeEvent) => ChangeEvent;
+    onBlur?: () => void;
+    validators?: Validator | Validator[];
+    fieldErrors?: {
+        [name: string]: string[];
+    };
+    externalFieldErrors?: {
+        [name: string]: string[];
+    };
+    externalMessagesErrors?: string[];
+    fieldId?: string;
+    scale?: number;
+    required?: boolean;
+    idKey?: string;
+    descriptionKey?: string;
+    showClearButton?: boolean;
+    gridLayout?: string;
+}
+interface CustomEvent {
+    target: {
+        value: string[];
+        name: string;
+    };
+}
+interface IFieldArrayProps extends WithFieldProps {
+    data?: object;
+    dataSource?: object;
+    name: string;
+    handlerFieldChange?: (event: CustomEvent) => void;
+    fieldErrors?: {
+        [name: string]: string[];
+    };
+    component?: ComponentType<any>;
+    validators?: Validator | Validator[];
+    valuePropName?: string;
+    changePropName?: string;
+    handlerSelecionados?: (ids: string[]) => void;
+    label?: string;
+    skipLabel?: boolean;
+    bordered?: boolean;
+    cols?: string;
+    labelContainerStyle?: object;
+    externalMessagesErrors?: string[];
+    idKey?: string;
+    descriptionKey?: string;
+    showClearButton?: boolean;
+    gridLayout?: string;
+    multiple?: boolean;
+}
+declare type PeriodChangeEvent = {
+    initial: string;
+    final: string;
+};
+declare type PeriodFieldChangeEvent = {
+    target: {
+        name: string;
+        value: string;
+    };
+};
+interface IFieldPeriodProps extends WithFieldProps {
+    data?: object;
+    nameDateInitial: string;
+    nameDateFinal: string;
+    handlerFieldChange?: (event: PeriodFieldChangeEvent) => PeriodFieldChangeEvent;
+    label?: string;
+    component?: ComponentType<any>;
+    onBlur?: () => void;
+    validators?: PeriodValidator | PeriodValidator[];
+    fieldErrors?: {
+        [name: string]: string[];
+    };
+    externalMessagesErrors?: string[];
+    handlerFieldValidade?: (name: string, value: object, validatorsArray: PeriodValidator[] | PeriodValidator) => void;
+    onChange?: (event: PeriodChangeEvent) => PeriodChangeEvent;
+}
+interface FormContextProps {
+    skeletonize?: boolean;
+    handlerFieldChange: (event: OnFielChangeEvent) => void;
+    handlerFieldValidade: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
+    handlerStoreValidators: (fieldName: string, fieldValidates: object) => void;
+    handlerRemoveValidators: (fieldName: string) => void;
+    data: object;
+    fieldErrors: object;
+    externalFieldErrors?: object;
+}
+interface WithFieldProps {
+    name: string;
+    handlerStoreValidators?: (name: string, validators: Validator | Validator[]) => void;
+    handlerRemoveValidators?: (name: string) => void;
+    validators?: Validator | Validator[] | PeriodValidator | PeriodValidator[];
+}
+interface IWithFieldContext {
+    handlerSetValidatorFromComponent: (validator: Validator | Validator[]) => void;
+}
+interface IWithFormSecurity {
+    handlerClose?: () => void;
+    onClick?: MouseEventHandler;
+    children?: ReactNode;
+}
+interface IFormSecurityContext {
+    onChangedData: (value: boolean) => void;
+    showQuestion: boolean;
+    onConfirmClick: () => void;
+    onUnconfirmClick: () => void;
+    setSecurityBeforeUnload: (value: boolean) => void;
+    securityBeforeUnload?: boolean;
+}
+interface IOnBlurParams {
+    name: string;
+    data?: object;
+    validators?: Validator | Validator[];
+    onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
+    handlerFieldValidade?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
+    handlerFieldChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    validatorFromComponent?: Validator | Validator[];
+}
+interface IGetErrorMessagesParams {
+    name: string;
+    fieldErrors?: {
+        [name: string]: string[];
+    };
+    externalFieldErrors?: {
+        [name: string]: string[];
+    };
+    externalMessagesErrors?: string[];
+}
+
+export { CustomEvent, FormContextProps, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormProps, IFormSecurityContext, IGetErrorMessagesParams, IOnBlurParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator, Validator, WithFieldProps };

package/lib/form/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/form/withFieldHOC.d.ts

@@ -0,0 +1,6 @@
+import React__default from 'react';
+import { WithFieldProps } from './types.js';
+
+declare const withFieldHOC: <ComponentProps extends WithFieldProps>(WrappedComponent: React__default.ComponentType<ComponentProps>) => React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ComponentProps> & React__default.RefAttributes<HTMLElement>>;
+
+export { withFieldHOC as default };