react-input-message - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

dev/input-validator-example.jsx

@@ -37,3 +37,3 @@ 'use strict';
     return (
-      <MessageTrigger group={group} events={['onClick']}>
+      <MessageTrigger events={['onClick']}>
         <button {...props}>{ this.props.children }</button>
@@ -40,0 +40,0 @@ </MessageTrigger>

gulpfile.js

@@ -52,2 +52,8 @@ 'use strict';
 
+gulp.task("webpack", function(callback) {
+    // run webpack
+    webpack(configs.test, function(err, stats) {
+      callback(err);
+    });
+});
 
@@ -54,0 +60,0 @@ gulp.task('release', ['clean', 'build', 'less'])

karma.conf.js

@@ -15,3 +15,3 @@ 'use strict';
       'vendor/sinon-1.10.3.js', //because sinon hates webpack
-      'test.js'
+      '_test.js'
     ],
@@ -29,3 +29,3 @@
     preprocessors: {
-      'test.js': ['webpack', 'sourcemap']
+      '_test.js': ['webpack', 'sourcemap']
     },
@@ -32,0 +32,0 @@

lib/connectToMessageContainer.js

@@ -53,4 +53,2 @@ var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
     MessageListener.prototype._getValidationState = function _getValidationState() {
-      if (!this.props.for) return {};
-
       var messages = this.getContext().messages(this.props.for);
@@ -57,0 +55,0 @@

lib/Message.js

@@ -5,2 +5,4 @@ "use strict";
 
+var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
+
 var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
@@ -17,10 +19,17 @@
 };
+var flatten = function (arr, next) {
+  return arr.concat(next);
+};
 
-var Message = (function () {
-  function Message(props) {
+var Message = (function (_React$Component) {
+  function Message() {
     _classCallCheck(this, Message);
 
-    this.props = props;
+    if (_React$Component != null) {
+      _React$Component.apply(this, arguments);
+    }
   }
 
+  _inherits(Message, _React$Component);
+
   Message.defaultProps = {
@@ -46,3 +55,3 @@ component: "span",
       props,
-      values(messages).join(delim)
+      values(messages).reduce(flatten, []).join(delim)
     );
@@ -52,5 +61,5 @@ };
   return Message;
-})();
+})(React.Component);
 
 module.exports = connectToMessageContainer(Message);
 module.exports._Message = Message;

lib/MessageContainer.js

@@ -63,2 +63,6 @@ "use strict";
 
+  ValidationContainer.prototype.componentDidMount = function componentDidMount() {
+    this._emit();
+  };
+
   ValidationContainer.prototype.componentDidUpdate = function componentDidUpdate() {
@@ -65,0 +69,0 @@ this._emit();

lib/MessageTrigger.js

@@ -28,3 +28,3 @@ "use strict";
 
-    for: requiredIfNot("group", React.PropTypes.string),
+    for: React.PropTypes.string,
 
@@ -62,3 +62,3 @@ group: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)])
     var errClass = this.props.activeClass,
-        active = this.props.active,
+        active = this.props.for && this.props.active,
         child = React.Children.only(this.props.children);
@@ -65,0 +65,0 @@

package.json

 {
   "name": "react-input-message",
   "description": "unopinionated form input annotation",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "repository": {
@@ -19,3 +19,3 @@ "url": "git://github.com/jquense/react-input-message.git"
     "classnames": "^1.1.4",
-    "es6-promise": "^2.0.1"
+    "es6-promise": "~2.0.1"
   },
@@ -47,2 +47,3 @@ "peerDependencies": {
     "property-expr": "^1.0.1",
+    "react": "^0.13.1",
     "react-widgets": "^2.4.1",
@@ -49,0 +50,0 @@ "rf-release": "git://github.com/jquense/rf-release",

README.md

@@ -33,3 +33,3 @@ # react-input-message
             * events to trigger a `onValidationNeeded` handler for */}
-          <MessageSource for='name' events={[ 'onChange', 'onBlur']}>
+          <MessageTrigger for='name' events={[ 'onChange', 'onBlur']}>
             <input type='text' 
@@ -39,3 +39,3 @@ value={this.state.name}
             />
-          </MessageSource>
+          </MessageTrigger>
 
@@ -47,6 +47,6 @@ {/* A `Message` Component will display field specific
 
-         {/* `MessageTrigger` will trigger a `onValidationNeeded` event for the entire
-           * container, or just a specific group. */}
-        <MessageTrigger type='submit'>
-          Submit
+         {/* This `MessageTrigger` will trigger a `onValidationNeeded` event for the entire
+           * container, or just a specific group. Notice the lack of a `for` prop. */}
+        <MessageTrigger events={['onClick']}>
+          <button type='button'>Check</button>
         </MessageTrigger>
@@ -56,6 +56,5 @@ </form>
   )
