From 65187419d9898efcdd66be4c1f17e072f0ad1ade Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Tue, 28 May 2024 13:36:48 +0700
Subject: [PATCH] feat: add center (#6951)

- closed #6587
---
 .../vkui/src/components/ActionSheet/ActionSheet.stories.tsx | 2 +-
 packages/vkui/src/components/Alert/Alert.stories.tsx        | 2 +-
 packages/vkui/src/components/Epic/Epic.stories.tsx          | 5 +----
 packages/vkui/src/components/Epic/Readme.md                 | 5 +----
 packages/vkui/src/components/PanelHeaderContext/Readme.md   | 5 +----
 packages/vkui/src/components/SplitCol/SplitCol.stories.tsx  | 2 +-
 packages/vkui/src/components/SplitLayout/Readme.md          | 2 +-
 .../vkui/src/components/SplitLayout/SplitLayout.module.css  | 4 ++++
 .../vkui/src/components/SplitLayout/SplitLayout.stories.tsx | 2 +-
 packages/vkui/src/components/SplitLayout/SplitLayout.tsx    | 6 ++++++
 10 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx b/packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx
index 0ef15c1a78..968f79c2fb 100644
--- a/packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx
+++ b/packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx
@@ -47,7 +47,7 @@ export const Base: Story = {
     ) : null;
 
     return (
-      <SplitLayout style={{ justifyContent: 'center' }} popout={popout}>
+      <SplitLayout center popout={popout}>
         <SplitCol width="100%" maxWidth="560px" stretchedOnMobile autoSpaced>
           <Placeholder stretched>
             <Button getRootRef={baseToggleRef} onClick={() => setVisible(true)}>
diff --git a/packages/vkui/src/components/Alert/Alert.stories.tsx b/packages/vkui/src/components/Alert/Alert.stories.tsx
index ada35f56e2..6761c0c777 100644
--- a/packages/vkui/src/components/Alert/Alert.stories.tsx
+++ b/packages/vkui/src/components/Alert/Alert.stories.tsx
@@ -21,7 +21,7 @@ export const Playground: StoryObj<AlertProps> = {
     const popout = visible ? <Alert {...args} onClose={() => setVisible(false)} /> : null;
 
     return (
-      <SplitLayout style={{ justifyContent: 'center' }} popout={popout}>
+      <SplitLayout center popout={popout}>
         <SplitCol width="100%" maxWidth="560px" stretchedOnMobile autoSpaced>
           <Placeholder stretched>
             <Button onClick={() => setVisible(true)}>Открыть</Button>
diff --git a/packages/vkui/src/components/Epic/Epic.stories.tsx b/packages/vkui/src/components/Epic/Epic.stories.tsx
index 58ee9d4514..3d14fab748 100644
--- a/packages/vkui/src/components/Epic/Epic.stories.tsx
+++ b/packages/vkui/src/components/Epic/Epic.stories.tsx
@@ -52,10 +52,7 @@ export const Example: Story = {
     const hasHeader = platform !== 'vkcom';
 
     return (
-      <SplitLayout
-        header={hasHeader && <PanelHeader delimiter="none" />}
-        style={{ justifyContent: 'center' }}
-      >
+      <SplitLayout header={hasHeader && <PanelHeader delimiter="none" />} center>
         {viewWidth.tabletPlus && (
           <SplitCol className={viewWidth.tabletPlus.className} fixed width={280} maxWidth={280}>
             <Panel>
diff --git a/packages/vkui/src/components/Epic/Readme.md b/packages/vkui/src/components/Epic/Readme.md
index ed5f728aff..01d73a0d67 100644
--- a/packages/vkui/src/components/Epic/Readme.md
+++ b/packages/vkui/src/components/Epic/Readme.md
@@ -28,10 +28,7 @@ const Example = () => {
   const hasHeader = platform !== 'vkcom';
 
   return (
-    <SplitLayout
-      header={hasHeader && <PanelHeader delimiter="none" />}
-      style={{ justifyContent: 'center' }}
-    >
+    <SplitLayout header={hasHeader && <PanelHeader delimiter="none" />} center>
       {viewWidth.tabletPlus && (
         <SplitCol className={viewWidth.tabletPlus.className} fixed width={280} maxWidth={280}>
           <Panel>
diff --git a/packages/vkui/src/components/PanelHeaderContext/Readme.md b/packages/vkui/src/components/PanelHeaderContext/Readme.md
index 98562c27fa..37cf1b3358 100644
--- a/packages/vkui/src/components/PanelHeaderContext/Readme.md
+++ b/packages/vkui/src/components/PanelHeaderContext/Readme.md
@@ -16,10 +16,7 @@ const Example = () => {
   const hasHeader = platform !== 'vkcom';
 
   return (
-    <SplitLayout
-      style={{ justifyContent: 'center' }}
-      header={hasHeader && <PanelHeader delimiter="none" />}
-    >
+    <SplitLayout center header={hasHeader && <PanelHeader delimiter="none" />}>
       <SplitCol width="100%" maxWidth="560px" stretchedOnMobile autoSpaced>
         <View activePanel="context2">
           <Panel id="context2">
diff --git a/packages/vkui/src/components/SplitCol/SplitCol.stories.tsx b/packages/vkui/src/components/SplitCol/SplitCol.stories.tsx
index 1b0be30470..edc366580a 100644
--- a/packages/vkui/src/components/SplitCol/SplitCol.stories.tsx
+++ b/packages/vkui/src/components/SplitCol/SplitCol.stories.tsx
@@ -32,7 +32,7 @@ export const Playground: Story = {
     const [panel, setPanel] = React.useState(panels[0]);
 
     return (
-      <SplitLayout style={{ justifyContent: 'center' }}>
+      <SplitLayout center>
         <SplitCol {...args}>
           <View activePanel={panel}>
             <Panel id={panels[0]}>
diff --git a/packages/vkui/src/components/SplitLayout/Readme.md b/packages/vkui/src/components/SplitLayout/Readme.md
index 69e54ac06d..a5acfd3004 100644
--- a/packages/vkui/src/components/SplitLayout/Readme.md
+++ b/packages/vkui/src/components/SplitLayout/Readme.md
@@ -38,7 +38,7 @@ const Example = () => {
 
   return (
     <SplitLayout
-      style={{ justifyContent: 'center' }}
+      center
       header={!isVKCOM && <PanelHeader delimiter="none" />}
       popout={popout}
       modal={modalRoot}
diff --git a/packages/vkui/src/components/SplitLayout/SplitLayout.module.css b/packages/vkui/src/components/SplitLayout/SplitLayout.module.css
index 663f7b2806..64042fa662 100644
--- a/packages/vkui/src/components/SplitLayout/SplitLayout.module.css
+++ b/packages/vkui/src/components/SplitLayout/SplitLayout.module.css
@@ -25,3 +25,7 @@
     -1 * (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
   );
 }
+
+.SplitLayout--center {
+  justify-content: center;
+}
diff --git a/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx b/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx
index ad59c39538..d8d3fa7c52 100644
--- a/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx
+++ b/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx
@@ -73,7 +73,7 @@ export const Example: Story = {
 
     return (
       <SplitLayout
-        style={{ justifyContent: 'center' }}
+        center
         header={!isVKCOM && <PanelHeader delimiter="none" />}
         popout={popout}
         modal={modalRoot}
diff --git a/packages/vkui/src/components/SplitLayout/SplitLayout.tsx b/packages/vkui/src/components/SplitLayout/SplitLayout.tsx
index 6de1fa02a5..80bda4939d 100644
--- a/packages/vkui/src/components/SplitLayout/SplitLayout.tsx
+++ b/packages/vkui/src/components/SplitLayout/SplitLayout.tsx
@@ -17,6 +17,10 @@ export interface SplitLayoutProps
    */
   modal?: React.ReactNode;
   header?: React.ReactNode;
+  /**
+   * Центрирует контент.
+   */
+  center?: boolean;
 }
 
 /**
@@ -30,6 +34,7 @@ export const SplitLayout = ({
   getRootRef,
   getRef,
   className,
+  center,
   ...restProps
 }: SplitLayoutProps) => {
   const platform = usePlatform();
@@ -39,6 +44,7 @@ export const SplitLayout = ({
       className={classNames(
         styles['SplitLayout'],
         platform === 'ios' && styles['SplitLayout--ios'],
+        center && styles['SplitLayout--center'],
       )}
       popout={popout}
       modal={modal}