├── .nojekyll ├── _config.yml ├── .eslintrc ├── .env ├── src ├── Example.css ├── lib │ ├── types │ │ ├── util.d.ts │ │ ├── CardNumberInput.d.ts │ │ ├── NumberInput.d.ts │ │ ├── index.d.ts │ │ └── DecimalInput.d.ts │ ├── index.js │ ├── util.js │ ├── NumberInput.js │ ├── CardNumberInput.js │ └── DecimalInput.js ├── index.js └── Example.js ├── .vscode └── settings.json ├── docs ├── favicon.png ├── static │ ├── css │ │ ├── main.3025768d.chunk.css │ │ └── main.3025768d.chunk.css.map │ └── js │ │ ├── 2.cba3d640.chunk.js.LICENSE.txt │ │ ├── runtime-main.9e7cde7c.js │ │ ├── runtime-main.9e7cde7c.js.map │ │ ├── main.4d5252d6.chunk.js │ │ └── main.4d5252d6.chunk.js.map ├── asset │ ├── Nahid.eot │ ├── Nahid.ttf │ └── Nahid.woff ├── manifest.json ├── asset-manifest.json └── index.html ├── public ├── favicon.png ├── asset │ ├── Nahid.eot │ ├── Nahid.ttf │ └── Nahid.woff ├── manifest.json └── index.html ├── .babelrc.json ├── .gitignore ├── LICENSE ├── package.json └── README.md /.nojekyll: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-minimal -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { "extends": "react-app" } 2 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | PUBLIC_URL=/react-hichestan-numberinput 2 | -------------------------------------------------------------------------------- /src/Example.css: -------------------------------------------------------------------------------- 1 | 2 | .red { 3 | color: red; 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "search.exclude": { 3 | "/docs": true 4 | } 5 | } -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karianpour/react-hichestan-numberinput/HEAD/docs/favicon.png -------------------------------------------------------------------------------- /docs/static/css/main.3025768d.chunk.css: -------------------------------------------------------------------------------- 1 | .red{color:red} 2 | /*# sourceMappingURL=main.3025768d.chunk.css.map */ -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karianpour/react-hichestan-numberinput/HEAD/public/favicon.png -------------------------------------------------------------------------------- /docs/asset/Nahid.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karianpour/react-hichestan-numberinput/HEAD/docs/asset/Nahid.eot -------------------------------------------------------------------------------- /docs/asset/Nahid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karianpour/react-hichestan-numberinput/HEAD/docs/asset/Nahid.ttf -------------------------------------------------------------------------------- /docs/asset/Nahid.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karianpour/react-hichestan-numberinput/HEAD/docs/asset/Nahid.woff -------------------------------------------------------------------------------- /public/asset/Nahid.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karianpour/react-hichestan-numberinput/HEAD/public/asset/Nahid.eot -------------------------------------------------------------------------------- /public/asset/Nahid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karianpour/react-hichestan-numberinput/HEAD/public/asset/Nahid.ttf -------------------------------------------------------------------------------- /public/asset/Nahid.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karianpour/react-hichestan-numberinput/HEAD/public/asset/Nahid.woff -------------------------------------------------------------------------------- /src/lib/types/util.d.ts: -------------------------------------------------------------------------------- 1 | export const NUMBER_FORMAT_FARSI: "FARSI"; 2 | 3 | export const NUMBER_FORMAT_LATIN: "LATIN"; 4 | 5 | export type NumberFormat = NUMBER_FORMAT_FARSI | NUMBER_FORMAT_LATIN; 6 | -------------------------------------------------------------------------------- /docs/static/css/main.3025768d.chunk.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack://src/Example.css"],"names":[],"mappings":"AACA,KACE,SACF","file":"main.3025768d.chunk.css","sourcesContent":["\n.red {\n color: red;\n}\n"]} -------------------------------------------------------------------------------- /.babelrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ], 6 | "plugins": [ 7 | [ 8 | "@babel/plugin-proposal-class-properties" 9 | ] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /src/lib/index.js: -------------------------------------------------------------------------------- 1 | import NumberInput from "./NumberInput"; 2 | import DecimalInput from "./DecimalInput"; 3 | import CardNumberInput from "./CardNumberInput"; 4 | import { NUMBER_FORMAT_FARSI, NUMBER_FORMAT_LATIN} from './util'; 5 | 6 | export { NumberInput, DecimalInput, CardNumberInput, NUMBER_FORMAT_FARSI, NUMBER_FORMAT_LATIN }; 7 | -------------------------------------------------------------------------------- /docs/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.png", 7 | "sizes": "100x100", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.png", 7 | "sizes": "100x100", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/lib/types/CardNumberInput.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { NumberFormat } from "./util"; 3 | 4 | export type CardNumberInputProps = { 5 | numberFormat?: NumberFormat; 6 | inputRef?: any; 7 | getInputRef?: any; 8 | disabled?: boolean; 9 | readOnly?: boolean; 10 | } & React.ComponentProps<"input">; 11 | 12 | declare const CardNumberInput: React.FC; 13 | export default CardNumberInput; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | /dist 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | .idea 27 | -------------------------------------------------------------------------------- /src/lib/types/NumberInput.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { NumberFormat } from "./util"; 3 | 4 | 5 | export type NumberInputProps = { 6 | numberFormat?: NumberFormat; 7 | inputRef?: any; 8 | getInputRef?: any; 9 | disabled?: boolean; 10 | readOnly?: boolean; 11 | maxLength?: number; 12 | } & React.ComponentProps<"input">; 13 | 14 | declare const NumberInput: React.FC; 15 | export default NumberInput; 16 | -------------------------------------------------------------------------------- /src/lib/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import DecimalInput, {DecimalInputProps} from "./DecimalInput"; 2 | import NumberInput, {NumberInputProps} from "./NumberInput"; 3 | import CardNumberInput, {CardNumberInputProps} from "./CardNumberInput"; 4 | import { NUMBER_FORMAT_FARSI, NUMBER_FORMAT_LATIN, NumberFormat } from "./util"; 5 | 6 | export { 7 | DecimalInput, 8 | NumberInput, 9 | CardNumberInput, 10 | NUMBER_FORMAT_FARSI, 11 | NUMBER_FORMAT_LATIN, 12 | NumberFormat, 13 | NumberInputProps, 14 | DecimalInputProps, 15 | CardNumberInputProps, 16 | }; 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from "react-dom"; 3 | import Example from './Example'; 4 | 5 | const App = () => ( 6 |
7 |

کمپننت عدد

8 |
ورژن ۲،۰ ساخت ۲۱ 9 |
    10 |
  • نمایش عدد فارسی یا لاتین
    • 11 |
  • ذخیره عدد لاتین، باعث میشود که داده صحیح به سرور داده شود
    • 12 |
  • نمایش غیر عدد در صورتی که داده از بیرون به آن وارد شود.
    • 13 |
  • نمایش کیبورد عددی در مبایل (غیر از مرورگر سامسونگ)
    • 14 |
  • قابل استفاده با Create-React-App / NextJs
    • 15 |
16 | 17 | 18 | 19 |
20 | ); 21 | 22 | render(, document.getElementById("root")); 23 | -------------------------------------------------------------------------------- /src/lib/types/DecimalInput.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { ChangeEvent } from "react"; 3 | import { NumberFormat } from "./util"; 4 | 5 | interface NumberEventType extends ChangeEvent { 6 | target: EventTarget & HTMLInputElement & { value: number }; 7 | } 8 | interface StringEventType extends ChangeEvent { 9 | target: EventTarget & HTMLInputElement & { value: string }; 10 | } 11 | 12 | export type DecimalInputProps = { 13 | numberFormat?: NumberFormat; 14 | inputRef?: any; 15 | getInputRef?: any; 16 | disabled?: boolean; 17 | readOnly?: boolean; 18 | thousandSeparator?: string; 19 | decimalSeparator?: string; 20 | maxDigits?: number; 21 | maxDecimal?: number; 22 | } & ( 23 | | { 24 | onChange?: (event: StringEventType) => void; 25 | value?: string; 26 | asString?: true; 27 | } 28 | | { 29 | onChange?: (event: NumberEventType) => void; 30 | value?: number; 31 | asString?: false; 32 | } 33 | ) & 34 | React.ComponentProps<"input">; 35 | 36 | declare const DecimalInput: React.FC; 37 | export default DecimalInput; 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 - 2020 Kayvan Arianpour 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. -------------------------------------------------------------------------------- /docs/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/react-hichestan-numberinput/static/css/main.3025768d.chunk.css", 4 | "main.js": "/react-hichestan-numberinput/static/js/main.4d5252d6.chunk.js", 5 | "main.js.map": "/react-hichestan-numberinput/static/js/main.4d5252d6.chunk.js.map", 6 | "runtime-main.js": "/react-hichestan-numberinput/static/js/runtime-main.9e7cde7c.js", 7 | "runtime-main.js.map": "/react-hichestan-numberinput/static/js/runtime-main.9e7cde7c.js.map", 8 | "static/js/2.cba3d640.chunk.js": "/react-hichestan-numberinput/static/js/2.cba3d640.chunk.js", 9 | "static/js/2.cba3d640.chunk.js.map": "/react-hichestan-numberinput/static/js/2.cba3d640.chunk.js.map", 10 | "index.html": "/react-hichestan-numberinput/index.html", 11 | "static/css/main.3025768d.chunk.css.map": "/react-hichestan-numberinput/static/css/main.3025768d.chunk.css.map", 12 | "static/js/2.cba3d640.chunk.js.LICENSE.txt": "/react-hichestan-numberinput/static/js/2.cba3d640.chunk.js.LICENSE.txt" 13 | }, 14 | "entrypoints": [ 15 | "static/js/runtime-main.9e7cde7c.js", 16 | "static/js/2.cba3d640.chunk.js", 17 | "static/css/main.3025768d.chunk.css", 18 | "static/js/main.4d5252d6.chunk.js" 19 | ] 20 | } -------------------------------------------------------------------------------- /docs/static/js/2.cba3d640.chunk.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /** @license React v0.20.2 8 | * scheduler.production.min.js 9 | * 10 | * Copyright (c) Facebook, Inc. and its affiliates. 11 | * 12 | * This source code is licensed under the MIT license found in the 13 | * LICENSE file in the root directory of this source tree. 14 | */ 15 | 16 | /** @license React v17.0.2 17 | * react-dom.production.min.js 18 | * 19 | * Copyright (c) Facebook, Inc. and its affiliates. 20 | * 21 | * This source code is licensed under the MIT license found in the 22 | * LICENSE file in the root directory of this source tree. 23 | */ 24 | 25 | /** @license React v17.0.2 26 | * react-jsx-runtime.production.min.js 27 | * 28 | * Copyright (c) Facebook, Inc. and its affiliates. 29 | * 30 | * This source code is licensed under the MIT license found in the 31 | * LICENSE file in the root directory of this source tree. 32 | */ 33 | 34 | /** @license React v17.0.2 35 | * react.production.min.js 36 | * 37 | * Copyright (c) Facebook, Inc. and its affiliates. 38 | * 39 | * This source code is licensed under the MIT license found in the 40 | * LICENSE file in the root directory of this source tree. 41 | */ 42 | -------------------------------------------------------------------------------- /src/lib/util.js: -------------------------------------------------------------------------------- 1 | export const NUMBER_FORMAT_FARSI = 'FARSI'; 2 | export const NUMBER_FORMAT_LATIN = 'LATIN'; 3 | 4 | export function mapToFarsi(str) { 5 | if(!str) return str; 6 | return str.toString().replace(/[1234567890١٢٣٤٥٦٧٨٩٠]/gi, e => { const c = e.charCodeAt(0); return String.fromCharCode(c + (c < 60 ? 1728 : 144)) }) 7 | } 8 | 9 | export function mapToLatin(str) { 10 | if(!str) return str; 11 | return str.toString().replace(/[۱۲۳۴۵۶۷۸۹۰١٢٣٤٥٦٧٨٩٠]/gi, e => { const c = e.charCodeAt(0); return String.fromCharCode(c - (c < 1770 ? 1584 : 1728)) }) 12 | } 13 | 14 | export function stripAnyThingButDigits(str) { 15 | if(!str) return str; 16 | return str.toString().replace(/[^1234567890۱۲۳۴۵۶۷۸۹۰١٢٣٤٥٦٧٨٩٠]/gi, ''); 17 | } 18 | 19 | export function hasStringACharToGoToNext (str) { 20 | if(str.indexOf('.')>=0) return true; 21 | if(str.indexOf(',')>=0) return true; 22 | // if(str.indexOf('/')>=0) return true; 23 | if(str.indexOf('-')>=0) return true; 24 | if(str.indexOf(';')>=0) return true; 25 | if(str.indexOf('*')>=0) return true; 26 | if(str.indexOf('#')>=0) return true; 27 | if(str.indexOf(' ')>=0) return true; 28 | if(str.indexOf('،')>=0) return true; 29 | return false; 30 | } 31 | 32 | /** 33 | * @param {string} str 34 | * @param {number} n 35 | */ 36 | export function repeatStr(str, n){ 37 | let r = ''; 38 | for(let i=0; i0.2%", 53 | "not dead", 54 | "not op_mini all" 55 | ], 56 | "development": [ 57 | "last 1 chrome version", 58 | "last 1 firefox version", 59 | "last 1 safari version" 60 | ] 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | react-hichestan-numberinput 23 | 38 | 39 | 40 | 43 |
44 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | react-hichestan-numberinput
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React component for number input 2 | 3 | A persian number input. 4 | 5 | The component is compatible with react 16. 6 | The component is controlled, so the component code is imperative. We need that to manipulate the input data entry behavior. 7 | 8 | ## Demo 9 | 10 | Here you can experience a live [demo](https://karianpour.github.io/react-hichestan-numberinput/) 11 | 12 | [Sandbox sample for Material-UI](https://codesandbox.io/s/mystifying-field-x40en?fontsize=14&hidenavigation=1&theme=dark) 13 | 14 | ### Features 15 | 16 | - Show farsi digits 17 | - The value is latin digit (suitable for backend data storage) 18 | - Number keypad on mobile devices (Samsung browser is not supported) 19 | - Copy and paste by keyboard on Mac/Linux, it is not tested on Windows but it should work. 20 | - Accept non digit value, it is not a bug, it is a feature, if the value sent from the back end has non digit data we have to show it to avid miss-understanding 21 | - Forward any style (or any other attributes) given to the component to the inner input element. 22 | - Forward the style and className changes after the first render to the inner input element. 23 | - Showing tel keypad if type='tel' 24 | - maxLength property to control maxumun acceptable number of digits 25 | - typeScript friendly (type are not complete yet but it works) 26 | - Create-React-App and NextJs compatible 27 | 28 | ## Installation 29 | 30 | Use `npm i react-hichestan-numberinput` in order to install the module. 31 | 32 | ## Usage 33 | 34 | see the example 35 | 36 | ## Material-ui 37 | 38 | If you happened to use it with material-ui v3, this is the way I used it : 39 | 40 | ```tsx 41 | import React from "react"; 42 | import { TextField, TextFieldProps } from "@material-ui/core"; 43 | import { DecimalInput, NumberInput, DecimalInputProps, NumberInputProps } from "react-hichestan-numberinput"; 44 | 45 | export const MaterialDecimalField = ({ 46 | value, 47 | inputProps, 48 | ...props 49 | }: { inputProps?: DecimalInputProps } & TextFieldProps) => { 50 | if (value === undefined || value === null) { 51 | value = ""; 52 | } 53 | 54 | // a bug in material-ui, it should be done by them 55 | const shrink = !!value || value === 0; 56 | 57 | return ( 58 | 67 | ); 68 | }; 69 | 70 | export const MaterialNumberField = ({ 71 | value, 72 | inputProps, 73 | ...props 74 | }: { inputProps?: NumberInputProps } & TextFieldProps) => { 75 | if (value === undefined || value === null) { 76 | value = ""; 77 | } 78 | 79 | // a bug in material-ui, it should be done by them 80 | const shrink = !!value || value === 0; 81 | 82 | return ( 83 | 92 | ); 93 | }; 94 | ``` 95 | 96 | ### number formats 97 | 98 | 'FARSI' / 'LATIN' 99 | 100 | ### Contribution 101 | 102 | Feel free to fork and add some feature. If you have time to do improvement on the U/I that will be appreciated. 103 | If some one for any reason wants to sand the date and time format in any other format than ISO 8601, we need to inject a date and time formatter into the component. 104 | 105 | To start, make a clone and run: 106 | 107 | ```bash 108 | npm install 109 | npm start 110 | ``` 111 | 112 | and browse [http://localhost:3000](http://localhost:3000) 113 | 114 | For publishing 115 | 116 | ```bash 117 | ./build-examples.sh 118 | npm run build 119 | npm publish 120 | ``` 121 | 122 | ### Acknowledgement 123 | 124 | The project is bootstrapped by create-component-lib. 125 | 126 | ### License 127 | 128 | MIT License 129 | Copyright (c) 2017 Kayvan Arianpour () 130 | Permission is hereby granted, free of charge, to any person obtaining a copy 131 | of this software and associated documentation files (the "Software"), to deal 132 | in the Software without restriction, including without limitation the rights 133 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 134 | copies of the Software, and to permit persons to whom the Software is 135 | furnished to do so, subject to the following conditions: 136 | 137 | The above copyright notice and this permission notice shall be included in all 138 | copies or substantial portions of the Software. 139 | 140 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 141 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 142 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 143 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 144 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 145 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 146 | SOFTWARE. 147 | -------------------------------------------------------------------------------- /src/Example.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NumberInput, DecimalInput, CardNumberInput, NUMBER_FORMAT_FARSI } from "./lib"; 3 | import {NUMBER_FORMAT_LATIN} from './lib'; 4 | import './Example.css'; 5 | 6 | class Example extends Component { 7 | state = { 8 | Number1: '123', 9 | Number2: '', 10 | Number3: 1200.246, 11 | color: false, 12 | bgColor: false, 13 | disabled: false, 14 | readOnly: false, 15 | Tel1: '0912', 16 | value1: '', 17 | placeholder: 'type/paste a number', 18 | }; 19 | 20 | constructor(){ 21 | super(); 22 | this.spanRef = React.createRef(); 23 | } 24 | 25 | componentDidMount(){ 26 | // this.interval = setInterval(this.toggleBgColor, 6000); 27 | // this.interval = setInterval(this.toggleColor, 3000); 28 | } 29 | 30 | componentWillUnmount(){ 31 | clearInterval(this.interval); 32 | } 33 | 34 | handleChange = (event) => { 35 | const newState = {}; 36 | const t = event.target; 37 | 38 | newState[t.name] = t.value; 39 | this.setState(newState, ()=>{ 40 | console.log('state', this.state) 41 | }); 42 | }; 43 | 44 | handleValueChange = (event) => { 45 | const newState = {}; 46 | const t = event.target; 47 | 48 | newState[t.name.substr(0, 7)] = t.value; 49 | this.setState(newState, ()=>{ 50 | console.log('state', this.state) 51 | }); 52 | }; 53 | 54 | toggleColor = () => { 55 | this.setState({ 56 | color: !this.state.color, 57 | }) 58 | }; 59 | 60 | toggleBgColor = () => { 61 | this.setState({ 62 | bgColor: !this.state.bgColor, 63 | }) 64 | }; 65 | 66 | toggleDisabled = () => { 67 | this.setState({ 68 | disabled: !this.state.disabled, 69 | }) 70 | }; 71 | 72 | toggleReadOnly = () => { 73 | this.setState({ 74 | readOnly: !this.state.readOnly, 75 | }) 76 | }; 77 | 78 | togglePlaceholder = () => { 79 | this.setState({ 80 | placeholder: 'پیست یا تایپ کنید', 81 | }) 82 | }; 83 | 84 | render(){ 85 | const className = this.state.color ? "red" : ""; 86 | const style = this.state.bgColor ? {backgroundColor: 'aqua'} : {}; 87 | const {disabled, readOnly, placeholder} = this.state; 88 | 89 | const showKeyCode = (e) => { 90 | this.spanRef.current.innerHTML = 'Key Code: ' + e.charCode.toString(); 91 | } 92 | 93 | 94 | return ( 95 | 96 |
97 |
98 |
99 |
100 | 104 |
105 |
106 | 111 |
112 |
113 |
114 | 119 |
120 | 124 |
125 |
126 |
127 |
128 | 133 |
134 | 138 |
139 |
140 |
141 | 146 |
147 |
148 | 164 |
165 |
166 | 167 | 168 | 169 | 170 | 171 | 172 |
173 | 174 | 175 | ); 176 | } 177 | } 178 | 179 | export default Example; 180 | -------------------------------------------------------------------------------- /docs/static/js/runtime-main.9e7cde7c.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","this","oldJsonpFunction","slice"],"mappings":"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","file":"static/js/runtime-main.9e7cde7c.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/react-hichestan-numberinput/\";\n\n \tvar jsonpArray = this[\"webpackJsonpreact-hichestan-numberinput\"] = this[\"webpackJsonpreact-hichestan-numberinput\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /src/lib/NumberInput.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import shallowEqualObjects from 'shallow-equal/objects'; 4 | 5 | import { mapToFarsi, mapToLatin, stripAnyThingButDigits, NUMBER_FORMAT_FARSI, NUMBER_FORMAT_LATIN} from './util'; 6 | 7 | class NumberInput extends Component { 8 | 9 | static propTypes = { 10 | /** 11 | * The ref to pass on the input, if empty it will be created internally 12 | */ 13 | inputRef: PropTypes.any, 14 | getInputRef: PropTypes.any, 15 | /** 16 | * The name that will be set while firing the onChange event in the target object 17 | */ 18 | name: PropTypes.string, 19 | /** 20 | * Callback function that is fired when the cart number value changes. 21 | */ 22 | onChange: PropTypes.func, 23 | /** 24 | * Override the inline-styles of the root element. 25 | */ 26 | style: PropTypes.object, 27 | /** 28 | * The css class name of the root element. 29 | */ 30 | className: PropTypes.string, 31 | /** 32 | * Disables the number input. 33 | */ 34 | disabled: PropTypes.bool, 35 | /** 36 | * makes the number input readonly. 37 | */ 38 | readOnly: PropTypes.bool, 39 | /** 40 | * accepted number digit count. 41 | */ 42 | maxLength: PropTypes.number, 43 | /** 44 | * Callback function that is fired when a click event occurs on the input. 45 | */ 46 | onClick: PropTypes.func, 47 | /** 48 | * Callback function that is fired when the input gains focus. 49 | */ 50 | onFocus: PropTypes.func, 51 | /** 52 | * Sets the value for the number input. 53 | */ 54 | value: PropTypes.string, 55 | }; 56 | 57 | constructor(props) { 58 | super(props); 59 | let ref = props.inputRef || props.getInputRef; 60 | if(ref && typeof ref === 'function'){ 61 | ref = ref(); 62 | } 63 | this.inputRef = ref ? ref : React.createRef(); 64 | // this.rr = React.createRef(); 65 | 66 | this.values = this.readValuesFromProps(props); 67 | } 68 | 69 | readValuesFromProps = (props) => { 70 | const value = props.value || ''; 71 | const valueToShow = this.mapValue(value, props.numberFormat); 72 | 73 | return { 74 | value, 75 | valueToShow, 76 | selectionStart: undefined, 77 | selectionEnd: undefined, 78 | }; 79 | }; 80 | 81 | handleKeyDown = (event) => { 82 | // console.log('keyCode: ', event.keyCode, 'key: ', event.key); 83 | if(this.props.disabled || this.props.readOnly) { 84 | event.preventDefault(); 85 | }else if(event.keyCode===8) { //backspace 86 | event.preventDefault(); 87 | this.updateState(this.deleteValue(event.target, -1)); 88 | }else if(event.keyCode===46){ //delete 89 | event.preventDefault(); 90 | this.updateState(this.deleteValue(event.target, 1)); 91 | }else if(event.keyCode>=48 && event.keyCode<=57){ //digits 92 | event.preventDefault(); 93 | // console.log('digit'); 94 | this.updateState(this.updateValue(event.target, (event.keyCode - 48).toString(), this.props.numberFormat)); 95 | }else if(event.keyCode>=96 && event.keyCode<=105){ //digits 96 | event.preventDefault(); 97 | // console.log('digit'); 98 | this.updateState(this.updateValue(event.target, (event.keyCode - 96).toString(), this.props.numberFormat)); 99 | }else if((event.key>='۰' && event.key<='۹') || (event.key>='٠' && event.key<='٩')){ //digits 100 | event.preventDefault(); 101 | // console.log('digit'); 102 | this.updateState(this.updateValue(event.target, event.key, this.props.numberFormat)); 103 | }else if(event.keyCode>=35 && event.keyCode<=40){ //arrows 104 | }else if(event.keyCode===9){ //tab 105 | }else if(event.keyCode===13){ //return 106 | this.hideKeyboard(); 107 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===67 || event.keyCode===86 || event.keyCode===88)){ //copy/paste/cut 108 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===82)){ //refresh key 109 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===82)){ //refresh key 110 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===73)){ //inspector 111 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===65)){ //select all 112 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===76)){ //location focus 113 | }else if(event.keyCode>=112 && event.keyCode<=123){ // All other F keys 114 | }else if(event.keyCode===229){ //android bug workaround 115 | }else{ 116 | // console.log('other'); 117 | // console.log('keyCode: ', event.keyCode, 'key: ', event.key, 'ctrlKey: ', event.ctrlKey); 118 | // this.rr.current.innerText = `keyCode: ${event.keyCode} key: ${event.key} ctrlKey: ${event.ctrlKey}`; 119 | event.preventDefault(); 120 | } 121 | }; 122 | 123 | hideKeyboard = () => { 124 | this.inputRef.current.blur(); 125 | } 126 | 127 | handlePaste = (event) => { 128 | event.preventDefault(); 129 | if(this.props.disabled || this.props.readOnly) return; 130 | 131 | const enteredValue = stripAnyThingButDigits((event.clipboardData || window.clipboardData).getData('text')); 132 | 133 | this.updateState(this.updateValue(event.target, enteredValue, this.props.numberFormat)); 134 | }; 135 | 136 | handleInput = (event) => { 137 | if(this.props.disabled || this.props.readOnly) return; 138 | if(this.values.valueToShow===event.target.value) return; 139 | 140 | const enteredValue = stripAnyThingButDigits(event.target.value); 141 | 142 | this.updateState(this.recheckValue(event.target, enteredValue, this.props.numberFormat), true); 143 | }; 144 | 145 | mapValue = (value, numberFormat) => { 146 | if(numberFormat===NUMBER_FORMAT_FARSI){ 147 | return mapToFarsi(value); 148 | }else if(numberFormat===NUMBER_FORMAT_LATIN){ 149 | return mapToLatin(value); 150 | } 151 | return mapToFarsi(value); 152 | }; 153 | 154 | 155 | updateState = (newState, forceFireChange, noFireOnChange) => { 156 | if(!newState) return; 157 | 158 | this.values = newState; 159 | let fireOnChangeInTheEnd = false; 160 | if(this.inputRef.current.value !== this.values.valueToShow){ 161 | fireOnChangeInTheEnd = true; 162 | this.inputRef.current.value = this.values.valueToShow; 163 | } 164 | if(this.inputRef.current===document.activeElement){ 165 | // console.log('has focus :D'); 166 | this.inputRef.current.setSelectionRange(this.values.selectionStart, this.values.selectionEnd); 167 | }else{ 168 | // console.log('has not focus :('); 169 | } 170 | if(fireOnChangeInTheEnd || forceFireChange){ 171 | if(!noFireOnChange){ 172 | this.fireOnChange(); 173 | } 174 | } 175 | }; 176 | 177 | updateValue = (element, enteredValue, numberFormat) => { 178 | const enteredValueMapped = this.mapValue(enteredValue, numberFormat); 179 | let valueToShow = element.value; 180 | let selectionStart = element.selectionStart; 181 | let selectionEnd = element.selectionEnd; 182 | 183 | let lengthToBe = valueToShow.length + enteredValue.length - (selectionEnd - selectionStart) 184 | 185 | if(this.props.maxLength && lengthToBe > this.props.maxLength){ 186 | return; 187 | } 188 | 189 | valueToShow = valueToShow.substring(0, selectionStart) + enteredValueMapped + valueToShow.substring(selectionEnd); 190 | 191 | selectionStart += enteredValueMapped.length; 192 | selectionEnd = selectionStart; 193 | 194 | const value = mapToLatin(valueToShow); 195 | 196 | return { 197 | value, 198 | valueToShow, 199 | selectionStart, 200 | selectionEnd, 201 | }; 202 | }; 203 | 204 | recheckValue = (element, enteredValue, numberFormat) => { 205 | let valueToShow = this.mapValue(enteredValue, numberFormat); 206 | let selectionStart = element.selectionStart; 207 | let selectionEnd = element.selectionEnd; 208 | 209 | const value = mapToLatin(valueToShow); 210 | 211 | return { 212 | value, 213 | valueToShow, 214 | selectionStart, 215 | selectionEnd, 216 | }; 217 | }; 218 | 219 | deleteValue = (element, qty) => { 220 | let valueToShow = element.value; 221 | let selectionStart = element.selectionStart; 222 | let selectionEnd = element.selectionEnd; 223 | 224 | // console.log({selectionStart, selectionEnd}) 225 | 226 | if(selectionStart===selectionEnd){ 227 | if(qty < 0) { 228 | if(selectionStart===0) return; 229 | valueToShow = valueToShow.substring(0, selectionStart + qty) + valueToShow.substring(selectionEnd); 230 | selectionStart += qty; 231 | }else{ 232 | if(selectionEnd===valueToShow.length) return; 233 | valueToShow = valueToShow.substring(0, selectionStart) + valueToShow.substring(selectionEnd+qty); 234 | } 235 | }else{ 236 | valueToShow = valueToShow.substring(0, selectionStart) + valueToShow.substring(selectionEnd); 237 | } 238 | 239 | selectionEnd = selectionStart; 240 | 241 | const value = mapToLatin(valueToShow); 242 | 243 | return { 244 | value, 245 | valueToShow, 246 | selectionStart, 247 | selectionEnd, 248 | }; 249 | }; 250 | 251 | fireOnChange = () => { 252 | if(this.props.onChange){ 253 | this.props.onChange({target: {name: this.props.name, value: this.values.value}}); 254 | } 255 | }; 256 | 257 | shouldComponentUpdate(nextProps, nextState){ 258 | if(nextProps.value !== this.values.value || nextProps.numberFormat !== this.props.numberFormat){ 259 | this.updateState(this.readValuesFromProps(nextProps), false, true); 260 | } 261 | if(!shallowEqualObjects(nextProps.style, this.props.style)){ 262 | return true; 263 | } 264 | if(nextProps.className !== this.props.className){ 265 | this.inputRef.current.className = nextProps.className; 266 | } 267 | if(nextProps.disabled !== this.props.disabled){ 268 | this.inputRef.current.disabled = nextProps.disabled; 269 | } 270 | if(nextProps.readOnly !== this.props.readOnly){ 271 | this.inputRef.current.readOnly = nextProps.readOnly; 272 | } 273 | if(nextProps.placeholder !== this.props.placeholder){ 274 | this.inputRef.current.placeholder = nextProps.placeholder; 275 | } 276 | return false; 277 | } 278 | 279 | render() { 280 | const {value, onChange, onInput, onPast, onKeyDown, pattern, inputMode, type, ref, inputRef, getInputRef, numberFormat, defaultValue, ...rest} = this.props; 281 | const {valueToShow} = this.values; 282 | 283 | // const localInputMode = this.props.type === 'tel' ? 'tel' : 'numeric'; // as we use type=tel, then we do not need it any more 284 | // const localPattern = '[0-9]*'; // it has problem with the form checking, as we insert persian digit, it is not acceptable for the browser 285 | 286 | return ( 287 | 300 | ); 301 | //

