From 9532a8da40fb74a492592ab07dfa5565c858039e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=B2=D0=B3=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=9F=D1=8F?= =?UTF-8?q?=D1=82=D0=BA=D0=BE=D0=B2?= Date: Fri, 10 Jun 2022 19:10:21 +0300 Subject: [PATCH 1/6] fix(propTypes): oneOf -> oneOfType --- packages/react-ui/components/Textarea/TextareaCounter.tsx | 4 ++-- packages/react-ui/internal/icons/16px/index.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/components/Textarea/TextareaCounter.tsx b/packages/react-ui/components/Textarea/TextareaCounter.tsx index ee0c43f361..b26607a5fe 100644 --- a/packages/react-ui/components/Textarea/TextareaCounter.tsx +++ b/packages/react-ui/components/Textarea/TextareaCounter.tsx @@ -65,8 +65,8 @@ export const TextareaCounter = forwardRefAndName( SvgIcon.propTypes = { color: propTypes.string, - size: propTypes.oneOf([propTypes.string, propTypes.number]), + size: propTypes.oneOfType([propTypes.string, propTypes.number]), style: propTypes.object, children: propTypes.node, }; From 688c7672fd99b0ceda1e3276d3521115227e6d3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=B2=D0=B3=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=9F=D1=8F?= =?UTF-8?q?=D1=82=D0=BA=D0=BE=D0=B2?= Date: Sun, 12 Jun 2022 04:28:10 +0300 Subject: [PATCH 2/6] fix: replace propTypes.node with ComponentType --- packages/react-ui/components/Dropdown/Dropdown.tsx | 5 +++-- packages/react-ui/components/Kebab/Kebab.tsx | 3 ++- packages/react-ui/components/Link/Link.tsx | 4 ++-- packages/react-ui/components/Loader/Loader.tsx | 3 ++- packages/react-ui/components/MenuItem/MenuItem.tsx | 6 +++--- packages/react-ui/components/RadioGroup/RadioGroup.tsx | 4 ++-- .../components/ResponsiveLayout/ResponsiveLayout.tsx | 4 ++-- packages/react-ui/components/Select/Select.tsx | 4 ++-- packages/react-ui/components/Spinner/Spinner.tsx | 3 ++- packages/react-ui/components/Sticky/Sticky.tsx | 4 ++-- packages/react-ui/components/Tabs/Tab.tsx | 4 ++-- packages/react-ui/components/Tabs/Tabs.tsx | 4 ++-- .../react-ui/components/Textarea/TextareaCounter.tsx | 7 ++++--- packages/react-ui/internal/Popup/Popup.tsx | 8 ++++---- .../internal/RenderContainer/RenderInnerContainer.tsx | 5 +++-- packages/react-ui/internal/icons/16px/index.tsx | 3 ++- packages/react-ui/internal/icons/20px/svg.tsx | 4 +++- packages/react-ui/lib/utils.ts | 10 +++++++++- 18 files changed, 51 insertions(+), 34 deletions(-) diff --git a/packages/react-ui/components/Dropdown/Dropdown.tsx b/packages/react-ui/components/Dropdown/Dropdown.tsx index bc2a63a8bb..8f9ad68fca 100644 --- a/packages/react-ui/components/Dropdown/Dropdown.tsx +++ b/packages/react-ui/components/Dropdown/Dropdown.tsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { ComponentType } from '../../lib/utils'; import { filterProps } from '../../lib/filterProps'; import { MenuHeader } from '../MenuHeader'; import { MenuItem } from '../MenuItem'; @@ -103,7 +104,7 @@ export class Dropdown extends React.Component { /** * Подпись на кнопке. */ - caption: PropTypes.node.isRequired, + caption: ComponentType.isRequired, /** * Отключает использование портала @@ -123,7 +124,7 @@ export class Dropdown extends React.Component { /** * Иконка слева от текста кнопки */ - icon: PropTypes.node, + icon: ComponentType, maxMenuHeight: PropTypes.number, diff --git a/packages/react-ui/components/Kebab/Kebab.tsx b/packages/react-ui/components/Kebab/Kebab.tsx index d6062749e2..709bb48c64 100644 --- a/packages/react-ui/components/Kebab/Kebab.tsx +++ b/packages/react-ui/components/Kebab/Kebab.tsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { ComponentType } from '../../lib/utils'; import { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers'; import * as LayoutEvents from '../../lib/LayoutEvents'; import { keyListener } from '../../lib/events/keyListener'; @@ -212,7 +213,7 @@ export class Kebab extends React.Component { } Kebab.propTypes = { - children: PropTypes.node, + children: ComponentType, disabled: PropTypes.bool, menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index e502637379..de11f5a716 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -5,7 +5,7 @@ import { Override } from '../../typings/utility-types'; import { keyListener } from '../../lib/events/keyListener'; import { Theme } from '../../lib/theming/Theme'; import { ThemeContext } from '../../lib/theming/ThemeContext'; -import { isExternalLink } from '../../lib/utils'; +import { ComponentType, isExternalLink } from '../../lib/utils'; import { Spinner } from '../Spinner'; import { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; @@ -73,7 +73,7 @@ export class Link extends React.Component { href: PropTypes.string, - icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + icon: ComponentType, use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']), }; diff --git a/packages/react-ui/components/Loader/Loader.tsx b/packages/react-ui/components/Loader/Loader.tsx index 9be565ebfb..e53030614a 100644 --- a/packages/react-ui/components/Loader/Loader.tsx +++ b/packages/react-ui/components/Loader/Loader.tsx @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import debounce from 'lodash.debounce'; +import { ComponentType } from '../../lib/utils'; import * as LayoutEvents from '../../lib/LayoutEvents'; import { Spinner, SpinnerProps } from '../Spinner'; import { Nullable } from '../../typings/utility-types'; @@ -78,7 +79,7 @@ export class Loader extends React.Component { */ caption: Spinner.propTypes.caption, - component: PropTypes.node, + component: ComponentType, /** * Класс для обертки diff --git a/packages/react-ui/components/MenuItem/MenuItem.tsx b/packages/react-ui/components/MenuItem/MenuItem.tsx index 9ff3e4de19..37fd7af22e 100644 --- a/packages/react-ui/components/MenuItem/MenuItem.tsx +++ b/packages/react-ui/components/MenuItem/MenuItem.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { isFunction, isReactUIComponent } from '../../lib/utils'; +import { ComponentType, isFunction, isReactUIComponent } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper'; @@ -88,13 +88,13 @@ export class MenuItem extends React.Component { public static __MENU_ITEM__ = true; public static propTypes = { - comment: PropTypes.node, + comment: ComponentType, disabled: PropTypes.bool, href: PropTypes.string, - icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + icon: ComponentType, loose: PropTypes.bool, diff --git a/packages/react-ui/components/RadioGroup/RadioGroup.tsx b/packages/react-ui/components/RadioGroup/RadioGroup.tsx index 21196e19e5..42967dab71 100644 --- a/packages/react-ui/components/RadioGroup/RadioGroup.tsx +++ b/packages/react-ui/components/RadioGroup/RadioGroup.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import invariant from 'invariant'; -import { getRandomID, isNonNullable } from '../../lib/utils'; +import { ComponentType, getRandomID, isNonNullable } from '../../lib/utils'; import { Radio } from '../Radio'; import { createPropsGetter } from '../../lib/createPropsGetter'; import { Nullable } from '../../typings/utility-types'; @@ -95,7 +95,7 @@ export class RadioGroup extends React.Component, RadioGrou public static __KONTUR_REACT_UI__ = 'RadioGroup'; public static propTypes = { - children: PropTypes.node, + children: ComponentType, disabled: PropTypes.bool, error: PropTypes.bool, inline: PropTypes.bool, diff --git a/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx b/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx index 06274ef1f6..e95e3644b1 100644 --- a/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx +++ b/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import propTypes from 'prop-types'; -import { isFunction } from '../../lib/utils'; +import { ComponentType, isFunction } from '../../lib/utils'; import { CommonWrapper } from '../../internal/CommonWrapper'; import { ResponsiveLayoutFlags } from './types'; @@ -34,5 +34,5 @@ export const ResponsiveLayout: React.FC = (props) => { ResponsiveLayout.propTypes = { onLayoutChange: propTypes.func, - children: propTypes.node, + children: ComponentType, }; diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx index 51d1e62495..bb23ddf17c 100644 --- a/packages/react-ui/components/Select/Select.tsx +++ b/packages/react-ui/components/Select/Select.tsx @@ -22,7 +22,7 @@ import { MenuSeparator } from '../MenuSeparator'; import { RenderLayer } from '../../internal/RenderLayer'; import { createPropsGetter } from '../../lib/createPropsGetter'; import { Nullable } from '../../typings/utility-types'; -import { isFunction, isNonNullable, isReactUINode } from '../../lib/utils'; +import { ComponentType, isFunction, isNonNullable, isReactUINode } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; @@ -176,7 +176,7 @@ export class Select extends React.Component { * * 'Загрузка' - значение по-умолчанию */ - caption: PropTypes.node, + caption: ComponentType, dimmed: PropTypes.bool, diff --git a/packages/react-ui/components/Sticky/Sticky.tsx b/packages/react-ui/components/Sticky/Sticky.tsx index b1c8b8bfd7..a354ddbe0f 100644 --- a/packages/react-ui/components/Sticky/Sticky.tsx +++ b/packages/react-ui/components/Sticky/Sticky.tsx @@ -4,7 +4,7 @@ import shallowEqual from 'shallowequal'; import * as LayoutEvents from '../../lib/LayoutEvents'; import { Nullable } from '../../typings/utility-types'; -import { isFunction } from '../../lib/utils'; +import { ComponentType, isFunction } from '../../lib/utils'; import { ZIndex } from '../../internal/ZIndex'; import { CommonWrapper, CommonProps } from '../../internal/CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; @@ -41,7 +41,7 @@ export class Sticky extends React.Component { public static __KONTUR_REACT_UI__ = 'Sticky'; public static propTypes = { - children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), + children: ComponentType, /** * Функция, которая возвращает DOM-элемент, который нельзя пересекать. diff --git a/packages/react-ui/components/Tabs/Tab.tsx b/packages/react-ui/components/Tabs/Tab.tsx index 2e52126def..ee73da9e40 100644 --- a/packages/react-ui/components/Tabs/Tab.tsx +++ b/packages/react-ui/components/Tabs/Tab.tsx @@ -6,7 +6,7 @@ import { ResizeDetector } from '../../internal/ResizeDetector'; import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers'; import { keyListener } from '../../lib/events/keyListener'; import { Nullable } from '../../typings/utility-types'; -import { isFunctionalComponent } from '../../lib/utils'; +import { ComponentType, isFunctionalComponent } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; @@ -113,7 +113,7 @@ export class Tab extends React.Component, public context: TabsContextType = this.context; public static propTypes = { - children: PropTypes.node, + children: ComponentType, disabled: PropTypes.bool, href: PropTypes.string.isRequired, onClick: PropTypes.func, diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx index deedf052a3..e76e5b058b 100644 --- a/packages/react-ui/components/Tabs/Tabs.tsx +++ b/packages/react-ui/components/Tabs/Tabs.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { emptyHandler } from '../../lib/utils'; +import { ComponentType, emptyHandler } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; @@ -63,7 +63,7 @@ export class Tabs extends React.Component Element).isRequired, }; diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx index 61a2f69657..1a76f64ef5 100644 --- a/packages/react-ui/internal/Popup/Popup.tsx +++ b/packages/react-ui/internal/Popup/Popup.tsx @@ -9,11 +9,11 @@ import * as LayoutEvents from '../../lib/LayoutEvents'; import { ZIndex } from '../ZIndex'; import { RenderContainer } from '../RenderContainer'; import { FocusEventType, MouseEventType } from '../../typings/event-types'; -import { isFunction, isNonNullable, isNullable, isRefableElement } from '../../lib/utils'; +import { ComponentType, isFunction, isNonNullable, isNullable, isRefableElement } from '../../lib/utils'; import { isIE11, isEdge, isSafari } from '../../lib/client'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; -import { isHTMLElement, safePropTypesInstanceOf } from '../../lib/SSRSafe'; +import { isHTMLElement } from '../../lib/SSRSafe'; import { isTestEnv } from '../../lib/currentEnvironment'; import { CommonProps, CommonWrapper } from '../CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; @@ -122,14 +122,14 @@ export class Popup extends React.Component { /** * Ссылка (ref) на элемент или React компонент, для которого рисуется попап */ - anchorElement: PropTypes.oneOfType([safePropTypesInstanceOf(() => HTMLElement), PropTypes.node]).isRequired, + anchorElement: ComponentType.isRequired, /** * Фон попапа и пина */ backgroundColor: PropTypes.string, - children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), + children: ComponentType, /** * Показывать ли пин diff --git a/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx b/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx index cfc99ea1ec..30eb6a5f30 100644 --- a/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx +++ b/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import propTypes from 'prop-types'; +import { ComponentType } from '../../lib/utils'; import { Nullable } from '../../typings/utility-types'; import { PortalProps, RenderContainerProps } from './RenderContainerTypes'; @@ -64,7 +65,7 @@ export class RenderInnerContainer extends React.Component( diff --git a/packages/react-ui/internal/icons/20px/svg.tsx b/packages/react-ui/internal/icons/20px/svg.tsx index 603ce9d54a..6364f29c1d 100644 --- a/packages/react-ui/internal/icons/20px/svg.tsx +++ b/packages/react-ui/internal/icons/20px/svg.tsx @@ -1,6 +1,8 @@ import React from 'react'; import propTypes from 'prop-types'; +import { ComponentType } from '../../../lib/utils'; + import { styles } from './icon.styles'; export interface SVGIconProps extends React.HTMLAttributes { @@ -18,7 +20,7 @@ export const SvgIcon: React.FunctionComponent = ({ children, color ); SvgIcon.propTypes = { - children: propTypes.node, + children: ComponentType, color: propTypes.string, }; diff --git a/packages/react-ui/lib/utils.ts b/packages/react-ui/lib/utils.ts index 1a1585bd9c..84eaecc511 100644 --- a/packages/react-ui/lib/utils.ts +++ b/packages/react-ui/lib/utils.ts @@ -1,8 +1,9 @@ -import { ReactComponentLike } from 'prop-types'; +import propTypes, { ReactComponentLike } from 'prop-types'; import React from 'react'; import { isForwardRef } from 'react-is'; import { isBrowser } from './client'; +import { safePropTypesInstanceOf } from './SSRSafe'; // NOTE: Copy-paste from @types/react export type Defaultize = P extends any @@ -94,6 +95,13 @@ const calculateDecimals = (decimals: number) => { return 0; }; +export const ComponentType = propTypes.oneOfType([ + propTypes.elementType, + propTypes.element, + propTypes.node, + safePropTypesInstanceOf(() => Element), +]); + export const formatBytes = (bytes: number, decimals = 2): string | null => { if (bytes === 0) { return '0 Bytes'; From 1b0105127ece35e07b51f08c5cdc677f30b479d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=B2=D0=B3=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=9F=D1=8F?= =?UTF-8?q?=D1=82=D0=BA=D0=BE=D0=B2?= Date: Mon, 27 Jun 2022 00:37:34 +0400 Subject: [PATCH 3/6] chore(review): replace Element with HTMLElment --- packages/react-ui/components/Textarea/TextareaCounter.tsx | 2 +- .../react-ui/internal/RenderContainer/RenderInnerContainer.tsx | 2 +- packages/react-ui/lib/utils.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/components/Textarea/TextareaCounter.tsx b/packages/react-ui/components/Textarea/TextareaCounter.tsx index 7811a7716d..13eed9e3cc 100644 --- a/packages/react-ui/components/Textarea/TextareaCounter.tsx +++ b/packages/react-ui/components/Textarea/TextareaCounter.tsx @@ -69,5 +69,5 @@ TextareaCounter.propTypes = { value: propTypes.oneOfType([propTypes.string, propTypes.number]), help: ComponentType, onCloseHelp: propTypes.func.isRequired, - textarea: safePropTypesInstanceOf(() => Element).isRequired, + textarea: safePropTypesInstanceOf(() => HTMLElement).isRequired, }; diff --git a/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx b/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx index 5ad900f18e..81432925a4 100644 --- a/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx +++ b/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx @@ -66,7 +66,7 @@ export class RenderInnerContainer extends React.Component Element), + container: safePropTypesInstanceOf(() => HTMLElement), rt_rootID: propTypes.string.isRequired, children: ComponentType.isRequired, }; diff --git a/packages/react-ui/lib/utils.ts b/packages/react-ui/lib/utils.ts index 84eaecc511..1b9dd9f63b 100644 --- a/packages/react-ui/lib/utils.ts +++ b/packages/react-ui/lib/utils.ts @@ -99,7 +99,7 @@ export const ComponentType = propTypes.oneOfType([ propTypes.elementType, propTypes.element, propTypes.node, - safePropTypesInstanceOf(() => Element), + safePropTypesInstanceOf(() => HTMLElement), ]); export const formatBytes = (bytes: number, decimals = 2): string | null => { From 1230baabe93606cfdf956c7060c5398a2cc3a596 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=B2=D0=B3=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=9F=D1=8F?= =?UTF-8?q?=D1=82=D0=BA=D0=BE=D0=B2?= Date: Mon, 27 Jun 2022 01:24:17 +0400 Subject: [PATCH 4/6] chore(ComponentType): expand type with bool --- packages/react-ui/lib/utils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-ui/lib/utils.ts b/packages/react-ui/lib/utils.ts index 1b9dd9f63b..1997e6827a 100644 --- a/packages/react-ui/lib/utils.ts +++ b/packages/react-ui/lib/utils.ts @@ -99,6 +99,7 @@ export const ComponentType = propTypes.oneOfType([ propTypes.elementType, propTypes.element, propTypes.node, + propTypes.bool, safePropTypesInstanceOf(() => HTMLElement), ]); From bcdc74306c4a36cdf631a42c2b9db4087365daf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=B2=D0=B3=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=9F=D1=8F?= =?UTF-8?q?=D1=82=D0=BA=D0=BE=D0=B2?= Date: Wed, 29 Jun 2022 16:15:39 +0400 Subject: [PATCH 5/6] refactor(ComponentType): rename ComponentType and reduct its influence --- packages/react-ui/components/Dropdown/Dropdown.tsx | 6 +++--- packages/react-ui/components/Kebab/Kebab.tsx | 4 ++-- packages/react-ui/components/Link/Link.tsx | 4 ++-- packages/react-ui/components/Loader/Loader.tsx | 4 ++-- packages/react-ui/components/MenuItem/MenuItem.tsx | 6 +++--- .../react-ui/components/RadioGroup/RadioGroup.tsx | 4 ++-- .../components/ResponsiveLayout/ResponsiveLayout.tsx | 4 ++-- packages/react-ui/components/Select/Select.tsx | 4 ++-- packages/react-ui/components/Spinner/Spinner.tsx | 4 ++-- packages/react-ui/components/Sticky/Sticky.tsx | 4 ++-- packages/react-ui/components/Tabs/Tab.tsx | 4 ++-- packages/react-ui/components/Tabs/Tabs.tsx | 4 ++-- .../react-ui/components/Textarea/TextareaCounter.tsx | 4 ++-- packages/react-ui/internal/Popup/Popup.tsx | 6 +++--- .../RenderContainer/RenderInnerContainer.tsx | 4 ++-- packages/react-ui/internal/icons/16px/index.tsx | 4 ++-- packages/react-ui/internal/icons/20px/svg.tsx | 4 ++-- packages/react-ui/lib/utils.ts | 12 ++++-------- 18 files changed, 41 insertions(+), 45 deletions(-) diff --git a/packages/react-ui/components/Dropdown/Dropdown.tsx b/packages/react-ui/components/Dropdown/Dropdown.tsx index 1f100367f5..92accd3a0c 100644 --- a/packages/react-ui/components/Dropdown/Dropdown.tsx +++ b/packages/react-ui/components/Dropdown/Dropdown.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ComponentType } from '../../lib/utils'; +import { ReactNodePropTypes } from '../../lib/utils'; import { filterProps } from '../../lib/filterProps'; import { MenuHeader } from '../MenuHeader'; import { MenuItem } from '../MenuItem'; @@ -108,7 +108,7 @@ export class Dropdown extends React.Component { /** * Подпись на кнопке. */ - caption: ComponentType.isRequired, + caption: ReactNodePropTypes.isRequired, /** * Отключает использование портала @@ -128,7 +128,7 @@ export class Dropdown extends React.Component { /** * Иконка слева от текста кнопки */ - icon: ComponentType, + icon: ReactNodePropTypes, maxMenuHeight: PropTypes.number, diff --git a/packages/react-ui/components/Kebab/Kebab.tsx b/packages/react-ui/components/Kebab/Kebab.tsx index 709bb48c64..f2c3e2ada1 100644 --- a/packages/react-ui/components/Kebab/Kebab.tsx +++ b/packages/react-ui/components/Kebab/Kebab.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ComponentType } from '../../lib/utils'; +import { ReactNodePropTypes } from '../../lib/utils'; import { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers'; import * as LayoutEvents from '../../lib/LayoutEvents'; import { keyListener } from '../../lib/events/keyListener'; @@ -213,7 +213,7 @@ export class Kebab extends React.Component { } Kebab.propTypes = { - children: ComponentType, + children: ReactNodePropTypes, disabled: PropTypes.bool, menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index acf29e9067..2b78344fd7 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -5,7 +5,7 @@ import { Override } from '../../typings/utility-types'; import { keyListener } from '../../lib/events/keyListener'; import { Theme } from '../../lib/theming/Theme'; import { ThemeContext } from '../../lib/theming/ThemeContext'; -import { ComponentType, isExternalLink } from '../../lib/utils'; +import { ReactNodePropTypes, isExternalLink } from '../../lib/utils'; import { Spinner } from '../Spinner'; import { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; @@ -77,7 +77,7 @@ export class Link extends React.Component { href: PropTypes.string, - icon: ComponentType, + icon: ReactNodePropTypes, use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']), }; diff --git a/packages/react-ui/components/Loader/Loader.tsx b/packages/react-ui/components/Loader/Loader.tsx index 4a52bcaaba..a9561cb6f1 100644 --- a/packages/react-ui/components/Loader/Loader.tsx +++ b/packages/react-ui/components/Loader/Loader.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import debounce from 'lodash.debounce'; -import { ComponentType } from '../../lib/utils'; +import { ReactNodePropTypes } from '../../lib/utils'; import * as LayoutEvents from '../../lib/LayoutEvents'; import { Spinner, SpinnerProps } from '../Spinner'; import { Nullable } from '../../typings/utility-types'; @@ -84,7 +84,7 @@ export class Loader extends React.Component { */ caption: Spinner.propTypes.caption, - component: ComponentType, + component: ReactNodePropTypes, /** * Класс для обертки diff --git a/packages/react-ui/components/MenuItem/MenuItem.tsx b/packages/react-ui/components/MenuItem/MenuItem.tsx index 93d69cd7dd..57482d18e0 100644 --- a/packages/react-ui/components/MenuItem/MenuItem.tsx +++ b/packages/react-ui/components/MenuItem/MenuItem.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ComponentType, isFunction, isReactUIComponent } from '../../lib/utils'; +import { ReactNodePropTypes, isFunction, isReactUIComponent } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper'; @@ -93,13 +93,13 @@ export class MenuItem extends React.Component { public static __MENU_ITEM__ = true; public static propTypes = { - comment: ComponentType, + comment: ReactNodePropTypes, disabled: PropTypes.bool, href: PropTypes.string, - icon: ComponentType, + icon: ReactNodePropTypes, loose: PropTypes.bool, diff --git a/packages/react-ui/components/RadioGroup/RadioGroup.tsx b/packages/react-ui/components/RadioGroup/RadioGroup.tsx index 0e6830cda9..c28f5eb439 100644 --- a/packages/react-ui/components/RadioGroup/RadioGroup.tsx +++ b/packages/react-ui/components/RadioGroup/RadioGroup.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import invariant from 'invariant'; -import { ComponentType, getRandomID, isNonNullable } from '../../lib/utils'; +import { ReactNodePropTypes, getRandomID, isNonNullable } from '../../lib/utils'; import { Radio } from '../Radio'; import { createPropsGetter } from '../../lib/createPropsGetter'; import { Nullable } from '../../typings/utility-types'; @@ -99,7 +99,7 @@ export class RadioGroup extends React.Component, RadioGrou public static __KONTUR_REACT_UI__ = 'RadioGroup'; public static propTypes = { - children: ComponentType, + children: ReactNodePropTypes, disabled: PropTypes.bool, error: PropTypes.bool, inline: PropTypes.bool, diff --git a/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx b/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx index e95e3644b1..6d9e62e2a7 100644 --- a/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx +++ b/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import propTypes from 'prop-types'; -import { ComponentType, isFunction } from '../../lib/utils'; +import { ReactNodePropTypes, isFunction } from '../../lib/utils'; import { CommonWrapper } from '../../internal/CommonWrapper'; import { ResponsiveLayoutFlags } from './types'; @@ -34,5 +34,5 @@ export const ResponsiveLayout: React.FC = (props) => { ResponsiveLayout.propTypes = { onLayoutChange: propTypes.func, - children: ComponentType, + children: ReactNodePropTypes, }; diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx index 3de0a0a24d..c0eee165df 100644 --- a/packages/react-ui/components/Select/Select.tsx +++ b/packages/react-ui/components/Select/Select.tsx @@ -22,7 +22,7 @@ import { MenuSeparator } from '../MenuSeparator'; import { RenderLayer } from '../../internal/RenderLayer'; import { createPropsGetter } from '../../lib/createPropsGetter'; import { Nullable } from '../../typings/utility-types'; -import { ComponentType, isFunction, isNonNullable, isReactUINode } from '../../lib/utils'; +import { ReactNodePropTypes, isFunction, isNonNullable, isReactUINode } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; @@ -180,7 +180,7 @@ export class Select extends React.Component { * * 'Загрузка' - значение по-умолчанию */ - caption: ComponentType, + caption: ReactNodePropTypes, dimmed: PropTypes.bool, diff --git a/packages/react-ui/components/Sticky/Sticky.tsx b/packages/react-ui/components/Sticky/Sticky.tsx index dd9c892c74..d4337bba08 100644 --- a/packages/react-ui/components/Sticky/Sticky.tsx +++ b/packages/react-ui/components/Sticky/Sticky.tsx @@ -4,7 +4,7 @@ import shallowEqual from 'shallowequal'; import * as LayoutEvents from '../../lib/LayoutEvents'; import { Nullable } from '../../typings/utility-types'; -import { ComponentType, isFunction } from '../../lib/utils'; +import { ReactNodePropTypes, isFunction } from '../../lib/utils'; import { ZIndex } from '../../internal/ZIndex'; import { CommonWrapper, CommonProps } from '../../internal/CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; @@ -45,7 +45,7 @@ export class Sticky extends React.Component { public static __KONTUR_REACT_UI__ = 'Sticky'; public static propTypes = { - children: ComponentType, + children: ReactNodePropTypes, /** * Функция, которая возвращает DOM-элемент, который нельзя пересекать. diff --git a/packages/react-ui/components/Tabs/Tab.tsx b/packages/react-ui/components/Tabs/Tab.tsx index 0612ea543f..3593ff81e5 100644 --- a/packages/react-ui/components/Tabs/Tab.tsx +++ b/packages/react-ui/components/Tabs/Tab.tsx @@ -6,7 +6,7 @@ import { ResizeDetector } from '../../internal/ResizeDetector'; import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers'; import { keyListener } from '../../lib/events/keyListener'; import { Nullable } from '../../typings/utility-types'; -import { ComponentType, isFunctionalComponent } from '../../lib/utils'; +import { ReactNodePropTypes, isFunctionalComponent } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; @@ -117,7 +117,7 @@ export class Tab extends React.Component, public context: TabsContextType = this.context; public static propTypes = { - children: ComponentType, + children: ReactNodePropTypes, disabled: PropTypes.bool, href: PropTypes.string.isRequired, onClick: PropTypes.func, diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx index 4ed27168de..028b0abdd1 100644 --- a/packages/react-ui/components/Tabs/Tabs.tsx +++ b/packages/react-ui/components/Tabs/Tabs.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ComponentType, emptyHandler } from '../../lib/utils'; +import { ReactNodePropTypes, emptyHandler } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; @@ -68,7 +68,7 @@ export class Tabs extends React.Component HTMLElement).isRequired, }; diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx index b389966fb1..e2862c1bf5 100644 --- a/packages/react-ui/internal/Popup/Popup.tsx +++ b/packages/react-ui/internal/Popup/Popup.tsx @@ -9,7 +9,7 @@ import * as LayoutEvents from '../../lib/LayoutEvents'; import { ZIndex } from '../ZIndex'; import { RenderContainer } from '../RenderContainer'; import { FocusEventType, MouseEventType } from '../../typings/event-types'; -import { ComponentType, isFunction, isNonNullable, isNullable, isRefableElement } from '../../lib/utils'; +import { ReactNodePropTypes, isFunction, isNonNullable, isNullable, isRefableElement } from '../../lib/utils'; import { isIE11, isEdge, isSafari } from '../../lib/client'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; @@ -128,14 +128,14 @@ export class Popup extends React.Component { /** * Ссылка (ref) на элемент или React компонент, для которого рисуется попап */ - anchorElement: ComponentType.isRequired, + anchorElement: ReactNodePropTypes.isRequired, /** * Фон попапа и пина */ backgroundColor: PropTypes.string, - children: ComponentType, + children: ReactNodePropTypes, /** * Показывать ли пин diff --git a/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx b/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx index 81432925a4..48eb5d2803 100644 --- a/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx +++ b/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import propTypes from 'prop-types'; -import { ComponentType } from '../../lib/utils'; +import { ReactNodePropTypes } from '../../lib/utils'; import { Nullable } from '../../typings/utility-types'; import { safePropTypesInstanceOf } from '../../lib/SSRSafe'; @@ -68,5 +68,5 @@ export class RenderInnerContainer extends React.Component HTMLElement), rt_rootID: propTypes.string.isRequired, - children: ComponentType.isRequired, + children: ReactNodePropTypes.isRequired, }; diff --git a/packages/react-ui/internal/icons/16px/index.tsx b/packages/react-ui/internal/icons/16px/index.tsx index fa3a24a4ef..73792ce53b 100644 --- a/packages/react-ui/internal/icons/16px/index.tsx +++ b/packages/react-ui/internal/icons/16px/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import propTypes from 'prop-types'; -import { ComponentType } from '../../../lib/utils'; +import { ReactNodePropTypes } from '../../../lib/utils'; import { forwardRefAndName } from '../../../lib/forwardRefAndName'; import { styles } from './icon.styles'; @@ -33,7 +33,7 @@ SvgIcon.propTypes = { color: propTypes.string, size: propTypes.oneOfType([propTypes.string, propTypes.number]), style: propTypes.object, - children: ComponentType, + children: ReactNodePropTypes, }; export const ArrowChevronDownIcon = forwardRefAndName( diff --git a/packages/react-ui/internal/icons/20px/svg.tsx b/packages/react-ui/internal/icons/20px/svg.tsx index 6364f29c1d..613f5a608a 100644 --- a/packages/react-ui/internal/icons/20px/svg.tsx +++ b/packages/react-ui/internal/icons/20px/svg.tsx @@ -1,7 +1,7 @@ import React from 'react'; import propTypes from 'prop-types'; -import { ComponentType } from '../../../lib/utils'; +import { ReactNodePropTypes } from '../../../lib/utils'; import { styles } from './icon.styles'; @@ -20,7 +20,7 @@ export const SvgIcon: React.FunctionComponent = ({ children, color ); SvgIcon.propTypes = { - children: ComponentType, + children: ReactNodePropTypes, color: propTypes.string, }; diff --git a/packages/react-ui/lib/utils.ts b/packages/react-ui/lib/utils.ts index 1997e6827a..9520825b0d 100644 --- a/packages/react-ui/lib/utils.ts +++ b/packages/react-ui/lib/utils.ts @@ -3,7 +3,6 @@ import React from 'react'; import { isForwardRef } from 'react-is'; import { isBrowser } from './client'; -import { safePropTypesInstanceOf } from './SSRSafe'; // NOTE: Copy-paste from @types/react export type Defaultize = P extends any @@ -95,13 +94,10 @@ const calculateDecimals = (decimals: number) => { return 0; }; -export const ComponentType = propTypes.oneOfType([ - propTypes.elementType, - propTypes.element, - propTypes.node, - propTypes.bool, - safePropTypesInstanceOf(() => HTMLElement), -]); +/** + * Analogue of React.ReactNode but for prop-types + */ +export const ReactNodePropTypes = propTypes.oneOfType([propTypes.element, propTypes.node, propTypes.bool]); export const formatBytes = (bytes: number, decimals = 2): string | null => { if (bytes === 0) { From b915d455c26056154fdc57ba2a86c9a8bd837ae5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=B2=D0=B3=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=9F=D1=8F?= =?UTF-8?q?=D1=82=D0=BA=D0=BE=D0=B2?= Date: Wed, 29 Jun 2022 22:21:04 +0400 Subject: [PATCH 6/6] chore(review): abandon ReactNodePropTypes type --- packages/react-ui/components/Dropdown/Dropdown.tsx | 5 ++--- packages/react-ui/components/Kebab/Kebab.tsx | 3 +-- packages/react-ui/components/Link/Link.tsx | 4 ++-- packages/react-ui/components/Loader/Loader.tsx | 3 +-- packages/react-ui/components/MenuItem/MenuItem.tsx | 6 +++--- packages/react-ui/components/RadioGroup/RadioGroup.tsx | 4 ++-- .../components/ResponsiveLayout/ResponsiveLayout.tsx | 4 ++-- packages/react-ui/components/Select/Select.tsx | 4 ++-- packages/react-ui/components/Spinner/Spinner.tsx | 3 +-- packages/react-ui/components/Sticky/Sticky.tsx | 4 ++-- packages/react-ui/components/Tabs/Tab.tsx | 4 ++-- packages/react-ui/components/Tabs/Tabs.tsx | 4 ++-- packages/react-ui/components/Textarea/TextareaCounter.tsx | 4 ++-- packages/react-ui/internal/Popup/Popup.tsx | 8 ++++---- .../internal/RenderContainer/RenderInnerContainer.tsx | 3 +-- packages/react-ui/internal/icons/16px/index.tsx | 3 +-- packages/react-ui/internal/icons/20px/svg.tsx | 4 +--- packages/react-ui/lib/utils.ts | 7 +------ 18 files changed, 32 insertions(+), 45 deletions(-) diff --git a/packages/react-ui/components/Dropdown/Dropdown.tsx b/packages/react-ui/components/Dropdown/Dropdown.tsx index 92accd3a0c..47a22af79c 100644 --- a/packages/react-ui/components/Dropdown/Dropdown.tsx +++ b/packages/react-ui/components/Dropdown/Dropdown.tsx @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ReactNodePropTypes } from '../../lib/utils'; import { filterProps } from '../../lib/filterProps'; import { MenuHeader } from '../MenuHeader'; import { MenuItem } from '../MenuItem'; @@ -108,7 +107,7 @@ export class Dropdown extends React.Component { /** * Подпись на кнопке. */ - caption: ReactNodePropTypes.isRequired, + caption: PropTypes.node.isRequired, /** * Отключает использование портала @@ -128,7 +127,7 @@ export class Dropdown extends React.Component { /** * Иконка слева от текста кнопки */ - icon: ReactNodePropTypes, + icon: PropTypes.node, maxMenuHeight: PropTypes.number, diff --git a/packages/react-ui/components/Kebab/Kebab.tsx b/packages/react-ui/components/Kebab/Kebab.tsx index f2c3e2ada1..d6062749e2 100644 --- a/packages/react-ui/components/Kebab/Kebab.tsx +++ b/packages/react-ui/components/Kebab/Kebab.tsx @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ReactNodePropTypes } from '../../lib/utils'; import { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers'; import * as LayoutEvents from '../../lib/LayoutEvents'; import { keyListener } from '../../lib/events/keyListener'; @@ -213,7 +212,7 @@ export class Kebab extends React.Component { } Kebab.propTypes = { - children: ReactNodePropTypes, + children: PropTypes.node, disabled: PropTypes.bool, menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 2b78344fd7..338440e528 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -5,7 +5,7 @@ import { Override } from '../../typings/utility-types'; import { keyListener } from '../../lib/events/keyListener'; import { Theme } from '../../lib/theming/Theme'; import { ThemeContext } from '../../lib/theming/ThemeContext'; -import { ReactNodePropTypes, isExternalLink } from '../../lib/utils'; +import { isExternalLink } from '../../lib/utils'; import { Spinner } from '../Spinner'; import { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; @@ -77,7 +77,7 @@ export class Link extends React.Component { href: PropTypes.string, - icon: ReactNodePropTypes, + icon: PropTypes.node, use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']), }; diff --git a/packages/react-ui/components/Loader/Loader.tsx b/packages/react-ui/components/Loader/Loader.tsx index a9561cb6f1..a87b13318e 100644 --- a/packages/react-ui/components/Loader/Loader.tsx +++ b/packages/react-ui/components/Loader/Loader.tsx @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import debounce from 'lodash.debounce'; -import { ReactNodePropTypes } from '../../lib/utils'; import * as LayoutEvents from '../../lib/LayoutEvents'; import { Spinner, SpinnerProps } from '../Spinner'; import { Nullable } from '../../typings/utility-types'; @@ -84,7 +83,7 @@ export class Loader extends React.Component { */ caption: Spinner.propTypes.caption, - component: ReactNodePropTypes, + component: PropTypes.node, /** * Класс для обертки diff --git a/packages/react-ui/components/MenuItem/MenuItem.tsx b/packages/react-ui/components/MenuItem/MenuItem.tsx index 57482d18e0..27e8c790b6 100644 --- a/packages/react-ui/components/MenuItem/MenuItem.tsx +++ b/packages/react-ui/components/MenuItem/MenuItem.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ReactNodePropTypes, isFunction, isReactUIComponent } from '../../lib/utils'; +import { isFunction, isReactUIComponent } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper'; @@ -93,13 +93,13 @@ export class MenuItem extends React.Component { public static __MENU_ITEM__ = true; public static propTypes = { - comment: ReactNodePropTypes, + comment: PropTypes.node, disabled: PropTypes.bool, href: PropTypes.string, - icon: ReactNodePropTypes, + icon: PropTypes.node, loose: PropTypes.bool, diff --git a/packages/react-ui/components/RadioGroup/RadioGroup.tsx b/packages/react-ui/components/RadioGroup/RadioGroup.tsx index c28f5eb439..c6c22c44b7 100644 --- a/packages/react-ui/components/RadioGroup/RadioGroup.tsx +++ b/packages/react-ui/components/RadioGroup/RadioGroup.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import invariant from 'invariant'; -import { ReactNodePropTypes, getRandomID, isNonNullable } from '../../lib/utils'; +import { getRandomID, isNonNullable } from '../../lib/utils'; import { Radio } from '../Radio'; import { createPropsGetter } from '../../lib/createPropsGetter'; import { Nullable } from '../../typings/utility-types'; @@ -99,7 +99,7 @@ export class RadioGroup extends React.Component, RadioGrou public static __KONTUR_REACT_UI__ = 'RadioGroup'; public static propTypes = { - children: ReactNodePropTypes, + children: PropTypes.node, disabled: PropTypes.bool, error: PropTypes.bool, inline: PropTypes.bool, diff --git a/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx b/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx index 6d9e62e2a7..9df260a12d 100644 --- a/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx +++ b/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import propTypes from 'prop-types'; -import { ReactNodePropTypes, isFunction } from '../../lib/utils'; +import { isFunction } from '../../lib/utils'; import { CommonWrapper } from '../../internal/CommonWrapper'; import { ResponsiveLayoutFlags } from './types'; @@ -34,5 +34,5 @@ export const ResponsiveLayout: React.FC = (props) => { ResponsiveLayout.propTypes = { onLayoutChange: propTypes.func, - children: ReactNodePropTypes, + children: propTypes.oneOfType([propTypes.node, propTypes.func]), }; diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx index c0eee165df..fd4da807bf 100644 --- a/packages/react-ui/components/Select/Select.tsx +++ b/packages/react-ui/components/Select/Select.tsx @@ -22,7 +22,7 @@ import { MenuSeparator } from '../MenuSeparator'; import { RenderLayer } from '../../internal/RenderLayer'; import { createPropsGetter } from '../../lib/createPropsGetter'; import { Nullable } from '../../typings/utility-types'; -import { ReactNodePropTypes, isFunction, isNonNullable, isReactUINode } from '../../lib/utils'; +import { isFunction, isNonNullable, isReactUINode } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; @@ -180,7 +180,7 @@ export class Select extends React.Component { * * 'Загрузка' - значение по-умолчанию */ - caption: ReactNodePropTypes, + caption: PropTypes.node, dimmed: PropTypes.bool, diff --git a/packages/react-ui/components/Sticky/Sticky.tsx b/packages/react-ui/components/Sticky/Sticky.tsx index d4337bba08..6f19a3d55d 100644 --- a/packages/react-ui/components/Sticky/Sticky.tsx +++ b/packages/react-ui/components/Sticky/Sticky.tsx @@ -4,7 +4,7 @@ import shallowEqual from 'shallowequal'; import * as LayoutEvents from '../../lib/LayoutEvents'; import { Nullable } from '../../typings/utility-types'; -import { ReactNodePropTypes, isFunction } from '../../lib/utils'; +import { isFunction } from '../../lib/utils'; import { ZIndex } from '../../internal/ZIndex'; import { CommonWrapper, CommonProps } from '../../internal/CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; @@ -45,7 +45,7 @@ export class Sticky extends React.Component { public static __KONTUR_REACT_UI__ = 'Sticky'; public static propTypes = { - children: ReactNodePropTypes, + children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), /** * Функция, которая возвращает DOM-элемент, который нельзя пересекать. diff --git a/packages/react-ui/components/Tabs/Tab.tsx b/packages/react-ui/components/Tabs/Tab.tsx index 3593ff81e5..61ee0e4798 100644 --- a/packages/react-ui/components/Tabs/Tab.tsx +++ b/packages/react-ui/components/Tabs/Tab.tsx @@ -6,7 +6,7 @@ import { ResizeDetector } from '../../internal/ResizeDetector'; import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers'; import { keyListener } from '../../lib/events/keyListener'; import { Nullable } from '../../typings/utility-types'; -import { ReactNodePropTypes, isFunctionalComponent } from '../../lib/utils'; +import { isFunctionalComponent } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; @@ -117,7 +117,7 @@ export class Tab extends React.Component, public context: TabsContextType = this.context; public static propTypes = { - children: ReactNodePropTypes, + children: PropTypes.node, disabled: PropTypes.bool, href: PropTypes.string.isRequired, onClick: PropTypes.func, diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx index 028b0abdd1..f370b1d663 100644 --- a/packages/react-ui/components/Tabs/Tabs.tsx +++ b/packages/react-ui/components/Tabs/Tabs.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ReactNodePropTypes, emptyHandler } from '../../lib/utils'; +import { emptyHandler } from '../../lib/utils'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; @@ -68,7 +68,7 @@ export class Tabs extends React.Component HTMLElement).isRequired, }; diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx index e2862c1bf5..336456c863 100644 --- a/packages/react-ui/internal/Popup/Popup.tsx +++ b/packages/react-ui/internal/Popup/Popup.tsx @@ -9,11 +9,11 @@ import * as LayoutEvents from '../../lib/LayoutEvents'; import { ZIndex } from '../ZIndex'; import { RenderContainer } from '../RenderContainer'; import { FocusEventType, MouseEventType } from '../../typings/event-types'; -import { ReactNodePropTypes, isFunction, isNonNullable, isNullable, isRefableElement } from '../../lib/utils'; +import { isFunction, isNonNullable, isNullable, isRefableElement } from '../../lib/utils'; import { isIE11, isEdge, isSafari } from '../../lib/client'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { Theme } from '../../lib/theming/Theme'; -import { isHTMLElement } from '../../lib/SSRSafe'; +import { isHTMLElement, safePropTypesInstanceOf } from '../../lib/SSRSafe'; import { isTestEnv } from '../../lib/currentEnvironment'; import { CommonProps, CommonWrapper } from '../CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; @@ -128,14 +128,14 @@ export class Popup extends React.Component { /** * Ссылка (ref) на элемент или React компонент, для которого рисуется попап */ - anchorElement: ReactNodePropTypes.isRequired, + anchorElement: PropTypes.oneOfType([safePropTypesInstanceOf(() => HTMLElement), PropTypes.node]).isRequired, /** * Фон попапа и пина */ backgroundColor: PropTypes.string, - children: ReactNodePropTypes, + children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), /** * Показывать ли пин diff --git a/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx b/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx index 48eb5d2803..3b3625880c 100644 --- a/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx +++ b/packages/react-ui/internal/RenderContainer/RenderInnerContainer.tsx @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import propTypes from 'prop-types'; -import { ReactNodePropTypes } from '../../lib/utils'; import { Nullable } from '../../typings/utility-types'; import { safePropTypesInstanceOf } from '../../lib/SSRSafe'; @@ -68,5 +67,5 @@ export class RenderInnerContainer extends React.Component HTMLElement), rt_rootID: propTypes.string.isRequired, - children: ReactNodePropTypes.isRequired, + children: propTypes.node.isRequired, }; diff --git a/packages/react-ui/internal/icons/16px/index.tsx b/packages/react-ui/internal/icons/16px/index.tsx index 73792ce53b..30e3c65038 100644 --- a/packages/react-ui/internal/icons/16px/index.tsx +++ b/packages/react-ui/internal/icons/16px/index.tsx @@ -1,7 +1,6 @@ import React from 'react'; import propTypes from 'prop-types'; -import { ReactNodePropTypes } from '../../../lib/utils'; import { forwardRefAndName } from '../../../lib/forwardRefAndName'; import { styles } from './icon.styles'; @@ -33,7 +32,7 @@ SvgIcon.propTypes = { color: propTypes.string, size: propTypes.oneOfType([propTypes.string, propTypes.number]), style: propTypes.object, - children: ReactNodePropTypes, + children: propTypes.node, }; export const ArrowChevronDownIcon = forwardRefAndName( diff --git a/packages/react-ui/internal/icons/20px/svg.tsx b/packages/react-ui/internal/icons/20px/svg.tsx index 613f5a608a..603ce9d54a 100644 --- a/packages/react-ui/internal/icons/20px/svg.tsx +++ b/packages/react-ui/internal/icons/20px/svg.tsx @@ -1,8 +1,6 @@ import React from 'react'; import propTypes from 'prop-types'; -import { ReactNodePropTypes } from '../../../lib/utils'; - import { styles } from './icon.styles'; export interface SVGIconProps extends React.HTMLAttributes { @@ -20,7 +18,7 @@ export const SvgIcon: React.FunctionComponent = ({ children, color ); SvgIcon.propTypes = { - children: ReactNodePropTypes, + children: propTypes.node, color: propTypes.string, }; diff --git a/packages/react-ui/lib/utils.ts b/packages/react-ui/lib/utils.ts index 9520825b0d..1a1585bd9c 100644 --- a/packages/react-ui/lib/utils.ts +++ b/packages/react-ui/lib/utils.ts @@ -1,4 +1,4 @@ -import propTypes, { ReactComponentLike } from 'prop-types'; +import { ReactComponentLike } from 'prop-types'; import React from 'react'; import { isForwardRef } from 'react-is'; @@ -94,11 +94,6 @@ const calculateDecimals = (decimals: number) => { return 0; }; -/** - * Analogue of React.ReactNode but for prop-types - */ -export const ReactNodePropTypes = propTypes.oneOfType([propTypes.element, propTypes.node, propTypes.bool]); - export const formatBytes = (bytes: number, decimals = 2): string | null => { if (bytes === 0) { return '0 Bytes';