How to use is-lite - 10 common examples

componentDidUpdate(prevProps, prevState) {
    if (!canUseDOM) return;

    const { action, controlled, index, lifecycle, status } = this.state;
    const { debug, run, stepIndex, steps } = this.props;
    const { steps: prevSteps, stepIndex: prevStepIndex } = prevProps;
    const { setSteps, reset, start, stop, update } = this.store;
    const { changed: changedProps } = treeChanges(prevProps, this.props);
    const { changed, changedFrom, changedTo } = treeChanges(prevState, this.state);
    const step = getMergedStep(steps[index], this.props);

    const stepsChanged = !isEqual(prevSteps, steps);
    const stepIndexChanged = is.number(stepIndex) && changedProps('stepIndex');

    if (stepsChanged) {
      if (validateSteps(steps, debug)) {
        setSteps(steps);
      } else {
        console.warn('Steps are not valid', steps); //eslint-disable-line no-console
      }
    }

    /* istanbul ignore else */
    if (changedProps('run')) {
      if (run) {
        start(stepIndex);
      } else {
        stop();
      }

export function isEqual(left: any, right: any): boolean {
  let type;
  const hasReactElement = isValidElement(left) || isValidElement(right);
  const hasUndefined = is.undefined(left) || is.undefined(right);

  if (getObjectType(left) !== getObjectType(right) || hasReactElement || hasUndefined) {
    return false;
  }

  if (is.domElement(left)) {
    return left.isSameNode(right);
  }

  if (is.number(left)) {
    return left === right;
  }

  if (is.function(left)) {
    return left.toString() === right.toString();
  }

  for (const key in left) {
    /* istanbul ignore else */
    if (hasOwnProperty(left, key)) {
      if (typeof left[key] === 'undefined' || typeof right[key] === 'undefined') {
        return false;
      }

      type = getObjectType(left[key]);

initStore = () => {
    const { debug, getHelpers, run, stepIndex } = this.props;

    this.store = new Store({
      ...this.props,
      controlled: run && is.number(stepIndex),
    });
    this.helpers = this.store.getHelpers();

    const { addListener } = this.store;

    log({
      title: 'init',
      data: [
        { key: 'props', value: this.props },
        { key: 'state', value: this.state },
      ],
      debug,
    });

    // Sync the store to this component's state.
    addListener(this.syncState);

export function isEqual(left: any, right: any): boolean {
  let type;
  const hasReactElement = isValidElement(left) || isValidElement(right);
  const hasUndefined = is.undefined(left) || is.undefined(right);

  if (getObjectType(left) !== getObjectType(right) || hasReactElement || hasUndefined) {
    return false;
  }

  if (is.domElement(left)) {
    return left.isSameNode(right);
  }

  if (is.number(left)) {
    return left === right;
  }

  if (is.function(left)) {
    return left.toString() === right.toString();
  }

  for (const key in left) {
    /* istanbul ignore else */
    if (hasOwnProperty(left, key)) {
      if (typeof left[key] === 'undefined' || typeof right[key] === 'undefined') {
        return false;

callback = data => {
    const { callback } = this.props;

    /* istanbul ignore else */
    if (is.function(callback)) {
      callback(data);
    }
  };

const hasReactElement = isValidElement(left) || isValidElement(right);
  const hasUndefined = is.undefined(left) || is.undefined(right);

  if (getObjectType(left) !== getObjectType(right) || hasReactElement || hasUndefined) {
    return false;
  }

  if (is.domElement(left)) {
    return left.isSameNode(right);
  }

  if (is.number(left)) {
    return left === right;
  }

  if (is.function(left)) {
    return left.toString() === right.toString();
  }

  for (const key in left) {
    /* istanbul ignore else */
    if (hasOwnProperty(left, key)) {
      if (typeof left[key] === 'undefined' || typeof right[key] === 'undefined') {
        return false;
      }

      type = getObjectType(left[key]);

      if (['object', 'array'].includes(type) && isEqual(left[key], right[key])) {
        continue;
      }

componentDidMount() {
    const { shouldFocus } = this.props;
    if (process.env.NODE_ENV !== 'production') {
      if (!is.domElement(this.beacon)) {
        console.warn('beacon is not a valid DOM element'); //eslint-disable-line no-console
      }
    }

    setTimeout(() => {
      if (is.domElement(this.beacon) && shouldFocus) {
        this.beacon.focus();
      }
    }, 0);
  }

constructor({ continuous = false, stepIndex, steps = [] }: Object = {}) {
      this.setState(
        {
          action: ACTIONS.INIT,
          controlled: is.number(stepIndex),
          continuous,
          index: is.number(stepIndex) ? stepIndex : 0,
          lifecycle: LIFECYCLE.INIT,
          status: steps.length ? STATUS.READY : STATUS.IDLE,
        },
        true,
      );

      this.setSteps(steps);
    }

propFullName: string,
  ): any => {
    const propValue = props[propName];
    let Component = propValue;

    if (!React.isValidElement(propValue) && isValidElementType(propValue)) {
      const ownProps = {
        ref: () => {},
        step: {},
      };
      Component = ;
    }

    if (
      is.string(propValue) ||
      is.number(propValue) ||
      !isValidElementType(propValue) ||
      ![Element, ForwardRef].includes(typeOf(Component))
    ) {
      return new Error(
        `Invalid ${location} \`${propFullName}\` supplied to \`${componentName}\`. Expected a React class or forwardRef.`,
      );
    }

    return undefined;
  },
);

constructor({ continuous = false, stepIndex, steps = [] }: Object = {}) {
      this.setState(
        {
          action: ACTIONS.INIT,
          controlled: is.number(stepIndex),
          continuous,
          index: is.number(stepIndex) ? stepIndex : 0,
          lifecycle: LIFECYCLE.INIT,
          status: steps.length ? STATUS.READY : STATUS.IDLE,
        },
        true,
      );

      this.setSteps(steps);
    }