@doctolib/react-form - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

lib/ControlMixin.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -11,2 +9,10 @@ var _stringify = require('babel-runtime/core-js/json/stringify');
 
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
 var _react = require('react');
@@ -34,2 +40,19 @@
 
+  /**
+   * Get an array of options from props.
+   *
+   * @returns {{value: string, label: string}[]}
+   */
+  getOptions: function getOptions() {
+    var options = this.props.options;
+
+    if (!Array.isArray(options)) return (0, _keys2.default)(options).map(function (key) {
+      return { value: String(key), label: options[key] };
+    });
+
+    return options.map(function (entry) {
+      return entry = typeof entry === 'string' ? { value: entry, label: entry } : entry;
+    });
+  },
+
   // from https://github.com/twisty/formsy-react-components/
@@ -46,9 +69,14 @@ hashString: function hashString(string) {
   getId: function getId() {
-    return this.props.id || this.props.name.split('[').join('_').replace(']', '') + this.hashString((0, _stringify2.default)(this.props));
+    var _props = this.props;
+    var leftAddon = _props.leftAddon;
+    var rightAddon = _props.rightAddon;
+    var hashProps = (0, _objectWithoutProperties3.default)(_props, ['leftAddon', 'rightAddon']);
+
+    return this.props.id || this.props.name.split('[').join('_').replace(']', '') + this.hashString((0, _stringify2.default)(hashProps));
   },
   getControlProps: function getControlProps() {
-    var _props = this.props;
-    var className = _props.className;
-    var name = _props.name;
-    var value = _props.value;
+    var _props2 = this.props;
+    var className = _props2.className;
+    var name = _props2.name;
+    var value = _props2.value;
 
@@ -58,5 +86,5 @@ return { className: className, id: this.getId(), name: name, value: value };
   getWrapperProps: function getWrapperProps() {
-    var _props2 = this.props;
-    var label = _props2.label;
-    var wrapperClassName = _props2.wrapperClassName;
+    var _props3 = this.props;
+    var label = _props3.label;
+    var wrapperClassName = _props3.wrapperClassName;
 
@@ -68,4 +96,5 @@ var hasError = !this.isValid() && !this.isPristine();
     var prevValue = this.getValue();
-    if (prevValue === nextValue) return;
 
+    if (String(prevValue) === String(nextValue)) return;
+
     this.setValue(nextValue);
@@ -72,0 +101,0 @@

lib/ControlWrapper.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -29,2 +27,3 @@ var _react = require('react');
   propTypes: {
+    hasAddon: _react.PropTypes.bool,
     children: _react.PropTypes.node.isRequired,
@@ -49,2 +48,8 @@ className: _react.PropTypes.string,
 
+    var control = this.props.hasAddon ? _react2.default.createElement(
+      'div',
+      { className: 'input-group' },
+      children
+    ) : children;
+
     if (label) return _react2.default.createElement(
@@ -66,3 +71,3 @@ 'div',
         { sm: 9 },
-        children
+        control
       )
@@ -74,5 +79,5 @@ );
       { className: className },
-      children
+      control
     );
   }
 });

lib/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Textarea = exports.Select = exports.Input = exports.addValidationRule = exports.Form = undefined;
+exports.__esModule = true;
+exports.addValidationRule = exports.Form = exports.InputAddon = exports.CheckboxGroup = exports.RadioGroup = exports.Textarea = exports.Select = exports.Input = undefined;
 
-var _formsyReact = require('formsy-react');
-
-var _formsyReact2 = _interopRequireDefault(_formsyReact);
-
 var _Input = require('./Input');
 
-var _Input2 = _interopRequireDefault(_Input);
+Object.defineProperty(exports, 'Input', {
+  enumerable: true,
+  get: function get() {
+    return _Input.default;
+  }
+});
 
 var _Select = require('./Select');
 
-var _Select2 = _interopRequireDefault(_Select);
+Object.defineProperty(exports, 'Select', {
+  enumerable: true,
+  get: function get() {
+    return _Select.default;
+  }
+});
 
 var _Textarea = require('./Textarea');
 
-var _Textarea2 = _interopRequireDefault(_Textarea);
+Object.defineProperty(exports, 'Textarea', {
+  enumerable: true,
+  get: function get() {
+    return _Textarea.default;
+  }
+});
 
