nc-one-react-helpers

nc-one-react-helpers

Developments of the company's front-end developers NC1

npm i nc-one-react-helpers or yarn add nc-one-react-helpers

Documentation in English:

1. Components:

1.1. DateTimePicker:

Import:

import { DateTimePicker } from 'nc-one-react-helpers'

Example of use:

<DateTimePicker
	date={new Date()}
	onDateTimeChange={(date) => console.log(date)}
	getDateTimeString={(date) => console.log(date)}
	format='MMMM DD, YYYY - hh:mm'
/>

Interface:

interface DateTimePickerProps extends ITextFieldProps {
	date?: Date
	stringDate?: string
	format?: string
	withIcon?: boolean
	onDateTimeChange?: (date?: Date) => void
	getDateTimeString?: (date?: string) => void
	CalendarStrings?: ICalendarStrings
}

Name	Type	Default value	Description
date	date	undefined	date and time to be recorded and selected automatically
stringDate	string	undefined	date and time which will be written and selected automatically as a string (string must be in the same format as format)
format	string	"MM.DD.YYYY, hh:mma"	format of the string in which the date and time will be displayed and output more here
withIcon	boolean	true	whether the time date icon will be shown
onDateTimeChange	(date?: Date) => void	undefined	Do something with the date time every time it changes
getDateTimeString	ICalendarStrings	initialCalendarStrings	the way the calendar lines will be displayed

DateTimePickerProps is inherited from ITextFieldProps, so all TextField props will work fine!

2. Hooks:

2.1. useMediaQuery:

Import:.

import { useMediaQuery } from 'nc-one-react-helpers'

Example of use:

const matches = useMediaQuery('(min-width: 800px)')

if (matches) return <>Screen width greater than 800px</>
else return <>Screen width 800px or less</>

Type:

type useMediaQuery = (query: string) => boolean

Takes the string as in css @usemedia and returns true if the screen width satisfies the condition or false otherwise.

3. Various auxiliary elements:

3.1. functions:

3.1.1. UTCHoursPlus:

Import:.

import { UTCHoursPlus } from 'nc-one-react-helpers'

Example usage:

export const Time: React.FC = () => {
    const [time, setTime] = useState('')

    setTimeout(() => setTime(`${UTCHoursPlus(1)}:${new Date().getUTCMinutes()}:${new Date().getUTCSeconds()}`), 1000)

    return <>Storage time: {time} (UTC+01:00)</>
}

type:

type UTCHoursPlus = (plus: number) => number

Accepts how much to increase the current time and returns UTC clock+input parameter

3.1.2:

Import:

import { sleep } from 'nc-one-react-helpers'

Example of use:

onSubmit={async (values) => {
     setProgressIndicator(true); // show spinner

    try {
        sleep(500) //wait 500 milliseconds
        // mimic a request to the server
    } catch (e) {
        console.log(e)
    } finally {
        setProgressIndicator(false) // hide the spinner
    }
}}

Type:

type sleep = (ms: number) => Promise<unknown>

Wait for the entered number of milliseconds, and then execute the code below

3.2. Validations:

Import:

import { required, invalidEmail, invalidPassword, matchPassword, positiveNumber } from 'nc-one-react-helpers'

Type:

type required = (value: string, text?: string | undefined) => string | undefined

type invalidEmail = (value: string, text?: string | undefined) => string | undefined

type invalidPassword = (value: string, text?: string | undefined) => string | undefined

type matchPassword = (password: string, rePassword: string, text?: string | undefined) => string | undefined

type positiveNumber = (value: number, text?: string | undefined) => string | undefined

Example of use:

validate={({ email, position, password, repassword }) => {
    if (
        !required(email) &&
        !invalidEmail(email) &&
        !required(position) &&
        !positiveNumber(position) &&
        !required(password) &&
        !invalidPassword(password) &&
        !& required(repassword) &&
        !!invalidPassword(repassword) &&
        !!matchPassword(password, repassword)
    ) return {};

    return {
        email: required(email) || invalidEmail(email),
        position: required(position) || positiveNumber(position),
        password: required(password) || invalidPassword(password),
        repassword: required(repassword) || invalidPassword(repassword) || matchPassword(password, repassword)
    };
}}

• required - Accepts value and returns error text if value is empty or undefined otherwise.
• invalidEmail - Accepts value and returns error text if value is not a valid email address or undefined otherwise.
• invalidPassword - Accepts value and returns error text if value fails validation check (too simple) or undefined otherwise.

password validation: minimum 8 characters, minimum 1 Latin letter A-Za-z, minimum 1 digit 0-9

• matchPassword - Accepts password and rePassword and returns error text if passwords do not match or undefined otherwise.
• positiveNumber - Accepts a number and returns an error text if it is negative or undefined otherwise.

text - Optional parameter for all validations. It determines what the error message will be. If it is not specified, the default (in Polish) message will be displayed

=====================================

nc-one-react-helpers

Наработки front-end разаработчиков компании NC1

npm i nc-one-react-helpers или yarn add nc-one-react-helpers

Документация на Русском:

1. Компоненты:

1.1. DateTimePicker:

Импорт:

import { DateTimePicker } from 'nc-one-react-helpers'

