├── .all-contributorsrc
├── .babelrc
├── .eslintrc.json
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   ├── feature_request.md
    │   └── question-request.md
    └── workflows
    │   └── main.yml
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── LICENSE_996
├── README.md
├── docs
    ├── locales-example-es5.md
    ├── locales-example-es6.md
    ├── v1-v2-v3-doc.md
    └── v4-doc.md
├── eslintignore.json
├── example
    ├── global.d.ts
    └── index.tsx
├── index.js
├── jest.config.js
├── package.json
├── postcss.config.js
├── react-inputs-validation.gif
├── src
    ├── __tests__
    │   ├── Checkbox.js
    │   ├── Radiobox.js
    │   ├── Select.js
    │   ├── Textarea.js
    │   ├── Textbox.js
    │   ├── message.js
    │   ├── utils.js
    │   └── validator.js
    ├── css
    │   ├── example.css
    │   └── icon.css
    ├── font
    │   ├── icomoon.svg
    │   ├── icomoon.ttf
    │   └── icomoon.woff
    ├── html
    │   └── layout.html
    └── js
    │   └── Inputs
    │       ├── Checkbox.tsx
    │       ├── Radiobox.tsx
    │       ├── Select.tsx
    │       ├── Textarea.tsx
    │       ├── Textbox.tsx
    │       ├── const.ts
    │       ├── global.d.ts
    │       ├── index.global.ts
    │       ├── index.ts
    │       ├── message.ts
    │       ├── react-inputs-validation.css
    │       ├── utils.ts
    │       └── validator.ts
├── stylelint.config.js
├── tea.yaml
├── tsconfig.json
├── tslint.json
└── webpack
    ├── base.js
    ├── build_path.js
    ├── development.config.js
    ├── production.config.js
    ├── umd.base.config.js
    ├── umd.global.config.js
    └── umd.local.config.js


