recassfov - npm Package Compare versions

Comparing version 0.0.22 to 0.0.23

build/Recassfov.js

@@ -284,5 +284,52 @@ 'use strict';
 
-var Select = function (_React$Component4) {
-  _inherits(Select, _React$Component4);
+var Textarea = function (_React$Component4) {
+  _inherits(Textarea, _React$Component4);
 
+  function Textarea(props) {
+    _classCallCheck(this, Textarea);
+
+    var _this5 = _possibleConstructorReturn(this, (Textarea.__proto__ || Object.getPrototypeOf(Textarea)).call(this, props));
+
+    _this5.props.store.setFormItem(_this5.props);
+    return _this5;
+  }
+
+  _createClass(Textarea, [{
+    key: 'render',
+    value: function render() {
+      var _props3 = this.props,
+          store = _props3.store,
+          validations = _props3.validations,
+          className = _props3.className,
+          otherProps = _objectWithoutProperties(_props3, ['store', 'validations', 'className']);
+
+      var thisItem = store.state.formItems[this.props.name];
+
+      return _react2.default.createElement(
+        _react2.default.Fragment,
+        null,
+        _react2.default.createElement(
+          'textarea',
+          _extends({}, otherProps, {
+            onChange: store.handleInput,
+            className: '' + (className || '') + thisItem.className,
+            value: thisItem.value
+          }),
+          this.props.children
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: store.state.classNames.invalidFeedback },
+          thisItem.invalidFeedback
+        )
+      );
+    }
+  }]);
+
+  return Textarea;
+}(_react2.default.Component);
+
+var Select = function (_React$Component5) {
+  _inherits(Select, _React$Component5);
+
   function Select() {
@@ -297,6 +344,6 @@ _classCallCheck(this, Select);
     value: function render() {
-      var _props3 = this.props,
-          store = _props3.store,
-          children = _props3.children,
-          otherProps = _objectWithoutProperties(_props3, ['store', 'children']);
+      var _props4 = this.props,
+          store = _props4.store,
+          children = _props4.children,
+          otherProps = _objectWithoutProperties(_props4, ['store', 'children']);
 
@@ -344,3 +391,4 @@ return _react2.default.createElement(
 module.exports.Input = connectConsumer(Input);
+module.exports.Textarea = connectConsumer(Textarea);
 module.exports.Select = connectConsumer(Select);
 

example/index.jsx

 import React from 'react'
 import ReactDOM from 'react-dom'
 
-import { Form, Input } from './../src/Recassfov'
+import { Form, Input, Textarea } from './../src/Recassfov'
 
@@ -26,2 +26,9 @@ const validations = {
     }
+  ],
+  message: [
+    {
+      rule: 'isLength',
+      args: { min: 1 },
+      invalidFeedback: 'please provide a message'
+    }
   ]
@@ -70,3 +77,3 @@ }
         }}
-      >
+        >
         <h2>demo form</h2>
@@ -85,3 +92,3 @@
             validations={validations.username}
-          />
+            />
         </div>
@@ -95,3 +102,3 @@
             validations={validations.email}
-          />
+            />
         </div>
@@ -105,11 +112,11 @@
             validations={validations.password}
-          />
+            />
         </div>
 
         <div>
-          <Input
-            type='checkbox'
-            name='rememberMe'
-            placeholder='remember me'
-          />
+          <Textarea
+            name='message'
+            placeholder='message'
+            validations={validations.message}
+            />
         </div>
@@ -116,0 +123,0 @@

package.json

 {
   "name": "recassfov",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "React client and server side form validation",
@@ -5,0 +5,0 @@ "main": "./build/Recassfov.js",

src/Recassfov.jsx

@@ -232,2 +232,29 @@ import React from 'react'
 
+class Textarea extends React.Component {
+  constructor (props) {
+    super(props)
+    this.props.store.setFormItem(this.props)
+  }
+
+  render () {
+    const { store, validations, className, ...otherProps } = this.props
+    const thisItem = store.state.formItems[this.props.name]
+
+    return (
+      <React.Fragment>
+        <textarea
+          {...otherProps}
+          onChange={store.handleInput}
+          className={`${className || ''}${thisItem.className}`}
+          value={thisItem.value}
+          >
+          {this.props.children}
+        </textarea>
+
+        <div className={store.state.classNames.invalidFeedback}>{thisItem.invalidFeedback}</div>
+      </React.Fragment>
+    )
+  }
+}
+
 class Select extends React.Component {
@@ -265,2 +292,3 @@ render () {
 module.exports.Input = connectConsumer(Input)
+module.exports.Textarea = connectConsumer(Textarea)
 module.exports.Select = connectConsumer(Select)

No alert changes

Improved metrics

Total package byte prevSize

169516

increased by1.4%

Lines of code

723

increased by10.89%

No dependency changes