@tuofeng/react-native-d3multiline-chart/utils/AnimatedSVGState/index.js

Android and iOS multipleline/line/scatter chart based on d3.js, change and use for tuofeng

import React, { Component } from 'react';
import omit from 'lodash/omit';

/**
 * Problem: Some props cannot be animated through setNativeProps
 * Solution: Use state for those and use setNativeProps for the rest
 */

function createState(props, keys) {
  return keys.reduce((acc, key) => {
    const value = props[key];
    if (value != null) {
      acc[key] = value;
    }
    return acc;
  }, {});
}

export default function SvgStateFix(WrappedComponent, propToStateKeys = [], { cancelSetNativeProps } = {}) {
  return class extends Component {
    state = createState(this.props, propToStateKeys);
    setNativeProps = (props) => {
      if (!cancelSetNativeProps) {
        const nativeProps = omit(props, propToStateKeys);
        this._component && this._component.setNativeProps(nativeProps);
      }
      const newState = createState(props, propToStateKeys);
      this.setState(newState);
    }
    render() {
      return (
        <WrappedComponent
          ref={component => (this._component = component)}
          {...this.props}
          {...this.state}
        />
      );
    }
  };
}