feat(ActionSheet): add mode (#5829)

- closed #906
VKCOM · Sep 19, 2023 · 1890a41 · 1890a41
1 parent ad73345
commit 1890a41
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 23 deletions.
diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.module.css b/packages/vkui/src/components/ActionSheet/ActionSheet.module.css
@@ -91,15 +91,15 @@
  * Desktop version
  */
 
-.ActionSheet--desktop {
+.ActionSheet--menu {
   width: auto;
   height: auto;
   animation: none;
   padding: 0;
   max-width: 100%;
 }
 
-.ActionSheet--desktop.ActionSheet--ios .ActionSheet__content-wrapper {
+.ActionSheet--menu.ActionSheet--ios .ActionSheet__content-wrapper {
   border-radius: 14px;
   padding: 0;
 }

diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.test.tsx b/packages/vkui/src/components/ActionSheet/ActionSheet.test.tsx
@@ -25,10 +25,18 @@ describe('ActionSheet', () => {
       <ActionSheet toggleRef={toggle} onClose={jest.fn()} {...props} />
     </AdaptivityProvider>
   );
+  const ActionSheetMenu = (props: Partial<ActionSheetProps>) => (
+    <ActionSheet mode="menu" toggleRef={toggle} onClose={jest.fn()} {...props} />
+  );
+  const ActionSheetSheet = (props: Partial<ActionSheetProps>) => (
+    <ActionSheet mode="sheet" toggleRef={toggle} onClose={jest.fn()} {...props} />
+  );
 
   describe.each([
     ['desktop', ActionSheetDesktop],
     ['mobile', ActionSheetMobile],
+    ['menu', ActionSheetMenu],
+    ['sheet', ActionSheetSheet],
   ])('%s', (_name, ActionSheet) => {
     baselineComponent((props) => <ActionSheet {...props} />, {
       // TODO [a11y]: "Exceeded timeout of 5000 ms for a test.

diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.tsx b/packages/vkui/src/components/ActionSheet/ActionSheet.tsx
@@ -11,8 +11,8 @@ import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';
 import { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';
-import { ActionSheetDropdown } from './ActionSheetDropdown';
-import { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';
+import { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';
+import { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';
 import { SharedDropdownProps } from './types';
 import styles from './ActionSheet.module.css';
 
@@ -38,6 +38,7 @@ export interface ActionSheetProps
    * Только мобильный iOS.
    */
   iosCloseItem?: React.ReactNode;
+  mode?: 'sheet' | 'menu';
 }
 
 /**
@@ -53,6 +54,7 @@ export const ActionSheet = ({
   popupDirection,
   popupOffsetDistance,
   placement,
+  mode: modeProp,
   ...restProps
 }: ActionSheetProps) => {
   const platform = usePlatform();
@@ -67,12 +69,13 @@ export const ActionSheet = ({
   };
 
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
+  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');
 
-  useScrollLock(!isDesktop);
+  useScrollLock(mode === 'sheet');
 
   let timeout = platform === Platform.IOS ? 300 : 200;
 
-  if (isDesktop) {
+  if (mode === 'menu') {
     timeout = 0;
   }
 
@@ -99,9 +102,9 @@ export const ActionSheet = ({
       },
     [],
   );
-  const contextValue = useObjectMemo({ onItemClick, isDesktop });
+  const contextValue = useObjectMemo({ onItemClick, mode });
 
-  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;
+  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;
 
   if (process.env.NODE_ENV === 'development' && popupDirection) {
     // TODO [>=6]: popupDirection
@@ -110,9 +113,10 @@ export const ActionSheet = ({
 
   popupDirection = popupDirection !== undefined ? popupDirection : 'bottom';
 
-  const dropdownProps = isDesktop
-    ? Object.assign(restProps, { popupOffsetDistance, popupDirection, placement })
-    : restProps;
+  const dropdownProps =
+    mode === 'menu'
+      ? Object.assign(restProps, { popupOffsetDistance, popupDirection, placement })
+      : restProps;
 
   const actionSheet = (
     <ActionSheetContext.Provider value={contextValue}>
@@ -121,8 +125,8 @@ export const ActionSheet = ({
         timeout={timeout}
         {...dropdownProps}
         onClose={onClose}
-        className={isDesktop ? className : undefined}
-        style={isDesktop ? style : undefined}
+        className={mode === 'menu' ? className : undefined}
+        style={mode === 'menu' ? style : undefined}
       >
         <div className={styles['ActionSheet__content-wrapper']}>
           {(header || text) && (
@@ -137,7 +141,7 @@ export const ActionSheet = ({
           )}
           {children}
         </div>
-        {platform === Platform.IOS && !isDesktop && (
+        {platform === Platform.IOS && mode === 'sheet' && (
           <div className={styles['ActionSheet__close-item-wrapper--ios']}>
             {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}
           </div>
@@ -146,7 +150,7 @@ export const ActionSheet = ({
     </ActionSheetContext.Provider>
   );
 
-  if (isDesktop) {
+  if (mode === 'menu') {
     return actionSheet;
   }
 

diff --git a/packages/vkui/src/components/ActionSheet/ActionSheetContext.ts b/packages/vkui/src/components/ActionSheet/ActionSheetContext.ts
@@ -11,7 +11,7 @@ export type ItemClickHandler<T extends Element = Element> = (options: {
 
 export type ActionSheetContextType<T extends Element = Element> = {
   onItemClick?: ItemClickHandler<T>;
-  isDesktop?: boolean;
+  mode?: 'sheet' | 'menu';
 };
 
 export const ActionSheetContext = React.createContext<ActionSheetContextType<any>>({});
diff --git a/...ctionSheet/ActionSheetDropdownDesktop.tsx → ...s/ActionSheet/ActionSheetDropdownMenu.tsx b/...ctionSheet/ActionSheetDropdownDesktop.tsx → ...s/ActionSheet/ActionSheetDropdownMenu.tsx
@@ -19,7 +19,7 @@ function getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefine
   return ref && 'current' in ref ? ref.current : ref;
 }
 
-export const ActionSheetDropdownDesktop = ({
+export const ActionSheetDropdownMenu = ({
   children,
   toggleRef,
   closing,
@@ -83,7 +83,7 @@ export const ActionSheetDropdownDesktop = ({
       className={classNames(
         styles['ActionSheet'],
         platform === Platform.IOS && styles['ActionSheet--ios'],
-        styles['ActionSheet--desktop'],
+        styles['ActionSheet--menu'],
         sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],
         className,
       )}

diff --git a/...nents/ActionSheet/ActionSheetDropdown.tsx → .../ActionSheet/ActionSheetDropdownSheet.tsx b/...nents/ActionSheet/ActionSheetDropdown.tsx → .../ActionSheet/ActionSheetDropdownSheet.tsx
@@ -15,7 +15,7 @@ export type ActionSheetDropdownProps = Omit<
   'popupDirection' | 'popupOffsetDistance' | 'placement'
 >;
 
-export const ActionSheetDropdown = ({
+export const ActionSheetDropdownSheet = ({
   children,
   closing,
   // these 2 props are only omitted - ActionSheetDesktop compat

diff --git a/packages/vkui/src/components/ActionSheetItem/ActionSheetItem.module.css b/packages/vkui/src/components/ActionSheetItem/ActionSheetItem.module.css
@@ -67,7 +67,7 @@
   margin-right: 16px;
 }
 
-.ActionSheetItem--desktop .ActionSheetItem__before {
+.ActionSheetItem--menu .ActionSheetItem__before {
   margin-right: 12px;
 }
 
@@ -186,7 +186,7 @@
  * Desktop
  */
 
-.ActionSheetItem--desktop {
+.ActionSheetItem--menu {
   width: auto;
   cursor: pointer;
 }

diff --git a/packages/vkui/src/components/ActionSheetItem/ActionSheetItem.tsx b/packages/vkui/src/components/ActionSheetItem/ActionSheetItem.tsx
@@ -70,7 +70,7 @@ const ActionSheetItem = ({
   ...restProps
 }: ActionSheetItemProps) => {
   const platform = usePlatform();
-  const { onItemClick = () => noop, isDesktop } =
+  const { onItemClick = () => noop, mode: actionSheetMode } =
     React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);
   const { sizeY } = useAdaptivityWithJSMediaQueries();
 
@@ -109,7 +109,7 @@ const ActionSheetItem = ({
         mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],
         sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],
         isRich && styles['ActionSheetItem--rich'],
-        isDesktop && styles['ActionSheetItem--desktop'],
+        actionSheetMode === 'menu' && styles['ActionSheetItem--menu'],
         selectable && styles['ActionSheetItem--selectable'],
         className,
       )}