empty

302 | 303 | } 304 | } 305 | export default NumberInput; 306 | -------------------------------------------------------------------------------- /src/lib/CardNumberInput.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import shallowEqualObjects from 'shallow-equal/objects'; 4 | import { mapToFarsi, mapToLatin, hasStringACharToGoToNext, repeatStr, NUMBER_FORMAT_FARSI, NUMBER_FORMAT_LATIN} from './util'; 5 | 6 | const CARD_SEPERATOR = '-'; 7 | const SEPERATORES_REGEX = new RegExp(`[ ${CARD_SEPERATOR}]`, 'g'); 8 | const MATCH_REGEX = new RegExp(`[0-9]{4}[${CARD_SEPERATOR}][0-9]{4}[${CARD_SEPERATOR}][0-9]{4}[${CARD_SEPERATOR}][0-9]{4}`); 9 | const EMPTY_VALUE = ` ${CARD_SEPERATOR} ${CARD_SEPERATOR} ${CARD_SEPERATOR} `; 10 | 11 | 12 | class CardNumberInput extends Component { 13 | 14 | static propTypes = { 15 | /** 16 | * The ref to pass on the input, if empty it will be created internally 17 | */ 18 | inputRef: PropTypes.any, 19 | getInputRef: PropTypes.any, 20 | /** 21 | * The name that will be set while firing the onChange event in the target object 22 | */ 23 | name: PropTypes.string, 24 | /** 25 | * Callback function that is fired when the cart number value changes. 26 | */ 27 | onChange: PropTypes.func, 28 | /** 29 | * Override the inline-styles of the root element. 30 | */ 31 | style: PropTypes.object, 32 | /** 33 | * The css class name of the root element. 34 | */ 35 | className: PropTypes.string, 36 | /** 37 | * Disables the card number. 38 | */ 39 | disabled: PropTypes.bool, 40 | /** 41 | * makes the card number readonly. 42 | */ 43 | readOnly: PropTypes.bool, 44 | /** 45 | * Callback function that is fired when a click event occurs on the input. 46 | */ 47 | onClick: PropTypes.func, 48 | /** 49 | * Callback function that is fired when the input gains focus. 50 | */ 51 | onFocus: PropTypes.func, 52 | /** 53 | * Sets the value for the card number input. 54 | */ 55 | value: PropTypes.string, 56 | }; 57 | 58 | constructor(props) { 59 | super(props); 60 | this.emptyValue = this.emptyValue.bind(this); 61 | 62 | let ref = props.inputRef || props.getInputRef; 63 | if(ref && typeof ref === 'function'){ 64 | ref = ref(); 65 | } 66 | this.inputRef = ref ? ref : React.createRef(); 67 | // this.rr = React.createRef(); 68 | 69 | this.values = this.readValues(props.value); 70 | this.previousValue = this.values.value; 71 | } 72 | 73 | 74 | /** 75 | * @param {string} value 76 | */ 77 | readCardNumberFromValue = (value) => { 78 | if(!value) return; 79 | 80 | const latinNumberValue = mapToLatin(value); 81 | const regEx = /[0-9]{4}[^0-9]*[0-9]{4}[^0-9]*[0-9]{4}[^0-9]*[0-9]{4}/; 82 | const match = latinNumberValue.match(regEx); 83 | if(match){ 84 | const valueWithNoSeperator = match[0].replace(/[^0-9]*/g, ''); 85 | return `${valueWithNoSeperator.substring(0, 4)}${CARD_SEPERATOR}${valueWithNoSeperator.substring(4, 8)}${CARD_SEPERATOR}${valueWithNoSeperator.substring(8, 12)}${CARD_SEPERATOR}${valueWithNoSeperator.substring(12, 16)}`; 86 | } 87 | 88 | const regEx4Digits = /[0-9]{4}/; 89 | const match4Digit = latinNumberValue.match(regEx4Digits); 90 | if(match4Digit){ 91 | this.updateState(this.updateValue(this.inputRef.current, match4Digit[0], this.props.numberFormat)); 92 | return; 93 | } 94 | 95 | } 96 | 97 | readValues = (value, numberFormat) => { 98 | const valueToShow = this.mapValue(value, numberFormat || this.props.numberFormat); 99 | const valueIsValid = this.isValueValidCardNumber(value); 100 | 101 | return { 102 | value, 103 | valueToShow, 104 | valueIsValid, 105 | selectionStart: undefined, 106 | selectionEnd: undefined, 107 | }; 108 | }; 109 | 110 | emptyValue() { 111 | this.updateState(this.resetValues()); 112 | }; 113 | 114 | handleFocus = (event) => { 115 | if(this.isValueEmpty(this.values.value)){ 116 | this.jumpTo(1); 117 | } 118 | if(this.props.onFocus){ 119 | this.props.onFocus(event); 120 | } 121 | }; 122 | 123 | handleBlur = (event) => { 124 | if(this.props.onBlur){ 125 | this.props.onBlur(event); 126 | } 127 | }; 128 | 129 | jumpToNext = () => { 130 | const selectionStart = this.inputRef.current.selectionStart; 131 | const whereTheCaretIs = this.whereIsCaret(selectionStart); 132 | 133 | if(whereTheCaretIs < 4){ 134 | this.jumpTo(whereTheCaretIs + 1); 135 | return true; 136 | } 137 | return false; 138 | }; 139 | 140 | jumpToPrevious = () => { 141 | const selectionStart = this.inputRef.current.selectionStart; 142 | const whereTheCaretIs = this.whereIsCaret(selectionStart); 143 | 144 | if(whereTheCaretIs > 1){ 145 | this.jumpTo(whereTheCaretIs - 1); 146 | return true; 147 | } 148 | return false; 149 | }; 150 | 151 | isValueEmpty = (value) => { 152 | if(value.replace(SEPERATORES_REGEX, '')==='') return true; 153 | return false; 154 | }; 155 | 156 | /** 157 | * @param {number} section 158 | * */ 159 | jumpTo = (section) => { 160 | const caretPosition = (section - 1) * 5; 161 | this.values.selectionStart = caretPosition; 162 | this.values.selectionEnd = caretPosition; 163 | this.inputRef.current.setSelectionRange(this.values.selectionStart, this.values.selectionEnd); 164 | }; 165 | 166 | handleKeyDown = (event) => { 167 | // console.log('keyCode: ', event.keyCode, 'key: ', event.key); 168 | if(this.props.disabled || this.props.readOnly) { 169 | event.preventDefault(); 170 | }else if(event.keyCode===8) { //backspace 171 | event.preventDefault(); 172 | this.updateState(this.deleteValue(event.target, -1)); 173 | }else if(event.keyCode===46){ //delete 174 | event.preventDefault(); 175 | this.updateState(this.deleteValue(event.target, 1)); 176 | }else if(event.keyCode>=48 && event.keyCode<=57){ //digits 177 | event.preventDefault(); 178 | // console.log('digit'); 179 | this.updateState(this.updateValue(event.target, (event.keyCode - 48).toString(), this.props.numberFormat)); 180 | }else if(event.keyCode>=96 && event.keyCode<=105){ //digits 181 | event.preventDefault(); 182 | // console.log('digit'); 183 | this.updateState(this.updateValue(event.target, (event.keyCode - 96).toString(), this.props.numberFormat)); 184 | }else if((event.key>='۰' && event.key<='۹') || (event.key>='٠' && event.key<='٩')){ //digits 185 | event.preventDefault(); 186 | // console.log('digit'); 187 | this.updateState(this.updateValue(event.target, event.key, this.props.numberFormat)); 188 | }else if(event.key==='.' || event.key==='/' || event.key==='-' || event.key==='*' || event.key==='#' 189 | || 190 | event.keyCode===188 || event.keyCode===189 || event.keyCode===190 || event.keyCode===191 191 | ){ 192 | event.preventDefault(); 193 | if(event.ctrlKey || event.shiftKey || event.metaKey || event.key==='#'){ 194 | this.jumpToPrevious(); 195 | }else{ 196 | this.jumpToNext(); 197 | } 198 | }else if(event.keyCode>=36 && event.keyCode<=40){ //arrows 199 | }else if(event.keyCode===9){ //tab 200 | if(Math.abs(this.inputRef.current.selectionStart - this.inputRef.current.selectionEnd)===this.inputRef.current.value.length){ 201 | return; 202 | } 203 | if(event.ctrlKey || event.shiftKey || event.metaKey){ 204 | if(this.jumpToPrevious()) event.preventDefault(); 205 | }else{ 206 | if(this.jumpToNext()) event.preventDefault(); 207 | } 208 | }else if(event.keyCode===13){ //return 209 | this.hideKeyboard(); 210 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===67 || event.keyCode===86 || event.keyCode===88)){ //copy/paste/cut 211 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===82)){ //refresh key 212 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===73)){ //inspector 213 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===65)){ //select all 214 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===76)){ //location focus 215 | }else if(event.keyCode===115){ // F4 216 | if(this.props.onShowDialog) { 217 | event.preventDefault(); 218 | this.props.onShowDialog(); 219 | } 220 | }else if(event.keyCode>=112 && event.keyCode<=123){ // All other F keys 221 | }else if(event.keyCode===229){ //android bug workaround 222 | //K1 : I guess that we have to save the caret position as the input will change it, we need it to know where we have to jump to in handleInput function 223 | this.values.selectionStart = this.inputRef.current.selectionStart; 224 | this.values.selectionEnd = this.inputRef.current.selectionEnd; 225 | // this.rr.current.innerText = `setting ss to ${this.values.selectionStart} ${this.values.selectionEnd}`; 226 | 227 | }else{ 228 | // console.log('other'); 229 | // console.log('keyCode: ', event.keyCode, 'key: ', event.key, 'ctrlKey: ', event.ctrlKey); 230 | // this.rr.current.innerText = `keyCode: ${event.keyCode} key: ${event.key} ctrlKey: ${event.ctrlKey}`; 231 | event.preventDefault(); 232 | } 233 | }; 234 | 235 | hideKeyboard = () => { 236 | this.inputRef.current.blur(); 237 | } 238 | 239 | handlePaste = (event) => { 240 | event.preventDefault(); 241 | if(this.props.disabled || this.props.readOnly) return; 242 | 243 | const valueFromClipboard = this.readCardNumberFromValue((event.clipboardData || window.clipboardData).getData('text')); 244 | if(!valueFromClipboard) return; 245 | 246 | const values = this.readValues(valueFromClipboard); 247 | 248 | if(values.valueIsValid){ 249 | this.updateState(values); 250 | } 251 | }; 252 | 253 | handleInput = (event) => { 254 | event.preventDefault(); 255 | if(this.props.disabled || this.props.readOnly) return; 256 | if(this.values.valueToShow===event.target.value) return; 257 | const inputValue = event.target.value; 258 | // const enteredValue = stripAnyThingButDigits(event.target.value); 259 | // this.rr.current.innerText = `V : ${inputValue}`; 260 | 261 | if(this.inputRef.current.value !== this.values.valueToShow){ 262 | this.inputRef.current.value = this.values.valueToShow; 263 | this.inputRef.current.setSelectionRange(this.values.selectionStart, this.values.selectionEnd); 264 | } 265 | 266 | if(hasStringACharToGoToNext(inputValue)){ 267 | this.jumpToNext(); 268 | } 269 | 270 | // this.updateState(this.rollbackValue()); 271 | }; 272 | 273 | /** 274 | * @param {string} value 275 | */ 276 | mapValue = (value, numberFormat) => { 277 | if(numberFormat===NUMBER_FORMAT_FARSI){ 278 | const mapped = mapToFarsi(value); 279 | return mapped; 280 | }else if(numberFormat===NUMBER_FORMAT_LATIN){ 281 | const mapped = mapToLatin(value); 282 | return mapped; 283 | } 284 | const mapped = mapToFarsi(value); 285 | return mapped; 286 | }; 287 | 288 | 289 | updateState = (newState, noFireOnChange) => { 290 | if(!newState) return; 291 | 292 | this.values = newState; 293 | 294 | if(this.values.valueIsValid===undefined){ 295 | this.values.valueIsValid = this.isValueValidCardNumber(this.values.value); 296 | } 297 | 298 | let fireOnChangeInTheEnd = false; 299 | //console.log('values on updateState', this.values) 300 | if(this.inputRef.current.value !== this.values.valueToShow){ 301 | fireOnChangeInTheEnd = true; 302 | this.inputRef.current.value = this.values.valueToShow; 303 | } 304 | if(this.inputRef.current===document.activeElement){ 305 | // console.log('has focus :D'); 306 | this.inputRef.current.setSelectionRange(this.values.selectionStart, this.values.selectionEnd); 307 | }else{ 308 | // console.log('has not focus :('); 309 | } 310 | if(fireOnChangeInTheEnd){ 311 | if(!noFireOnChange){ 312 | this.fireOnChange(); 313 | } 314 | } 315 | }; 316 | 317 | updateValue = (element, enteredValue, numberFormat) => { 318 | const enteredValueMapped = this.mapValue(enteredValue, numberFormat); 319 | let valueToShow = element.value; 320 | if(valueToShow===''){ 321 | valueToShow = EMPTY_VALUE; 322 | } 323 | let selectionStart = element.selectionStart; 324 | let selectionEnd = element.selectionEnd; 325 | 326 | valueToShow = valueToShow.substring(0, selectionStart) + enteredValueMapped + valueToShow.substring(selectionEnd); 327 | selectionStart += enteredValueMapped.length; 328 | 329 | const seperatorBefore = valueToShow.lastIndexOf(CARD_SEPERATOR, selectionStart - 1) + 1; 330 | let seperatorAfter = valueToShow.indexOf(CARD_SEPERATOR, selectionStart); 331 | if(seperatorAfter===-1) seperatorAfter = valueToShow.length; 332 | if(seperatorAfter - seperatorBefore > 4) { 333 | if(selectionStart - seperatorBefore >= 4){ 334 | valueToShow = valueToShow.substring(0, seperatorBefore) + valueToShow.substring(selectionStart - 4, selectionStart) + valueToShow.substring(seperatorAfter); 335 | selectionStart = seperatorBefore + 4; 336 | }else{ 337 | valueToShow = valueToShow.substring(0, seperatorBefore + 4) + valueToShow.substring(seperatorAfter); 338 | } 339 | } 340 | 341 | 342 | 343 | const value = mapToLatin(valueToShow); 344 | const valueIsValid = this.isValueValidCardNumber(value); 345 | 346 | if(selectionStart < valueToShow.length && value.substring(selectionStart - 4, selectionStart).match(/[0-9]{4}/)){ 347 | selectionStart++; 348 | } 349 | selectionEnd = selectionStart; 350 | 351 | const values = { 352 | value, 353 | valueToShow, 354 | valueIsValid, 355 | selectionStart, 356 | selectionEnd, 357 | }; 358 | 359 | return values; 360 | }; 361 | 362 | /** 363 | * @param {number} selectionStart 364 | */ 365 | whereIsCaret = (selectionStart) => { 366 | return Math.floor(selectionStart / 5) + 1; 367 | }; 368 | 369 | /** 370 | * @param {string} value 371 | */ 372 | isValueValidCardNumber = (value) => { 373 | if(!value) return false; 374 | if(value.match(MATCH_REGEX)) return true; 375 | return false; 376 | }; 377 | 378 | resetValues = () => { 379 | const value = ''; 380 | return { 381 | value, 382 | valueToShow: this.mapValue(value, this.props.numberFormat), 383 | valueIsValid: false, 384 | selectionStart: 0, 385 | selectionEnd: 0, 386 | }; 387 | }; 388 | 389 | deleteValue = (element, qty) => { 390 | let valueToShow = element.value; 391 | let selectionStart = element.selectionStart; 392 | let selectionEnd = element.selectionEnd; 393 | 394 | if(selectionStart===selectionEnd){ 395 | if(qty < 0) { 396 | if(selectionStart===0) return; 397 | if(valueToShow.substring(selectionStart + qty, selectionStart)===CARD_SEPERATOR) { 398 | const newValues = {...this.values}; 399 | newValues.selectionStart--; 400 | newValues.selectionEnd--; 401 | return newValues; 402 | } 403 | valueToShow = valueToShow.substring(0, selectionStart + qty) + valueToShow.substring(selectionEnd); 404 | selectionStart += qty; 405 | }else{ 406 | if(selectionEnd===valueToShow.length) return; 407 | if(valueToShow.substring(selectionStart, selectionStart + qty)===CARD_SEPERATOR) return; 408 | valueToShow = valueToShow.substring(0, selectionStart) + valueToShow.substring(selectionEnd+qty); 409 | } 410 | const nextSeperator = valueToShow.indexOf(CARD_SEPERATOR, selectionStart); 411 | if(nextSeperator===-1){ 412 | valueToShow = valueToShow + ' '; 413 | }else{ 414 | valueToShow = valueToShow.substring(0, nextSeperator) +repeatStr(' ', Math.abs(qty))+ valueToShow.substring(nextSeperator); 415 | } 416 | }else{ 417 | if(valueToShow.substring(selectionStart, selectionEnd).indexOf(CARD_SEPERATOR)>=0){ 418 | valueToShow = ''; 419 | selectionStart = 0; 420 | }else { 421 | valueToShow = valueToShow.substring(0, selectionStart) +repeatStr(' ', selectionEnd-selectionStart)+ valueToShow.substring(selectionEnd); 422 | } 423 | } 424 | 425 | selectionEnd = selectionStart; 426 | 427 | const value = mapToLatin(valueToShow); 428 | const valueIsValid = this.isValueValidCardNumber(value); 429 | 430 | const values = { 431 | value, 432 | valueToShow, 433 | valueIsValid, 434 | selectionStart, 435 | selectionEnd, 436 | }; 437 | 438 | return values; 439 | }; 440 | 441 | fireOnChange = () => { 442 | if(this.props.onChange){ 443 | const value = this.values.value; 444 | if(this.previousValue !== value){ 445 | this.previousValue = value; 446 | const target = { 447 | name: this.props.name, 448 | value: this.values.value, 449 | valueIsValid: this.values.valueIsValid, 450 | }; 451 | this.props.onChange({target}); 452 | } 453 | } 454 | }; 455 | 456 | shouldComponentUpdate(nextProps, nextState){ 457 | if(nextProps.value !== this.values.value || nextProps.numberFormat !== this.props.numberFormat){ 458 | this.updateState(this.readValues(nextProps.value, nextProps.numberFormat), true); 459 | } 460 | if(!shallowEqualObjects(nextProps.style, this.props.style)){ 461 | return true; 462 | } 463 | if(nextProps.className !== this.props.className){ 464 | this.inputRef.current.className = nextProps.className; 465 | } 466 | if(nextProps.disabled !== this.props.disabled){ 467 | this.inputRef.current.disabled = nextProps.disabled; 468 | } 469 | if(nextProps.readOnly !== this.props.readOnly){ 470 | this.inputRef.current.readOnly = nextProps.readOnly; 471 | } 472 | if(nextProps.placeholder !== this.props.placeholder){ 473 | this.inputRef.current.placeholder = nextProps.placeholder; 474 | } 475 | return false; 476 | } 477 | 478 | render() { 479 | const {value, onChange, onFocus, onBlur, onInput, onPast, onKeyDown, onShowDialog, pattern, inputMode, type, inputRef, getInputRef, numberFormat, defaultValue, ...rest} = this.props; 480 | const {valueToShow} = this.values; 481 | 482 | // const localInputMode = this.props.type === 'tel' ? 'tel' : 'numeric'; // as we use type=tel, then we do not need it any more 483 | // const localPattern = '[0-9]*'; // it has problem with the form checking, as we insert persian digit, it is not acceptable for the browser 484 | 485 | return ( 486 | 501 | ); 502 | //

empty

503 | 504 | } 505 | } 506 | 507 | 508 | export default CardNumberInput; -------------------------------------------------------------------------------- /src/lib/DecimalInput.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import shallowEqualObjects from 'shallow-equal/objects'; 4 | 5 | import { mapToFarsi, mapToLatin, NUMBER_FORMAT_FARSI, NUMBER_FORMAT_LATIN} from './util'; 6 | 7 | class DecimalInput extends Component { 8 | 9 | static propTypes = { 10 | /** 11 | * The ref to pass on the input, if empty it will be created internally 12 | */ 13 | inputRef: PropTypes.any, 14 | getInputRef: PropTypes.any, 15 | /** 16 | * The name that will be set while firing the onChange event in the target object 17 | */ 18 | name: PropTypes.string, 19 | /** 20 | * Callback function that is fired when the cart number value changes. 21 | */ 22 | onChange: PropTypes.func, 23 | /** 24 | * Override the inline-styles of the root element. 25 | */ 26 | style: PropTypes.object, 27 | /** 28 | * The css class name of the root element. 29 | */ 30 | className: PropTypes.string, 31 | /** 32 | * Disables the decimal input. 33 | */ 34 | disabled: PropTypes.bool, 35 | /** 36 | * makes the decimal input readonly. 37 | */ 38 | readOnly: PropTypes.bool, 39 | /** 40 | * Callback function that is fired when a click event occurs on the input. 41 | */ 42 | onClick: PropTypes.func, 43 | /** 44 | * Callback function that is fired when the input gains focus. 45 | */ 46 | onFocus: PropTypes.func, 47 | /** 48 | * Sets the value for the decimal input. 49 | */ 50 | value: PropTypes.oneOfType([ 51 | PropTypes.string, 52 | PropTypes.number 53 | ]), 54 | /** 55 | * Sets the thousand separator 56 | */ 57 | thousandSeparator: PropTypes.string, 58 | /** 59 | * Sets the decimal separator 60 | */ 61 | decimalSeparator: PropTypes.string, 62 | /** 63 | * makes the value string, it is useful for big decimals. 64 | */ 65 | asString: PropTypes.bool, 66 | /** 67 | * max digits before decimal separator. 68 | */ 69 | maxDigits: PropTypes.number, 70 | /** 71 | * max digits after decimal separator. 72 | */ 73 | maxDecimal: PropTypes.number, 74 | }; 75 | 76 | constructor(props) { 77 | super(props); 78 | let ref = props.inputRef || props.getInputRef; 79 | if(ref && typeof ref === 'function'){ 80 | ref = ref(); 81 | } 82 | this.inputRef = ref ? ref : React.createRef(); 83 | // this.rr = React.createRef(); 84 | 85 | this.thousandSeparator = props.thousandSeparator === '' ? '' : props.thousandSeparator || this.defaultThousandSeparator(); 86 | this.decimalSeparator = props.decimalSeparator || this.defaultDecimalSeparator(); 87 | this.thousandSeparatorRegex = new RegExp(`[${this.thousandSeparator}]`, 'g'); 88 | this.decimalSeparatorRegex = new RegExp(`[.${this.decimalSeparator}]`, 'g'); 89 | this.numberRegex = new RegExp(`[^-1234567890۱۲۳۴۵۶۷۸۹۰.${this.decimalSeparator}]`, 'gi'); 90 | this.values = this.readValuesFromProps(props); 91 | } 92 | 93 | defaultThousandSeparator = () => { 94 | return ','; 95 | }; 96 | 97 | defaultDecimalSeparator = () => { 98 | return '.'; 99 | }; 100 | 101 | readValuesFromProps = (props) => { 102 | if(props.value || props.value===0){ 103 | const value = props.value.toString(); 104 | return this.updateValue('', 0, 0, value, props.numberFormat, props.asString); 105 | } 106 | 107 | return { 108 | value: undefined, 109 | valueToShow: '', 110 | selectionStart: undefined, 111 | selectionEnd: undefined, 112 | }; 113 | }; 114 | 115 | handleKeyDown = (event) => { 116 | // console.log('keyCode: ', event.keyCode, 'key: ', event.key); 117 | if(this.props.disabled || this.props.readOnly) { 118 | event.preventDefault(); 119 | }else if(event.keyCode===8) { //backspace 120 | event.preventDefault(); 121 | this.updateState(this.deleteValue(event.target, -1, this.props.asString)); 122 | }else if(event.keyCode===46){ //delete 123 | event.preventDefault(); 124 | this.updateState(this.deleteValue(event.target, 1, this.props.asString)); 125 | }else if(event.keyCode>=48 && event.keyCode<=57){ //digits 126 | event.preventDefault(); 127 | // console.log('digit'); 128 | this.updateState(this.updateElementValue(event.target, (event.keyCode - 48).toString(), this.props.numberFormat, this.props.asString)); 129 | }else if(event.keyCode>=96 && event.keyCode<=105){ //digits 130 | event.preventDefault(); 131 | // console.log('digit'); 132 | this.updateState(this.updateElementValue(event.target, (event.keyCode - 96).toString(), this.props.numberFormat, this.props.asString)); 133 | }else if((event.key>='۰' && event.key<='۹') || (event.key>='٠' && event.key<='٩')){ //digits 134 | event.preventDefault(); 135 | // console.log('digit'); 136 | this.updateState(this.updateElementValue(event.target, event.key, this.props.numberFormat, this.props.asString)); 137 | }else if(event.key===this.decimalSeparator || event.keyCode===190){ //point 138 | event.preventDefault(); 139 | if(this.props.maxDecimal===null || this.props.maxDecimal===undefined || this.props.maxDecimal > 0){ 140 | this.updateState(this.updateElementValue(event.target, this.decimalSeparator, this.props.numberFormat, this.props.asString)); 141 | } 142 | }else if(event.key==='-' || event.keyCode===189){ // - 143 | event.preventDefault(); 144 | this.updateState(this.negate()); 145 | }else if(event.keyCode>=35 && event.keyCode<=40){ //arrows 146 | }else if(event.keyCode===9){ //tab 147 | }else if(event.keyCode===13){ //return 148 | this.hideKeyboard(); 149 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===67 || event.keyCode===86 || event.keyCode===88)){ //copy/paste/cut 150 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===82)){ //refresh key 151 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===82)){ //refresh key 152 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===73)){ //inspector 153 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===65)){ //select all 154 | }else if((event.ctrlKey || event.metaKey) && (event.keyCode===76)){ //location focus 155 | }else if(event.keyCode>=112 && event.keyCode<=123){ // All other F keys 156 | }else if(event.keyCode===229){ //android bug workaround 157 | }else{ 158 | // console.log('other'); 159 | // console.log('keyCode: ', event.keyCode, 'key: ', event.key, 'ctrlKey: ', event.ctrlKey); 160 | // this.rr.current.innerText = `keyCode: ${event.keyCode} key: ${event.key} ctrlKey: ${event.ctrlKey}`; 161 | event.preventDefault(); 162 | } 163 | }; 164 | 165 | hideKeyboard = () => { 166 | this.inputRef.current.blur(); 167 | } 168 | 169 | handlePaste = (event) => { 170 | event.preventDefault(); 171 | if(this.props.disabled || this.props.readOnly) return; 172 | 173 | let enteredValue = this.stripAnyThingButNumber((event.clipboardData || window.clipboardData).getData('text')); 174 | if(this.values.valueToShow!==''){ 175 | enteredValue = enteredValue.replace(/[-]/g, ''); 176 | } 177 | 178 | this.updateState(this.updateElementValue(event.target, enteredValue, this.props.numberFormat, this.props.asString)); 179 | }; 180 | 181 | handleInput = (event) => { 182 | if(this.values.valueToShow===event.target.value) return; 183 | if(this.props.disabled || this.props.readOnly) return; 184 | 185 | const enteredValue = this.stripAnyThingButNumber(event.target.value); 186 | 187 | const firstHyphenIndex = enteredValue.indexOf('-'); 188 | const secondHyphenIndex = enteredValue.indexOf('-', firstHyphenIndex + 1); 189 | if(secondHyphenIndex >= 0 || firstHyphenIndex > 0){ 190 | this.updateState(this.negate()); 191 | }else{ 192 | const selectionStart = event.target.selectionStart; 193 | const selectionEnd = event.target.selectionEnd; 194 | const newState = this.updateValue('', selectionStart, selectionEnd, enteredValue, this.props.numberFormat, this.props.asString); 195 | this.updateState(newState, true); 196 | } 197 | }; 198 | 199 | mapValue = (value, numberFormat) => { 200 | if(numberFormat===NUMBER_FORMAT_FARSI){ 201 | return mapToFarsi(value); 202 | }else if(numberFormat===NUMBER_FORMAT_LATIN){ 203 | return mapToLatin(value); 204 | } 205 | return mapToFarsi(value); 206 | }; 207 | 208 | mapDecimalSeparator = (value) => { 209 | return value.replace(this.decimalSeparatorRegex, this.decimalSeparator); 210 | }; 211 | 212 | 213 | updateState = (newState, forceFireChange, noFireOnChange) => { 214 | if(!newState) return; 215 | 216 | this.values = newState; 217 | let fireOnChangeInTheEnd = false; 218 | if(this.inputRef.current.value !== this.values.valueToShow){ 219 | fireOnChangeInTheEnd = true; 220 | this.inputRef.current.value = this.values.valueToShow; 221 | } 222 | if(this.inputRef.current===document.activeElement){ 223 | // console.log('has focus :D'); 224 | this.inputRef.current.setSelectionRange(this.values.selectionStart, this.values.selectionEnd); 225 | }else{ 226 | // console.log('has not focus :('); 227 | } 228 | if(fireOnChangeInTheEnd || forceFireChange){ 229 | if(!noFireOnChange){ 230 | this.fireOnChange(); 231 | } 232 | } 233 | }; 234 | 235 | negate = () => { 236 | let {value, 237 | valueToShow, 238 | valueIsValid, 239 | selectionStart, 240 | selectionEnd} = this.values; 241 | 242 | if(value > 0) { 243 | value = -value; 244 | valueToShow = '-'+valueToShow; 245 | selectionStart++; 246 | selectionEnd++; 247 | }else if(value < 0) { 248 | value = -value; 249 | valueToShow = valueToShow.substring(1); 250 | selectionStart--; 251 | selectionEnd--; 252 | }else{ 253 | return; 254 | } 255 | 256 | return { 257 | value, 258 | valueToShow, 259 | valueIsValid, 260 | selectionStart, 261 | selectionEnd, 262 | }; 263 | }; 264 | 265 | updateElementValue = (element, enteredValue, numberFormat, asString) => { 266 | let currentValue = element.value; 267 | let selectionStart = element.selectionStart; 268 | let selectionEnd = element.selectionEnd; 269 | return this.updateValue(currentValue, selectionStart, selectionEnd, enteredValue, numberFormat, asString); 270 | } 271 | 272 | updateValue = (currentValue, selectionStart, selectionEnd, enteredValue, numberFormat, asString) => { 273 | const enteredValueMapped = this.mapDecimalSeparator(this.mapValue(enteredValue, numberFormat)); 274 | let valueToShow = currentValue; 275 | if(enteredValueMapped===this.decimalSeparator){ 276 | const i = valueToShow.indexOf(this.decimalSeparator); 277 | if(i>-1){ 278 | return; 279 | } 280 | } 281 | 282 | let valueBeforeCursor = valueToShow.substring(0, selectionStart); 283 | let valueAfterCursor = valueToShow.substring(selectionEnd); 284 | 285 | selectionStart -= this.countThousandSeparator(valueBeforeCursor); 286 | valueBeforeCursor = this.stripThousandSeparator(valueBeforeCursor); 287 | valueAfterCursor = this.stripThousandSeparator(valueAfterCursor); 288 | 289 | valueToShow = valueBeforeCursor + enteredValueMapped + valueAfterCursor; 290 | selectionStart += enteredValueMapped.length; 291 | 292 | if(typeof this.props.maxDecimal === 'number'){ 293 | const i = valueToShow.indexOf(this.decimalSeparator); 294 | if(i>-1){ 295 | const decimalLength = valueToShow.length - i - 1; 296 | if(decimalLength > this.props.maxDecimal){ 297 | valueToShow = valueToShow.substring(0, i + (this.props.maxDecimal? 1 : 0) + this.props.maxDecimal); 298 | if(selectionStart>valueToShow.length) selectionStart = valueToShow.length; 299 | } 300 | } 301 | } 302 | { 303 | const latinNumber = mapToLatin(valueToShow); 304 | const i = this.firstNonZeroDigit(latinNumber, 0); 305 | if(i > 0 && valueToShow.length>1){ 306 | valueToShow = valueToShow.substring(i); 307 | selectionStart -= i; 308 | }else if(i===0 && latinNumber.charAt(0)==='.'){ 309 | valueToShow = this.mapValue('0', numberFormat) + valueToShow; 310 | selectionStart++; 311 | } 312 | } 313 | if(typeof this.props.maxDigits === 'number'){ 314 | const i = valueToShow.indexOf(this.decimalSeparator); 315 | const digitsLength = i>-1 ? i : valueToShow.length; 316 | if(digitsLength > this.props.maxDigits){ 317 | if(i===-1){ 318 | valueToShow = valueToShow.substring(0, this.props.maxDigits); 319 | if(selectionStart>valueToShow.length) selectionStart = valueToShow.length; 320 | }else{ 321 | valueToShow = valueToShow.substring(0, this.props.maxDigits) + (i===-1 ? '' : valueToShow.substring(i)); 322 | if(selectionStart>this.props.maxDigits) selectionStart = this.props.maxDigits; 323 | } 324 | } 325 | } 326 | 327 | const separated = this.addThousandSeparator(valueToShow, selectionStart); 328 | valueToShow = separated.valueToShowWithSeparator; 329 | selectionStart = separated.selectionStart; 330 | selectionEnd = selectionStart; 331 | 332 | let value = this.stripThousandSeparator(mapToLatin(valueToShow)); 333 | let valueIsValid; 334 | if(asString) { 335 | const checkValue = Number(value); 336 | valueIsValid = (typeof checkValue === 'number' || checkValue === undefined || checkValue === null); 337 | }else{ 338 | value = Number(value); 339 | valueIsValid = (typeof value === 'number' || value === undefined || value === null); 340 | } 341 | 342 | return { 343 | value, 344 | valueToShow, 345 | valueIsValid, 346 | selectionStart, 347 | selectionEnd, 348 | }; 349 | }; 350 | 351 | deleteValue = (element, qty, asString) => { 352 | let valueToShow = element.value; 353 | let selectionStart = element.selectionStart; 354 | let selectionEnd = element.selectionEnd; 355 | 356 | // console.log({selectionStart, selectionEnd}) 357 | 358 | if(selectionStart===selectionEnd){ 359 | if(qty < 0) { 360 | if(selectionStart===0) return; 361 | let valueBeforeCursor = valueToShow.substring(0, selectionStart + qty); 362 | let valueAfterCursor = valueToShow.substring(selectionEnd); 363 | 364 | selectionStart -= this.countThousandSeparator(valueBeforeCursor); 365 | valueBeforeCursor = this.stripThousandSeparator(valueBeforeCursor); 366 | valueAfterCursor = this.stripThousandSeparator(valueAfterCursor); 367 | 368 | valueToShow = valueBeforeCursor + valueAfterCursor; 369 | selectionStart += qty; 370 | }else{ 371 | if(selectionEnd===valueToShow.length) return; 372 | let valueBeforeCursor = valueToShow.substring(0, selectionStart); 373 | let valueAfterCursor = valueToShow.substring(selectionEnd+qty); 374 | 375 | selectionStart -= this.countThousandSeparator(valueBeforeCursor); 376 | valueBeforeCursor = this.stripThousandSeparator(valueBeforeCursor); 377 | valueAfterCursor = this.stripThousandSeparator(valueAfterCursor); 378 | 379 | valueToShow = valueBeforeCursor + valueAfterCursor; 380 | } 381 | }else{ 382 | let valueBeforeCursor = valueToShow.substring(0, selectionStart); 383 | let valueAfterCursor = valueToShow.substring(selectionEnd); 384 | 385 | selectionStart -= this.countThousandSeparator(valueBeforeCursor); 386 | valueBeforeCursor = this.stripThousandSeparator(valueBeforeCursor); 387 | valueAfterCursor = this.stripThousandSeparator(valueAfterCursor); 388 | 389 | valueToShow = valueBeforeCursor + valueAfterCursor; 390 | } 391 | 392 | const separated = this.addThousandSeparator(valueToShow, selectionStart); 393 | valueToShow = separated.valueToShowWithSeparator; 394 | selectionStart = separated.selectionStart; 395 | selectionEnd = selectionStart; 396 | 397 | let value = this.stripThousandSeparator(mapToLatin(valueToShow)); 398 | let valueIsValid; 399 | if(asString) { 400 | const checkValue = Number(value); 401 | valueIsValid = (typeof checkValue === 'number' || checkValue === undefined || checkValue === null); 402 | }else{ 403 | value = Number(value); 404 | valueIsValid = (typeof value === 'number' || value === undefined || value === null); 405 | } 406 | 407 | 408 | return { 409 | value, 410 | valueToShow, 411 | valueIsValid, 412 | selectionStart, 413 | selectionEnd, 414 | }; 415 | }; 416 | 417 | 418 | addThousandSeparator = (valueToShow, selectionStart) => { 419 | if(this.thousandSeparator==='') 420 | return {valueToShowWithSeparator: valueToShow, selectionStart}; 421 | let valueToShowWithSeparator = ''; 422 | let alreadFoundDecimalSeparator = false; 423 | let alreadyPassedDecimalSeparator = valueToShow.indexOf(this.decimalSeparator) === -1; 424 | let groupCount = 0; 425 | for (let i = valueToShow.length-1; i>=0; i--){ 426 | const c = valueToShow.charAt(i); 427 | if(c===this.decimalSeparator){ 428 | if(!alreadFoundDecimalSeparator){ 429 | alreadFoundDecimalSeparator = true; 430 | valueToShowWithSeparator = c + valueToShowWithSeparator; 431 | alreadyPassedDecimalSeparator = true; 432 | groupCount = 0; 433 | }else{ 434 | if(i <= selectionStart){ 435 | selectionStart--; 436 | } 437 | } 438 | }else{ 439 | if(alreadyPassedDecimalSeparator && groupCount===3 && c!=='-'){ 440 | valueToShowWithSeparator = this.thousandSeparator + valueToShowWithSeparator; 441 | groupCount = 0; 442 | if(i { 454 | if(value.charAt(i)===this.decimalSeparator) { 455 | if(i>0) 456 | return i - 1; 457 | else return i; 458 | } 459 | if(value.charAt(i)==='0') return this.firstNonZeroDigit(value, i+1); 460 | return i; 461 | }; 462 | 463 | countThousandSeparator = (value) => { 464 | return this.thousandSeparator === '' ? 0 : (value.match(this.thousandSeparatorRegex) || []).length; 465 | }; 466 | 467 | stripThousandSeparator = (value) => { 468 | return this.thousandSeparator === '' ? value : value.replace(this.thousandSeparatorRegex, ''); 469 | }; 470 | 471 | stripAnyThingButNumber = (str) => { 472 | if(!str) return str; 473 | return str.toString().replace(this.numberRegex, ''); 474 | }; 475 | 476 | fireOnChange = () => { 477 | if(this.props.onChange){ 478 | this.props.onChange({target: {name: this.props.name, value: this.values.value}}); 479 | } 480 | }; 481 | 482 | shouldComponentUpdate(nextProps, nextState){ 483 | if(nextProps.value !== this.values.value || nextProps.numberFormat !== this.props.numberFormat){ 484 | this.updateState(this.readValuesFromProps(nextProps), false, true); 485 | } 486 | if(!shallowEqualObjects(nextProps.style, this.props.style)){ 487 | return true; 488 | } 489 | if(nextProps.className !== this.props.className){ 490 | this.inputRef.current.className = nextProps.className; 491 | } 492 | if(nextProps.disabled !== this.props.disabled){ 493 | this.inputRef.current.disabled = nextProps.disabled; 494 | } 495 | if(nextProps.readOnly !== this.props.readOnly){ 496 | this.inputRef.current.readOnly = nextProps.readOnly; 497 | } 498 | if(nextProps.placeholder !== this.props.placeholder){ 499 | this.inputRef.current.placeholder = nextProps.placeholder; 500 | } 501 | return false; 502 | } 503 | 504 | render() { 505 | const {value, onChange, onInput, onPast, onKeyDown, pattern, inputMode, type, ref, inputRef, getInputRef, numberFormat, defaultValue, asString, maxDecimal, maxDigits, thousandSeparator, decimalSeparator, ...rest} = this.props; 506 | const {valueToShow} = this.values; 507 | 508 | // const localInputMode = this.props.type === 'tel' ? 'tel' : 'numeric'; // as we use type=tel, then we do not need it any more 509 | // const localPattern = '[0-9]*'; // it has problem with the form checking, as we insert persian digit, it is not acceptable for the browser 510 | 511 | return ( 512 | 525 | ); 526 | //

empty

527 | 528 | } 529 | } 530 | export default DecimalInput; 531 | -------------------------------------------------------------------------------- /docs/static/js/main.4d5252d6.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonpreact-hichestan-numberinput"]=this["webpackJsonpreact-hichestan-numberinput"]||[]).push([[0],{17:function(e,t,a){},18:function(e,t,a){"use strict";a.r(t);var r=a(1),n=a.n(r),u=a(11),o=a(2),l=a(3),s=a(5),i=a(4),p=a(6),d=a(8),c=a(7),h=a.n(c),v="FARSI",b="LATIN";function f(e){return e?e.toString().replace(/[1234567890\u0661\u0662\u0663\u0664\u0665\u0666\u0667\u0668\u0669\u0660]/gi,(function(e){var t=e.charCodeAt(0);return String.fromCharCode(t+(t<60?1728:144))})):e}function m(e){return e?e.toString().replace(/[\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\u06f0\u0661\u0662\u0663\u0664\u0665\u0666\u0667\u0668\u0669\u0660]/gi,(function(e){var t=e.charCodeAt(0);return String.fromCharCode(t-(t<1770?1584:1728))})):e}function g(e){return e?e.toString().replace(/[^1234567890\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\u06f0\u0661\u0662\u0663\u0664\u0665\u0666\u0667\u0668\u0669\u0660]/gi,""):e}function y(e,t){for(var a="",r=0;r=48&&e.keyCode<=57?(e.preventDefault(),r.updateState(r.updateValue(e.target,(e.keyCode-48).toString(),r.props.numberFormat))):e.keyCode>=96&&e.keyCode<=105?(e.preventDefault(),r.updateState(r.updateValue(e.target,(e.keyCode-96).toString(),r.props.numberFormat))):e.key>="\u06f0"&&e.key<="\u06f9"||e.key>="\u0660"&&e.key<="\u0669"?(e.preventDefault(),r.updateState(r.updateValue(e.target,e.key,r.props.numberFormat))):e.keyCode>=35&&e.keyCode<=40||9===e.keyCode||(13===e.keyCode?r.hideKeyboard():(!e.ctrlKey&&!e.metaKey||67!==e.keyCode&&86!==e.keyCode&&88!==e.keyCode)&&((e.ctrlKey||e.metaKey)&&82===e.keyCode||(e.ctrlKey||e.metaKey)&&82===e.keyCode||(e.ctrlKey||e.metaKey)&&73===e.keyCode||(e.ctrlKey||e.metaKey)&&65===e.keyCode||(e.ctrlKey||e.metaKey)&&76===e.keyCode||e.keyCode>=112&&e.keyCode<=123||229===e.keyCode||e.preventDefault()))},r.hideKeyboard=function(){r.inputRef.current.blur()},r.handlePaste=function(e){if(e.preventDefault(),!r.props.disabled&&!r.props.readOnly){var t=g((e.clipboardData||window.clipboardData).getData("text"));r.updateState(r.updateValue(e.target,t,r.props.numberFormat))}},r.handleInput=function(e){if(!r.props.disabled&&!r.props.readOnly&&r.values.valueToShow!==e.target.value){var t=g(e.target.value);r.updateState(r.recheckValue(e.target,t,r.props.numberFormat),!0)}},r.mapValue=function(e,t){return t===v?f(e):t===b?m(e):f(e)},r.updateState=function(e,t,a){if(e){r.values=e;var n=!1;r.inputRef.current.value!==r.values.valueToShow&&(n=!0,r.inputRef.current.value=r.values.valueToShow),r.inputRef.current===document.activeElement&&r.inputRef.current.setSelectionRange(r.values.selectionStart,r.values.selectionEnd),(n||t)&&(a||r.fireOnChange())}},r.updateValue=function(e,t,a){var n=r.mapValue(t,a),u=e.value,o=e.selectionStart,l=e.selectionEnd,s=u.length+t.length-(l-o);if(!(r.props.maxLength&&s>r.props.maxLength))return u=u.substring(0,o)+n+u.substring(l),l=o+=n.length,{value:m(u),valueToShow:u,selectionStart:o,selectionEnd:l}},r.recheckValue=function(e,t,a){var n=r.mapValue(t,a),u=e.selectionStart,o=e.selectionEnd;return{value:m(n),valueToShow:n,selectionStart:u,selectionEnd:o}},r.deleteValue=function(e,t){var a=e.value,r=e.selectionStart,n=e.selectionEnd;if(r===n)if(t<0){if(0===r)return;a=a.substring(0,r+t)+a.substring(n),r+=t}else{if(n===a.length)return;a=a.substring(0,r)+a.substring(n+t)}else a=a.substring(0,r)+a.substring(n);return n=r,{value:m(a),valueToShow:a,selectionStart:r,selectionEnd:n}},r.fireOnChange=function(){r.props.onChange&&r.props.onChange({target:{name:r.props.name,value:r.values.value}})};var u=e.inputRef||e.getInputRef;return u&&"function"===typeof u&&(u=u()),r.inputRef=u||n.a.createRef(),r.values=r.readValuesFromProps(e),r}return Object(l.a)(a,[{key:"shouldComponentUpdate",value:function(e,t){return e.value===this.values.value&&e.numberFormat===this.props.numberFormat||this.updateState(this.readValuesFromProps(e),!1,!0),!h()(e.style,this.props.style)||(e.className!==this.props.className&&(this.inputRef.current.className=e.className),e.disabled!==this.props.disabled&&(this.inputRef.current.disabled=e.disabled),e.readOnly!==this.props.readOnly&&(this.inputRef.current.readOnly=e.readOnly),e.placeholder!==this.props.placeholder&&(this.inputRef.current.placeholder=e.placeholder),!1)}},{key:"render",value:function(){var e=this.props,t=(e.value,e.onChange,e.onInput,e.onPast,e.onKeyDown,e.pattern,e.inputMode,e.type,e.ref,e.inputRef,e.getInputRef,e.numberFormat,e.defaultValue,Object(d.a)(e,j)),a=this.values.valueToShow;return Object(S.jsx)("input",Object(p.a)({ref:this.inputRef,type:"tel",dir:"ltr",defaultValue:a,onKeyDown:this.handleKeyDown,onPaste:this.handlePaste,onInput:this.handleInput},t))}}]),a}(r.Component),O=["value","onChange","onInput","onPast","onKeyDown","pattern","inputMode","type","ref","inputRef","getInputRef","numberFormat","defaultValue","asString","maxDecimal","maxDigits","thousandSeparator","decimalSeparator"],x=function(e){Object(s.a)(a,e);var t=Object(i.a)(a);function a(e){var r;Object(o.a)(this,a),(r=t.call(this,e)).defaultThousandSeparator=function(){return","},r.defaultDecimalSeparator=function(){return"."},r.readValuesFromProps=function(e){if(e.value||0===e.value){var t=e.value.toString();return r.updateValue("",0,0,t,e.numberFormat,e.asString)}return{value:void 0,valueToShow:"",selectionStart:void 0,selectionEnd:void 0}},r.handleKeyDown=function(e){r.props.disabled||r.props.readOnly?e.preventDefault():8===e.keyCode?(e.preventDefault(),r.updateState(r.deleteValue(e.target,-1,r.props.asString))):46===e.keyCode?(e.preventDefault(),r.updateState(r.deleteValue(e.target,1,r.props.asString))):e.keyCode>=48&&e.keyCode<=57?(e.preventDefault(),r.updateState(r.updateElementValue(e.target,(e.keyCode-48).toString(),r.props.numberFormat,r.props.asString))):e.keyCode>=96&&e.keyCode<=105?(e.preventDefault(),r.updateState(r.updateElementValue(e.target,(e.keyCode-96).toString(),r.props.numberFormat,r.props.asString))):e.key>="\u06f0"&&e.key<="\u06f9"||e.key>="\u0660"&&e.key<="\u0669"?(e.preventDefault(),r.updateState(r.updateElementValue(e.target,e.key,r.props.numberFormat,r.props.asString))):e.key===r.decimalSeparator||190===e.keyCode?(e.preventDefault(),(null===r.props.maxDecimal||void 0===r.props.maxDecimal||r.props.maxDecimal>0)&&r.updateState(r.updateElementValue(e.target,r.decimalSeparator,r.props.numberFormat,r.props.asString))):"-"===e.key||189===e.keyCode?(e.preventDefault(),r.updateState(r.negate())):e.keyCode>=35&&e.keyCode<=40||9===e.keyCode||(13===e.keyCode?r.hideKeyboard():(!e.ctrlKey&&!e.metaKey||67!==e.keyCode&&86!==e.keyCode&&88!==e.keyCode)&&((e.ctrlKey||e.metaKey)&&82===e.keyCode||(e.ctrlKey||e.metaKey)&&82===e.keyCode||(e.ctrlKey||e.metaKey)&&73===e.keyCode||(e.ctrlKey||e.metaKey)&&65===e.keyCode||(e.ctrlKey||e.metaKey)&&76===e.keyCode||e.keyCode>=112&&e.keyCode<=123||229===e.keyCode||e.preventDefault()))},r.hideKeyboard=function(){r.inputRef.current.blur()},r.handlePaste=function(e){if(e.preventDefault(),!r.props.disabled&&!r.props.readOnly){var t=r.stripAnyThingButNumber((e.clipboardData||window.clipboardData).getData("text"));""!==r.values.valueToShow&&(t=t.replace(/[-]/g,"")),r.updateState(r.updateElementValue(e.target,t,r.props.numberFormat,r.props.asString))}},r.handleInput=function(e){if(r.values.valueToShow!==e.target.value&&!r.props.disabled&&!r.props.readOnly){var t=r.stripAnyThingButNumber(e.target.value),a=t.indexOf("-");if(t.indexOf("-",a+1)>=0||a>0)r.updateState(r.negate());else{var n=e.target.selectionStart,u=e.target.selectionEnd,o=r.updateValue("",n,u,t,r.props.numberFormat,r.props.asString);r.updateState(o,!0)}}},r.mapValue=function(e,t){return t===v?f(e):t===b?m(e):f(e)},r.mapDecimalSeparator=function(e){return e.replace(r.decimalSeparatorRegex,r.decimalSeparator)},r.updateState=function(e,t,a){if(e){r.values=e;var n=!1;r.inputRef.current.value!==r.values.valueToShow&&(n=!0,r.inputRef.current.value=r.values.valueToShow),r.inputRef.current===document.activeElement&&r.inputRef.current.setSelectionRange(r.values.selectionStart,r.values.selectionEnd),(n||t)&&(a||r.fireOnChange())}},r.negate=function(){var e=r.values,t=e.value,a=e.valueToShow,n=e.valueIsValid,u=e.selectionStart,o=e.selectionEnd;if(t>0)t=-t,a="-"+a,u++,o++;else{if(!(t<0))return;t=-t,a=a.substring(1),u--,o--}return{value:t,valueToShow:a,valueIsValid:n,selectionStart:u,selectionEnd:o}},r.updateElementValue=function(e,t,a,n){var u=e.value,o=e.selectionStart,l=e.selectionEnd;return r.updateValue(u,o,l,t,a,n)},r.updateValue=function(e,t,a,n,u,o){var l=r.mapDecimalSeparator(r.mapValue(n,u)),s=e;if(l===r.decimalSeparator&&s.indexOf(r.decimalSeparator)>-1)return;var i=s.substring(0,t),p=s.substring(a);if(t-=r.countThousandSeparator(i),s=(i=r.stripThousandSeparator(i))+l+(p=r.stripThousandSeparator(p)),t+=l.length,"number"===typeof r.props.maxDecimal){var d=s.indexOf(r.decimalSeparator);if(d>-1)s.length-d-1>r.props.maxDecimal&&t>(s=s.substring(0,d+(r.props.maxDecimal?1:0)+r.props.maxDecimal)).length&&(t=s.length)}var c=m(s),h=r.firstNonZeroDigit(c,0);if(h>0&&s.length>1?(s=s.substring(h),t-=h):0===h&&"."===c.charAt(0)&&(s=r.mapValue("0",u)+s,t++),"number"===typeof r.props.maxDigits){var v=s.indexOf(r.decimalSeparator);(v>-1?v:s.length)>r.props.maxDigits&&(-1===v?t>(s=s.substring(0,r.props.maxDigits)).length&&(t=s.length):(s=s.substring(0,r.props.maxDigits)+(-1===v?"":s.substring(v)),t>r.props.maxDigits&&(t=r.props.maxDigits)))}var b=r.addThousandSeparator(s,t);s=b.valueToShowWithSeparator,a=t=b.selectionStart;var f,g=r.stripThousandSeparator(m(s));if(o){var y=Number(g);f="number"===typeof y||void 0===y||null===y}else f="number"===typeof(g=Number(g))||void 0===g||null===g;return{value:g,valueToShow:s,valueIsValid:f,selectionStart:t,selectionEnd:a}},r.deleteValue=function(e,t,a){var n=e.value,u=e.selectionStart,o=e.selectionEnd;if(u===o)if(t<0){if(0===u)return;var l=n.substring(0,u+t),s=n.substring(o);u-=r.countThousandSeparator(l),n=(l=r.stripThousandSeparator(l))+(s=r.stripThousandSeparator(s)),u+=t}else{if(o===n.length)return;var i=n.substring(0,u),p=n.substring(o+t);u-=r.countThousandSeparator(i),n=(i=r.stripThousandSeparator(i))+(p=r.stripThousandSeparator(p))}else{var d=n.substring(0,u),c=n.substring(o);u-=r.countThousandSeparator(d),n=(d=r.stripThousandSeparator(d))+(c=r.stripThousandSeparator(c))}var h=r.addThousandSeparator(n,u);n=h.valueToShowWithSeparator,o=u=h.selectionStart;var v,b=r.stripThousandSeparator(m(n));if(a){var f=Number(b);v="number"===typeof f||void 0===f||null===f}else v="number"===typeof(b=Number(b))||void 0===b||null===b;return{value:b,valueToShow:n,valueIsValid:v,selectionStart:u,selectionEnd:o}},r.addThousandSeparator=function(e,t){if(""===r.thousandSeparator)return{valueToShowWithSeparator:e,selectionStart:t};for(var a="",n=!1,u=-1===e.indexOf(r.decimalSeparator),o=0,l=e.length-1;l>=0;l--){var s=e.charAt(l);s===r.decimalSeparator?n?l<=t&&t--:(n=!0,a=s+a,u=!0,o=0):(u&&3===o&&"-"!==s&&(a=r.thousandSeparator+a,o=0,l0?t-1:t:"0"===e.charAt(t)?r.firstNonZeroDigit(e,t+1):t},r.countThousandSeparator=function(e){return""===r.thousandSeparator?0:(e.match(r.thousandSeparatorRegex)||[]).length},r.stripThousandSeparator=function(e){return""===r.thousandSeparator?e:e.replace(r.thousandSeparatorRegex,"")},r.stripAnyThingButNumber=function(e){return e?e.toString().replace(r.numberRegex,""):e},r.fireOnChange=function(){r.props.onChange&&r.props.onChange({target:{name:r.props.name,value:r.values.value}})};var u=e.inputRef||e.getInputRef;return u&&"function"===typeof u&&(u=u()),r.inputRef=u||n.a.createRef(),r.thousandSeparator=""===e.thousandSeparator?"":e.thousandSeparator||r.defaultThousandSeparator(),r.decimalSeparator=e.decimalSeparator||r.defaultDecimalSeparator(),r.thousandSeparatorRegex=new RegExp("[".concat(r.thousandSeparator,"]"),"g"),r.decimalSeparatorRegex=new RegExp("[.".concat(r.decimalSeparator,"]"),"g"),r.numberRegex=new RegExp("[^-1234567890\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\u06f0.".concat(r.decimalSeparator,"]"),"gi"),r.values=r.readValuesFromProps(e),r}return Object(l.a)(a,[{key:"shouldComponentUpdate",value:function(e,t){return e.value===this.values.value&&e.numberFormat===this.props.numberFormat||this.updateState(this.readValuesFromProps(e),!1,!0),!h()(e.style,this.props.style)||(e.className!==this.props.className&&(this.inputRef.current.className=e.className),e.disabled!==this.props.disabled&&(this.inputRef.current.disabled=e.disabled),e.readOnly!==this.props.readOnly&&(this.inputRef.current.readOnly=e.readOnly),e.placeholder!==this.props.placeholder&&(this.inputRef.current.placeholder=e.placeholder),!1)}},{key:"render",value:function(){var e=this.props,t=(e.value,e.onChange,e.onInput,e.onPast,e.onKeyDown,e.pattern,e.inputMode,e.type,e.ref,e.inputRef,e.getInputRef,e.numberFormat,e.defaultValue,e.asString,e.maxDecimal,e.maxDigits,e.thousandSeparator,e.decimalSeparator,Object(d.a)(e,O)),a=this.values.valueToShow;return Object(S.jsx)("input",Object(p.a)({ref:this.inputRef,type:"tel",dir:"ltr",defaultValue:a,onKeyDown:this.handleKeyDown,onPaste:this.handlePaste,onInput:this.handleInput},t))}}]),a}(r.Component),k=a(9),V=["value","onChange","onFocus","onBlur","onInput","onPast","onKeyDown","onShowDialog","pattern","inputMode","type","inputRef","getInputRef","numberFormat","defaultValue"],R="-",D=new RegExp("[ ".concat(R,"]"),"g"),T=new RegExp("[0-9]{4}[".concat(R,"][0-9]{4}[").concat(R,"][0-9]{4}[").concat(R,"][0-9]{4}")),w=" ".concat(R," ").concat(R," ").concat(R," "),K=function(e){Object(s.a)(a,e);var t=Object(i.a)(a);function a(e){var r;Object(o.a)(this,a),(r=t.call(this,e)).readCardNumberFromValue=function(e){if(e){var t=m(e),a=t.match(/[0-9]{4}[^0-9]*[0-9]{4}[^0-9]*[0-9]{4}[^0-9]*[0-9]{4}/);if(a){var n=a[0].replace(/[^0-9]*/g,"");return"".concat(n.substring(0,4)).concat(R).concat(n.substring(4,8)).concat(R).concat(n.substring(8,12)).concat(R).concat(n.substring(12,16))}var u=t.match(/[0-9]{4}/);u&&r.updateState(r.updateValue(r.inputRef.current,u[0],r.props.numberFormat))}},r.readValues=function(e,t){return{value:e,valueToShow:r.mapValue(e,t||r.props.numberFormat),valueIsValid:r.isValueValidCardNumber(e),selectionStart:void 0,selectionEnd:void 0}},r.handleFocus=function(e){r.isValueEmpty(r.values.value)&&r.jumpTo(1),r.props.onFocus&&r.props.onFocus(e)},r.handleBlur=function(e){r.props.onBlur&&r.props.onBlur(e)},r.jumpToNext=function(){var e=r.inputRef.current.selectionStart,t=r.whereIsCaret(e);return t<4&&(r.jumpTo(t+1),!0)},r.jumpToPrevious=function(){var e=r.inputRef.current.selectionStart,t=r.whereIsCaret(e);return t>1&&(r.jumpTo(t-1),!0)},r.isValueEmpty=function(e){return""===e.replace(D,"")},r.jumpTo=function(e){var t=5*(e-1);r.values.selectionStart=t,r.values.selectionEnd=t,r.inputRef.current.setSelectionRange(r.values.selectionStart,r.values.selectionEnd)},r.handleKeyDown=function(e){if(r.props.disabled||r.props.readOnly)e.preventDefault();else if(8===e.keyCode)e.preventDefault(),r.updateState(r.deleteValue(e.target,-1));else if(46===e.keyCode)e.preventDefault(),r.updateState(r.deleteValue(e.target,1));else if(e.keyCode>=48&&e.keyCode<=57)e.preventDefault(),r.updateState(r.updateValue(e.target,(e.keyCode-48).toString(),r.props.numberFormat));else if(e.keyCode>=96&&e.keyCode<=105)e.preventDefault(),r.updateState(r.updateValue(e.target,(e.keyCode-96).toString(),r.props.numberFormat));else if(e.key>="\u06f0"&&e.key<="\u06f9"||e.key>="\u0660"&&e.key<="\u0669")e.preventDefault(),r.updateState(r.updateValue(e.target,e.key,r.props.numberFormat));else if("."===e.key||"/"===e.key||"-"===e.key||"*"===e.key||"#"===e.key||188===e.keyCode||189===e.keyCode||190===e.keyCode||191===e.keyCode)e.preventDefault(),e.ctrlKey||e.shiftKey||e.metaKey||"#"===e.key?r.jumpToPrevious():r.jumpToNext();else if(e.keyCode>=36&&e.keyCode<=40);else if(9===e.keyCode){if(Math.abs(r.inputRef.current.selectionStart-r.inputRef.current.selectionEnd)===r.inputRef.current.value.length)return;e.ctrlKey||e.shiftKey||e.metaKey?r.jumpToPrevious()&&e.preventDefault():r.jumpToNext()&&e.preventDefault()}else 13===e.keyCode?r.hideKeyboard():(!e.ctrlKey&&!e.metaKey||67!==e.keyCode&&86!==e.keyCode&&88!==e.keyCode)&&((e.ctrlKey||e.metaKey)&&82===e.keyCode||(e.ctrlKey||e.metaKey)&&73===e.keyCode||(e.ctrlKey||e.metaKey)&&65===e.keyCode||(e.ctrlKey||e.metaKey)&&76===e.keyCode||(115===e.keyCode?r.props.onShowDialog&&(e.preventDefault(),r.props.onShowDialog()):e.keyCode>=112&&e.keyCode<=123||(229===e.keyCode?(r.values.selectionStart=r.inputRef.current.selectionStart,r.values.selectionEnd=r.inputRef.current.selectionEnd):e.preventDefault())))},r.hideKeyboard=function(){r.inputRef.current.blur()},r.handlePaste=function(e){if(e.preventDefault(),!r.props.disabled&&!r.props.readOnly){var t=r.readCardNumberFromValue((e.clipboardData||window.clipboardData).getData("text"));if(t){var a=r.readValues(t);a.valueIsValid&&r.updateState(a)}}},r.handleInput=function(e){if(e.preventDefault(),!r.props.disabled&&!r.props.readOnly&&r.values.valueToShow!==e.target.value){var t,a=e.target.value;r.inputRef.current.value!==r.values.valueToShow&&(r.inputRef.current.value=r.values.valueToShow,r.inputRef.current.setSelectionRange(r.values.selectionStart,r.values.selectionEnd)),((t=a).indexOf(".")>=0||t.indexOf(",")>=0||t.indexOf("-")>=0||t.indexOf(";")>=0||t.indexOf("*")>=0||t.indexOf("#")>=0||t.indexOf(" ")>=0||t.indexOf("\u060c")>=0)&&r.jumpToNext()}},r.mapValue=function(e,t){return t===v?f(e):t===b?m(e):f(e)},r.updateState=function(e,t){if(e){r.values=e,void 0===r.values.valueIsValid&&(r.values.valueIsValid=r.isValueValidCardNumber(r.values.value));var a=!1;r.inputRef.current.value!==r.values.valueToShow&&(a=!0,r.inputRef.current.value=r.values.valueToShow),r.inputRef.current===document.activeElement&&r.inputRef.current.setSelectionRange(r.values.selectionStart,r.values.selectionEnd),a&&(t||r.fireOnChange())}},r.updateValue=function(e,t,a){var n=r.mapValue(t,a),u=e.value;""===u&&(u=w);var o=e.selectionStart,l=e.selectionEnd;u=u.substring(0,o)+n+u.substring(l),o+=n.length;var s=u.lastIndexOf(R,o-1)+1,i=u.indexOf(R,o);-1===i&&(i=u.length),i-s>4&&(o-s>=4?(u=u.substring(0,s)+u.substring(o-4,o)+u.substring(i),o=s+4):u=u.substring(0,s+4)+u.substring(i));var p=m(u),d=r.isValueValidCardNumber(p);return o=0?(a="",n=0):a=a.substring(0,n)+y(" ",u-n)+a.substring(u);u=n;var s=m(a);return{value:s,valueToShow:a,valueIsValid:r.isValueValidCardNumber(s),selectionStart:n,selectionEnd:u}},r.fireOnChange=function(){if(r.props.onChange){var e=r.values.value;if(r.previousValue!==e){r.previousValue=e;var t={name:r.props.name,value:r.values.value,valueIsValid:r.values.valueIsValid};r.props.onChange({target:t})}}},r.emptyValue=r.emptyValue.bind(Object(k.a)(r));var u=e.inputRef||e.getInputRef;return u&&"function"===typeof u&&(u=u()),r.inputRef=u||n.a.createRef(),r.values=r.readValues(e.value),r.previousValue=r.values.value,r}return Object(l.a)(a,[{key:"emptyValue",value:function(){this.updateState(this.resetValues())}},{key:"shouldComponentUpdate",value:function(e,t){return e.value===this.values.value&&e.numberFormat===this.props.numberFormat||this.updateState(this.readValues(e.value,e.numberFormat),!0),!h()(e.style,this.props.style)||(e.className!==this.props.className&&(this.inputRef.current.className=e.className),e.disabled!==this.props.disabled&&(this.inputRef.current.disabled=e.disabled),e.readOnly!==this.props.readOnly&&(this.inputRef.current.readOnly=e.readOnly),e.placeholder!==this.props.placeholder&&(this.inputRef.current.placeholder=e.placeholder),!1)}},{key:"render",value:function(){var e=this.props,t=(e.value,e.onChange,e.onFocus,e.onBlur,e.onInput,e.onPast,e.onKeyDown,e.onShowDialog,e.pattern,e.inputMode,e.type,e.inputRef,e.getInputRef,e.numberFormat,e.defaultValue,Object(d.a)(e,V)),a=this.values.valueToShow;return Object(S.jsx)("input",Object(p.a)({ref:this.inputRef,type:"tel",dir:"ltr",defaultValue:a,onKeyDown:this.handleKeyDown,onPaste:this.handlePaste,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur},t))}}]),a}(r.Component),N=(a(17),function(e){Object(s.a)(a,e);var t=Object(i.a)(a);function a(){var e;return Object(o.a)(this,a),(e=t.call(this)).state={Number1:"123",Number2:"",Number3:1200.246,color:!1,bgColor:!1,disabled:!1,readOnly:!1,Tel1:"0912",value1:"",placeholder:"type/paste a number"},e.handleChange=function(t){var a={},r=t.target;a[r.name]=r.value,e.setState(a,(function(){console.log("state",e.state)}))},e.handleValueChange=function(t){var a={},r=t.target;a[r.name.substr(0,7)]=r.value,e.setState(a,(function(){console.log("state",e.state)}))},e.toggleColor=function(){e.setState({color:!e.state.color})},e.toggleBgColor=function(){e.setState({bgColor:!e.state.bgColor})},e.toggleDisabled=function(){e.setState({disabled:!e.state.disabled})},e.toggleReadOnly=function(){e.setState({readOnly:!e.state.readOnly})},e.togglePlaceholder=function(){e.setState({placeholder:"\u067e\u06cc\u0633\u062a \u06cc\u0627 \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f"})},e.spanRef=n.a.createRef(),e}return Object(l.a)(a,[{key:"componentDidMount",value:function(){}},{key:"componentWillUnmount",value:function(){clearInterval(this.interval)}},{key:"render",value:function(){var e=this,t=this.state.color?"red":"",a=this.state.bgColor?{backgroundColor:"aqua"}:{},r=this.state,u=r.disabled,o=r.readOnly,l=r.placeholder;return Object(S.jsxs)(n.a.Fragment,{children:[Object(S.jsxs)("form",{autoComplete:"on",onKeyPress:function(t){e.spanRef.current.innerHTML="Key Code: "+t.charCode.toString()},children:[Object(S.jsxs)("div",{children:[Object(S.jsx)("br",{}),Object(S.jsx)("br",{}),Object(S.jsxs)("label",{children:["\u062e\u0631\u0648\u062c\u06cc \u0639\u062f\u062f \u0644\u0627\u062a\u06cc\u0646",Object(S.jsx)("br",{}),Object(S.jsx)("input",{type:"text",name:"Number1_value",style:{width:250},value:this.state.Number1,onChange:this.handleValueChange,placeholder:"\u0627\u0632 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u0644\u06cc\u062f \u062a\u0628 \u0631\u0627 \u0686\u0646\u062f \u0628\u0627\u0631 \u0628\u0632\u0646\u06cc\u062f"})]}),Object(S.jsx)("br",{}),Object(S.jsx)("br",{}),Object(S.jsxs)("label",{children:["\u0646\u0645\u0648\u0646\u0647 \u0641\u0627\u0631\u0633\u06cc",Object(S.jsx)("br",{}),Object(S.jsx)(C,{name:"Number1",disabled:u,readOnly:o,className:t,style:a,value:this.state.Number1,onChange:this.handleChange,placeholder:l})]})]}),Object(S.jsx)("br",{}),Object(S.jsx)("div",{children:Object(S.jsxs)("label",{children:["\u0646\u0645\u0648\u0646\u0647 \u0644\u0627\u062a\u06cc\u0646",Object(S.jsx)("br",{}),Object(S.jsx)(C,{name:"Number2",disabled:u,readOnly:o,className:t,style:a,value:this.state.Number2,numberFormat:b,onChange:this.handleChange,placeholder:"type/paste a number"})]})}),Object(S.jsxs)("label",{children:["\u062e\u0631\u0648\u062c\u06cc",Object(S.jsx)("br",{}),Object(S.jsx)("input",{type:"text",name:"Number2_value",style:{width:250},value:this.state.Number2,onChange:this.handleValueChange,placeholder:"\u0627\u06cc\u0646 \u0641\u06cc\u0644\u062f \u062e\u0631\u0648\u062c\u06cc \u0627\u0633\u062a"})]}),Object(S.jsx)("br",{}),Object(S.jsx)("br",{}),Object(S.jsx)("br",{}),Object(S.jsx)("div",{children:Object(S.jsxs)("label",{children:["\u0639\u062f\u062f \u0627\u0639\u0634\u0627\u0631\u06cc",Object(S.jsx)("br",{}),Object(S.jsx)(x,{name:"Number3",disabled:u,readOnly:o,className:t,style:a,value:this.state.Number3,asString:!1,maxDigits:5,maxDecimal:2,numberFormat:v,onChange:this.handleChange,placeholder:"type/paste a number"})]})}),Object(S.jsxs)("label",{children:["\u062e\u0631\u0648\u062c\u06cc",Object(S.jsx)("br",{}),Object(S.jsx)("input",{type:"text",name:"Number3_value",style:{width:250},value:this.state.Number3,onChange:this.handleValueChange,placeholder:"\u0627\u06cc\u0646 \u0641\u06cc\u0644\u062f \u062e\u0631\u0648\u062c\u06cc \u0627\u0633\u062a"})]}),Object(S.jsx)("br",{}),Object(S.jsx)("br",{}),Object(S.jsx)("div",{children:Object(S.jsxs)("label",{children:["\u0646\u0645\u0648\u0646\u0647 \u062a\u0644\u0641\u0646 \u0641\u0627\u0631\u0633\u06cc",Object(S.jsx)("br",{}),Object(S.jsx)(C,{type:"tel",name:"Tel1",disabled:u,readOnly:o,className:t,style:a,value:this.state.Tel1,onChange:this.handleChange,maxLength:12,placeholder:"type/paste a number"})]})}),Object(S.jsx)("br",{}),Object(S.jsxs)("label",{children:["\u0648\u0631\u0648\u062f\u06cc \u0634\u0645\u0627\u0631\u0647 \u06a9\u0627\u0631\u062a",Object(S.jsx)("br",{}),Object(S.jsx)(K,{value:this.state.value1,disabled:u,readOnly:o,name:"value1",className:t,style:a,onChange:this.handleChange,placeholder:"\u0634\u0645\u0627\u0631\u0647 \u06a9\u0627\u0631\u062a"}),Object(S.jsx)("br",{}),"\u062e\u0631\u0648\u062c\u06cc",Object(S.jsx)("br",{}),Object(S.jsx)("input",{type:"tel",name:"value1",dir:"ltr",value:this.state.value1,onChange:this.handleChange})]}),Object(S.jsx)("br",{}),Object(S.jsx)("br",{}),Object(S.jsx)("button",{type:"button",onClick:this.toggleColor,children:"toggle className"}),Object(S.jsx)("button",{type:"button",onClick:this.toggleBgColor,children:"toggle style"}),Object(S.jsx)("button",{type:"button",onClick:this.toggleDisabled,children:u?"enable":"disable"}),Object(S.jsx)("button",{type:"button",onClick:this.toggleReadOnly,children:o?"writable":"read only"}),Object(S.jsx)("button",{type:"button",onClick:this.togglePlaceholder,children:"change place holder"}),Object(S.jsx)("input",{type:"submit"})]}),Object(S.jsx)("span",{ref:this.spanRef})]})}}]),a}(r.Component)),F=function(){return Object(S.jsxs)("div",{dir:"rtl",style:{margin:"35px auto",padding:25},children:[Object(S.jsx)("h1",{children:"\u06a9\u0645\u067e\u0646\u0646\u062a \u0639\u062f\u062f"}),Object(S.jsx)("br",{}),"\u0648\u0631\u0698\u0646 \u06f2\u060c\u06f0 \u0633\u0627\u062e\u062a \u06f2\u06f1",Object(S.jsxs)("ul",{children:[Object(S.jsx)("li",{children:"\u0646\u0645\u0627\u06cc\u0634 \u0639\u062f\u062f \u0641\u0627\u0631\u0633\u06cc \u06cc\u0627 \u0644\u0627\u062a\u06cc\u0646"}),Object(S.jsx)("li",{children:"\u0630\u062e\u06cc\u0631\u0647 \u0639\u062f\u062f \u0644\u0627\u062a\u06cc\u0646\u060c \u0628\u0627\u0639\u062b \u0645\u06cc\u0634\u0648\u062f \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0635\u062d\u06cc\u062d \u0628\u0647 \u0633\u0631\u0648\u0631 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f"}),Object(S.jsx)("li",{children:"\u0646\u0645\u0627\u06cc\u0634 \u063a\u06cc\u0631 \u0639\u062f\u062f \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0627\u0632 \u0628\u06cc\u0631\u0648\u0646 \u0628\u0647 \u0622\u0646 \u0648\u0627\u0631\u062f \u0634\u0648\u062f."}),Object(S.jsx)("li",{children:"\u0646\u0645\u0627\u06cc\u0634 \u06a9\u06cc\u0628\u0648\u0631\u062f \u0639\u062f\u062f\u06cc \u062f\u0631 \u0645\u0628\u0627\u06cc\u0644 (\u063a\u06cc\u0631 \u0627\u0632 \u0645\u0631\u0648\u0631\u06af\u0631 \u0633\u0627\u0645\u0633\u0648\u0646\u06af) "}),Object(S.jsx)("li",{children:"\u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0627 Create-React-App / NextJs"})]}),Object(S.jsx)(N,{})]})};Object(u.render)(Object(S.jsx)(F,{}),document.getElementById("root"))}},[[18,1,2]]]); 2 | //# sourceMappingURL=main.4d5252d6.chunk.js.map -------------------------------------------------------------------------------- /docs/static/js/main.4d5252d6.chunk.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["lib/util.js","lib/NumberInput.js","lib/DecimalInput.js","lib/CardNumberInput.js","Example.js","index.js"],"names":["NUMBER_FORMAT_FARSI","NUMBER_FORMAT_LATIN","mapToFarsi","str","toString","replace","e","c","charCodeAt","String","fromCharCode","mapToLatin","stripAnyThingButDigits","repeatStr","n","r","i","NumberInput","props","readValuesFromProps","value","valueToShow","mapValue","numberFormat","selectionStart","undefined","selectionEnd","handleKeyDown","event","disabled","readOnly","preventDefault","keyCode","updateState","deleteValue","target","updateValue","key","hideKeyboard","ctrlKey","metaKey","inputRef","current","blur","handlePaste","enteredValue","clipboardData","window","getData","handleInput","values","recheckValue","newState","forceFireChange","noFireOnChange","fireOnChangeInTheEnd","document","activeElement","setSelectionRange","fireOnChange","element","enteredValueMapped","lengthToBe","length","maxLength","substring","qty","onChange","name","ref","getInputRef","React","createRef","nextProps","nextState","this","shallowEqualObjects","style","className","placeholder","rest","onInput","onPast","onKeyDown","pattern","inputMode","type","defaultValue","dir","onPaste","Component","DecimalInput","defaultThousandSeparator","defaultDecimalSeparator","asString","updateElementValue","decimalSeparator","maxDecimal","negate","stripAnyThingButNumber","firstHyphenIndex","indexOf","mapDecimalSeparator","decimalSeparatorRegex","valueIsValid","currentValue","valueBeforeCursor","valueAfterCursor","countThousandSeparator","stripThousandSeparator","latinNumber","firstNonZeroDigit","charAt","maxDigits","separated","addThousandSeparator","valueToShowWithSeparator","checkValue","Number","thousandSeparator","alreadFoundDecimalSeparator","alreadyPassedDecimalSeparator","groupCount","match","thousandSeparatorRegex","numberRegex","RegExp","CARD_SEPERATOR","SEPERATORES_REGEX","MATCH_REGEX","EMPTY_VALUE","CardNumberInput","readCardNumberFromValue","latinNumberValue","valueWithNoSeperator","match4Digit","readValues","isValueValidCardNumber","handleFocus","isValueEmpty","jumpTo","onFocus","handleBlur","onBlur","jumpToNext","whereTheCaretIs","whereIsCaret","jumpToPrevious","section","caretPosition","shiftKey","Math","abs","onShowDialog","valueFromClipboard","inputValue","seperatorBefore","lastIndexOf","seperatorAfter","floor","resetValues","newValues","nextSeperator","previousValue","emptyValue","bind","Example","state","Number1","Number2","Number3","color","bgColor","Tel1","value1","handleChange","t","setState","console","log","handleValueChange","substr","toggleColor","toggleBgColor","toggleDisabled","toggleReadOnly","togglePlaceholder","spanRef","clearInterval","interval","backgroundColor","Fragment","autoComplete","onKeyPress","innerHTML","charCode","width","onClick","App","margin","padding","render","getElementById"],"mappings":"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","file":"static/js/main.4d5252d6.chunk.js","sourcesContent":["export const NUMBER_FORMAT_FARSI = 'FARSI';\nexport const NUMBER_FORMAT_LATIN = 'LATIN';\n\nexport function mapToFarsi(str) {\n if(!str) return str;\n return str.toString().replace(/[1234567890١٢٣٤٥٦٧٨٩٠]/gi, e => { const c = e.charCodeAt(0); return String.fromCharCode(c + (c < 60 ? 1728 : 144)) })\n}\n\nexport function mapToLatin(str) {\n if(!str) return str;\n return str.toString().replace(/[۱۲۳۴۵۶۷۸۹۰١٢٣٤٥٦٧٨٩٠]/gi, e => { const c = e.charCodeAt(0); return String.fromCharCode(c - (c < 1770 ? 1584 : 1728)) })\n}\n\nexport function stripAnyThingButDigits(str) {\n if(!str) return str;\n return str.toString().replace(/[^1234567890۱۲۳۴۵۶۷۸۹۰١٢٣٤٥٦٧٨٩٠]/gi, '');\n}\n\nexport function hasStringACharToGoToNext (str) {\n if(str.indexOf('.')>=0) return true;\n if(str.indexOf(',')>=0) return true;\n // if(str.indexOf('/')>=0) return true;\n if(str.indexOf('-')>=0) return true;\n if(str.indexOf(';')>=0) return true;\n if(str.indexOf('*')>=0) return true;\n if(str.indexOf('#')>=0) return true;\n if(str.indexOf(' ')>=0) return true;\n if(str.indexOf('،')>=0) return true;\n return false;\n}\n\n/**\n * @param {string} str\n * @param {number} n\n */\nexport function repeatStr(str, n){\n let r = '';\n for(let i=0; i {\n const value = props.value || '';\n const valueToShow = this.mapValue(value, props.numberFormat);\n\n return {\n value,\n valueToShow,\n selectionStart: undefined,\n selectionEnd: undefined,\n };\n };\n\n handleKeyDown = (event) => {\n // console.log('keyCode: ', event.keyCode, 'key: ', event.key);\n if(this.props.disabled || this.props.readOnly) {\n event.preventDefault();\n }else if(event.keyCode===8) { //backspace\n event.preventDefault();\n this.updateState(this.deleteValue(event.target, -1));\n }else if(event.keyCode===46){ //delete\n event.preventDefault();\n this.updateState(this.deleteValue(event.target, 1));\n }else if(event.keyCode>=48 && event.keyCode<=57){ //digits\n event.preventDefault();\n // console.log('digit');\n this.updateState(this.updateValue(event.target, (event.keyCode - 48).toString(), this.props.numberFormat));\n }else if(event.keyCode>=96 && event.keyCode<=105){ //digits\n event.preventDefault();\n // console.log('digit');\n this.updateState(this.updateValue(event.target, (event.keyCode - 96).toString(), this.props.numberFormat));\n }else if((event.key>='۰' && event.key<='۹') || (event.key>='٠' && event.key<='٩')){ //digits\n event.preventDefault();\n // console.log('digit');\n this.updateState(this.updateValue(event.target, event.key, this.props.numberFormat));\n }else if(event.keyCode>=35 && event.keyCode<=40){ //arrows\n }else if(event.keyCode===9){ //tab\n }else if(event.keyCode===13){ //return\n this.hideKeyboard();\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===67 || event.keyCode===86 || event.keyCode===88)){ //copy/paste/cut\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===82)){ //refresh key\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===82)){ //refresh key\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===73)){ //inspector\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===65)){ //select all\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===76)){ //location focus\n }else if(event.keyCode>=112 && event.keyCode<=123){ // All other F keys\n }else if(event.keyCode===229){ //android bug workaround\n }else{\n // console.log('other');\n // console.log('keyCode: ', event.keyCode, 'key: ', event.key, 'ctrlKey: ', event.ctrlKey);\n // this.rr.current.innerText = `keyCode: ${event.keyCode} key: ${event.key} ctrlKey: ${event.ctrlKey}`;\n event.preventDefault();\n }\n };\n\n hideKeyboard = () => {\n this.inputRef.current.blur();\n }\n\n handlePaste = (event) => {\n event.preventDefault();\n if(this.props.disabled || this.props.readOnly) return;\n\n const enteredValue = stripAnyThingButDigits((event.clipboardData || window.clipboardData).getData('text'));\n\n this.updateState(this.updateValue(event.target, enteredValue, this.props.numberFormat));\n };\n\n handleInput = (event) => {\n if(this.props.disabled || this.props.readOnly) return;\n if(this.values.valueToShow===event.target.value) return;\n\n const enteredValue = stripAnyThingButDigits(event.target.value);\n\n this.updateState(this.recheckValue(event.target, enteredValue, this.props.numberFormat), true);\n };\n\n mapValue = (value, numberFormat) => {\n if(numberFormat===NUMBER_FORMAT_FARSI){\n return mapToFarsi(value);\n }else if(numberFormat===NUMBER_FORMAT_LATIN){\n return mapToLatin(value);\n }\n return mapToFarsi(value);\n };\n\n\n updateState = (newState, forceFireChange, noFireOnChange) => {\n if(!newState) return;\n\n this.values = newState;\n let fireOnChangeInTheEnd = false;\n if(this.inputRef.current.value !== this.values.valueToShow){\n fireOnChangeInTheEnd = true;\n this.inputRef.current.value = this.values.valueToShow;\n }\n if(this.inputRef.current===document.activeElement){\n // console.log('has focus :D');\n this.inputRef.current.setSelectionRange(this.values.selectionStart, this.values.selectionEnd);\n }else{\n // console.log('has not focus :(');\n }\n if(fireOnChangeInTheEnd || forceFireChange){\n if(!noFireOnChange){\n this.fireOnChange();\n }\n }\n };\n\n updateValue = (element, enteredValue, numberFormat) => {\n const enteredValueMapped = this.mapValue(enteredValue, numberFormat);\n let valueToShow = element.value;\n let selectionStart = element.selectionStart;\n let selectionEnd = element.selectionEnd;\n\n let lengthToBe = valueToShow.length + enteredValue.length - (selectionEnd - selectionStart)\n\n if(this.props.maxLength && lengthToBe > this.props.maxLength){\n return;\n }\n\n valueToShow = valueToShow.substring(0, selectionStart) + enteredValueMapped + valueToShow.substring(selectionEnd);\n\n selectionStart += enteredValueMapped.length;\n selectionEnd = selectionStart;\n\n const value = mapToLatin(valueToShow);\n\n return {\n value,\n valueToShow,\n selectionStart,\n selectionEnd,\n };\n };\n\n recheckValue = (element, enteredValue, numberFormat) => {\n let valueToShow = this.mapValue(enteredValue, numberFormat);\n let selectionStart = element.selectionStart;\n let selectionEnd = element.selectionEnd;\n\n const value = mapToLatin(valueToShow);\n\n return {\n value,\n valueToShow,\n selectionStart,\n selectionEnd,\n };\n };\n\n deleteValue = (element, qty) => {\n let valueToShow = element.value;\n let selectionStart = element.selectionStart;\n let selectionEnd = element.selectionEnd;\n\n // console.log({selectionStart, selectionEnd})\n\n if(selectionStart===selectionEnd){\n if(qty < 0) {\n if(selectionStart===0) return;\n valueToShow = valueToShow.substring(0, selectionStart + qty) + valueToShow.substring(selectionEnd);\n selectionStart += qty;\n }else{\n if(selectionEnd===valueToShow.length) return;\n valueToShow = valueToShow.substring(0, selectionStart) + valueToShow.substring(selectionEnd+qty);\n }\n }else{\n valueToShow = valueToShow.substring(0, selectionStart) + valueToShow.substring(selectionEnd);\n }\n\n selectionEnd = selectionStart;\n\n const value = mapToLatin(valueToShow);\n\n return {\n value,\n valueToShow,\n selectionStart,\n selectionEnd,\n };\n };\n\n fireOnChange = () => {\n if(this.props.onChange){\n this.props.onChange({target: {name: this.props.name, value: this.values.value}});\n }\n };\n\n shouldComponentUpdate(nextProps, nextState){\n if(nextProps.value !== this.values.value || nextProps.numberFormat !== this.props.numberFormat){\n this.updateState(this.readValuesFromProps(nextProps), false, true);\n }\n if(!shallowEqualObjects(nextProps.style, this.props.style)){\n return true;\n }\n if(nextProps.className !== this.props.className){\n this.inputRef.current.className = nextProps.className;\n }\n if(nextProps.disabled !== this.props.disabled){\n this.inputRef.current.disabled = nextProps.disabled;\n }\n if(nextProps.readOnly !== this.props.readOnly){\n this.inputRef.current.readOnly = nextProps.readOnly;\n }\n if(nextProps.placeholder !== this.props.placeholder){\n this.inputRef.current.placeholder = nextProps.placeholder;\n }\n return false;\n }\n\n render() {\n const {value, onChange, onInput, onPast, onKeyDown, pattern, inputMode, type, ref, inputRef, getInputRef, numberFormat, defaultValue, ...rest} = this.props;\n const {valueToShow} = this.values;\n\n // const localInputMode = this.props.type === 'tel' ? 'tel' : 'numeric'; // as we use type=tel, then we do not need it any more\n // const localPattern = '[0-9]*'; // it has problem with the form checking, as we insert persian digit, it is not acceptable for the browser\n\n return (\n \n );\n //

empty

\n\n }\n}\nexport default NumberInput;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqualObjects from 'shallow-equal/objects';\n\nimport { mapToFarsi, mapToLatin, NUMBER_FORMAT_FARSI, NUMBER_FORMAT_LATIN} from './util';\n\nclass DecimalInput extends Component {\n\n static propTypes = {\n /**\n * The ref to pass on the input, if empty it will be created internally\n */\n inputRef: PropTypes.any,\n getInputRef: PropTypes.any,\n /**\n * The name that will be set while firing the onChange event in the target object\n */\n name: PropTypes.string,\n /**\n * Callback function that is fired when the cart number value changes.\n */\n onChange: PropTypes.func,\n /**\n * Override the inline-styles of the root element.\n */\n style: PropTypes.object,\n /**\n * The css class name of the root element.\n */\n className: PropTypes.string,\n /**\n * Disables the decimal input.\n */\n disabled: PropTypes.bool,\n /**\n * makes the decimal input readonly.\n */\n readOnly: PropTypes.bool,\n /**\n * Callback function that is fired when a click event occurs on the input.\n */\n onClick: PropTypes.func,\n /**\n * Callback function that is fired when the input gains focus.\n */\n onFocus: PropTypes.func,\n /**\n * Sets the value for the decimal input.\n */\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]),\n /**\n * Sets the thousand separator\n */\n thousandSeparator: PropTypes.string,\n /**\n * Sets the decimal separator\n */\n decimalSeparator: PropTypes.string,\n /**\n * makes the value string, it is useful for big decimals.\n */\n asString: PropTypes.bool,\n /**\n * max digits before decimal separator.\n */\n maxDigits: PropTypes.number,\n /**\n * max digits after decimal separator.\n */\n maxDecimal: PropTypes.number,\n };\n\n constructor(props) {\n super(props);\n let ref = props.inputRef || props.getInputRef;\n if(ref && typeof ref === 'function'){\n ref = ref();\n }\n this.inputRef = ref ? ref : React.createRef();\n // this.rr = React.createRef();\n\n this.thousandSeparator = props.thousandSeparator === '' ? '' : props.thousandSeparator || this.defaultThousandSeparator();\n this.decimalSeparator = props.decimalSeparator || this.defaultDecimalSeparator();\n this.thousandSeparatorRegex = new RegExp(`[${this.thousandSeparator}]`, 'g');\n this.decimalSeparatorRegex = new RegExp(`[.${this.decimalSeparator}]`, 'g');\n this.numberRegex = new RegExp(`[^-1234567890۱۲۳۴۵۶۷۸۹۰.${this.decimalSeparator}]`, 'gi');\n this.values = this.readValuesFromProps(props);\n }\n\n defaultThousandSeparator = () => {\n return ',';\n };\n\n defaultDecimalSeparator = () => {\n return '.';\n };\n\n readValuesFromProps = (props) => {\n if(props.value || props.value===0){\n const value = props.value.toString();\n return this.updateValue('', 0, 0, value, props.numberFormat, props.asString);\n }\n\n return {\n value: undefined,\n valueToShow: '',\n selectionStart: undefined,\n selectionEnd: undefined,\n };\n };\n\n handleKeyDown = (event) => {\n // console.log('keyCode: ', event.keyCode, 'key: ', event.key);\n if(this.props.disabled || this.props.readOnly) {\n event.preventDefault();\n }else if(event.keyCode===8) { //backspace\n event.preventDefault();\n this.updateState(this.deleteValue(event.target, -1, this.props.asString));\n }else if(event.keyCode===46){ //delete\n event.preventDefault();\n this.updateState(this.deleteValue(event.target, 1, this.props.asString));\n }else if(event.keyCode>=48 && event.keyCode<=57){ //digits\n event.preventDefault();\n // console.log('digit');\n this.updateState(this.updateElementValue(event.target, (event.keyCode - 48).toString(), this.props.numberFormat, this.props.asString));\n }else if(event.keyCode>=96 && event.keyCode<=105){ //digits\n event.preventDefault();\n // console.log('digit');\n this.updateState(this.updateElementValue(event.target, (event.keyCode - 96).toString(), this.props.numberFormat, this.props.asString));\n }else if((event.key>='۰' && event.key<='۹') || (event.key>='٠' && event.key<='٩')){ //digits\n event.preventDefault();\n // console.log('digit');\n this.updateState(this.updateElementValue(event.target, event.key, this.props.numberFormat, this.props.asString));\n }else if(event.key===this.decimalSeparator || event.keyCode===190){ //point\n event.preventDefault();\n if(this.props.maxDecimal===null || this.props.maxDecimal===undefined || this.props.maxDecimal > 0){\n this.updateState(this.updateElementValue(event.target, this.decimalSeparator, this.props.numberFormat, this.props.asString));\n }\n }else if(event.key==='-' || event.keyCode===189){ // -\n event.preventDefault();\n this.updateState(this.negate());\n }else if(event.keyCode>=35 && event.keyCode<=40){ //arrows\n }else if(event.keyCode===9){ //tab\n }else if(event.keyCode===13){ //return\n this.hideKeyboard();\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===67 || event.keyCode===86 || event.keyCode===88)){ //copy/paste/cut\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===82)){ //refresh key\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===82)){ //refresh key\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===73)){ //inspector\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===65)){ //select all\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===76)){ //location focus\n }else if(event.keyCode>=112 && event.keyCode<=123){ // All other F keys\n }else if(event.keyCode===229){ //android bug workaround\n }else{\n // console.log('other');\n // console.log('keyCode: ', event.keyCode, 'key: ', event.key, 'ctrlKey: ', event.ctrlKey);\n // this.rr.current.innerText = `keyCode: ${event.keyCode} key: ${event.key} ctrlKey: ${event.ctrlKey}`;\n event.preventDefault();\n }\n };\n\n hideKeyboard = () => {\n this.inputRef.current.blur();\n }\n\n handlePaste = (event) => {\n event.preventDefault();\n if(this.props.disabled || this.props.readOnly) return;\n\n let enteredValue = this.stripAnyThingButNumber((event.clipboardData || window.clipboardData).getData('text'));\n if(this.values.valueToShow!==''){\n enteredValue = enteredValue.replace(/[-]/g, '');\n }\n\n this.updateState(this.updateElementValue(event.target, enteredValue, this.props.numberFormat, this.props.asString));\n };\n\n handleInput = (event) => {\n if(this.values.valueToShow===event.target.value) return;\n if(this.props.disabled || this.props.readOnly) return;\n\n const enteredValue = this.stripAnyThingButNumber(event.target.value);\n\n const firstHyphenIndex = enteredValue.indexOf('-');\n const secondHyphenIndex = enteredValue.indexOf('-', firstHyphenIndex + 1);\n if(secondHyphenIndex >= 0 || firstHyphenIndex > 0){\n this.updateState(this.negate());\n }else{\n const selectionStart = event.target.selectionStart;\n const selectionEnd = event.target.selectionEnd;\n const newState = this.updateValue('', selectionStart, selectionEnd, enteredValue, this.props.numberFormat, this.props.asString);\n this.updateState(newState, true);\n }\n };\n\n mapValue = (value, numberFormat) => {\n if(numberFormat===NUMBER_FORMAT_FARSI){\n return mapToFarsi(value);\n }else if(numberFormat===NUMBER_FORMAT_LATIN){\n return mapToLatin(value);\n }\n return mapToFarsi(value);\n };\n\n mapDecimalSeparator = (value) => {\n return value.replace(this.decimalSeparatorRegex, this.decimalSeparator);\n };\n\n\n updateState = (newState, forceFireChange, noFireOnChange) => {\n if(!newState) return;\n\n this.values = newState;\n let fireOnChangeInTheEnd = false;\n if(this.inputRef.current.value !== this.values.valueToShow){\n fireOnChangeInTheEnd = true;\n this.inputRef.current.value = this.values.valueToShow;\n }\n if(this.inputRef.current===document.activeElement){\n // console.log('has focus :D');\n this.inputRef.current.setSelectionRange(this.values.selectionStart, this.values.selectionEnd);\n }else{\n // console.log('has not focus :(');\n }\n if(fireOnChangeInTheEnd || forceFireChange){\n if(!noFireOnChange){\n this.fireOnChange();\n }\n }\n };\n\n negate = () => {\n let {value,\n valueToShow,\n valueIsValid,\n selectionStart,\n selectionEnd} = this.values;\n\n if(value > 0) {\n value = -value;\n valueToShow = '-'+valueToShow;\n selectionStart++;\n selectionEnd++;\n }else if(value < 0) {\n value = -value;\n valueToShow = valueToShow.substring(1);\n selectionStart--;\n selectionEnd--;\n }else{\n return;\n }\n\n return {\n value,\n valueToShow,\n valueIsValid,\n selectionStart,\n selectionEnd,\n };\n };\n\n updateElementValue = (element, enteredValue, numberFormat, asString) => {\n let currentValue = element.value;\n let selectionStart = element.selectionStart;\n let selectionEnd = element.selectionEnd;\n return this.updateValue(currentValue, selectionStart, selectionEnd, enteredValue, numberFormat, asString);\n }\n\n updateValue = (currentValue, selectionStart, selectionEnd, enteredValue, numberFormat, asString) => {\n const enteredValueMapped = this.mapDecimalSeparator(this.mapValue(enteredValue, numberFormat));\n let valueToShow = currentValue;\n if(enteredValueMapped===this.decimalSeparator){\n const i = valueToShow.indexOf(this.decimalSeparator);\n if(i>-1){\n return;\n }\n }\n\n let valueBeforeCursor = valueToShow.substring(0, selectionStart);\n let valueAfterCursor = valueToShow.substring(selectionEnd);\n\n selectionStart -= this.countThousandSeparator(valueBeforeCursor);\n valueBeforeCursor = this.stripThousandSeparator(valueBeforeCursor);\n valueAfterCursor = this.stripThousandSeparator(valueAfterCursor);\n\n valueToShow = valueBeforeCursor + enteredValueMapped + valueAfterCursor;\n selectionStart += enteredValueMapped.length;\n\n if(typeof this.props.maxDecimal === 'number'){\n const i = valueToShow.indexOf(this.decimalSeparator);\n if(i>-1){\n const decimalLength = valueToShow.length - i - 1;\n if(decimalLength > this.props.maxDecimal){\n valueToShow = valueToShow.substring(0, i + (this.props.maxDecimal? 1 : 0) + this.props.maxDecimal);\n if(selectionStart>valueToShow.length) selectionStart = valueToShow.length;\n }\n }\n }\n {\n const latinNumber = mapToLatin(valueToShow);\n const i = this.firstNonZeroDigit(latinNumber, 0);\n if(i > 0 && valueToShow.length>1){\n valueToShow = valueToShow.substring(i);\n selectionStart -= i;\n }else if(i===0 && latinNumber.charAt(0)==='.'){\n valueToShow = this.mapValue('0', numberFormat) + valueToShow;\n selectionStart++;\n }\n }\n if(typeof this.props.maxDigits === 'number'){\n const i = valueToShow.indexOf(this.decimalSeparator);\n const digitsLength = i>-1 ? i : valueToShow.length;\n if(digitsLength > this.props.maxDigits){\n if(i===-1){\n valueToShow = valueToShow.substring(0, this.props.maxDigits);\n if(selectionStart>valueToShow.length) selectionStart = valueToShow.length;\n }else{\n valueToShow = valueToShow.substring(0, this.props.maxDigits) + (i===-1 ? '' : valueToShow.substring(i));\n if(selectionStart>this.props.maxDigits) selectionStart = this.props.maxDigits;\n }\n }\n }\n\n const separated = this.addThousandSeparator(valueToShow, selectionStart);\n valueToShow = separated.valueToShowWithSeparator;\n selectionStart = separated.selectionStart;\n selectionEnd = selectionStart;\n\n let value = this.stripThousandSeparator(mapToLatin(valueToShow));\n let valueIsValid;\n if(asString) {\n const checkValue = Number(value);\n valueIsValid = (typeof checkValue === 'number' || checkValue === undefined || checkValue === null);\n }else{\n value = Number(value);\n valueIsValid = (typeof value === 'number' || value === undefined || value === null);\n }\n\n return {\n value,\n valueToShow,\n valueIsValid,\n selectionStart,\n selectionEnd,\n };\n };\n\n deleteValue = (element, qty, asString) => {\n let valueToShow = element.value;\n let selectionStart = element.selectionStart;\n let selectionEnd = element.selectionEnd;\n\n // console.log({selectionStart, selectionEnd})\n\n if(selectionStart===selectionEnd){\n if(qty < 0) {\n if(selectionStart===0) return;\n let valueBeforeCursor = valueToShow.substring(0, selectionStart + qty);\n let valueAfterCursor = valueToShow.substring(selectionEnd);\n \n selectionStart -= this.countThousandSeparator(valueBeforeCursor);\n valueBeforeCursor = this.stripThousandSeparator(valueBeforeCursor);\n valueAfterCursor = this.stripThousandSeparator(valueAfterCursor);\n \n valueToShow = valueBeforeCursor + valueAfterCursor;\n selectionStart += qty;\n }else{\n if(selectionEnd===valueToShow.length) return;\n let valueBeforeCursor = valueToShow.substring(0, selectionStart);\n let valueAfterCursor = valueToShow.substring(selectionEnd+qty);\n \n selectionStart -= this.countThousandSeparator(valueBeforeCursor);\n valueBeforeCursor = this.stripThousandSeparator(valueBeforeCursor);\n valueAfterCursor = this.stripThousandSeparator(valueAfterCursor);\n \n valueToShow = valueBeforeCursor + valueAfterCursor;\n }\n }else{\n let valueBeforeCursor = valueToShow.substring(0, selectionStart);\n let valueAfterCursor = valueToShow.substring(selectionEnd);\n \n selectionStart -= this.countThousandSeparator(valueBeforeCursor);\n valueBeforeCursor = this.stripThousandSeparator(valueBeforeCursor);\n valueAfterCursor = this.stripThousandSeparator(valueAfterCursor);\n \n valueToShow = valueBeforeCursor + valueAfterCursor;\n }\n\n const separated = this.addThousandSeparator(valueToShow, selectionStart);\n valueToShow = separated.valueToShowWithSeparator;\n selectionStart = separated.selectionStart;\n selectionEnd = selectionStart;\n\n let value = this.stripThousandSeparator(mapToLatin(valueToShow));\n let valueIsValid;\n if(asString) {\n const checkValue = Number(value);\n valueIsValid = (typeof checkValue === 'number' || checkValue === undefined || checkValue === null);\n }else{\n value = Number(value);\n valueIsValid = (typeof value === 'number' || value === undefined || value === null);\n }\n\n\n return {\n value,\n valueToShow,\n valueIsValid,\n selectionStart,\n selectionEnd,\n };\n };\n\n\n addThousandSeparator = (valueToShow, selectionStart) => {\n if(this.thousandSeparator==='')\n return {valueToShowWithSeparator: valueToShow, selectionStart};\n let valueToShowWithSeparator = '';\n let alreadFoundDecimalSeparator = false;\n let alreadyPassedDecimalSeparator = valueToShow.indexOf(this.decimalSeparator) === -1;\n let groupCount = 0;\n for (let i = valueToShow.length-1; i>=0; i--){\n const c = valueToShow.charAt(i);\n if(c===this.decimalSeparator){\n if(!alreadFoundDecimalSeparator){\n alreadFoundDecimalSeparator = true;\n valueToShowWithSeparator = c + valueToShowWithSeparator;\n alreadyPassedDecimalSeparator = true;\n groupCount = 0;\n }else{\n if(i <= selectionStart){\n selectionStart--;\n }\n }\n }else{\n if(alreadyPassedDecimalSeparator && groupCount===3 && c!=='-'){\n valueToShowWithSeparator = this.thousandSeparator + valueToShowWithSeparator;\n groupCount = 0;\n if(i {\n if(value.charAt(i)===this.decimalSeparator) {\n if(i>0)\n return i - 1;\n else return i;\n }\n if(value.charAt(i)==='0') return this.firstNonZeroDigit(value, i+1);\n return i;\n };\n\n countThousandSeparator = (value) => {\n return this.thousandSeparator === '' ? 0 : (value.match(this.thousandSeparatorRegex) || []).length;\n };\n\n stripThousandSeparator = (value) => {\n return this.thousandSeparator === '' ? value : value.replace(this.thousandSeparatorRegex, '');\n };\n\n stripAnyThingButNumber = (str) => {\n if(!str) return str;\n return str.toString().replace(this.numberRegex, '');\n };\n \n fireOnChange = () => {\n if(this.props.onChange){\n this.props.onChange({target: {name: this.props.name, value: this.values.value}});\n }\n };\n\n shouldComponentUpdate(nextProps, nextState){\n if(nextProps.value !== this.values.value || nextProps.numberFormat !== this.props.numberFormat){\n this.updateState(this.readValuesFromProps(nextProps), false, true);\n }\n if(!shallowEqualObjects(nextProps.style, this.props.style)){\n return true;\n }\n if(nextProps.className !== this.props.className){\n this.inputRef.current.className = nextProps.className;\n }\n if(nextProps.disabled !== this.props.disabled){\n this.inputRef.current.disabled = nextProps.disabled;\n }\n if(nextProps.readOnly !== this.props.readOnly){\n this.inputRef.current.readOnly = nextProps.readOnly;\n }\n if(nextProps.placeholder !== this.props.placeholder){\n this.inputRef.current.placeholder = nextProps.placeholder;\n }\n return false;\n }\n\n render() {\n const {value, onChange, onInput, onPast, onKeyDown, pattern, inputMode, type, ref, inputRef, getInputRef, numberFormat, defaultValue, asString, maxDecimal, maxDigits, thousandSeparator, decimalSeparator, ...rest} = this.props;\n const {valueToShow} = this.values;\n\n // const localInputMode = this.props.type === 'tel' ? 'tel' : 'numeric'; // as we use type=tel, then we do not need it any more\n // const localPattern = '[0-9]*'; // it has problem with the form checking, as we insert persian digit, it is not acceptable for the browser\n\n return (\n \n );\n //

empty

\n\n }\n}\nexport default DecimalInput;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqualObjects from 'shallow-equal/objects';\nimport { mapToFarsi, mapToLatin, hasStringACharToGoToNext, repeatStr, NUMBER_FORMAT_FARSI, NUMBER_FORMAT_LATIN} from './util';\n\nconst CARD_SEPERATOR = '-';\nconst SEPERATORES_REGEX = new RegExp(`[ ${CARD_SEPERATOR}]`, 'g');\nconst MATCH_REGEX = new RegExp(`[0-9]{4}[${CARD_SEPERATOR}][0-9]{4}[${CARD_SEPERATOR}][0-9]{4}[${CARD_SEPERATOR}][0-9]{4}`);\nconst EMPTY_VALUE = ` ${CARD_SEPERATOR} ${CARD_SEPERATOR} ${CARD_SEPERATOR} `;\n\n\nclass CardNumberInput extends Component {\n\n static propTypes = {\n /**\n * The ref to pass on the input, if empty it will be created internally\n */\n inputRef: PropTypes.any,\n getInputRef: PropTypes.any,\n /**\n * The name that will be set while firing the onChange event in the target object\n */\n name: PropTypes.string,\n /**\n * Callback function that is fired when the cart number value changes.\n */\n onChange: PropTypes.func,\n /**\n * Override the inline-styles of the root element.\n */\n style: PropTypes.object,\n /**\n * The css class name of the root element.\n */\n className: PropTypes.string,\n /**\n * Disables the card number.\n */\n disabled: PropTypes.bool,\n /**\n * makes the card number readonly.\n */\n readOnly: PropTypes.bool,\n /**\n * Callback function that is fired when a click event occurs on the input.\n */\n onClick: PropTypes.func,\n /**\n * Callback function that is fired when the input gains focus.\n */\n onFocus: PropTypes.func,\n /**\n * Sets the value for the card number input.\n */\n value: PropTypes.string,\n };\n\n constructor(props) {\n super(props);\n this.emptyValue = this.emptyValue.bind(this);\n\n let ref = props.inputRef || props.getInputRef;\n if(ref && typeof ref === 'function'){\n ref = ref();\n }\n this.inputRef = ref ? ref : React.createRef();\n // this.rr = React.createRef();\n\n this.values = this.readValues(props.value);\n this.previousValue = this.values.value;\n }\n\n\n /**\n * @param {string} value\n */\n readCardNumberFromValue = (value) => {\n if(!value) return;\n\n const latinNumberValue = mapToLatin(value);\n const regEx = /[0-9]{4}[^0-9]*[0-9]{4}[^0-9]*[0-9]{4}[^0-9]*[0-9]{4}/;\n const match = latinNumberValue.match(regEx);\n if(match){\n const valueWithNoSeperator = match[0].replace(/[^0-9]*/g, '');\n return `${valueWithNoSeperator.substring(0, 4)}${CARD_SEPERATOR}${valueWithNoSeperator.substring(4, 8)}${CARD_SEPERATOR}${valueWithNoSeperator.substring(8, 12)}${CARD_SEPERATOR}${valueWithNoSeperator.substring(12, 16)}`;\n }\n\n const regEx4Digits = /[0-9]{4}/;\n const match4Digit = latinNumberValue.match(regEx4Digits);\n if(match4Digit){\n this.updateState(this.updateValue(this.inputRef.current, match4Digit[0], this.props.numberFormat));\n return;\n }\n\n }\n \n readValues = (value, numberFormat) => {\n const valueToShow = this.mapValue(value, numberFormat || this.props.numberFormat);\n const valueIsValid = this.isValueValidCardNumber(value);\n\n return {\n value,\n valueToShow,\n valueIsValid,\n selectionStart: undefined,\n selectionEnd: undefined,\n };\n };\n\n emptyValue() {\n this.updateState(this.resetValues());\n };\n\n handleFocus = (event) => {\n if(this.isValueEmpty(this.values.value)){\n this.jumpTo(1);\n }\n if(this.props.onFocus){\n this.props.onFocus(event);\n }\n };\n\n handleBlur = (event) => {\n if(this.props.onBlur){\n this.props.onBlur(event);\n }\n };\n\n jumpToNext = () => {\n const selectionStart = this.inputRef.current.selectionStart;\n const whereTheCaretIs = this.whereIsCaret(selectionStart);\n\n if(whereTheCaretIs < 4){\n this.jumpTo(whereTheCaretIs + 1);\n return true;\n }\n return false;\n };\n\n jumpToPrevious = () => {\n const selectionStart = this.inputRef.current.selectionStart;\n const whereTheCaretIs = this.whereIsCaret(selectionStart);\n\n if(whereTheCaretIs > 1){\n this.jumpTo(whereTheCaretIs - 1);\n return true;\n }\n return false;\n };\n\n isValueEmpty = (value) => {\n if(value.replace(SEPERATORES_REGEX, '')==='') return true;\n return false;\n }; \n\n /**\n * @param {number} section\n * */\n jumpTo = (section) => {\n const caretPosition = (section - 1) * 5;\n this.values.selectionStart = caretPosition;\n this.values.selectionEnd = caretPosition;\n this.inputRef.current.setSelectionRange(this.values.selectionStart, this.values.selectionEnd);\n };\n\n handleKeyDown = (event) => {\n // console.log('keyCode: ', event.keyCode, 'key: ', event.key);\n if(this.props.disabled || this.props.readOnly) {\n event.preventDefault();\n }else if(event.keyCode===8) { //backspace\n event.preventDefault();\n this.updateState(this.deleteValue(event.target, -1));\n }else if(event.keyCode===46){ //delete\n event.preventDefault();\n this.updateState(this.deleteValue(event.target, 1));\n }else if(event.keyCode>=48 && event.keyCode<=57){ //digits\n event.preventDefault();\n // console.log('digit');\n this.updateState(this.updateValue(event.target, (event.keyCode - 48).toString(), this.props.numberFormat));\n }else if(event.keyCode>=96 && event.keyCode<=105){ //digits\n event.preventDefault();\n // console.log('digit');\n this.updateState(this.updateValue(event.target, (event.keyCode - 96).toString(), this.props.numberFormat));\n }else if((event.key>='۰' && event.key<='۹') || (event.key>='٠' && event.key<='٩')){ //digits\n event.preventDefault();\n // console.log('digit');\n this.updateState(this.updateValue(event.target, event.key, this.props.numberFormat));\n }else if(event.key==='.' || event.key==='/' || event.key==='-' || event.key==='*' || event.key==='#' \n || \n event.keyCode===188 || event.keyCode===189 || event.keyCode===190 || event.keyCode===191 \n ){\n event.preventDefault();\n if(event.ctrlKey || event.shiftKey || event.metaKey || event.key==='#'){\n this.jumpToPrevious();\n }else{\n this.jumpToNext();\n }\n }else if(event.keyCode>=36 && event.keyCode<=40){ //arrows\n }else if(event.keyCode===9){ //tab\n if(Math.abs(this.inputRef.current.selectionStart - this.inputRef.current.selectionEnd)===this.inputRef.current.value.length){\n return;\n }\n if(event.ctrlKey || event.shiftKey || event.metaKey){\n if(this.jumpToPrevious()) event.preventDefault();\n }else{\n if(this.jumpToNext()) event.preventDefault();\n }\n }else if(event.keyCode===13){ //return\n this.hideKeyboard();\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===67 || event.keyCode===86 || event.keyCode===88)){ //copy/paste/cut\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===82)){ //refresh key\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===73)){ //inspector\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===65)){ //select all\n }else if((event.ctrlKey || event.metaKey) && (event.keyCode===76)){ //location focus\n }else if(event.keyCode===115){ // F4\n if(this.props.onShowDialog) {\n event.preventDefault();\n this.props.onShowDialog();\n }\n }else if(event.keyCode>=112 && event.keyCode<=123){ // All other F keys\n }else if(event.keyCode===229){ //android bug workaround\n //K1 : I guess that we have to save the caret position as the input will change it, we need it to know where we have to jump to in handleInput function\n this.values.selectionStart = this.inputRef.current.selectionStart;\n this.values.selectionEnd = this.inputRef.current.selectionEnd;\n // this.rr.current.innerText = `setting ss to ${this.values.selectionStart} ${this.values.selectionEnd}`;\n\n }else{\n // console.log('other');\n // console.log('keyCode: ', event.keyCode, 'key: ', event.key, 'ctrlKey: ', event.ctrlKey);\n // this.rr.current.innerText = `keyCode: ${event.keyCode} key: ${event.key} ctrlKey: ${event.ctrlKey}`;\n event.preventDefault();\n }\n };\n\n hideKeyboard = () => {\n this.inputRef.current.blur();\n }\n\n handlePaste = (event) => {\n event.preventDefault();\n if(this.props.disabled || this.props.readOnly) return;\n\n const valueFromClipboard = this.readCardNumberFromValue((event.clipboardData || window.clipboardData).getData('text'));\n if(!valueFromClipboard) return;\n\n const values = this.readValues(valueFromClipboard);\n\n if(values.valueIsValid){\n this.updateState(values);\n }\n };\n\n handleInput = (event) => {\n event.preventDefault();\n if(this.props.disabled || this.props.readOnly) return;\n if(this.values.valueToShow===event.target.value) return;\n const inputValue = event.target.value;\n // const enteredValue = stripAnyThingButDigits(event.target.value);\n // this.rr.current.innerText = `V : ${inputValue}`;\n \n if(this.inputRef.current.value !== this.values.valueToShow){\n this.inputRef.current.value = this.values.valueToShow;\n this.inputRef.current.setSelectionRange(this.values.selectionStart, this.values.selectionEnd);\n }\n\n if(hasStringACharToGoToNext(inputValue)){\n this.jumpToNext();\n }\n\n // this.updateState(this.rollbackValue());\n };\n\n /**\n * @param {string} value\n */\n mapValue = (value, numberFormat) => {\n if(numberFormat===NUMBER_FORMAT_FARSI){\n const mapped = mapToFarsi(value);\n return mapped;\n }else if(numberFormat===NUMBER_FORMAT_LATIN){\n const mapped = mapToLatin(value);\n return mapped;\n }\n const mapped = mapToFarsi(value);\n return mapped;\n };\n\n\n updateState = (newState, noFireOnChange) => {\n if(!newState) return;\n\n this.values = newState;\n\n if(this.values.valueIsValid===undefined){\n this.values.valueIsValid = this.isValueValidCardNumber(this.values.value);\n }\n\n let fireOnChangeInTheEnd = false;\n //console.log('values on updateState', this.values)\n if(this.inputRef.current.value !== this.values.valueToShow){\n fireOnChangeInTheEnd = true;\n this.inputRef.current.value = this.values.valueToShow;\n }\n if(this.inputRef.current===document.activeElement){\n // console.log('has focus :D');\n this.inputRef.current.setSelectionRange(this.values.selectionStart, this.values.selectionEnd);\n }else{\n // console.log('has not focus :(');\n }\n if(fireOnChangeInTheEnd){\n if(!noFireOnChange){\n this.fireOnChange();\n }\n }\n };\n\n updateValue = (element, enteredValue, numberFormat) => {\n const enteredValueMapped = this.mapValue(enteredValue, numberFormat);\n let valueToShow = element.value;\n if(valueToShow===''){\n valueToShow = EMPTY_VALUE;\n }\n let selectionStart = element.selectionStart;\n let selectionEnd = element.selectionEnd;\n\n valueToShow = valueToShow.substring(0, selectionStart) + enteredValueMapped + valueToShow.substring(selectionEnd);\n selectionStart += enteredValueMapped.length;\n\n const seperatorBefore = valueToShow.lastIndexOf(CARD_SEPERATOR, selectionStart - 1) + 1;\n let seperatorAfter = valueToShow.indexOf(CARD_SEPERATOR, selectionStart);\n if(seperatorAfter===-1) seperatorAfter = valueToShow.length;\n if(seperatorAfter - seperatorBefore > 4) {\n if(selectionStart - seperatorBefore >= 4){\n valueToShow = valueToShow.substring(0, seperatorBefore) + valueToShow.substring(selectionStart - 4, selectionStart) + valueToShow.substring(seperatorAfter);\n selectionStart = seperatorBefore + 4;\n }else{\n valueToShow = valueToShow.substring(0, seperatorBefore + 4) + valueToShow.substring(seperatorAfter);\n }\n }\n\n\n\n const value = mapToLatin(valueToShow);\n const valueIsValid = this.isValueValidCardNumber(value);\n\n if(selectionStart < valueToShow.length && value.substring(selectionStart - 4, selectionStart).match(/[0-9]{4}/)){\n selectionStart++;\n }\n selectionEnd = selectionStart;\n\n const values = {\n value,\n valueToShow,\n valueIsValid,\n selectionStart,\n selectionEnd,\n };\n\n return values; \n };\n\n /**\n * @param {number} selectionStart\n */\n whereIsCaret = (selectionStart) => {\n return Math.floor(selectionStart / 5) + 1;\n };\n\n /**\n * @param {string} value\n */\n isValueValidCardNumber = (value) => {\n if(!value) return false;\n if(value.match(MATCH_REGEX)) return true;\n return false;\n };\n\n resetValues = () => {\n const value = '';\n return {\n value,\n valueToShow: this.mapValue(value, this.props.numberFormat),\n valueIsValid: false,\n selectionStart: 0,\n selectionEnd: 0,\n };\n };\n\n deleteValue = (element, qty) => {\n let valueToShow = element.value;\n let selectionStart = element.selectionStart;\n let selectionEnd = element.selectionEnd;\n\n if(selectionStart===selectionEnd){\n if(qty < 0) {\n if(selectionStart===0) return;\n if(valueToShow.substring(selectionStart + qty, selectionStart)===CARD_SEPERATOR) {\n const newValues = {...this.values};\n newValues.selectionStart--;\n newValues.selectionEnd--;\n return newValues;\n }\n valueToShow = valueToShow.substring(0, selectionStart + qty) + valueToShow.substring(selectionEnd);\n selectionStart += qty;\n }else{\n if(selectionEnd===valueToShow.length) return;\n if(valueToShow.substring(selectionStart, selectionStart + qty)===CARD_SEPERATOR) return;\n valueToShow = valueToShow.substring(0, selectionStart) + valueToShow.substring(selectionEnd+qty);\n }\n const nextSeperator = valueToShow.indexOf(CARD_SEPERATOR, selectionStart);\n if(nextSeperator===-1){\n valueToShow = valueToShow + ' ';\n }else{\n valueToShow = valueToShow.substring(0, nextSeperator) +repeatStr(' ', Math.abs(qty))+ valueToShow.substring(nextSeperator);\n }\n }else{\n if(valueToShow.substring(selectionStart, selectionEnd).indexOf(CARD_SEPERATOR)>=0){\n valueToShow = '';\n selectionStart = 0;\n }else {\n valueToShow = valueToShow.substring(0, selectionStart) +repeatStr(' ', selectionEnd-selectionStart)+ valueToShow.substring(selectionEnd);\n }\n }\n\n selectionEnd = selectionStart;\n\n const value = mapToLatin(valueToShow);\n const valueIsValid = this.isValueValidCardNumber(value);\n\n const values = {\n value,\n valueToShow,\n valueIsValid,\n selectionStart,\n selectionEnd,\n };\n\n return values; \n };\n\n fireOnChange = () => {\n if(this.props.onChange){\n const value = this.values.value;\n if(this.previousValue !== value){\n this.previousValue = value;\n const target = {\n name: this.props.name,\n value: this.values.value,\n valueIsValid: this.values.valueIsValid,\n };\n this.props.onChange({target});\n }\n }\n };\n\n shouldComponentUpdate(nextProps, nextState){\n if(nextProps.value !== this.values.value || nextProps.numberFormat !== this.props.numberFormat){\n this.updateState(this.readValues(nextProps.value, nextProps.numberFormat), true);\n }\n if(!shallowEqualObjects(nextProps.style, this.props.style)){\n return true;\n }\n if(nextProps.className !== this.props.className){\n this.inputRef.current.className = nextProps.className;\n }\n if(nextProps.disabled !== this.props.disabled){\n this.inputRef.current.disabled = nextProps.disabled;\n }\n if(nextProps.readOnly !== this.props.readOnly){\n this.inputRef.current.readOnly = nextProps.readOnly;\n }\n if(nextProps.placeholder !== this.props.placeholder){\n this.inputRef.current.placeholder = nextProps.placeholder;\n }\n return false;\n }\n\n render() {\n const {value, onChange, onFocus, onBlur, onInput, onPast, onKeyDown, onShowDialog, pattern, inputMode, type, inputRef, getInputRef, numberFormat, defaultValue, ...rest} = this.props;\n const {valueToShow} = this.values;\n\n // const localInputMode = this.props.type === 'tel' ? 'tel' : 'numeric'; // as we use type=tel, then we do not need it any more\n // const localPattern = '[0-9]*'; // it has problem with the form checking, as we insert persian digit, it is not acceptable for the browser\n\n return (\n \n );\n //

empty

\n\n }\n}\n\n\nexport default CardNumberInput;","import React, { Component } from 'react';\nimport { NumberInput, DecimalInput, CardNumberInput, NUMBER_FORMAT_FARSI } from \"./lib\";\nimport {NUMBER_FORMAT_LATIN} from './lib';\nimport './Example.css';\n\nclass Example extends Component {\n state = {\n Number1: '123',\n Number2: '',\n Number3: 1200.246,\n color: false,\n bgColor: false,\n disabled: false,\n readOnly: false,\n Tel1: '0912',\n value1: '',\n placeholder: 'type/paste a number',\n };\n\n constructor(){\n super();\n this.spanRef = React.createRef();\n }\n\n componentDidMount(){\n // this.interval = setInterval(this.toggleBgColor, 6000);\n // this.interval = setInterval(this.toggleColor, 3000);\n }\n\n componentWillUnmount(){\n clearInterval(this.interval);\n }\n\n handleChange = (event) => {\n const newState = {};\n const t = event.target;\n\n newState[t.name] = t.value;\n this.setState(newState, ()=>{\n console.log('state', this.state)\n });\n };\n\n handleValueChange = (event) => {\n const newState = {};\n const t = event.target;\n\n newState[t.name.substr(0, 7)] = t.value;\n this.setState(newState, ()=>{\n console.log('state', this.state)\n });\n };\n\n toggleColor = () => {\n this.setState({\n color: !this.state.color,\n })\n };\n\n toggleBgColor = () => {\n this.setState({\n bgColor: !this.state.bgColor,\n })\n };\n\n toggleDisabled = () => {\n this.setState({\n disabled: !this.state.disabled,\n })\n };\n\n toggleReadOnly = () => {\n this.setState({\n readOnly: !this.state.readOnly,\n })\n };\n\n togglePlaceholder = () => {\n this.setState({\n placeholder: 'پیست یا تایپ کنید',\n })\n };\n\n render(){\n const className = this.state.color ? \"red\" : \"\";\n const style = this.state.bgColor ? {backgroundColor: 'aqua'} : {};\n const {disabled, readOnly, placeholder} = this.state;\n\n const showKeyCode = (e) => {\n this.spanRef.current.innerHTML = 'Key Code: ' + e.charCode.toString();\n }\n\n\n return (\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n \n \n \n \n \n
\n \n \n );\n }\n}\n\nexport default Example;\n","import React from 'react';\nimport { render } from \"react-dom\";\nimport Example from './Example';\n\nconst App = () => (\n
\n

کمپننت عدد

\n
ورژن ۲،۰ ساخت ۲۱\n
    \n
  • نمایش عدد فارسی یا لاتین
    • \n
  • ذخیره عدد لاتین، باعث میشود که داده صحیح به سرور داده شود
    • \n
  • نمایش غیر عدد در صورتی که داده از بیرون به آن وارد شود.
    • \n
  • نمایش کیبورد عددی در مبایل (غیر از مرورگر سامسونگ)
    • \n
  • قابل استفاده با Create-React-App / NextJs
    • \n
\n\n \n\n
\n);\n\nrender(, document.getElementById(\"root\"));\n"],"sourceRoot":""} --------------------------------------------------------------------------------