@uidu/field-base - npm Package Compare versions

Comparing version 0.1.36 to 0.1.37

CHANGELOG.md

 # Change Log
 
+## 0.1.37
+- [patch] [b78d4f0](https://github.org/uidu-org/guidu/commits/b78d4f0):
+
+  - Migrate forms to typescript, WIP typing and documenting all components, using formsy 2"
+
 ## 0.1.36
@@ -4,0 +9,0 @@ - [patch] [f40a1fe](https://github.org/uidu-org/guidu/commits/f40a1fe):

components/ComponentHOC/index.d.ts

 import React from 'react';
-declare const FormsyReactComponent: (ComposedComponent: any) => React.ComponentClass<{
-    [x: string]: any;
-} & {
-    [x: string]: any;
-}, any>;
+declare const FormsyReactComponent: (ComposedComponent: React.ComponentClass<any, any>) => React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<any>>;
 export default FormsyReactComponent;

components/ComponentHOC/index.js

@@ -85,3 +85,3 @@ import * as tslib_1 from "tslib";
         ComponentHOC.prototype.render = function () {
-            var _a = this.props, isFormDisabled = _a.isFormDisabled, disabled = _a.disabled, errorMessages = _a.errorMessages, isRequired = _a.isRequired, value = _a.value, setValue = _a.setValue;
+            var _a = this.props, isFormDisabled = _a.isFormDisabled, disabled = _a.disabled, errorMessages = _a.errorMessages, isRequired = _a.isRequired, value = _a.value, setValue = _a.setValue, ref = _a.ref;
             var cssProps = {
@@ -93,20 +93,17 @@ elementWrapperClassName: this.combineContextWithProp('elementWrapperClassName'),
             var props = tslib_1.__assign({}, this.props, cssProps, { disabled: isFormDisabled || disabled, errorMessages: errorMessages, id: this.id, layout: this.getLayout(), required: isRequired, showErrors: this.shouldShowErrors(), value: value, onSetValue: setValue });
-            return React.createElement(ComposedComponent, tslib_1.__assign({}, props));
+            return React.createElement(ComposedComponent, tslib_1.__assign({ ref: ref }, props));
         };
         ComponentHOC.contextType = FormContext;
-        ComponentHOC.defaultProps = {
-            disabled: false,
-            id: null,
-            label: null,
-            help: null,
-            layout: 'vertical',
-            validateOnSubmit: true,
-            validatePristine: false,
-            onChange: function () { },
-        };
         return ComponentHOC;
     }(Component));
-    return withFormsy(ComponentHOC);
+    ComposedComponent.defaultProps = {
+        onChange: function () { },
+        layout: 'vertical',
+    };
+    var WithFormsy = withFormsy(ComponentHOC);
+    return React.forwardRef(function (props, ref) {
+        return React.createElement(WithFormsy, tslib_1.__assign({}, props, { ref: ref }));
+    });
 };
 export default FormsyReactComponent;
 //# sourceMappingURL=index.js.map

components/ComponentHOC/types.d.ts

@@ -5,5 +5,6 @@ import { PassDownProps } from 'formsy-react/dist/Wrapper';
     layout: FieldBaseLayout;
-    disabled: boolean;
+    disabled?: boolean;
     validateOnSubmit?: boolean;
     validatePristine?: boolean;
+    onChange?: () => void;
 };

