Типы в defaultProps - 2

packages/react-ui-validations/src/ValidationContainer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createPropsGetter } from '@skbkontur/react-ui/lib/createPropsGetter';
 
 import { Nullable } from '../typings/Types';
 
@@ -14,16 +15,20 @@ export interface ValidationContainerProps {
   children?: React.ReactNode;
   onValidationUpdated?: (isValid?: Nullable<boolean>) => void;
   scrollOffset?: number | ScrollOffset;
-  disableSmoothScroll: boolean;
+  disableSmoothScroll?: boolean;
 }
 
+type DefaultProps = Required<Pick<ValidationContainerProps, 'disableSmoothScroll'>>;
+
 export class ValidationContainer extends React.Component<ValidationContainerProps> {
   public static __KONTUR_REACT_UI__ = 'ValidationContainer';
 
-  public static defaultProps = {
+  public static defaultProps: DefaultProps = {
     disableSmoothScroll: isTestEnv,
   };
 
+  private getProps = createPropsGetter(ValidationContainer.defaultProps);
+
   public static propTypes = {
     scrollOffset(props: ValidationContainerProps, propName: keyof ValidationContainerProps, componentName: string) {
       const { scrollOffset } = props;
@@ -56,7 +61,7 @@ export class ValidationContainer extends React.Component<ValidationContainerProp
       <ValidationContextWrapper
         ref={this.refChildContext}
         scrollOffset={this.props.scrollOffset}
-        disableSmoothScroll={this.props.disableSmoothScroll}
+        disableSmoothScroll={this.getProps().disableSmoothScroll}
         onValidationUpdated={this.props.onValidationUpdated}
       >
         {this.props.children}

packages/react-ui-validations/stories/SyncStories/SingleInputPage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button, Gapped, Input, Select } from '@skbkontur/react-ui';
+import { createPropsGetter } from '@skbkontur/react-ui/lib/createPropsGetter';
 
 import { text, ValidationContainer, ValidationInfo, ValidationWrapper } from '../../src';
 import { Nullable } from '../../typings/Types';
@@ -19,16 +20,20 @@ interface SingleInputPageState {
   focused: boolean;
 }
 
+type DefaultProps = Required<Pick<SingleInputPageProps, 'validationLevel'>>;
+
 export class SingleInputPage extends React.Component<SingleInputPageProps, SingleInputPageState> {
+  private getProps = createPropsGetter(SingleInputPage.defaultProps);
+
   public state: SingleInputPageState = {
     sending: false,
     value: this.props.initialValue || '',
-    level: this.props.validationLevel,
+    level: this.getProps().validationLevel,
     validation: 'none',
     focused: false,
   };
 
-  public static defaultProps: Partial<SingleInputPageProps> = {
+  public static defaultProps: DefaultProps = {
     validationLevel: 'error',
   };
 

packages/react-ui/components/Autocomplete/Autocomplete.tsx

@@ -43,27 +43,27 @@ export interface AutocompleteProps
       InputProps,
       {
         /** Функция отрисовки элемента меню */
-        renderItem: (item: string) => React.ReactNode;
+        renderItem?: (item: string) => React.ReactNode;
         /** Промис, резолвящий элементы меню */
         source?: string[] | ((patter: string) => Promise<string[]>);
         /** Отключает использование портала */
-        disablePortal: boolean;
+        disablePortal?: boolean;
         /** Отрисовка тени у выпадающего меню */
-        hasShadow: boolean;
+        hasShadow?: boolean;
         /** Выравнивание выпадающего меню */
-        menuAlign: 'left' | 'right';
+        menuAlign?: 'left' | 'right';
         /** Максимальная высота меню */
-        menuMaxHeight: number | string;
+        menuMaxHeight?: number | string;
         /** Ширина меню */
         menuWidth?: number | string;
         /** Отключить скролл окна, когда меню открыто */
-        preventWindowScroll: boolean;
+        preventWindowScroll?: boolean;
         /** Вызывается при изменении `value` */
         onValueChange: (value: string) => void;
         /** onBlur */
         onBlur?: () => void;
         /** Размер инпута */
-        size: InputProps['size'];
+        size?: InputProps['size'];
         /** value */
         value: string;
         /**
@@ -84,6 +84,13 @@ export const AutocompleteDataTids = {
   root: 'Autocomplete__root',
 } as const;
 
+type DefaultProps = Required<
+  Pick<
+    AutocompleteProps,
+    'renderItem' | 'size' | 'disablePortal' | 'hasShadow' | 'menuMaxHeight' | 'menuAlign' | 'preventWindowScroll'
+  >
+>;
+
 /**
  * Стандартный инпут с подсказками.
  *
@@ -117,7 +124,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
     source: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
   };
 
-  public static defaultProps = {
+  public static defaultProps: DefaultProps = {
     renderItem,
     size: 'small',
     disablePortal: false,
@@ -231,24 +238,21 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
 
   private renderMenu(): React.ReactNode {
     const items = this.state.items;
+    const { menuMaxHeight, hasShadow, menuWidth, width, preventWindowScroll, menuAlign, disablePortal } =
+      this.getProps();
     const menuProps = {
       ref: this.refMenu,
-      maxHeight: this.props.menuMaxHeight,
-      hasShadow: this.props.hasShadow,
-      width: this.props.menuWidth || (this.props.width && getDOMRect(this.rootSpan).width),
-      preventWindowScroll: this.props.preventWindowScroll,
+      maxHeight: menuMaxHeight,
+      hasShadow,
+      width: menuWidth || (width && getDOMRect(this.rootSpan).width),
+      preventWindowScroll,
     };
     if (!items || items.length === 0) {
       return null;
     }
 
     return (
-      <DropdownContainer
-        offsetY={1}
-        getParent={this.getAnchor}
-        align={this.props.menuAlign}
-        disablePortal={this.props.disablePortal}
-      >
+      <DropdownContainer offsetY={1} getParent={this.getAnchor} align={menuAlign} disablePortal={disablePortal}>
         <Menu {...menuProps}>{this.getItems()}</Menu>
       </DropdownContainer>
     );

packages/react-ui/components/Button/Button.tsx

@@ -9,6 +9,7 @@ import { Spinner } from '../Spinner';
 import { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';
 import { cx } from '../../lib/theming/Emotion';
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
+import { createPropsGetter } from '../../lib/createPropsGetter';
 
 import { styles, activeStyles, globalClasses } from './Button.styles';
 
@@ -167,17 +168,21 @@ export const ButtonDataTids = {
   root: 'Button__root',
 } as const;
 
+type DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;
+
 @rootNode
 export class Button extends React.Component<ButtonProps, ButtonState> {
   public static __KONTUR_REACT_UI__ = 'Button';
   public static __BUTTON__ = true;
 
-  public static defaultProps = {
-    use: 'default' as ButtonUse,
-    size: 'small' as ButtonSize,
-    type: 'button' as ButtonType,
+  public static defaultProps: DefaultProps = {
+    use: 'default',
+    size: 'small',
+    type: 'button',
   };
 
+  private getProps = createPropsGetter(Button.defaultProps);
+
   public state = {
     focusedByTab: false,
   };
@@ -251,7 +256,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
       width,
       children,
     } = this.props;
-    const use = this.props.use || Button.defaultProps.use;
+    const { use, type } = this.getProps();
     const sizeClass = this.getSizeClassName();
 
     const isFocused = this.state.focusedByTab || visuallyFocused;
@@ -260,7 +265,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
       // By default the type attribute is 'submit'. IE8 will fire a click event
       // on this button if somewhere on the page user presses Enter while some
       // input is focused. So we set type to 'button' by default.
-      type: this.props.type,
+      type,
       className: cx({
         [styles.root(this.theme)]: true,
         [styles[use](this.theme)]: true,
@@ -404,7 +409,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
   }
 
   private getSizeClassName() {
-    switch (this.props.size) {
+    switch (this.getProps().size) {
       case 'large':
         return cx(styles.sizeLarge(this.theme), { [styles.sizeLargeIE11(this.theme)]: isIE11 || isEdge });
       case 'medium':
@@ -416,7 +421,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
   }
 
   private getSizeIconClassName() {
-    switch (this.props.size) {
+    switch (this.getProps().size) {
       case 'large':
         return styles.iconLarge(this.theme);
       case 'medium':
@@ -428,7 +433,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
   }
 
   private getSizeWrapClassName() {
-    switch (this.props.size) {
+    switch (this.getProps().size) {
       case 'large':
         return styles.wrapLarge(this.theme);
       case 'medium':

packages/react-ui/components/Center/Center.tsx

@@ -4,6 +4,7 @@ import { Override } from '../../typings/utility-types';
 import { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';
 import { cx } from '../../lib/theming/Emotion';
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
+import { createPropsGetter, DefaultizedProps } from '../../lib/createPropsGetter';
 
 import { styles } from './Center.styles';
 
@@ -27,26 +28,31 @@ export const CenterDataTids = {
   root: 'Center__root',
 } as const;
 
+type DefaultProps = Required<Pick<CenterProps, 'align'>>;
+type DefaultizedCenterProps = DefaultizedProps<CenterProps, DefaultProps>;
+
 /**
  * Контейнер, который центрирует элементы внутри себя.
  */
 @rootNode
 export class Center extends React.Component<CenterProps> {
   public static __KONTUR_REACT_UI__ = 'Center';
 
-  public static defaultProps = {
+  public static defaultProps: DefaultProps = {
     align: 'center',
   };
+  private getProps = createPropsGetter(Center.defaultProps);
+
   private setRootNode!: TSetRootNode;
 
   public render() {
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>
         {this.renderMain}
       </CommonWrapper>
     );
   }
-  private renderMain = (props: CommonWrapperRestProps<CenterProps>) => {
+  private renderMain = (props: CommonWrapperRestProps<DefaultizedCenterProps>) => {
     const { align, ...rest } = props;
 
     return (

packages/react-ui/components/ComboBox/ComboBox.tsx

@@ -6,6 +6,7 @@ import { MenuItemState } from '../MenuItem';
 import { InputIconType } from '../Input';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
+import { createPropsGetter } from '../../lib/createPropsGetter';
 
 export interface ComboBoxProps<T> extends CommonProps {
   align?: 'left' | 'center' | 'right';
@@ -54,7 +55,7 @@ export interface ComboBoxProps<T> extends CommonProps {
    * Необходим для сравнения полученных результатов с `value`
    * @default item => item.label
    */
-  itemToValue: (item: T) => string | number;
+  itemToValue?: (item: T) => string | number;
 
   maxLength?: number;
 
@@ -96,7 +97,7 @@ export interface ComboBoxProps<T> extends CommonProps {
    * Не применяется если элемент является функцией или React-элементом
    * @default item => item.label
    */
-  renderItem: (item: T, state?: MenuItemState) => React.ReactNode;
+  renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;
 
   /**
    * Функция для отрисовки сообщения о пустом результате поиска
@@ -114,7 +115,7 @@ export interface ComboBoxProps<T> extends CommonProps {
    * Функция отрисовки выбранного значения
    * @default item => item.label
    */
-  renderValue: (item: T) => React.ReactNode;
+  renderValue?: (item: T) => React.ReactNode;
 
   /**
    * Функция отрисовки кнопки добавления в выпадающем списке
@@ -138,7 +139,7 @@ export interface ComboBoxProps<T> extends CommonProps {
    * Необходим для преобразования `value` в строку при фокусировке
    * @default item => item.label
    */
-  valueToString: (item: T) => string;
+  valueToString?: (item: T) => string;
 
   size?: 'small' | 'medium' | 'large';
   /**
@@ -166,11 +167,18 @@ export interface ComboBoxItem {
   label: string;
 }
 
+type DefaultProps<T> = Required<
+  Pick<
+    ComboBoxProps<T>,
+    'itemToValue' | 'valueToString' | 'renderValue' | 'renderItem' | 'menuAlign' | 'searchOnFocus' | 'drawArrow'
+  >
+>;
+
 @rootNode
 export class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {
   public static __KONTUR_REACT_UI__ = 'ComboBox';
 
-  public static defaultProps = {
+  public static defaultProps: DefaultProps<any> = {
     itemToValue: (item: ComboBoxItem) => item.value,
     valueToString: (item: ComboBoxItem) => item.label,
     renderValue: (item: ComboBoxItem) => item.label,
@@ -180,6 +188,8 @@ export class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>
     drawArrow: true,
   };
 
+  private getProps = createPropsGetter(ComboBox.defaultProps);
+
   private comboboxElement: Nullable<CustomComboBox<T>> = null;
   private setRootNode!: TSetRootNode;
 
@@ -262,7 +272,7 @@ export class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>
   }
 
   public render() {
-    return <CustomComboBox {...this.props} ref={this.customComboBoxRef} />;
+    return <CustomComboBox {...this.getProps()} ref={this.customComboBoxRef} />;
   }
 
   private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {