-
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.
Merge pull request #6306 from nitrogenous/inputotp
New Component InputOtp
- Loading branch information
Showing
68 changed files
with
1,898 additions
and
4,785 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { DocSectionCode } from '@/components/doc/common/docsectioncode'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
| import Link from 'next/link'; | ||
|
|
||
| export function AccessibilityDoc() { | ||
| return ( | ||
| <DocSectionText id="accessibility" label="Accessibility"> | ||
| <h3>Screen Reader</h3> | ||
| <p> | ||
| Input OTP uses a set of InputText components, refer to the <Link href="/inputtext">InputText</Link> component for more information about the screen reader support. | ||
| </p> | ||
|
|
||
| <h3>Keyboard Support</h3> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Key</th> | ||
| <th>Function</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| <i>tab</i> | ||
| </td> | ||
| <td>Moves focus to the input otp.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>right arrow</i> | ||
| </td> | ||
| <td>Moves focus to the next input element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>left arrow</i> | ||
| </td> | ||
| <td>Moves focus to the previous input element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>backspace</i> | ||
| </td> | ||
| <td>Deletes the input and moves focus to the previous input element.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </DocSectionText> | ||
| ); | ||
| } |
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,56 @@ | ||
| import React, { useState } from 'react'; | ||
| import { DocSectionCode } from '@/components/doc/common/docsectioncode'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
| import { InputOtp } from '@/components/lib/inputotp/inputotp'; | ||
|
|
||
| export function BasicDoc(props) { | ||
| const [token, setTokens] = useState(); | ||
|
|
||
| const code = { | ||
| basic: ` | ||
| <InputOtp value={token} onChange={(e) => setTokens(e.value)}/> | ||
| `, | ||
| javascript: ` | ||
| import React, { useState } from 'react'; | ||
| import { InputOtp } from 'primereact/inputotp'; | ||
| export default function BasicDemo() { | ||
| const [token, setTokens] = useState(); | ||
| return ( | ||
| <div className="card flex justify-content-center"> | ||
| <InputOtp value={token} onChange={(e) => setTokens(e.value)}/> | ||
| </div> | ||
| ); | ||
| } | ||
| `, | ||
| typescript: ` | ||
| import React, { useState } from 'react'; | ||
| import { InputOtp } from 'primereact/inputotp'; | ||
| export default function BasicDemo() { | ||
| const [token, setTokens] = useState<string | number | undefined>(); | ||
| return ( | ||
| <div className="card flex justify-content-center"> | ||
| <InputOtp value={token} onChange={(e) => setTokens(e.value)}/> | ||
| </div> | ||
| ); | ||
| } | ||
| ` | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <DocSectionText {...props}> | ||
| <p> | ||
| The number of characters is defined with the <i>length</i> property, which is set to 4 by default. | ||
| </p> | ||
| </DocSectionText> | ||
| <div className="card flex justify-content-center"> | ||
| <InputOtp value={token} onChange={(e) => setTokens(e.value)} /> | ||
| </div> | ||
| <DocSectionCode code={code} /> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.