/.all-contributorsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [
 3 |     "README.md"
 4 |   ],
 5 |   "imageSize": 100,
 6 |   "commit": false,
 7 |   "contributors": [
 8 |     {
 9 |       "login": "edwardfxiao",
10 |       "name": "Edward Xiao",
11 |       "avatar_url": "https://avatars3.githubusercontent.com/u/11728228?v=4",
12 |       "profile": "https://github.com/edwardfxiao",
13 |       "contributions": [
14 |         "code",
15 |         "doc",
16 |         "infra",
17 |         "test",
18 |         "review"
19 |       ]
20 |     },
21 |     {
22 |       "login": "DecentralizedIT",
23 |       "name": "Frank Bonnet",
24 |       "avatar_url": "https://avatars1.githubusercontent.com/u/31480614?v=4",
25 |       "profile": "http://www.dcorp.it",
26 |       "contributions": [
27 |         "code"
28 |       ]
29 |     },{
30 |       "login": "RokasAniss",
31 |       "name": "Rokas Anisas",
32 |       "avatar_url": "https://avatars3.githubusercontent.com/u/33621394?v=4",
33 |       "profile": "http://rokasanisas.com",
34 |       "contributions": [
35 |         "code"
36 |       ]
37 |     }
38 |   ],
39 |   "contributorsPerLine": 7,
40 |   "projectName": "react-inputs-validation",
41 |   "projectOwner": "edwardfxiao",
42 |   "repoType": "github",
43 |   "repoHost": "https://github.com",
44 |   "skipCi": true
45 | }
46 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
 3 |   "env": {
 4 |     "development": {
 5 |       "comments": false
 6 |     },
 7 |     "production": {
 8 |       "comments": false
 9 |     },
10 |     "lib": {
11 |       "plugins": ["css-modules-transform", "@babel/proposal-class-properties", "@babel/proposal-object-rest-spread"],
12 |       "comments": false
13 |     },
14 |     "test": {
15 |       "plugins": ["babel-plugin-rewire"]
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Extend existing configuration
 3 |   // from ESlint and eslint-plugin-react defaults.
 4 |   "extends": ["eslint:recommended", "plugin:react/recommended"],
 5 |   // Enable ES6 support. If you want to use custom Babel
 6 |   // features, you will need to enable a custom parser
 7 |   // as described in a section below.
 8 |   "parserOptions": {
 9 |     "ecmaVersion": 6,
10 |     "sourceType": "module",
11 |     "ecmaFeatures": {
12 |       "experimentalObjectRestSpread": true
13 |     }
14 |   },
15 |   "env": {
16 |     "jest": true,
17 |     "es6": true,
18 |     "browser": true,
19 |     "node": true,
20 |     "jquery": true
21 |   },
22 |   // Enable custom plugin known as eslint-plugin-react
23 |   "plugins": ["react", "react-hooks"],
24 |   "rules": {
25 |     // Disable `no-console` rule
26 |     "no-console": 0,
27 |     // Give a warning if identifiers contain underscores
28 |     "no-underscore-dangle": 1,
29 |     "no-debugger": 0,
30 |     "react-hooks/rules-of-hooks": "error",
31 |     "no-empty": [
32 |       "error",
33 |       {
34 |         "allowEmptyCatch": true
35 |       }
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | 
 5 | ---
 6 | 
 7 | **Describe the bug**
 8 | A clear and concise description of what the bug is.
 9 | 
10 | **To Reproduce**
11 | Steps to reproduce the behavior:
12 | 1. Go to '...'
13 | 2. Click on '....'
14 | 3. Scroll down to '....'
15 | 4. See error
16 | 
17 | **Expected behavior**
18 | A clear and concise description of what you expected to happen.
19 | 
20 | **Screenshots**
21 | If applicable, add screenshots to help explain your problem.
22 | 
23 | **Desktop (please complete the following information):**
24 |  - OS: [e.g. iOS]
25 |  - Browser [e.g. chrome, safari]
26 |  - Version [e.g. 22]
27 | 
28 | **Smartphone (please complete the following information):**
29 |  - Device: [e.g. iPhone6]
30 |  - OS: [e.g. iOS8.1]
31 |  - Browser [e.g. stock browser, safari]
32 |  - Version [e.g. 22]
33 | 
34 | **Additional context**
35 | Add any other context about the problem here.
36 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | 
 5 | ---
 6 | 
 7 | **Is your feature request related to a problem? Please describe.**
 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 9 | 
10 | **Describe the solution you'd like**
11 | A clear and concise description of what you want to happen.
12 | 
13 | **Describe alternatives you've considered**
14 | A clear and concise description of any alternative solutions or features you've considered.
15 | 
16 | **Additional context**
17 | Add any other context or screenshots about the feature request here.
18 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/question-request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Question request
3 | about: Ask your question here
4 | 
5 | ---
6 | 
7 | 
8 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | # This is a basic workflow to help you get started with Actions
 2 | 
 3 | name: CI
 4 | 
 5 | # Controls when the workflow will run
 6 | on:
 7 |   # Triggers the workflow on push or pull request events but only for the master branch
 8 |   push:
 9 |     branches: [ master ]
10 |   pull_request:
11 |     branches: [ master ]
12 | 
13 |   # Allows you to run this workflow manually from the Actions tab
14 |   workflow_dispatch:
15 | 
16 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel
17 | jobs:
18 |   # This workflow contains a single job called "build"
19 |   build:
20 |     # The type of runner that the job will run on
21 |     runs-on: ubuntu-latest
22 |     
23 |     strategy:
24 |       matrix:
25 |         node-version: [10.x]
26 | 
27 |     # Steps represent a sequence of tasks that will be executed as part of the job
28 |     steps:
29 |       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
30 |       - uses: actions/checkout@v3
31 | 
32 |       - name: Install dependencies
33 |         run: npm i
34 |         
35 |       - name: Test:coverage
36 |         run: npm run test:coverage
37 |       
38 |       - name: Coveralls
39 |         uses: coverallsapp/github-action@master
40 |         with:
41 |           github-token: ${{ secrets.GITHUB_TOKEN }}
42 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /*.log
3 | /log/*.log
4 | coverage
5 | /notes
6 | /lib
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | /coverage
 2 | /example
 3 | /webpack
 4 | /src
 5 | /.babelrc
 6 | /.eslintrc.json
 7 | /eslintignore.json
 8 | /.gitignore
 9 | /.travis.yml
10 | /jest.config.js
11 | /postcss.config.js
12 | /stylelint.config.js
13 | /tsconfig.json
14 | /tslint.json
15 | /*.gif
16 | /dist
17 | /*.html
18 | /.github
19 | /rev-manifest.json
20 | /docs


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "10"
 4 | before_script:
 5 |   - npm i
 6 | script: npm run prepublish
 7 | after_script: "cat coverage/lcov.info | node_modules/coveralls/bin/coveralls.js"
 8 | env:
 9 |   - REACT=16
10 | notifications:
11 |   email:
12 |     - email:edwardfhsiao@gmail.com
13 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # 4.9.10
 2 | 
 3 | - enable `hidden`, `disabled` props in OptionListItem for `<Select/>`
 4 | 
 5 | # 4.9.9
 6 | 
 7 | - `customStyleOptionListWrapper` for `<Select/>`
 8 | 
 9 | # 4.9.8
10 | 
11 | - `classNameInputBoxItem` for `<Checkbox/>`
12 | - `title` and `ellipsis` for `<Select/>` option item
13 | 
14 | # 4.9.7
15 | 
16 | - fix bug of cached disabled in `<Select/>` handleOnItemClick
17 | 
18 | # 4.9.6
19 | 
20 | - Fix potential bug for `<Select/>`
21 | 
22 | # 4.9.5
23 | 
24 | - Remove `zh-CN` as an option to `validationOption.locale` in order to reduce size
25 | 
26 | # 4.9.4
27 | 
28 | - Add `decimalSeparator` to `<Textbox>` ```validationOption```. e.g. `decimalSeparator: ','` `'0.5' => '0,5'`
29 | 
30 | # 4.9.3
31 | 
32 | - Add `decimalSeparator` to `<Textbox>` ```validationOption```. e.g. `decimalSeparator: ','` `'0.5' => '0,5'`(forgot to compile)
33 | 
34 | # 4.9.2
35 | 
36 | - Update readme and for cdnjs updating
37 | 
38 | # 4.9.1
39 | 
40 | - Remove classname hash
41 | 
42 | # 4.9.0
43 | 
44 | - Update readme
45 | 
46 | # 4.8.9
47 | 
48 | - Fix 'undefined' classname for ```__container```
49 | 
50 | # 4.8.8
51 | 
52 | - Remove lib folder for github
53 | 
54 | # 4.8.7
55 | 
56 | - Update readme
57 | 
58 | # 4.8.6
59 | 
60 | - Update peerDependencies
61 | 
62 | # 4.8.5
63 | 
64 | - Update readme
65 | 
66 | # 4.8.4
67 | 
68 | - Update readme
69 | 
70 | # 4.8.3
71 | 
72 | - Minor fix for ```<Select/>```
73 | 
74 | # 4.8.2
75 | 
76 | - Minor fix for ```<Select/>```
77 | 
78 | # 4.8.1
79 | 
80 | - Add ```icon``` into ```<Select/>```'s ```optionList``` ```[{id: '1', name: 'Twin Peaks']``` => ```[{id: '1', name: 'Twin Peaks', icon: 'optional']```
81 | 
82 | # 4.8.0
83 | 
84 | - Replace ```classNameOptionListContainer``` with ```classNameOptionListWrapper``` and provide new ```classNameOptionListContainer``` & change className ```'options-container'``` to ```'options-wrapper'``` in ```<Select/>```
85 | 
86 | # 4.7.0
87 | 
88 | - Add ```shouldRenderMsgAsHtml``` to components ```validationOption```, in case you need to render html inside your ```messages``` as stated in issue [#29](https://github.com/edwardfxiao/react-inputs-validation/issues/29)
89 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to react-inputs-validation
 2 | 
 3 |  First off, thanks for taking the time to contribute! Here are a little dev FAQ below.
 4 |  
 5 | ### Q: How to development? 
 6 | **A**: ```npm run dev```
 7 | 
 8 | ### Q: How to compile the ultimate files? 
 9 | **A**: ```npm run compile```, and the files will be locating in ```/lib``` folder.
10 | 
11 | 
12 | ### Q: What is the difference between ```umd_local```, ```umd_global``` and ```umd_global_min``` in the script of ```package.json```?
13 | **A**: ```umd_local``` intend to compile / build a not ```window``` exposed variables for ```Textbox```,```Textarea``` ,```Select```, ```Checkbox``` and ```Radiobox```
14 | while ```umd_global``` gives ```window.Textbox = Textbox``` if ```window``` exists.
15 | 
16 | Lastly ```umd_global_min``` minifies the assets and generates ```react-inputs-validation.min.js``` and ```react-inputs-validation.min.css```
17 | 
18 | They ruled by ```umd.local.config.js``` and ```umd.global.config.js```, which located in ```/src/webpack/``` folder.
19 | 
20 | ### Q: What does ```build_gh_page``` do?
21 | **A**: Just for building the gh page
22 | 
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018-present Edward Xiao
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/LICENSE_996:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2019-present Edward Xiao
 2 | 
 3 | Anti 996 License Version 1.0 (Draft)
 4 | 
 5 | Permission is hereby granted to any individual or legal entity obtaining a copy
 6 | of this licensed work (including the source code, documentation and/or related
 7 | items, hereinafter collectively referred to as the "licensed work"), free of
 8 | charge, to deal with the licensed work for any purpose, including without
 9 | limitation, the rights to use, reproduce, modify, prepare derivative works of,
10 | publish, distribute and sublicense the licensed work, subject to the following
11 | conditions:
12 | 
13 | 1.  The individual or the legal entity must conspicuously display, without
14 |     modification, this License on each redistributed or derivative copy of the
15 |     Licensed Work.
16 | 
17 | 2.  The individual or the legal entity must strictly comply with all applicable
18 |     laws, regulations, rules and standards of the jurisdiction relating to
19 |     labor and employment where the individual is physically located or where
20 |     the individual was born or naturalized; or where the legal entity is
21 |     registered or is operating (whichever is stricter). In case that the
22 |     jurisdiction has no such laws, regulations, rules and standards or its
23 |     laws, regulations, rules and standards are unenforceable, the individual
24 |     or the legal entity are required to comply with Core International Labor
25 |     Standards.
26 | 
27 | 3.  The individual or the legal entity shall not induce or force its
28 |     employee(s), whether full-time or part-time, or its independent
29 |     contractor(s), in any methods, to agree in oral or written form,
30 |     to directly or indirectly restrict, weaken or relinquish his or
31 |     her rights or remedies under such laws, regulations, rules and
32 |     standards relating to labor and employment as mentioned above,
33 |     no matter whether such written or oral agreement are enforceable
34 |     under the laws of the said jurisdiction, nor shall such individual
35 |     or the legal entity limit, in any methods, the rights of its employee(s)
36 |     or independent contractor(s) from reporting or complaining to the copyright
37 |     holder or relevant authorities monitoring the compliance of the license
38 |     about its violation(s) of the said license.
39 | 
40 | THE LICENSED WORK IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
41 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
42 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE COPYRIGHT
43 | HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
44 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN ANY WAY CONNECTION
45 | WITH THE LICENSED WORK OR THE USE OR OTHER DEALINGS IN THE LICENSED WORK.
46 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-inputs-validation
  2 | <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
  3 | [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
  4 | <!-- ALL-CONTRIBUTORS-BADGE:END -->
  5 | [![npm version](https://badge.fury.io/js/react-inputs-validation.svg)](https://badge.fury.io/js/react-inputs-validation) ![Cdnjs](https://img.shields.io/cdnjs/v/react-inputs-validation) ![example workflow](https://github.com/edwardfxiao/react-inputs-validation/actions/workflows/main.yml/badge.svg) [![react-inputs-validation](http://img.shields.io/npm/dm/react-inputs-validation.svg)](https://www.npmjs.com/package/react-inputs-validation) [![Package Quality](https://npm.packagequality.com/shield/react-inputs-validation.svg)](http://packagequality.com/#?package=react-inputs-validation) [![Coverage Status](https://coveralls.io/repos/github/edwardfxiao/react-inputs-validation/badge.svg?branch=master)](https://coveralls.io/github/edwardfxiao/react-inputs-validation?branch=master) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-inputs-validation.svg) [![Join the chat at https://gitter.im/react-inputs-validation/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-inputs-validation/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/edwardfxiao/react-inputs-validation/master/LICENSE) [![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE) [![996.icu](https://img.shields.io/badge/link-996.icu-red.svg)](https://996.icu)
  6 | 
  7 | A react component for form inputs validation. Online demo examples.
  8 | # <img src="https://raw.githubusercontent.com/edwardfxiao/react-inputs-validation/master/react-inputs-validation.gif" />
  9 | 
 10 | - [How to use](#how-to-use)
 11 |   - [Usage](#usage)
 12 | - [Live examples](#live-examples)
 13 |     - [Codesandbox examples](#codesandbox-examples)
 14 |     - [Basic usage examples](#basic-usage-examples)
 15 | - [Documentation](#documentation)
 16 |     - [1.x, 2.x, 3.x](/docs/v1-v2-v3-doc.md)
 17 |     - [4.x](/docs/v4-doc.md)
 18 |     - [About intl locales support](/docs/v4-doc.md#custom-error-message) (Under `Common questions`)
 19 | - [Browser support](#browser-support)
 20 | - [Donation](#donation)
 21 | - [Contributors](#contributors)
 22 | 
 23 | 
 24 | # <a name="how-to-use"></a>How to use
 25 | 
 26 | ### <a name="usage"></a>Usage
 27 | 
 28 | #### By NPM
 29 | ```sh
 30 | npm install react-inputs-validation --save
 31 | ```
 32 | ```js
 33 | import { Textbox, Radiobox, Checkbox, Select, Textarea } from 'react-inputs-validation';
 34 | import 'react-inputs-validation/lib/react-inputs-validation.min.css';
 35 | ```
 36 | 
 37 | ##### Make sure you have at least ```react@16.8.6``` installed.
 38 | ```js
 39 |   "peerDependencies": {
 40 |     "react": ">= 16.8.6",
 41 |     "react-dom": ">= 16.8.6"
 42 |   }
 43 | ```
 44 | 
 45 | #### By CDN (starting from v4.4.1)
 46 | ```html
 47 | <head>
 48 |  ...
 49 |  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-inputs-validation/4.9.1/react-inputs-validation.min.css"/>
 50 | </head>
 51 | <body>
 52 |  <div id="root"></div>
 53 |  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
 54 |  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
 55 |  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-inputs-validation/4.9.1/react-inputs-validation.min.js"></script>
 56 |  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
 57 |  <script type="text/babel">
 58 |     const App = React.memo(() => {
 59 |       const [value, setValue] = React.useState('');
 60 |       return (<Textbox value={value} onBlur={()=>{}} .../>)
 61 |     });
 62 |     ReactDOM.render(<App />, document.getElementById('root'));
 63 |  </script>
 64 | </body>
 65 | 
 66 | 
 67 | ```
 68 | 
 69 | # <a name="live-examples"></a>Live examples
 70 | 
 71 | ## <a name="codesandbox-examples"></a>Codesandbox Examples
 72 | * <a href="https://codesandbox.io/s/v3wq0llmo3">Example of online demo form playground</a>
 73 | * <a href="https://codesandbox.io/s/pjom8r78x7">Example of custom control</a>(when ```check: false```)
 74 | * <a href="https://codesandbox.io/s/1r77ozkrk7">Example of custom function</a>(when providing ```customFunc```)
 75 | * <a href="https://codesandbox.io/s/custom-function-further-control-when-providing-customfunc-yjwch">Example of custom function further control</a>(when providing ```customFunc```)
 76 | * <a href="https://codesandbox.io/s/q9vqmk4j84">Example of custom locales</a>(when providing ```window.REACT_INPUTS_VALIDATION['customErrorMessage']```)
 77 | * <a href="https://codesandbox.io/s/13qo2rqxjj">Example of phone and email validation</a>(handled with ```customFunc```)
 78 | * <a href="https://codesandbox.io/s/async-checking-via-customfunc-emqgw">Example of async checking username existence </a>(Async checking for ```<Textbox>``` and ```<Textarea>``` only. Handled with ```customFunc```)
 79 | * <a href="https://codesandbox.io/s/asyncmsgobj-blmce">Example of asyncMsgObj </a>(when providing ```asyncMsgObj```)
 80 | * <a href="https://codesandbox.io/s/jvw9nvyzv">Example of AREA CODE select </a>(with [```react-custom-flag-select```](https://github.com/edwardfxiao/react-custom-flag-select))
 81 | * <a href="https://codesandbox.io/s/transform-label-example-w61dp">Example of label animation </a>
 82 | 
 83 | ## <a name="basic-usage-examples"></a>Basic Usage Examples
 84 | <a href="https://edwardfxiao.github.io/react-inputs-validation/">Online demo example</a>
 85 | 
 86 | <a href="https://github.com/edwardfxiao/react-inputs-validation/blob/gh-pages/example/index.js">Demo source code</a>
 87 | 
 88 | # <a name="documentation"></a>Documentation
 89 | 
 90 | ### <a name="1.x-2.x-3.x-documentation"></a>[1.x, 2.x, 3.x](/docs/v1-v2-v3-doc.md)
 91 | 
 92 | ## <a name="4.x-documentation"></a>[4.x](/docs/v4-doc.md)
 93 | 
 94 | #### <a name="about-intl-locales-support">[About intl locales support](/docs/v4-doc.md#custom-error-message) (Under `Common questions`)
 95 | 
 96 | # <a name="browser-support"></a>Browser support
 97 | Tested on IE9+ and Chrome and Safari(10.0.3)
 98 | 
 99 | # <a name="donation"></a>Donation
100 | <a href="https://www.paypal.me/XIAOMENGXIAO/0.99" target="_blank" alt="PayPal Donate">Thanks for donating me a donut!&nbsp;&nbsp;⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄</a>
101 | 
102 | <a name="contributors"></a>
103 | ## Contributors ✨
104 | 
105 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
106 | 
107 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
108 | <!-- prettier-ignore-start -->
109 | <!-- markdownlint-disable -->
110 | <table>
111 |   <tr>
112 |     <td align="center"><a href="https://github.com/edwardfxiao"><img src="https://avatars3.githubusercontent.com/u/11728228?v=4" width="100px;" alt=""/><br /><sub><b>Edward Xiao</a><br /><a href="https://github.com/edwardfxiao/react-inputs-validation/commits?author=edwardfxiao" title="Code">💻</a> <a href="https://github.com/edwardfxiao/react-inputs-validation/commits?author=edwardfxiao" title="Documentation">📖</a> <a href="https://github.com/edwardfxiao/react-inputs-validation/commits?author=edwardfxiao" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/edwardfxiao/react-inputs-validation/commits?author=edwardfxiao" title="Tests">⚠️</a> <a href="https://github.com/edwardfxiao/react-inputs-validation/commits?author=edwardfxiao" title="Reviewed Pull Requests">👀</a></td>
113 |     <td align="center"><a href="http://www.dcorp.it"><img src="https://avatars1.githubusercontent.com/u/31480614?v=4" width="100px;" alt=""/><br /><sub><b>Frank Bonnet</b></sub></a><br /><a href="https://github.com/edwardfxiao/react-inputs-validation/commits?author=DecentralizedIT" title="Code">💻</a></td>
114 |     <td align="center"><a href="http://rokasanisas.com"><img src="https://avatars3.githubusercontent.com/u/33621394?v=4" width="100px;" alt=""/><br /><sub><b>Rokas Anisas</b></sub></a><br /><a href="https://github.com/edwardfxiao/react-inputs-validation/commits?author=RokasAniss" title="Code">💻</a></td>
115 |   </tr>
116 | </table>
117 | 
118 | <!-- markdownlint-enable -->
119 | <!-- prettier-ignore-end -->
120 | <!-- ALL-CONTRIBUTORS-LIST:END -->
121 | 
122 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
123 | 


--------------------------------------------------------------------------------
/docs/locales-example-es5.md:
--------------------------------------------------------------------------------
  1 | ```html
  2 | <script type="text/javascript">
  3 |   window.REACT_INPUTS_VALIDATION = {
  4 |     customErrorMessage: {
  5 |       "my-own-locale": {...},//structure must follow below
  6 |       "en-US": {
  7 |         textbox: {
  8 |           empty: function empty(name) {
  9 |             return name + " cannot be empty(custom message)";
 10 |           },
 11 |           invalid: function invalid(name) {
 12 |             return name + " invalid format(custom message)";
 13 |           },
 14 |           invalidFormat: function invalidFormat(name) {
 15 |             return name + " is not a number(custom message)";
 16 |           },
 17 |           inBetween: function inBetween(name) {
 18 |             return function (min) {
 19 |               return function (max) {
 20 |                 return name + " must be " + min + "-" + max + "(custom message)";
 21 |               };
 22 |             };
 23 |           },
 24 |           lessThan: function lessThan(name) {
 25 |             return function (min) {
 26 |               return name + " cannot less than " + min + "(custom message)";
 27 |             };
 28 |           },
 29 |           greaterThan: function greaterThan(name) {
 30 |             return function (max) {
 31 |               return name + " cannot greater than " + max + "(custom message)";
 32 |             };
 33 |           },
 34 |           lengthEqual: function lengthEqual(name) {
 35 |             return function (length) {
 36 |               return name + " length must be " + length + "(custom message)";
 37 |             };
 38 |           },
 39 |           twoInputsNotEqual: function twoInputsNotEqual() {
 40 |             return "two inputs are not equal(custom message)";
 41 |           }
 42 |         },
 43 |         radiobox: {
 44 |           empty: function empty(name) {
 45 |             return "Please choose one " + name + "(custom message)";
 46 |           }
 47 |         },
 48 |         checkbox: {
 49 |           unchecked: function unchecked(name) {
 50 |             return name + " must be checked(custom message)";
 51 |           }
 52 |         },
 53 |         select: {
 54 |           empty: function empty(name) {
 55 |             return "Please select a " + name + "(custom message)";
 56 |           }
 57 |         },
 58 |         textarea: {
 59 |           empty: function empty(name) {
 60 |             return name + " cannot be empty(custom message)";
 61 |           },
 62 |           invalid: function invalid(name) {
 63 |             return name + " invalid format(custom message)";
 64 |           },
 65 |           invalidFormat: function invalidFormat(name) {
 66 |             return name + " is not a number(custom message)";
 67 |           },
 68 |           inBetween: function inBetween(name) {
 69 |             return function (min) {
 70 |               return function (max) {
 71 |                 return name + " must be " + min + "-" + max + "(custom message)";
 72 |               };
 73 |             };
 74 |           },
 75 |           lessThan: function lessThan(name) {
 76 |             return function (min) {
 77 |               return name + " cannot less than " + min + "(custom message)";
 78 |             };
 79 |           },
 80 |           greaterThan: function greaterThan(name) {
 81 |             return function (max) {
 82 |               return name + " cannot greater than " + max + "(custom message)";
 83 |             };
 84 |           },
 85 |           lengthEqual: function lengthEqual(name) {
 86 |             return function (length) {
 87 |               return name + " length must be " + length + "(custom message)";
 88 |             };
 89 |           },
 90 |           twoInputsNotEqual: function twoInputsNotEqual() {
 91 |             return "two inputs are not equal(custom message)";
 92 |           }
 93 |         }
 94 |       },
 95 |       "zh-CN": {
 96 |         textbox: {
 97 |           empty: function empty(name) {
 98 |             return name + "不能为空";
 99 |           },
100 |           invalid: function invalid(name) {
101 |             return name + "格式有误";
102 |           },
103 |           invalidFormat: function invalidFormat(name) {
104 |             return name + "不是数字";
105 |           },
106 |           inBetween: function inBetween(name) {
107 |             return function (min) {
108 |               return function (max) {
109 |                 return name + "必须在" + min + "-" + max + "之间";
110 |               };
111 |             };
112 |           },
113 |           lessThan: function lessThan(name) {
114 |             return function (min) {
115 |               return name + "不可少于" + min;
116 |             };
117 |           },
118 |           greaterThan: function greaterThan(name) {
119 |             return function (max) {
120 |               return name + "不可大于" + max;
121 |             };
122 |           },
123 |           lengthEqual: function lengthEqual(name) {
124 |             return function (length) {
125 |               return name + "长度必须为" + length;
126 |             };
127 |           },
128 |           twoInputsNotEqual: function twoInputsNotEqual() {
129 |             return "两次输入不一致";
130 |           }
131 |         },
132 |         radiobox: {
133 |           empty: function empty(name) {
134 |             return "请选择一个" + name;
135 |           }
136 |         },
137 |         checkbox: {
138 |           unchecked: function unchecked(name) {
139 |             return name + "必须勾选";
140 |           }
141 |         },
142 |         select: {
143 |           empty: function empty(name) {
144 |             return "请选择一个" + name;
145 |           }
146 |         },
147 |         textarea: {
148 |           empty: function empty(name) {
149 |             return name + "不能为空";
150 |           },
151 |           invalid: function invalid(name) {
152 |             return name + "格式有误";
153 |           },
154 |           invalidFormat: function invalidFormat(name) {
155 |             return name + "不是数字";
156 |           },
157 |           inBetween: function inBetween(name) {
158 |             return function (min) {
159 |               return function (max) {
160 |                 return name + "必须在" + min + "-" + max + "之间";
161 |               };
162 |             };
163 |           },
164 |           lessThan: function lessThan(name) {
165 |             return function (min) {
166 |               return name + "不可少于" + min;
167 |             };
168 |           },
169 |           greaterThan: function greaterThan(name) {
170 |             return function (max) {
171 |               return name + "不可大于" + max;
172 |             };
173 |           },
174 |           lengthEqual: function lengthEqual(name) {
175 |             return function (length) {
176 |               return name + "长度必须为" + length;
177 |             };
178 |           },
179 |           twoInputsNotEqual: function twoInputsNotEqual() {
180 |             return "两次输入不一致";
181 |           }
182 |         }
183 |       }
184 |     }
185 |   };
186 | </script>
187 | <script type="text/javascript" src="/js/index.js"></script></body>
188 | ```


--------------------------------------------------------------------------------
/docs/locales-example-es6.md:
--------------------------------------------------------------------------------
 1 | ```html
 2 | <script type="text/javascript">
 3 |   window.REACT_INPUTS_VALIDATION = {
 4 |     customErrorMessage: {
 5 |       "my-own-locale": {...},//structure must follow below
 6 |       "en-US": {
 7 |         textbox: {
 8 |           empty: name => `${name} cannot be empty(custom message)`,
 9 |           invalid: name => `${name} invalid format(custom message)`,
10 |           invalidFormat: name => `${name} is not a number(custom message)`,
11 |           inBetween: name => min => max => `${name} must be ${min}-${max}(custom message)`,
12 |           lessThan: name => min => `${name} cannot less than ${min}(custom message)`,
13 |           greaterThan: name => max => `${name} cannot greater than ${max}(custom message)`,
14 |           lengthEqual: name => length => `${name} length must be ${length}(custom message)`,
15 |           twoInputsNotEqual: () => `two inputs are not equal(custom message)`
16 |         },
17 |         radiobox: {
18 |           empty: name => `Please choose one ${name}(custom message)`
19 |         },
20 |         checkbox: {
21 |           unchecked: name => `${name} must be checked(custom message)`
22 |         },
23 |         select: {
24 |           empty: name => `Please select a ${name}(custom message)`
25 |         },
26 |         textarea: {
27 |           empty: name => `${name} cannot be empty(custom message)`,
28 |           invalid: name => `${name} invalid format(custom message)`,
29 |           invalidFormat: name => `${name} is not a number(custom message)`,
30 |           inBetween: name => min => max => `${name} must be ${min}-${max}(custom message)`,
31 |           lessThan: name => min => `${name} cannot less than ${min}(custom message)`,
32 |           greaterThan: name => max => `${name} cannot greater than ${max}(custom message)`,
33 |           lengthEqual: name => length => `${name} length must be ${length}(custom message)`,
34 |           twoInputsNotEqual: () => `two inputs are not equal(custom message)`
35 |         }
36 |       },
37 |       "zh-CN": {
38 |         textbox: {
39 |           empty: name => `${name}不能为空`,
40 |           invalid: name => `${name}格式有误`,
41 |           invalidFormat: name => `${name}不是数字`,
42 |           inBetween: name => min => max => `${name}必须在${min}-${max}之间`,
43 |           lessThan: name => min => `${name}不可少于${min}`,
44 |           greaterThan: name => max => `${name}不可大于${max}`,
45 |           lengthEqual: name => length => `${name}长度必须为${length}`,
46 |           twoInputsNotEqual: () => `两次输入不一致`
47 |         },
48 |         radiobox: {
49 |           empty: name => `必须勾选一个${name}`
50 |         },
51 |         checkbox: {
52 |           unchecked: name => `${name}必须勾选`
53 |         },
54 |         select: {
55 |           empty: name => `请选择一个${name}`
56 |         },
57 |         textarea: {
58 |           empty: name => `${name}不能为空`,
59 |           invalid: name => `${name}格式有误`,
60 |           invalidFormat: name => `${name}不是数字`,
61 |           inBetween: name => min => max => `${name}必须在${min}-${max}之间`,
62 |           lessThan: name => min => `${name}不可少于${min}`,
63 |           greaterThan: name => max => `${name}不可大于${max}`,
64 |           lengthEqual: name => length => `${name}长度必须为${length}`,
65 |           twoInputsNotEqual: () => `两次输入不一致`
66 |         }
67 |       }
68 |     }
69 |   };
70 | </script>
71 | <script type="text/javascript" src="/js/index.js"></script></body>
72 | ```


--------------------------------------------------------------------------------
/eslintignore.json:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/


--------------------------------------------------------------------------------
/example/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css' {
2 |   interface IClassNames {
3 |     [className: string]: string
4 |   }
5 |   const classNames: IClassNames;
6 |   export = classNames;
7 | }


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var ReactInputsValidation = require('./lib/components/index.js');
2 | exports.Textbox = ReactInputsValidation.Textbox;
3 | exports.Textarea = ReactInputsValidation.Textarea;
4 | exports.Radiobox = ReactInputsValidation.Radiobox;
5 | exports.Checkbox = ReactInputsValidation.Checkbox;
6 | exports.Select = ReactInputsValidation.Select;
7 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     preset: 'ts-jest',
 3 |     transform: {
 4 |         '^.+\\.(js|jsx)$': 'babel-jest',
 5 |         '^.+\\.tsx?$': 'ts-jest',
 6 |     },
 7 |     verbose: true,
 8 |     moduleNameMapper: {
 9 |         '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/assetsTransformer.js',
10 |         '\\.(css|scss)$': 'identity-obj-proxy',
11 |         '^STYLES(.*)$': '<rootDir>/src/css$1',
12 |         '^COMPONENTS(.*)$': '<rootDir>/src/js/app/components$1',
13 |         '^API(.*)$': '<rootDir>/src/js/api$1',
14 |         '^CONFIG(.*)$': '<rootDir>/src/config$1',
15 |         '^IMAGES(.*)$': '<rootDir>/src/image$1',
16 |         '^AUDIOS(.*)$': '<rootDir>/audio/api$1',
17 |         '^VIDEOS(.*)$': '<rootDir>/src/video$1',
18 |         '^LOCALES(.*)$': '<rootDir>/src/locales$1',
19 |         '^COMMON(.*)$': '<rootDir>/src/js/common$1',
20 |         '^APP(.*)$': '<rootDir>/src/js/app$1',
21 |         '^CONSTS(.*)$': '<rootDir>/src/js/consts$1',
22 |         '^PAGES(.*)$': '<rootDir>/src/js/api$1',
23 |         '^ACTIONS(.*)$': '<rootDir>/src/js/actions$1',
24 |         '^STORE(.*)$': '<rootDir>/src/js/store$1',
25 |         '^REDUCERS(.*)$': '<rootDir>/src/js/reducers$1',
26 |         '^VENDOR(.*)$': '<rootDir>/src/js/vendor$1',
27 |     },
28 | };
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-inputs-validation",
  3 |   "version": "4.9.10",
  4 |   "description": "A react component for form inputs validation.",
  5 |   "main": "index.js",
  6 |   "types": "./lib/index.d.ts",
  7 |   "repository": {
  8 |     "type": "git",
  9 |     "url": "git+https://github.com/edwardfxiao/react-inputs-validation.git"
 10 |   },
 11 |   "keywords": [
 12 |     "react",
 13 |     "input",
 14 |     "inputs",
 15 |     "validate",
 16 |     "validation",
 17 |     "form",
 18 |     "textbox",
 19 |     "select",
 20 |     "checkbox",
 21 |     "radio",
 22 |     "textarea"
 23 |   ],
 24 |   "author": "Edward Xiao",
 25 |   "license": "MIT",
 26 |   "bugs": {
 27 |     "url": "https://github.com/edwardfxiao/react-inputs-validation/issues"
 28 |   },
 29 |   "homepage": "https://edwardfxiao.github.io/react-inputs-validation",
 30 |   "scripts": {
 31 |     "test": "NODE_ENV=test jest",
 32 |     "test:coverage": "npm run tslint && npm run jslint && npm test -- --coverage",
 33 |     "test_single": "node_modules/.bin/jest Select.js --coverage",
 34 |     "prepublish": "npm run test:coverage",
 35 |     "jslint": "eslint ./src",
 36 |     "tslint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
 37 |     "babel": "BABEL_ENV=lib babel ./src/js/Inputs --out-dir ./lib/components --extensions '.ts,.tsx'",
 38 |     "build_gh_page": "rm -rf lib && npm run babel && rm -rf dist && NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/production.config.js --progress -p",
 39 |     "umd_local": "./node_modules/.bin/webpack --config ./webpack/umd.local.config.js",
 40 |     "umd_global": "./node_modules/.bin/webpack --config ./webpack/umd.global.config.js",
 41 |     "umd_global_min": "./node_modules/.bin/webpack --config ./webpack/umd.global.config.js --env minify",
 42 |     "dev": "node_modules/.bin/webpack-dev-server --config ./webpack/development.config.js",
 43 |     "compile": "rimraf dist lib && npm run umd_global && npm run umd_global_min && npm run umd_local && rm ./lib/components/*.css"
 44 |   },
 45 |   "peerDependencies": {
 46 |     "react": ">= 16.8.6",
 47 |     "react-dom": ">= 16.8.6"
 48 |   },
 49 |   "devDependencies": {
 50 |     "@babel/cli": "^7.1.2",
 51 |     "@babel/core": "^7.1.2",
 52 |     "@babel/plugin-proposal-class-properties": "^7.1.0",
 53 |     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
 54 |     "@babel/preset-env": "^7.1.0",
 55 |     "@babel/preset-react": "^7.0.0",
 56 |     "@babel/preset-typescript": "^7.1.0",
 57 |     "@testing-library/react": "^9.3.2",
 58 |     "@types/jest": "^23.3.5",
 59 |     "@types/prismjs": "^1.26.0",
 60 |     "@types/react": "^16.8.14",
 61 |     "@types/react-dom": "^16.8.4",
 62 |     "awesome-typescript-loader": "^5.2.1",
 63 |     "babel-core": "^7.0.0-bridge.0",
 64 |     "babel-jest": "^23.6.0",
 65 |     "babel-loader": "^8.0.4",
 66 |     "babel-plugin-css-modules-transform": "^1.6.1",
 67 |     "babel-plugin-rewire": "^1.2.0",
 68 |     "babel-polyfill": "^6.7.4",
 69 |     "babel-preset-env": "^1.7.0",
 70 |     "babel-preset-react": "^6.16.0",
 71 |     "chai": "^4.2.0",
 72 |     "core-js": "^2.5.7",
 73 |     "coveralls": "^3.0.2",
 74 |     "css-loader": "^1.0.0",
 75 |     "cssnano": "^4.1.4",
 76 |     "empty-module": "^0.0.2",
 77 |     "enzyme": "^3.10.0",
 78 |     "enzyme-adapter-react-16": "^1.14.0",
 79 |     "eslint": "^5.7.0",
 80 |     "eslint-loader": "^2.1.1",
 81 |     "eslint-plugin-react": "^7.11.1",
 82 |     "eslint-plugin-react-hooks": "^1.6.0",
 83 |     "file-loader": "^2.0.0",
 84 |     "html-webpack-plugin": "^4.0.0-alpha.2",
 85 |     "identity-obj-proxy": "^3.0.0",
 86 |     "inline-style-prefix-all": "^2.0.2",
 87 |     "jest": "^24.8.0",
 88 |     "jest-mock-console": "^1.0.0",
 89 |     "mini-css-extract-plugin": "^0.4.4",
 90 |     "object-assign": "^4.1.1",
 91 |     "postcss-cssnext": "^3.1.0",
 92 |     "postcss-import": "^12.0.0",
 93 |     "postcss-loader": "^3.0.0",
 94 |     "prismjs": "^1.6.0",
 95 |     "raf": "^3.4.0",
 96 |     "react": "^16.8.6",
 97 |     "react-dom": "^16.8.6",
 98 |     "react-markdown": "^4.0.3",
 99 |     "rimraf": "^2.6.2",
100 |     "sass-loader": "^7.1.0",
101 |     "style-loader": "^0.23.1",
102 |     "stylelint": "^9.6.0",
103 |     "stylelint-config-standard": "^18.2.0",
104 |     "ts-jest": "^24.0.2",
105 |     "tslint": "^5.11.0",
106 |     "tslint-config-airbnb": "^5.11.0",
107 |     "tslint-config-prettier": "^1.15.0",
108 |     "tslint-loader": "^3.5.4",
109 |     "typescript": "^3.1.3",
110 |     "uglifyjs-webpack-plugin": "^2.1.3",
111 |     "url-loader": "^1.1.2",
112 |     "webpack": "^4.19.1",
113 |     "webpack-assets-manifest": "^3.1.0",
114 |     "webpack-cli": "^3.1.1",
115 |     "webpack-dev-server": "^3.1.4"
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {};


--------------------------------------------------------------------------------
/react-inputs-validation.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/edwardfxiao/react-inputs-validation/fcf30042c76f86a6676f929384d2ba7f725783e9/react-inputs-validation.gif


--------------------------------------------------------------------------------
/src/__tests__/Checkbox.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { configure, mount } from 'enzyme';
  3 | import Adapter from 'enzyme-adapter-react-16';
  4 | import { WRAPPER_CLASS_IDENTITIFIER, MSG_CLASS_IDENTITIFIER } from '../js/Inputs/const.ts';
  5 | import mockConsole from 'jest-mock-console';
  6 | import Checkbox from '../js/Inputs/Checkbox.tsx';
  7 | configure({ adapter: new Adapter() });
  8 | 
  9 | const INPUT = 'input';
 10 | const WRAPPER = `.${WRAPPER_CLASS_IDENTITIFIER}`;
 11 | 
 12 | describe('Checkbox component', () => {
 13 |   it('[Toggling "validate"]: Should show msgHtml(err) when toggling "validate"', () => {
 14 |     const wrapper = mount(<Checkbox onBlur={() => {}} validate={false} />);
 15 |     wrapper.setProps({ validate: true });
 16 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(1);
 17 |   });
 18 | 
 19 |   it('[Providing msgOnError]: Should msg be msgOnError', () => {
 20 |     const msgOnError = 'msgOnError';
 21 |     const wrapper = mount(<Checkbox onBlur={() => {}} validationOption={{ msgOnError }} />);
 22 |     const $input = wrapper.find(INPUT);
 23 |     $input.simulate('focus');
 24 |     $input.simulate('blur');
 25 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(msgOnError);
 26 |   });
 27 | 
 28 |   it('[successMsg]: Should show successMsg when msgOnSuccess is provided', () => {
 29 |     const msgOnSuccess = 'msgOnSuccess';
 30 |     const wrapper = mount(
 31 |       <Checkbox
 32 |         checked={true}
 33 |         onBlur={() => {}}
 34 |         validationOption={{
 35 |           msgOnSuccess,
 36 |         }}
 37 |       />,
 38 |     );
 39 |     const $input = wrapper.find(INPUT);
 40 |     $input.simulate('focus');
 41 |     $input.simulate('blur');
 42 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(msgOnSuccess);
 43 |   });
 44 | 
 45 |   it('[successMsg]: Should show successMsg when msgOnSuccess is provided', () => {
 46 |     const msgOnSuccess = 'msgOnSuccess';
 47 |     const wrapper = mount(
 48 |       <Checkbox
 49 |         checked={false}
 50 |         onBlur={() => {}}
 51 |         validationOption={{
 52 |           msgOnSuccess,
 53 |         }}
 54 |       />,
 55 |     );
 56 |     const $wrapper = wrapper.find(WRAPPER);
 57 |     $wrapper.simulate('focus');
 58 |     $wrapper.simulate('click');
 59 |     $wrapper.simulate('blur');
 60 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(msgOnSuccess);
 61 |   });
 62 | 
 63 |   it('[successMsg]: Should show successMsg when msgOnSuccess is provided', () => {
 64 |     const msgOnSuccess = 'msgOnSuccess';
 65 |     const wrapper = mount(
 66 |       <Checkbox
 67 |         checked={false}
 68 |         onBlur={() => {}}
 69 |         onChange={() => {}}
 70 |         validationOption={{
 71 |           msgOnSuccess,
 72 |         }}
 73 |       />,
 74 |     );
 75 |     const $wrapper = wrapper.find(WRAPPER);
 76 |     $wrapper.simulate('focus');
 77 |     $wrapper.simulate('blur');
 78 |     $wrapper.simulate('focus');
 79 |     $wrapper.simulate('click');
 80 |     $wrapper.simulate('blur');
 81 |     expect(
 82 |       wrapper
 83 |         .update()
 84 |         .find(`.${MSG_CLASS_IDENTITIFIER}`)
 85 |         .text(),
 86 |     ).toEqual(msgOnSuccess);
 87 |   });
 88 | 
 89 |   it('[disabled]: Should msgHtml not be appeared when disabled', () => {
 90 |     const wrapper = mount(<Checkbox onBlur={() => {}} disabled={true} />);
 91 |     const $wrapper = wrapper.find(WRAPPER);
 92 |     $wrapper.simulate('click');
 93 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
 94 |   });
 95 | 
 96 |   it("[onClick]: Should call parent's onClick", () => {
 97 |     let value = '';
 98 |     const wrapper = mount(
 99 |       <Checkbox
100 |         onClick={() => {
101 |           value = 'clicked';
102 |         }}
103 |       />,
104 |     );
105 |     const $wrapper = wrapper.find(WRAPPER);
106 |     $wrapper.simulate('click');
107 |     expect(value).toEqual('clicked');
108 |   });
109 | 
110 |   it("[onFocus]: Should call parent's onFocus", () => {
111 |     let value = '';
112 |     const wrapper = mount(
113 |       <Checkbox
114 |         onFocus={() => {
115 |           value = 'focused';
116 |         }}
117 |       />,
118 |     );
119 |     const $wrapper = wrapper.find(WRAPPER);
120 |     $wrapper.simulate('focus');
121 |     expect(value).toEqual('focused');
122 |   });
123 | 
124 |   it("[onBlur]: Should not show msgHtml if it's not provide", () => {
125 |     const wrapper = mount(<Checkbox />);
126 |     const $wrapper = wrapper.find(WRAPPER);
127 |     $wrapper.simulate('focus');
128 |     $wrapper.simulate('blur');
129 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
130 |   });
131 | 
132 |   it('[validationCallback]: Should call validationCallback', () => {
133 |     let valid = false;
134 |     const wrapper = mount(
135 |       <Checkbox
136 |         onBlur={() => {}}
137 |         validationCallback={res => {
138 |           valid = res;
139 |         }}
140 |       />,
141 |     );
142 |     const $wrapper = wrapper.find(WRAPPER);
143 |     $wrapper.simulate('focus');
144 |     $wrapper.simulate('blur');
145 |     expect(valid).toEqual(true);
146 |   });
147 | 
148 |   it('[validationOption.check]: Should msgHtml not be appeared when check is false', () => {
149 |     const wrapper = mount(<Checkbox onBlur={() => {}} validationOption={{ check: false }} />);
150 |     const $wrapper = wrapper.find(WRAPPER);
151 |     $wrapper.simulate('focus');
152 |     $wrapper.simulate('blur');
153 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
154 |   });
155 | 
156 |   it('[validationOption.check]: Should name in msgHtml when name provided', () => {
157 |     const wrapper = mount(<Checkbox onBlur={() => {}} validationOption={{ check: true, name: 'Foo' }} />);
158 |     const $wrapper = wrapper.find(WRAPPER);
159 |     $wrapper.simulate('focus');
160 |     $wrapper.simulate('blur');
161 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual('Foo must be checked');
162 |   });
163 | 
164 |   it('[validationOption.check]: Should name in msgHtml when name provided', () => {
165 |     const wrapper = mount(<Checkbox onBlur={() => {}} validationOption={{ check: true, showMsg: false }} />);
166 |     const $wrapper = wrapper.find(WRAPPER);
167 |     $wrapper.simulate('focus');
168 |     $wrapper.simulate('blur');
169 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
170 |   });
171 | 
172 |   it('[validationOption.required]: Should msgHtml not be appeared when required is false', () => {
173 |     const wrapper = mount(<Checkbox onBlur={() => {}} validationOption={{ check: true, required: false }} />);
174 |     const $wrapper = wrapper.find(WRAPPER);
175 |     $wrapper.simulate('focus');
176 |     $wrapper.simulate('blur');
177 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
178 |   });
179 | 
180 |   it('[asyncObj]: Should show error', () => {
181 |     const wrapper = mount(<Checkbox onBlur={() => {}} asyncMsgObj={{}} />);
182 |     const $input = wrapper.find(INPUT);
183 |     $input.simulate('focus');
184 |     $input.simulate('blur');
185 |     wrapper.setProps({ asyncMsgObj: { error: true, message: 'has error' } });
186 |     expect(
187 |       wrapper
188 |         .update()
189 |         .find(`.${MSG_CLASS_IDENTITIFIER}`)
190 |         .text(),
191 |     ).toEqual('has error');
192 |   });
193 | 
194 |   it('[asyncObj]: Should not show error', () => {
195 |     const wrapper = mount(<Checkbox checked={true} onBlur={() => {}} asyncMsgObj={{}} />);
196 |     const $input = wrapper.find(INPUT);
197 |     $input.simulate('focus');
198 |     $input.simulate('blur');
199 |     wrapper.setProps({ asyncMsgObj: { error: true, message: 'has error', showOnError: false } });
200 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
201 |   });
202 | 
203 |   it('[asyncObj]: Should show success', () => {
204 |     const wrapper = mount(<Checkbox onBlur={() => {}} asyncMsgObj={{}} />);
205 |     const $input = wrapper.find(INPUT);
206 |     $input.simulate('focus');
207 |     $input.simulate('blur');
208 |     wrapper.setProps({ asyncMsgObj: { error: false, message: 'success', showOnSuccess: true } });
209 |     expect(
210 |       wrapper
211 |         .update()
212 |         .find(`.${MSG_CLASS_IDENTITIFIER}`)
213 |         .text(),
214 |     ).toEqual('success');
215 |   });
216 | 
217 |   it('[console.error REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE]: Should console.error REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE', () => {
218 |     const restoreConsole = mockConsole();
219 |     const wrapper = mount(<Checkbox onBlur={() => {}} validationOption={{ locale: 'foobar' }} />);
220 |     const $wrapper = wrapper.find(WRAPPER);
221 |     $wrapper.simulate('click');
222 |     $wrapper.simulate('blur');
223 |     expect(console.error).toHaveBeenCalled();
224 |     restoreConsole();
225 |   });
226 | });
227 | 


--------------------------------------------------------------------------------
/src/__tests__/Radiobox.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { expect as chaiExpect } from 'chai';
  3 | import { configure, mount } from 'enzyme';
  4 | import Adapter from 'enzyme-adapter-react-16';
  5 | import { WRAPPER_CLASS_IDENTITIFIER, MSG_CLASS_IDENTITIFIER } from '../js/Inputs/const.ts';
  6 | import mockConsole from 'jest-mock-console';
  7 | import Radiobox, { Option, isValidValue } from '../js/Inputs/Radiobox.tsx';
  8 | configure({ adapter: new Adapter() });
  9 | 
 10 | 
 11 | const WRAPPER = `.${WRAPPER_CLASS_IDENTITIFIER}`;
 12 | 
 13 | const OPTION_LIST = [{ id: 'engineer', name: 'engineer' }, { id: 'teacher', name: 'teacher' }, { id: 'student', name: 'student' }];
 14 | 
 15 | describe('Radiobox component', () => {
 16 |   it('[Toggling "validate"]: Should show msgHtml(err) when toggling "validate"', () => {
 17 |     const wrapper = mount(<Radiobox optionList={OPTION_LIST} onBlur={() => {}} validate={false} />);
 18 |     wrapper.setProps({ validate: true });
 19 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(1);
 20 |   });
 21 | 
 22 |   it('[Providing msgOnError]: Should msg be msgOnError', () => {
 23 |     const msgOnError = 'msgOnError';
 24 |     const wrapper = mount(<Radiobox optionList={OPTION_LIST} onBlur={() => {}} validationOption={{ msgOnError }} />);
 25 |     const $wrapper = wrapper.find(WRAPPER);
 26 |     $wrapper.simulate('click');
 27 |     $wrapper.simulate('blur');
 28 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(msgOnError);
 29 |   });
 30 | 
 31 |   it('[successMsg]: Should show successMsg when msgOnSuccess is provided', () => {
 32 |     const msgOnSuccess = 'msgOnSuccess';
 33 |     const wrapper = mount(
 34 |       <Radiobox
 35 |         optionList={OPTION_LIST}
 36 |         value={OPTION_LIST[2].id}
 37 |         onBlur={() => {}}
 38 |         onChange={() => {}}
 39 |         validationOption={{
 40 |           name: 'foobar',
 41 |           check: true,
 42 |           required: true,
 43 |           showMsg: true,
 44 |           msgOnSuccess,
 45 |         }}
 46 |       />,
 47 |     );
 48 |     const $wrapper = wrapper.find(WRAPPER);
 49 |     $wrapper.simulate('click');
 50 |     $wrapper.simulate('blur');
 51 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(msgOnSuccess);
 52 |   });
 53 | 
 54 |   it('[validationCallback]: Should call validationCallback', () => {
 55 |     let valid = false;
 56 |     const wrapper = mount(
 57 |       <Radiobox
 58 |         optionList={OPTION_LIST}
 59 |         onBlur={() => {}}
 60 |         validationCallback={res => {
 61 |           valid = res;
 62 |         }}
 63 |       />,
 64 |     );
 65 |     const $wrapper = wrapper.find(WRAPPER);
 66 |     $wrapper.simulate('click');
 67 |     $wrapper.simulate('blur');
 68 |     expect(valid).toEqual(true);
 69 |   });
 70 | 
 71 |   it('[<Option/>]: Should not render <Option/>', () => {
 72 |     const id = `react-inputs-validation__radiobox_option-${OPTION_LIST[0].id}`;
 73 |     const wrapper = mount(<Option />);
 74 |     expect(wrapper.find(`#${id}`).hostNodes().length).toEqual(0);
 75 |   });
 76 | 
 77 |   it('[disabled]: Should msgHtml not be appeared when disabled', () => {
 78 |     const wrapper = mount(<Radiobox optionList={OPTION_LIST} onBlur={() => {}} disabled={true} />);
 79 |     wrapper
 80 |       .find(`#react-inputs-validation__radiobox_option-${OPTION_LIST[1].id}`)
 81 |       .hostNodes()
 82 |       .simulate('change');
 83 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
 84 |   });
 85 | 
 86 |   it("[onClick]: Should call parent's onClick", () => {
 87 |     let value = '';
 88 |     const wrapper = mount(
 89 |       <Radiobox
 90 |         onClick={() => {
 91 |           value = 'clicked';
 92 |         }}
 93 |       />,
 94 |     );
 95 |     const $wrapper = wrapper.find(WRAPPER);
 96 |     $wrapper.simulate('click');
 97 |     expect(value).toEqual('clicked');
 98 |   });
 99 | 
100 |   it("[onFocus]: Should call parent's onFocus", () => {
101 |     let value = '';
102 |     const wrapper = mount(
103 |       <Radiobox
104 |         onFocus={() => {
105 |           value = 'focused';
106 |         }}
107 |       />,
108 |     );
109 |     const $wrapper = wrapper.find(WRAPPER);
110 |     $wrapper.simulate('focus');
111 |     expect(value).toEqual('focused');
112 |   });
113 | 
114 |   it("[onBlur]: Should not show msgHtml if it's not provide", () => {
115 |     const wrapper = mount(<Radiobox />);
116 |     const $wrapper = wrapper.find(WRAPPER);
117 |     $wrapper.simulate('focus');
118 |     $wrapper.simulate('blur');
119 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
120 |   });
121 | 
122 |   it('[validationOption.check]: Should msgHtml not be appeared when check is false', () => {
123 |     const wrapper = mount(<Radiobox onBlur={() => {}} validationOption={{ check: false }} />);
124 |     const $wrapper = wrapper.find(WRAPPER);
125 |     $wrapper.simulate('focus');
126 |     $wrapper.simulate('blur');
127 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
128 |   });
129 | 
130 |   it('[validationOption.required]: Should msgHtml not be appeared when required is false', () => {
131 |     const wrapper = mount(<Radiobox onBlur={() => {}} validationOption={{ check: true, required: false }} />);
132 |     const $wrapper = wrapper.find(WRAPPER);
133 |     $wrapper.simulate('focus');
134 |     $wrapper.simulate('blur');
135 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
136 |   });
137 | 
138 |   it('[isValidValue]: Should retrun true', () => {
139 |     chaiExpect(isValidValue(OPTION_LIST, OPTION_LIST[0].id)).equal(true);
140 |   });
141 | 
142 |   it('[isValidValue]: Should retrun false', () => {
143 |     chaiExpect(isValidValue(OPTION_LIST, 'foo')).equal(false);
144 |   });
145 | 
146 |   it('[isValidValue]: Should retrun false', () => {
147 |     chaiExpect(isValidValue([], 'foo')).equal(false);
148 |   });
149 | 
150 |   it('[Change value]: Should change the value when click the option', () => {
151 |     let value = '';
152 |     const wrapper = mount(
153 |       <Radiobox
154 |         optionList={OPTION_LIST}
155 |         onBlur={() => {}}
156 |         validate={false}
157 |         onChange={res => {
158 |           value = res;
159 |         }}
160 |       />,
161 |     );
162 |     wrapper
163 |       .find(`#react-inputs-validation__radiobox_option-${OPTION_LIST[1].id}`)
164 |       .hostNodes()
165 |       .simulate('change');
166 |     expect(value).toEqual(OPTION_LIST[1].id);
167 |   });
168 | 
169 |   it('[asyncObj]: Should show error', () => {
170 |     const wrapper = mount(<Radiobox onBlur={() => {}} asyncMsgObj={{}} />);
171 |     const $wrapper = wrapper.find(WRAPPER);
172 |     $wrapper.simulate('focus');
173 |     $wrapper.simulate('blur');
174 |     wrapper.setProps({ asyncMsgObj: { error: true, message: 'has error' } });
175 |     expect(
176 |       wrapper
177 |         .update()
178 |         .find(`.${MSG_CLASS_IDENTITIFIER}`)
179 |         .text(),
180 |     ).toEqual('has error');
181 |   });
182 | 
183 |   it('[asyncObj]: Should not show error', () => {
184 |     const wrapper = mount(<Radiobox value={OPTION_LIST[1].id} optionList={OPTION_LIST} onBlur={() => {}} asyncMsgObj={{}} />);
185 |     const $wrapper = wrapper.find(WRAPPER);
186 |     $wrapper.simulate('focus');
187 |     $wrapper.simulate('blur');
188 |     wrapper.setProps({ asyncMsgObj: { error: true, message: 'has error', showOnError: false } });
189 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
190 |   });
191 | 
192 |   it('[asyncObj]: Should show success', () => {
193 |     const wrapper = mount(<Radiobox onBlur={() => {}} asyncMsgObj={{}} />);
194 |     const $wrapper = wrapper.find(WRAPPER);
195 |     $wrapper.simulate('focus');
196 |     $wrapper.simulate('blur');
197 |     wrapper.setProps({ asyncMsgObj: { error: false, message: 'success', showOnSuccess: true } });
198 |     expect(
199 |       wrapper
200 |         .update()
201 |         .find(`.${MSG_CLASS_IDENTITIFIER}`)
202 |         .text(),
203 |     ).toEqual('success');
204 |   });
205 | 
206 |   it('[console.error REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE]: Should console.error REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE', () => {
207 |     const restoreConsole = mockConsole();
208 |     const wrapper = mount(<Radiobox optionList={OPTION_LIST} onBlur={() => {}} validationOption={{ locale: 'foobar' }} />);
209 |     const $wrapper = wrapper.find(WRAPPER);
210 |     $wrapper.simulate('click');
211 |     $wrapper.simulate('blur');
212 |     expect(console.error).toHaveBeenCalled();
213 |     restoreConsole();
214 |   });
215 | });
216 | 


--------------------------------------------------------------------------------
/src/__tests__/Select.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { render, fireEvent } from '@testing-library/react';
  3 | import { expect as chaiExpect } from 'chai';
  4 | import { configure, mount } from 'enzyme';
  5 | import Adapter from 'enzyme-adapter-react-16';
  6 | import { WRAPPER_CLASS_IDENTITIFIER, MSG_CLASS_IDENTITIFIER } from '../js/Inputs/const.ts';
  7 | import mockConsole from 'jest-mock-console';
  8 | import Select, { isValidValue, getIndex, Option } from '../js/Inputs/Select.tsx';
  9 | configure({ adapter: new Adapter() });
 10 | 
 11 | const WRAPPER = `.${WRAPPER_CLASS_IDENTITIFIER}`;
 12 | 
 13 | const OPTION_LIST = [
 14 |   { id: '', name: 'Please select one country' },
 15 |   { id: 'us', name: 'US' },
 16 |   { id: 'ca', name: 'CA' },
 17 |   { id: 'uk', name: 'UK' },
 18 |   { id: 'fr', name: 'France' },
 19 | ];
 20 | 
 21 | describe('Select component keydown', () => {
 22 |   it('keydown', () => {
 23 |     // sequence matters for some reason
 24 |     const div = document.createElement('div');
 25 |     document.body.appendChild(div);
 26 |     let value = '';
 27 |     const { container } = render(
 28 |       <Select
 29 |         value={''}
 30 |         onBlur={() => {}}
 31 |         optionList={OPTION_LIST}
 32 |         onChange={item => {
 33 |           value = item.id;
 34 |         }}
 35 |         attributesWrapper={{ id: 'wrapper' }}
 36 |         attributesInput={{ id: 'input' }}
 37 |       />,
 38 |       div,
 39 |     );
 40 |     const $wrapper = document.querySelector(WRAPPER);
 41 |     fireEvent.click($wrapper);
 42 |     const arrowDown = new KeyboardEvent('keydown', {
 43 |       bubbles: true,
 44 |       key: 'ArrowDown',
 45 |       keyCode: 40,
 46 |       which: 40,
 47 |     });
 48 |     const enter = new KeyboardEvent('keydown', {
 49 |       bubbles: true,
 50 |       key: 'Enter',
 51 |       keyCode: 13,
 52 |       which: 13,
 53 |     });
 54 |     fireEvent(container, arrowDown);
 55 |     fireEvent(container, enter);
 56 |     expect(value).toEqual(OPTION_LIST[1].id);
 57 |   });
 58 | });
 59 | 
 60 | describe('Select component', () => {
 61 |   it('[Toggling "validate"]: Should show msgHtml(err) when toggling "validate"', () => {
 62 |     const wrapper = mount(<Select optionList={OPTION_LIST} onBlur={() => {}} validate={false} />);
 63 |     wrapper.setProps({ validate: true });
 64 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(1);
 65 |   });
 66 | 
 67 |   it('[Providing msgOnError]: Should msg be msgOnError', () => {
 68 |     const msgOnError = 'msgOnError';
 69 |     const wrapper = mount(<Select optionList={OPTION_LIST} onBlur={() => {}} validationOption={{ msgOnError }} />);
 70 |     const $wrapper = wrapper.find(WRAPPER);
 71 |     $wrapper.simulate('click');
 72 |     $wrapper.simulate('blur');
 73 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(msgOnError);
 74 |   });
 75 | 
 76 |   it('[successMsg]: Should show successMsg when msgOnSuccess is provided', () => {
 77 |     const msgOnSuccess = 'msgOnSuccess';
 78 |     const wrapper = mount(
 79 |       <Select
 80 |         optionList={OPTION_LIST}
 81 |         value={OPTION_LIST[2].id}
 82 |         onBlur={() => {}}
 83 |         onChange={() => {}}
 84 |         validationOption={{
 85 |           name: 'foobar',
 86 |           check: true,
 87 |           required: true,
 88 |           showMsg: true,
 89 |           msgOnSuccess,
 90 |         }}
 91 |       />,
 92 |     );
 93 |     const $wrapper = wrapper.find(WRAPPER);
 94 |     $wrapper.simulate('click');
 95 |     $wrapper.simulate('blur');
 96 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(msgOnSuccess);
 97 |   });
 98 | 
 99 |   it('[Change props value]: Should check immediately when new props value is not equal to internal value', () => {
100 |     const wrapper = mount(<Select optionList={OPTION_LIST} value={OPTION_LIST[2].id} onBlur={() => {}} />);
101 |     const $wrapper = wrapper.find(WRAPPER);
102 |     $wrapper.simulate('click');
103 |     $wrapper.simulate('blur');
104 |     wrapper.setProps({ value: '' });
105 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(1);
106 |   });
107 | 
108 |   it('[disabled]: Should msgHtml not be appeared when disabled', () => {
109 |     const wrapper = mount(<Select optionList={OPTION_LIST} onBlur={() => {}} disabled={true} />);
110 |     wrapper.find(`#react-inputs-validation__select_option-${OPTION_LIST[1].id}`).hostNodes().simulate('click');
111 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
112 |   });
113 | 
114 |   it('[isValidValue]: Should retrun true', () => {
115 |     chaiExpect(isValidValue(OPTION_LIST, '')).equal(true);
116 |   });
117 | 
118 |   it('[isValidValue]: Should retrun false', () => {
119 |     chaiExpect(isValidValue(OPTION_LIST, 'foo')).equal(false);
120 |   });
121 | 
122 |   it('[getIndex]: Should retrun 2', () => {
123 |     chaiExpect(getIndex(OPTION_LIST, 'ca')).equal(2);
124 |   });
125 | 
126 |   it('[getIndex]: Should retrun -1', () => {
127 |     chaiExpect(getIndex(OPTION_LIST, 'foo')).equal(-1);
128 |   });
129 | 
130 |   it("[onClick]: Should call parent's onClick", () => {
131 |     let value = '';
132 |     const wrapper = mount(
133 |       <Select
134 |         onClick={() => {
135 |           value = 'clicked';
136 |         }}
137 |         optionList={OPTION_LIST}
138 |       />,
139 |     );
140 |     const $wrapper = wrapper.find(WRAPPER);
141 |     $wrapper.simulate('click');
142 |     expect(value).toEqual('clicked');
143 |   });
144 | 
145 |   it("[onFocus]: Should call parent's onFocus", () => {
146 |     let value = '';
147 |     const wrapper = mount(
148 |       <Select
149 |         onFocus={() => {
150 |           value = 'focused';
151 |         }}
152 |       />,
153 |     );
154 |     const $wrapper = wrapper.find(WRAPPER);
155 |     $wrapper.simulate('focus');
156 |     expect(value).toEqual('focused');
157 |   });
158 | 
159 |   it('[validationOption.check]: Should msgHtml not be appeared when check is false', () => {
160 |     const wrapper = mount(<Select onBlur={() => {}} validationOption={{ check: false }} />);
161 |     const $wrapper = wrapper.find(WRAPPER);
162 |     $wrapper.simulate('focus');
163 |     $wrapper.simulate('blur');
164 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
165 |   });
166 | 
167 |   it('[onClick]: Should choose item', () => {
168 |     let value = '';
169 |     const wrapper = mount(
170 |       <Select
171 |         value={value}
172 |         optionList={OPTION_LIST}
173 |         onChange={res => {
174 |           value = res.id;
175 |         }}
176 |       />,
177 |     );
178 |     const $wrapper = wrapper.find(WRAPPER);
179 |     $wrapper.simulate('click');
180 |     const $el = wrapper.find(`#react-inputs-validation__select_option-${OPTION_LIST[2].id}`).hostNodes();
181 |     $el.simulate('click');
182 |     expect(value).toEqual(OPTION_LIST[2].id);
183 |   });
184 | 
185 |   it("[onBlur]: Should not show msgHtml if it's not provide", () => {
186 |     const wrapper = mount(<Select />);
187 |     const $wrapper = wrapper.find(WRAPPER);
188 |     $wrapper.simulate('focus');
189 |     $wrapper.simulate('blur');
190 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
191 |   });
192 | 
193 |   it('[onMouseOver]: Should option item add active class', (done) => {
194 |     const value = '';
195 |     const wrapper = mount(<Select value={value} optionList={OPTION_LIST} onChange={() => {}} />);
196 |     const $wrapper = wrapper.find(WRAPPER);
197 |     $wrapper.simulate('click');
198 |     const $el = wrapper.find(`#react-inputs-validation__select_option-${OPTION_LIST[2].id}`).hostNodes();
199 |     $el.simulate('mouseover');
200 |     setTimeout(() => {
201 |       expect($el.instance().className).toEqual('button select__options-item-show-cursor  select__options-item false false false   select__hover-active');
202 |       done()
203 |     }, 0);
204 |   });
205 | 
206 |   it('[onMouseMove]: Should option item remove active class', (done) => {
207 |     const value = '';
208 |     const wrapper = mount(<Select value={value} optionList={OPTION_LIST} onChange={() => {}} />);
209 |     const $wrapper = wrapper.find(WRAPPER);
210 |     $wrapper.simulate('click');
211 |     const $el = wrapper.find(`#react-inputs-validation__select_option-${OPTION_LIST[2].id}`).hostNodes();
212 |     $el.simulate('mouseover');
213 |     $el.simulate('mousemove');
214 |     setTimeout(() => {
215 |       expect($el.instance().className).toEqual('button select__options-item-show-cursor  select__options-item false false false   select__hover-active');
216 |       done()
217 |     }, 0);
218 |   });
219 | 
220 |   // TODO
221 |   // it('[onMouseMove]: Should option item remove active class', (done) => {
222 |   //   const value = '';
223 |   //   const wrapper = mount(<Select value={value} optionList={OPTION_LIST} onChange={() => {}} />);
224 |   //   const $wrapper = wrapper.find(WRAPPER);
225 |   //   $wrapper.simulate('click');
226 |   //   const $el = wrapper.find(`#react-inputs-validation__select_option-${OPTION_LIST[2].id}`).hostNodes();
227 |   //   $el.simulate('mouseover');
228 |   //   $el.simulate('mouseout');
229 |   //   setTimeout(() => {
230 |   //     expect($el.instance().className).toEqual('button select__options-item-show-cursor  select__options-item false false false ');
231 |   //     done()
232 |   //   }, 100);
233 |   // });
234 | 
235 |   it('[<Option/>]: Should not render <Option/>', () => {
236 |     const id = `react-inputs-validation__select_option-${OPTION_LIST[0].id}`;
237 |     const wrapper = mount(<Option />);
238 |     expect(wrapper.find(`#${id}`).hostNodes().length).toEqual(0);
239 |   });
240 | 
241 |   it('[validationCallback]: Should call validationCallback', () => {
242 |     let valid = false;
243 |     const wrapper = mount(
244 |       <Select
245 |         optionList={OPTION_LIST}
246 |         onBlur={() => {}}
247 |         validationCallback={res => {
248 |           valid = res;
249 |         }}
250 |       />,
251 |     );
252 |     const $wrapper = wrapper.find(WRAPPER);
253 |     $wrapper.simulate('click');
254 |     $wrapper.simulate('blur');
255 |     expect(valid).toEqual(true);
256 |   });
257 | 
258 |   it('[asyncObj]: Should show error', () => {
259 |     const wrapper = mount(<Select onBlur={() => {}} optionList={OPTION_LIST} asyncMsgObj={{}} />);
260 |     const $wrapper = wrapper.find(WRAPPER);
261 |     $wrapper.simulate('focus');
262 |     $wrapper.simulate('blur');
263 |     wrapper.setProps({ asyncMsgObj: { error: true, message: 'has error' } });
264 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual('has error');
265 |   });
266 | 
267 |   it('[asyncObj]: Should not show error', () => {
268 |     const wrapper = mount(<Select value={OPTION_LIST[1].id} optionList={OPTION_LIST} onBlur={() => {}} asyncMsgObj={{}} />);
269 |     const $wrapper = wrapper.find(WRAPPER);
270 |     $wrapper.simulate('focus');
271 |     $wrapper.simulate('blur');
272 |     wrapper.setProps({ asyncMsgObj: { error: true, message: 'has error', showOnError: false } });
273 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
274 |   });
275 | 
276 |   it('[asyncObj]: Should show success', () => {
277 |     const wrapper = mount(<Select onBlur={() => {}} optionList={OPTION_LIST} asyncMsgObj={{}} />);
278 |     const $wrapper = wrapper.find(WRAPPER);
279 |     $wrapper.simulate('focus');
280 |     $wrapper.simulate('blur');
281 |     wrapper.setProps({ asyncMsgObj: { error: false, message: 'success', showOnSuccess: true } });
282 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual('success');
283 |   });
284 | 
285 |   const LIST1 = [
286 |     { id: 'us', name: 'US' },
287 |     { id: 'ca', name: 'CA' },
288 |   ];
289 |   const LIST2 = [
290 |     { id: 'uk', name: 'UK' },
291 |     { id: 'fr', name: 'France' },
292 |   ];
293 |   const MyComponent = () => {
294 |     const stateOptionList = useState(LIST1);
295 |     const stateCurId = useState(LIST1[0].id);
296 |     return (
297 |       <div>
298 |         <Select
299 |           value={stateCurId[0]}
300 |           onBlur={() => {}}
301 |           optionList={stateOptionList[0]}
302 |           onChange={res => {
303 |             stateCurId[1](res.id);
304 |           }}
305 |         />
306 |         <div
307 |           id="changeList"
308 |           onClick={() => {
309 |             stateOptionList[1](LIST2);
310 |           }}
311 |         >
312 |           change list
313 |         </div>
314 |         <div id="stateCurId">{stateCurId[0]}</div>
315 |       </div>
316 |     );
317 |   };
318 | 
319 |   it('[update optionList]: Should change ', () => {
320 |     const wrapper = mount(<MyComponent />);
321 |     const $input = wrapper.find('input');
322 |     wrapper.find('#changeList').simulate('click');
323 |     expect($input.at(0).instance().value).toEqual(LIST2[0].id);
324 |   });
325 | 
326 |   it('[console.error REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE]: Should console.error REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE', () => {
327 |     const restoreConsole = mockConsole();
328 |     const wrapper = mount(<Select optionList={OPTION_LIST} onBlur={() => {}} validationOption={{ locale: 'foobar' }} />);
329 |     const $wrapper = wrapper.find(WRAPPER);
330 |     $wrapper.simulate('click');
331 |     $wrapper.simulate('blur');
332 |     expect(console.error).toHaveBeenCalled();
333 |     restoreConsole();
334 |   });
335 | });
336 | 


--------------------------------------------------------------------------------
/src/__tests__/Textarea.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { configure, mount } from 'enzyme';
  3 | import Adapter from 'enzyme-adapter-react-16';
  4 | import { MSG_CLASS_IDENTITIFIER } from '../js/Inputs/const.ts';
  5 | import mockConsole from 'jest-mock-console';
  6 | import Textarea from '../js/Inputs/Textarea.tsx';
  7 | configure({ adapter: new Adapter() });
  8 | 
  9 | const INPUT = 'textarea';
 10 | 
 11 | describe('Textarea component', () => {
 12 |   it('[Toggling "validate"]: Should show msgHtml(err) when toggling "validate"', () => {
 13 |     const wrapper = mount(<Textarea onBlur={() => {}} validate={false} />);
 14 |     wrapper.setProps({ validate: true });
 15 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(1);
 16 |   });
 17 | 
 18 |   it('[Providing cols]: Should cols be exact the same with given prop', () => {
 19 |     const wrapper = mount(<Textarea attributesInput={{ cols: 10 }} />);
 20 |     expect(wrapper.find(INPUT).props()['cols']).toEqual(10);
 21 |   });
 22 | 
 23 |   it('[Providing rows]: Should rows be exact the same with given prop', () => {
 24 |     const wrapper = mount(<Textarea attributesInput={{ rows: 10 }} />);
 25 |     expect(wrapper.find(INPUT).props()['rows']).toEqual(10);
 26 |   });
 27 | 
 28 |   it('[Providing msgOnError]: Should msg be msgOnError', () => {
 29 |     const msgOnError = 'msgOnError';
 30 |     const wrapper = mount(<Textarea onBlur={() => {}} validationOption={{ msgOnError }} />);
 31 |     const $input = wrapper.find(INPUT);
 32 |     $input.simulate('focus');
 33 |     $input.simulate('blur');
 34 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(msgOnError);
 35 |   });
 36 | 
 37 |   it("[onFocus]: Should call parent's onFocus", () => {
 38 |     let value = '';
 39 |     const wrapper = mount(
 40 |       <Textarea
 41 |         onFocus={() => {
 42 |           value = 'focused';
 43 |         }}
 44 |       />,
 45 |     );
 46 |     const $input = wrapper.find(INPUT);
 47 |     $input.simulate('focus');
 48 |     expect(value).toEqual('focused');
 49 |   });
 50 | 
 51 |   it("[onKeyUp]: Should call parent's onKeyUp", () => {
 52 |     let value = '';
 53 |     const wrapper = mount(
 54 |       <Textarea
 55 |         onKeyUp={() => {
 56 |           value = 'keyuped';
 57 |         }}
 58 |       />,
 59 |     );
 60 |     const $input = wrapper.find(INPUT);
 61 |     $input.simulate('keyup');
 62 |     expect(value).toEqual('keyuped');
 63 |   });
 64 | 
 65 |   it("[onKeyUp]: Should not call parent's onKeyUp", () => {
 66 |     let value = '';
 67 |     const wrapper = mount(<Textarea />);
 68 |     const $input = wrapper.find(INPUT);
 69 |     $input.simulate('keyup');
 70 |     expect(value).toEqual('');
 71 |   });
 72 | 
 73 |   it("[onClick]: Should call parent's onClick", () => {
 74 |     let value = '';
 75 |     const wrapper = mount(
 76 |       <Textarea
 77 |         onClick={() => {
 78 |           value = 'clicked';
 79 |         }}
 80 |       />,
 81 |     );
 82 |     const $input = wrapper.find(INPUT);
 83 |     $input.simulate('click');
 84 |     expect(value).toEqual('clicked');
 85 |   });
 86 | 
 87 |   it("[onClick]: Should not call parent's onClick", () => {
 88 |     let value = '';
 89 |     const wrapper = mount(<Textarea />);
 90 |     const $input = wrapper.find(INPUT);
 91 |     $input.simulate('click');
 92 |     expect(value).toEqual('');
 93 |   });
 94 | 
 95 |   it("[onBlur]: Should not show msgHtml if it's not provide", () => {
 96 |     const wrapper = mount(<Textarea />);
 97 |     const $input = wrapper.find(INPUT);
 98 |     $input.simulate('focus');
 99 |     $input.simulate('blur');
100 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
101 |   });
102 | 
103 |   it('[successMsg]: Should show successMsg when msgOnSuccess is provided', () => {
104 |     const msgOnSuccess = 'msgOnSuccess';
105 |     const value = 'foobar';
106 |     const wrapper = mount(
107 |       <Textarea
108 |         value={value}
109 |         onBlur={() => {}}
110 |         onChange={() => {}}
111 |         validationOption={{
112 |           name: 'foobar',
113 |           check: true,
114 |           required: true,
115 |           showMsg: true,
116 |           msgOnSuccess,
117 |         }}
118 |       />,
119 |     );
120 |     const $input = wrapper.find(INPUT);
121 |     $input.simulate('focus');
122 |     $input.simulate('blur');
123 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(msgOnSuccess);
124 |   });
125 | 
126 |   it('[successMsg]: Should show successMsg when msgOnSuccess is provided', () => {
127 |     const msgOnSuccess = 'msgOnSuccess';
128 |     const value = 'foobar';
129 |     const wrapper = mount(
130 |       <Textarea
131 |         onBlur={() => {}}
132 |         validationOption={{
133 |           name: 'foobar',
134 |           check: true,
135 |           required: true,
136 |           showMsg: true,
137 |           msgOnSuccess,
138 |         }}
139 |       />,
140 |     );
141 |     const $input = wrapper.find(INPUT);
142 |     $input.simulate('focus');
143 |     $input.at(0).instance().value = value;
144 |     $input.simulate('change');
145 |     $input.simulate('blur');
146 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(msgOnSuccess);
147 |   });
148 | 
149 |   it('[successMsg]: Should show successMsg when msgOnSuccess is provided', () => {
150 |     const value = 'foobar';
151 |     const wrapper = mount(
152 |       <Textarea
153 |         onBlur={() => {}}
154 |         onChange={() => {}}
155 |         validationOption={{
156 |           name: 'foobar',
157 |           check: true,
158 |           required: true,
159 |         }}
160 |       />,
161 |     );
162 |     const $input = wrapper.find(INPUT);
163 |     $input.simulate('focus');
164 |     $input.simulate('blur');
165 |     $input.simulate('focus');
166 |     $input.at(0).instance().value = value;
167 |     $input.simulate('change');
168 |     $input.simulate('blur');
169 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
170 |   });
171 | 
172 |   it('[customFunc]: Should setState msg to ""', () => {
173 |     const errorMessage = 'Description cannot be other things but milk';
174 |     const wrapper = mount(
175 |       <Textarea
176 |         value={'milk'}
177 |         onBlur={() => {}}
178 |         validationOption={{
179 |           customFunc: res => {
180 |             if (res != 'milk') {
181 |               return errorMessage;
182 |             }
183 |             return true;
184 |           },
185 |         }}
186 |       />,
187 |     );
188 |     const $input = wrapper.find(INPUT);
189 |     $input.simulate('focus');
190 |     $input.simulate('blur');
191 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
192 |   });
193 | 
194 |   it('[validationOption.compare]: Should msgHtml be appeared when it is equal to compared value', () => {
195 |     const wrapper = mount(
196 |       <Textarea
197 |         value={'abc'}
198 |         onBlur={() => {}}
199 |         validationOption={{
200 |           compare: 'abc',
201 |         }}
202 |       />,
203 |     );
204 |     const $input = wrapper.find(INPUT);
205 |     $input.simulate('focus');
206 |     $input.simulate('blur');
207 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
208 |   });
209 | 
210 |   it('[validationOption.check]: Should msgHtml not be appeared when check is false', () => {
211 |     const wrapper = mount(<Textarea onBlur={() => {}} validationOption={{ check: false }} />);
212 |     const $input = wrapper.find(INPUT);
213 |     $input.simulate('focus');
214 |     $input.simulate('blur');
215 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
216 |   });
217 | 
218 |   it('[validationOption.check]: Should msgHtml not be appeared when check is false', () => {
219 |     const wrapper = mount(<Textarea onBlur={() => {}} validationOption={{ check: true, required: false }} />);
220 |     const $input = wrapper.find(INPUT);
221 |     $input.simulate('focus');
222 |     $input.simulate('blur');
223 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
224 |   });
225 | 
226 |   it('[disabled]: Should msgHtml not be appeared when disabled', () => {
227 |     const wrapper = mount(<Textarea onBlur={() => {}} disabled={true} />);
228 |     const $input = wrapper.find(INPUT);
229 |     $input.simulate('change');
230 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
231 |   });
232 | 
233 |   it('[String maxLength]: Should not longer than maxLength', () => {
234 |     let value = '';
235 |     const wrapper = mount(
236 |       <Textarea
237 |         value={value}
238 |         onBlur={() => {}}
239 |         onChange={res => {
240 |           value = res;
241 |         }}
242 |         attributesInput={{ maxLength: '2' }}
243 |       />,
244 |     );
245 |     const $input = wrapper.find(INPUT);
246 |     $input.at(0).instance().value = 'foobar';
247 |     $input.simulate('change');
248 |     expect(value).toEqual('');
249 |   });
250 | 
251 |   it('[Number maxLength]: Should not longer than maxLength', () => {
252 |     let value = '';
253 |     const wrapper = mount(
254 |       <Textarea
255 |         value={value}
256 |         onBlur={() => {}}
257 |         onChange={res => {
258 |           value = res;
259 |         }}
260 |         attributesInput={{ maxLength: 2 }}
261 |       />,
262 |     );
263 |     const $input = wrapper.find(INPUT);
264 |     $input.at(0).instance().value = 'foobar';
265 |     $input.simulate('change');
266 |     expect(value).toEqual('');
267 |   });
268 | 
269 |   it('[Number maxLength]: Should not longer than maxLength', () => {
270 |     let value = '';
271 |     const wrapper = mount(
272 |       <Textarea
273 |         value={value}
274 |         onBlur={() => {}}
275 |         onChange={res => {
276 |           value = res;
277 |         }}
278 |         attributesInput={{ maxLength: 10 }}
279 |       />,
280 |     );
281 |     const $input = wrapper.find(INPUT);
282 |     $input.at(0).instance().value = 'foo';
283 |     $input.simulate('change');
284 |     expect(value).toEqual('foo');
285 |   });
286 | 
287 |   it('[Number maxLength]: Should not longer than maxLength', () => {
288 |     let value = '';
289 |     const wrapper = mount(
290 |       <Textarea
291 |         value={value}
292 |         onBlur={() => {}}
293 |         onChange={res => {
294 |           value = res;
295 |         }}
296 |         attributesInput={{ maxLength: 0 }}
297 |       />,
298 |     );
299 |     const $input = wrapper.find(INPUT);
300 |     $input.at(0).instance().value = 'foo';
301 |     $input.simulate('change');
302 |     expect(value).toEqual('foo');
303 |   });
304 | 
305 |   it('[String reg]: Should msgHtml be appeared', () => {
306 |     const wrapper = mount(
307 |       <Textarea
308 |         value="foobar"
309 |         onBlur={() => {}}
310 |         onChange={() => {}}
311 |         validationOption={{
312 |           locale: 'en-US',
313 |           type: 'string',
314 |           name: '',
315 |           reg: /^0x[a-fA-F0-9]{40}$/,
316 |           check: true,
317 |           showMsg: true,
318 |           required: true,
319 |           msgOnError: '',
320 |         }}
321 |       />,
322 |     );
323 |     const $input = wrapper.find(INPUT);
324 |     $input.simulate('focus');
325 |     $input.simulate('blur');
326 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(1);
327 |   });
328 | 
329 |   it('[String reg]: Should not msgHtml be appeared', () => {
330 |     const wrapper = mount(
331 |       <Textarea
332 |         value="0x0D36396E5f5EC58F0ff4569ED463CBEF03B0ba52"
333 |         onBlur={() => {}}
334 |         onChange={() => {}}
335 |         validationOption={{
336 |           locale: 'en-US',
337 |           type: 'string',
338 |           name: '',
339 |           reg: /^0x[a-fA-F0-9]{40}$/,
340 |           check: true,
341 |           showMsg: true,
342 |           required: true,
343 |           msgOnError: '',
344 |         }}
345 |       />,
346 |     );
347 |     const $input = wrapper.find(INPUT);
348 |     $input.simulate('focus');
349 |     $input.simulate('blur');
350 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
351 |   });
352 | 
353 |   it('[String reg]: Should not msgHtml be appeared with regMsg', () => {
354 |     const regMsg = 'regMsg';
355 |     const wrapper = mount(
356 |       <Textarea
357 |         value="abc"
358 |         onBlur={() => {}}
359 |         onChange={() => {}}
360 |         validationOption={{
361 |           locale: 'en-US',
362 |           type: 'string',
363 |           name: '',
364 |           reg: /^0x[a-fA-F0-9]{40}$/,
365 |           check: true,
366 |           showMsg: true,
367 |           regMsg,
368 |           required: true,
369 |           msgOnError: '',
370 |         }}
371 |       />,
372 |     );
373 |     const $input = wrapper.find(INPUT);
374 |     $input.simulate('focus');
375 |     $input.simulate('blur');
376 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual(regMsg);
377 |   });
378 | 
379 |   it('[String length]: Should msgHtml be appeared when the length is not valid', () => {
380 |     const wrapper = mount(
381 |       <Textarea
382 |         value={'success'}
383 |         onBlur={() => {}}
384 |         validationOption={{
385 |           length: 5,
386 |         }}
387 |       />,
388 |     );
389 |     const $input = wrapper.find(INPUT);
390 |     $input.simulate('focus');
391 |     $input.simulate('blur');
392 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(1);
393 |   });
394 | 
395 |   it('[String length]: Should msgHtml be appeared with name when the length is not valid', () => {
396 |     const wrapper = mount(
397 |       <Textarea
398 |         value={'success'}
399 |         onBlur={() => {}}
400 |         validationOption={{
401 |           name: 'foobar',
402 |           length: 5,
403 |         }}
404 |       />,
405 |     );
406 |     const $input = wrapper.find(INPUT);
407 |     $input.simulate('focus');
408 |     $input.simulate('blur');
409 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual('foobar length must be 5');
410 |   });
411 | 
412 |   it('[String length]: Should msgHtml be appeared', () => {
413 |     const wrapper = mount(
414 |       <Textarea
415 |         value={'success'}
416 |         onBlur={() => {}}
417 |         validationOption={{
418 |           length: 5,
419 |         }}
420 |       />,
421 |     );
422 |     const $input = wrapper.find(INPUT);
423 |     $input.simulate('focus');
424 |     $input.simulate('blur');
425 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).text()).toEqual('length must be 5');
426 |   });
427 | 
428 |   it('[String length]: Should not msgHtml be appeared', () => {
429 |     const wrapper = mount(
430 |       <Textarea
431 |         value={'foo'}
432 |         onBlur={() => {}}
433 |         validationOption={{
434 |           length: 3,
435 |         }}
436 |       />,
437 |     );
438 |     const $input = wrapper.find(INPUT);
439 |     $input.simulate('focus');
440 |     $input.simulate('blur');
441 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
442 |   });
443 | 
444 |   it('[String length]: Should state.msg not to be error message', () => {
445 |     const wrapper = mount(
446 |       <Textarea
447 |         value={'abcde'}
448 |         onBlur={() => {}}
449 |         validationOption={{
450 |           length: 5,
451 |         }}
452 |       />,
453 |     );
454 |     const $input = wrapper.find(INPUT);
455 |     $input.simulate('focus');
456 |     $input.simulate('blur');
457 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
458 |   });
459 | 
460 |   it('[String min]: Should msgHtml be appeared', () => {
461 |     const wrapper = mount(
462 |       <Textarea
463 |         value="foobar"
464 |         onBlur={() => {}}
465 |         onChange={() => {}}
466 |         validationOption={{
467 |           locale: 'en-US',
468 |           type: 'string',
469 |           name: '',
470 |           min: 10,
471 |           check: true,
472 |           showMsg: true,
473 |           required: true,
474 |           msgOnError: '',
475 |         }}
476 |       />,
477 |     );
478 |     const $input = wrapper.find(INPUT);
479 |     $input.simulate('focus');
480 |     $input.simulate('blur');
481 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(1);
482 |   });
483 | 
484 |   it('[String min]: Should not msgHtml be appeared', () => {
485 |     const wrapper = mount(
486 |       <Textarea
487 |         value="foobar"
488 |         onBlur={() => {}}
489 |         onChange={() => {}}
490 |         validationOption={{
491 |           locale: 'en-US',
492 |           type: 'string',
493 |           name: '',
494 |           min: 6,
495 |           check: true,
496 |           showMsg: true,
497 |           required: true,
498 |           msgOnError: '',
499 |         }}
500 |       />,
501 |     );
502 |     const $input = wrapper.find(INPUT);
503 |     $input.simulate('focus');
504 |     $input.simulate('blur');
505 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
506 |   });
507 | 
508 |   it('[String max]: Should msgHtml be appeared', () => {
509 |     const wrapper = mount(
510 |       <Textarea
511 |         value="foobar"
512 |         onBlur={() => {}}
513 |         onChange={() => {}}
514 |         validationOption={{
515 |           locale: 'en-US',
516 |           type: 'string',
517 |           name: '',
518 |           max: 1,
519 |           check: true,
520 |           showMsg: true,
521 |           required: true,
522 |           msgOnError: '',
523 |         }}
524 |       />,
525 |     );
526 |     const $input = wrapper.find(INPUT);
527 |     $input.simulate('focus');
528 |     $input.simulate('blur');
529 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(1);
530 |   });
531 | 
532 |   it('[String max]: Should not msgHtml be appeared', () => {
533 |     const wrapper = mount(
534 |       <Textarea
535 |         value="foobar"
536 |         onBlur={() => {}}
537 |         onChange={() => {}}
538 |         validationOption={{
539 |           locale: 'en-US',
540 |           type: 'string',
541 |           name: '',
542 |           max: 7,
543 |           check: true,
544 |           showMsg: true,
545 |           required: true,
546 |           msgOnError: '',
547 |         }}
548 |       />,
549 |     );
550 |     const $input = wrapper.find(INPUT);
551 |     $input.simulate('focus');
552 |     $input.simulate('blur');
553 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
554 |   });
555 | 
556 |   it('[String min and max]: Should msgHtml be appeared when the length is out out range', () => {
557 |     const wrapper = mount(
558 |       <Textarea
559 |         value="12345"
560 |         onBlur={() => {}}
561 |         validationOption={{
562 |           min: 1,
563 |           max: 3,
564 |         }}
565 |       />,
566 |     );
567 |     const $input = wrapper.find(INPUT);
568 |     $input.simulate('focus');
569 |     $input.simulate('blur');
570 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(1);
571 |   });
572 | 
573 |   it('[String min and max]: Should not msgHtml be appeared when the length is out out range', () => {
574 |     const wrapper = mount(
575 |       <Textarea
576 |         value="12345"
577 |         onBlur={() => {}}
578 |         validationOption={{
579 |           min: 1,
580 |           max: 10,
581 |         }}
582 |       />,
583 |     );
584 |     const $input = wrapper.find(INPUT);
585 |     $input.simulate('focus');
586 |     $input.simulate('blur');
587 |     expect(wrapper.find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
588 |   });
589 | 
590 |   it('[validationCallback]: Should call validationCallback', () => {
591 |     let valid = false;
592 |     const wrapper = mount(
593 |       <Textarea
594 |         onBlur={() => {}}
595 |         validationCallback={res => {
596 |           valid = res;
597 |         }}
598 |       />,
599 |     );
600 |     const $input = wrapper.find(INPUT);
601 |     $input.simulate('focus');
602 |     $input.simulate('blur');
603 |     expect(valid).toEqual(true);
604 |   });
605 | 
606 |   it('[asyncObj]: Should show error', () => {
607 |     const wrapper = mount(<Textarea onBlur={() => {}} asyncMsgObj={{}} />);
608 |     const $input = wrapper.find(INPUT);
609 |     $input.simulate('focus');
610 |     $input.simulate('blur');
611 |     wrapper.setProps({ asyncMsgObj: { error: true, message: 'has error' } });
612 |     expect(
613 |       wrapper
614 |         .update()
615 |         .find(`.${MSG_CLASS_IDENTITIFIER}`)
616 |         .text(),
617 |     ).toEqual('has error');
618 |   });
619 | 
620 |   it('[asyncObj]: Should not show error', () => {
621 |     const wrapper = mount(<Textarea value="foobar" onBlur={() => {}} asyncMsgObj={{}} />);
622 |     const $input = wrapper.find(INPUT);
623 |     $input.simulate('focus');
624 |     $input.simulate('blur');
625 |     wrapper.setProps({ asyncMsgObj: { error: true, message: 'has error', showOnError: false } });
626 |     expect(wrapper.update().find(`.${MSG_CLASS_IDENTITIFIER}`).length).toEqual(0);
627 |   });
628 | 
629 |   it('[asyncObj]: Should show success', () => {
630 |     const wrapper = mount(<Textarea onBlur={() => {}} asyncMsgObj={{}} />);
631 |     const $input = wrapper.find(INPUT);
632 |     $input.simulate('focus');
633 |     $input.simulate('blur');
634 |     wrapper.setProps({ asyncMsgObj: { error: false, message: 'success', showOnSuccess: true } });
635 |     expect(
636 |       wrapper
637 |         .update()
638 |         .find(`.${MSG_CLASS_IDENTITIFIER}`)
639 |         .text(),
640 |     ).toEqual('success');
641 |   });
642 | 
643 |   it('[console.error REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE]: Should console.error REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE', () => {
644 |     const restoreConsole = mockConsole();
645 |     const wrapper = mount(<Textarea onBlur={() => {}} validationOption={{ locale: 'foobar' }} />);
646 |     const $input = wrapper.find(INPUT);
647 |     $input.simulate('focus');
648 |     $input.simulate('blur');
649 |     expect(console.error).toHaveBeenCalled();
650 |     restoreConsole();
651 |   });
652 | 
653 |   it('[console.error type null]: Should console.error Please provide "type" in validationOption', () => {
654 |     const restoreConsole = mockConsole();
655 |     const wrapper = mount(<Textarea onBlur={() => {}} validationOption={{ type: null }} />);
656 |     const $input = wrapper.find(INPUT);
657 |     $input.simulate('focus');
658 |     $input.simulate('blur');
659 |     expect(console.error).toHaveBeenCalled();
660 |     restoreConsole();
661 |   });
662 | 
663 |   it('[console.error type array]: Should console.error Please provide "type" in validationOption', () => {
664 |     const restoreConsole = mockConsole();
665 |     const wrapper = mount(<Textarea onBlur={() => {}} validationOption={{ type: 'array' }} />);
666 |     const $input = wrapper.find(INPUT);
667 |     $input.simulate('focus');
668 |     $input.simulate('blur');
669 |     expect(console.error).toHaveBeenCalled();
670 |     restoreConsole();
671 |   });
672 | });
673 | 


--------------------------------------------------------------------------------
/src/__tests__/message.js:
--------------------------------------------------------------------------------
  1 | import { expect } from 'chai';
  2 | import message, { getCustomErrorMessage, handleCustomErrorMessage } from '../js/Inputs/message.ts';
  3 | 
  4 | describe('message', () => {
  5 |   describe('textbox', () => {
  6 |     it('[empty]: Should return "foobar cannot be empty"', () => {
  7 |       expect(message['en-US']['textbox']['empty']('foobar')).equal('foobar cannot be empty');
  8 |     });
  9 |     it('[invalid]: Should return "invalid format"', () => {
 10 |       expect(message['en-US']['textbox']['invalid']('')).equal('invalid format');
 11 |     });
 12 |     it('[invalidFormat]: Should return "is not a number"', () => {
 13 |       expect(message['en-US']['textbox']['invalidFormat']('')).equal('is not a number');
 14 |     });
 15 |     it('[inBetween]: Should return "must be 10-20"', () => {
 16 |       expect(message['en-US']['textbox']['inBetween']('')(10)(20)).equal('must be 10-20');
 17 |     });
 18 |     it('[lessThan]: Should return "cannot less than 10"', () => {
 19 |       expect(message['en-US']['textbox']['lessThan']('')(10)).equal('cannot less than 10');
 20 |     });
 21 |     it('[greaterThan]: Should return "cannot greater than 10"', () => {
 22 |       expect(message['en-US']['textbox']['greaterThan']('')(10)).equal('cannot greater than 10');
 23 |     });
 24 |     it('[lengthEqual]: Should return "length must be 10"', () => {
 25 |       expect(message['en-US']['textbox']['lengthEqual']('')(10)).equal('length must be 10');
 26 |     });
 27 |     it('[twoInputsNotEqual]: Should return "two inputs are not equal"', () => {
 28 |       expect(message['en-US']['textbox']['twoInputsNotEqual']('')).equal('two inputs are not equal');
 29 |     });
 30 |   });
 31 |   describe('radiobox', () => {
 32 |     it('[empty]: Should return "Please choose one foobar"', () => {
 33 |       expect(message['en-US']['radiobox']['empty']('foobar')).equal('Please choose one foobar ');
 34 |     });
 35 |   });
 36 |   describe('checkbox', () => {
 37 |     it('[unchecked]: Should return "foobar must be checked"', () => {
 38 |       expect(message['en-US']['checkbox']['unchecked']('foobar')).equal('foobar must be checked');
 39 |     });
 40 |   });
 41 |   describe('select', () => {
 42 |     it('[empty]: Should return "Please select a foobar"', () => {
 43 |       expect(message['en-US']['select']['empty']('foobar')).equal('Please select a foobar ');
 44 |     });
 45 |   });
 46 |   describe('textarea', () => {
 47 |     it('[empty]: Should return "foobar cannot be empty"', () => {
 48 |       expect(message['en-US']['textarea']['empty']('foobar')).equal('foobar cannot be empty');
 49 |     });
 50 |     it('[invalid]: Should return "invalid format"', () => {
 51 |       expect(message['en-US']['textarea']['invalid']('')).equal('invalid format');
 52 |     });
 53 |     it('[invalidFormat]: Should return "is not a number"', () => {
 54 |       expect(message['en-US']['textarea']['invalidFormat']('')).equal('is not a number');
 55 |     });
 56 |     it('[inBetween]: Should return "must be 10-20"', () => {
 57 |       expect(message['en-US']['textarea']['inBetween']('')(10)(20)).equal('must be 10-20');
 58 |     });
 59 |     it('[lessThan]: Should return "cannot less than 10"', () => {
 60 |       expect(message['en-US']['textarea']['lessThan']('')(10)).equal('cannot less than 10');
 61 |     });
 62 |     it('[greaterThan]: Should return "cannot greater than 10"', () => {
 63 |       expect(message['en-US']['textarea']['greaterThan']('')(10)).equal('cannot greater than 10');
 64 |     });
 65 |     it('[lengthEqual]: Should return "length must be 10"', () => {
 66 |       expect(message['en-US']['textarea']['lengthEqual']('')(10)).equal('length must be 10');
 67 |     });
 68 |     it('[twoInputsNotEqual]: Should return "two inputs are not equal"', () => {
 69 |       expect(message['en-US']['textarea']['twoInputsNotEqual']('')).equal('two inputs are not equal');
 70 |     });
 71 |   });
 72 | 
 73 |   describe('handleCustomErrorMessage invalid (customErrorMessage is undefined)', () => {
 74 |     it('[empty]: Should return original message object when customErrorMessage is not valid', () => {
 75 |       const tmpmessage = Object.assign({}, { ...message });
 76 |       // TODO: find a rewire way to handle non-export function
 77 |       // const handleCustomErrorMessage = message.__get__('handleCustomErrorMessage');
 78 |       const newmessage = handleCustomErrorMessage(tmpmessage, window);
 79 |       expect(newmessage['en-US']['textbox']['empty']('foobar')).equal('foobar cannot be empty');
 80 |     });
 81 |   });
 82 | 
 83 |   describe('handleCustomErrorMessage when window is undefined', () => {
 84 |     it('[empty]: Should return original message object when window is undefined', () => {
 85 |       const tmpmessage = Object.assign({}, { ...message });
 86 |       // TODO: find a rewire way to handle non-export function
 87 |       // const handleCustomErrorMessage = message.__get__('handleCustomErrorMessage');
 88 |       const newmessage = handleCustomErrorMessage(tmpmessage, undefined);
 89 |       expect(newmessage['en-US']['textbox']['empty']('foobar')).equal('foobar cannot be empty');
 90 |     });
 91 |   });
 92 | 
 93 |   describe('handleCustomErrorMessage invalid', () => {
 94 |     beforeAll(() => {
 95 |       window.REACT_INPUTS_VALIDATION = {
 96 |         customErrorMessage: {},
 97 |       };
 98 |     });
 99 |     it('[empty]: Should return original message object when customErrorMessage is not valid', () => {
100 |       const tmpmessage = Object.assign({}, { ...message });
101 |       // TODO: find a rewire way to handle non-export function
102 |       // const handleCustomErrorMessage = message.__get__('handleCustomErrorMessage');
103 |       const newmessage = handleCustomErrorMessage(tmpmessage, window);
104 |       expect(newmessage['en-US']['textbox']['empty']('foobar')).equal('foobar cannot be empty');
105 |     });
106 |   });
107 | 
108 |   describe('handleCustomErrorMessage invalid', () => {
109 |     beforeAll(() => {
110 |       window.REACT_INPUTS_VALIDATION = {
111 |         customErrorMessage: {
112 |           'en-US': {},
113 |         },
114 |       };
115 |     });
116 |     it('[empty]: Should return "foobar cannot be empty"', () => {
117 |       const tmpmessage = Object.assign({}, { ...message });
118 |       // TODO: find a rewire way to handle non-export function
119 |       // const handleCustomErrorMessage = message.__get__('handleCustomErrorMessage');
120 |       const newmessage = handleCustomErrorMessage(tmpmessage, window);
121 |       expect(newmessage['en-US']['textbox']['empty']('foobar')).equal('foobar cannot be empty');
122 |     });
123 |   });
124 | 
125 |   describe('handleCustomErrorMessage invalid', () => {
126 |     beforeAll(() => {
127 |       window.REACT_INPUTS_VALIDATION = {
128 |         customErrorMessage: {
129 |           'en-US': { textbox: {} },
130 |         },
131 |       };
132 |     });
133 |     it('[empty]: Should return "foobar cannot be empty"', () => {
134 |       const tmpmessage = Object.assign({}, { ...message });
135 |       // TODO: find a rewire way to handle non-export function
136 |       // const handleCustomErrorMessage = message.__get__('handleCustomErrorMessage');
137 |       const newmessage = handleCustomErrorMessage(tmpmessage, window);
138 |       expect(newmessage['en-US']['textbox']['empty']('foobar')).equal('foobar cannot be empty');
139 |     });
140 |   });
141 | 
142 |   describe('handleCustomErrorMessage valid', () => {
143 |     beforeAll(() => {
144 |       window.REACT_INPUTS_VALIDATION = {
145 |         customErrorMessage: {
146 |           'en-US': {
147 |             textbox: {
148 |               empty: function empty(name) {
149 |                 return name + ' cannot be empty(custom message)';
150 |               },
151 |             },
152 |           },
153 |         },
154 |       };
155 |     });
156 |     it('[empty]: Should return "foobar cannot be empty(custom message)"', () => {
157 |       const tmpmessage = Object.assign({}, { ...message });
158 |       // TODO: find a rewire way to handle non-export function
159 |       // const handleCustomErrorMessage = message.__get__('handleCustomErrorMessage');
160 |       const newmessage = handleCustomErrorMessage(tmpmessage, window);
161 |       expect(newmessage['en-US']['textbox']['empty']('foobar')).equal('foobar cannot be empty(custom message)');
162 |     });
163 |   });
164 | 
165 |   describe('custom locale', () => {
166 |     beforeAll(() => {
167 |       window.REACT_INPUTS_VALIDATION = {
168 |         customErrorMessage: {
169 |           'foo-bar': {
170 |             textbox: {
171 |               empty: function empty(name) {
172 |                 return name + ' cannot be foobar';
173 |               },
174 |             },
175 |           },
176 |         },
177 |       };
178 |     });
179 |     it('[empty]: Should return "foobar cannot be foobar"', () => {
180 |       const tmpmessage = Object.assign({}, { ...message });
181 |       // TODO: find a rewire way to handle non-export function
182 |       // const handleCustomErrorMessage = message.__get__('handleCustomErrorMessage');
183 |       const newmessage = handleCustomErrorMessage(tmpmessage, window);
184 |       expect(newmessage['foo-bar']['textbox']['empty']('foobar')).equal('foobar cannot be foobar');
185 |     });
186 |   });
187 | 
188 |   describe('getCustomErrorMessage valid', () => {
189 |     beforeAll(() => {
190 |       window.REACT_INPUTS_VALIDATION = {
191 |         customErrorMessage: {
192 |           'en-US': {
193 |             textbox: {
194 |               empty: function empty(name) {
195 |                 return name + ' cannot be empty(custom message)';
196 |               },
197 |             },
198 |           },
199 |         },
200 |       };
201 |     });
202 |     it('[empty]: Should return "foobar cannot be empty(custom message)"', () => {
203 |       // TODO: find a rewire way to handle non-export function
204 |       // const getCustomErrorMessage = message.__get__('getCustomErrorMessage');
205 |       const newmessage = getCustomErrorMessage(window.REACT_INPUTS_VALIDATION['customErrorMessage'], message);
206 |       expect(newmessage['en-US']['textbox']['empty']('foobar')).equal('foobar cannot be empty(custom message)');
207 |     });
208 |   });
209 | 
210 |   describe('getCustomErrorMessage invalid', () => {
211 |     beforeAll(() => {
212 |       window.REACT_INPUTS_VALIDATION = {
213 |         customErrorMessage: {},
214 |       };
215 |     });
216 |     it('[empty]: Should return false when customErrorMessage is not valid', () => {
217 |       // TODO: find a rewire way to handle non-export function
218 |       // const getCustomErrorMessage = message.__get__('getCustomErrorMessage');
219 |       const newmessage = getCustomErrorMessage(window.REACT_INPUTS_VALIDATION['customErrorMessage'], message);
220 |       expect(newmessage).equal(false);
221 |     });
222 |   });
223 | });
224 | 


--------------------------------------------------------------------------------
/src/__tests__/utils.js:
--------------------------------------------------------------------------------
 1 | import { expect } from 'chai';
 2 | import utils from '../js/Inputs/utils.ts';
 3 | 
 4 | describe('utils', () => {
 5 |   it('[camelize("foo bar")]: Should return the camelCase: "fooBar"', () => {
 6 |     expect(utils.camelize('foo bar')).equal('fooBar');
 7 |   });
 8 |   it('[toCamelCase("foo bar")(false)]: Should return the camelCase: "fooBar"', () => {
 9 |     expect(utils.toCamelCase('foo bar')()).equal('fooBar');
10 |   });
11 |   it('[toCamelCase("foo bar")(false)]: Should return the camelCase: "fooBar"', () => {
12 |     expect(utils.toCamelCase('foo bar')(false)).equal('fooBar');
13 |   });
14 |   it('[toCamelCase("foo bar")(true)]: Should return the camelCase: "FooBar"', () => {
15 |     expect(utils.toCamelCase('foo bar')(true)).equal('FooBar');
16 |   });
17 |   it('[getRandomId()]: Should return string', () => {
18 |     expect(utils.getRandomId()).to.be.a('string');
19 |   });
20 |   it('[getNumeric("a1")]: Should return 1', () => {
21 |     expect(utils.getNumeric('a1')).equal('1');
22 |   });
23 |   it('[getAlphanumeric("@a1")]: Should return 1', () => {
24 |     expect(utils.getAlphanumeric('@a1')).equal('a1');
25 |   });
26 |   it('[getAlpha("a1")]: Should return 1', () => {
27 |     expect(utils.getAlpha('a1')).equal('a');
28 |   });
29 |   it('[replaceSeparator("0.1", ".", ",")]: Should return 1', () => {
30 |     expect(utils.replaceSeparator('0.1', '.', ',')).equal('0,1');
31 |   });
32 | });
33 | 


--------------------------------------------------------------------------------
/src/__tests__/validator.js:
--------------------------------------------------------------------------------
 1 | import { expect } from 'chai';
 2 | import Validator from '../js/Inputs/validator.ts';
 3 | 
 4 | describe('validator', () => {
 5 |   describe('empty', () => {
 6 |     it('[empty]: Should return true when provide ""', () => {
 7 |       expect(Validator['empty']('')).equal(true);
 8 |     });
 9 |     it('[empty]: Should return false when provide "foo"', () => {
10 |       expect(Validator['empty']('foo')).equal(false);
11 |     });
12 |   });
13 |   describe('number', () => {
14 |     it('[number]: Should return true when provide "1"', () => {
15 |       expect(Validator['number']('1')).equal(true);
16 |     });
17 |     it('[number]: Should return false when provide "foo"', () => {
18 |       expect(Validator['number']('foo')).equal(false);
19 |     });
20 |     it('[number]: Should return true when provide "25" while mix is "20" and max is "30"', () => {
21 |       expect(Validator['number']('25', '20', '30')).equal(true);
22 |     });
23 |     it('[number]: Should return false when provide "10" while mix is "20" and max is "30"', () => {
24 |       expect(Validator['number']('10', '20', '30')).equal(false);
25 |     });
26 |   });
27 |   describe('reg', () => {
28 |     it('[reg]: Should return false(has no erro) when provide valid erc20 address', () => {
29 |       expect(Validator['reg'](/^0x[a-fA-F0-9]{40}$/, '0xa8d6954f80151033aff0c5289191c1ec3a8df139')).equal(false);
30 |     });
31 |     it('[reg]: Should return true(has erro) when provide invalid erc20 address', () => {
32 |       expect(Validator['reg'](/^0x[a-fA-F0-9]{40}$/, 'foobar')).equal(true);
33 |     });
34 |   });
35 | });


--------------------------------------------------------------------------------
/src/css/example.css:
--------------------------------------------------------------------------------
 1 | @import './icon.css';
 2 | 
 3 | body {
 4 |   margin: 0;
 5 |   font-size: 100%;
 6 |   padding: 10px;
 7 | }
 8 | 
 9 | .wrapper {
10 |   padding: 10px;
11 | }
12 | 
13 | .radiobox__wrapper label:before {
14 |   border-color: #000;
15 | }
16 | 
17 | .radiobox__wrapper.checked label:before {
18 |   background-color: #000 !important;
19 | }
20 | 
21 | :global .icon {
22 |   color: #7eb4ef;
23 | }
24 | 
25 | .my-button {
26 |   font-size: 14px;
27 | }
28 | 
29 | .my-button__red {
30 |   color: #fff;
31 |   border-radius: 2px;
32 |   background: #ff5a57;
33 |   padding: 10px;
34 |   margin: 0 auto;
35 |   text-align: center;
36 |   cursor: pointer;
37 | }
38 | 
39 | .sub-section-title-wrapper {
40 |   padding: 2%;
41 | }
42 | 
43 | .sub-section-title {
44 |   background: #7eb4ef;
45 |   color: #fff;
46 |   padding: 30px;
47 |   font-size: 32px;
48 | }
49 | 
50 | .block {
51 |   box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75);
52 |   padding: 2%;
53 | }
54 | 
55 | @media only screen and (max-width: 900px) {
56 |   body {
57 |     padding: 0;
58 |   }
59 | 
60 |   .wrapper {
61 |     padding: 0;
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/css/icon.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: 'icomoon';
  3 |   /*src: url("../font/icomoon.eot");*/
  4 |   /*src: url("../font/icomoon.eot#iefix") format("embedded-opentype"), url("../font/icomoon.ttf") format("truetype"), url("../font/icomoon.woff") format("woff"), url("../font/icomoon.svg#icomoon") format("svg");*/
  5 |   src: url('../font/icomoon.ttf') format('truetype'), url('../font/icomoon.woff') format('woff'), url('../font/icomoon.svg#icomoon') format('svg');
  6 |   font-weight: normal;
  7 |   font-style: normal;
  8 | }
  9 | 
 10 | :global [class^="icon-"],
 11 | :global [class*=" icon-"] {
 12 |   /* use !important to prevent issues with browser extensions that change fonts */
 13 |   font-family: 'icomoon' !important;
 14 |   speak: none;
 15 |   font-style: normal;
 16 |   font-weight: normal;
 17 |   font-variant: normal;
 18 |   text-transform: none;
 19 |   line-height: 1;
 20 |   /* Better Font Rendering =========== */
 21 |   -webkit-font-smoothing: antialiased;
 22 |   -moz-osx-font-smoothing: grayscale;
 23 | }
 24 | 
 25 | :global .icon-access-alarms:before {
 26 |   content: "\e901";
 27 | }
 28 | :global .icon-access-time:before {
 29 |   content: "\e902";
 30 | }
 31 | :global .icon-account-balance-wallet:before {
 32 |   content: "\e903";
 33 | }
 34 | :global .icon-account-balance:before {
 35 |   content: "\e904";
 36 | }
 37 | :global .icon-account-box:before {
 38 |   content: "\e900";
 39 | }
 40 | :global .icon-account-circle:before {
 41 |   content: "\e905";
 42 | }
 43 | :global .icon-add-a-photo:before {
 44 |   content: "\e906";
 45 | }
 46 | :global .icon-add-alarm:before {
 47 |   content: "\e907";
 48 | }
 49 | :global .icon-add-alert:before {
 50 |   content: "\e908";
 51 | }
 52 | :global .icon-add-box:before {
 53 |   content: "\e909";
 54 | }
 55 | :global .icon-add-circle-outline:before {
 56 |   content: "\e90a";
 57 | }
 58 | :global .icon-add-circle:before {
 59 |   content: "\e90b";
 60 | }
 61 | :global .icon-add-location:before {
 62 |   content: "\e90c";
 63 | }
 64 | :global .icon-add-shopping-cart:before {
 65 |   content: "\e90d";
 66 | }
 67 | :global .icon-add-to-photos:before {
 68 |   content: "\e90e";
 69 | }
 70 | :global .icon-add:before {
 71 |   content: "\e90f";
 72 | }
 73 | :global .icon-airport-shuttle:before {
 74 |   content: "\e910";
 75 | }
 76 | :global .icon-alarm:before {
 77 |   content: "\e911";
 78 | }
 79 | :global .icon-announcement:before {
 80 |   content: "\e912";
 81 | }
 82 | :global .icon-apps:before {
 83 |   content: "\e913";
 84 | }
 85 | :global .icon-archive:before {
 86 |   content: "\e914";
 87 | }
 88 | :global .icon-arrow-back:before {
 89 |   content: "\e915";
 90 | }
 91 | :global .icon-arrow-downward:before {
 92 |   content: "\e916";
 93 | }
 94 | :global .icon-arrow-drop-down-36px:before {
 95 |   content: "\e917";
 96 | }
 97 | :global .icon-arrow-drop-down:before {
 98 |   content: "\e918";
 99 | }
100 | :global .icon-arrow-drop-up-36px:before {
101 |   content: "\e919";
102 | }
103 | :global .icon-arrow-drop-up:before {
104 |   content: "\e91a";
105 | }
106 | :global .icon-arrow-forward:before {
107 |   content: "\e91b";
108 | }
109 | :global .icon-arrow-upward:before {
110 |   content: "\e91c";
111 | }
112 | :global .icon-assessment:before {
113 |   content: "\e91d";
114 | }
115 | :global .icon-assignment-ind:before {
116 |   content: "\e91e";
117 | }
118 | :global .icon-assignment-late:before {
119 |   content: "\e91f";
120 | }
121 | :global .icon-assignment-return:before {
122 |   content: "\e920";
123 | }
124 | :global .icon-assignment-returned:before {
125 |   content: "\e921";
126 | }
127 | :global .icon-assignment-turned-in:before {
128 |   content: "\e922";
129 | }
130 | :global .icon-assignment:before {
131 |   content: "\e923";
132 | }
133 | :global .icon-assistant-photo:before {
134 |   content: "\e924";
135 | }
136 | :global .icon-attach-file:before {
137 |   content: "\e925";
138 | }
139 | :global .icon-attachment:before {
140 |   content: "\e926";
141 | }
142 | :global .icon-audiotrack:before {
143 |   content: "\e927";
144 | }
145 | :global .icon-autorenew:before {
146 |   content: "\e928";
147 | }
148 | :global .icon-backspace:before {
149 |   content: "\e929";
150 | }
151 | :global .icon-backup:before {
152 |   content: "\e92a";
153 | }
154 | :global .icon-beenhere:before {
155 |   content: "\e92b";
156 | }
157 | :global .icon-block:before {
158 |   content: "\e92c";
159 | }
160 | :global .icon-book:before {
161 |   content: "\e92d";
162 | }
163 | :global .icon-bookmark-border:before {
164 |   content: "\e92e";
165 | }
166 | :global .icon-bookmark:before {
167 |   content: "\e92f";
168 | }
169 | :global .icon-border-color .path1:before {
170 |   content: "\e930";
171 |   color: rgb(0, 0, 0);
172 | }
173 | :global .icon-border-color .path2:before {
174 |   content: "\e931";
175 |   margin-left: -1em;
176 |   color: rgb(0, 0, 0);
177 |   opacity: 0.36;
178 | }
179 | :global .icon-brush:before {
180 |   content: "\e932";
181 | }
182 | :global .icon-build:before {
183 |   content: "\e933";
184 | }
185 | :global .icon-cached:before {
186 |   content: "\e934";
187 | }
188 | :global .icon-camera-alt:before {
189 |   content: "\e935";
190 | }
191 | :global .icon-camera:before {
192 |   content: "\e936";
193 | }
194 | :global .icon-cancel:before {
195 |   content: "\e937";
196 | }
197 | :global .icon-chat-bubble-outline:before {
198 |   content: "\e938";
199 | }
200 | :global .icon-chat-bubble:before {
201 |   content: "\e939";
202 | }
203 | :global .icon-chat:before {
204 |   content: "\e93a";
205 | }
206 | :global .icon-check-box-outline-blank:before {
207 |   content: "\e93b";
208 | }
209 | :global .icon-check-box:before {
210 |   content: "\e93c";
211 | }
212 | :global .icon-check-circle:before {
213 |   content: "\e93d";
214 | }
215 | :global .icon-check:before {
216 |   content: "\e93e";
217 | }
218 | :global .icon-chevron-left:before {
219 |   content: "\e93f";
220 | }
221 | :global .icon-chevron-right:before {
222 |   content: "\e940";
223 | }
224 | :global .icon-close:before {
225 |   content: "\e941";
226 | }
227 | :global .icon-color-lens:before {
228 |   content: "\e942";
229 | }
230 | :global .icon-colorize:before {
231 |   content: "\e943";
232 | }
233 | :global .icon-confirmation-number:before {
234 |   content: "\e944";
235 | }
236 | :global .icon-content-cut:before {
237 |   content: "\e945";
238 | }
239 | :global .icon-content-paste:before {
240 |   content: "\e946";
241 | }
242 | :global .icon-create:before {
243 |   content: "\e947";
244 | }
245 | :global .icon-do-not-disturb:before {
246 |   content: "\e948";
247 | }
248 | :global .icon-done:before {
249 |   content: "\e949";
250 | }
251 | :global .icon-drafts:before {
252 |   content: "\e94a";
253 | }
254 | :global .icon-edit:before {
255 |   content: "\e94b";
256 | }
257 | :global .icon-equalizer:before {
258 |   content: "\e94c";
259 | }
260 | :global .icon-error-outline:before {
261 |   content: "\e94d";
262 | }
263 | :global .icon-error:before {
264 |   content: "\e94e";
265 | }
266 | :global .icon-exit-to-app:before {
267 |   content: "\e94f";
268 | }
269 | :global .icon-expand-less:before {
270 |   content: "\e950";
271 | }
272 | :global .icon-expand-more:before {
273 |   content: "\e951";
274 | }
275 | :global .icon-extension:before {
276 |   content: "\e952";
277 | }
278 | :global .icon-favorite-border:before {
279 |   content: "\e953";
280 | }
281 | :global .icon-favorite:before {
282 |   content: "\e954";
283 | }
284 | :global .icon-file-download:before {
285 |   content: "\e955";
286 | }
287 | :global .icon-file-upload:before {
288 |   content: "\e956";
289 | }
290 | :global .icon-flip:before {
291 |   content: "\e957";
292 | }
293 | :global .icon-format-align-center:before {
294 |   content: "\e958";
295 | }
296 | :global .icon-format-align-justify:before {
297 |   content: "\e959";
298 | }
299 | :global .icon-format-align-left:before {
300 |   content: "\e95a";
301 | }
302 | :global .icon-format-align-right:before {
303 |   content: "\e95b";
304 | }
305 | :global .icon-format-bold:before {
306 |   content: "\e95c";
307 | }
308 | :global .icon-format-clear:before {
309 |   content: "\e95d";
310 | }
311 | :global .icon-format-color-fill .path1:before {
312 |   content: "\e95e";
313 |   color: rgb(0, 0, 0);
314 | }
315 | :global .icon-format-color-fill .path2:before {
316 |   content: "\e95f";
317 |   margin-left: -1em;
318 |   color: rgb(0, 0, 0);
319 |   opacity: 0.36;
320 | }
321 | :global .icon-format-color-reset:before {
322 |   content: "\e960";
323 | }
324 | :global .icon-format-color-text .path1:before {
325 |   content: "\e961";
326 |   color: rgb(0, 0, 0);
327 |   opacity: 0.36;
328 | }
329 | :global .icon-format-color-text .path2:before {
330 |   content: "\e962";
331 |   margin-left: -1em;
332 |   color: rgb(0, 0, 0);
333 | }
334 | :global .icon-format-indent-decrease:before {
335 |   content: "\e963";
336 | }
337 | :global .icon-format-indent-increase:before {
338 |   content: "\e964";
339 | }
340 | :global .icon-format-italtshe:before {
341 |   content: "\e965";
342 | }
343 | :global .icon-format-line-spacing:before {
344 |   content: "\e966";
345 | }
346 | :global .icon-format-list-bulleted:before {
347 |   content: "\e967";
348 | }
349 | :global .icon-format-list-numbered:before {
350 |   content: "\e968";
351 | }
352 | :global .icon-format-paint:before {
353 |   content: "\e969";
354 | }
355 | :global .icon-format-quote:before {
356 |   content: "\e96a";
357 | }
358 | :global .icon-format-shapes:before {
359 |   content: "\e96b";
360 | }
361 | :global .icon-format-size:before {
362 |   content: "\e96c";
363 | }
364 | :global .icon-format-underlined:before {
365 |   content: "\e96d";
366 | }
367 | :global .icon-forum:before {
368 |   content: "\e96e";
369 | }
370 | :global .icon-grade:before {
371 |   content: "\e96f";
372 | }
373 | :global .icon-group-add:before {
374 |   content: "\e970";
375 | }
376 | :global .icon-group:before {
377 |   content: "\e971";
378 | }
379 | :global .icon-headset-mic:before {
380 |   content: "\e972";
381 | }
382 | :global .icon-help:before {
383 |   content: "\e973";
384 | }
385 | :global .icon-highlight-off:before {
386 |   content: "\e974";
387 | }
388 | :global .icon-home:before {
389 |   content: "\e975";
390 | }
391 | :global .icon-hourglass-empty:before {
392 |   content: "\e976";
393 | }
394 | :global .icon-hourglass-full:before {
395 |   content: "\e977";
396 | }
397 | :global .icon-image:before {
398 |   content: "\e978";
399 | }
400 | :global .icon-info-outline:before {
401 |   content: "\e979";
402 | }
403 | :global .icon-info:before {
404 |   content: "\e97a";
405 | }
406 | :global .icon-insert-chart:before {
407 |   content: "\e97b";
408 | }
409 | :global .icon-insert-drive-file:before {
410 |   content: "\e97c";
411 | }
412 | :global .icon-insert-emottsheon:before {
413 |   content: "\e97d";
414 | }
415 | :global .icon-insert-link:before {
416 |   content: "\e97e";
417 | }
418 | :global .icon-invert-colors-off:before {
419 |   content: "\e97f";
420 | }
421 | :global .icon-invert-colors:before {
422 |   content: "\e980";
423 | }
424 | :global .icon-launch:before {
425 |   content: "\e981";
426 | }
427 | :global .icon-link:before {
428 |   content: "\e982";
429 | }
430 | :global .icon-live-help:before {
431 |   content: "\e983";
432 | }
433 | :global .icon-local-activity:before {
434 |   content: "\e984";
435 | }
436 | :global .icon-local-grocery-store:before {
437 |   content: "\e985";
438 | }
439 | :global .icon-local-mall:before {
440 |   content: "\e986";
441 | }
442 | :global .icon-local-offer:before {
443 |   content: "\e987";
444 | }
445 | :global .icon-local-post-offtshee:before {
446 |   content: "\e988";
447 | }
448 | :global .icon-local-printshop:before {
449 |   content: "\e989";
450 | }
451 | :global .icon-local-see:before {
452 |   content: "\e98a";
453 | }
454 | :global .icon-local-shipping:before {
455 |   content: "\e98b";
456 | }
457 | :global .icon-location-city:before {
458 |   content: "\e98c";
459 | }
460 | :global .icon-location-off:before {
461 |   content: "\e98d";
462 | }
463 | :global .icon-location-on:before {
464 |   content: "\e98e";
465 | }
466 | :global .icon-loop:before {
467 |   content: "\e98f";
468 | }
469 | :global .icon-mail-outline:before {
470 |   content: "\e990";
471 | }
472 | :global .icon-mail:before {
473 |   content: "\e991";
474 | }
475 | :global .icon-menu:before {
476 |   content: "\e992";
477 | }
478 | :global .icon-more-horiz:before {
479 |   content: "\e993";
480 | }
481 | :global .icon-more-vert:before {
482 |   content: "\e994";
483 | }
484 | :global .icon-more:before {
485 |   content: "\e995";
486 | }
487 | :global .icon-move-to-inbox:before {
488 |   content: "\e996";
489 | }
490 | :global .icon-notiftsheations-off:before {
491 |   content: "\e997";
492 | }
493 | :global .icon-notiftsheations:before {
494 |   content: "\e998";
495 | }
496 | :global .icon-open-with:before {
497 |   content: "\e999";
498 | }
499 | :global .icon-palette:before {
500 |   content: "\e99a";
501 | }
502 | :global .icon-people-outline:before {
503 |   content: "\e99b";
504 | }
505 | :global .icon-people:before {
506 |   content: "\e99c";
507 | }
508 | :global .icon-perm-identity:before {
509 |   content: "\e99d";
510 | }
511 | :global .icon-person-add:before {
512 |   content: "\e99e";
513 | }
514 | :global .icon-person-outline:before {
515 |   content: "\e99f";
516 | }
517 | :global .icon-person-pin:before {
518 |   content: "\e9a0";
519 | }
520 | :global .icon-person:before {
521 |   content: "\e9a1";
522 | }
523 | :global .icon-photo:before {
524 |   content: "\e9a2";
525 | }
526 | :global .icon-refresh:before {
527 |   content: "\e9a3";
528 | }
529 | :global .icon-remove-circle-outline:before {
530 |   content: "\e9a4";
531 | }
532 | :global .icon-remove-circle:before {
533 |   content: "\e9a5";
534 | }
535 | :global .icon-school:before {
536 |   content: "\e9a6";
537 | }
538 | :global .icon-search:before {
539 |   content: "\e9a7";
540 | }
541 | :global .icon-send:before {
542 |   content: "\e9a8";
543 | }
544 | :global .icon-sentiment-dissatisfied:before {
545 |   content: "\e9a9";
546 | }
547 | :global .icon-sentiment-neutral:before {
548 |   content: "\e9aa";
549 | }
550 | :global .icon-sentiment-satisfied:before {
551 |   content: "\e9ab";
552 | }
553 | :global .icon-sentiment-very-dissatisfied:before {
554 |   content: "\e9ac";
555 | }
556 | :global .icon-sentiment-very-satisfied:before {
557 |   content: "\e9ad";
558 | }
559 | :global .icon-settings:before {
560 |   content: "\e9ae";
561 | }
562 | :global .icon-share:before {
563 |   content: "\e9af";
564 | }
565 | :global .icon-trash:before {
566 |   content: "\e9b0";
567 | }
568 | :global .icon-visibility-off:before {
569 |   content: "\e9b1";
570 | }
571 | :global .icon-visibility:before {
572 |   content: "\e9b2";
573 | }
574 | :global .icon-volume-down:before {
575 |   content: "\e9b3";
576 | }
577 | 


--------------------------------------------------------------------------------
/src/font/icomoon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/edwardfxiao/react-inputs-validation/fcf30042c76f86a6676f929384d2ba7f725783e9/src/font/icomoon.ttf


--------------------------------------------------------------------------------
/src/font/icomoon.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/edwardfxiao/react-inputs-validation/fcf30042c76f86a6676f929384d2ba7f725783e9/src/font/icomoon.woff


--------------------------------------------------------------------------------
/src/html/layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 | 
 4 | <head>
 5 |     <title>
 6 |         <%= htmlWebpackPlugin.options.title %>
 7 |     </title>
 8 |     <meta charset="utf-8">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
10 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.customStyle %>">
11 | </head>
12 | 
13 | <body>
14 |     <div style="margin: 0 auto;text-align: center;">
15 |         <h1>react-inputs-validation</h1>
16 |         <a href="https://github.com/edwardfxiao/react-inputs-validation">fork me on Github@edwardfxiao</a></div>
17 |     <br/>
18 |     <br/>
19 |     <div class="root" id="root"></div>
20 |     <%= htmlWebpackPlugin.options.customJs %>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/src/js/Inputs/Checkbox.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | const { useState, useEffect, useCallback, useRef, memo } = React;
  3 | import message from './message';
  4 | import { REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE, DEFAULT_LOCALE, WRAPPER_CLASS_IDENTITIFIER, MSG_CLASS_IDENTITIFIER, usePrevious } from './const';
  5 | import utils from './utils';
  6 | import reactInputsValidationCss from './react-inputs-validation.css';
  7 | const TYPE = 'checkbox';
  8 | interface DefaultValidationOption {
  9 |   name?: string;
 10 |   check?: boolean;
 11 |   showMsg?: boolean;
 12 |   required?: boolean;
 13 |   locale?: string;
 14 |   msgOnError?: string;
 15 |   msgOnSuccess?: string;
 16 |   shouldRenderMsgAsHtml?: boolean;
 17 | }
 18 | const getDefaultValidationOption = (obj: DefaultValidationOption) => {
 19 |   let { name, check, required, showMsg, locale, msgOnError, msgOnSuccess, shouldRenderMsgAsHtml } = obj;
 20 |   locale = typeof locale !== 'undefined' ? locale : DEFAULT_LOCALE;
 21 |   name = typeof name !== 'undefined' ? name : '';
 22 |   check = typeof check !== 'undefined' ? check : true;
 23 |   showMsg = typeof showMsg !== 'undefined' ? showMsg : true;
 24 |   required = typeof required !== 'undefined' ? required : true;
 25 |   msgOnSuccess = typeof msgOnSuccess !== 'undefined' ? msgOnSuccess : '';
 26 |   msgOnError = typeof msgOnError !== 'undefined' ? msgOnError : '';
 27 |   shouldRenderMsgAsHtml = typeof shouldRenderMsgAsHtml !== 'undefined' ? shouldRenderMsgAsHtml : false;
 28 |   return {
 29 |     name,
 30 |     check,
 31 |     showMsg,
 32 |     required,
 33 |     locale,
 34 |     msgOnError,
 35 |     msgOnSuccess,
 36 |     shouldRenderMsgAsHtml,
 37 |   };
 38 | };
 39 | interface DefaultAsyncMsgObj {
 40 |   error?: boolean;
 41 |   message?: string;
 42 |   showOnError?: boolean;
 43 |   showOnSuccess?: boolean;
 44 | }
 45 | const getDefaultAsyncObj = (obj: DefaultAsyncMsgObj) => {
 46 |   let { error, message, showOnError, showOnSuccess } = obj;
 47 |   error = typeof error !== 'undefined' ? error : false;
 48 |   message = typeof message !== 'undefined' ? message : '';
 49 |   showOnError = typeof showOnError !== 'undefined' ? showOnError : true;
 50 |   showOnSuccess = typeof showOnSuccess !== 'undefined' ? showOnSuccess : false;
 51 |   return {
 52 |     error,
 53 |     message,
 54 |     showOnError,
 55 |     showOnSuccess,
 56 |   };
 57 | };
 58 | interface Props {
 59 |   attributesWrapper?: React.HTMLAttributes<HTMLButtonElement>;
 60 |   attributesInput?: {
 61 |     id?: string;
 62 |     name?: string;
 63 |   };
 64 |   value?: string | boolean;
 65 |   checked?: boolean;
 66 |   disabled?: boolean;
 67 |   labelHtml?: React.ReactNode;
 68 |   validate?: boolean;
 69 |   onChange: (res: boolean, e: React.ChangeEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
 70 |   onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
 71 |   onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
 72 |   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 73 |   validationOption?: DefaultValidationOption;
 74 |   asyncMsgObj?: DefaultAsyncMsgObj;
 75 |   classNameInput?: string;
 76 |   classNameWrapper?: string;
 77 |   classNameInputBox?: string;
 78 |   classNameInputBoxItem?: string;
 79 |   classNameContainer?: string;
 80 |   customStyleInput?: React.CSSProperties;
 81 |   customStyleWrapper?: React.CSSProperties;
 82 |   customStyleContainer?: React.CSSProperties;
 83 |   customStyleInputBox?: React.CSSProperties;
 84 |   validationCallback?: (res: boolean) => void;
 85 | }
 86 | const component: React.FC<Props> = ({
 87 |   attributesWrapper = {},
 88 |   attributesInput = {},
 89 |   value = '',
 90 |   checked = false,
 91 |   disabled = false,
 92 |   validate = false,
 93 |   labelHtml = null,
 94 |   classNameInput = '',
 95 |   classNameWrapper = '',
 96 |   classNameInputBox = '',
 97 |   classNameInputBoxItem = '',
 98 |   classNameContainer = '',
 99 |   customStyleInput = {},
100 |   customStyleWrapper = {},
101 |   customStyleInputBox = {},
102 |   customStyleContainer = {},
103 |   validationOption = {},
104 |   asyncMsgObj = {},
105 |   onChange = () => {},
106 |   onBlur = null,
107 |   onFocus = null,
108 |   onClick = null,
109 |   validationCallback = null,
110 | }) => {
111 |   const [err, setErr] = useState(false);
112 |   const [msg, setMsg] = useState('');
113 |   const [successMsg, setSuccessMsg] = useState('');
114 |   const [internalChecked, setInternalChecked] = useState(checked);
115 |   const prevInternalChecked = usePrevious(internalChecked);
116 |   const option = getDefaultValidationOption(validationOption);
117 |   const asyncObj = getDefaultAsyncObj(asyncMsgObj);
118 |   const $input = useRef(null);
119 |   const $el: { [key: string]: any } | null = $input;
120 |   const handleOnBlur = useCallback(
121 |     (e: React.FocusEvent<HTMLElement>) => {
122 |       if (onBlur) {
123 |         check();
124 |         onBlur(e);
125 |       }
126 |     },
127 |     [internalChecked, option],
128 |   );
129 |   const handleOnFocus = useCallback(
130 |     (e: React.FocusEvent<HTMLElement>) => {
131 |       if (onFocus) {
132 |         onFocus(e);
133 |       }
134 |     },
135 |     [internalChecked],
136 |   );
137 |   const handleOnClick = useCallback(
138 |     (e: React.MouseEvent<HTMLElement>) => {
139 |       handleOnChange(e);
140 |       if (onClick) {
141 |         onClick(e);
142 |       }
143 |     },
144 |     [err, internalChecked, disabled],
145 |   );
146 |   const handleOnChange = useCallback(
147 |     (e: React.ChangeEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => {
148 |       if (disabled || $el === null) {
149 |         return;
150 |       }
151 |       setInternalChecked(!internalChecked);
152 |       onChange && onChange(!internalChecked, e);
153 |       if (err) {
154 |         setErr(false);
155 |       } else {
156 |         setSuccessMsg('');
157 |       }
158 |     },
159 |     [err, internalChecked, disabled],
160 |   );
161 |   const check = useCallback(() => {
162 |     const { name, check, locale, required, msgOnSuccess } = option;
163 |     if (!check) {
164 |       return;
165 |     }
166 |     if (!message[locale] || !message[locale][TYPE]) {
167 |       console.error(REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE);
168 |       return;
169 |     }
170 |     if (required) {
171 |       const msg = message[locale][TYPE];
172 |       const nameText = name ? name : '';
173 |       if (!internalChecked) {
174 |         handleCheckEnd(true, msg.unchecked(nameText));
175 |         return;
176 |       }
177 |     }
178 |     if (msgOnSuccess) {
179 |       setSuccessMsg(msgOnSuccess);
180 |     }
181 |     handleCheckEnd(false, msgOnSuccess);
182 |   }, [internalChecked, option]);
183 |   const handleCheckEnd = useCallback(
184 |     (err: boolean, message: string) => {
185 |       let msg = message;
186 |       const { msgOnError } = option;
187 |       if (err && msgOnError) {
188 |         msg = msgOnError;
189 |       }
190 |       setErr(err);
191 |       setMsg(msg);
192 |       validationCallback && validationCallback(err);
193 |     },
194 |     [option.msgOnError],
195 |   );
196 |   useEffect(() => {
197 |     if (validate) {
198 |       check();
199 |     }
200 |   }, [validate, internalChecked]);
201 |   useEffect(() => {
202 |     setInternalChecked(checked);
203 |   }, [checked]);
204 |   useEffect(() => {
205 |     if (typeof prevInternalChecked !== 'undefined' && prevInternalChecked !== internalChecked) {
206 |       check();
207 |     }
208 |   }, [prevInternalChecked, internalChecked]);
209 |   useEffect(() => {
210 |     if (asyncObj) {
211 |       if (asyncObj.message) {
212 |         if (asyncObj.showOnError) {
213 |           handleCheckEnd(asyncObj.error, asyncObj.message);
214 |         }
215 |         if (!asyncObj.error && asyncObj.showOnSuccess) {
216 |           setSuccessMsg(asyncObj.message);
217 |         }
218 |       }
219 |     }
220 |   }, [asyncMsgObj]);
221 |   const wrapperClass = `${reactInputsValidationCss['button']} ${WRAPPER_CLASS_IDENTITIFIER} ${classNameWrapper} ${reactInputsValidationCss[`${TYPE}__wrapper`]} ${
222 |     internalChecked && reactInputsValidationCss['checked']
223 |   } ${err && reactInputsValidationCss['error']} ${successMsg !== '' && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;
224 |   const containerClass = `${classNameContainer} ${reactInputsValidationCss[`${TYPE}__container`]} ${internalChecked && reactInputsValidationCss['checked']} ${
225 |     err && reactInputsValidationCss['error']
226 |   } ${successMsg !== '' && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;
227 |   const boxClass = `${classNameInputBox} ${reactInputsValidationCss[`${TYPE}__box`]} ${err && reactInputsValidationCss['error']} ${internalChecked && reactInputsValidationCss['checked']} ${
228 |     successMsg !== '' && !err && reactInputsValidationCss['success']
229 |   } ${disabled && reactInputsValidationCss['disabled']}`;
230 |   const boxItemClass = `${classNameInputBoxItem} ${reactInputsValidationCss['box']}`;
231 |   const labelClass = `${internalChecked && reactInputsValidationCss['checked']} ${err && reactInputsValidationCss['error']} ${successMsg !== '' && !err && reactInputsValidationCss['success']} ${
232 |     disabled && reactInputsValidationCss['disabled']
233 |   }`;
234 |   const errMsgClass = `${MSG_CLASS_IDENTITIFIER} ${reactInputsValidationCss['msg']} ${err && reactInputsValidationCss['error']}`;
235 |   const successMsgClass = `${MSG_CLASS_IDENTITIFIER} ${reactInputsValidationCss['msg']} ${!err && reactInputsValidationCss['success']}`;
236 |   let msgHtml;
237 |   const { showMsg, shouldRenderMsgAsHtml } = option;
238 |   if (showMsg && err && msg) {
239 |     msgHtml = shouldRenderMsgAsHtml ? <div className={errMsgClass} dangerouslySetInnerHTML={{ __html: msg }} /> : <div className={errMsgClass}>{msg}</div>;
240 |   }
241 |   if (showMsg && !err && successMsg !== '') {
242 |     msgHtml = shouldRenderMsgAsHtml ? <div className={successMsgClass} dangerouslySetInnerHTML={{ __html: successMsg }} /> : <div className={successMsgClass}>{successMsg}</div>;
243 |   }
244 |   return (
245 |     <button type="button" ref={$input} className={wrapperClass} style={customStyleWrapper} onClick={handleOnClick} onBlur={handleOnBlur} onFocus={handleOnFocus} {...attributesWrapper}>
246 |       <div className={containerClass} style={customStyleContainer}>
247 |         <div className={boxClass} style={customStyleInputBox}>
248 |           <div className={boxItemClass} />
249 |           <input
250 |             type={TYPE}
251 |             className={reactInputsValidationCss[`${TYPE}__input`]}
252 |             value={String(value)}
253 |             defaultChecked={internalChecked}
254 |             disabled={disabled}
255 |             onChange={handleOnChange}
256 |             {...attributesInput}
257 |           />
258 |         </div>
259 |         <label className={labelClass}>{labelHtml}</label>
260 |       </div>
261 |       {msgHtml}
262 |     </button>
263 |   );
264 | };
265 | export default memo(component);
266 | 


--------------------------------------------------------------------------------
/src/js/Inputs/Radiobox.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | const { useState, useEffect, useCallback, useRef, memo } = React;
  3 | import message from "./message";
  4 | import {
  5 |   REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE,
  6 |   DEFAULT_LOCALE,
  7 |   WRAPPER_CLASS_IDENTITIFIER,
  8 |   OPTION_LIST_ITEM_IDENTITIFIER,
  9 |   MSG_CLASS_IDENTITIFIER,
 10 |   usePrevious,
 11 | } from "./const";
 12 | import utils from "./utils";
 13 | import reactInputsValidationCss from "./react-inputs-validation.css";
 14 | const TYPE = "radiobox";
 15 | interface DefaultValidationOption {
 16 |   name?: string;
 17 |   check?: boolean;
 18 |   showMsg?: boolean;
 19 |   required?: boolean;
 20 |   locale?: string;
 21 |   msgOnError?: string;
 22 |   msgOnSuccess?: string;
 23 |   shouldRenderMsgAsHtml?: boolean;
 24 | }
 25 | const getDefaultValidationOption = (obj: DefaultValidationOption) => {
 26 |   let {
 27 |     name,
 28 |     check,
 29 |     required,
 30 |     showMsg,
 31 |     locale,
 32 |     msgOnError,
 33 |     msgOnSuccess,
 34 |     shouldRenderMsgAsHtml,
 35 |   } = obj;
 36 |   locale = typeof locale !== "undefined" ? locale : DEFAULT_LOCALE;
 37 |   name = typeof name !== "undefined" ? name : "";
 38 |   check = typeof check !== "undefined" ? check : true;
 39 |   showMsg = typeof showMsg !== "undefined" ? showMsg : true;
 40 |   required = typeof required !== "undefined" ? required : true;
 41 |   msgOnSuccess = typeof msgOnSuccess !== "undefined" ? msgOnSuccess : "";
 42 |   msgOnError = typeof msgOnError !== "undefined" ? msgOnError : "";
 43 |   shouldRenderMsgAsHtml = typeof shouldRenderMsgAsHtml !== 'undefined' ? shouldRenderMsgAsHtml : false;
 44 |   return {
 45 |     name,
 46 |     check,
 47 |     showMsg,
 48 |     required,
 49 |     locale,
 50 |     msgOnError,
 51 |     msgOnSuccess,
 52 |     shouldRenderMsgAsHtml,
 53 |   };
 54 | };
 55 | interface DefaultAsyncMsgObj {
 56 |   error?: boolean;
 57 |   message?: string;
 58 |   showOnError?: boolean;
 59 |   showOnSuccess?: boolean;
 60 | }
 61 | const getDefaultAsyncObj = (obj: DefaultAsyncMsgObj) => {
 62 |   let { error, message, showOnError, showOnSuccess } = obj;
 63 |   error = typeof error !== "undefined" ? error : false;
 64 |   message = typeof message !== "undefined" ? message : "";
 65 |   showOnError = typeof showOnError !== "undefined" ? showOnError : true;
 66 |   showOnSuccess = typeof showOnSuccess !== "undefined" ? showOnSuccess : false;
 67 |   return {
 68 |     error,
 69 |     message,
 70 |     showOnError,
 71 |     showOnSuccess,
 72 |   };
 73 | };
 74 | export const isValidValue = (list: OptionListItem[], value: any) => {
 75 |   let res = false;
 76 |   if (list.length) {
 77 |     for (let i = 0; i < list.length; i += 1) {
 78 |       if (list[i].id === value) {
 79 |         res = true;
 80 |         break;
 81 |       }
 82 |     }
 83 |   }
 84 |   return res;
 85 | };
 86 | interface OptionListItem {
 87 |   id: string;
 88 |   name: string;
 89 | }
 90 | interface AttributesInput {
 91 |   id?: string;
 92 |   name?: string;
 93 | }
 94 | interface Props {
 95 |   attributesWrapper: React.HTMLAttributes<HTMLDivElement>;
 96 |   attributesInputs: AttributesInput[];
 97 |   value?: string | number;
 98 |   disabled?: boolean;
 99 |   validate?: boolean;
100 |   optionList?: OptionListItem[];
101 |   onChange: (res: string, e: React.ChangeEvent<HTMLElement>) => void;
102 |   onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
103 |   onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
104 |   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
105 |   validationOption?: DefaultValidationOption;
106 |   asyncMsgObj?: DefaultAsyncMsgObj;
107 |   classNameWrapper?: string;
108 |   classNameInput?: string;
109 |   classNameContainer?: string;
110 |   classNameOptionListItem?: string;
111 |   customStyleWrapper?: React.CSSProperties;
112 |   customStyleContainer?: React.CSSProperties;
113 |   customStyleInput?: React.CSSProperties;
114 |   customStyleOptionListItem?: React.CSSProperties;
115 |   validationCallback?: (res: boolean) => void;
116 | }
117 | const component: React.FC<Props> = ({
118 |   attributesWrapper = {},
119 |   attributesInputs = [],
120 |   value = "",
121 |   disabled = false,
122 |   validate = false,
123 |   optionList = [],
124 |   classNameWrapper = "",
125 |   classNameInput = "",
126 |   classNameContainer = "",
127 |   classNameOptionListItem = "",
128 |   customStyleWrapper = {},
129 |   customStyleContainer = {},
130 |   customStyleInput = {},
131 |   customStyleOptionListItem = {},
132 |   validationOption = {},
133 |   asyncMsgObj = {},
134 |   onChange = () => {},
135 |   onBlur = null,
136 |   onFocus = null,
137 |   onClick = null,
138 |   validationCallback = null,
139 | }) => {
140 |   const [err, setErr] = useState(false);
141 |   const [msg, setMsg] = useState("");
142 |   const [successMsg, setSuccessMsg] = useState("");
143 |   const [internalValue, setInternalValue] = useState(String(value));
144 |   const prevInternalValue = usePrevious(internalValue);
145 |   const option = getDefaultValidationOption(validationOption);
146 |   const asyncObj = getDefaultAsyncObj(asyncMsgObj);
147 |   const $input = useRef(null);
148 |   const $el: { [key: string]: any } | null = $input;
149 |   const handleOnBlur = useCallback(
150 |     (e: React.FocusEvent<HTMLElement>) => {
151 |       if (onBlur && !disabled) {
152 |         check();
153 |         onBlur(e);
154 |       }
155 |     },
156 |     [internalValue, option, disabled]
157 |   );
158 |   const handleOnFocus = useCallback((e: React.FocusEvent<HTMLElement>) => {
159 |     if (onFocus) {
160 |       onFocus(e);
161 |     }
162 |   }, []);
163 |   const handleOnClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
164 |     if (onClick) {
165 |       onClick(e);
166 |     }
167 |   }, []);
168 |   const handleOnChange = useCallback(
169 |     (val: string, e: React.ChangeEvent<HTMLElement>) => {
170 |       if (disabled || $el === null) {
171 |         return;
172 |       }
173 |       setInternalValue(val);
174 |       onChange && onChange(val, e);
175 |     },
176 |     [disabled]
177 |   );
178 |   const check = useCallback(() => {
179 |     const { name, check, locale, required, msgOnSuccess } = option;
180 |     if (!check) {
181 |       return;
182 |     }
183 |     if (!message[locale] || !message[locale][TYPE]) {
184 |       console.error(REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE);
185 |       return;
186 |     }
187 |     if (required) {
188 |       const msg = message[locale][TYPE];
189 |       const nameText = name ? name : "";
190 |       if (!isValidValue(optionList, internalValue)) {
191 |         handleCheckEnd(true, msg.empty(nameText));
192 |         return;
193 |       }
194 |     }
195 |     if (msgOnSuccess) {
196 |       setSuccessMsg(msgOnSuccess);
197 |     }
198 |     handleCheckEnd(false, msgOnSuccess);
199 |   }, [internalValue, option]);
200 |   const handleCheckEnd = useCallback(
201 |     (err: boolean, message: string) => {
202 |       let msg = message;
203 |       const { msgOnError } = option;
204 |       if (err && msgOnError) {
205 |         msg = msgOnError;
206 |       }
207 |       setErr(err);
208 |       setMsg(msg);
209 |       validationCallback && validationCallback(err);
210 |     },
211 |     [option.msgOnError]
212 |   );
213 |   useEffect(() => {
214 |     if (validate) {
215 |       check();
216 |     }
217 |   }, [validate]);
218 |   useEffect(() => {
219 |     if (internalValue && isValidValue(optionList, internalValue)) {
220 |       setErr(false);
221 |     } else {
222 |       setSuccessMsg("");
223 |     }
224 |   }, [internalValue]);
225 |   useEffect(() => {
226 |     setInternalValue(String(value));
227 |   }, [value]);
228 |   useEffect(() => {
229 |     if (
230 |       typeof prevInternalValue !== "undefined" &&
231 |       prevInternalValue !== internalValue
232 |     ) {
233 |       check();
234 |     }
235 |   }, [prevInternalValue, internalValue]);
236 |   useEffect(() => {
237 |     if (asyncObj) {
238 |       if (asyncObj.message) {
239 |         if (asyncObj.showOnError) {
240 |           handleCheckEnd(asyncObj.error, asyncObj.message);
241 |         }
242 |         if (!asyncObj.error && asyncObj.showOnSuccess) {
243 |           setSuccessMsg(asyncObj.message);
244 |         }
245 |       }
246 |     }
247 |   }, [asyncMsgObj]);
248 |   const wrapperClass = `${WRAPPER_CLASS_IDENTITIFIER} ${classNameWrapper} ${
249 |     err && reactInputsValidationCss["error"]
250 |   } ${successMsg !== "" && !err && reactInputsValidationCss["success"]} ${
251 |     reactInputsValidationCss[`${TYPE}__wrapper`]
252 |   } ${disabled && reactInputsValidationCss["disabled"]}`;
253 |   const containerClass = `${classNameContainer} ${
254 |     err && reactInputsValidationCss["error"]
255 |   } ${successMsg !== "" && !err && reactInputsValidationCss["success"]} ${
256 |     reactInputsValidationCss[`${TYPE}__container`]
257 |   } ${disabled && reactInputsValidationCss["disabled"]}`;
258 |   const inputClass = `${classNameInput} ${
259 |     err && reactInputsValidationCss["error"]
260 |   } ${successMsg !== "" && !err && reactInputsValidationCss["success"]} ${
261 |     reactInputsValidationCss[`${TYPE}__input`]
262 |   } ${disabled && reactInputsValidationCss["disabled"]}`;
263 |   const labelClass = `${err && reactInputsValidationCss["error"]} ${
264 |     successMsg !== "" && !err && reactInputsValidationCss["success"]
265 |   } ${reactInputsValidationCss[`${TYPE}__label`]} ${
266 |     disabled && reactInputsValidationCss["disabled"]
267 |   }`;
268 |   const optionListItemClass = `${
269 |     reactInputsValidationCss["button"]
270 |   } ${OPTION_LIST_ITEM_IDENTITIFIER} ${classNameOptionListItem} ${
271 |     err && reactInputsValidationCss["error"]
272 |   } ${successMsg !== "" && !err && reactInputsValidationCss["success"]} ${
273 |     reactInputsValidationCss[`${TYPE}__item`]
274 |   } ${disabled && reactInputsValidationCss["disabled"]}`;
275 |   const errMsgClass = `${MSG_CLASS_IDENTITIFIER} ${
276 |     reactInputsValidationCss["msg"]
277 |   } ${err && reactInputsValidationCss["error"]}`;
278 |   const successMsgClass = `${MSG_CLASS_IDENTITIFIER} ${
279 |     reactInputsValidationCss["msg"]
280 |   } ${!err && reactInputsValidationCss["success"]}`;
281 |   let msgHtml;
282 |   const { showMsg, shouldRenderMsgAsHtml } = option;
283 |   if (showMsg && err && msg) {
284 |     msgHtml = shouldRenderMsgAsHtml ? <div className={errMsgClass} dangerouslySetInnerHTML={{ __html: msg }} /> : <div className={errMsgClass}>{msg}</div>;
285 |   }
286 |   if (showMsg && !err && successMsg !== '') {
287 |     msgHtml = shouldRenderMsgAsHtml ? <div className={successMsgClass} dangerouslySetInnerHTML={{ __html: successMsg }} /> : <div className={successMsgClass}>{successMsg}</div>;
288 |   }
289 |   let optionHtml;
290 |   if (optionList.length) {
291 |     optionHtml = optionList.map((i, k) => {
292 |       const checked = String(i.id) === String(internalValue) ? true : false;
293 |       return (
294 |         <Option
295 |           key={k}
296 |           checked={checked}
297 |           id={`react-inputs-validation__radiobox_option-${i.id}`}
298 |           item={i}
299 |           inputClass={inputClass}
300 |           value={internalValue}
301 |           disabled={disabled}
302 |           optionListItemClass={optionListItemClass}
303 |           customStyleOptionListItem={customStyleOptionListItem}
304 |           customStyleInput={customStyleInput}
305 |           labelClass={labelClass}
306 |           onChange={handleOnChange}
307 |           attributesInput={attributesInputs[k] ? attributesInputs[k] : {}}
308 |         />
309 |       );
310 |     });
311 |   }
312 |   return (
313 |     <div
314 |       ref={$input}
315 |       className={wrapperClass}
316 |       style={customStyleWrapper}
317 |       onClick={handleOnClick}
318 |       onBlur={handleOnBlur}
319 |       onFocus={handleOnFocus}
320 |       {...attributesWrapper}
321 |     >
322 |       <div className={containerClass} style={customStyleContainer}>
323 |         {optionHtml}
324 |       </div>
325 |       {msgHtml}
326 |     </div>
327 |   );
328 | };
329 | interface OptionProps {
330 |   checked?: boolean;
331 |   id?: string;
332 |   optionListItemClass?: string;
333 |   labelClass?: string;
334 |   inputClass?: string;
335 |   value?: string | number;
336 |   disabled?: boolean;
337 |   item?: OptionListItem;
338 |   customStyleOptionListItem?: object;
339 |   customStyleInput?: object;
340 |   attributesInput: AttributesInput;
341 |   onChange?: (res: string, e: React.ChangeEvent<HTMLElement>) => void;
342 | }
343 | export const Option: React.FC<OptionProps> = memo(
344 |   ({
345 |     checked = false,
346 |     id = "",
347 |     optionListItemClass = "",
348 |     labelClass = "",
349 |     inputClass = "",
350 |     value = "",
351 |     disabled = false,
352 |     item = { id: "", name: "" },
353 |     customStyleOptionListItem = {},
354 |     customStyleInput = {},
355 |     attributesInput = {},
356 |     onChange = () => {},
357 |   }) => {
358 |     const handleOnChange = useCallback(
359 |       (e) => {
360 |         onChange(item.id, e);
361 |       },
362 |       [item, disabled]
363 |     );
364 |     return (
365 |       <button
366 |         type="button"
367 |         className={optionListItemClass}
368 |         style={customStyleOptionListItem}
369 |         onClick={handleOnChange}
370 |       >
371 |         <input
372 |           id={id}
373 |           type="radio"
374 |           value={value}
375 |           checked={checked}
376 |           disabled={disabled}
377 |           className={
378 |             checked
379 |               ? `${reactInputsValidationCss["checked"]} ${inputClass}`
380 |               : `${inputClass}`
381 |           }
382 |           onChange={handleOnChange}
383 |           style={customStyleInput}
384 |           {...attributesInput}
385 |         />
386 |         <label
387 |           htmlFor={attributesInput.id ? attributesInput.id : id}
388 |           className={
389 |             checked
390 |               ? `${reactInputsValidationCss["checked"]} ${labelClass}`
391 |               : `${labelClass}`
392 |           }
393 |         >
394 |           {item.name}
395 |         </label>
396 |       </button>
397 |     );
398 |   }
399 | );
400 | export default memo(component);
401 | 


--------------------------------------------------------------------------------
/src/js/Inputs/Textarea.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | const { useState, useEffect, useCallback, useRef, memo } = React;
  3 | import message from './message';
  4 | import validator from './validator';
  5 | import utils from './utils';
  6 | import { REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE, DEFAULT_LOCALE, MSG_CLASS_IDENTITIFIER, usePrevious } from './const';
  7 | import reactInputsValidationCss from './react-inputs-validation.css';
  8 | const TYPE = 'textarea';
  9 | const VALIDATE_OPTION_TYPE_LIST = ['string'];
 10 | interface DefaultValidationOption {
 11 |   locale?: string;
 12 |   reg?: string;
 13 |   min?: number;
 14 |   max?: number;
 15 |   type?: string;
 16 |   name?: string;
 17 |   check?: boolean;
 18 |   showMsg?: boolean;
 19 |   length?: number;
 20 |   regMsg?: string;
 21 |   required?: boolean;
 22 |   msgOnError?: string;
 23 |   msgOnSuccess?: string;
 24 |   customFunc?: Function | undefined;
 25 |   shouldRenderMsgAsHtml?: boolean;
 26 | }
 27 | const getDefaultValidationOption = (obj: DefaultValidationOption) => {
 28 |   let { reg, min, max, type, name, check, length, regMsg, required, showMsg, locale, msgOnError, msgOnSuccess, customFunc, shouldRenderMsgAsHtml } = obj;
 29 |   locale = typeof locale !== 'undefined' ? locale : DEFAULT_LOCALE;
 30 |   reg = typeof reg !== 'undefined' ? reg : '';
 31 |   min = typeof min !== 'undefined' ? min : 0;
 32 |   max = typeof max !== 'undefined' ? max : 0;
 33 |   type = typeof type !== 'undefined' ? type : 'string';
 34 |   name = typeof name !== 'undefined' ? name : '';
 35 |   check = typeof check !== 'undefined' ? check : true;
 36 |   showMsg = typeof showMsg !== 'undefined' ? showMsg : true;
 37 |   length = typeof length !== 'undefined' ? length : 0;
 38 |   regMsg = typeof regMsg !== 'undefined' ? regMsg : '';
 39 |   required = typeof required !== 'undefined' ? required : true;
 40 |   msgOnError = typeof msgOnError !== 'undefined' ? msgOnError : '';
 41 |   msgOnSuccess = typeof msgOnSuccess !== 'undefined' ? msgOnSuccess : '';
 42 |   customFunc = typeof customFunc !== 'undefined' ? customFunc : undefined;
 43 |   shouldRenderMsgAsHtml = typeof shouldRenderMsgAsHtml !== 'undefined' ? shouldRenderMsgAsHtml : false;
 44 |   return {
 45 |     reg,
 46 |     min,
 47 |     max,
 48 |     type,
 49 |     name,
 50 |     check,
 51 |     length,
 52 |     regMsg,
 53 |     locale,
 54 |     required,
 55 |     showMsg,
 56 |     msgOnError,
 57 |     msgOnSuccess,
 58 |     customFunc,
 59 |     shouldRenderMsgAsHtml,
 60 |   };
 61 | };
 62 | interface DefaultAsyncMsgObj {
 63 |   error?: boolean;
 64 |   message?: string;
 65 |   showOnError?: boolean;
 66 |   showOnSuccess?: boolean;
 67 | }
 68 | const getDefaultAsyncObj = (obj: DefaultAsyncMsgObj) => {
 69 |   let { error, message, showOnError, showOnSuccess } = obj;
 70 |   error = typeof error !== 'undefined' ? error : false;
 71 |   message = typeof message !== 'undefined' ? message : '';
 72 |   showOnError = typeof showOnError !== 'undefined' ? showOnError : true;
 73 |   showOnSuccess = typeof showOnSuccess !== 'undefined' ? showOnSuccess : false;
 74 |   return {
 75 |     error,
 76 |     message,
 77 |     showOnError,
 78 |     showOnSuccess,
 79 |   };
 80 | };
 81 | interface AttributesInputObj {
 82 |   id?: string;
 83 |   name?: string;
 84 |   type?: string;
 85 |   placeholder?: string;
 86 |   maxLength?: number;
 87 | }
 88 | interface Props {
 89 |   attributesWrapper?: React.HTMLAttributes<HTMLDivElement>;
 90 |   attributesInput?: AttributesInputObj;
 91 |   value?: string;
 92 |   disabled?: boolean;
 93 |   validate?: boolean;
 94 |   classNameInput?: string;
 95 |   classNameWrapper?: string;
 96 |   classNameContainer?: string;
 97 |   customStyleInput?: React.CSSProperties;
 98 |   customStyleWrapper?: React.CSSProperties;
 99 |   customStyleContainer?: React.CSSProperties;
100 |   validationOption?: DefaultValidationOption;
101 |   asyncMsgObj?: DefaultAsyncMsgObj;
102 |   onChange: (res: string, e: React.ChangeEvent<HTMLTextAreaElement>) => void;
103 |   onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
104 |   onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
105 |   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
106 |   onKeyUp?: (e: React.KeyboardEvent<HTMLElement>) => void;
107 |   validationCallback?: (res: boolean) => void;
108 | }
109 | 
110 | const component: React.FC<Props> = ({
111 |   attributesWrapper = {},
112 |   attributesInput = {},
113 |   value = '',
114 |   disabled = false,
115 |   validate = false,
116 |   classNameInput = '',
117 |   classNameWrapper = '',
118 |   classNameContainer = '',
119 |   customStyleInput = {},
120 |   customStyleWrapper = {},
121 |   customStyleContainer = {},
122 |   validationOption = {},
123 |   asyncMsgObj = {},
124 |   onChange = () => {},
125 |   onBlur = null,
126 |   onFocus = null,
127 |   onClick = null,
128 |   onKeyUp = null,
129 |   validationCallback = null,
130 | }) => {
131 |   const [err, setErr] = useState(false);
132 |   const [msg, setMsg] = useState('');
133 |   const [successMsg, setSuccessMsg] = useState('');
134 |   const [internalValue, setInternalValue] = useState(String(value));
135 |   const prevInternalValue = usePrevious(internalValue);
136 |   const option = getDefaultValidationOption(validationOption);
137 |   const asyncObj = getDefaultAsyncObj(asyncMsgObj);
138 |   const $input = useRef(null);
139 |   const $el: { [key: string]: any } | null = $input;
140 |   const handleOnBlur = useCallback(
141 |     (e: React.FocusEvent<HTMLElement>) => {
142 |       if (onBlur) {
143 |         check();
144 |         onBlur(e);
145 |       }
146 |     },
147 |     [internalValue, option],
148 |   );
149 |   const handleOnFocus = useCallback((e: React.FocusEvent<HTMLElement>) => {
150 |     if (onFocus) {
151 |       onFocus(e);
152 |     }
153 |   }, []);
154 |   const handleOnClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
155 |     if (onClick) {
156 |       onClick(e);
157 |     }
158 |   }, []);
159 |   const handleOnKeyUp = useCallback(
160 |     (e: React.KeyboardEvent<HTMLElement>) => {
161 |       if (onKeyUp) {
162 |         const { keyCode } = e;
163 |         const keyCodeTab = 9;
164 |         if (keyCode !== keyCodeTab) {
165 |           check();
166 |         }
167 |         onKeyUp(e);
168 |       }
169 |     },
170 |     [internalValue, option],
171 |   );
172 |   const handleOnChange = useCallback(
173 |     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
174 |       if (disabled || $el === null) {
175 |         return;
176 |       }
177 |       const v = $el.current.value;
178 |       if (typeof attributesInput.maxLength !== 'undefined') {
179 |         if ((typeof attributesInput.maxLength === 'string' && attributesInput.maxLength !== '') || (typeof attributesInput.maxLength === 'number' && attributesInput.maxLength !== 0)) {
180 |           if (v.length > Number(attributesInput.maxLength)) {
181 |             return;
182 |           }
183 |         }
184 |       }
185 |       setInternalValue(v);
186 |       onChange && onChange(v, e);
187 |       if (err) {
188 |         setErr(false);
189 |       } else {
190 |         setSuccessMsg('');
191 |       }
192 |     },
193 |     [err],
194 |   );
195 |   const check = useCallback(async () => {
196 |     const { reg, min, max, type, name, check, length, regMsg, locale, required, msgOnSuccess, customFunc } = option;
197 |     if (!check) {
198 |       return;
199 |     }
200 |     if (type) {
201 |       if (VALIDATE_OPTION_TYPE_LIST.indexOf(type) !== -1) {
202 |         if (!message[locale] || !message[locale][TYPE]) {
203 |           console.error(REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE);
204 |           return;
205 |         }
206 |         const msg = message[locale][TYPE];
207 |         const nameText = name ? name : '';
208 |         if (required) {
209 |           if (validator.empty(internalValue)) {
210 |             handleCheckEnd(true, msg.empty(nameText));
211 |             return;
212 |           }
213 |         }
214 |         if (String(internalValue) !== '') {
215 |           if (reg) {
216 |             if (validator['reg'](reg, internalValue)) {
217 |               handleCheckEnd(true, regMsg !== '' ? regMsg : msg.invalid(nameText));
218 |               return;
219 |             }
220 |           }
221 |           if (min || max) {
222 |             if (min && max) {
223 |               if (String(internalValue).length < min || String(internalValue).length > max) {
224 |                 handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
225 |                 return;
226 |               }
227 |             } else {
228 |               if (min) {
229 |                 if (String(internalValue).length < min) {
230 |                   handleCheckEnd(true, msg.lessThan(nameText)(min));
231 |                   return;
232 |                 }
233 |               }
234 |               if (max) {
235 |                 if (String(internalValue).length > max) {
236 |                   handleCheckEnd(true, msg.greaterThan(nameText)(max));
237 |                   return;
238 |                 }
239 |               }
240 |             }
241 |           }
242 |           if (length) {
243 |             if (String(internalValue).length !== length) {
244 |               handleCheckEnd(true, msg.lengthEqual(nameText)(length));
245 |               return;
246 |             }
247 |           }
248 |         }
249 |         if (customFunc && typeof customFunc === 'function') {
250 |           const customFuncResult = await customFunc(internalValue);
251 |           /* istanbul ignore next because of async problem */
252 |           if (typeof customFuncResult === 'object') {
253 |             if (typeof customFuncResult.error === 'boolean' && typeof customFuncResult.message === 'string') {
254 |               if (customFuncResult.error === false && customFuncResult.showOnSuccess === true) {
255 |                 setSuccessMsg(customFuncResult.message);
256 |               }
257 |               handleCheckEnd(customFuncResult.error, customFuncResult.message, true);
258 |             }
259 |             return;
260 |           }
261 |           /* istanbul ignore next because of async problem */
262 |           if (customFuncResult !== true) {
263 |             handleCheckEnd(true, customFuncResult, true);
264 |             return;
265 |           }
266 |         }
267 |         if (msgOnSuccess) {
268 |           setSuccessMsg(msgOnSuccess);
269 |         }
270 |         handleCheckEnd(false, msgOnSuccess);
271 |       } else {
272 |         console.error(`The valid ${utils.toCamelCase(TYPE)(true)} "type" options in validationOption are [${VALIDATE_OPTION_TYPE_LIST.map(i => i)}]`);
273 |       }
274 |     } else {
275 |       console.error('Please provide "type" in validationOption');
276 |     }
277 |   }, [internalValue, option]);
278 |   const handleCheckEnd = useCallback(
279 |     (err: boolean, message: string, fromCustomFunc: boolean = false) => {
280 |       let msg = message;
281 |       const { msgOnError } = option;
282 |       if (err && msgOnError && !fromCustomFunc) {
283 |         msg = msgOnError;
284 |       }
285 |       setErr(err);
286 |       setMsg(msg);
287 |       validationCallback && validationCallback(err);
288 |     },
289 |     [option.msgOnError],
290 |   );
291 |   useEffect(() => {
292 |     if (validate) {
293 |       check();
294 |     }
295 |   }, [validate]);
296 |   useEffect(() => {
297 |     setInternalValue(String(value));
298 |   }, [value]);
299 |   useEffect(() => {
300 |     /* istanbul ignore next because of https://github.com/airbnb/enzyme/issues/441 && https://github.com/airbnb/enzyme/blob/master/docs/future.md */
301 |     if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
302 |       if (option.customFunc && onKeyUp) {
303 |         check();
304 |       }
305 |     }
306 |   }, [internalValue]);
307 |   useEffect(() => {
308 |     if (asyncObj) {
309 |       if (asyncObj.message) {
310 |         if (asyncObj.showOnError) {
311 |           handleCheckEnd(asyncObj.error, asyncObj.message);
312 |         }
313 |         if (!asyncObj.error && asyncObj.showOnSuccess) {
314 |           setSuccessMsg(asyncObj.message);
315 |         }
316 |       }
317 |     }
318 |   }, [asyncMsgObj]);
319 |   const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss[`${TYPE}__wrapper`]} ${err && reactInputsValidationCss['error']} ${
320 |     successMsg !== '' && !err && reactInputsValidationCss['success']
321 |   } ${disabled && reactInputsValidationCss['disabled']}`;
322 |   const containerClass = `${classNameContainer} ${reactInputsValidationCss[`${TYPE}__container`]} ${err && reactInputsValidationCss['error']} ${
323 |     successMsg !== '' && !err && reactInputsValidationCss['success']
324 |   } ${disabled && reactInputsValidationCss['disabled']}`;
325 |   const inputClass = `${classNameInput} ${reactInputsValidationCss[`${TYPE}__input`]} ${err && reactInputsValidationCss['error']} ${successMsg !== '' && !err && reactInputsValidationCss['success']} ${
326 |     disabled && reactInputsValidationCss['disabled']
327 |   }`;
328 |   const errMsgClass = `${MSG_CLASS_IDENTITIFIER} ${reactInputsValidationCss['msg']} ${err && reactInputsValidationCss['error']}`;
329 |   const successMsgClass = `${MSG_CLASS_IDENTITIFIER} ${reactInputsValidationCss['msg']} ${!err && reactInputsValidationCss['success']}`;
330 |   let msgHtml;
331 |   const { showMsg, shouldRenderMsgAsHtml } = option;
332 |   if (showMsg && err && msg) {
333 |     msgHtml = shouldRenderMsgAsHtml ? <div className={errMsgClass} dangerouslySetInnerHTML={{ __html: msg }} /> : <div className={errMsgClass}>{msg}</div>;
334 |   }
335 |   if (showMsg && !err && successMsg !== '') {
336 |     msgHtml = shouldRenderMsgAsHtml ? <div className={successMsgClass} dangerouslySetInnerHTML={{ __html: successMsg }} /> : <div className={successMsgClass}>{successMsg}</div>;
337 |   }
338 |   return (
339 |     <div className={wrapperClass} style={customStyleWrapper} {...attributesWrapper}>
340 |       <div className={containerClass} style={customStyleContainer}>
341 |         <textarea
342 |           value={internalValue}
343 |           disabled={disabled}
344 |           onBlur={handleOnBlur}
345 |           onKeyUp={handleOnKeyUp}
346 |           onFocus={handleOnFocus}
347 |           onClick={handleOnClick}
348 |           className={inputClass}
349 |           onChange={handleOnChange}
350 |           style={customStyleInput}
351 |           ref={$input}
352 |           {...attributesInput}
353 |         />
354 |       </div>
355 |       {msgHtml}
356 |     </div>
357 |   );
358 | };
359 | export default memo(component);
360 | 


--------------------------------------------------------------------------------
/src/js/Inputs/Textbox.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | const { useState, useEffect, useCallback, useRef, memo } = React;
  3 | import message from './message';
  4 | import validator from './validator';
  5 | import utils from './utils';
  6 | import { REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE, DEFAULT_LOCALE, MSG_CLASS_IDENTITIFIER, usePrevious } from './const';
  7 | import reactInputsValidationCss from './react-inputs-validation.css';
  8 | const TYPE = 'textbox';
  9 | const VALIDATE_OPTION_TYPE_LIST = ['string', 'number', 'alphanumeric', 'alpha'];
 10 | const VALIDATE_NUMBER_TYPE_LIST = ['decimal', 'int', 'price'];
 11 | interface DefaultValidationOption {
 12 |   locale?: string;
 13 |   reg?: string;
 14 |   min?: number;
 15 |   max?: number;
 16 |   type?: string;
 17 |   numberType?: string;
 18 |   mantissa?: number;
 19 |   decimalSeparator?: string;
 20 |   name?: string;
 21 |   check?: boolean;
 22 |   showMsg?: boolean;
 23 |   length?: number;
 24 |   regMsg?: string;
 25 |   compare?: string;
 26 |   required?: boolean;
 27 |   msgOnError?: string;
 28 |   msgOnSuccess?: string;
 29 |   customFunc?: Function | undefined;
 30 |   shouldRenderMsgAsHtml?: boolean;
 31 | }
 32 | const getDefaultValidationOption = (obj: DefaultValidationOption) => {
 33 |   let { reg, min, max, type, numberType, mantissa, decimalSeparator, name, check, length, regMsg, compare, required, showMsg, locale, msgOnError, msgOnSuccess, customFunc, shouldRenderMsgAsHtml } =
 34 |     obj;
 35 |   locale = typeof locale !== 'undefined' ? locale : DEFAULT_LOCALE;
 36 |   reg = typeof reg !== 'undefined' ? reg : '';
 37 |   min = typeof min !== 'undefined' ? min : 0;
 38 |   max = typeof max !== 'undefined' ? max : 0;
 39 |   type = typeof type !== 'undefined' ? type : 'string';
 40 |   numberType = typeof numberType !== 'undefined' ? numberType : 'string';
 41 |   mantissa = typeof mantissa !== 'undefined' ? mantissa : -1;
 42 |   decimalSeparator = typeof decimalSeparator !== 'undefined' ? decimalSeparator : '.';
 43 |   name = typeof name !== 'undefined' ? name : '';
 44 |   check = typeof check !== 'undefined' ? check : true;
 45 |   showMsg = typeof showMsg !== 'undefined' ? showMsg : true;
 46 |   length = typeof length !== 'undefined' ? length : 0;
 47 |   regMsg = typeof regMsg !== 'undefined' ? regMsg : '';
 48 |   compare = typeof compare !== 'undefined' ? compare : '';
 49 |   required = typeof required !== 'undefined' ? required : true;
 50 |   msgOnError = typeof msgOnError !== 'undefined' ? msgOnError : '';
 51 |   msgOnSuccess = typeof msgOnSuccess !== 'undefined' ? msgOnSuccess : '';
 52 |   customFunc = typeof customFunc !== 'undefined' ? customFunc : undefined;
 53 |   shouldRenderMsgAsHtml = typeof shouldRenderMsgAsHtml !== 'undefined' ? shouldRenderMsgAsHtml : false;
 54 |   return {
 55 |     reg,
 56 |     min,
 57 |     max,
 58 |     type,
 59 |     numberType,
 60 |     mantissa,
 61 |     decimalSeparator,
 62 |     name,
 63 |     check,
 64 |     length,
 65 |     regMsg,
 66 |     locale,
 67 |     compare,
 68 |     required,
 69 |     showMsg,
 70 |     msgOnError,
 71 |     msgOnSuccess,
 72 |     customFunc,
 73 |     shouldRenderMsgAsHtml,
 74 |   };
 75 | };
 76 | interface DefaultAsyncMsgObj {
 77 |   error?: boolean;
 78 |   message?: string;
 79 |   showOnError?: boolean;
 80 |   showOnSuccess?: boolean;
 81 | }
 82 | const getDefaultAsyncObj = (obj: DefaultAsyncMsgObj) => {
 83 |   let { error, message, showOnError, showOnSuccess } = obj;
 84 |   error = typeof error !== 'undefined' ? error : false;
 85 |   message = typeof message !== 'undefined' ? message : '';
 86 |   showOnError = typeof showOnError !== 'undefined' ? showOnError : true;
 87 |   showOnSuccess = typeof showOnSuccess !== 'undefined' ? showOnSuccess : false;
 88 |   return {
 89 |     error,
 90 |     message,
 91 |     showOnError,
 92 |     showOnSuccess,
 93 |   };
 94 | };
 95 | interface AttributesInputObj {
 96 |   id?: string;
 97 |   name?: string;
 98 |   type?: string;
 99 |   placeholder?: string;
100 |   maxLength?: number;
101 | }
102 | interface Props {
103 |   attributesWrapper?: React.HTMLAttributes<HTMLDivElement>;
104 |   attributesInput?: AttributesInputObj;
105 |   value?: string;
106 |   label?: string;
107 |   disabled?: boolean;
108 |   validate?: boolean;
109 |   classNameInput?: string;
110 |   classNameWrapper?: string;
111 |   classNameContainer?: string;
112 |   customStyleInput?: React.CSSProperties;
113 |   customStyleWrapper?: React.CSSProperties;
114 |   customStyleContainer?: React.CSSProperties;
115 |   validationOption?: DefaultValidationOption;
116 |   asyncMsgObj?: {
117 |     error?: boolean;
118 |     message?: string;
119 |     showOnError?: boolean;
120 |     showOnSuccess?: boolean;
121 |   };
122 |   onChange?: (res: string, e: React.ChangeEvent<HTMLElement>) => void;
123 |   onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
124 |   onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
125 |   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
126 |   onKeyUp?: (e: React.KeyboardEvent<HTMLElement>) => void;
127 |   validationCallback?: (res: boolean) => void;
128 | }
129 | const autoFormatNumber = (v: number | string, numberType: string, mantissa: number, decimalSeparator: string) => {
130 |   const DEFAULT_DECIMAL = '.';
131 |   const ZERO = '0';
132 |   let res = '';
133 |   let hasDecimalSeparator = false;
134 |   const splitStr = utils.replaceSeparator(String(v), decimalSeparator, DEFAULT_DECIMAL).split('');
135 |   // const startedWithZero = splitStr[0] === ZERO;
136 |   if (numberType === VALIDATE_NUMBER_TYPE_LIST[2] && splitStr[0] === ZERO && splitStr[1] === ZERO) {
137 |     splitStr.shift();
138 |   }
139 |   splitStr.forEach((i: string) => {
140 |     const charCode = i.toLowerCase().charCodeAt(0);
141 |     if ((charCode >= 48 && charCode <= 57) || (i === DEFAULT_DECIMAL && !hasDecimalSeparator)) {
142 |       if (charCode === 46) {
143 |         if (numberType === VALIDATE_NUMBER_TYPE_LIST[1]) {
144 |           return;
145 |         }
146 |         hasDecimalSeparator = true;
147 |       }
148 |       res += i;
149 |     }
150 |   });
151 |   if (hasDecimalSeparator && mantissa >= 0) {
152 |     const resArr = res.split(DEFAULT_DECIMAL);
153 |     if (mantissa === 0) {
154 |       res = resArr[0];
155 |     } else {
156 |       resArr[1] = resArr[1].slice(0, mantissa);
157 |       res = resArr.join(DEFAULT_DECIMAL);
158 |     }
159 |   }
160 |   if (numberType === VALIDATE_NUMBER_TYPE_LIST[0] || numberType === VALIDATE_NUMBER_TYPE_LIST[2]) {
161 |     if (res.length && res[0] === DEFAULT_DECIMAL) {
162 |       res = `${ZERO}${res}`;
163 |     }
164 |   }
165 |   // if (numberType === VALIDATE_NUMBER_TYPE_LIST[2]) {
166 |   //   if (startedWithZero) {
167 |   //     if (hasDecimalSeparator) {
168 |   //       const resArr = res.split(DECIMAL_SEPARATOR);
169 |   //       res = `${Number(resArr[0])}${DECIMAL_SEPARATOR}${resArr[1]}`;
170 |   //     }
171 |   //   }
172 |   // }
173 |   return utils.replaceSeparator(res, DEFAULT_DECIMAL, decimalSeparator);
174 | };
175 | const component: React.FC<Props> = ({
176 |   attributesWrapper = {},
177 |   attributesInput = {},
178 |   value = '',
179 |   label = '',
180 |   disabled = false,
181 |   validate = false,
182 |   classNameInput = '',
183 |   classNameWrapper = '',
184 |   classNameContainer = '',
185 |   customStyleInput = {},
186 |   customStyleWrapper = {},
187 |   customStyleContainer = {},
188 |   validationOption = {},
189 |   asyncMsgObj = {},
190 |   onChange = (v: string, e: React.ChangeEvent<HTMLElement>) => {},
191 |   onBlur = null,
192 |   onFocus = null,
193 |   onClick = null,
194 |   onKeyUp = null,
195 |   validationCallback = null,
196 | }) => {
197 |   const [err, setErr] = useState(false);
198 |   const [msg, setMsg] = useState('');
199 |   const [successMsg, setSuccessMsg] = useState('');
200 |   const [internalValue, setInternalValue] = useState(String(value));
201 |   const prevInternalValue = usePrevious(internalValue);
202 |   const option = getDefaultValidationOption(validationOption);
203 |   const asyncObj = getDefaultAsyncObj(asyncMsgObj);
204 |   const $input = useRef(null);
205 |   const $el: { [key: string]: any } | null = $input;
206 |   const handleOnBlur = useCallback(
207 |     (e: React.FocusEvent<HTMLElement>) => {
208 |       if (onBlur) {
209 |         check();
210 |         onBlur(e);
211 |       }
212 |     },
213 |     [internalValue, option],
214 |   );
215 |   const handleOnFocus = useCallback((e: React.FocusEvent<HTMLElement>) => {
216 |     if (onFocus) {
217 |       onFocus(e);
218 |     }
219 |   }, []);
220 |   const handleOnClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
221 |     if (onClick) {
222 |       onClick(e);
223 |     }
224 |   }, []);
225 |   const handleOnKeyUp = useCallback(
226 |     (e: React.KeyboardEvent<HTMLElement>) => {
227 |       if (onKeyUp) {
228 |         const { keyCode } = e;
229 |         const keyCodeTab = 9;
230 |         if (keyCode !== keyCodeTab) {
231 |           check();
232 |         }
233 |         onKeyUp(e);
234 |       }
235 |     },
236 |     [internalValue, option],
237 |   );
238 |   const handleOnChange = useCallback(
239 |     (e: React.ChangeEvent<HTMLElement>) => {
240 |       if (disabled || $el === null) {
241 |         return;
242 |       }
243 |       let v = $el.current.value;
244 |       if (typeof attributesInput.maxLength !== 'undefined') {
245 |         if ((typeof attributesInput.maxLength === 'string' && attributesInput.maxLength !== '') || (typeof attributesInput.maxLength === 'number' && attributesInput.maxLength !== 0)) {
246 |           if (v.length > Number(attributesInput.maxLength)) {
247 |             return;
248 |           }
249 |         }
250 |       }
251 |       const { type, numberType, mantissa, decimalSeparator } = option;
252 |       if (type === VALIDATE_OPTION_TYPE_LIST[1]) {
253 |         v = String(autoFormatNumber(v, VALIDATE_NUMBER_TYPE_LIST.indexOf(numberType) >= 0 ? numberType : VALIDATE_NUMBER_TYPE_LIST[0], mantissa, decimalSeparator));
254 |       }
255 |       if (type === VALIDATE_OPTION_TYPE_LIST[2]) {
256 |         v = utils.getAlphanumeric(v);
257 |       }
258 |       if (type === VALIDATE_OPTION_TYPE_LIST[3]) {
259 |         v = utils.getAlpha(v);
260 |       }
261 |       setInternalValue(v);
262 |       onChange && onChange(v, e);
263 |       if (err) {
264 |         setErr(false);
265 |       } else {
266 |         setSuccessMsg('');
267 |       }
268 |     },
269 |     [err, attributesInput, option],
270 |   );
271 |   const check = useCallback(async () => {
272 |     const { reg, min, max, type, name, check, length, regMsg, locale, compare, required, msgOnSuccess, customFunc } = option;
273 |     if (!check) {
274 |       return;
275 |     }
276 |     if (type) {
277 |       if (VALIDATE_OPTION_TYPE_LIST.indexOf(type) !== -1) {
278 |         if (!message[locale] || !message[locale][TYPE]) {
279 |           console.error(REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE);
280 |           return;
281 |         }
282 |         const msg = message[locale][TYPE];
283 |         const nameText = name ? name : '';
284 |         if (required) {
285 |           if (validator.empty(internalValue)) {
286 |             handleCheckEnd(true, msg.empty(nameText));
287 |             return;
288 |           }
289 |         }
290 |         if (String(internalValue) !== '') {
291 |           if (reg) {
292 |             if (validator['reg'](reg, internalValue)) {
293 |               handleCheckEnd(true, regMsg !== '' ? regMsg : msg.invalid(nameText));
294 |               return;
295 |             }
296 |           }
297 |           if (type === VALIDATE_OPTION_TYPE_LIST[0]) {
298 |             if (min || max) {
299 |               if (min && max) {
300 |                 if (String(internalValue).length < min || String(internalValue).length > max) {
301 |                   handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
302 |                   return;
303 |                 }
304 |               } else {
305 |                 if (min) {
306 |                   if (String(internalValue).length < min) {
307 |                     handleCheckEnd(true, msg.lessThan(nameText)(min));
308 |                     return;
309 |                   }
310 |                 }
311 |                 if (max) {
312 |                   if (String(internalValue).length > max) {
313 |                     handleCheckEnd(true, msg.greaterThan(nameText)(max));
314 |                     return;
315 |                   }
316 |                 }
317 |               }
318 |             }
319 |             if (length) {
320 |               if (String(internalValue).length !== length) {
321 |                 handleCheckEnd(true, msg.lengthEqual(nameText)(length));
322 |                 return;
323 |               }
324 |             }
325 |           }
326 |           if (type === VALIDATE_OPTION_TYPE_LIST[1]) {
327 |             if (!validator[type](internalValue, null, null)) {
328 |               handleCheckEnd(true, msg.invalid(nameText));
329 |               return;
330 |             }
331 |             if (min || max) {
332 |               if (min && max) {
333 |                 if (!validator[type](internalValue, min, max)) {
334 |                   handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
335 |                   return;
336 |                 }
337 |               } else {
338 |                 if (min) {
339 |                   if (!validator[type](internalValue, min)) {
340 |                     handleCheckEnd(true, msg.lessThan(nameText)(min));
341 |                     return;
342 |                   }
343 |                 }
344 |                 if (max) {
345 |                   if (!validator[type](internalValue, 0, max)) {
346 |                     handleCheckEnd(true, msg.greaterThan(nameText)(max));
347 |                     return;
348 |                   }
349 |                 }
350 |               }
351 |             }
352 |             if (length) {
353 |               if (String(internalValue).length !== length) {
354 |                 handleCheckEnd(true, msg.lengthEqual(nameText)(length));
355 |                 return;
356 |               }
357 |             }
358 |           }
359 |           if (compare && compare !== '') {
360 |             if (internalValue !== compare) {
361 |               handleCheckEnd(true, msg.twoInputsNotEqual());
362 |               return;
363 |             }
364 |           }
365 |         }
366 |         if (customFunc && typeof customFunc === 'function') {
367 |           const customFuncResult = await customFunc(internalValue);
368 |           if (!($input && $input.current)) {
369 |             return;
370 |           }
371 |           /* istanbul ignore next because of async problem */
372 |           if (typeof customFuncResult === 'object') {
373 |             if (typeof customFuncResult.error === 'boolean' && typeof customFuncResult.message === 'string') {
374 |               if (customFuncResult.error === false && customFuncResult.showOnSuccess === true) {
375 |                 setSuccessMsg(customFuncResult.message);
376 |               }
377 |               handleCheckEnd(customFuncResult.error, customFuncResult.message, true);
378 |             }
379 |             return;
380 |           }
381 |           /* istanbul ignore next because of async problem */
382 |           if (customFuncResult !== true) {
383 |             handleCheckEnd(true, customFuncResult, true);
384 |             return;
385 |           }
386 |         }
387 |         if (msgOnSuccess) {
388 |           setSuccessMsg(msgOnSuccess);
389 |         }
390 |         handleCheckEnd(false, msgOnSuccess);
391 |       } else {
392 |         console.error(`The valid ${utils.toCamelCase(TYPE)(true)} "type" options in validationOption are [${VALIDATE_OPTION_TYPE_LIST.map(i => i)}]`);
393 |       }
394 |     } else {
395 |       console.error('Please provide "type" in validationOption');
396 |     }
397 |   }, [internalValue, option]);
398 |   const handleCheckEnd = useCallback(
399 |     (err: boolean, message: string, fromCustomFunc: boolean = false) => {
400 |       let msg = message;
401 |       const { msgOnError } = option;
402 |       if (err && msgOnError && !fromCustomFunc) {
403 |         msg = msgOnError;
404 |       }
405 |       setErr(err);
406 |       setMsg(msg);
407 |       validationCallback && validationCallback(err);
408 |     },
409 |     [option.msgOnError],
410 |   );
411 |   useEffect(() => {
412 |     if (validate) {
413 |       check();
414 |     }
415 |   }, [validate]);
416 |   useEffect(() => {
417 |     setInternalValue(String(value));
418 |   }, [value]);
419 |   useEffect(() => {
420 |     /* istanbul ignore next because of https://github.com/airbnb/enzyme/issues/441 && https://github.com/airbnb/enzyme/blob/master/docs/future.md */
421 |     if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
422 |       if (option.customFunc && onKeyUp) {
423 |         check();
424 |       }
425 |     }
426 |   }, [internalValue]);
427 |   useEffect(() => {
428 |     if (asyncObj) {
429 |       if (asyncObj.message) {
430 |         if (asyncObj.showOnError) {
431 |           handleCheckEnd(asyncObj.error, asyncObj.message);
432 |         }
433 |         if (!asyncObj.error && asyncObj.showOnSuccess) {
434 |           setSuccessMsg(asyncObj.message);
435 |         }
436 |       }
437 |     }
438 |   }, [asyncMsgObj]);
439 |   const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss[`${TYPE}__wrapper`]} ${err && reactInputsValidationCss['error']} ${
440 |     successMsg !== '' && !err && reactInputsValidationCss['success']
441 |   } ${disabled && reactInputsValidationCss['disabled']}`;
442 |   const containerClass = `${classNameContainer} ${reactInputsValidationCss[`${TYPE}__container`]} ${err && reactInputsValidationCss['error']} ${
443 |     successMsg !== '' && !err && reactInputsValidationCss['success']
444 |   } ${disabled && reactInputsValidationCss['disabled']}`;
445 |   const inputClass = `${classNameInput} ${reactInputsValidationCss[`${TYPE}__input`]} ${err && reactInputsValidationCss['error']} ${successMsg !== '' && !err && reactInputsValidationCss['success']} ${
446 |     disabled && reactInputsValidationCss['disabled']
447 |   }`;
448 |   const errMsgClass = `${MSG_CLASS_IDENTITIFIER} ${reactInputsValidationCss['msg']} ${err && reactInputsValidationCss['error']}`;
449 |   const successMsgClass = `${MSG_CLASS_IDENTITIFIER} ${reactInputsValidationCss['msg']} ${!err && reactInputsValidationCss['success']}`;
450 |   let msgHtml;
451 |   const { showMsg, shouldRenderMsgAsHtml } = option;
452 |   if (showMsg && err && msg) {
453 |     msgHtml = shouldRenderMsgAsHtml ? <div className={errMsgClass} dangerouslySetInnerHTML={{ __html: msg }} /> : <div className={errMsgClass}>{msg}</div>;
454 |   }
455 |   if (showMsg && !err && successMsg !== '') {
456 |     msgHtml = shouldRenderMsgAsHtml ? <div className={successMsgClass} dangerouslySetInnerHTML={{ __html: successMsg }} /> : <div className={successMsgClass}>{successMsg}</div>;
457 |   }
458 |   return (
459 |     <div className={wrapperClass} style={customStyleWrapper} {...attributesWrapper}>
460 |       <div className={containerClass} style={customStyleContainer}>
461 |         <input
462 |           type="text"
463 |           value={internalValue}
464 |           disabled={disabled}
465 |           onBlur={handleOnBlur}
466 |           onKeyUp={handleOnKeyUp}
467 |           onFocus={handleOnFocus}
468 |           onClick={handleOnClick}
469 |           className={inputClass}
470 |           onChange={handleOnChange}
471 |           style={customStyleInput}
472 |           ref={$input}
473 |           {...attributesInput}
474 |         />
475 |         {label && attributesInput.id && <label htmlFor={attributesInput.id}>{label}</label>}
476 |       </div>
477 |       {msgHtml}
478 |     </div>
479 |   );
480 | };
481 | export default memo(component);
482 | 


