@tiller-ds/formik-elements/DataTableField.d.ts

Formik elements module of Tiller Design System

import * as React from "react";
import { Schema } from "yup";
export declare type DataTableFieldProps = {
    children: React.ReactNode;
};
declare type DataTableFieldHook = {
    /**
     * Used for assigning a name to inputs for adding a new item when inline editing is enabled.
     * Receives a desired field name.
     * Example: name={dataTableFieldHook.setNewRowFieldName("surname")}
     */
    setNewRowFieldName: (newRowFieldName: string) => string;
    /**
     * Used for applying the function on a button you wish to use as an add button for adding
     * items to your data table (handed as an onClick function).
     * Example: onClick={dataTableFieldHook.onNewRowSubmit}
     */
    onNewRowSubmit: () => void;
    /**
     * Used for applying the function on a button you wish to use as a reset button for
     * resetting the form which adds a new item to your data table.
     * Example: onClick={dataTableFieldHook.onNewRowReset}
     */
    onNewRowReset: () => void;
    /**
     * Used for applying the function on a button you wish to use as an edit button for
     * editing the desired row. Receives index of a row.
     * Example: onClick={() => dataTableFieldHook.onRowEdit(index)}
     */
    onRowEdit: (index: number) => void;
    /**
     * Used for applying the function on a field when you wish to disable the save button according
     * to the validation. Handed over as an onFocus event in order to focus on a field when the state
     * of a save button has changed.
     * Example: onFocus={() => dataTableFieldHook.onEditingRow("surname")}
     */
    onEditingRow: (fieldName: string) => void;
    /**
     * Used for assigning a name to fields for editing an item when inline editing is enabled.
     * Receives index of a row and a desired field name.
     * Example: name={dataTableFieldHook.onRowEditField(index, "surname")}
     */
    onRowEditField: (index: number, fieldName: string) => string;
    /**
     * Used for applying the function on a button you wish to use as a cancel button for
     * cancelling the editing of a desired row.
     * Example: onClick={dataTableFieldHook.onRowEditCancel}
     */
    onRowEditCancel: () => void;
    /**
     * Used for applying the function on a button you wish to use as a save button for
     * saving the editing of a desired row. Receives index of a row.
     * Example: onClick={() => dataTableFieldHook.onRowEditSave(index)}
     */
    onRowEditSave: (index: number) => Record<string, unknown>;
    /**
     * Used for applying the function on a button you wish to use as a delete button for
     * deleting a desired row. Receives index of a row.
     * Example: onClick={() => dataTableFieldHook.onRowDelete(index)}
     */
    onRowDelete: (index: number) => void;
};
declare type UseDataTableField<T extends object> = [{
    /**
     * Data wished to be rendered inside the data table.
     * Usually hooks to DataTable's data prop for communication with the useDataTableField hook.
     */
    data: T[];
    /**
     * Defines the index of a row currently being edited.
     * Usually hooks to DataTable's rowEditingIndex prop for communication with the useDataTableField hook.
     */
    rowEditingIndex?: number;
    /**
     * Defines whether the row currently being edited is savable.
     * Usually hooks to DataTable's saveEnabled prop for communication with the useDataTableField hook.
     * If not used, the DataTable disregards this and triggers validation when the save button is clicked
     * if onFocus function on fields is also not defined (see stories and docs for more info on usage).
     */
    saveEnabled?: boolean;
}, DataTableFieldHook];
declare type DataTableFieldNewRowProps = {
    children: React.ReactNode;
};
export declare function useDataTableField<T extends object>(dataTableFieldName: string, validationSchema?: Schema<any> | undefined): UseDataTableField<T>;
declare function DataTableField({ children }: DataTableFieldProps): JSX.Element;
declare namespace DataTableField {
    var NewRow: typeof DataTableFieldNewRow;
}
declare function DataTableFieldNewRow({ children }: DataTableFieldNewRowProps): JSX.Element;
export default DataTableField;