antd-spot

install

npm i antd-spot

normalize

normalize: how to use in javascript

const value = '18137944133';
const fix = normalize.cpf(value);
// output fix = 181.379.441-33

normalize: how to use in form

<Form.Item label="Phone" name="phone" normalize={normalize.phone}>
    <Input placeholder="Phonenumber..." />
</Form.Item>

normalize: types

used on form and javascript

• capitalize capitalizes the first letter of a string and lowercases the remaining letters.
• cnpj normalize a brazilian cnpj number.
• cpf normalize a brazilian cpf number.
• currency normalize a currency value in the international format.
• date normalize a date in the format of "dd/mm/yyyy".
• email normalize an email address.
• fullname normalize a fullname.
• lowercase converts a string to lowercase.
• numeric removes all non-numeric characters from a string.
• phone normalize a phone number.
• time normalize a time in the format of "hh:mm".
• titlecase capitalizes the first letter of each word in a string.
• uppercase converts a string to uppercase.
• zipcode normalize a brazilian zip code.

used only in javascript

• dateToIso convert a data to the iso format.
• currencyToNumber convert currency to float value.
• phoneToInternational convert a phone to the international format.

normalize: example

import React, { useEffect } from 'react';

import { Button, Form, Input } from 'antd';

import { normalize } from '../utils/antd';

const App: React.FC = () => {
    const [form] = Form.useForm();

    useEffect(() => {
        form.setFieldsValue({
            cpf: normalize.cpf('18137944133'),
        });
    }, []);

    return (
        <Form
            form={form}
            onFinish={(data: any) => console.log(data)}
            validateTrigger="onBlur"
        >
            <Form.Item label="CPF" name="cpf" normalize={normalize.cpf}>
                <Input />
            </Form.Item>
            <Button htmlType="submit">Send</Button>
        </Form>
    );
};

export default App;

rules

rules: how to use

<Form.Item
    label="CPF"
    name="cpf"
    normalize={normalize.cpf}
    required
    rules={[{ required: true }, rule('cpf', '${label} is invalid.')]}
>
    <Input />
</Form.Item>

rules: types

• cnpj validates a brazilian cnpj number.
• cpf validates a brazilian cpf number.
• currency validates a currency value in the international format.
• date validates a date in the format of "dd/mm/yyyy".
• email validates an email address.
• fullname validates a fullname.
• password validates a password.
• phone validates a phone number, ensuring that it has at least 10 digits.
• time validates a time in the format of "hh:mm".
• zipcode validates a brazilian zip code.

rules: example

import React, { useEffect } from 'react';

import { Button, Form, Input } from 'antd';

import { normalize, rule } from 'antd-normalize-validate';

const App: React.FC = () => {
    const [form] = Form.useForm();

    useEffect(() => {
        form.setFieldsValue({
            cpf: normalize.cpf('18137944133'),
        });
    }, []);

    return (
        <Form
            form={form}
            onFinish={(data: any) => console.log(data)}
            validateTrigger="onBlur"
        >
            <Form.Item
                label="CPF"
                name="cpf"
                normalize={normalize.cpf}
                required
                rules={[
                    { required: true },
                    rule('cpf', '${label} is invalid.'),
                ]}
            >
                <Input />
            </Form.Item>
            <Button htmlType="submit">Send</Button>
        </Form>
    );
};

export default App;

filter option

filter option: how to use

import React from 'react';

import { filterOption } from 'antd-normalize-validate';

const App: React.FC = () => {
    return (
        <Select
            filterOption={filterOption}
            options={[
                { value: 1, label: 'First' },
                { value: 2, label: 'Second' },
                { value: 3, label: 'Third' },
            ]}
            placeholder="Select..."
            showSearch
        />
    );
};

export default App;

select state and city

import React, {useState} from 'react';

import { Button, Form, Input } from 'antd';

import { filterOption, City, State } from 'antd-normalize-validate';

const App: React.FC = () => {
    const [state, setState] = useState<string>();
    const [form] = Form.useForm();

    return (
        <Form
            form={form}
            layout="vertical"
            validateTrigger="onBlur"
        >
            <Form.Item label="State" name="state" required rules={[{ required: true }]}>
                <State
                    filterOption={filterOption}
                    onChange={(value) => {
                        setState(value);
                        form.setFieldValue('city', undefined);
                    }}
                    placeholder="State..."
                    showSearch
                />
            </Form.Item>

            <Form.Item label="City" name="city" required rules={[{ required: true }]}>
                <City
                    disabled={!state}
                    filterOption={filterOption}
                    placeholder="City..."
                    showSearch
                    state={state}
                />
            </Form.Item>

            <Form.Item>
                <Button block htmlType="submit" type="primary">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    );
};

export default App;

author

rodrigo brandão jonas batista thayná muller

license

mit licensed