--------------------------------------------------------------------------------
/src/js/Inputs/const.ts:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | const { useEffect, useRef } = React;
 3 | export const LOCALE_OPTION_LIST = ['en-US'];
 4 | export const REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE =
 5 |   "Invalid window.REACT_INPUTS_VALIDATION['customErrorMessage']. EXAMPLE: window.REACT_INPUTS_VALIDATION={customErrorMessage:{'en-US':{textbox:{empty:function empty(name){return getEnglishName(name)+'cannot be empty'},invalid:function invalid(name){return getEnglishName(name)+'invalid format'},invalidFormat:function invalidFormat(name){return getEnglishName(name)+'is not a number'},inBetween:function inBetween(name){return function(min){return function(max){return getEnglishName(name)+'must be '+min+'-'+max}}},lessThan:function lessThan(name){return function(min){return getEnglishName(name)+'cannot less than '+min}},greaterThan:function greaterThan(name){return function(max){return getEnglishName(name)+'cannot greater than '+max}},lengthEqual:function lengthEqual(name){return function(length){return getEnglishName(name)+'length must be '+length}},twoInputsNotEqual:function twoInputsNotEqual(){return'two inputs are not equal'}},radiobox:{empty:function empty(name){return'Please choose one '+getEnglishName(name)}},checkbox:{unchecked:function unchecked(name){return getEnglishName(name)+'must be checked'}},select:{empty:function empty(name){return'Please select a '+getEnglishName(name)}},textarea:{empty:function empty(name){return getEnglishName(name)+'cannot be empty'},invalid:function invalid(name){return getEnglishName(name)+'invalid format'},invalidFormat:function invalidFormat(name){return getEnglishName(name)+'is not a number'},inBetween:function inBetween(name){return function(min){return function(max){return getEnglishName(name)+'must be '+min+'-'+max}}},lessThan:function lessThan(name){return function(min){return getEnglishName(name)+'cannot less than '+min}},greaterThan:function greaterThan(name){return function(max){return getEnglishName(name)+'cannot greater than '+max}},lengthEqual:function lengthEqual(name){return function(length){return getEnglishName(name)+'length must be '+length}},twoInputsNotEqual:function twoInputsNotEqual(){return'two inputs are not equal'}}}}};";
 6 | export const DEFAULT_LOCALE = 'en-US';
 7 | export const WRAPPER_CLASS_IDENTITIFIER = 'react-inputs-validation__wrapper_identifier';
 8 | export const CONTAINER_CLASS_IDENTITIFIER = 'react-inputs-validation__container_identifier';
 9 | export const OPTION_LIST_ITEM_IDENTITIFIER = 'react-inputs-validation__option-list-item_identifier';
