@n3/pn-core

Базовые компоненты PN-проектов.

Использование

PNProvider

Компонент, принимающий конфигурацию PN-комопнентов.

Props

• theme - обязательное, базовые стили;
• components - необязательное, переопределённые компоненты. Список компонентов ниже;
• settings - настройки текстов и т.п.

Настройка styled-components

Необходимо создать файл в проекте с содержимым

import 'styled-components';

import type {
  ContextThemeType,
} from '@n3/pn-declaration';

declare module 'styled-components' {
  export interface DefaultTheme extends ContextThemeType {
  }
}

useComponents

Получение полного списка компонентов:

• BackLink
• BodyBgColor
• Button
• ButtonToolbar
• Card
• CardBottomInfo
• CardButtonsWithCounters
• CardInfo
• CardInfoBlock
• CardWrapper
• Check
• Checkbox
• Confirm
• Creatable
• DetailHeader
• DetailSection
• DetailSectionTitle
• FavoriteButton
• FieldLabel
• FiltersWrapper
• Header
• HeaderControls
• HeaderInfoBlock
• HeaderInnerWrapper
• HeaderLogo
• HeaderMenuButton
• HeaderWrapper
• Hint
• Input
• LayoutContent
• ListCounter
• ListGrid
• ListHeader
• ListPlaceholder
• LoadMoreButton
• LoadMoreWrapper
• LoginBase
• LogoLink
• LogoutBase
• MainMenu
• MainMenuGroup
• MainMenuLink
• MainMenuLinksGrid
• MainMenuTopBlock
• MainMenuWrapper
• Modal
• ModalBackdrop
• ModalBody
• ModalButton
• ModalCloseButton
• ModalDialog
• ModalTitle
• ModalToggle
• Paginator
• PhoneLink
• PublishedIndicator
• RCTable
• RequestCardSection
• RequestCardTitle
• RequestCarWrapper
• RequestsLayout
• RequestsListView
• SearchInput
• Select
• SelectAsyncPaginate
• SelectFetch
• ShowField
• SidebarItem
• SidebarItemContent
• SidebarItemDate
• SidebarItemWrapper
• SidebarItemsWrapper
• SortingHeader
• SortingSwitcher
• Star
• Switch
• Table
• Tabs
• TabPane
• Td
• Th
• Tooltip

useSettings

Получение настроек (дефолтовых с переопределениями).

useConfirm

Вызов окна подтверждения

import {
  PNProvider,
  useConfirm,
  ConfirmError,
} from '@n3/pn-core';

...

const confirm = useConfirm();

...

const result: boolean = await confirm({
  title: 'Подтвердите действие',
  content: 'Вы дествительно хотите подтвердить?'
});

Параметры:

{
  /**
   * Заголовок
   */
  title?: string;
  /**
   * Текст
   */
  content?: ReactNode;
  /**
   * Асинхронная функция подтверждения, может закончиться с исключением ConfirmError({ message })
   */
  approve?: () => void | Promise<void>;
  /**
   * Текст кнопки отмены
   */
  cancelButtonText?: ReactNode;
  /**
   * Текст кнопки подтвеждения
   */
  approveButtonText?: ReactNode;
  /**
   * Цвет кнопки подтверждения
   */
  approveButtonColor?: ButtonColor;
  /**
   * Скрыть кнопку отмены (для использования как alert)
   */
  hideCancelButton?: boolean;
}

Утилиты

cleanPhone

Очистка номера телефона от лишних знаков

import { cleanPhone } from '@n3/pn-core';

cleanPhone('+7 (912) 345-67-80') // '+79123456780'

formatPhone

Форматирование номера телефона

import { formatPhone } from '@n3/pn-core';

cleanPhone('+7 912 345 67 80') // '+7 (912) 345-67-80'
cleanPhone('9123456780') // '+7 (912) 345-67-80'
cleanPhone('8-912-345-67-80') // '+7 (912) 345-67-80'