@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

package/src/shared/ui/templates/modal-container/modal-container.styles.ts

@@ -0,0 +1,121 @@
+import { Platform } from '@mediacubeco/base-react-native/helpers'
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useThemeMode, withTransparency } from '../../../lib'
+
+/**
+ * Запас между верхом окна (за вычетом safe-area) и максимальной высотой листа. На iOS 26
+ * лист, чей детент приближается к максимальному, «пристыковывается» к краям экрана с
+ * собственной нативной геометрией, которую JS не знает, — из-за этого враппер расходится с
+ * листом (обрезка контента, мёртвая полоса снизу). Запас держит лист ниже порога стыковки,
+ * поэтому он всегда плавающий и точно обнимает враппер. На Android лист всегда прижат к
+ * краям, стыковки нет — запас минимальный.
+ */
+const SHEET_TOP_CLEARANCE = Platform.OS === 'ios' ? 120 : 40
+
+/**
+ * Зазор между safe-area и верхом листа, когда система сдвигает лист из-под клавиатуры до
+ * упора: выше safe-area + этот отступ лист не поднимается. Через него считается перекрытие
+ * листа клавиатурой для подъёма футера (`footerLiftStyle`). На iOS сдвигает UIKit, стоп-линия
+ * замерена на iOS 26; на Android react-native-screens транслирует лист, пока его верх не
+ * упрётся ровно в safe-area — запаса нет.
+ */
+const SHEET_KEYBOARD_TOP_MARGIN = Platform.OS === 'ios' ? 10 : 0
+
+/**
+ * Визуальная логика контейнера модалки. Лист презентится с `fitToContents`, поэтому его
+ * высота равна натуральной высоте контента. Шапка и футер — абсолютные оверлеи с
+ * прогрессивным блюром: контент скроллится под ними и плавно растворяется у краёв. Тело
+ * отступает от краёв на высоту оверлеев (`paddingTop`/`paddingBottom` считаются в хуке по
+ * замеренным высотам), поэтому первый и последний элементы не прячутся под шапкой/футером.
+ * Пока контент помещается — тело облегает его; когда выше `MAX_SHEET_HEIGHT`, враппер
+ * фиксируется на этой высоте (`wrapperCapped`) и тело начинает скроллиться. Нижний отступ —
+ * из сырого safe-area (`useSafeAreaInsets`), без таб-бар-логики `useNavigationSafeArea`. Клавиатура на
+ * высоту листа НЕ влияет: смена детента `fitToContents` во время клавиатурной анимации
+ * сбивает собственный сдвиг листа UIKit (лист «переоткрывается»), поэтому детент стабилен,
+ * лист двигает сам UIKit, а футер приподнимается внутри листа (см. `useModalContainerProps`).
+ * Поверх блюра шапки и футера кладётся градиент цвета фона
+ * (`headerGradientColorList`/`footerGradientColorList`): контент у кромки растворяется
+ * полностью, и жёсткой линии обрезки не видно.
+ */
+const useModalContainerStyles = () => {
+  const { COLORS, SIZES, TRANSPARENCIES } = useThemeMode()
+  const { top, bottom } = useSafeAreaInsets()
+  const { height: WINDOW_HEIGHT } = useWindowDimensions()
+
+  // Плавающий iOS-лист сам держится над home indicator — хватает небольшого отступа под
+  // скруглённые края; прижатый Android-лист учитывает системный inset вручную.
+  const BOTTOM = Platform.OS === 'ios' ? SIZES['2XL'] : Math.max(bottom, SIZES['2XL'])
+  const MAX_SHEET_HEIGHT = WINDOW_HEIGHT - top - SHEET_TOP_CLEARANCE
+  // Минимальный верх листа при клавиатурном сдвиге UIKit — точка отсчёта перекрытия.
+  const SHEET_KEYBOARD_TOP = top + SHEET_KEYBOARD_TOP_MARGIN
+  // Верхний отступ контента, когда шапки нет (с шапкой отступ равен её замеренной высоте).
+  const TOP = SIZES['4XL']
+
+  const GRADIENT_VISIBLE = withTransparency(COLORS.BACKGROUND.BASE, TRANSPARENCIES.VISIBLE)
+  const GRADIENT_INVISIBLE = withTransparency(COLORS.BACKGROUND.BASE, TRANSPARENCIES.INVISIBLE)
+
+  const headerGradientColorList = [GRADIENT_VISIBLE, GRADIENT_INVISIBLE] as const
+  const footerGradientColorList = [GRADIENT_INVISIBLE, GRADIENT_VISIBLE] as const
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      maxHeight: MAX_SHEET_HEIGHT,
+      overflow: 'hidden',
+      backgroundColor: COLORS.BACKGROUND.BASE,
+    },
+    wrapperCapped: {
+      height: MAX_SHEET_HEIGHT,
+    },
+    body: {
+      flex: 1,
+    },
+    content: {
+      gap: SIZES['3XL'],
+      paddingHorizontal: SIZES['4XL'],
+    },
+    header: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      zIndex: 2,
+      gap: SIZES['3XL'],
+      paddingTop: SIZES['4XL'],
+      paddingBottom: SIZES['3XL'],
+      paddingHorizontal: SIZES['4XL'],
+    },
+    footerShell: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 2,
+    },
+    footer: {
+      gap: SIZES['2XL'],
+      paddingTop: SIZES['3XL'],
+      paddingBottom: BOTTOM,
+      paddingHorizontal: SIZES['4XL'],
+    },
+    blur: {
+      ...StyleSheet.absoluteFill,
+    },
+    scrollGuard: {
+      width: 0,
+      height: 0,
+    },
+  })
+
+  return {
+    styles,
+    headerGradientColorList,
+    footerGradientColorList,
+    MAX_SHEET_HEIGHT,
+    SHEET_KEYBOARD_TOP,
+    TOP,
+    BOTTOM,
+  }
+}
+
+export { useModalContainerStyles }

