@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/DatePicker/DatePicker.tsx

@@ -1,238 +0,0 @@
-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 = {
-  day: number;
-  month: number;
-  year: number;
-};
-
-export interface DatePickerProps
-  extends Omit<
-      React.HTMLAttributes<HTMLDivElement>,
-      "defaultValue" | "min" | "max"
-    >,
-    HasPlatform,
-    AdaptivityProps {
-  min?: DatePickerDateFormat;
-  max?: DatePickerDateFormat;
-  name?: string;
-  defaultValue?: DatePickerDateFormat;
-  popupDirection?: "top" | "bottom";
-  monthNames?: string[];
-  dayPlaceholder?: string;
-  monthPlaceholder?: string;
-  yearPlaceholder?: string;
-  onDateChange?: (value: DatePickerDateFormat) => void;
-  disabled?: boolean;
-}
-
-// Переводим state к формату гг-мм-дд
-function convertToInputFormat({
-  day = 0,
-  month = 0,
-  year = 0,
-}: Partial<DatePickerDateFormat>) {
-  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;
-}
-
-// Переводим дату формата гг-мм-дд к объекту
-function parseInputDate(date: string): DatePickerDateFormat {
-  const splited = date.split("-");
-
-  return {
-    day: Number(splited[2]),
-    month: Number(splited[1]),
-    year: Number(splited[0]),
-  };
-}
-
-function getMonthMaxDay(month?: number, year?: number) {
-  return month ? new Date(year || 2016, month, 0).getDate() : 31;
-}
-
-const range = (start: number, end: number) => {
-  const swap = start > end;
-  const arr = [];
-  for (let i = Math.min(start, end); i <= Math.max(start, end); i++) {
-    arr.push(i);
-  }
-  return swap ? arr.reverse() : arr;
-};
-
-const DatePickerCustom: React.FC<
-  DatePickerProps & Partial<DatePickerDateFormat>
-> = ({
-  name,
-  min = { day: 0, month: 0, year: 0 },
-  max = { day: 31, month: 12, year: 2100 },
-  dayPlaceholder,
-  monthPlaceholder,
-  yearPlaceholder,
-  popupDirection,
-  defaultValue,
-  hasMouse,
-  monthNames,
-  day = 0,
-  month = 0,
-  year = 0,
-  onDateChange,
-  disabled,
-  ...restProps
-}) => {
-  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
-    onDateChange?.({
-      day,
-      month,
-      year,
-      [e.target.name]: Number(e.target.value),
-    });
-  };
-  const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({
-    label: String(value),
-    value,
-  }));
-  const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({
-    label: name,
-    value: index + 1,
-  }));
-  const yearOptions = range(max.year, min.year).map((value) => ({
-    label: String(value),
-    value: value,
-  }));
-  return (
-    <div vkuiClass="DatePicker" {...restProps}>
-      <div vkuiClass="DatePicker__container">
-        <div vkuiClass="DatePicker__day">
-          <CustomSelect
-            name="day"
-            value={day}
-            options={dayOptions}
-            placeholder={dayPlaceholder}
-            popupDirection={popupDirection}
-            onChange={onSelectChange}
-            disabled={disabled}
-          />
-        </div>
-        <div vkuiClass="DatePicker__month">
-          <CustomSelect
-            vkuiClass="DatePicker__monthSelect"
-            name="month"
-            value={month}
-            options={monthOptions}
-            placeholder={monthPlaceholder}
-            popupDirection={popupDirection}
-            onChange={onSelectChange}
-            disabled={disabled}
-          />
-        </div>
-        <div vkuiClass="DatePicker__year">
-          <CustomSelect
-            name="year"
-            value={year}
-            options={yearOptions}
-            placeholder={yearPlaceholder}
-            popupDirection={popupDirection}
-            onChange={onSelectChange}
-            disabled={disabled}
-          />
-        </div>
-      </div>
-      <input
-        type="hidden"
-        name={name}
-        value={convertToInputFormat({ day, month, year })}
-      />
-    </div>
-  );
-};
-
-const DatePickerNative: React.FC<
-  DatePickerProps & Partial<DatePickerDateFormat>
-> = ({
-  min = { day: 0, month: 0, year: 0 },
-  max = { day: 31, month: 12, year: 2100 },
-  dayPlaceholder,
-  monthPlaceholder,
-  yearPlaceholder,
-  popupDirection,
-  defaultValue,
-  hasMouse,
-  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]
-    );
-  return (
-    <Input
-      {...restProps}
-      type="date"
-      onChange={onStringChange}
-      min={convertToInputFormat(min)}
-      max={convertToInputFormat(max)}
-      {...defProps}
-    />
-  );
-};
-
-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]
-  );
-
-  const Cmp = hasMouse ? DatePickerCustom : DatePickerNative;
-  return <Cmp {...props} {...value} onDateChange={onDateChange} />;
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(DatePicker, {
-  hasMouse: true,
-});

package/src/components/DatePicker/Readme.md