-
 ```
 
-`react-input-message` exports four simple components: 
+`react-input-message` exports 3 simple components and a utility class: 
 
@@ -66,23 +65,18 @@ #### `MessageContainer`
 
-  - `onValidationNeeded`: a handler that fires for each `MessageSource` component
+  - `onValidationNeeded`: a handler that fires for each `MessageTrigger` component with a `for` prop
   - `messages`: a hash of field names (`for` prop values) and either a string, or an array of strings 
 
 
-#### `MessageSource`
+#### `MessageTrigger`
 
-A MessageSource is a commponent that listens to its child for specific events. Generally this will be an input component
+A MessageTrigger is a commponent that listens to its child for events and triggers a validation event in the containing `MessageContainer`. Generally this will be an input component.
 
 __props__
-  - `for`: a field name or path
-  - `group`: an arbitrary group name that allows inputs to be triggered together
+  - `for`: a field name or path. specifying a `for` prop identifies the Trigger as "something that will need validation". Triggers that exclude a `for` prop won't be the subject of an onValidation event themselves but can trigger validations for other triggers (via groups)
+  - `group`: an arbitrary group name that allows inputs to be triggered together. If a `for` prop is specified then the `group` prop identifies the trigger as a member of that group. If the `for` prop is excluded then the `group` prop identifies which group to trigger validation for.
   - `activeClass`: a class to be added to the input if its field is currently active
-  - `events`: default(['onChange']) an array of prop handlers that the MessageSource will list on, and trigger a `onValidationNeeded` event in the Container
+  - `events`: default(['onChange']) an array of prop handlers that the MessageTrigger will list on, and trigger a `onValidationNeeded` event in the Container
 
-#### `MessageTrigger`
+Leaving the `for` prop `undefined` is a good way to create buttons that can trigger validation for a group (or the entire container), but will not be the subject of a validation itself.
 
-  Simple component that will trigger onValidationNeeded for all or a group of inputs
-
-  - `component`: The Component class that will render, the default is `button`
-  - `group`: scopes the Trigger to a specific group, and will only trigger validation for inputs with the same `group` name
-
 #### `Message`
@@ -124,6 +118,3 @@
 validator.isValid('fieldName')
-
-
-
 ```
 

test/container.jsx

@@ -18,24 +18,19 @@ 'use strict';
 
-describe.only('Container', function(){
+describe('Container', function(){
   var validator;
 
-  // it('should pass messages', () => {
-  //   var inst = utils.renderIntoDocument(
-  //     <MessageContainer messages={{ fieldA: 'hi' }} >
-  //       <div>
-  //         <Message for='fieldA' className='msg'/>
-  //         <Message for='fieldB' className='msg'/>
-  //       </div>
-  //     </MessageContainer>)
+  it('should pass messages', () => {
+    var inst = utils.renderIntoDocument(
+      <MessageContainer messages={{ fieldA: ['hi', 'good day'] }} >
+        <div>
+          <Message for='fieldA' className='msg'/>
+          <Message for='fieldB' className='msg'/>
+        </div>
+      </MessageContainer>)
 
-  //   var messages = findClass(inst, 'msg');
+    var messages = findClass(inst, 'msg'); //will throw if msg 2 is there
 
-  //   console.log(messages)
+    React.findDOMNode(messages).textContent.should.equal('hi, good day')
+  })
 
-  //   messages[0].props.active.should.equal(true)
-  //   messages[0].props.messages.should.equal('hi')
-
-  //   messages[1].props.active.should.equal(false)
-  // })
-
 })

test/validator.js

 'use strict';
 var Validator = require('../src/Validator');
 
+
+
+
+
 describe('validator', function(){
@@ -17,3 +21,14 @@ var validator;
   })
+  
+  it('should use passed in validation function', () => {
+    var spy
+      , context = {}
+      , validator = new Validator(spy = sinon.spy())
 
+    return validator.validate('field', context)
+      .should.be.fulfilled.then(valid => {
+        spy.should.have.been.calledWithExactly('field', context)
+      })
+  })
+
   it('should validate an array of fields', () => {
@@ -20,0 +35,0 @@ var spy

webpack.configs.js

@@ -55,5 +55,5 @@
     devtool: 'inline-source-map',
-    cache: false,
+    cache: true,
 
-    entry: './test.js',
+    entry: './_test.js',
 
@@ -63,6 +63,5 @@ resolve: {
     },
+    
     module: {
       loaders: [
-        { test: /\.css$/, loader: "style-loader!css-loader" },
-        { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
         { test: /sinon-chai/, loader: "imports?define=>false" },
@@ -69,0 +68,0 @@ {

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

Improved metrics

Total package byte prevSize

234158

increased by0.59%

Lines of code

5223

increased by0.54%

Worsened metrics

Dev dependency count

31

increased by3.33%

Number of lines in readme file

115

decreased by-7.26%

Dependency changes

• + Addedes6-promise@2.0.1(transitive)

• - Removedes6-promise@2.3.0(transitive)

• Updatedes6-promise@~2.0.1