|
- import {NextPage} from 'next';
- import {DefaultLayout} from '@/components/DefaultLayout';
- import {Section, Subsection} from '@/components/Section';
- import * as Formatted from '@tesseract-design/web-formatted-react';
- import {useRef} from 'react';
- import {ActionButton} from '@tesseract-design/web-action-react';
-
- const TemporalPage: NextPage = () => {
- const phoneNumberRef = useRef<HTMLInputElement>(null);
- return (
- <DefaultLayout title="Formatted">
- <Section title="PhoneNumberInput">
- <Subsection title="Default">
- <Formatted.PhoneNumberInput
- country="PH"
- label="Phone"
- name="phone"
- enhanced
- border
- onFocus={(e) => { console.log('focus', e.currentTarget)}}
- onBlur={(e) => { console.log('blur', e.currentTarget)}}
- onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}}
- />
- </Subsection>
- <Subsection title="Non-enhanced">
- <Formatted.PhoneNumberInput
- country="PH"
- label="Phone"
- name="phone"
- border
- onFocus={(e) => { console.log('focus', e.currentTarget)}}
- onBlur={(e) => { console.log('blur', e.currentTarget)}}
- onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}}
- />
- </Subsection>
- <Subsection title="With Default Value">
- <Formatted.PhoneNumberInput
- country="PH"
- label="Phone"
- name="phone2"
- enhanced
- border
- defaultValue="+639876543210"
- />
- </Subsection>
- <Subsection title="With Ref">
- <div className="flex gap-4 flex-wrap">
- <div>
- <Formatted.PhoneNumberInput
- country="PH"
- label="Phone"
- name="phone3"
- enhanced
- border
- ref={phoneNumberRef}
- onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}}
- />
- </div>
- <div>
- <ActionButton
- onClick={() => {
- if (phoneNumberRef.current) {
- phoneNumberRef.current.value = '+639123456789';
- }
- }}
- >
- Set Value
- </ActionButton>
- </div>
- <div>
- <ActionButton
- onClick={() => {
- if (phoneNumberRef.current) {
- phoneNumberRef.current.value = '+63465123456';
- }
- }}
- >
- Set Other Value
- </ActionButton>
- </div>
- <div>
- <ActionButton
- onClick={() => {
- if (phoneNumberRef.current) {
- phoneNumberRef.current.value = '+63288888888';
- }
- }}
- >
- Set Yet Other Value
- </ActionButton>
- </div>
- </div>
- </Subsection>
- </Section>
- <Section title="EmailInput">
- <Subsection title="Default">
- <Formatted.EmailInput
- label="Email"
- name="email"
- border
- />
- </Subsection>
- <Subsection title="With domains">
- <Formatted.EmailInput
- label="Email"
- name="email"
- border
- variant="alternate"
- domains={['gmail.com', 'yahoo.com']}
- hint="Only GMail or Yahoo Mail allowed"
- length={50}
- />
- </Subsection>
- </Section>
- <Section title="UrlInput">
- <Subsection title="Default">
- <Formatted.UrlInput
- label="Website"
- name="website"
- border
- />
- </Subsection>
- </Section>
- </DefaultLayout>
- )
- }
-
- export default TemporalPage;
|