diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.module.css b/packages/vkui/src/components/ActionSheet/ActionSheet.module.css index 3e5206968a..da0443e81f 100644 --- a/packages/vkui/src/components/ActionSheet/ActionSheet.module.css +++ b/packages/vkui/src/components/ActionSheet/ActionSheet.module.css @@ -91,7 +91,7 @@ * Desktop version */ -.ActionSheet--desktop { +.ActionSheet--menu { width: auto; height: auto; animation: none; @@ -99,7 +99,7 @@ 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 index 1cffffadbb..aa1dabff21 100644 --- a/packages/vkui/src/components/ActionSheet/ActionSheet.test.tsx +++ b/packages/vkui/src/components/ActionSheet/ActionSheet.test.tsx @@ -25,10 +25,18 @@ describe('ActionSheet', () => { ); + const ActionSheetMenu = (props: Partial) => ( + + ); + const ActionSheetSheet = (props: Partial) => ( + + ); describe.each([ ['desktop', ActionSheetDesktop], ['mobile', ActionSheetMobile], + ['menu', ActionSheetMenu], + ['sheet', ActionSheetSheet], ])('%s', (_name, ActionSheet) => { baselineComponent((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 index 7e203d804d..17b4d276c6 100644 --- 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 = ( @@ -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} >
{(header || text) && ( @@ -137,7 +141,7 @@ export const ActionSheet = ({ )} {children}
- {platform === Platform.IOS && !isDesktop && ( + {platform === Platform.IOS && mode === 'sheet' && (
{iosCloseItem ?? }
@@ -146,7 +150,7 @@ export const ActionSheet = ({
); - 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 index 7069edd602..dcd59c8eee 100644 --- a/packages/vkui/src/components/ActionSheet/ActionSheetContext.ts +++ b/packages/vkui/src/components/ActionSheet/ActionSheetContext.ts @@ -11,7 +11,7 @@ export type ItemClickHandler = (options: { export type ActionSheetContextType = { onItemClick?: ItemClickHandler; - isDesktop?: boolean; + mode?: 'sheet' | 'menu'; }; export const ActionSheetContext = React.createContext>({}); diff --git a/packages/vkui/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx b/packages/vkui/src/components/ActionSheet/ActionSheetDropdownMenu.tsx similarity index 97% rename from packages/vkui/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx rename to packages/vkui/src/components/ActionSheet/ActionSheetDropdownMenu.tsx index a50d36aadc..054384adaf 100644 --- a/packages/vkui/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx +++ b/packages/vkui/src/components/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/packages/vkui/src/components/ActionSheet/ActionSheetDropdown.tsx b/packages/vkui/src/components/ActionSheet/ActionSheetDropdownSheet.tsx similarity index 96% rename from packages/vkui/src/components/ActionSheet/ActionSheetDropdown.tsx rename to packages/vkui/src/components/ActionSheet/ActionSheetDropdownSheet.tsx index 61101b77e6..262fd2b24d 100644 --- a/packages/vkui/src/components/ActionSheet/ActionSheetDropdown.tsx +++ b/packages/vkui/src/components/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 index b5e51c505c..faf14ed491 100644 --- 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 index 03ed3d7c4f..c15a930867 100644 --- 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>(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, )}