@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Pagination/Readme.md

@@ -0,0 +1,110 @@
+Чаще всего используется в больших списках или таблицах, для более понятного структурирования и деления информации.
+
+По умолчанию многоточие показывается когда кол-во страниц `> 7`. Чтобы повлиять на это поведение, существуют параметры `siblingCount` и `boundaryCount`.
+К примеру, если выставить `siblingCount={0}` или `boundaryCount={0}`, то многоточие появится уже при `> 5`.
+Если выставить и `siblingCount={0}`, и `boundaryCount={0}`, то `> 4`.
+
+> При ширине `< 380px` рекомендуется отключать `siblingCount` передав в него значение `0`.
+
+## `usePagination`
+
+Для полной кастомизации можно использовать хук `usePagination()`. Возвращает массив типа `[1, 2, 3, 4, 5, 'end-ellipsis', 8]`. Принимиает почти те же параметры, что и `Pagination`.
+
+```jsx { "props": { "layout": false, "adaptivity": true, "iframe": false } }
+const Example = () => {
+  const [sizeY, setSizeY] = useState("compact");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [siblingCount, setSiblingCount] = useState(0);
+  const [boundaryCount, setBoundaryCount] = useState(1);
+  const [totalPages, setTotalPages] = useState(123);
+  const [disabled, setDisabled] = useState(false);
+
+  const handleChange = React.useCallback((page) => {
+    setCurrentPage(page);
+  }, []);
+
+  return (
+    <div style={rootContainerStyles}>
+      <AdaptivityProvider sizeY={sizeY}>
+        <div style={demoContainerStyles}>
+          <Pagination
+            currentPage={currentPage}
+            siblingCount={siblingCount}
+            boundaryCount={boundaryCount}
+            totalPages={totalPages}
+            disabled={disabled}
+            onChange={handleChange}
+          />
+        </div>
+      </AdaptivityProvider>
+      <div style={propsContainerStyles}>
+        <FormItem top="sizeY">
+          <Select
+            value={sizeY}
+            onChange={(e) => setSizeY(e.target.value)}
+            options={[
+              { label: "compact", value: "compact" },
+              { label: "regular", value: "regular" },
+            ]}
+          />
+        </FormItem>
+        <FormItem top="prop[currentPage]">
+          <Input
+            type="number"
+            value={currentPage}
+            onChange={({ target: { value } }) => setCurrentPage(Number(value))}
+          />
+        </FormItem>
+        <FormItem top="prop[siblingCount]">
+          <Input
+            type="number"
+            value={siblingCount}
+            onChange={({ target: { value } }) => setSiblingCount(Number(value))}
+          />
+        </FormItem>
+        <FormItem top="prop[boundaryCount]">
+          <Input
+            type="number"
+            value={boundaryCount}
+            onChange={({ target: { value } }) =>
+              setBoundaryCount(Number(value))
+            }
+          />
+        </FormItem>
+        <FormItem top="prop[totalPages]">
+          <Input
+            type="number"
+            value={totalPages}
+            onChange={({ target: { value } }) => setTotalPages(Number(value))}
+          />
+        </FormItem>
+        <FormItem top="prop[disabled]">
+          <Checkbox
+            value={disabled}
+            onChange={({ target: { checked } }) => setDisabled(checked)}
+          >
+            disabled
+          </Checkbox>
+        </FormItem>
+      </div>
+    </div>
+  );
+};
+
+const rootContainerStyles = {
+  display: "flex",
+  flexDirection: "row-reverse",
+  flexWrap: "wrap",
+  justifyContent: "center",
+};
+
+const demoContainerStyles = {
+  flexGrow: 2,
+  paddingTop: 24,
+  paddingBottom: 24,
+};
+
+const propsContainerStyles = { minWidth: 200 };
+
+<Example />;
+```

package/src/components/Panel/Panel.css