+var _RadioGroup = require('./RadioGroup');
+
+Object.defineProperty(exports, 'RadioGroup', {
+  enumerable: true,
+  get: function get() {
+    return _RadioGroup.default;
+  }
+});
+
+var _CheckboxGroup = require('./CheckboxGroup');
+
+Object.defineProperty(exports, 'CheckboxGroup', {
+  enumerable: true,
+  get: function get() {
+    return _CheckboxGroup.default;
+  }
+});
+
+var _InputAddon = require('./InputAddon');
+
+Object.defineProperty(exports, 'InputAddon', {
+  enumerable: true,
+  get: function get() {
+    return _InputAddon.default;
+  }
+});
+
+var _formsyReact = require('formsy-react');
+
+var _formsyReact2 = _interopRequireDefault(_formsyReact);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,5 +69,2 @@
 exports.Form = Form;
-exports.addValidationRule = addValidationRule;
-exports.Input = _Input2.default;
-exports.Select = _Select2.default;
-exports.Textarea = _Textarea2.default;
+exports.addValidationRule = addValidationRule;

lib/Input.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -37,4 +35,10 @@ var _extends2 = require('babel-runtime/helpers/extends');
   propTypes: {
+    autoCorrect: _react.PropTypes.string,
+    autoComplete: _react.PropTypes.string,
+    autoCapitalize: _react.PropTypes.string,
+    autoFocus: _react.PropTypes.bool,
     maxLength: _react.PropTypes.number,
     placeholder: _react.PropTypes.string,
+    leftAddon: _react.PropTypes.node,
+    rightAddon: _react.PropTypes.node,
     type: _react.PropTypes.string
@@ -62,13 +66,27 @@ },
     var _props = this.props;
-    var type = _props.type;
+    var autoCapitalize = _props.autoCapitalize;
+    var autoCorrect = _props.autoCorrect;
+    var autoComplete = _props.autoComplete;
+    var autoFocus = _props.autoFocus;
     var maxLength = _props.maxLength;
     var placeholder = _props.placeholder;
+    var type = _props.type;
     var onChange = this.onChange;
 
+    var controlProps = (0, _extends3.default)({}, this.getControlProps(), {
+      autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, autoFocus: autoFocus,
+      maxLength: maxLength, placeholder: placeholder, onChange: onChange, type: type
+    });
+    var wrapperProps = (0, _extends3.default)({}, this.getWrapperProps(), {
+      hasAddon: Boolean(this.props.leftAddon || this.props.rightAddon)
+    });
+
     return _react2.default.createElement(
       _ControlWrapper2.default,
-      this.getWrapperProps(),
-      _react2.default.createElement('input', (0, _extends3.default)({}, this.getControlProps(), { type: type, maxLength: maxLength, placeholder: placeholder, onChange: onChange }))
+      wrapperProps,
+      this.props.leftAddon,
+      _react2.default.createElement('input', controlProps),
+      this.props.rightAddon
     );
   }
 });

lib/Select.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -11,6 +9,2 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
-var _keys = require('babel-runtime/core-js/object/keys');
-
-var _keys2 = _interopRequireDefault(_keys);
-
 var _react = require('react');
@@ -78,11 +72,3 @@
   renderOptions: function renderOptions() {
-    var _this = this;
-
-    var options = this.props.options;
-
-    if (!Array.isArray(options)) return (0, _keys2.default)(options).map(function (key, index) {
-      return _this.renderOption({ value: String(key), label: options[key] }, index);
-    });
-
-    return options.map(this.renderOption);
+    return this.getOptions().map(this.renderOption);
   },
@@ -96,7 +82,7 @@
 
-  renderOption: function renderOption(entry, key) {
-    entry = typeof entry === 'string' ? { value: entry, label: entry } : entry;
+  renderOption: function renderOption(entry, index) {
     var props = {
-      key: key,
-      value: entry.value
+      key: index,
+      value: entry.value,
+      ref: index
     };
@@ -103,0 +89,0 @@ return _react2.default.createElement(

lib/Textarea.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -7,0 +5,0 @@ var _extends2 = require('babel-runtime/helpers/extends');

package.json

 {
   "name": "@doctolib/react-form",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Set of React form components based on react-formsy.",
@@ -34,2 +34,3 @@ "main": "lib/index.js",
     "babel-plugin-transform-runtime": "^6.3.13",
+    "babel-preset-doctolib": "^1.1.3",
     "babel-preset-es2015": "^6.3.13",
@@ -36,0 +37,0 @@ "babel-preset-react": "^6.3.13",

README.md

@@ -53,4 +53,19 @@ # react-form
 
+### InputAddon
+
+Addon for input.
+
+```js
+import {Input, InputAddon} from '@doctolib/react-form';
+const Component = () => (
+  <Input
+    name="firstname"
+    leftAddon={<InputAddon>hey</InputAddon>}
+    rightAddon={<InputAddon>you</InputAddon>}
+  />
+);
+
+
 ## License
 
 MIT

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23877

increased by61.16%

Number of package files

11

increased by37.5%

Lines of code

571

increased by77.33%

Number of lines in readme file

71

increased by26.79%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes