-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
316 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import DomHandler from '../utils/DomHandler'; | ||
|
|
||
| export default class KeyFilter { | ||
| /* eslint-disable */ | ||
| static DEFAULT_MASKS = { | ||
| pint: /[\d]/, | ||
| int: /[\d\-]/, | ||
| pnum: /[\d\.]/, | ||
| money: /[\d\.\s,]/, | ||
| num: /[\d\-\.]/, | ||
| hex: /[0-9a-f]/i, | ||
| email: /[a-z0-9_\.\-@]/i, | ||
| alpha: /[a-z_]/i, | ||
| alphanum: /[a-z0-9_]/i | ||
| }; | ||
| /* eslint-enable */ | ||
|
|
||
| static KEYS = { | ||
| TAB: 9, | ||
| RETURN: 13, | ||
| ESC: 27, | ||
| BACKSPACE: 8, | ||
| DELETE: 46 | ||
| }; | ||
|
|
||
| static SAFARI_KEYS = { | ||
| 63234: 37, // left | ||
| 63235: 39, // right | ||
| 63232: 38, // up | ||
| 63233: 40, // down | ||
| 63276: 33, // page up | ||
| 63277: 34, // page down | ||
| 63272: 46, // delete | ||
| 63273: 36, // home | ||
| 63275: 35 // end | ||
| }; | ||
|
|
||
| static isNavKeyPress(e) { | ||
| let k = e.keyCode; | ||
| k = DomHandler.getBrowser().safari ? (KeyFilter.SAFARI_KEYS[k] || k) : k; | ||
|
|
||
| return (k >= 33 && k <= 40) || k === KeyFilter.KEYS.RETURN || k === KeyFilter.KEYS.TAB || k === KeyFilter.KEYS.ESC; | ||
| } | ||
|
|
||
| static isSpecialKey(e) { | ||
| let k = e.keyCode; | ||
|
|
||
| return k === 9 || k === 13 || k === 27 || k === 16 || k === 17 ||(k >= 18 && k <= 20) || | ||
| (DomHandler.getBrowser().opera && !e.shiftKey && (k === 8 || (k >= 33 && k <= 35) || (k >= 36 && k <= 39) || (k >= 44 && k <= 45))); | ||
| } | ||
|
|
||
|
|
||
| static getKey(e) { | ||
| let k = e.keyCode || e.charCode; | ||
| return DomHandler.getBrowser().safari ? (KeyFilter.SAFARI_KEYS[k] || k) : k; | ||
| } | ||
|
|
||
| static getCharCode(e) { | ||
| return e.charCode || e.keyCode || e.which; | ||
| } | ||
|
|
||
| static onKeyPress(e,keyfilter) { | ||
| this.regex = KeyFilter.DEFAULT_MASKS[keyfilter]? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter; | ||
| let browser = DomHandler.getBrowser(); | ||
|
|
||
| if (e.ctrlKey || e.altKey) { | ||
| return; | ||
| } | ||
|
|
||
| let k = this.getKey(e); | ||
| if (browser.mozilla && (this.isNavKeyPress(e) || k === KeyFilter.KEYS.BACKSPACE || (k === KeyFilter.KEYS.DELETE && e.charCode === 0))) { | ||
| return; | ||
| } | ||
|
|
||
| let c = this.getCharCode(e); | ||
| let cc = String.fromCharCode(c); | ||
| let ok = true; | ||
|
|
||
| if (browser.mozilla && (this.isSpecialKey(e) || !cc)) { | ||
| return; | ||
| } | ||
|
|
||
| ok = this.regex.test(cc); | ||
|
|
||
| if (!ok) { | ||
| e.preventDefault(); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| import React, {Component} from 'react'; | ||
| import {InputText} from '../../components/inputtext/InputText'; | ||
| import {TabView,TabPanel} from '../../components/tabview/TabView'; | ||
| import {CodeHighlight} from '../codehighlight/CodeHighlight'; | ||
|
|
||
| export class KeyFilterDemo extends Component { | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <div className="content-section introduction"> | ||
| <div className="feature-intro"> | ||
| <h1>KeyFilter</h1> | ||
| <p>KeyFilter directive restricts user input based on a regular expression.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="content-section implementation"> | ||
| <h3 className="first">Filtering</h3> | ||
| <div className="ui-g ui-fluid"> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="int" placeholder="Integers"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="num" placeholder="Numbers"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="money" placeholder="Money"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="hex" placeholder="Hex"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="alpha" placeholder="Alphabetic"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="alphanum" placeholder="Alphanumberic"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter={/^[^#<>*!]+$/} placeholder="Block # < > * !"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter={/[^\s]/} placeholder="Block space key"/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <KeyFilterDoc /> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| class KeyFilterDoc extends Component { | ||
|
|
||
| shouldComponentUpdate(){ | ||
| return false; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="content-section source"> | ||
| <TabView> | ||
| <TabPanel header="Documentation"> | ||
| <h3>Import</h3> | ||
| <CodeHighlight className="javascript"> | ||
| {` | ||
| import {InputText} from 'primereact/components/inputtext/InputText'; | ||
| `} | ||
| </CodeHighlight> | ||
|
|
||
| <h3>Getting Started</h3> | ||
| <p>KeyFilter is applied to an input text element using keyfilter attribute whose value is either a built-in regular expression name or a custom one. Following input only accepts integers.</p> | ||
|
|
||
| <CodeHighlight className="html"> | ||
| {` | ||
| <InputText keyfilter="int"/> | ||
| `} | ||
| </CodeHighlight> | ||
|
|
||
| <h3>Built-in Filters</h3> | ||
| <p>Commonly used cases have their own built-in shortcuts.</p> | ||
| <ul> | ||
| <li>pint: Positive integers</li> | ||
| <li>int: Integers</li> | ||
| <li>pnum: Positive numbers</li> | ||
| <li>num: Numbers</li> | ||
| <li>hex: Hexadecimal</li> | ||
| <li>email: Email</li> | ||
| <li>alpha: Alphabetic</li> | ||
| <li>alphanum: Alphanumeric</li> | ||
| </ul> | ||
|
|
||
| <h3>Custom Filter</h3> | ||
| <p>A custom filter is provided by binding a regular expression, here is an example that blocks special characters</p> | ||
| <CodeHighlight className="html"> | ||
| {` | ||
| <InputText keyfilter={/^[^#<>*!]+$/}/> | ||
| `} | ||
| </CodeHighlight> | ||
|
|
||
| <h3>Styling</h3> | ||
| <p>This directive does not apply any styling.</p> | ||
|
|
||
| <h3>Dependencies</h3> | ||
| <p>None.</p> | ||
| </TabPanel> | ||
|
|
||
| <TabPanel header="Source"> | ||
| <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/inputtext" className="btn-viewsource" target="_blank" rel="noopener noreferrer"> | ||
| <i className="fa fa-github"></i> | ||
| <span>View on GitHub</span> | ||
| </a> | ||
| <CodeHighlight className="javascript"> | ||
| {` | ||
| import React, {Component} from 'react'; | ||
| import {InputText} from '../../components/inputtext/InputText'; | ||
| export class KeyFilterDemo extends Component { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <div className="content-section introduction"> | ||
| <div className="feature-intro"> | ||
| <h1>KeyFilter</h1> | ||
| <p>KeyFilter directive restricts user input based on a regular expression.</p> | ||
| </div> | ||
| </div> | ||
| <div className="content-section implementation"> | ||
| <h3 className="first">Filtering</h3> | ||
| <div className="ui-g ui-fluid"> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="int" placeholder="Integers"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="num" placeholder="Numbers"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="money" placeholder="Money"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="hex" placeholder="Hex"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="alpha" placeholder="Alphabetic"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter="alphanum" placeholder="Alphanumberic"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter={/^[^#<>*!]+$/} placeholder="Block # < > * !"/> | ||
| </div> | ||
| <div className="ui-g-12 ui-md-4"> | ||
| <InputText keyfilter={/[^\\s]/} placeholder="Block space key"/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
| `} | ||
| </CodeHighlight> | ||
| </TabPanel> | ||
| </TabView> | ||
| </div> | ||
| ) | ||
| } | ||
| } |