@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/DatePicker/DatePicker.tsx

@@ -1,13 +1,24 @@
-import * as React from 'react';
-import Input from '../Input/Input';
-import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
-import { HasPlatform } from '../../types';
-import { leadingZero } from '../../lib/utils';
-import CustomSelect from '../CustomSelect/CustomSelect';
-import './DatePicker.css';
+import * as React from "react";
+import Input from "../Input/Input";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { HasPlatform } from "../../types";
+import { leadingZero } from "../../lib/utils";
+import CustomSelect from "../CustomSelect/CustomSelect";
+import "./DatePicker.css";
 
 const DefaultMonths: string[] = [
-  'Января', 'Февраля', 'Марта', 'Апреля', 'Мая', 'Июня', 'Июля', 'Августа', 'Сентября', 'Октября', 'Ноября', 'Декабря',
+  "Января",
+  "Февраля",
+  "Марта",
+  "Апреля",
+  "Мая",
+  "Июня",
+  "Июля",
+  "Августа",
+  "Сентября",
+  "Октября",
+  "Ноября",
+  "Декабря",
 ];
 
 export type DatePickerDateFormat = {
@@ -16,12 +27,18 @@ export type DatePickerDateFormat = {
   year: number;
 };
 
-export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'min' | 'max'>, HasPlatform, AdaptivityProps {
+export interface DatePickerProps
+  extends Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      "defaultValue" | "min" | "max"
+    >,
+    HasPlatform,
+    AdaptivityProps {
   min?: DatePickerDateFormat;
   max?: DatePickerDateFormat;
   name?: string;
   defaultValue?: DatePickerDateFormat;
-  popupDirection?: 'top' | 'bottom';
+  popupDirection?: "top" | "bottom";
   monthNames?: string[];
   dayPlaceholder?: string;
   monthPlaceholder?: string;
@@ -31,13 +48,17 @@ export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
 }
 
 // Переводим state к формату гг-мм-дд
-function convertToInputFormat({ day, month, year }: Partial<DatePickerDateFormat>) {
+function convertToInputFormat({
+  day,
+  month,
+  year,
+}: Partial<DatePickerDateFormat>) {
   return `${year}-${leadingZero(month)}-${leadingZero(day)}`;
 }
 
 // Переводим дату формата гг-мм-дд к объекту
 function parseInputDate(date: string): DatePickerDateFormat {
-  const splited = date.split('-');
+  const splited = date.split("-");
 
   return {
     day: Number(splited[2]),
@@ -59,14 +80,22 @@ const range = (start: number, end: number) => {
   return swap ? arr.reverse() : arr;
 };
 
-const DatePickerCustom: React.FC<DatePickerProps & Partial<DatePickerDateFormat>> = ({
-  name, min, max,
-  dayPlaceholder, monthPlaceholder, yearPlaceholder,
+const DatePickerCustom: React.FC<
+  DatePickerProps & Partial<DatePickerDateFormat>
+> = ({
+  name,
+  min,
+  max,
+  dayPlaceholder,
+  monthPlaceholder,
+  yearPlaceholder,
   popupDirection,
   defaultValue,
   hasMouse,
   monthNames,
-  day, month, year,
+  day,
+  month,
+  year,
   onDateChange,
   disabled,
   ...restProps
@@ -129,27 +158,43 @@ const DatePickerCustom: React.FC<DatePickerProps & Partial<DatePickerDateFormat>
           />
         </div>
       </div>
-      <input type="hidden" name={name} value={convertToInputFormat({ day, month, year })} />
+      <input
+        type="hidden"
+        name={name}
+        value={convertToInputFormat({ day, month, year })}
+      />
     </div>
   );
 };
 
-const DatePickerNative: React.FC<DatePickerProps & Partial<DatePickerDateFormat>> = ({
-  min, max,
-  dayPlaceholder, monthPlaceholder, yearPlaceholder,
+const DatePickerNative: React.FC<
+  DatePickerProps & Partial<DatePickerDateFormat>
+> = ({
+  min,
+  max,
+  dayPlaceholder,
+  monthPlaceholder,
+  yearPlaceholder,
   popupDirection,
   defaultValue,
   hasMouse,
-  day, month, year,
+  day,
+  month,
+  year,
   onDateChange,
   ...restProps
 }) => {
-  const defProps = day && month && year
-    ? { defaultValue: convertToInputFormat({ day, month, year }) }
-    : {};
-  const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback((e) => {
-    onDateChange(parseInputDate(e.currentTarget.value));
-  }, [onDateChange]);
+  const defProps =
+    day && month && year
+      ? { defaultValue: convertToInputFormat({ day, month, year }) }
+      : {};
+  const onStringChange: React.ChangeEventHandler<HTMLInputElement> =
+    React.useCallback(
+      (e) => {
+        onDateChange(parseInputDate(e.currentTarget.value));
+      },
+      [onDateChange]
+    );
   return (
     <Input
       {...restProps}
@@ -162,17 +207,26 @@ const DatePickerNative: React.FC<DatePickerProps & Partial<DatePickerDateFormat>
   );
 };
 
-const DatePicker: React.FC<DatePickerProps> = ({ hasMouse, defaultValue, ...props }) => {
-  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(() => ({
-    day: defaultValue?.day || 0,
-    month: defaultValue?.month || 0,
-    year: defaultValue?.year || 0,
-  }));
+const DatePicker: React.FC<DatePickerProps> = ({
+  hasMouse,
+  defaultValue,
+  ...props
+}) => {
+  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(
+    () => ({
+      day: defaultValue?.day || 0,
+      month: defaultValue?.month || 0,
+      year: defaultValue?.year || 0,
+    })
+  );
 
-  const onDateChange = React.useCallback((update: DatePickerDateFormat) => {
-    setValue(update);
-    props.onDateChange && props.onDateChange({ ...update });
-  }, [props.onDateChange]);
+  const onDateChange = React.useCallback(
+    (update: DatePickerDateFormat) => {
+      setValue(update);
+      props.onDateChange && props.onDateChange({ ...update });
+    },
+    [props.onDateChange]
+  );
 
   const Cmp = hasMouse ? DatePickerCustom : DatePickerNative;
   return <Cmp {...props} {...value} onDateChange={onDateChange} />;

package/src/components/DatePicker/Readme.md

@@ -3,22 +3,22 @@
 Принимает значения `min` (минимальная доступная дата), `max` (максимальная), `defaultValue` в формате {day: 1, month: 1, year: 1901},
 
 `onDateChange` - используется для получения значения Datepicker-а.
- 
- Для десктопного вида можно передать массив с названиями месяцев, 
- иначе будут использоваться дефолтные русские в родительном падеже
+
+Для десктопного вида можно передать массив с названиями месяцев,
+иначе будут использоваться дефолтные русские в родительном падеже
 
 ```jsx
-  <View activePanel="datePicker">
-    <Panel id="datePicker">
-      <PanelHeader>
-        DatePicker
-      </PanelHeader>
-      <Group>
+<View activePanel="datePicker">
+  <Panel id="datePicker">
+    <PanelHeader>DatePicker</PanelHeader>
+    <Group>
       <FormItem top="Дата рождения">
         <DatePicker
-          min={{day: 1, month: 1, year: 1901}}
-          max={{day: 1, month: 1, year: 2006}}
-          onDateChange={(value) => {console.log(value)}}
+          min={{ day: 1, month: 1, year: 1901 }}
+          max={{ day: 1, month: 1, year: 2006 }}
+          onDateChange={(value) => {
+            console.log(value);
+          }}
           dayPlaceholder="ДД"
           monthPlaceholder="ММММ"
           yearPlaceholder="ГГГГ"
@@ -26,13 +26,15 @@
       </FormItem>
       <FormItem top="Дата рождения">
         <DatePicker
-          min={{day: 1, month: 1, year: 1901}}
-          max={{day: 1, month: 1, year: 2006}}
-          defaultValue={{day: 2, month: 4, year: 1994}}
-          onDateChange={(value) => {console.log(value)}}
+          min={{ day: 1, month: 1, year: 1901 }}
+          max={{ day: 1, month: 1, year: 2006 }}
+          defaultValue={{ day: 2, month: 4, year: 1994 }}
+          onDateChange={(value) => {
+            console.log(value);
+          }}
         />
       </FormItem>
-      </Group>
-    </Panel>
-  </View>
+    </Group>
+  </Panel>
+</View>
 ```

package/src/components/Div/Div.css

@@ -1,5 +1,4 @@
 .Div {
-
 }
 
 .Div--ios {

package/src/components/Div/Div.tsx

@@ -1,15 +1,25 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import { HasRootRef } from '../../types';
-import './Div.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { HasRootRef } from "../../types";
+import "./Div.css";
 
-export interface DivProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {}
+export interface DivProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {}
 
-export const Div: React.FunctionComponent<DivProps> = ({ children, getRootRef, ...restProps }: DivProps) => {
+export const Div: React.FunctionComponent<DivProps> = ({
+  children,
+  getRootRef,
+  ...restProps
+}: DivProps) => {
   const platform = usePlatform();
   return (
-    <div {...restProps} ref={getRootRef} vkuiClass={getClassName('Div', platform)}>
+    <div
+      {...restProps}
+      ref={getRootRef}
+      vkuiClass={getClassName("Div", platform)}
+    >
       {children}
     </div>
   );

package/src/components/Dropdown/Dropdown.css

@@ -1,19 +1,19 @@
 .Dropdown {
-  animation: vkui-popper-fadein .2s ease;
+  animation: vkui-popper-fadein 0.2s ease;
   background: var(--background_content);
 }
 
 .Dropdown--ios {
-  box-shadow: 0 0 96px rgba(0, 0, 0, .16), 0 0 2px rgba(0, 0, 0, .12);
+  box-shadow: 0 0 96px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
   border-radius: 14px;
 }
 
 .Dropdown--android {
-  box-shadow: 0 0 4px rgba(0, 0, 0, .08), 0 8px 8px rgba(0, 0, 0, .16);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
   border-radius: 12px;
 }
 
 .Dropdown--vkcom {
-  box-shadow: 0 0 2px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .08);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
   border-radius: 12px;
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';
-import { ClickPopper } from '../ClickPopper/ClickPopper';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import { Placement } from '../Popper/Popper';
-import './Dropdown.css';
+import * as React from "react";
+import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
+import { ClickPopper } from "../ClickPopper/ClickPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { Placement } from "../Popper/Popper";
+import "./Dropdown.css";
 
 // Приходится избегать экстендов от HoverPopperProps, ClickPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
 // Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
@@ -39,36 +39,45 @@ export interface DropdownProps {
    */
   children?: React.ReactElement;
 
-  action?: 'click' | 'hover';
+  action?: "click" | "hover";
   /**
    * Актуально только для action="hover"
    * Количество миллисекунд, после которых произойдет показ дропдауна
    */
-  showDelay?: HoverPopperProps['showDelay'];
+  showDelay?: HoverPopperProps["showDelay"];
   /**
    * Актуально только для action="hover"
    * Количество миллисекунд, после которых произойдет скрытие дропдауна
    */
-  hideDelay?: HoverPopperProps['hideDelay'];
+  hideDelay?: HoverPopperProps["hideDelay"];
 }
 
-export const Dropdown: React.FC<DropdownProps> = ({ action = 'click', hideDelay, showDelay, ...popperProps }: DropdownProps) => {
+export const Dropdown: React.FC<DropdownProps> = ({
+  action = "click",
+  hideDelay,
+  showDelay,
+  ...popperProps
+}: DropdownProps) => {
   const platform = usePlatform();
 
   let Component;
   let actionSpecificProps: Partial<DropdownProps> = {};
 
   switch (action) {
-    case 'click':
+    case "click":
       Component = ClickPopper;
       break;
-    case 'hover':
+    case "hover":
       actionSpecificProps = { hideDelay, showDelay };
       Component = HoverPopper;
       break;
   }
 
   return (
-    <Component vkuiClass={getClassName('Dropdown', platform)} {...actionSpecificProps} {...popperProps} />
+    <Component
+      vkuiClass={getClassName("Dropdown", platform)}
+      {...actionSpecificProps}
+      {...popperProps}
+    />
   );
 };

package/src/components/Dropdown/Readme.md

@@ -1,4 +1,8 @@
-Может открываться при клике или наведении мыши на `children`. Ограничений по содержимому нет. Предназначен для 
+> **Важно**
+>
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
+Может открываться при клике или наведении мыши на `children`. Ограничений по содержимому нет. Предназначен для
 отрисовки части интерфейса в выпадающем окне.
 
 ```jsx { "props": { "layout": false, "iframe": true } }
@@ -6,7 +10,15 @@ const [shown, setShown] = React.useState(true);
 
 return (
   <React.Fragment>
-    <Dropdown action="hover" placement="right" content={<Div><Text>Привет</Text></Div>}>
+    <Dropdown
+      action="hover"
+      placement="right"
+      content={
+        <Div>
+          <Text>Привет</Text>
+        </Div>
+      }
+    >
       <Button style={{ margin: 20 }}>Наведи</Button>
     </Dropdown>
 
@@ -30,10 +42,8 @@ return (
         </FormLayout>
       }
     >
-      <Button style={{ margin: '20px 0 0 0' }}>
-        Кликни
-      </Button>
+      <Button style={{ margin: "20px 0 0 0" }}>Кликни</Button>
     </Dropdown>
   </React.Fragment>
-)
+);
 ```

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -1,20 +1,18 @@
-import * as React from 'react';
-import { Icon20Dropdown, Icon24ChevronDown } from '@vkontakte/icons';
-import { SizeType } from '../AdaptivityProvider/AdaptivityContext';
-import { getClassName } from '../../helpers/getClassName';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { usePlatform } from '../../hooks/usePlatform';
-import './DropdownIcon.css';
+import * as React from "react";
+import { Icon20Dropdown, Icon24ChevronDown } from "@vkontakte/icons";
+import { SizeType } from "../AdaptivityProvider/AdaptivityContext";
+import { getClassName } from "../../helpers/getClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./DropdownIcon.css";
 
-export const DropdownIcon: React.FC<React.HTMLAttributes<HTMLElement>> = (props) => {
+export const DropdownIcon: React.FC<React.HTMLAttributes<HTMLElement>> = (
+  props
+) => {
   const platform = usePlatform();
   const { sizeY } = useAdaptivity();
 
-  const Icon = sizeY === SizeType.COMPACT
-    ? Icon20Dropdown
-    : Icon24ChevronDown;
+  const Icon = sizeY === SizeType.COMPACT ? Icon20Dropdown : Icon24ChevronDown;
 
-  return (
-    <Icon vkuiClass={getClassName('DropdownIcon', platform)} {...props} />
-  );
+  return <Icon vkuiClass={getClassName("DropdownIcon", platform)} {...props} />;
 };

package/src/components/Epic/Epic.tsx

@@ -1,37 +1,51 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import { withAdaptivity, ViewWidth, AdaptivityProps } from '../../hoc/withAdaptivity';
-import { ScrollSaver } from './ScrollSaver';
-import { getNavId } from '../../lib/getNavId';
-import { warnOnce } from '../../lib/warnOnce';
-import './Epic.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import {
+  withAdaptivity,
+  ViewWidth,
+  AdaptivityProps,
+} from "../../hoc/withAdaptivity";
+import { ScrollSaver } from "./ScrollSaver";
+import { getNavId } from "../../lib/getNavId";
+import { warnOnce } from "../../lib/warnOnce";
+import "./Epic.css";
 
-export interface EpicProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps {
+export interface EpicProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    AdaptivityProps {
   tabbar?: React.ReactNode;
   activeStory: string;
 }
 
-const warn = warnOnce('Epic');
+const warn = warnOnce("Epic");
 
 export const Epic: React.FC<EpicProps> = (props: EpicProps) => {
   const platform = usePlatform();
   const scroll = React.useRef<{ [key: string]: number }>({}).current;
   const { activeStory, tabbar, children, viewWidth, ...restProps } = props;
 
-  if (process.env.NODE_ENV === 'development' && !tabbar && viewWidth < ViewWidth.SMALL_TABLET) {
-    warn('Using Epic without tabbar is not recommended on mobile');
+  if (
+    process.env.NODE_ENV === "development" &&
+    !tabbar &&
+    viewWidth < ViewWidth.SMALL_TABLET
+  ) {
+    warn("Using Epic without tabbar is not recommended on mobile");
   }
-  const story = (React.Children.toArray(children) as React.ReactElement[])
-    .find((story) => getNavId(story.props, warn) === activeStory) || null;
+  const story =
+    (React.Children.toArray(children) as React.ReactElement[]).find(
+      (story) => getNavId(story.props, warn) === activeStory
+    ) || null;
 
   return (
-    <div {...restProps} vkuiClass={getClassName('Epic', platform)}>
+    <div {...restProps} vkuiClass={getClassName("Epic", platform)}>
       <ScrollSaver
         key={activeStory}
         initialScroll={scroll[activeStory] || 0}
-        saveScroll={(value) => scroll[activeStory] = value}
-      >{story}</ScrollSaver>
+        saveScroll={(value) => (scroll[activeStory] = value)}
+      >
+        {story}
+      </ScrollSaver>
       {tabbar}
     </div>
   );