New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
recassfov - npm Package Compare versions
Comparing version 0.0.33 to 0.0.34
@@ -11,30 +11,5 @@ import React from 'react' | ||
| args: { min: 4, max: 32 }, | ||
| invalidFeedback: 'please provide a username (min: 4, max: 32)' | ||
| invalidFeedback: 'Please provide a username (min: 4, max: 32)' | ||
| } | ||
| ], | ||
| email: [ | ||
| { | ||
| rule: 'isEmail', | ||
| invalidFeedback: 'please provide a valid email' | ||
| } | ||
| ], | ||
| password: [ | ||
| { | ||
| rule: 'isLength', | ||
| args: { min: 4, max: 32 }, | ||
| invalidFeedback: 'please provide a password (min: 4, max: 32)' | ||
| } | ||
| ], | ||
| number: [ | ||
| { | ||
| rule: 'isInt', | ||
| args: { gt: 10, lt: 100 }, | ||
| invalidFeedback: 'please provide a number between 10-100' | ||
| }, | ||
| { | ||
| rule: 'isLength', | ||
| args: { min: 1 }, | ||
| invalidFeedback: 'please provide at least one character' | ||
| } | ||
| ], | ||
| yesOrNo: [ | ||
@@ -44,3 +19,3 @@ { | ||
| args: { min: 1 }, | ||
| invalidFeedback: 'please select an option' | ||
| invalidFeedback: 'Please select an option' | ||
| } | ||
@@ -52,3 +27,3 @@ ], | ||
| args: { min: 1 }, | ||
| invalidFeedback: 'please provide a message' | ||
| invalidFeedback: 'Please provide a message' | ||
| } | ||
@@ -58,148 +33,49 @@ ] | ||
| class App extends React.Component { | ||
| constructor () { | ||
| super() | ||
| this.state = { | ||
| yesOrNo: 'yes', | ||
| username: 'john', | ||
| usernameValidation: validations.username | ||
| } | ||
| const App = () => { | ||
| return ( | ||
| <Form | ||
| postUrl='https://runkit.io/ozgrozer/recassfov-backend-demo/branches/master/signup'> | ||
| <h2>Demo Form</h2> | ||
| const func = () => { | ||
| this.setState({ | ||
| yesOrNo: 'no', | ||
| usernameValidation: [ | ||
| { | ||
| rule: 'isLength', | ||
| args: { min: 5, max: 40 }, | ||
| invalidFeedback: 'please provide a username (min: 5, max: 40)' | ||
| } | ||
| ] | ||
| }) | ||
| } | ||
| setTimeout(func.bind(this), 2000) | ||
| } | ||
| <div>- Type "john" into username to see backend error.</div> | ||
| <div>- Watch console.</div> | ||
| onSubmit () { | ||
| console.log('onSubmit') | ||
| } | ||
| <br /> | ||
| validFormBeforePost (res) { | ||
| console.log('validFormBeforePost') | ||
| console.log(res.formItems) | ||
| } | ||
| <div> | ||
| <Select | ||
| name='yesOrNo' | ||
| validations={validations.yesOrNo}> | ||
| <option value=''>Select an option</option> | ||
| <option value='yes'>yes</option> | ||
| <option value='no'>no</option> | ||
| </Select> | ||
| </div> | ||
| invalidFormBeforePost (res) { | ||
| console.log('invalidFormBeforePost') | ||
| console.log(res.formItems) | ||
| console.log(this.state) | ||
| } | ||
| <br /> | ||
| validFormAfterPost (res) { | ||
| console.log('validFormAfterPost') | ||
| console.log(res.formItems) | ||
| console.log(res.ajaxResult) | ||
| res.cleanFormItems() | ||
| } | ||
| <div> | ||
| <Input | ||
| type='text' | ||
| name='username' | ||
| placeholder='Username' | ||
| validations={validations.username} /> | ||
| </div> | ||
| invalidFormAfterPost (res) { | ||
| console.log('invalidFormAfterPost') | ||
| console.log(res.formItems) | ||
| console.log(res.ajaxResult) | ||
| } | ||
| <br /> | ||
| handleInput (e) { | ||
| const value = e.target.value | ||
| this.setState({ username: value }) | ||
| console.log('handleInput', value) | ||
| } | ||
| <div> | ||
| <Textarea | ||
| name='message' | ||
| placeholder='Message' | ||
| validations={validations.message} /> | ||
| </div> | ||
| handleSelect (e) { | ||
| const value = e.target.value | ||
| this.setState({ yesOrNo: value, username: '2' }) | ||
| console.log('handleSelect', value) | ||
| } | ||
| <br /> | ||
| render () { | ||
| return ( | ||
| <Form | ||
| onSubmit={this.onSubmit} | ||
| validFormBeforePost={this.validFormBeforePost} | ||
| invalidFormBeforePost={this.invalidFormBeforePost.bind(this)} | ||
| validFormAfterPost={this.validFormAfterPost} | ||
| invalidFormAfterPost={this.invalidFormAfterPost} | ||
| postUrl='https://runkit.io/ozgrozer/recassfov-backend-demo/branches/master/signup' | ||
| classNames={{ | ||
| invalidInput: 'is-invalid', | ||
| invalidFeedback: 'invalid-feedback' | ||
| }} | ||
| > | ||
| <h2>demo form</h2> | ||
| <ul> | ||
| <li>type "john" into username to see backend error</li> | ||
| <li>watch for console</li> | ||
| </ul> | ||
| <div> | ||
| <Input | ||
| type='text' | ||
| name='username' | ||
| placeholder='username' | ||
| value={this.state.username} | ||
| onChange={this.handleInput.bind(this)} | ||
| validations={this.state.usernameValidation} /> | ||
| </div> | ||
| <div> | ||
| <Input | ||
| type='email' | ||
| name='email' | ||
| placeholder='email' | ||
| validations={validations.email} /> | ||
| </div> | ||
| <div> | ||
| <Input | ||
| type='password' | ||
| name='password' | ||
| placeholder='password' | ||
| validations={validations.password} /> | ||
| </div> | ||
| <div> | ||
| <Input | ||
| type='number' | ||
| name='number' | ||
| placeholder='number' | ||
| validations={validations.number} /> | ||
| </div> | ||
| <div> | ||
| <Select | ||
| name='yesOrNo' | ||
| value={this.state.yesOrNo} | ||
| onChange={this.handleSelect.bind(this)} | ||
| validations={validations.yesOrNo}> | ||
| <option value=''>select</option> | ||
| <option value='yes'>yes</option> | ||
| <option value='no'>no</option> | ||
| </Select> | ||
| </div> | ||
| <div> | ||
| <Textarea | ||
| name='message' | ||
| placeholder='message' | ||
| validations={validations.message} /> | ||
| </div> | ||
| <div> | ||
| <input type='submit' value='submit' /> | ||
| </div> | ||
| </Form> | ||
| ) | ||
| } | ||
| <input type='submit' value='Submit' /> | ||
| </Form> | ||
| ) | ||
| } | ||
| ReactDOM.render(<App />, document.getElementById('root')) |
| { | ||
| "name": "recassfov", | ||
| "version": "0.0.33", | ||
| "version": "0.0.34", | ||
| "description": "React client and server side form validation", | ||
@@ -28,8 +28,9 @@ "main": "./build/Recassfov.js", | ||
| "axios": "^0.18.0", | ||
| "react": "^16.3.2", | ||
| "react-dom": "^16.3.2", | ||
| "validator": "^9.4.1" | ||
| "react": "16.7.0", | ||
| "react-dom": "16.7.0", | ||
| "validator": "^10.9.0" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-cli": "^6.26.0", | ||
| "babel-core": "^6.26.3", | ||
| "babel-plugin-transform-object-rest-spread": "^6.26.0", | ||
@@ -36,0 +37,0 @@ "babel-plugin-transform-react-jsx": "^6.24.1", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by61.51%
285311
Worsened metrics
- Dev dependency count
- increased by16.67%
7
- Lines of code
- decreased by-13.69%
782
Dependency changes
+ Addedreact@16.7.0(transitive)
+ Addedreact-dom@16.7.0(transitive)
+ Addedscheduler@0.12.0(transitive)
+ Addedvalidator@10.11.0(transitive)
- Removedreact@16.14.0(transitive)
- Removedreact-dom@16.14.0(transitive)
- Removedscheduler@0.19.1(transitive)
- Removedvalidator@9.4.1(transitive)
Updatedreact@16.7.0
Updatedreact-dom@16.7.0
Updatedvalidator@^10.9.0