import { LayoutBase } from '../layouts/layout-base'; import { View, CSSType } from '../core/view'; import { Property, makeParser, makeValidator } from '../core/properties'; export type SplitRole = 'primary' | 'secondary' | 'supplementary'; const splitRoleConverter = makeParser(makeValidator('primary', 'secondary', 'supplementary')); export type SplitStyle = 'automatic' | 'double' | 'triple'; export type SplitDisplayMode = 'automatic' | 'secondaryOnly' | 'oneBesideSecondary' | 'oneOverSecondary' | 'twoBesideSecondary' | 'twoOverSecondary' | 'twoDisplaceSecondary'; const splitDisplayModeConverter = makeParser(makeValidator('automatic', 'secondaryOnly', 'oneBesideSecondary', 'oneOverSecondary', 'twoBesideSecondary', 'twoOverSecondary', 'twoDisplaceSecondary')); export type SplitBehavior = 'automatic' | 'tile' | 'overlay' | 'displace'; const splitBehaviorConverter = makeParser(makeValidator('automatic', 'tile', 'overlay', 'displace')); // Default child roles (helps authoring without setting splitRole on children) const ROLE_ORDER: SplitRole[] = ['primary', 'secondary', 'supplementary']; @CSSType('SplitView') export class SplitViewBase extends LayoutBase { /** * The master display split style display settings. * Must be set before bootstrapping the app. */ static SplitStyle: SplitStyle; static getInstance(): SplitViewBase | null { // Platform-specific implementations may override return null; } /** Child role (primary, secondary, supplementary) */ splitRole: SplitRole; /** Preferred display mode */ displayMode: SplitDisplayMode; /** Preferred split behavior (iOS 14+) */ splitBehavior: SplitBehavior; /** Primary column width fraction (0..1) */ preferredPrimaryColumnWidthFraction: number; /** Supplementary column width fraction (0..1, iOS 14+ triple) */ preferredSupplementaryColumnWidthFraction: number; /** * Get child role (primary, secondary, supplementary) */ public static getRole(element: SplitViewBase): SplitRole { return element.splitRole; } /** * Set child role (primary, secondary, supplementary) */ public static setRole(element: SplitViewBase, value: SplitRole): void { element.splitRole = value; } // Called when a child's role changes; platform impls may override public onRoleChanged(view: View, oldValue: SplitRole, newValue: SplitRole) { this.requestLayout(); } showPrimary() { // Platform-specific implementations may override } hidePrimary() { // Platform-specific implementations may override } showSecondary() { // Platform-specific implementations may override } hideSecondary() { // Platform-specific implementations may override } showSupplementary() { // Platform-specific implementations may override } // Utility to infer a role by index when none specified protected _roleByIndex(index: number): SplitRole { return ROLE_ORDER[Math.max(0, Math.min(index, ROLE_ORDER.length - 1))]; } } SplitViewBase.prototype.recycleNativeView = 'auto'; export const splitRoleProperty = new Property({ name: 'splitRole', defaultValue: 'primary', valueChanged: (target, oldValue, newValue) => { const parent = target.parent; if (parent instanceof SplitViewBase) { parent.onRoleChanged(target, oldValue, newValue); } }, valueConverter: splitRoleConverter, }); splitRoleProperty.register(View); export const displayModeProperty = new Property({ name: 'displayMode', defaultValue: 'automatic', affectsLayout: __APPLE__, valueConverter: splitDisplayModeConverter, }); displayModeProperty.register(SplitViewBase); export const splitBehaviorProperty = new Property({ name: 'splitBehavior', defaultValue: 'automatic', affectsLayout: __APPLE__, valueConverter: splitBehaviorConverter, }); splitBehaviorProperty.register(SplitViewBase); export const preferredPrimaryColumnWidthFractionProperty = new Property({ name: 'preferredPrimaryColumnWidthFraction', defaultValue: 0, affectsLayout: __APPLE__, valueConverter: (v) => Math.max(0, Math.min(1, parseFloat(v))), }); preferredPrimaryColumnWidthFractionProperty.register(SplitViewBase); export const preferredSupplementaryColumnWidthFractionProperty = new Property({ name: 'preferredSupplementaryColumnWidthFraction', defaultValue: 0, affectsLayout: __APPLE__, valueConverter: (v) => Math.max(0, Math.min(1, parseFloat(v))), }); preferredSupplementaryColumnWidthFractionProperty.register(SplitViewBase);