10 | export const MSG_CLASS_IDENTITIFIER = 'react-inputs-validation__msg_identifier';
11 | export const usePrevious = (value: any) => {
12 |   const ref = useRef();
13 |   useEffect(() => {
14 |     ref.current = value;
15 |   });
16 |   return ref.current;
17 | };
18 | 


--------------------------------------------------------------------------------
/src/js/Inputs/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css' {
2 |   interface IClassNames {
3 |     [className: string]: string
4 |   }
5 |   const classNames: IClassNames;
6 |   export = classNames;
7 | }


--------------------------------------------------------------------------------
/src/js/Inputs/index.global.ts:
--------------------------------------------------------------------------------
 1 | import Textbox from './Textbox';
 2 | import Textarea from './Textarea';
 3 | import Select from './Select';
 4 | import Checkbox from './Checkbox';
 5 | import Radiobox from './Radiobox';
 6 | 
 7 | if (typeof window !== 'undefined') {
 8 |   (<any>window).Textbox = Textbox;
 9 |   (<any>window).Textarea = Textarea;
10 |   (<any>window).Radiobox = Radiobox;
11 |   (<any>window).Checkbox = Checkbox;
12 |   (<any>window).Select = Select;
13 | }
14 | 
15 | export { Textbox, Textarea, Select, Checkbox, Radiobox };
16 | 


