hoc.md

interface WithLoadingProps {
    loading: boolean;
}

const withMaybe = <P extends object>(predicate: (props: P) => boolean) =>
    (Component: React.ComponentType<P>) =>
        (props: P) => predicate(props) ? <Component {...props}/> : null;

const withEither = <P extends object>(predicate: (props: P) => boolean, EitherComponent: React.ComponentType) =>
    (Component: React.ComponentType<P>) =>
        (props: P) => predicate(props) ? <EitherComponent/> : <Component {...props}/>;

const withLoading = <P extends WithLoadingProps>(Component: React.ComponentType<P>) =>
    withEither((props: P) => props.loading, () => <ActivityIndicator size="small" color="tomato"/>)(Component);


interface ITest {
    loading: boolean
    text: string
}

class Test extends React.Component<ITest> {
    render() {
        return <View>
            <Text>{this.props.text}</Text>
        </View>
    }
}

const LoadingTest = withEither((props: ITest) => props.loading, () => <ActivityIndicator size="small" color="tomato"/>)(Test);

const LoadingTest2 = withLoading(Test);

const withMaybe = (predicate) =>
    (Component) =>
        (props) => predicate(props) ? <Component {...props}/> : null;

const withEither = (predicate, EitherComponent) =>
    (Component) =>
        (props) => predicate(props) ? <EitherComponent/> : <Component {...props}/>;

const withLoading = (Component) =>
    withEither((props) => props.loading, () => <div>loading...</div>)(Component);


class Test extends React.Component {
    render() {
        return <div>
            <div>contents:</div>
            <div>{this.props.text}</div>
        </div>
    }
}

const LoadingTest = withEither((props) => props.loading, () => <div>loading...</div>)(Test);

const LoadingTest2 = withLoading(Test);


@withLoading
class Test3 extends React.Component {
    render() {
        return <div>
            this is test3!!
        </div>
    }
}