@@ -0,0 +1,116 @@
+.Panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.Panel::after {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  content: "";
+}
+
+.Panel--centered .PanelHeader {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.Panel__in {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+}
+
+.Panel__centered {
+  display: flex;
+  flex: 1 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.Panel__centered .PanelHeader--ios.PanelHeader--vis + * {
+  margin-top: var(--panelheader_height_ios);
+}
+
+.Panel__centered .PanelHeader--android.PanelHeader--vis + *,
+.Panel__centered .PanelHeader--vkcom.PanelHeader--vis + * {
+  margin-top: var(--panelheader_height_android);
+}
+
+.Panel--sizeX-compact .Panel__centered .PanelHeader--ios.PanelHeader--sep + * {
+  margin-top: calc(var(--panelheader_height_ios) + 5px);
+}
+
+.Panel--sizeX-compact
+  .Panel__centered
+  .PanelHeader--android.PanelHeader--sep
+  + * {
+  margin-top: calc(var(--panelheader_height_android) + 5px);
+}
+
+.Panel--sizeX-compact
+  .Panel__centered
+  .PanelHeader--vkcom.PanelHeader--sep
+  + * {
+  margin-top: calc(var(--panelheader_height_vkcom) + 5px);
+}
+
+.Panel--sizeX-regular .Panel__centered .PanelHeader--ios.PanelHeader--sep + * {
+  margin-top: calc(var(--panelheader_height_ios) + 16px);
+}
+
+.Panel--sizeX-regular
+  .Panel__centered
+  .PanelHeader--android.PanelHeader--sep
+  + * {
+  margin-top: calc(var(--panelheader_height_android) + 16px);
+}
+
+.Panel--sizeX-regular
+  .Panel__centered
+  .PanelHeader--vkcom.PanelHeader--sep
+  + * {
+  margin-top: calc(var(--panelheader_height_vkcom) + 16px);
+}
+
+.Epic .Panel__in {
+  padding-bottom: var(--tabbar_height);
+  padding-bottom: calc(var(--safe-area-inset-bottom) + var(--tabbar_height));
+}
+
+.Panel__in-before {
+  height: 1px;
+  margin-bottom: -1px;
+}
+
+.Panel__separator {
+  position: relative;
+  z-index: 3;
+}
+
+.Panel__in-after {
+  height: 1px;
+  margin-top: -1px;
+}
+
+.Panel .Panel__in,
+.Panel::after {
+  background-color: var(--background_content);
+}
+
+.Panel.Panel--regular .Panel__in,
+.Panel.Panel--regular::after {
+  background-color: transparent;
+}

package/src/components/Panel/Panel.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { Touch } from "../Touch/Touch";
+import { TooltipContainer } from "../Tooltip/TooltipContainer";
+import { HasRootRef } from "../../types";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
+import { IOS } from "../../lib/platform";
+import { usePlatform } from "../../hooks/usePlatform";
+import { NavIdProps } from "../../lib/getNavId";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
+import "./Panel.css";
+
+export interface PanelProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement>,
+    AdaptivityProps,
+    NavIdProps {
+  centered?: boolean;
+}
+
+export const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(
+  ({ centered = false, children, getRootRef, sizeX, nav, ...restProps }) => {
+    const platform = usePlatform();
+
+    return (
+      <div
+        {...restProps}
+        ref={getRootRef}
+        vkuiClass={classNames(
+          getClassName("Panel", platform),
+          `Panel--${sizeX}`,
+          {
+            "Panel--centered": centered,
+            [`Panel--sizeX-${sizeX}`]: true,
+          }
+        )}
+      >
+        <Touch Component={TooltipContainer} vkuiClass="Panel__in">
+          {platform === IOS && <div vkuiClass="Panel__fade" />}
+          <div vkuiClass="Panel__in-before" />
+          {centered ? (
+            <div vkuiClass="Panel__centered">{children}</div>
+          ) : (
+            children
+          )}
+          <div vkuiClass="Panel__in-after" />
+        </Touch>
+      </div>
+    );
+  },
+  {
+    sizeX: true,
+  }
+);

package/src/components/Panel/Readme.md

@@ -0,0 +1,97 @@
+`Panel` – это контейнер для контента.
+
+```jsx
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activePanel: "panel1",
+    };
+  }
+
+  render() {
+    return (
+      <View activePanel={this.state.activePanel}>
+        <Panel id="panel1">
+          <PanelHeader>More</PanelHeader>
+          <Group>
+            <Cell
+              expandable
+              before={<Icon28UserOutline />}
+              onClick={() => this.setState({ activePanel: "panel2" })}
+            >
+              Friends
+            </Cell>
+            <Cell
+              expandable
+              before={<Icon28UsersOutline />}
+              onClick={() => this.setState({ activePanel: "panel2" })}
+            >
+              Communities
+            </Cell>
+            <Cell
+              expandable
+              before={<Icon28MusicOutline />}
+              onClick={() => this.setState({ activePanel: "panel2" })}
+            >
+              Music
+            </Cell>
+          </Group>
+        </Panel>
+        <Panel id="panel2">
+          <PanelHeader
+            separator={false}
+            left={
+              <PanelHeaderBack
+                onClick={() => this.setState({ activePanel: "panel1" })}
+              />
+            }
+          >
+            Communities
+          </PanelHeader>
+          <Group>
+            <Search />
+            <Cell
+              description="Humor"
+              before={<Avatar />}
+              onClick={() => this.setState({ activePanel: "panel3" })}
+            >
+              Swipe Right
+            </Cell>
+            <Cell
+              description="Cultural Center"
+              before={<Avatar />}
+              onClick={() => this.setState({ activePanel: "panel3" })}
+            >
+              Out Cinema
+            </Cell>
+            <Cell
+              description="Movies"
+              before={<Avatar />}
+              onClick={() => this.setState({ activePanel: "panel3" })}
+            >
+              #ARTPOKAZ
+            </Cell>
+          </Group>
+        </Panel>
+        <Panel id="panel3" centered>
+          <PanelHeader
+            left={
+              <PanelHeaderBack
+                onClick={() => this.setState({ activePanel: "panel2" })}
+              />
+            }
+          >
+            Out Cinema
+          </PanelHeader>
+          <Spinner />
+          <div style={{ marginTop: 10 }}>Centered Content</div>
+        </Panel>
+      </View>
+    );
+  }
+}
+
+<Example />;
+```

package/src/components/PanelHeader/PanelHeader.css

@@ -0,0 +1,271 @@
+.PanelHeader {
+  position: relative;
+}
+
+.PanelHeader--vis.PanelHeader--fixed::before {
+  display: block;
+  content: "";
+}
+
+.PanelHeader:not(.PanelHeader--vis):not(.PanelHeader--fixed) {
+  height: 0;
+}
+
+.PanelHeader__fixed {
+  z-index: 10;
+}
+
+.PanelHeader__in {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  white-space: nowrap;
+  position: relative;
+  background: var(--header_background);
+}
+
+.PanelHeader--trnsp .PanelHeader__in {
+  background: transparent;
+}
+
+.PanelHeader--shadow .PanelHeader__in {
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
+}
+
+.PanelHeader__left {
+  box-sizing: border-box;
+  color: var(--header_tint);
+  display: flex;
+  flex-shrink: 0;
+}
+
+.PanelHeader__content {
+  overflow: hidden;
+}
+
+.PanelHeader__content > * {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.PanelHeader__content-in {
+  color: var(--header_text);
+  font-weight: 500;
+  font-family: var(--font-display);
+}
+
+.PanelHeader__right {
+  display: flex;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  color: var(--header_tint);
+}
+
+.PanelHeader--vkapps .PanelHeader__right {
+  min-width: 90px;
+}
+
+.PanelHeader--sizeX-compact .PanelHeader__separator {
+  padding-top: 4px;
+}
+
+/**
+ * iOS
+ */
+
+.PanelHeader--ios ~ .FixedLayout--top,
+.PanelHeader--ios ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
+  top: calc(var(--panelheader_height_ios) + var(--safe-area-inset-top));
+}
+
+.PanelHeader--ios::before,
+.PanelHeader--ios .PanelHeader__in {
+  height: var(--panelheader_height_ios);
+  padding-top: var(--safe-area-inset-top);
+}
+
+.PanelHeader--ios .PanelHeader__left {
+  flex-basis: 0;
+  flex-shrink: 0;
+  flex-grow: 1;
+  opacity: 1;
+  transition: opacity 0.3s var(--ios-easing);
+  padding: 4px 0 4px 4px;
+}
+
+.PanelHeader--ios
+  .PanelHeader__left
+  .PanelHeaderButton
+  + .PanelHeaderButton--primitive {
+  margin-left: -6px;
+  padding-left: 0;
+}
+
+.PanelHeader--ios .PanelHeader__content {
+  text-align: center;
+  opacity: 1;
+  transition: opacity 0.3s var(--ios-easing);
+}
+
+.PanelHeader--ios .PanelHeader__content-in {
+  font-size: 21px;
+  line-height: var(--panelheader_height_ios);
+}
+
+.PanelHeader--ios .PanelHeader__content > * {
+  padding: 0 4px;
+}
+
+.PanelHeader--ios.PanelHeader--no-left .PanelHeader__content > * {
+  padding-left: 0;
+}
+
+.PanelHeader--ios.PanelHeader--no-left .PanelHeader__content {
+  padding-left: 8px;
+}
+
+.PanelHeader--ios.PanelHeader--no-right .PanelHeader__content > * {
+  padding-right: 0;
+}
+
+.PanelHeader--ios.PanelHeader--no-right .PanelHeader__content {
+  padding-right: 8px;
+}
+
+.PanelHeader--ios .PanelHeader__right {
+  flex-basis: 0;
+  flex-shrink: 0;
+  flex-grow: 1;
+  opacity: 1;
+  transition: opacity 0.3s var(--ios-easing);
+  padding: 4px 4px 4px 0;
+}
+
+.View--ios .View__panel--prev .PanelHeader__left,
+.View--ios .View__panel--prev .PanelHeader__right,
+.View--ios .View__panel--prev .PanelHeader__content {
+  opacity: 0;
+}
+
+/**
+ * Android
+ */
+
+@supports not (padding-top: env(safe-area-inset-top)) {
+  .PanelHeader--android,
+  .PanelHeader--vkcom {
+    --safe-area-inset-top: 0px;
+  }
+}
+
+.PanelHeader--android ~ .FixedLayout--top,
+.PanelHeader--android ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
+  top: calc(var(--panelheader_height_android) + var(--safe-area-inset-top));
+}
+
+.PanelHeader--android::before,
+.PanelHeader--android .PanelHeader__in {
+  height: var(--panelheader_height_android);
+  padding-top: var(--safe-area-inset-top);
+}
+
+.PanelHeader--android .PanelHeader__left:not(:empty) {
+  padding: 4px 0 4px 4px;
+}
+
+.PanelHeader--android .PanelHeader__content {
+  align-items: center;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.PanelHeader--android .PanelHeader__content-in {
+  font-size: 23px;
+}
+
+.PanelHeader--android .PanelHeader__content > * {
+  padding: 0 12px;
+}
+
+.PanelHeader--android .Search,
+.PanelHeader--vkcom .Search {
+  padding: 0 4px;
+}
+
+.PanelHeader--android.PanelHeader--no-left .PanelHeader__content > *,
+.PanelHeader--vkcom.PanelHeader--no-left .PanelHeader__content > * {
+  padding-left: 0;
+}
+
+.PanelHeader--android.PanelHeader--no-left .PanelHeader__content {
+  padding-left: 16px;
+}
+
+.SplitCol--spaced
+  .PanelHeader--android.PanelHeader--no-left:not(.ModalPageHeader__in)
+  .PanelHeader__content {
+  padding-left: 0;
+}
+
+.PanelHeader--android.PanelHeader--no-right .PanelHeader__content > *,
+.PanelHeader--vkcom.PanelHeader--no-right .PanelHeader__content > * {
+  padding-right: 0;
+}
+
+.PanelHeader--android.PanelHeader--no-right .PanelHeader__content {
+  padding-right: 16px;
+}
+
+.SplitCol--spaced
+  .PanelHeader--android.PanelHeader--no-right:not(.ModalPageHeader__in)
+  .PanelHeader__content {
+  padding-right: 0;
+}
+
+.PanelHeader--android .PanelHeader__right:not(:empty),
+.PanelHeader--vkcom .PanelHeader__right:not(:empty) {
+  padding: 4px 4px 4px 0;
+}
+
+/**
+ * VKCOM
+ */
+
+.PanelHeader--vkcom {
+  position: relative;
+  z-index: 10;
+}
+
+.PanelHeader--vkcom ~ .FixedLayout--top,
+.PanelHeader--vkcom ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
+  top: calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top));
+}
+
+.PanelHeader--vkcom.PanelHeader--sep .PanelHeader__in {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  box-shadow: 0 0 0 var(--thin-border) var(--input_border) inset;
+  border-bottom: none;
+}
+
+.PanelHeader--vkcom .PanelHeader__content {
+  text-align: center;
+}
+
+.PanelHeader--vkcom::before,
+.PanelHeader--vkcom .PanelHeader__in {
+  height: var(--panelheader_height_vkcom);
+  padding-top: var(--safe-area-inset-top);
+}
+
+.PanelHeader--vkcom .PanelHeader__left:not(:empty) {
+  padding: 0 0 0 4px;
+}
+
+.PanelHeader--vkcom .PanelHeader__left,
+.PanelHeader--vkcom .PanelHeader__right {
+  flex-basis: 0;
+  flex-shrink: 0;
+  flex-grow: 1;
+}