--------------------------------------------------------------------------------
/src/js/Inputs/index.ts:
--------------------------------------------------------------------------------
1 | import Textbox from './Textbox';
2 | import Textarea from './Textarea';
3 | import Select from './Select';
4 | import Checkbox from './Checkbox';
5 | import Radiobox from './Radiobox';
6 | 
7 | export { Textbox, Textarea, Select, Checkbox, Radiobox };
8 | 


--------------------------------------------------------------------------------
/src/js/Inputs/message.ts:
--------------------------------------------------------------------------------
  1 | import { REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE } from './const';
  2 | 
  3 | const getEnglishName = (name: string) => {
  4 |   let res = '';
  5 |   if (name) {
  6 |     res = `${name} `;
  7 |   }
  8 |   return res;
  9 | };
 10 | 
 11 | const TEXT_BOX_VALIDATION_EN_US = {
 12 |   empty: (name: string) => `${getEnglishName(name)}cannot be empty`,
 13 |   invalid: (name: string) => `${getEnglishName(name)}invalid format`,
 14 |   invalidFormat: (name: string) => `${getEnglishName(name)}is not a number`,
 15 |   inBetween: (name: string) => (min: number) => (max: number) => `${getEnglishName(name)}must be ${min}-${max}`,
 16 |   lessThan: (name: string) => (min: number) => `${getEnglishName(name)}cannot less than ${min}`,
 17 |   greaterThan: (name: string) => (max: number) => `${getEnglishName(name)}cannot greater than ${max}`,
 18 |   lengthEqual: (name: string) => (length: number) => `${getEnglishName(name)}length must be ${length}`,
 19 |   twoInputsNotEqual: () => `two inputs are not equal`,
 20 | };
 21 | 
 22 | const TEXT_AREA_VALIDATION_EN_US = {
 23 |   empty: (name: string) => `${getEnglishName(name)}cannot be empty`,
 24 |   invalid: (name: string) => `${getEnglishName(name)}invalid format`,
 25 |   invalidFormat: (name: string) => `${getEnglishName(name)}is not a number`,
 26 |   inBetween: (name: string) => (min: number) => (max: number) => `${getEnglishName(name)}must be ${min}-${max}`,
 27 |   lessThan: (name: string) => (min: number) => `${getEnglishName(name)}cannot less than ${min}`,
 28 |   greaterThan: (name: string) => (max: number) => `${getEnglishName(name)}cannot greater than ${max}`,
 29 |   lengthEqual: (name: string) => (length: number) => `${getEnglishName(name)}length must be ${length}`,
 30 |   twoInputsNotEqual: () => `two inputs are not equal`,
 31 | };
 32 | 
 33 | const SELECT_VALIDATION_EN_US = {
 34 |   empty: (name: string) => `Please select a ${getEnglishName(name)}`,
 35 | };
 36 | 
 37 | const CHECK_BOX_VALIDATION_EN_US = {
 38 |   unchecked: (name: string) => `${getEnglishName(name)}must be checked`,
 39 | };
 40 | 
 41 | const RADIO_BOX_VALIDATION_EN_US = {
 42 |   empty: (name: string) => `Please choose one ${getEnglishName(name)}`,
 43 | };
 44 | 
 45 | interface Message {
 46 |   [key: string]: Key;
 47 | }
 48 | 
 49 | interface Key {
 50 |   [key: string]: Func;
 51 | }
 52 | 
 53 | interface Func {
 54 |   [key: string]: Function;
 55 | }
 56 | 
 57 | let message: Message = {
 58 |   'en-US': {
 59 |     textbox: TEXT_BOX_VALIDATION_EN_US,
 60 |     radiobox: RADIO_BOX_VALIDATION_EN_US,
 61 |     checkbox: CHECK_BOX_VALIDATION_EN_US,
 62 |     select: SELECT_VALIDATION_EN_US,
 63 |     textarea: TEXT_AREA_VALIDATION_EN_US,
 64 |   },
 65 | };
 66 | 
 67 | // TODO: find a rewire way to handle non-export function
 68 | export const getCustomErrorMessage = (o: any, m: any) => {
 69 |   if (!o || typeof o !== 'object' || o.constructor !== Object || !Object.keys(o).length) {
 70 |     console.error(REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE);
 71 |     return false;
 72 |   }
 73 |   Object.keys(o).map(i => {
 74 |     if (!m[i]) {
 75 |       m[i] = o[i];
 76 |     } else {
 77 |       if (Object.keys(o[i]).length) {
 78 |         Object.keys(o[i]).map(j => {
 79 |           if (Object.keys(o[i][j]).length) {
 80 |             Object.keys(o[i][j]).map(k => {
 81 |               m[i][j][k] = o[i][j][k];
 82 |             });
 83 |           }
 84 |         });
 85 |       }
 86 |     }
 87 |   });
 88 |   return m;
 89 | };
 90 | 
 91 | declare global {
 92 |   interface Window {
 93 |     REACT_INPUTS_VALIDATION: any;
 94 |   }
 95 | }
 96 | 
 97 | // TODO: find a rewire way to handle non-export function
 98 | export const handleCustomErrorMessage = (message: any, w: Window) => {
 99 |   let res;
100 |   if (typeof w !== 'undefined') {
101 |     if (w.REACT_INPUTS_VALIDATION && w.REACT_INPUTS_VALIDATION['customErrorMessage']) {
102 |       res = getCustomErrorMessage(w.REACT_INPUTS_VALIDATION['customErrorMessage'], message);
103 |     }
104 |   }
105 |   if (typeof res === 'undefined' || res === false) {
106 |     return message;
107 |   }
108 |   return res;
109 | };
110 | 
111 | /* istanbul ignore else */
112 | if (typeof window !== 'undefined') {
113 |   window.REACT_INPUTS_VALIDATION = window.REACT_INPUTS_VALIDATION || {};
114 |   message = handleCustomErrorMessage(message, window);
115 | }
116 | 
117 | export default message;
118 | 


