react-native-form-model/src/models/SectionModel.ts

An easily testable and opinionated React Native form model builder written in pure JavaScript.

import { MaybeObservable } from '../util/reactUtil';
import FormElement, { FormElementOptions } from './FormElement';
import RowModel, { RowModelOptions } from './RowModel';

export interface SectionModelOptions extends FormElementOptions {
    sectionIndex: number;
    title?: MaybeObservable<string> | (() => React.ReactNode);
    footer?: MaybeObservable<string> | (() => React.ReactNode);
}

export default class SectionModel extends FormElement {
    title: MaybeObservable<string> | (() => React.ReactNode);
    footer: MaybeObservable<string> | (() => React.ReactNode);
    rows: RowModel[] = [];

    constructor(options: SectionModelOptions) {
        super(options);
        this.sectionIndex = options.sectionIndex;
        const { title = '', footer = '' } = options;
        this.title = title;
        this.footer = footer;
    }

    addRow(
        options?: Omit<RowModelOptions, 'form' | 'sectionIndex' | 'rowIndex'>
    ): RowModel {
        const row = new RowModel({
            ...options,
            form: this.form,
            sectionIndex: this.sectionIndex,
            rowIndex: this.rows.length,
        });
        this.rows.push(row);
        return row;
    }

    setTitle(title: Required<SectionModelOptions>['title']) {
        this.title = title || '';
        return this;
    }

    setFooter(footer: Required<SectionModelOptions>['footer']) {
        this.footer = footer || '';
        return this;
    }
}