Controllable

controllable.ts

import * as React from 'react';
import cloneDeep from 'lodash-es/cloneDeep';
// import isEqual from 'lodash-es/isEqual';

export abstract class Controllable<P, S>
  extends React.Component<Controllable.Props<P>, Controllable.State<P, S>> {

  constructor(props, private options: Controllable.Options<P>) {
    super(props);

  }

  protected getControllableState(props: P): Controllable.OwnState<P> {
    const {
      controllable,
    } = this.options;
    const _: Partial<P> = {};
    if (controllable) {
      const value = props[controllable];
      _[controllable] = value ? this.cloneValue(controllable, value) : this.getDefaultValue();
    }
    return {
      _,
    };
  }

  protected getInitialState(props: P): Controllable.OwnState<P> {
    return {
      ...this.getControllableState(props),
    };
  }

  protected getClonedProps() {
    return this.state._;
  }

  protected setClonedProps(_: Partial<P>) {
    this.setState({ _ });
  }


  componentWillReceiveProps(nextProps) {
    const {
      controllable,
    } = this.options;
    if (nextProps[controllable]) {
      this.setState(this.getControllableState(nextProps));
    }
  }

  cloneValue(key: keyof P, value) {
    const cloned = cloneDeep(value);
    this.cloneHookPost(key, cloned);
    return cloned;
  }

  cloneHookPost(key: keyof P, value) {
  }

  protected abstract getDefaultValue<K extends keyof P>(controllable?: K): P[K];
}

export namespace Controllable {

  export type Options<P> = {
    controllable?: keyof P;
  };

  export type Props<P> = P & {

  };

  export type OwnState<P> = {
    _: Partial<P>;
  };

  export type State<P, S> = S & OwnState<P>;
}

Inspired by
https://medium.com/myheritage-engineering/how-controllable-react-components-maximize-reusability-86e3d233fa8e