package.json

 {
   "name": "@uidu/field-base",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "Inputs using Formsy",
@@ -16,3 +16,3 @@ "module": "index.js",
   "dependencies": {
-    "@uidu/form": "^0.1.32",
+    "@uidu/form": "^0.1.33",
     "classnames": "^2.2.6",
@@ -19,0 +19,0 @@ "formsy-react": "^2.0.0-beta.3",

src/components/ComponentHOC/types.ts

@@ -6,5 +6,6 @@ import { PassDownProps } from 'formsy-react/dist/Wrapper';
   layout: FieldBaseLayout;
-  disabled: boolean;
+  disabled?: boolean;
   validateOnSubmit?: boolean;
   validatePristine?: boolean;
+  onChange?: () => void;
 };

src/types.ts

@@ -8,9 +8,55 @@ export type FieldBaseLayout = 'horizontal' | 'vertical' | 'elementOnly';
   layout?: FieldBaseLayout;
+  /** Standard HTML input pattern attribute, used for validating using a regular expression. */
+  pattern?: string;
+  /** Sets the field as uneditable, with a changed hover state. */
+  disabled?: boolean;
+  /** Add asterisk to label. Set required for form that the field is part of. */
+  required?: boolean;
+
+  /** If true, prevents the value of the input from being edited. */
+  isReadOnly?: boolean;
+
   showErrors?: boolean;
+  /** type assigned to input */
+  type: string;
+  /** id assigned to input */
+  id: string;
+  /** The name of the submitted field. */
   value: any;
+  /** The name of the submitted field. */
   name: string;
+  /** Text to display in the input if the input is empty. */
+  placeholder?: string;
+
+  className?: string;
+
+  /** Standard HTML input autocomplete attribute. */
+  autoComplete?: string;
+  /** Sets whether to apply spell checking to the content. */
+  isSpellCheckEnabled?: boolean;
+  /** Sets whether the component should be automatically focused on component
+   render. */
+  autoFocus?: boolean;
+  /** Set the maximum length that the entered text can be. */
+  maxLength?: number;
+
   /** Function that is called whenever the state of the checkbox changes. It will
    be called with an object containing the react synthetic event. Use currentTarget to get value, name and checked */
-  onChange: (name, value) => void;
+  onChange?: (name, value) => void;
+  onBlur?: (name, value) => void;
   onSetValue: (value) => void;
+
+  // /** Handler to be called when the input loses focus. */
+
+  // onBlur?: (e: React.FocusEvent) => any;
+  // /** Handler to be called when the input changes. */
+  // onChange?: (e: React.ChangeEvent) => any;
+  /** Handler to be called when the input receives focus. */
+  onFocus?: (e: React.FocusEvent) => any;
+  /** Standard input onkeydown event. */
+  onKeyDown?: (e: React.KeyboardEvent) => any;
+  /** Standard input onkeypress event. */
+  onKeyPress?: (e: React.KeyboardEvent) => any;
+  /** Standard input onkeyup event. */
+  onKeyUp?: (e: React.KeyboardEvent) => any;
 };

types.d.ts

@@ -8,9 +8,44 @@ /// <reference types="react" />
     layout?: FieldBaseLayout;
+    /** Standard HTML input pattern attribute, used for validating using a regular expression. */
+    pattern?: string;
+    /** Sets the field as uneditable, with a changed hover state. */
+    disabled?: boolean;
+    /** Add asterisk to label. Set required for form that the field is part of. */
+    required?: boolean;
+    /** If true, prevents the value of the input from being edited. */
+    isReadOnly?: boolean;
     showErrors?: boolean;
+    /** type assigned to input */
+    type: string;
+    /** id assigned to input */
+    id: string;
+    /** The name of the submitted field. */
     value: any;
+    /** The name of the submitted field. */
     name: string;
+    /** Text to display in the input if the input is empty. */
+    placeholder?: string;
+    className?: string;
+    /** Standard HTML input autocomplete attribute. */
+    autoComplete?: string;
+    /** Sets whether to apply spell checking to the content. */
+    isSpellCheckEnabled?: boolean;
+    /** Sets whether the component should be automatically focused on component
+     render. */
+    autoFocus?: boolean;
+    /** Set the maximum length that the entered text can be. */
+    maxLength?: number;
     /** Function that is called whenever the state of the checkbox changes. It will
      be called with an object containing the react synthetic event. Use currentTarget to get value, name and checked */
-    onChange: (name: any, value: any) => void;
+    onChange?: (name: any, value: any) => void;
+    onBlur?: (name: any, value: any) => void;
     onSetValue: (value: any) => void;
+    /** Handler to be called when the input receives focus. */
+    onFocus?: (e: React.FocusEvent) => any;
+    /** Standard input onkeydown event. */
+    onKeyDown?: (e: React.KeyboardEvent) => any;
+    /** Standard input onkeypress event. */
+    onKeyPress?: (e: React.KeyboardEvent) => any;
+    /** Standard input onkeyup event. */
+    onKeyUp?: (e: React.KeyboardEvent) => any;
 };

version.json

 {
 	"name": "@uidu/field-base",
-	"version": "0.1.36",
+	"version": "0.1.37",
 	"sideEffects": false
 }

No alert changes

Improved metrics

Total package byte prevSize

51503

increased by7.63%

Lines of code

1004

increased by7.49%

Dependency changes

• Updated@uidu/form@^0.1.33