Пример использования:

<DateTimePicker
	date={new Date()}
	onDateTimeChange={(date) => console.log(date)}
	getDateTimeString={(date) => console.log(date)}
	format='MMMM DD, YYYY - hh:mm'
/>

Интерфейс:

interface DateTimePickerProps extends ITextFieldProps {
	date?: Date
	stringDate?: string
	format?: string
	withIcon?: boolean
	onDateTimeChange?: (date?: Date) => void
	getDateTimeString?: (date?: string) => void
	CalendarStrings?: ICalendarStrings
}

Название	Тип	Дефолтное значение	Описание
date	Date	undefined	Дата и время которые будут записаны и выбраны автоматически
stringDate	string	undefined	Дата и время которые будут записаны и выбраны автоматически в виде строки (строка должна быть в таком же формате что и format)
format	string	"MM.DD.YYYY, hh:mma"	Формат строки в котором будет отображаться и выводиться дата время подробнее здесь
withIcon	boolean	true	Будет ли показываться иконка даты времени
onDateTimeChange	(date?: Date) => void	undefined	Делать что-то с датой временем при каждом изменении
getDateTimeString	ICalendarStrings	initialCalendarStrings	То как будут отображаться строки календаря

DateTimePickerProps наследуется от ITextFieldProps, поэтому все пропсы TextField будут прекрасно работать!

2. Хуки:

2.1. useMediaQuery:

Импорт:

import { useMediaQuery } from 'nc-one-react-helpers'

Пример использования:

const matches = useMediaQuery('(min-width: 800px)')

if (matches) return <>Ширина экрана больше 800px</>
else return <>Ширина экрана 800px или меньше</>

Тип:

type useMediaQuery = (query: string) => boolean

Принимает строку как в css @usemedia и возвращает true в случае если ширина экрана удовлетворяет условие или false в противном случае.

3. Различные вспомогательные элементы:

3.1. функции:

3.1.1. UTCHoursPlus:

Импорт:

import { UTCHoursPlus } from 'nc-one-react-helpers'

Пример использования:

export const Time: React.FC = () => {
    const [time, setTime] = useState('')

    setTimeout(() => setTime(`${UTCHoursPlus(1)}:${new Date().getUTCMinutes()}:${new Date().getUTCSeconds()}`), 1000)

    return <>Storage time: {time} (UTC+01:00)</>
}

Тип:

type UTCHoursPlus = (plus: number) => number

Принимает то насколько увеличить текущее время и возвращает часы UTC+ввёдый параметр

3.1.2. sleep:

Импорт:

import { sleep } from 'nc-one-react-helpers'

Пример использования:

onSubmit={async (values) => {
     setProgressIndicator(true);  // показать спиннер

    try {
        sleep(500) // подождать 500 миллисекунд
        // сделать имитацию запроса на сервер
    } catch (e) {
        console.log(e)
    } finally {
        setProgressIndicator(false) // скрыть спиннер
    }
}}

Тип:

type sleep = (ms: number) => Promise<unknown>

Подождать введённое количество милисекунд, и только потом выполнить код ниже

3.2. Валидации:

Импорт:

import { required, invalidEmail, invalidPassword, matchPassword, positiveNumber } from 'nc-one-react-helpers'

Типы:

type required = (value: string, text?: string | undefined) => string | undefined

type invalidEmail = (value: string, text?: string | undefined) => string | undefined

type invalidPassword = (value: string, text?: string | undefined) => string | undefined

type matchPassword = (password: string, rePassword: string, text?: string | undefined) => string | undefined

type positiveNumber = (value: number, text?: string | undefined) => string | undefined

Пример использования:

validate={({ email, position, password, repassword }) => {
    if (
        !required(email) &&
        !invalidEmail(email) &&
        !required(position) &&
        !positiveNumber(position) &&
        !required(password) &&
        !invalidPassword(password) &&
        !required(repassword) &&
        !invalidPassword(repassword) &&
        !matchPassword(password, repassword)
    ) return {};

    return {
        email: required(email) || invalidEmail(email),
        position: required(position) || positiveNumber(position),
        password: required(password) || invalidPassword(password),
        repassword: required(repassword) || invalidPassword(repassword) || matchPassword(password, repassword)
    };
}}

• required - Принимает value и возвращает текст ошибки в случае если value пустой или undefined в противном случае.
• invalidEmail - Принимает value и возвращает текст ошибки в случае если value не является валидным почтовым адресом (email) или undefined в противном случае.
• invalidPassword - Принимает value и возвращает текст ошибки в случае если value не проходит проверку валидации (слишком простой) или undefined в противном случае.

валидация пароля: минимум 8 символов, минимум 1 латинская буква A-Za-z, минимум 1 цифра 0-9

• matchPassword - Принимает password и rePassword и возвращает текст ошибки в случае если пароли не совпадают или undefined в противном случае.
• positiveNumber - Принимает число и возвращает текст ошибки в случае если оно отрицательное или undefined в противном случае.

text - Необязательный параметр всех валидаций. Он отвечает за то каким будет сообщение об ошибке. Если он не указан будет выведено сообщение по умолчанию (на Польском)