react-invenio-forms - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

CHANGES.md

 # Changes
 
+Version 0.3.0 (released 2020-05-25)
+
+* Adds prettier config
+* Moves docs and website folder under common docs folder
+* Adds `RadioField` component
+
 Version 0.2.1 (released 2020-05-20)
@@ -4,0 +10,0 @@

dist/cjs/index.js

@@ -19,3 +19,3 @@ Object.defineProperty(exports, '__esModule', { value: true });
       style: {
-        float: "right"
+        float: 'right'
       }
@@ -27,3 +27,3 @@ });
       style: {
-        float: "right"
+        float: 'right'
       }
@@ -89,3 +89,3 @@ });
   active: false,
-  label: "",
+  label: '',
   required: false
@@ -250,5 +250,5 @@ };
 ArrayField.defaultProps = {
-  label: "",
-  addButtonLabel: "Add new row",
-  placeholder: ""
+  label: '',
+  addButtonLabel: 'Add new row',
+  placeholder: ''
 };
@@ -299,3 +299,3 @@
 
-  renderError(errors, name, direction = "left") {
+  renderError(errors, name, direction = 'left') {
     const error = errors[name];
@@ -318,3 +318,3 @@ return error ? {
 BooleanField.defaultProps = {
-  label: "",
+  label: '',
   optimized: false
@@ -365,3 +365,3 @@ };
       return /*#__PURE__*/React__default.createElement("div", {
-        className: classNames.join(" ")
+        className: classNames.join(' ')
       }, action && /*#__PURE__*/React__default.createElement("div", {
@@ -381,11 +381,11 @@ className: "group-action"
 
-      const errors = formik.getIn(props, "form.errors");
-      const classNames = ["form-group"];
+      const errors = formik.getIn(props, 'form.errors');
+      const classNames = ['form-group'];
 
       if (border) {
-        classNames.push("border");
+        classNames.push('border');
       }
 
       if (fieldPath && this.hasGroupErrors(errors)) {
-        classNames.push("error");
+        classNames.push('error');
       }
@@ -398,3 +398,3 @@
       return /*#__PURE__*/React__default.createElement(semanticUiReact.Form.Group, Object.assign({
-        className: classNames.join(" ")
+        className: classNames.join(' ')
       }, uiProps), action && /*#__PURE__*/React__default.createElement("div", {
@@ -496,3 +496,3 @@ className: "group-action"
 
-    this.renderError = (errors, name, value, direction = "above") => {
+    this.renderError = (errors, name, value, direction = 'above') => {
       let error = null;
@@ -525,5 +525,5 @@
         options = [{
-          key: "",
-          value: "",
-          text: "-"
+          key: '',
+          value: '',
+          text: '-'
         }, ...options];
@@ -561,4 +561,4 @@ }
     this.renderLabel = (item, index, defaultLabelProps) => {
-      if (!this.props.loading && "error" in item) {
-        defaultLabelProps.className = "error";
+      if (!this.props.loading && 'error' in item) {
+        defaultLabelProps.className = 'error';
       }
@@ -624,3 +624,3 @@
 SelectField.defaultProps = {
-  defaultValue: "",
+  defaultValue: '',
   multiple: false,
@@ -647,3 +647,3 @@ optimized: false
         onBlur: formikBag.form.handleBlur,
-        value: formik.getIn(formikBag.form.values, fieldPath, "")
+        value: formik.getIn(formikBag.form.values, fieldPath, '')
       }, uiProps)), /*#__PURE__*/React__default.createElement(ErrorMessage, {
@@ -692,2 +692,69 @@ fieldPath: fieldPath
 
+class RadioField extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.renderFormField = ({
+      field,
+      form
+    }) => {
+      /** Radio Formik + Semantic-UI Field Component
+       *
+       * NOTE: renderFormField is run multiple times
+       * TODO: might gain performance by extracting it out as own component and
+       *       using class methods
+       *
+       * field: current Formik field (RadioField instance)
+       * form: current Formik form (holds formik state that drives the UI)
+       */
+      const _this$props = this.props,
+            checked = _this$props.checked,
+            fieldPath = _this$props.fieldPath,
+            label = _this$props.label,
+            labelIcon = _this$props.labelIcon,
+            onChange = _this$props.onChange,
+            optimized = _this$props.optimized,
+            value = _this$props.value,
+            uiProps = _objectWithoutProperties(_this$props, ["checked", "fieldPath", "label", "labelIcon", "onChange", "optimized", "value"]);
+
+      const handleChange = (e, {
+        value
+      }) => {
+        this.props.onChange(e, {
+          value
+        });
+        form.setFieldValue(fieldPath, value);
+      };
+
+      return /*#__PURE__*/React__default.createElement(semanticUiReact.Form.Group, {
+        inline: true
+      }, /*#__PURE__*/React__default.createElement(semanticUiReact.Form.Radio, Object.assign({
+        name: fieldPath,
+        label: /*#__PURE__*/React__default.createElement(FieldLabel, {
+          htmlFor: fieldPath,
+          icon: labelIcon,
+          label: label
+        }),
+        value: value,
+        checked: checked,
+        onChange: handleChange
+      }, uiProps)));
+    };
+  }
+
+  render() {
+    const FormikField = this.props.optimized ? formik.FastField : formik.Field;
+    return /*#__PURE__*/React__default.createElement(FormikField, {
+      name: this.props.fieldPath,
+      component: this.renderFormField
+    });
+  }
+
+}
+RadioField.defaultProps = {
+  checked: false,
+  label: '',
+  optimized: false
+};
+
 exports.AccordionField = AccordionField;
@@ -701,4 +768,5 @@ exports.ActionButton = ActionButton;
 exports.GroupField = GroupField;
+exports.RadioField = RadioField;
 exports.SelectField = SelectField;
 exports.TextField = TextField;
 //# sourceMappingURL=index.js.map

dist/esm/index.js

@@ -14,3 +14,3 @@ import React, { Component } from 'react';
       style: {
-        float: "right"
+        float: 'right'
       }
@@ -22,3 +22,3 @@ });
       style: {
-        float: "right"
+        float: 'right'
       }
@@ -84,3 +84,3 @@ });
   active: false,
-  label: "",
+  label: '',
   required: false
@@ -245,5 +245,5 @@ };
 ArrayField.defaultProps = {
-  label: "",
-  addButtonLabel: "Add new row",
-  placeholder: ""
+  label: '',
+  addButtonLabel: 'Add new row',
+  placeholder: ''
 };
@@ -294,3 +294,3 @@
 
-  renderError(errors, name, direction = "left") {
+  renderError(errors, name, direction = 'left') {
     const error = errors[name];
@@ -313,3 +313,3 @@ return error ? {
 BooleanField.defaultProps = {
-  label: "",
+  label: '',
   optimized: false
@@ -360,3 +360,3 @@ };
       return /*#__PURE__*/React.createElement("div", {
-        className: classNames.join(" ")
+        className: classNames.join(' ')
       }, action && /*#__PURE__*/React.createElement("div", {
@@ -376,11 +376,11 @@ className: "group-action"
 
-      const errors = getIn(props, "form.errors");
-      const classNames = ["form-group"];
+      const errors = getIn(props, 'form.errors');
+      const classNames = ['form-group'];
 
       if (border) {
-        classNames.push("border");
+        classNames.push('border');
       }
 
       if (fieldPath && this.hasGroupErrors(errors)) {
-        classNames.push("error");
+        classNames.push('error');
       }
@@ -393,3 +393,3 @@
       return /*#__PURE__*/React.createElement(Form.Group, Object.assign({
-        className: classNames.join(" ")
+        className: classNames.join(' ')
       }, uiProps), action && /*#__PURE__*/React.createElement("div", {
@@ -491,3 +491,3 @@ className: "group-action"
 
-    this.renderError = (errors, name, value, direction = "above") => {
+    this.renderError = (errors, name, value, direction = 'above') => {
       let error = null;
@@ -520,5 +520,5 @@
         options = [{
-          key: "",
-          value: "",
-          text: "-"
+          key: '',
+          value: '',
+          text: '-'
         }, ...options];
@@ -556,4 +556,4 @@ }
     this.renderLabel = (item, index, defaultLabelProps) => {
-      if (!this.props.loading && "error" in item) {
-        defaultLabelProps.className = "error";
+      if (!this.props.loading && 'error' in item) {
+        defaultLabelProps.className = 'error';
       }
@@ -619,3 +619,3 @@
 SelectField.defaultProps = {
-  defaultValue: "",
+  defaultValue: '',
   multiple: false,
@@ -642,3 +642,3 @@ optimized: false
         onBlur: formikBag.form.handleBlur,
-        value: getIn(formikBag.form.values, fieldPath, "")
+        value: getIn(formikBag.form.values, fieldPath, '')
       }, uiProps)), /*#__PURE__*/React.createElement(ErrorMessage, {
@@ -687,3 +687,70 @@ fieldPath: fieldPath
 
-export { AccordionField, ActionButton, ArrayField, BaseForm, BooleanField, ErrorMessage, FieldLabel, GroupField, SelectField, TextField };
+class RadioField extends Component {
+  constructor(...args) {
+    super(...args);
+
+    this.renderFormField = ({
+      field,
+      form
+    }) => {
+      /** Radio Formik + Semantic-UI Field Component
+       *
+       * NOTE: renderFormField is run multiple times
+       * TODO: might gain performance by extracting it out as own component and
+       *       using class methods
+       *
+       * field: current Formik field (RadioField instance)
+       * form: current Formik form (holds formik state that drives the UI)
+       */
+      const _this$props = this.props,
+            checked = _this$props.checked,
+            fieldPath = _this$props.fieldPath,
+            label = _this$props.label,
+            labelIcon = _this$props.labelIcon,
+            onChange = _this$props.onChange,
+            optimized = _this$props.optimized,
+            value = _this$props.value,
+            uiProps = _objectWithoutProperties(_this$props, ["checked", "fieldPath", "label", "labelIcon", "onChange", "optimized", "value"]);
+
+      const handleChange = (e, {
+        value
+      }) => {
+        this.props.onChange(e, {
+          value
+        });
+        form.setFieldValue(fieldPath, value);
+      };
+
+      return /*#__PURE__*/React.createElement(Form.Group, {
+        inline: true
+      }, /*#__PURE__*/React.createElement(Form.Radio, Object.assign({
+        name: fieldPath,
+        label: /*#__PURE__*/React.createElement(FieldLabel, {
+          htmlFor: fieldPath,
+          icon: labelIcon,
+          label: label
+        }),
+        value: value,
+        checked: checked,
+        onChange: handleChange
+      }, uiProps)));
+    };
+  }
+
+  render() {
+    const FormikField = this.props.optimized ? FastField : Field;
+    return /*#__PURE__*/React.createElement(FormikField, {
+      name: this.props.fieldPath,
+      component: this.renderFormField
+    });
+  }
+
+}
+RadioField.defaultProps = {
+  checked: false,
+  label: '',
+  optimized: false
+};
+
+export { AccordionField, ActionButton, ArrayField, BaseForm, BooleanField, ErrorMessage, FieldLabel, GroupField, RadioField, SelectField, TextField };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-invenio-forms",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React components to build forms in Invenio",
@@ -22,3 +22,4 @@ "main": "dist/cjs/index.js",
     "eject": "react-scripts eject",
-    "lint": "eslint src/**/*.js"
+    "lint": "eslint src/**/*.js",
+    "format": "prettier --config ./.prettierrc --ignore-path ./.prettierignore --write \"src/**/*.js\""
   },
@@ -40,2 +41,5 @@ "dependencies": {},
     "@rollup/plugin-node-resolve": "^7.1.3",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
     "coveralls": "^3.0.7",
@@ -49,2 +53,3 @@ "enzyme": "^3.10.0",
     "lodash": "^4.17.15",
+    "prettier": "^2.0.5",
     "react": "^16.13.1",
@@ -65,3 +70,3 @@ "react-dom": "^16.13.1",
     "name": "CERN",
-    "email": "[e-mail]"
+    "email": "[e-mail]"
   },
@@ -68,0 +73,0 @@ "homepage": "https://inveniosoftware.github.io/react-invenio-forms/",

README.md

@@ -1,1 +0,7 @@
-# react-invenio-forms
+# React-Invenio-Forms
+
+[![Build Status](https://img.shields.io/travis/inveniosoftware/react-invenio-forms)](https://travis-ci.org/inveniosoftware/react-invenio-forms)
+[![Release](https://img.shields.io/npm/v/react-invenio-forms)](https://www.npmjs.com/package/react-invenio-forms)
+[![License](https://img.shields.io/github/license/inveniosoftware/react-invenio-forms)](https://github.com/inveniosoftware/react-invenio-forms/blob/master/LICENSE)
+[![Downloads](https://img.shields.io/npm/dm/react-invenio-forms)](https://www.npmjs.com/package/react-invenio-forms)
+[![Chat](https://img.shields.io/gitter/room/inveniosoftware/invenio)](https://gitter.im/inveniosoftware/invenio)

No alert changes

Improved metrics

Total package byte prevSize

140509

increased by9.72%

Lines of code

1293

increased by10.51%

Number of lines in readme file

8

increased by700%

Worsened metrics

Dev dependency count

28

increased by16.67%

No dependency changes