@uidu/field-base - npm Package Compare versions

Comparing version 0.1.41 to 0.1.42

CHANGELOG.md

 # Change Log
 
+## 0.1.42
+
+### Patch Changes
+
+- [patch][9663f6e](https://github.org/uidu-org/guidu/commits/9663f6e):
+
+  Release all packages for bumping all dependencies, fixes for react lifecycle unsafe methods- [patch][9663f6e](https://github.org/uidu-org/guidu/commits/9663f6e):
+
+  FIX in theme and dependencies
+
 ## 0.1.41
-- [patch] [eea866e](https://github.org/uidu-org/guidu/commits/eea866e):
 
-  -  Field base default props
+- [patch][eea866e](https://github.org/uidu-org/guidu/commits/eea866e):
 
+  - Field base default props
+
 ## 0.1.40
-- [patch] [affa7ad](https://github.org/uidu-org/guidu/commits/affa7ad):
 
+- [patch][affa7ad](https://github.org/uidu-org/guidu/commits/affa7ad):
+
   - Release all packages, unique tsconfig
-- [patch] [affa7ad](https://github.org/uidu-org/guidu/commits/affa7ad):
 
+- [patch][affa7ad](https://github.org/uidu-org/guidu/commits/affa7ad):
+
   - Fixed all ts errors, try to release again
 
 ## 0.1.39
-- [patch] [afb33ad](https://github.org/uidu-org/guidu/commits/afb33ad):
 
+- [patch][afb33ad](https://github.org/uidu-org/guidu/commits/afb33ad):
+
   - Avatar to ts, fix typings for field-base"
 
 ## 0.1.38
-- [patch] [4a4aff7](https://github.org/uidu-org/guidu/commits/4a4aff7):
 
+- [patch][4a4aff7](https://github.org/uidu-org/guidu/commits/4a4aff7):
+
   - Better package json organization
 
 ## 0.1.37
-- [patch] [b78d4f0](https://github.org/uidu-org/guidu/commits/b78d4f0):
 
+- [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
-- [patch] [f40a1fe](https://github.org/uidu-org/guidu/commits/f40a1fe):
 
+- [patch][f40a1fe](https://github.org/uidu-org/guidu/commits/f40a1fe):
+
   - Bump dependencies
 
 ## 0.1.35
-- [patch] [86c0899](https://github.org/uidu-org/guidu/commits/86c0899):
 
+- [patch][86c0899](https://github.org/uidu-org/guidu/commits/86c0899):
+
   - Upgrade form and field-base to typescript
 
 ## 0.1.34
-- [patch] [a30f71a](https://github.org/uidu-org/guidu/commits/a30f71a):
 
+- [patch][a30f71a](https://github.org/uidu-org/guidu/commits/a30f71a):
+
   - Added field-date-range and field-date
-- [patch] [a30f71a](https://github.org/uidu-org/guidu/commits/a30f71a):
 
+- [patch][a30f71a](https://github.org/uidu-org/guidu/commits/a30f71a):
+
   - Better date controls in dashboard
 
 ## 0.1.33
-- [patch] [def6207](https://github.org/uidu-org/guidu/commits/def6207):
 
+- [patch][def6207](https://github.org/uidu-org/guidu/commits/def6207):
+
   - Bump react-feather, fixes to Select, downshift and toggle
 
 ## 0.1.32
-- [patch] [e73498c](https://github.org/uidu-org/guidu/commits/e73498c):
 
+- [patch][e73498c](https://github.org/uidu-org/guidu/commits/e73498c):
+
   - Added textarea field component
@@ -58,0 +80,0 @@

components/ComponentHOC/index.js

@@ -1,6 +0,6 @@
-import * as tslib_1 from "tslib";
+import { __assign, __extends, __rest } from "tslib";
 import { FormContext } from '@uidu/form';
 import { withFormsy } from 'formsy-react';
 import React from 'react';
-import shortid from 'shortid';
+import { getDisplayName, getFallbackBoolean, getId, shouldShowErrors, } from '../../utils';
 // Component HOC
@@ -17,82 +17,38 @@ // -------------
 // basis.
-var FormsyReactComponent = function (Component) {
+var withFRC = function (Component) {
     var _a;
     var result = (_a = /** @class */ (function (_super) {
-            tslib_1.__extends(FrcWrapper, _super);
+            __extends(FrcWrapper, _super);
             function FrcWrapper(props) {
                 var _this = _super.call(this, props) || this;
                 _this.id = null;
-                // Use the following value for layout:
-                // 1. layout prop (if supplied)
-                // 2. [else] layout context (if defined)
-                // 3. [else] 'vertical' (default value)
-                _this.getLayout = function () { return _this.props.layout || (_this.context.layout || 'vertical'); };
-                // Use the following value for validatePristine:
-                // 1. validatePristine prop (if supplied)
-                // 2. [else] validatePristine context (if defined)
-                // 3. [else] false (default value)
-                _this.getValidatePristine = function () {
-                    var validatePristine = _this.props.validatePristine;
-                    var contextValidatePristine = _this.props.validatePristine;
-                    if (typeof validatePristine === 'boolean') {
-                        return validatePristine;
-                    }
-                    return contextValidatePristine || false;
-                };
-                // Use the following value for validateOnSubmit:
-                // 1. validateOnSubmit prop (if supplied)
-                // 2. [else] validateOnSubmit context (if defined)
-                // 3. [else] false (default value)
-                _this.getValidateOnSubmit = function () {
-                    var validateOnSubmit = _this.props.validateOnSubmit;
-                    var contextValidateOnSubmit = _this.props.validateOnSubmit;
-                    if (typeof validateOnSubmit === 'boolean') {
-                        return validateOnSubmit;
-                    }
-                    return contextValidateOnSubmit || false;
-                };
-                // Combine a parent context value with a component prop value.
-                // This is used for CSS classnames, where the value is passed to `JedWatson/classnames`.
-                _this.combineContextWithProp = function (key) { return [_this.context[key], _this.props[key]]; };
-                _this.hashString = function (string) {
-                    var hash = 0;
-                    for (var i = 0; i < string.length; i += 1) {
-                        // eslint-disable-next-line no-bitwise
-                        hash = ((hash << 5) - hash + string.charCodeAt(i)) & 0xffffffff;
-                    }
-                    return hash;
-                };
-                // Determine whether to show errors, or not.
-                _this.shouldShowErrors = function () {
-                    var _a = _this.props, isPristine = _a.isPristine, isFormSubmitted = _a.isFormSubmitted, isValid = _a.isValid;
-                    if (isPristine) {
-                        if (_this.getValidatePristine() === false) {
-                            return false;
-                        }
-                    }
-                    if (_this.getValidateOnSubmit() === true) {
-                        if (!isFormSubmitted) {
-                            return false;
-                        }
-                    }
-                    return !isValid;
-                };
-                var id = props.id;
-                _this.id = id || shortid.generate();
                 return _this;
             }
-            // We pass through all unknown props, but delete some
-            // formsy HOC props that we know we don't need.
             FrcWrapper.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, ref = _a.ref, otherProps = tslib_1.__rest(_a, ["isFormDisabled", "disabled", "errorMessages", "isRequired", "value", "setValue", "ref"]);
-                var cssProps = {
-                    elementWrapperClassName: this.combineContextWithProp('elementWrapperClassName'),
-                    labelClassName: this.combineContextWithProp('labelClassName'),
-                    rowClassName: this.combineContextWithProp('rowClassName'),
+                var _a = this.context, contextLayout = _a.layout, contextValidateBeforeSubmit = _a.validateBeforeSubmit, contextValidatePristine = _a.validatePristine;
+                var _b = this.props, 
+                /* eslint-disable @typescript-eslint/no-unused-vars */
+                errorMessage = _b.errorMessage, hasValue = _b.hasValue, innerRef = _b.innerRef, isRequired = _b.isRequired, isValidValue = _b.isValidValue, resetValue = _b.resetValue, setValidations = _b.setValidations, showError = _b.showError, showRequired = _b.showRequired, validationError = _b.validationError, validationErrors = _b.validationErrors, validations = _b.validations, 
+                /* eslint-enable @typescript-eslint/no-unused-vars */
+                isFormDisabled = _b.isFormDisabled, isFormSubmitted = _b.isFormSubmitted, isPristine = _b.isPristine, isValid = _b.isValid, setValue = _b.setValue, propValidateBeforeSubmit = _b.validateBeforeSubmit, propValidatePristine = _b.validatePristine, propLayout = _b.layout, propDisabled = _b.disabled, propId = _b.id, propLabel = _b.label, propName = _b.name, componentRef = _b.componentRef, props = __rest(_b, ["errorMessage", "hasValue", "innerRef", "isRequired", "isValidValue", "resetValue", "setValidations", "showError", "showRequired", "validationError", "validationErrors", "validations", "isFormDisabled", "isFormSubmitted", "isPristine", "isValid", "setValue", "validateBeforeSubmit", "validatePristine", "layout", "disabled", "id", "label", "name", "componentRef"]);
+                var validatePristine = getFallbackBoolean(propValidatePristine, contextValidatePristine, false);
+                var validateBeforeSubmit = getFallbackBoolean(propValidateBeforeSubmit, contextValidateBeforeSubmit, true);
+                var showErrors = shouldShowErrors(isPristine, isFormSubmitted, isValid, validatePristine, validateBeforeSubmit);
+                var layout = propLayout || contextLayout;
+                var newProps = {
+                    id: getId(propId || '', propLabel || '', propName),
+                    label: propLabel,
+                    name: propName,
+                    ref: componentRef,
+                    disabled: isFormDisabled || propDisabled || false,
+                    layout: layout,
+                    showErrors: showErrors,
+                    onSetValue: setValue,
                 };
-                var newProps = tslib_1.__assign({}, cssProps, { disabled: isFormDisabled || disabled, errorMessages: errorMessages, id: this.id, layout: this.getLayout(), required: isRequired, showErrors: this.shouldShowErrors(), value: value, onSetValue: setValue });
-                return (React.createElement(Component, tslib_1.__assign({ ref: ref }, otherProps, newProps)));
+                return React.createElement(Component, __assign({}, props, newProps));
             };
             return FrcWrapper;
         }(React.Component)),
+        _a.displayName = "withFRC(" + getDisplayName(Component) + ")",
+        _a.contextType = FormContext,
         _a.defaultProps = {
@@ -102,16 +58,7 @@ onChange: function () { },
         },
-        _a.contextType = FormContext,
         _a);
     return result;
-    //  const WithFormsy = withFormsy(ComponentHOC as any);
-    //  return React.forwardRef<any, P>(({ children, ...props }, ref) => {
-    //    return (
-    //      <WithFormsy {...props} ref={ref}>
-    //        {children}
-    //      </WithFormsy>
-    //    );
-    //  });
 };
 // @ts-ignore
-export default (function (Component) { return withFormsy(FormsyReactComponent(Component)); });
+export default (function (Component) { return withFormsy(withFRC(Component)); });
 //# sourceMappingURL=index.js.map

components/ComponentHOC/types.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { PassDownProps } from 'formsy-react/dist/Wrapper';
@@ -10,1 +11,13 @@ import { FieldBaseLayout } from '../../types';
 };
+export declare type ComponentValue = string | string[];
+export interface RequiredFromOriginalComponentProps {
+    validateBeforeSubmit: boolean;
+    validatePristine: boolean;
+    layout: FieldBaseLayout;
+    name: string;
+    value: ComponentValue;
+    disabled: boolean;
+    id: string;
+    label: React.ReactNode;
+    componentRef: React.RefObject<any>;
+}

components/Row/index.js

@@ -1,2 +0,2 @@
-import * as tslib_1 from "tslib";
+import { __assign, __extends } from "tslib";
 import classNames from 'classnames';
@@ -6,3 +6,3 @@ import React, { PureComponent } from 'react';
 var Row = /** @class */ (function (_super) {
-    tslib_1.__extends(Row, _super);
+    __extends(Row, _super);
     function Row() {
@@ -40,3 +40,3 @@ return _super !== null && _super.apply(this, arguments) || this;
         return (React.createElement("div", { className: classNames(cssClasses.row) },
-            shouldRenderLabel ? React.createElement(Label, tslib_1.__assign({}, this.props)) : null,
+            shouldRenderLabel ? React.createElement(Label, __assign({}, this.props)) : null,
             element));
@@ -43,0 +43,0 @@ };

components/Wrapper/index.js

@@ -1,6 +0,6 @@
-import * as tslib_1 from "tslib";
+import { __assign, __extends } from "tslib";
 import React, { PureComponent } from 'react';
 import { ErrorMessages, FloatLabel, Help, Icon, RequiredSymbol, Row, } from '../../index';
 var Wrapper = /** @class */ (function (_super) {
-    tslib_1.__extends(Wrapper, _super);
+    __extends(Wrapper, _super);
     function Wrapper() {
@@ -15,3 +15,3 @@ return _super !== null && _super.apply(this, arguments) || this;
         if (floatLabel) {
-            return (React.createElement(Row, tslib_1.__assign({ label: function () { return null; }, required: false, htmlFor: id }, this.props),
+            return (React.createElement(Row, __assign({ label: function () { return null; }, required: false, htmlFor: id }, this.props),
                 React.createElement(FloatLabel, { htmlFor: id, className: "has-float-label" },
@@ -29,3 +29,3 @@ children,
         }
-        return (React.createElement(Row, tslib_1.__assign({ htmlFor: id }, this.props),
+        return (React.createElement(Row, __assign({ htmlFor: id }, this.props),
             children,
@@ -32,0 +32,0 @@ showErrors ? React.createElement(ErrorMessages, { messages: errorMessages }) : null,

package.json

 {
   "name": "@uidu/field-base",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "description": "Inputs using Formsy",
@@ -12,3 +12,3 @@ "repository": "https://github.com/uidu-org/guidu.git",
   "dependencies": {
-    "@uidu/form": "^0.1.35",
+    "@uidu/form": "^0.1.36",
     "classnames": "^2.2.6",
@@ -25,2 +25,2 @@ "formsy-react": "^2.0.0-beta.3",
   "uidu:src": "index.ts"
-}
+}

src/components/ComponentHOC/types.ts

@@ -11,1 +11,15 @@ import { PassDownProps } from 'formsy-react/dist/Wrapper';
 };
+
+export type ComponentValue = string | string[];
+
+export interface RequiredFromOriginalComponentProps {
+  validateBeforeSubmit: boolean;
+  validatePristine: boolean;
+  layout: FieldBaseLayout;
+  name: string;
+  value: ComponentValue;
+  disabled: boolean;
+  id: string;
+  label: React.ReactNode;
+  componentRef: React.RefObject<any>;
+}

styled/FloatLabel.js

@@ -1,7 +0,7 @@
-import * as tslib_1 from "tslib";
+import { __makeTemplateObject } from "tslib";
 import styled from 'styled-components';
 // Float Labels
 // https://github.com/tonystar/bootstrap-float-label 4.0.2
-export default styled.label(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: block;\n  margin-bottom: 0;\n  position: relative;\n\n  & > span {\n    cursor: text;\n    font-size: 0.8rem;\n    left: 1rem;\n    line-height: 1;\n    opacity: 1;\n    padding: 0 1px;\n    pointer-events: none;\n    position: absolute;\n    top: -0.5em;\n    transition: left, opacity, top 0.2s;\n    z-index: 3;\n\n    &::after {\n      background: #fff;\n      content: ' ';\n      display: block;\n      height: 2px;\n      left: -0.02em;\n      position: absolute;\n      right: -0.02em;\n      top: 50%;\n      z-index: -1;\n    }\n  }\n\n  .form-control {\n    &:placeholder-shown {\n      &:not(:focus) {\n        &::placeholder {\n          opacity: 0;\n        }\n\n        & + * {\n          font-size: 1rem;\n          opacity: 0.5;\n          top: 50%;\n          transform: translateY(-50%);\n        }\n      }\n    }\n\n    &::placeholder {\n      opacity: 1;\n      transition: left, opacity, top 0.2s;\n    }\n  }\n"], ["\n  display: block;\n  margin-bottom: 0;\n  position: relative;\n\n  & > span {\n    cursor: text;\n    font-size: 0.8rem;\n    left: 1rem;\n    line-height: 1;\n    opacity: 1;\n    padding: 0 1px;\n    pointer-events: none;\n    position: absolute;\n    top: -0.5em;\n    transition: left, opacity, top 0.2s;\n    z-index: 3;\n\n    &::after {\n      background: #fff;\n      content: ' ';\n      display: block;\n      height: 2px;\n      left: -0.02em;\n      position: absolute;\n      right: -0.02em;\n      top: 50%;\n      z-index: -1;\n    }\n  }\n\n  .form-control {\n    &:placeholder-shown {\n      &:not(:focus) {\n        &::placeholder {\n          opacity: 0;\n        }\n\n        & + * {\n          font-size: 1rem;\n          opacity: 0.5;\n          top: 50%;\n          transform: translateY(-50%);\n        }\n      }\n    }\n\n    &::placeholder {\n      opacity: 1;\n      transition: left, opacity, top 0.2s;\n    }\n  }\n"])));
+export default styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 0;\n  position: relative;\n\n  & > span {\n    cursor: text;\n    font-size: 0.8rem;\n    left: 1rem;\n    line-height: 1;\n    opacity: 1;\n    padding: 0 1px;\n    pointer-events: none;\n    position: absolute;\n    top: -0.5em;\n    transition: left, opacity, top 0.2s;\n    z-index: 3;\n\n    &::after {\n      background: #fff;\n      content: ' ';\n      display: block;\n      height: 2px;\n      left: -0.02em;\n      position: absolute;\n      right: -0.02em;\n      top: 50%;\n      z-index: -1;\n    }\n  }\n\n  .form-control {\n    &:placeholder-shown {\n      &:not(:focus) {\n        &::placeholder {\n          opacity: 0;\n        }\n\n        & + * {\n          font-size: 1rem;\n          opacity: 0.5;\n          top: 50%;\n          transform: translateY(-50%);\n        }\n      }\n    }\n\n    &::placeholder {\n      opacity: 1;\n      transition: left, opacity, top 0.2s;\n    }\n  }\n"], ["\n  display: block;\n  margin-bottom: 0;\n  position: relative;\n\n  & > span {\n    cursor: text;\n    font-size: 0.8rem;\n    left: 1rem;\n    line-height: 1;\n    opacity: 1;\n    padding: 0 1px;\n    pointer-events: none;\n    position: absolute;\n    top: -0.5em;\n    transition: left, opacity, top 0.2s;\n    z-index: 3;\n\n    &::after {\n      background: #fff;\n      content: ' ';\n      display: block;\n      height: 2px;\n      left: -0.02em;\n      position: absolute;\n      right: -0.02em;\n      top: 50%;\n      z-index: -1;\n    }\n  }\n\n  .form-control {\n    &:placeholder-shown {\n      &:not(:focus) {\n        &::placeholder {\n          opacity: 0;\n        }\n\n        & + * {\n          font-size: 1rem;\n          opacity: 0.5;\n          top: 50%;\n          transform: translateY(-50%);\n        }\n      }\n    }\n\n    &::placeholder {\n      opacity: 1;\n      transition: left, opacity, top 0.2s;\n    }\n  }\n"])));
 var templateObject_1;
 //# sourceMappingURL=FloatLabel.js.map

version.json

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

No alert changes

Improved metrics

Total package byte prevSize

55934

increased by4.95%

Number of package files

89

increased by5.95%

Lines of code

1148

increased by10.49%

Dependency changes

• Updated@uidu/form@^0.1.36