--------------------------------------------------------------------------------
/src/js/Inputs/react-inputs-validation.css:
--------------------------------------------------------------------------------
  1 | /*GENERAL*/
  2 | 
  3 | input[type='password'],
  4 | input[type='phone'],
  5 | input[type='number'],
  6 | input[type='text'],
  7 | textarea,
  8 | select {
  9 |   border-top-left-radius: 0;
 10 |   border-bottom-left-radius: 0;
 11 |   border-top-right-radius: 0;
 12 |   border-bottom-right-radius: 0;
 13 |   -webkit-border-radius: 0;
 14 |   -webkit-appearance: none;
 15 |   background-color: white;
 16 |   background-position: right center;
 17 |   background-repeat: no-repeat;
 18 |   /*outline: 0;*/
 19 | }
 20 | 
 21 | input[type='password']:focus,
 22 | input[type='phone']:focus,
 23 | input[type='number']:focus,
 24 | input[type='text']:focus,
 25 | select:focus {
 26 |   /*outline: 0;*/
 27 | }
 28 | 
 29 | select {
 30 |   background: transparent !important;
 31 | }
 32 | 
 33 | .ellipsis {
 34 |   white-space: nowrap;
 35 |   overflow: hidden;
 36 |   text-overflow: ellipsis;
 37 | }
 38 | 
 39 | /*TEXTBOX*/
 40 | 
 41 | .textbox__wrapper,
 42 | .textbox__wrapper *:focus {
 43 |   /*outline: 0;*/
 44 | }
 45 | 
 46 | .textbox__wrapper.disabled,
 47 | .textbox__wrapper.disabled div {
 48 |   cursor: not-allowed;
 49 | }
 50 | 
 51 | .textbox__wrapper {
 52 |   height: auto;
 53 | }
 54 | 
 55 | .textbox__container {
 56 |   /*position: relative;*/
 57 |   opacity: 1;
 58 | }
 59 | 
 60 | input[type='password'].textbox__input,
 61 | input[type='phone'].textbox__input,
 62 | input[type='number'].textbox__input,
 63 | input[type='text'].textbox__input {
 64 |   display: block;
 65 |   margin: 0;
 66 |   width: 100%;
 67 |   font-size: 14px;
 68 |   padding: 2%;
 69 |   border: 1px solid #e5e5e5;
 70 |   appearance: none;
 71 |   box-shadow: none;
 72 |   border-radius: none;
 73 |   box-sizing: border-box;
 74 |   -webkit-box-sizing: border-box;
 75 |   -moz-box-sizing: border-box;
 76 | }
 77 | 
 78 | input[type='password'].textbox__input.error,
 79 | input[type='phone'].textbox__input.error,
 80 | input[type='number'].textbox__input.error,
 81 | input[type='text'].textbox__input.error {
 82 |   border: 1px solid #ff5a57;
 83 |   color: #ff5a57;
 84 | }
 85 | 
 86 | input[type='password'].textbox__input.success,
 87 | input[type='phone'].textbox__input.success,
 88 | input[type='number'].textbox__input.success,
 89 | input[type='text'].textbox__input.success {
 90 |   border: 1px solid #2fca6f;
 91 |   color: #2fca6f;
 92 | }
 93 | 
 94 | input[type='password'].textbox__input.disabled,
 95 | input[type='phone'].textbox__input.disabled,
 96 | input[type='number'].textbox__input.disabled,
 97 | input[type='text'].textbox__input.disabled {
 98 |   border: 1px solid #ccc;
 99 |   color: #ccc;
100 |   background: #f8f8f8;
101 |   cursor: not-allowed;
102 | }
103 | 
104 | .msg.error {
105 |   margin-top: 2px;
106 |   font-size: 12px;
107 |   color: #ff5a57;
108 |   padding-left: 4px;
109 | }
110 | 
111 | .msg.success {
112 |   margin-top: 2px;
113 |   font-size: 12px;
114 |   color: #2fca6f;
115 |   padding-left: 4px;
116 | }
117 | 
118 | ::-webkit-input-placeholder {
119 |   color: #a5a5a5;
120 | }
121 | 
122 | :-ms-input-placeholder {
123 |   color: #a5a5a5;
124 | }
125 | 
126 | ::-moz-placeholder {
127 |   color: #a5a5a5;
128 |   opacity: 1;
129 | }
130 | 
131 | :-moz-placeholder {
132 |   color: #a5a5a5;
133 |   opacity: 1;
134 | }
135 | 
136 | /*TEXTAREA*/
137 | 
138 | .textarea__wrapper,
139 | .textarea__wrapper *:focus {
140 |   /*outline: 0;*/
141 | }
142 | 
143 | .textarea__wrapper.disabled,
144 | .textarea__wrapper.disabled div {
145 |   cursor: not-allowed;
146 | }
147 | 
148 | .textarea__wrapper {
149 |   height: auto;
150 | }
151 | 
152 | .textarea__container {
153 |   /*position: relative;*/
154 | }
155 | 
156 | textarea.textarea__input {
157 |   resize: none;
158 |   /*outline: none;*/
159 |   display: block;
160 |   margin: 0;
161 |   width: 100%;
162 |   font-size: 14px;
163 |   padding: 2%;
164 |   border: 1px solid #e5e5e5;
165 |   appearance: none;
166 |   box-shadow: none;
167 |   border-radius: none;
168 |   box-sizing: border-box;
169 |   -webkit-box-sizing: border-box;
170 |   -moz-box-sizing: border-box;
171 | }
172 | 
173 | textarea.textarea__input.error {
174 |   border: 1px solid #ff5a57;
175 |   color: #ff5a57;
176 | }
177 | 
178 | textarea.textarea__input.success {
179 |   border: 1px solid #2fca6f;
180 |   color: #2fca6f;
181 | }
182 | 
183 | textarea.textarea__input.disabled {
184 |   border: 1px solid #ccc;
185 |   color: #ccc;
186 |   background: #f8f8f8;
187 |   cursor: not-allowed;
188 | }
189 | 
190 | /*RADIOBOX*/
191 | 
192 | .radiobox__wrapper,
193 | .radiobox__wrapper *:focus {
194 |   /*outline: 0;*/
195 | }
196 | 
197 | .radiobox__wrapper.disabled,
198 | .radiobox__wrapper.disabled label,
199 | .radiobox__wrapper.disabled div {
200 |   cursor: not-allowed;
201 | }
202 | 
203 | input[type='radio'] {
204 |   position: absolute;
205 |   opacity: 0;
206 |   display: none;
207 | }
208 | 
209 | .radiobox__wrapper.disabled,
210 | .radiobox__container.disabled,
211 | .radiobox__input.disabled,
212 | .radiobox__label.disabled:before {
213 |   color: #ccc;
214 |   cursor: not-allowed;
215 | }
216 | 
217 | .radiobox__label {
218 |   display: inline-block\9;
219 |   display: flex;
220 |   align-items: center;
221 | }
222 | 
223 | .radiobox__label:before {
224 |   content: '';
225 |   border: 1px solid #e5e5e5;
226 |   border-radius: 100%;
227 |   display: inline-block;
228 |   vertical-align: middle;
229 |   width: 14px;
230 |   height: 14px;
231 |   position: relative;
232 |   margin-right: 1em;
233 |   cursor: pointer;
234 |   text-align: center;
235 |   transition: all 250ms ease;
236 | }
237 | 
238 | .radiobox__label.disabled:before {
239 |   border: 1px solid #ccc;
240 |   background-color: #f8f8f8;
241 | }
242 | 
243 | .radiobox__label.checked:before {
244 |   background-color: #4a4a4a;
245 |   box-shadow: inset 0 0 0 4px #f4f4f4;
246 | }
247 | 
248 | .button.radiobox__item {
249 |   display: inline-block\9;
250 |   width: auto;
251 | }
252 | 
253 | .radiobox__item.success .radiobox__label.checked:before {
254 |   border-color: #2fca6f;
255 | }
256 | 
257 | .radiobox__item.error .radiobox__label:before {
258 |   border-color: #ff5a57;
259 | }
260 | 
261 | .radiobox__item.disabled.error .radiobox__label:before {
262 |   border-color: #ccc;
263 | }
264 | 
265 | /*CHECKBOX*/
266 | 
267 | .checkbox__wrapper,
268 | .checkbox__wrapper *:focus {
269 |   /*outline: 0;*/
270 | }
271 | 
272 | input[type='checkbox'] {
273 |   position: absolute;
274 |   opacity: 0;
275 | }
276 | 
277 | .checkbox__wrapper {
278 |   /*outline: none;*/
279 | }
280 | 
281 | .checkbox__wrapper.disabled,
282 | .checkbox__wrapper.disabled div {
283 |   cursor: not-allowed;
284 | }
285 | 
286 | .checkbox__input {
287 |   display: none;
288 | }
289 | 
290 | .checkbox__container {
291 |   display: flex;
292 |   align-items: center;
293 | }
294 | 
295 | .checkbox__wrapper.disabled {
296 | }
297 | 
298 | .checkbox__container.disabled {
299 | }
300 | 
301 | .checkbox__box {
302 |   vertical-align: middle\9;
303 |   display: inline-block\9;
304 |   width: 15px;
305 |   height: 15px;
306 |   position: relative;
307 |   border: 1px solid #e5e5e5;
308 |   margin-right: 10px;
309 | }
310 | 
311 | .checkbox__container label > div {
312 |   vertical-align: middle\9;
313 |   display: inline-block\9;
314 | }
315 | 
316 | .checkbox__box.disabled {
317 |   background: #f8f8f8;
318 | }
319 | 
320 | .checkbox__box.error {
321 |   border-color: #ff5a57;
322 | }
323 | 
324 | .checkbox__box.disabled.error {
325 |   border-color: #ccc;
326 | }
327 | 
328 | .checkbox__box.success {
329 |   border-color: #2fca6f;
330 | }
331 | 
332 | .checkbox__wrapper.checked .checkbox__box .box {
333 |   opacity: 1;
334 | }
335 | 
336 | .checkbox__box .box {
337 |   content: '';
338 |   width: 8px;
339 |   height: 4px;
340 |   position: absolute;
341 |   top: 3px;
342 |   left: 2px;
343 |   border: 3px solid #4a4a4a;
344 |   border-top: none;
345 |   border-right: none;
346 |   background: transparent;
347 |   opacity: 0;
348 |   transform: rotate(-45deg);
349 | }
350 | 
351 | .button {
352 |   width: 100%;
353 |   display: inline-block;
354 |   text-align: left;
355 |   cursor: pointer;
356 |   background: none;
357 |   border: none;
358 |   overflow: visible;
359 | }
360 | 
361 | /*SELECT*/
362 | .select__wrapper,
363 | .select__wrapper *:focus {
364 |   /*outline: 0;*/
365 | }
366 | 
367 | /*.select__wrapper:focus .select__container{
368 |   outline-color: #cecece;
369 |   outline-style: solid;
370 | }*/
371 | 
372 | .select__wrapper.disabled,
373 | .select__wrapper.disabled div {
374 |   cursor: not-allowed;
375 | }
376 | 
377 | .select__wrapper {
378 |   cursor: pointer;
379 |   /*outline: none;*/
380 |   position: relative;
381 | }
382 | 
383 | .select__input {
384 |   opacity: 0;
385 |   position: absolute;
386 |   top: 0;
387 |   bottom: 0;
388 |   left: 0;
389 |   right: 0;
390 |   width: 100%;
391 |   height: 100%;
392 |   cursor: pointer;
393 | }
394 | 
395 | .select__container {
396 |   padding: 2%;
397 |   /*position: relative;*/
398 |   border: 1px solid #e5e5e5;
399 | }
400 | 
401 | .select__container .select__button {
402 |   outline: none;
403 | }
404 | 
405 | .select__container.error {
406 |   border-color: #ff5a57;
407 | }
408 | 
409 | .select__container.disabled.error {
410 |   border-color: #ccc;
411 | }
412 | 
413 | .select__container.success {
414 |   border-color: #2fca6f;
415 | }
416 | 
417 | .select__container.disabled {
418 |   background: #f8f8f8;
419 | }
420 | 
421 | .select__options-item {
422 |   background: #fff;
423 |   transition: background 0.4s, color 0.2s;
424 |   cursor: none;
425 |   padding: 10px 0;
426 |   white-space: nowrap;
427 |   overflow: hidden;
428 |   text-overflow: ellipsis;
429 |   display: block;
430 | }
431 | 
432 | .select__options-item.disabled{
433 |   color: #ccc !important;
434 |   background: #f8f8f8 !important;
435 |   cursor: not-allowed;
436 | }
437 | 
438 | .select__options-item span {
439 |   padding: 0 10px;
440 | }
441 | 
442 | .select__options-item-show-cursor {
443 |   cursor: pointer;
444 | }
445 | 
446 | .select__searchInputWrapper {
447 |   padding: 10px;
448 |   position: relative;
449 |   display: flex;
450 | }
451 | 
452 | .select__searchInputSearchIcon {
453 |   position: absolute;
454 |   top: 50%;
455 |   left: 20px;
456 |   transform: translateY(-50%);
457 | }
458 | 
459 | .select__searchInputRemoveIcon {
460 |   position: absolute;
461 |   top: 50%;
462 |   right: 20px;
463 |   transform: translateY(-50%);
464 |   cursor: pointer;
465 | }
466 | 
467 | .select__searchInput {
468 |   padding: 0 30px;
469 |   box-sizing: border-box;
470 |   border-radius: 2px;
471 |   font-size: 14px;
472 |   height: 40px;
473 |   width: 100%;
474 |   border: 1px solid #dfe2e7;
475 |   color: #7f8fa4;
476 |   display: block;
477 | }
478 | 
479 | .select__no-mouse {
480 |   cursor: none;
481 | }
482 | 
483 | .select__hover-active {
484 |   background: #ff5a57;
485 |   color: #fff;
486 | }
487 | 
488 | .select__options-item.active {
489 |   background: #d3d3d3;
490 |   color: #fff;
491 | }
492 | 
493 | .select__options-wrapper-animate {
494 |   z-index: 1;
495 |   margin-top: 2%;
496 |   position: absolute;
497 |   background: #fff;
498 |   width: 100%;
499 |   opacity: 0;
500 |   left: 50%;
501 |   transform-origin: 0 0;
502 |   transition: transform 0.4s, opacity 0.2s;
503 |   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08), 0 0 1px 0 rgba(0, 0, 0, 0.12);
504 |   z-index: -1;
505 |   transform: translate(-50%, 0) scale(1, 0);
506 | }
507 | 
508 | .select__options-wrapper-animate.show {
509 |   transform: translate(-50%, 0) scale(1, 1);
510 |   opacity: 1;
511 |   z-index: 3;
512 | }
513 | 
514 | .select__options-wrapper {
515 |   border: 1px solid #bbbbbb;
516 |   z-index: 1;
517 |   margin-top: 2%;
518 |   position: absolute;
519 |   background: #fff;
520 |   width: 100%;
521 |   left: 50%;
522 |   display: none;
523 |   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08), 0 0 1px 0 rgba(0, 0, 0, 0.12);
524 |   transform: translateX(-50%);
525 | }
526 | 
527 | .select__optionItem_icon {
528 |   vertical-align: middle;
529 | }
530 | 
531 | .select__optionItem_name {
532 |   vertical-align: middle;
533 | }
534 | 
535 | .select__optionItem_current_display_icon {
536 |   vertical-align: middle;
537 | }
538 | 
539 | .select__optionItem_current_display_name {
540 |   vertical-align: middle;
541 | }
542 | 
543 | .select__options-wrapper.show {
544 |   display: block;
545 | }
546 | 
547 | .select__dropdown {
548 |   display: flex;
549 |   justify-content: space-between;
550 |   align-items: center;
551 | }
552 | 
553 | .select__dropdown-icon {
554 |   width: 2%\9;
555 |   display: inline-block\9;
556 |   width: 20px;
557 |   height: 20px;
558 | }
559 | 
560 | .select__dropdown-name {
561 |   width: 98%\9;
562 |   display: inline-block\9;
563 | }
564 | 
565 | .select__dropdown-icon.showArrow:before {
566 |   content: '';
567 |   /*  position: absolute;
568 |   top: 50%;
569 |   transform: translateY(-50%);*/
570 |   border-style: solid;
571 |   display: inline-block;
572 |   width: 0;
573 |   border-width: 8px 8px 0;
574 |   border-color: #e3e3e3 transparent;
575 | }
576 | 
577 | .select__dropdown-icon-container {
578 |   position: relative;
579 | }
580 | 


