How to use ts-transformer-keys - 10 common examples

onDestroy?: () => void;
    onClickItem?: (id: string) => void;
}

export interface ISubNavigationItem {
    id: string;
    label: React.ReactNode;
    link?: string;
}

export interface ISubNavigationProps
    extends ISubNavigationOwnProps,
        ISubNavigationStateProps,
        ISubNavigationDispatchProps {}

const ISubNavigationPropsToOmit = keys();

export class SubNavigation extends React.PureComponent> {
    componentWillMount() {
        this.props.onRender?.();
    }

    componentWillUnmount() {
        this.props.onDestroy?.();
    }

    render() {
        const selected = this.props.selected || this.props.defaultSelected;
        const navProps = omit(this.props, ISubNavigationPropsToOmit);
        const items = map(this.props.items, ({id, link, label}: ISubNavigationItem) => (
            <li id="==">
                </li>

const decrementEnabled =
            _.isUndefined(this.props.min) || _.isNaN(valueAsNumber) || valueAsNumber > this.props.min;
        return (
            <div>
                <div>
                    <button type="button">
                        <svg></svg>
                    </button>
                    <div>
                        <input>())}
                            className={classNames(
                                'js-numeric-input',
                                {
                                    [`mod-max-${this.props.maxLength}-digit`]:
                                        _.isNumber(this.props.maxLength) &amp;&amp; this.props.maxLength &gt; 0,
                                },
                                this.props.className,
                                styles.numericInput
                            )}
                            value={this.props.value}
                            onChange={this.onChange}
                            onKeyDown={this.onKeyDown}
                        /&gt;
                    </div>
                    </div></div>

export interface IMultiSelectStateProps {
    selected?: string[];
}

export interface IMultiSelectDispatchProps {
    onRemoveClick?: (item: IItemBoxProps) => void;
    onRemoveAll?: () => void;
    onReorder?: (values: string[]) => void;
}

export interface IMultiSelectProps extends
    IMultiSelectOwnProps,
    IMultiSelectStateProps,
    IMultiSelectDispatchProps {}

const selectPropsKeys = keys();

const makeMapStateToProps = () => {
    const getStateProps = createStructuredSelector({
        selected: SelectSelector.getMultiSelectSelectedValues,
    });

    return (state: IReactVaporState, ownProps: IMultiSelectOwnProps): IMultiSelectStateProps =>
        getStateProps(state, ownProps);
};

const mapDispatchToProps = (dispatch: IDispatch, ownProps: IMultiSelectOwnProps): IMultiSelectDispatchProps => ({
    onRemoveClick: (item: IItemBoxProps) => dispatch(unselectListBoxOption(ownProps.id, item.value)),
    onRemoveAll: () => dispatch(clearListBoxOption(ownProps.id)),
    onReorder: (values: string[]) => dispatch(reorderListBoxOption(ownProps.id, values)),
});

multiSelectStyle?: React.CSSProperties;
}

export interface IMultiSelectStateProps {
    selected?: string[];
}

export interface IMultiSelectDispatchProps {
    onRemoveClick?: (item: IItemBoxProps) => void;
    onRemoveAll?: () => void;
    onReorder?: (values: string[]) => void;
}

export interface IMultiSelectProps extends IMultiSelectOwnProps, IMultiSelectStateProps, IMultiSelectDispatchProps {}

const selectPropsKeys = keys();

const makeMapStateToProps = () => {
    const getStateProps = createStructuredSelector({
        selected: SelectSelector.getMultiSelectSelectedValues,
    });

    return (state: IReactVaporState, ownProps: IMultiSelectOwnProps): IMultiSelectStateProps =>
        getStateProps(state, ownProps);
};

const mapDispatchToProps = (dispatch: IDispatch, ownProps: IMultiSelectOwnProps): IMultiSelectDispatchProps => ({
    onRemoveClick: (item: IItemBoxProps) => dispatch(unselectListBoxOption(ownProps.id, item.value)),
    onRemoveAll: () => dispatch(clearListBoxOption(ownProps.id)),
    onReorder: (values: string[]) => dispatch(reorderListBoxOption(ownProps.id, values)),
});

export interface ITableWithPredicateConfig {
    id: string;
    values: IItemBoxProps[];
    prepend?: React.ReactNode;
    matchPredicate?: (predicate: string, datum: any) => boolean;
    isServer?: boolean;
}

export interface ITableWithPredicateStateProps {
    predicate: string;
}

export interface ITableWithPredicateProps extends Partial,
    ITableHOCOwnProps {}

const TableWithPredicatePropsToOmit = keys();

const defaultMatchPredicate = (predicate: string, datum: any) => !predicate || _.some(_.values(datum), (value: string) => value === predicate);

type TableWithPredicateComponent = React.ComponentClass;

export const tableWithPredicate = (supplier: ConfigSupplier) => (Component: TableWithPredicateComponent): TableWithPredicateComponent => {

    const mapStateToProps = (state: IReactVaporState, ownProps: ITableWithPredicateProps): ITableWithPredicateStateProps | ITableHOCOwnProps => {
        const config = HocUtils.supplyConfig(supplier);
        const predicate = SelectSelector.getListBoxSelected(state, {id: TableHOCUtils.getPredicateId(ownProps.id, config.id)})[0];
        const matchPredicate = config.matchPredicate || defaultMatchPredicate;
        const predicateData = () => !config.isServer && predicate
            ? _.filter(ownProps.data, (datum: any) => matchPredicate(predicate, datum))
            : ownProps.data;
        return {
            predicate: predicate,

pageNb: number;
    perPage: number;
}

export interface ITableWithPaginationDispatchProps {
    onMount: () => void;
    onUnmount: () => void;
}

export interface ITableWithPaginationProps
    extends Partial,
        Partial,
        ITableHOCOwnProps,
        WithServerSideProcessingProps {}

const TableWithPaginationProps = keys();

const sliceData = (data: any[], startingIndex: number, endingIndex: number) => data.slice(startingIndex, endingIndex);

export const tableWithPagination = (supplier: ConfigSupplier = {}) => (
    Component: React.ComponentType
): React.ComponentClass> => {
    const config = HocUtils.supplyConfig(supplier);
    const mapStateToProps = (
        state: IReactVaporState,
        ownProps: ITableWithPaginationProps
    ): ITableWithPaginationStateProps | ITableHOCOwnProps => {
        const pageNb = NavigationSelectors.getPaginationPage(state, {id: TableHOCUtils.getPaginationId(ownProps.id)});
        const perPage = NavigationSelectors.getPerPage(state, {id: ownProps.id});
        const isServer = ownProps.isServer || config.isServer;
        const length = TableSelectors.getDataCount(state, {
            id: ownProps.id,

tableId: string;
    actions?: IActionOptions[];
    isMultiselect?: boolean;
    collapsible?: CollapsibleRowProps;
    disabled?: boolean;
}

export type ITableRowStateProps = ReturnType;
export type ITableRowDispatchProps = ReturnType;

export interface ITableRowConnectedProps
    extends ITableRowOwnProps,
        Partial,
        Partial {}

const TableRowPropsToOmit = keys();

const isCollapsible = (props: ITableRowOwnProps): boolean =>
    props.collapsible && (React.isValidElement(props.collapsible.content) || _.isString(props.collapsible.content));

const mapStateToProps = (state: IReactVaporState, ownProps: ITableRowOwnProps) => {
    const {selected, opened} = TableSelectors.getTableRow(state, {id: ownProps.id}) || {selected: false, opened: false};
    return {
        selected,
        opened,
    };
};

const mapDispatchToProps = (dispatch: IDispatch, ownProps: ITableRowOwnProps) => {
    const refreshActionBarActions = (isMulti: boolean) => {
        if (!_.isEmpty(ownProps.actions)) {
            dispatch(addActionsToActionBar(ownProps.tableId, ownProps.actions));

export interface ITableWithDatePickerStateProps {
    lowerLimit: Date;
    upperLimit: Date;
}

export interface ITableWithFilterDispatchProps {
    onRender: () => void;
}

export interface ITableWithDatePickerProps
    extends Partial,
        Partial,
        ITableHOCOwnProps,
        WithServerSideProcessingProps {}

const TableWithFilterPropsToOmit = keys();

export type FilterableTableComponent = React.ComponentClass;

const defaultMatchDates = () => true;

export const tableWithDatePicker = (supplier: ConfigSupplier = {}) => (
    Component: FilterableTableComponent
): FilterableTableComponent => {
    const config = HocUtils.supplyConfig(supplier);

    const mapStateToProps = (
        state: IReactVaporState,
        ownProps: ITableWithDatePickerProps
    ): ITableWithDatePickerStateProps | ITableHOCOwnProps => {
        const [lowerLimit, upperLimit] = DatePickerSelectors.getDatePickerLimits(state, {id: ownProps.id});
        const matchDates = config.matchDates || defaultMatchDates;

}

export interface ITableRowDispatchProps {
    onMount: () => void;
    onUnmount: () => void;
    onClick: (isMulti: boolean, isOpened: boolean) => void;
    onUpdateToCollapsibleRow: () => void;
    onActionBarActionsChanged: () => void;
}

export interface ITableRowConnectedProps extends
    ITableRowOwnProps,
    Partial,
    Partial {}

const TableRowPropsToOmit = keys();

const isCollapsible = (props: ITableRowOwnProps): boolean => props.collapsible
    && (React.isValidElement(props.collapsible.content) || _.isString(props.collapsible.content));

const mapStateToProps = (state: IReactVaporState, ownProps: ITableRowOwnProps) => {
    const {selected, opened} = TableSelectors.getTableRow(state, {id: ownProps.id}) || {selected: false, opened: false};
    return {
        selected,
        opened,
    };
};

const mapDispatchToProps = (
    dispatch: IDispatch,
    ownProps: ITableRowOwnProps,
): ITableRowDispatchProps => {

import * as _ from 'underscore';

import {IReactVaporState} from '../../ReactVapor';
import {ConfigSupplier, HocUtils} from '../../utils/HocUtils';
import {ReduxConnect} from '../../utils/ReduxUtils';
import {BlankSlate, IBlankSlateProps} from '../blankSlate/BlankSlate';
import {ITableHOCOwnProps} from './TableHOC';
import {TableSelectors} from './TableSelectors';

export interface ITableWithBlankSlateStateProps {
    isEmpty: boolean;
}

export interface ITableWithBlankSlateProps extends Partial {}

const TableWithBlankSlatePropsToOmit = keys();

export const tableWithBlankSlate = (supplier: ConfigSupplier = {}) => (
    Component: React.ComponentClass
): React.ComponentClass> => {
    const mapStateToProps = (
        state: IReactVaporState,
        ownProps: ITableHOCOwnProps
    ): ITableWithBlankSlateStateProps | ITableHOCOwnProps => {
        const isEmpty = TableSelectors.getIsEmpty(state, ownProps);
        return {
            isEmpty,
            data: isEmpty ? null : ownProps.data,
        };
    };

    @ReduxConnect(mapStateToProps)