@@ -1,40 +0,0 @@
-Компонент выбора даты. Для десктопа - это три [CustomSelect-a](#!/CustomSelect). Для мобильного вида - input c `type="date"`
-
-Принимает значения `min` (минимальная доступная дата), `max` (максимальная), `defaultValue` в формате {day: 1, month: 1, year: 1901},
-
-`onDateChange` - используется для получения значения Datepicker-а.
-
-Для десктопного вида можно передать массив с названиями месяцев,
-иначе будут использоваться дефолтные русские в родительном падеже
-
-```jsx
-<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);
-          }}
-          dayPlaceholder="ДД"
-          monthPlaceholder="ММММ"
-          yearPlaceholder="ГГГГ"
-        />
-      </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);
-          }}
-        />
-      </FormItem>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/Div/Div.css

@@ -1,14 +0,0 @@
-.Div {
-}
-
-.Div--ios {
-  padding: 12px;
-}
-
-.Div--android {
-  padding: 12px 16px;
-}
-
-.Div--vkcom {
-  padding: 12px 16px;
-}

package/src/components/Div/Div.tsx

@@ -1,29 +0,0 @@
-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 const Div: React.FunctionComponent<DivProps> = ({
-  children,
-  getRootRef,
-  ...restProps
-}: DivProps) => {
-  const platform = usePlatform();
-  return (
-    <div
-      {...restProps}
-      ref={getRootRef}
-      vkuiClass={getClassName("Div", platform)}
-    >
-      {children}
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Div;

package/src/components/Div/Readme.md

@@ -1,17 +0,0 @@
-Компонент с установленными паддингами, которые отличаются в зависимости от платформы. Необходим, когда есть какой-то
-кастомный блок, у которого должны быть стандартные отступы.
-
-```jsx
-<View activePanel="div">
-  <Panel id="div">
-    <PanelHeader>Div</PanelHeader>
-    <Group>
-      <Div>
-        <Button stretched mode="secondary" size="m">
-          Edit Info
-        </Button>
-      </Div>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/Dropdown/Dropdown.css

@@ -1,19 +0,0 @@
-.Dropdown {
-  animation: vkui-popper-fadein 0.2s ease;
-  background: var(--background_content);
-}
-
-.Dropdown--ios {
-  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, 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, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
-}

package/src/components/Dropdown/Dropdown.tsx

@@ -1,42 +0,0 @@
-import * as React from "react";
-import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
-import { ClickPopper, ClickPopperProps } from "../ClickPopper/ClickPopper";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import "./Dropdown.css";
-
-export interface DropdownProps
-  extends Omit<ClickPopperProps, "arrow" | "arrowClassName">,
-    Omit<HoverPopperProps, "arrow" | "arrowClassName"> {
-  action?: "click" | "hover";
-}
-
-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":
-      Component = ClickPopper;
-      break;
-    case "hover":
-      actionSpecificProps = { hideDelay, showDelay };
-      Component = HoverPopper;
-      break;
-  }
-
-  return (
-    <Component
-      vkuiClass={getClassName("Dropdown", platform)}
-      {...actionSpecificProps}
-      {...popperProps}
-    />
-  );
-};

package/src/components/Dropdown/Readme.md

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

package/src/components/DropdownIcon/DropdownIcon.css

@@ -1,3 +0,0 @@
-.DropdownIcon {
-  cursor: pointer;
-}

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -1,18 +0,0 @@
-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
-) => {
-  const platform = usePlatform();
-  const { sizeY } = useAdaptivity();
-
-  const Icon = sizeY === SizeType.COMPACT ? Icon20Dropdown : Icon24ChevronDown;
-
-  return <Icon vkuiClass={getClassName("DropdownIcon", platform)} {...props} />;
-};

package/src/components/Epic/Epic.css

@@ -1,4 +0,0 @@
-.Epic {
-  width: 100%;
-  height: 100%;
-}

package/src/components/Epic/Epic.tsx

@@ -1,61 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
-import { ScrollSaver } from "./ScrollSaver";
-import { getNavId } from "../../lib/getNavId";
-import { warnOnce } from "../../lib/warnOnce";
-import {
-  AdaptivityContextInterface,
-  AdaptivityProps,
-} from "../AdaptivityProvider/AdaptivityContext";
-import "./Epic.css";
-
-export interface EpicProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityProps {
-  tabbar?: React.ReactNode;
-  activeStory: string;
-}
-
-const warn = warnOnce("Epic");
-
-export const Epic: React.FC<EpicProps & AdaptivityContextInterface> = (
-  props
-) => {
-  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");
-  }
-  const story =
-    (React.Children.toArray(children).find(
-      (story) =>
-        React.isValidElement(story) &&
-        getNavId(story.props, warn) === activeStory
-    ) as React.ReactElement | undefined) ?? null;
-
-  return (
-    <div {...restProps} vkuiClass={getClassName("Epic", platform)}>
-      <ScrollSaver
-        key={activeStory}
-        initialScroll={scroll[activeStory] || 0}
-        saveScroll={(value) => (scroll[activeStory] = value)}
-      >
-        {story}
-      </ScrollSaver>
-      {tabbar}
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Epic, {
-  viewWidth: true,
-});