--------------------------------------------------------------------------------
/src/js/Inputs/utils.ts:
--------------------------------------------------------------------------------
 1 | const camelize = (str: string) => {
 2 |   return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match, index) => {
 3 |     if (+match === 0) return '';
 4 |     return index === 0 ? match.toLowerCase() : match.toUpperCase();
 5 |   });
 6 | };
 7 | 
 8 | const toCamelCase =
 9 |   (str: string) =>
10 |   (capitalLize: boolean = false) => {
11 |     const res = camelize(str);
12 |     return capitalLize ? res.substr(0, 1).toUpperCase() + res.substr(1, res.length) : res;
13 |   };
14 | 
15 | interface Utils {
16 |   [key: string]: Function;
17 | }
18 | 
19 | const getRandomId = () => {
20 |   return Math.random().toString(36).slice(-8);
21 | };
22 | 
23 | const getAlphanumeric = (v: string) => {
24 |   let res = '';
25 |   String(v)
26 |     .split('')
27 |     .forEach(i => {
28 |       const charCode = i.toLowerCase().charCodeAt(0);
29 |       if ((charCode >= 48 && charCode <= 57) || (charCode >= 97 && charCode <= 122)) {
30 |         res += i;
31 |       }
32 |     });
33 |   return res;
34 | };
35 | 
36 | const getAlpha = (v: string) => {
37 |   let res = '';
38 |   String(v)
39 |     .split('')
40 |     .forEach(i => {
41 |       const charCode = i.toLowerCase().charCodeAt(0);
42 |       if (charCode >= 97 && charCode <= 122) {
43 |         res += i;
44 |       }
45 |     });
46 |   return res;
47 | };
48 | 
49 | const getNumeric = (v: string) => {
50 |   let res = '';
51 |   String(v)
52 |     .split('')
53 |     .forEach(i => {
54 |       const charCode = i.toLowerCase().charCodeAt(0);
55 |       if (charCode >= 48 && charCode <= 57) {
56 |         res += i;
57 |       }
58 |     });
59 |   return res;
60 | };
61 | 
62 | const arraysEqual = (arr1: any, arr2: any) => {
63 |   if (arr1.length !== arr2.length) return false;
64 |   for (let i = arr1.length; (i -= 1); ) {
65 |     if (JSON.stringify(arr1[i]) !== JSON.stringify(arr2[i])) return false;
66 |   }
67 |   return true;
68 | };
69 | 
70 | const replaceSeparator = (value: string, replacee: string, replacer: string) => {
71 |   const expression = `\\${replacee}`;
72 |   const removeSeparatorRegEx = new RegExp(expression, 'g');
73 |   return value.replace(removeSeparatorRegEx, replacer);
74 | };
75 | 
76 | const utils: Utils = {
77 |   camelize,
78 |   toCamelCase,
79 |   getRandomId,
80 |   getAlphanumeric,
81 |   getAlpha,
82 |   getNumeric,
83 |   arraysEqual,
84 |   replaceSeparator,
85 | };
86 | export default utils;
87 | 


