Skip to content

Commit

Permalink
feat: added code examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@PKulkoRaccoonGang
PKulkoRaccoonGang committed Sep 18, 2023
1 parent b1961fa commit db2f2ab
Show file tree
Hide file tree
Showing 2 changed files with 169 additions and 86 deletions.
14 changes: 12 additions & 2 deletions src/Form/FormControl.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import FormControlDecoratorGroup from './FormControlDecoratorGroup';

import { callAllHandlers, useHasValue } from './fieldUtils';

const DEFAULT_MASK_VALUE = '00-00-000';

const FormControl = React.forwardRef(({
as,
className,
Expand All @@ -18,7 +20,8 @@ const FormControl = React.forwardRef(({
floatingLabel,
autoResize,
onChange,
withMask,
hasInputMask,
mask,
...props
}, ref) => {
const {
Expand Down Expand Up @@ -73,7 +76,7 @@ const FormControl = React.forwardRef(({
className={className}
>
<RBFormControl
as={withMask ? IMaskInput : as}
as={hasInputMask ? IMaskInput : as}
ref={resolvedRef}
size={size}
isInvalid={isInvalid}
Expand All @@ -82,6 +85,7 @@ const FormControl = React.forwardRef(({
'has-value': hasValue,
})}
onChange={handleOnChange}
mask={mask}
{...controlProps}
/>
</FormControlDecoratorGroup>
Expand Down Expand Up @@ -124,6 +128,10 @@ FormControl.propTypes = {
isInvalid: PropTypes.bool,
/** Only for `as="textarea"`. Specifies whether the input can be resized according to the height of content. */
autoResize: PropTypes.bool,
/** Specifies whether to use an input mask for the input. */
hasInputMask: PropTypes.bool,
/** Specifies the input mask to be used if `hasInputMask` is set to `true`. */
mask: PropTypes.string,
};

FormControl.defaultProps = {
Expand All @@ -142,6 +150,8 @@ FormControl.defaultProps = {
isValid: undefined,
isInvalid: undefined,
autoResize: false,
hasInputMask: false,
mask: DEFAULT_MASK_VALUE,
};

export default FormControl;
241 changes: 157 additions & 84 deletions src/Form/form-control.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,90 +43,6 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
}
```

## Input phone mask

```jsx live
() => {
const [value, setValue] = useState('');

return (
<Form.Group>
<Form.Control withMask mask="+{7}(000)000-00-00"
leadingElement={<Icon src={FavoriteBorder} />}
trailingElement={<Icon src={Verified} />}
floatingLabel="What kind of cats?"
value={value}
onAccept={
(value, unmaskedValue, mask) => console.log(unmaskedValue)
}
onChange={(e) => setValue(e.target.value)}
/>
</Form.Group>
);
}
```

## Input card number mask

```jsx live
() => {
const [value, setValue] = useState('');
console.log('============ value ===========', value);
return (
<Form.Group>
<Form.Control withMask mask="0000 0000 0000 0000"
leadingElement={<Icon src={FavoriteBorder} />}
trailingElement={<Icon src={Verified} />}
floatingLabel="What kind of cats?"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</Form.Group>
);
}
```

## Input date mask

```jsx live
() => {
const [value, setValue] = useState('');
console.log('============ value ===========', value);
return (
<Form.Group>
<Form.Control withMask mask={Date} min={new Date(1990, 0, 1)} max={new Date(2020, 0, 1)}
leadingElement={<Icon src={FavoriteBorder} />}
trailingElement={<Icon src={Verified} />}
floatingLabel="What kind of cats?"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</Form.Group>
);
}
```

## Input Google-style OTP mask

```jsx live
() => {
const [value, setValue] = useState('');
console.log('============ value ===========', value);
return (
<Form.Group>
<Form.Control withMask mask="G-000000000000"
leadingElement={<Icon src={FavoriteBorder} />}
trailingElement={<Icon src={Verified} />}
floatingLabel="What kind of cats?"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</Form.Group>
);
}
```


## Input types

```jsx live
Expand Down Expand Up @@ -246,6 +162,163 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
}
```

## Input masks
Paragon uses the [react-imask](https://www.npmjs.com/package/react-imask) library, which allows you to add masks of different types for inputs.
To create your own mask, you need to pass the required mask pattern (`+{1}(000)000-00-00`) to the `mask` property. <br />
See [react-imask](https://imask.js.org) for documentation on available props.

```jsx live
() => {
{/* start example state */}
const [maskType, setMaskType] = useState('phone');
{/* end example state */}

const inputsWithMask = {
phone: (
<>
<h3>Phone</h3>
<Form.Group>
<Form.Control
hasInputMask
mask="+{1}(000)000-00-00"
value={value}
onChange={handleChange}
leadingElement={<Icon src={FavoriteBorder} />}
floatingLabel="What is your phone number?"
/>
</Form.Group>
</>
),
creditCard: (<>
<h3>Credit card</h3>
<Form.Group>
<Form.Control
hasInputMask
mask="0000 0000 0000 0000"
value={value}
onChange={handleChange}
leadingElement={<Icon src={FavoriteBorder} />}
floatingLabel="What is your credit card number?"
/>
</Form.Group>
</>),
date: (<>
<h3>Date</h3>
<Form.Group>
<Form.Control
hasInputMask
mask={Date}
value={value}
onChange={handleChange}
leadingElement={<Icon src={FavoriteBorder} />}
floatingLabel="What is your date of birth?"
/>
</Form.Group>
</>),
securePassword: (<>
<h3>Secure password</h3>
<Form.Group>
<Form.Control
hasInputMask
mask="XXX-XX-0000"
value={value}
definitions={{
X: {
mask: '0',
displayChar: 'X',
placeholderChar: '#',
},
}}
onChange={handleChange}
leadingElement={<Icon src={FavoriteBorder} />}
floatingLabel="What is your password?"
/>
</Form.Group>
</>),
OTPpassword: (<>
<h3>OTP password</h3>
<Form.Group>
<Form.Control
hasInputMask
mask="G-00000"
value={value}
onChange={handleChange}
leadingElement={<Icon src={FavoriteBorder} />}
floatingLabel="What is your OPT password?"
/>
</Form.Group>
</>),
price: (
<>
<h3>Course prise</h3>
<Form.Group>
<Form.Control
hasInputMask
mask="$num"
blocks={{
num: {
// nested masks are available!
mask: Number,
thousandsSeparator: ' '
}
}}
value={value}
onChange={handleChange}
leadingElement={<Icon src={FavoriteBorder} />}
floatingLabel="What is the price of this course?"
/>
</Form.Group>
</>
),
};

const [value, setValue] = useState('');

const handleChange = (e) => setValue(e.target.value);

return (
<>
{/* start example form block */}
<ExamplePropsForm
inputs={[
{ value: maskType, setValue: setMaskType, options: Object.keys(inputsWithMask), name: 'Mask variants' },
]}
/>
{/* end example form block */}

{inputsWithMask[maskType]}
</>
);
}
```

## Input masks with clear value
`unmask` prop allows get and set value and unmasked value easily

```jsx live
() => {
const [value, setValue] = useState('');

return (
<Form.Group>
<Form.Control
hasInputMask
mask="+{1}(000)000-00-00"
leadingElement={<Icon src={FavoriteBorder} />}
trailingElement={<Icon src={Verified} />}
floatingLabel="What kind of cats?"
value={value}
unmask
onChange={(e) => setValue(e.target.value)}
onAccept={
(value) => console.log(value)
}
/>
</Form.Group>
);
}
```

## Textarea autoResize

`autoResize` prop allows input to be resized according to the content height.
Expand Down

0 comments on commit db2f2ab

Please sign in to comment.