package/src/shared/ui/templates/modal-container/modal-container.types.ts

@@ -0,0 +1,69 @@
+import { type ReactNode, type Ref } from 'react'
+import {
+  type FlatList,
+  type FlatListProps,
+  type ListRenderItemInfo,
+  type ScrollView,
+  type ScrollViewProps,
+  type SectionList,
+  type SectionListData,
+  type SectionListProps,
+  type SectionListRenderItemInfo,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+
+/** Нативные пропсы, которыми контейнер управляет сам: стиль, паддинги и замер контента. */
+type ModalContainerExcludeNativeProps<
+  Props extends ScrollViewProps | FlatListProps<unknown> | SectionListProps<unknown>,
+> = Omit<
+  Props,
+  'style' | 'contentContainerStyle' | 'onContentSizeChange' | 'refreshControl' | 'refreshing'
+>
+
+/** Общие слоты и стили слоёв для всех вариантов контейнера модалки. */
+type ModalContainerProps<Component extends ScrollView | FlatList | SectionList> = {
+  ref?: Ref<Component>
+  wrapperStyle?: StyleProp<ViewStyle>
+  outerStyle?: StyleProp<ViewStyle>
+  innerStyle?: StyleProp<ViewStyle>
+  header?: ReactNode
+  footer?: ReactNode
+}
+
+/** Пропсы скролл-варианта: контент передаётся как children. */
+type ModalContainerScrollProps = ModalContainerExcludeNativeProps<ScrollViewProps> &
+  ModalContainerProps<ScrollView> & {}
+
+/** Пропсы списочного варианта поверх FlatList. */
+type ModalContainerListProps<Item = unknown> = ModalContainerExcludeNativeProps<
+  FlatListProps<Item>
+> &
+  ModalContainerProps<FlatList<Item>> & {}
+
+/** Пропсы секшен-варианта поверх SectionList. */
+type ModalContainerSectionListProps<Item = unknown> = ModalContainerExcludeNativeProps<
+  SectionListProps<Item>
+> &
+  ModalContainerProps<SectionList<Item>> & {}
+
+/** Инфо элемента для renderItem списочного варианта. */
+type ModalContainerListRenderItemInfo<Item = unknown> = ListRenderItemInfo<Item>
+
+/** Инфо элемента для renderItem секшен-варианта. */
+type ModalContainerSectionListRenderItemInfo<Item = unknown> = SectionListRenderItemInfo<Item>
+
+/** Инфо секции для renderSectionHeader секшен-варианта. */
+type ModalContainerSectionListRenderHeaderInfo<Item = unknown> = {
+  section: SectionListData<Item>
+}
+
+export type {
+  ModalContainerProps,
+  ModalContainerScrollProps,
+  ModalContainerListProps,
+  ModalContainerSectionListProps,
+  ModalContainerListRenderItemInfo,
+  ModalContainerSectionListRenderItemInfo,
+  ModalContainerSectionListRenderHeaderInfo,
+}

package/src/shared/ui/templates/screen-container/index.ts

@@ -1,5 +1,5 @@
-export { default as ScreenContainerScroll } from './screen-container-scroll'
 export { default as ScreenContainerList } from './screen-container-list'
+export { default as ScreenContainerScroll } from './screen-container-scroll'
 export { default as ScreenContainerSectionList } from './screen-container-section-list'
 export type {
   ScreenContainerListProps,

package/src/shared/ui/templates/screen-container/screen-container-list.tsx

@@ -3,19 +3,37 @@ import { useScreenContainerProps } from './screen-container.hooks'
 import { type ScreenContainerListProps } from './screen-container.types'
 
 const ScreenContainerList = <Item,>(props: ScreenContainerListProps<Item>) => {
-  const { reference, header, footer, wrapperStyle, outerStyle, innerStyle, ...flatListProps } =
-    useScreenContainerProps<ScreenContainerListProps<Item>>(props)
+  const {
+    ref,
+    overlay,
+    blurTop,
+    blurBottom,
+    screenHeader,
+    header,
+    footer,
+    wrapperStyle,
+    bodyStyle,
+    outerStyle,
+    innerStyle,
+    ...flatListProps
+  } = useScreenContainerProps<ScreenContainerListProps<Item>>(props)
 
   return (
     <View style={wrapperStyle}>
-      {header}
-      <FlatList
-        ref={reference}
-        style={outerStyle}
-        contentContainerStyle={innerStyle}
-        {...flatListProps}
-      />
-      {footer}
+      {overlay}
+      <View style={bodyStyle}>
+        {blurTop}
+        {screenHeader}
+        {header}
+        <FlatList
+          ref={ref}
+          style={outerStyle}
+          contentContainerStyle={innerStyle}
+          {...flatListProps}
+        />
+        {footer}
+        {blurBottom}
+      </View>
     </View>
   )
 }

package/src/shared/ui/templates/screen-container/screen-container-scroll.tsx

@@ -3,19 +3,37 @@ import { useScreenContainerProps } from './screen-container.hooks'
 import { type ScreenContainerScrollProps } from './screen-container.types'
 
 const ScreenContainerScroll = (props: ScreenContainerScrollProps) => {
-  const { reference, header, footer, wrapperStyle, outerStyle, innerStyle, ...scrollViewProps } =
-    useScreenContainerProps<ScreenContainerScrollProps>(props)
+  const {
+    ref,
+    overlay,
+    blurTop,
+    blurBottom,
+    screenHeader,
+    header,
+    footer,
+    wrapperStyle,
+    bodyStyle,
+    outerStyle,
+    innerStyle,
+    ...scrollViewProps
+  } = useScreenContainerProps<ScreenContainerScrollProps>(props)
 
   return (
     <View style={wrapperStyle}>
-      {header}
-      <ScrollView
-        ref={reference}
-        style={outerStyle}
-        contentContainerStyle={innerStyle}
-        {...scrollViewProps}
-      />
-      {footer}
+      {overlay}
+      <View style={bodyStyle}>
+        {blurTop}
+        {screenHeader}
+        {header}
+        <ScrollView
+          ref={ref}
+          style={outerStyle}
+          contentContainerStyle={innerStyle}
+          {...scrollViewProps}
+        />
+        {footer}
+        {blurBottom}
+      </View>
     </View>
   )
 }

package/src/shared/ui/templates/screen-container/screen-container-section-list.tsx

@@ -3,20 +3,38 @@ import { useScreenContainerProps } from './screen-container.hooks'
 import { type ScreenContainerSectionListProps } from './screen-container.types'
 
 const ScreenContainerSectionList = <Item,>(props: ScreenContainerSectionListProps<Item>) => {
-  const { reference, header, footer, wrapperStyle, outerStyle, innerStyle, ...sectionListProps } =
-    useScreenContainerProps<ScreenContainerSectionListProps<Item>>(props)
+  const {
+    ref,
+    overlay,
+    blurTop,
+    blurBottom,
+    screenHeader,
+    header,
+    footer,
+    wrapperStyle,
+    bodyStyle,
+    outerStyle,
+    innerStyle,
+    ...sectionListProps
+  } = useScreenContainerProps<ScreenContainerSectionListProps<Item>>(props)
 
   return (
     <View style={wrapperStyle}>
-      {header}
-      <SectionList
-        ref={reference}
-        style={outerStyle}
-        contentContainerStyle={innerStyle}
-        stickySectionHeadersEnabled={false}
-        {...sectionListProps}
-      />
-      {footer}
+      {overlay}
+      <View style={bodyStyle}>
+        {blurTop}
+        {screenHeader}
+        {header}
+        <SectionList
+          ref={ref}
+          style={outerStyle}
+          contentContainerStyle={innerStyle}
+          stickySectionHeadersEnabled={false}
+          {...sectionListProps}
+        />
+        {footer}
+        {blurBottom}
+      </View>
     </View>
   )
 }

package/src/shared/ui/templates/screen-container/screen-container.hooks.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { View } from 'react-native'
+import { BlurProgress } from '../../atoms'
 import { KeyboardArea, RefreshControl } from '../../molecules'
 import { useScreenContainerStyles } from './screen-container.styles'
 import {
@@ -22,49 +23,119 @@ const useScreenContainerProps = <
   // @ts-ignore
   refreshing,
   // internal
+  variant = 'base',
+  withScroll = true,
+  withBlurTop = true,
+  withBlurBottom = true,
+  withAreaTop = true,
+  withAreaBottom = true,
+  withIndentTop = true,
+  withIndentBottom = true,
   withOverflowTop = false,
   withOverflowBottom = false,
   // native
+  overlay: initOverlay,
+  screenHeader: initScreenHeader,
   header: initHeader,
   footer: initFooter,
   wrapperStyle,
+  bodyStyle,
   outerStyle,
   innerStyle,
   onRefresh,
   ...props
 }: Props) => {
-  const { styles } = useScreenContainerStyles({
-    withOverflowTop: withOverflowTop || !!initHeader,
-    withOverflowBottom: withOverflowBottom || !!initFooter,
+  const withHeader = !!initHeader
+  const withFooter = !!initFooter
+
+  const { OFFSET, styles, stylesByVariant } = useScreenContainerStyles({
+    withScreenHeader: !!initScreenHeader,
+    withScreenFooter: false,
+    withHeader,
+    withFooter,
+    withAreaTop,
+    withAreaBottom,
+    withIndentTop,
+    withIndentBottom,
+    withOverflowTop,
+    withOverflowBottom,
   })
 
+  const overlay = useMemo(() => {
+    return <View style={styles.overlay}>{initOverlay}</View>
+  }, [styles.overlay, initOverlay])
+
+  const screenHeader = useMemo(() => {
+    return <View style={styles.screenHeader}>{initScreenHeader}</View>
+  }, [styles.screenHeader, initScreenHeader])
+
+  const blurTop = useMemo(() => {
+    return (
+      withBlurTop &&
+      !withHeader && <BlurProgress direction={'blurredTopClearBottom'} style={styles.blurTop} />
+    )
+  }, [styles.blurTop, withBlurTop, withHeader])
+
+  const blurBottom = useMemo(() => {
+    return (
+      withBlurBottom &&
+      !withFooter && <BlurProgress direction={'blurredBottomClearTop'} style={styles.blurBottom} />
+    )
+  }, [styles.blurBottom, withBlurBottom, withFooter])
+
+  const headerBlur = useMemo(() => {
+    return (
+      withBlurTop &&
+      withHeader && <BlurProgress direction={'blurredTopClearBottom'} style={styles.headerBlur} />
+    )
+  }, [styles.headerBlur, withBlurTop, withHeader])
+
+  const footerBlur = useMemo(() => {
+    return (
+      withBlurBottom &&
+      withFooter && <BlurProgress direction={'blurredBottomClearTop'} style={styles.footerBlur} />
+    )
+  }, [styles.footerBlur, withBlurBottom, withFooter])
+
   const header = useMemo(() => {
-    return <View style={styles.header}>{initHeader}</View>
-  }, [styles.header, initHeader])
+    return (
+      <View style={styles.header}>
+        {headerBlur}
+        {initHeader}
+      </View>
+    )
+  }, [styles.header, initHeader, headerBlur])
 
   const footer = useMemo(() => {
     return (
       <View style={styles.footer}>
+        {footerBlur}
         {initFooter}
         <KeyboardArea />
       </View>
     )
-  }, [styles.footer, initFooter])
+  }, [styles.footer, initFooter, footerBlur])
 
   return {
     ...props,
+    overlay,
+    screenHeader,
+    blurTop,
+    blurBottom,
     header,
     footer,
-    wrapperStyle: [styles.wrapper, wrapperStyle],
+    wrapperStyle: [styles.wrapper, stylesByVariant[variant], wrapperStyle],
+    bodyStyle: [styles.body, bodyStyle],
     outerStyle: [styles.outer, outerStyle],
     innerStyle: [styles.inner, innerStyle],
+    scrollEnabled: withScroll,
     showsVerticalScrollIndicator: false,
     showsHorizontalScrollIndicator: false,
     keyboardDismissMode: 'interactive',
     keyboardShouldPersistTaps: 'handled',
     contentInsetAdjustmentBehavior: 'never',
     refreshControl: onRefresh ? (
-      <RefreshControl withOffset={!withOverflowTop && !initHeader} onRefresh={onRefresh} />
+      <RefreshControl offset={OFFSET} onRefresh={onRefresh} />
     ) : undefined,
   }
 }