--------------------------------------------------------------------------------
/src/js/Inputs/validator.ts:
--------------------------------------------------------------------------------
 1 | const empty = (v: string) => (v.replace(/\s/g, '').length ? false : true);
 2 | const number = (v: number, min: any, max: any) => {
 3 |   if (min === null && max === null){
 4 |     return true
 5 |   }
 6 |   if (!isNumeric(v)) {
 7 |     return false;
 8 |   }
 9 |   return v < min || v > max ? false : true;
10 | };
11 | // TODO: find a better type for regex
12 | const reg = (reg: any, v: string) => {
13 |   let err = true;
14 |   if (reg.test(v)) {
15 |     err = false;
16 |   }
17 |   return err;
18 | };
19 | const isNumeric = (v: any) => {
20 |   return !isNaN(parseFloat(v)) && isFinite(v);
21 | };
22 | 
23 | interface Validator {
24 |   [key: string]: Function;
25 | }
26 | 
27 | const validator: Validator = {
28 |   reg,
29 |   empty,
30 |   number,
31 | };
32 | export default validator;
33 | 


--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: "stylelint-config-standard",
 3 |   rules: {
 4 |     'block-no-empty': true,
 5 |     'color-hex-case': 'lower',
 6 |     'color-hex-length': null,
 7 |     'color-no-invalid-hex': true,
 8 |     'length-zero-no-unit': true,
 9 |     'comment-empty-line-before': ['always', {
10 |       'except': ['first-nested'],
11 |       'ignore': ['stylelint-commands', 'between-comments'],
12 |     }],
13 |     'declaration-colon-space-after': 'always',
14 |     'max-empty-lines': 2,
15 |     'unit-whitelist': ['em', 'rem', '%', 's', 'ms', 'px', 'deg', 'vw', 'vh', 'dpi', 'dppx'],
16 |     'selector-combinator-space-after': null,
17 |     'selector-pseudo-element-colon-notation': null,
18 |     'selector-list-comma-newline-after': null,
19 |     'comment-empty-line-before': null,
20 |     'block-closing-brace-newline-before': null,
21 |     'number-leading-zero': null,
22 |     'rule-empty-line-before': null,
23 |     'declaration-block-trailing-semicolon': null
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/tea.yaml:
--------------------------------------------------------------------------------
1 | # https://tea.xyz/what-is-this-file
2 | ---
3 | version: 1.0.0
4 | codeOwners:
5 |   - '0xb60FCefB862640cbfF058e04CD64B4ed8EaFCA1F'
6 | quorum: 1
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "./lib/",
 4 |     "sourceMap": true,
 5 |     "strictNullChecks": false,
 6 |     "declaration": true,
 7 |     "noImplicitAny": true,
 8 |     "module": "commonjs",
 9 |     "target": "es5",
10 |     "lib": ["es2016", "dom"],
11 |     "jsx": "react",
12 |     "skipLibCheck": true,
13 |     "esModuleInterop": true,
14 |     "strict": true,
15 |   },
16 |   "include": ["./src/**/*"]
17 | }
18 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["tslint-config-airbnb", "tslint-config-prettier"],
3 |   "rules": {
4 |     // This rule is here for now because of https://github.com/palantir/tslint-react/issues/120
5 |     "variable-name": [true, "allow-pascal-case"]
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/webpack/base.js:
--------------------------------------------------------------------------------
  1 | const webpack = require('webpack');
  2 | const path = require('path');
  3 | const PATH = require('./build_path');
  4 | const WebpackAssetsManifest = require('webpack-assets-manifest');
  5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  6 | module.exports = {
  7 |   context: PATH.ROOT_PATH,
  8 |   entry: {
  9 |     // index: PATH.ROOT_PATH + 'example/index.js',
 10 |     index: PATH.ROOT_PATH + 'example/index.tsx'
 11 |   },
 12 |   module: {
 13 |     rules: [
 14 |       {
 15 |         test: /\.mp3?$/,
 16 |         include: [PATH.ROOT_PATH],
 17 |         exclude: [PATH.NODE_MODULES_PATH],
 18 |         loader: 'file-loader?name=audio/[name]-[hash].[ext]',
 19 |       },
 20 |       {
 21 |         test: /\.(woff|woff2|eot|ttf|otf)\??.*$/,
 22 |         include: [PATH.ROOT_PATH],
 23 |         // exclude: [PATH.NODE_MODULES_PATH],
 24 |         loader: 'url-loader?limit=1&name=font/[name]-[hash].[ext]',
 25 |       },
 26 |       {
 27 |         test: /\.(jpe?g|png|gif|svg)\??.*$/,
 28 |         include: [PATH.ROOT_PATH],
 29 |         // exclude: [PATH.NODE_MODULES_PATH],
 30 |         loader: 'url-loader?limit=1&name=img/[name]-[hash].[ext]',
 31 |       },
 32 |       {
 33 |         test: /\.(ts|tsx)$/,
 34 |         enforce: 'pre',
 35 |         exclude: [PATH.NODE_MODULES_PATH],
 36 |         use: [
 37 |           {
 38 |             loader: 'tslint-loader',
 39 |             options: {
 40 |               // emitWarning: true
 41 |             },
 42 |           },
 43 |         ],
 44 |       },
 45 |       { test: /\.(ts|tsx)$/, loader: 'awesome-typescript-loader' },
 46 |       {
 47 |         test: /\.jsx?$/,
 48 |         include: [PATH.ROOT_PATH],
 49 |         exclude: [PATH.NODE_MODULES_PATH],
 50 |         enforce: 'pre',
 51 |         loader: 'eslint-loader',
 52 |         options: {
 53 |           emitWarning: true,
 54 |         },
 55 |       },
 56 |       {
 57 |         test: /\.jsx?$/,
 58 |         include: [PATH.ROOT_PATH],
 59 |         exclude: [PATH.NODE_MODULES_PATH],
 60 |         enforce: 'post',
 61 |         loader: 'babel-loader',
 62 |       },
 63 |       {
 64 |         test: /\.css$/,
 65 |         include: [PATH.NODE_MODULES_PATH],
 66 |         // exclude: [PATH.ROOT_PATH],
 67 |         enforce: 'post',
 68 |         use: [
 69 |           MiniCssExtractPlugin.loader,
 70 |           {
 71 |             loader: 'css-loader',
 72 |             options: {
 73 |               importLoaders: 1,
 74 |             },
 75 |           },
 76 |           {
 77 |             loader: 'postcss-loader',
 78 |             options: {
 79 |               plugins: loader => [
 80 |                 require('postcss-import')({
 81 |                   root: loader.resourcePath,
 82 |                 }),
 83 |                 require('autoprefixer')(),
 84 |                 require('cssnano')(),
 85 |               ],
 86 |             },
 87 |           },
 88 |         ],
 89 |       },
 90 |       {
 91 |         test: /\.css$/,
 92 |         include: [PATH.ROOT_PATH + 'lib'],
 93 |         // exclude: [PATH.ROOT_PATH],
 94 |         enforce: 'post',
 95 |         use: [
 96 |           MiniCssExtractPlugin.loader,
 97 |           {
 98 |             loader: 'css-loader',
 99 |             options: {
100 |               importLoaders: 1,
101 |             },
102 |           },
103 |           {
104 |             loader: 'postcss-loader',
105 |             options: {
106 |               plugins: loader => [
107 |                 require('postcss-import')({
108 |                   root: loader.resourcePath,
109 |                 }),
110 |                 require('autoprefixer')(),
111 |                 require('cssnano')(),
112 |               ],
113 |             },
114 |           },
115 |         ],
116 |       },
117 |       {
118 |         test: /\.css$/,
119 |         include: [PATH.SOURCE_PATH],
120 |         exclude: [PATH.NODE_MODULES_PATH],
121 |         enforce: 'post',
122 |         use: [
123 |           MiniCssExtractPlugin.loader,
124 |           {
125 |             loader: 'css-loader',
126 |             options: {
127 |               modules: true,
128 |               importLoaders: 1,
129 |               localIdentName: '[name]__[local]',
130 |             },
131 |           },
132 |           {
133 |             loader: 'postcss-loader',
134 |             options: {
135 |               plugins: loader => [
136 |                 require('postcss-import')({
137 |                   root: loader.resourcePath,
138 |                 }),
139 |                 require('autoprefixer')(),
140 |                 require('cssnano')({ safe: true }),
141 |               ],
142 |             },
143 |           },
144 |         ],
145 |       },
146 |       {
147 |         test: /\.scss$/,
148 |         use: [
149 |           MiniCssExtractPlugin.loader,
150 |           {
151 |             loader: 'css-loader',
152 |             options: {
153 |               importLoaders: 1,
154 |             },
155 |           },
156 |           {
157 |             loader: 'sass-loader',
158 |           },
159 |         ],
160 |       },
161 |       {
162 |         oneOf: [
163 |           /* rules */
164 |         ],
165 |       },
166 |       // only use one of these nested rules
167 | 
168 |       {
169 |         rules: [
170 |           /* rules */
171 |         ],
172 |       },
173 |       // use all of these nested rules (combine with conditions to be useful)
174 | 
175 |       {
176 |         resource: {
177 |           and: [
178 |             /* conditions */
179 |           ],
180 |         },
181 |       },
182 |       // matches only if all conditions are matched
183 | 
184 |       {
185 |         resource: {
186 |           or: [
187 |             /* conditions */
188 |           ],
189 |         },
190 |       },
191 |       {
192 |         resource: [
193 |           /* conditions */
194 |         ],
195 |       },
196 |     ],
197 |   },
198 |   resolve: {
199 |     modules: ['node_modules', path.resolve(__dirname, 'app')],
200 |     extensions: ['.ts', '.tsx', '.js', '.json', '.jsx', '.css'],
201 |   },
202 |   devtool: 'source-map',
203 |   devServer: {
204 |     contentBase: path.join(__dirname, 'dist'),
205 |     compress: true,
206 |     disableHostCheck: true,
207 |     historyApiFallback: true,
208 |     host: '0.0.0.0',
209 |     port: 9000,
210 |   },
211 |   plugins: [
212 |     new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),
213 |     new webpack.ProvidePlugin({
214 |       React: 'React',
215 |       react: 'React',
216 |       'window.react': 'React',
217 |       'window.React': 'React',
218 |       $: 'jquery',
219 |       jQuery: 'jquery',
220 |       'window.jQuery': 'jquery',
221 |     }),
222 |     new WebpackAssetsManifest({
223 |       fileName: 'manifest-rev.json',
224 |     }),
225 |   ],
226 | };
227 | 


--------------------------------------------------------------------------------
/webpack/build_path.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const ROOT_PATH = path.join(__dirname, '../');
 3 | const ASSET_PATH = path.join(ROOT_PATH, 'dist');
 4 | const NODE_MODULES_PATH = path.join(ROOT_PATH, './node_modules');
 5 | const HTML_PATH = path.join(ROOT_PATH, './src/html');
 6 | const SOURCE_PATH = path.join(ROOT_PATH, './src');
 7 | 
 8 | module.exports = {
 9 |   ROOT_PATH: ROOT_PATH,
10 |   ASSET_PATH: ASSET_PATH,
11 |   NODE_MODULES_PATH: NODE_MODULES_PATH,
12 |   HTML_PATH: HTML_PATH,
13 |   SOURCE_PATH: SOURCE_PATH
14 | };
15 | 


--------------------------------------------------------------------------------
/webpack/development.config.js:
--------------------------------------------------------------------------------
 1 | const base = require('./base.js');
 2 | const objectAssign = require('object-assign');
 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 5 | const PATH = require('./build_path');
 6 | const config = objectAssign(base, {
 7 |   mode: 'development',
 8 |   output: {
 9 |     publicPath: '/',
10 |     filename: '[name].js',
11 |   },
12 | });
13 | config.plugins.push(
14 |   new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
15 |   new HtmlWebpackPlugin({
16 |     template: PATH.HTML_PATH + '/layout.html',
17 |     title: 'react-inputs-validation',
18 |     page: 'index',
19 |     filename: 'index.html',
20 |     hash: false,
21 |     chunksSortMode: function(chunk1, chunk2) {
22 |       var orders = ['index'];
23 |       var order1 = orders.indexOf(chunk1.names[0]);
24 |       var order2 = orders.indexOf(chunk2.names[0]);
25 |       if (order1 > order2) {
26 |         return 1;
27 |       } else if (order1 < order2) {
28 |         return -1;
29 |       } else {
30 |         return 0;
31 |       }
32 |     },
33 |   }),
34 | );
35 | module.exports = config;
36 | 


--------------------------------------------------------------------------------
/webpack/production.config.js:
--------------------------------------------------------------------------------
 1 | const base = require('./base.js');
 2 | const PATH = require('./build_path');
 3 | const objectAssign = require('object-assign');
 4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 6 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 7 | 
 8 | const config = objectAssign(base, {
 9 |   mode: 'production',
10 |   devtool: 'cheap-source-map',
11 |   output: {
12 |     publicPath: '/react-inputs-validation/dist/',
13 |     filename: '[name]-[chunkhash].js',
14 |   },
15 |   optimization: {
16 |     minimizer: [
17 |       new UglifyJSPlugin({
18 |         uglifyOptions: {
19 |           output: {
20 |             comments: false,
21 |           },
22 |           warnings: false,
23 |         },
24 |       }),
25 |     ],
26 |   },
27 | });
28 | 
29 | config.plugins.push(
30 |   new MiniCssExtractPlugin({ filename: 'css/[name]-[hash].css' }),
31 |   new HtmlWebpackPlugin({
32 |     template: PATH.HTML_PATH + '/layout.html',
33 |     title: 'react-inputs-validation',
34 |     page: 'index',
35 |     filename: '../index.html',
36 |     hash: false,
37 |     chunksSortMode: function(chunk1, chunk2) {
38 |       var orders = ['index'];
39 |       var order1 = orders.indexOf(chunk1.names[0]);
40 |       var order2 = orders.indexOf(chunk2.names[0]);
41 |       if (order1 > order2) {
42 |         return 1;
43 |       } else if (order1 < order2) {
44 |         return -1;
45 |       } else {
46 |         return 0;
47 |       }
48 |     },
49 |   }),
50 | );
51 | 
52 | module.exports = config;
53 | 


--------------------------------------------------------------------------------
/webpack/umd.base.config.js:
--------------------------------------------------------------------------------
  1 | const env = require('yargs').argv.env; // use --env with webpack 2
  2 | const path = require('path');
  3 | const PATH = require('./build_path');
  4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  5 | 
  6 | let libraryName = 'react-inputs-validation';
  7 | 
  8 | let plugins = [],
  9 |   outputFile;
 10 | 
 11 | if (env === 'minify') {
 12 |   plugins.push(new MiniCssExtractPlugin({ filename: libraryName + '.min.css' }));
 13 |   outputFile = libraryName + '.min.js';
 14 | } else {
 15 |   plugins.push(new MiniCssExtractPlugin({ filename: libraryName + '.css' }));
 16 |   outputFile = libraryName + '.js';
 17 | }
 18 | 
 19 | module.exports = {
 20 |   mode: 'production',
 21 |   context: PATH.ROOT_PATH,
 22 |   module: {
 23 |     rules: [
 24 |       {
 25 |         test: /\.mp3?$/,
 26 |         include: [PATH.ROOT_PATH],
 27 |         exclude: [PATH.NODE_MODULES_PATH],
 28 |         loader: 'file-loader?name=audio/[name]-[hash].[ext]',
 29 |       },
 30 |       {
 31 |         test: /\.(woff|woff2|eot|ttf|otf)\??.*$/,
 32 |         include: [PATH.ROOT_PATH],
 33 |         // exclude: [PATH.NODE_MODULES_PATH],
 34 |         loader: 'url-loader?limit=1&name=font/[name]-[hash].[ext]',
 35 |       },
 36 |       {
 37 |         test: /\.(jpe?g|png|gif|svg)\??.*$/,
 38 |         include: [PATH.ROOT_PATH],
 39 |         // exclude: [PATH.NODE_MODULES_PATH],
 40 |         loader: 'url-loader?limit=1&name=img/[name]-[hash].[ext]',
 41 |       },
 42 |       {
 43 |         test: /\.(ts|tsx)$/,
 44 |         enforce: 'pre',
 45 |         use: [
 46 |           {
 47 |             loader: 'tslint-loader',
 48 |             options: {
 49 |               // emitWarning: true
 50 |             },
 51 |           },
 52 |         ],
 53 |       },
 54 |       { test: /\.(ts|tsx)$/, loader: 'awesome-typescript-loader' },
 55 |       {
 56 |         test: /\.jsx?$/,
 57 |         include: [PATH.ROOT_PATH],
 58 |         exclude: [PATH.NODE_MODULES_PATH],
 59 |         enforce: 'post',
 60 |         loader: 'eslint-loader',
 61 |         options: {
 62 |           emitWarning: true,
 63 |         },
 64 |       },
 65 |       {
 66 |         test: /\.jsx?$/,
 67 |         include: [PATH.ROOT_PATH],
 68 |         exclude: [PATH.NODE_MODULES_PATH],
 69 |         loader: 'babel-loader',
 70 |       },
 71 |       {
 72 |         test: /\.css$/,
 73 |         enforce: 'post',
 74 |         use: [
 75 |           MiniCssExtractPlugin.loader,
 76 |           {
 77 |             loader: 'css-loader',
 78 |             options: {
 79 |               modules: true,
 80 |               importLoaders: 1,
 81 |               localIdentName: '[name]__[local]',
 82 |             },
 83 |           },
 84 |           {
 85 |             loader: 'postcss-loader',
 86 |             options: {
 87 |               plugins: loader => [
 88 |                 require('postcss-import')({
 89 |                   root: loader.resourcePath,
 90 |                 }),
 91 |                 require('autoprefixer')(),
 92 |                 require('cssnano')({ safe: true }),
 93 |               ],
 94 |             },
 95 |           },
 96 |         ],
 97 |       },
 98 |     ],
 99 |   },
100 |   resolve: {
101 |     modules: ['node_modules', path.resolve(__dirname, 'app')],
102 |     extensions: ['.ts', '.tsx', '.js', '.json', '.jsx', '.css'],
103 |   },
104 |   devtool: 'source-map',
105 |   output: {
106 |     path: PATH.ROOT_PATH + '/lib',
107 |     filename: outputFile,
108 |     library: libraryName,
109 |     libraryTarget: 'umd',
110 |     globalObject: 'this',
111 |   },
112 |   plugins,
113 | };
114 | 


--------------------------------------------------------------------------------
/webpack/umd.global.config.js:
--------------------------------------------------------------------------------
 1 | const baseConfig = require('./umd.base.config');
 2 | const PATH = require('./build_path');
 3 | module.exports = {
 4 | 	...baseConfig,
 5 | 	entry: PATH.ROOT_PATH + 'src/js/Inputs/index.global.ts',
 6 | 	output: {
 7 | 		...baseConfig.output,
 8 | 		path: PATH.ROOT_PATH + '/lib',
 9 | 	},
10 | 	externals: {
11 | 		react: 'React',
12 | 		'react-dom': 'ReactDOM',
13 | 	},
14 | };
15 | 


--------------------------------------------------------------------------------
/webpack/umd.local.config.js:
--------------------------------------------------------------------------------
 1 | const baseConfig = require('./umd.base.config');
 2 | const PATH = require('./build_path');
 3 | module.exports = {
 4 | 	...baseConfig,
 5 | 	entry: PATH.ROOT_PATH + 'src/js/Inputs/index.ts',
 6 | 	devtool: false,
 7 | 	output: {
 8 | 		...baseConfig.output,
 9 | 		path: PATH.ROOT_PATH + '/lib/components',
10 | 		filename: 'index.js',
11 | 	},
12 | 	externals: {
13 | 		react: 'react',
14 | 		'react-dom': 'react-dom',
15 | 	},
16 | };
17 | 


--------------------------------------------------------------------------------