react-native-screens/src/fabric/gamma/split/SplitHostNativeComponent.ts at 80dc28c5fc7c4b1d1d90e2680297dda2fe80cc34 · software-mansion/react-native-screens · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
'use client';

import type {
  CodegenTypes as CT,
  ViewProps,
  HostComponent,
} from 'react-native';
import { codegenNativeCommands, codegenNativeComponent } from 'react-native';

// eslint-disable-next-line @typescript-eslint/ban-types
type GenericEmptyEvent = Readonly<{}>;

type DisplayModeWillChangeEvent = {
  currentDisplayMode: string;
  nextDisplayMode: string;
};

type SplitViewDisplayModeButtonVisibility = 'always' | 'automatic' | 'never';

type SplitViewSplitBehavior = 'automatic' | 'displace' | 'overlay' | 'tile';

type SplitViewPrimaryEdge = 'leading' | 'trailing';

type SplitViewDisplayMode =
  | 'automatic'
  | 'secondaryOnly'
  | 'oneBesideSecondary'
  | 'oneOverSecondary'
  | 'twoBesideSecondary'
  | 'twoOverSecondary'
  | 'twoDisplaceSecondary';

type SplitViewOrientation =
  | 'inherit'
  | 'all'
  | 'allButUpsideDown'
  | 'portrait'
  | 'portraitUp'
  | 'portraitDown'
  | 'landscape'
  | 'landscapeLeft'
  | 'landscapeRight';

type SplitViewPrimaryBackgroundStyle = 'default' | 'none' | 'sidebar';

type LayoutDirection = 'inherit' | 'ltr' | 'rtl';

type SplitViewTopColumnForCollapsing =
  | 'default'
  | 'primary'
  | 'supplementary'
  | 'secondary';

interface ColumnMetrics {
  minimumPrimaryColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
  maximumPrimaryColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
  preferredPrimaryColumnWidthOrFraction?: CT.WithDefault<CT.Float, -1.0>;
  minimumSupplementaryColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
  maximumSupplementaryColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
  preferredSupplementaryColumnWidthOrFraction?: CT.WithDefault<CT.Float, -1.0>;

  // iOS 26 only
  minimumSecondaryColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
  preferredSecondaryColumnWidthOrFraction?: CT.WithDefault<CT.Float, -1.0>;
  minimumInspectorColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
  maximumInspectorColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
  preferredInspectorColumnWidthOrFraction?: CT.WithDefault<CT.Float, -1.0>;
}

interface NativeProps extends ViewProps {
  // Appearance

  layoutDirection?: CT.WithDefault<LayoutDirection, 'inherit'>;
  preferredDisplayMode?: CT.WithDefault<SplitViewDisplayMode, 'automatic'>;
  preferredSplitBehavior?: CT.WithDefault<SplitViewSplitBehavior, 'automatic'>;
  primaryEdge?: CT.WithDefault<SplitViewPrimaryEdge, 'leading'>;
  showSecondaryToggleButton?: CT.WithDefault<boolean, false>;
  displayModeButtonVisibility?: CT.WithDefault<
    SplitViewDisplayModeButtonVisibility,
    'automatic'
  >;
  columnMetrics?: ColumnMetrics;
  orientation?: CT.WithDefault<SplitViewOrientation, 'inherit'>;
  primaryBackgroundStyle?: CT.WithDefault<
    SplitViewPrimaryBackgroundStyle,
    'default'
  >;

  // Behavior

  topColumnForCollapsing?: CT.WithDefault<
    SplitViewTopColumnForCollapsing,
    'default'
  >;

  // Interactions

  presentsWithGesture?: CT.WithDefault<boolean, true>;
  showInspector?: CT.WithDefault<boolean, false>;

  // Custom events

  onCollapse?: CT.DirectEventHandler<GenericEmptyEvent>;
  onDisplayModeWillChange?: CT.DirectEventHandler<DisplayModeWillChangeEvent>;
  onExpand?: CT.DirectEventHandler<GenericEmptyEvent>;
  onInspectorHide?: CT.DirectEventHandler<GenericEmptyEvent>;
}

type ComponentType = HostComponent<NativeProps>;

interface NativeCommands {
  showColumn: (
    viewRef: React.ElementRef<ComponentType>,
    column: string,
  ) => void;
}

export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  supportedCommands: ['showColumn'],
});

export default codegenNativeComponent<NativeProps>('RNSSplitHost', {});