package/src/shared/ui/templates/screen-container/screen-container.styles.ts

@@ -1,21 +1,53 @@
 import { StyleSheet } from 'react-native'
-import { useSafeArea } from '../../../hooks'
-import { useThemeMode } from '../../../lib'
+import { useNavigationSafeArea, useThemeMode } from '../../../lib'
 import { type ScreenContainerStylesConfig } from './screen-container.types'
 
+// TODO: Может быть добавить блюр на with overflow true. Половину Intent Забрать уврапера и дать для инера.
 const useScreenContainerStyles = ({
+  withScreenHeader,
+  withScreenFooter,
+  withHeader,
+  withFooter,
+  withAreaTop,
+  withAreaBottom,
+  withIndentTop,
+  withIndentBottom,
   withOverflowTop,
   withOverflowBottom,
 }: ScreenContainerStylesConfig) => {
-  const { COLORS } = useThemeMode()
-  const { TOP, BOTTOM } = useSafeArea()
+  const withTop = withOverflowTop || withHeader
+  const withBottom = withOverflowBottom || withFooter
+
+  const { COLORS, SIZES } = useThemeMode()
+  const { TOP, BOTTOM, HEADER, FOOTER } = useNavigationSafeArea()
+
+  const OFFSET = withTop
+    ? 0
+    : (withScreenHeader ? HEADER : 0) + (withAreaTop ? TOP : 0) + (withIndentTop ? SIZES['2XL'] : 0)
+
+  const TOP_AREA = withAreaTop ? TOP : 0
+  const BOTTOM_AREA = withAreaBottom ? BOTTOM : 0
+
+  const TOP_INSET = withScreenHeader ? TOP_AREA + HEADER : TOP_AREA
+  const BOTTOM_INSET = withScreenFooter ? BOTTOM_AREA + FOOTER : BOTTOM_AREA
+
+  const WRAPPER_INTEND_TOP = withIndentTop ? SIZES['2XL'] : 0
+  const WRAPPER_INTEND_BOTTOM = withIndentBottom ? SIZES['2XL'] : 0
+
+  const INNER_INTEND_TOP = withHeader ? SIZES['L'] : 0
+  const INNER_INTEND_BOTTOM = withFooter ? SIZES['L'] : 0
+
+  const INNER_AREA_TOP = withIndentTop ? SIZES['2XL'] : 0
+  const INNER_AREA_BOTTOM = withIndentBottom ? SIZES['2XL'] : 0
 
   const styles = StyleSheet.create({
     wrapper: {
       flex: 1,
-      paddingTop: withOverflowTop ? TOP + 16 : 0,
-      paddingBottom: withOverflowBottom ? BOTTOM + 16 : 0,
-      backgroundColor: COLORS.FILL.BASE,
+    },
+    body: {
+      flex: 1,
+      paddingTop: withTop ? TOP_INSET + WRAPPER_INTEND_TOP : 0,
+      paddingBottom: withBottom ? BOTTOM_INSET + WRAPPER_INTEND_BOTTOM : 0,
     },
     outer: {
       zIndex: 1,
@@ -23,23 +55,81 @@ const useScreenContainerStyles = ({
     },
     inner: {
       flexGrow: 1,
-      paddingTop: withOverflowTop ? 8 : TOP + 16,
-      paddingBottom: withOverflowBottom ? 8 : BOTTOM + 16,
-      paddingHorizontal: 16,
+      paddingTop: withTop ? INNER_INTEND_TOP : TOP_INSET + INNER_AREA_TOP,
+      paddingBottom: withBottom ? INNER_INTEND_BOTTOM : BOTTOM_INSET + INNER_AREA_BOTTOM,
+      paddingHorizontal: SIZES['2XL'],
+    },
+    overlay: {
+      position: 'absolute',
+      zIndex: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    },
+    screenHeader: {
+      zIndex: 2,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      paddingHorizontal: SIZES['2XL'],
+    },
+    screenFooter: {},
+    blurTop: {
+      zIndex: 2,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      height: TOP_INSET + INNER_AREA_TOP,
+    },
+    blurBottom: {
+      zIndex: 2,
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: BOTTOM_INSET + INNER_AREA_BOTTOM,
     },
     header: {
       zIndex: 2,
-      paddingBottom: withOverflowTop ? 8 : 0,
-      paddingHorizontal: 16,
+      paddingBottom: withHeader ? SIZES['L'] : 0,
+      paddingHorizontal: SIZES['2XL'],
     },
     footer: {
       zIndex: 2,
-      paddingTop: withOverflowBottom ? 8 : 0,
-      paddingHorizontal: 16,
+      paddingTop: withFooter ? SIZES['L'] : 0,
+      paddingHorizontal: SIZES['2XL'],
+    },
+    headerBlur: {
+      zIndex: 2,
+      position: 'absolute',
+      top: SIZES['MAX'],
+      left: 0,
+      right: 0,
+      height: INNER_INTEND_TOP + SIZES['L'],
+    },
+    footerBlur: {
+      zIndex: 2,
+      position: 'absolute',
+      bottom: SIZES['MAX'],
+      left: 0,
+      right: 0,
+      height: INNER_INTEND_BOTTOM + SIZES['L'],
+    },
+  })
+
+  const stylesByVariant = StyleSheet.create({
+    base: {
+      backgroundColor: COLORS.BACKGROUND.BASE,
+    },
+    secondary: {
+      backgroundColor: COLORS.BACKGROUND.SECONDARY,
     },
   })
 
-  return { styles }
+  return { OFFSET, styles, stylesByVariant }
 }
 
 export { useScreenContainerStyles }