@n3/pn-core NPM

@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'