@ledvance/group-ui-biz-bundle 1.0.121 → 1.0.123

package/src/modules/biorhythm/circular/conical-gradient/Android.tsx

@@ -0,0 +1,63 @@
+import React, { PureComponent } from 'react';
+import extractGradient from 'react-native-svg/lib/extract/extractGradient';
+import createReactNativeComponentClass from 'react-native-svg/lib/createReactNativeComponentClass';
+import { ClipPathAttributes } from 'react-native-svg/lib/attributes';
+
+function arrayDiffer(a: number[], b: number[]) {
+  if (a == null || b == null) {
+    return true;
+  }
+  if (a.length !== b.length) {
+    return true;
+  }
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+const GradientAttributes = {
+  gradient: {
+    diff: arrayDiffer,
+  },
+  gradientUnits: true,
+  gradientTransform: {
+    diff: arrayDiffer,
+  },
+  cx: true,
+  cy: true,
+  ...ClipPathAttributes,
+};
+
+interface Props {
+  cx?: number | string;
+  cy?: number | string;
+  gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
+  id?: string;
+}
+
+export default class ConicalGradient extends PureComponent<Props> {
+  static defaultProps = {
+    cx: '50%',
+    cy: '50%',
+    gradientUnits: 'objectBoundingBox',
+  };
+
+  render() {
+    const { cx, cy } = this.props;
+    return (
+      <RNSVGConicalGradient
+        cx={cx.toString()}
+        cy={cy.toString()}
+        {...extractGradient(this.props)}
+      />
+    );
+  }
+}
+
+const RNSVGConicalGradient = createReactNativeComponentClass('CustomRNSVGConicalGradient', () => ({
+  validAttributes: GradientAttributes,
+  uiViewClassName: 'RNSVGConicalGradient',
+}));

package/src/modules/biorhythm/circular/conical-gradient/Ios.tsx

@@ -0,0 +1,26 @@
+import React, { PureComponent } from 'react';
+import { processColor, requireNativeComponent, StyleProp, ViewStyle } from 'react-native';
+
+interface Props {
+  fromDegree: number;
+  colors: number[];
+  stops: number[];
+  innerRadius: number;
+  style: StyleProp<ViewStyle>;
+}
+
+const TYRCTConicGradientComp = requireNativeComponent('CustomTYRCTConicGradientView');
+
+export default class ConicalGradent extends PureComponent<Props> {
+  static defaultProps = {
+    fromDegree: 0,
+    colors: [processColor('red'), processColor('green')],
+    stops: [0, 1],
+    innerRadius: 0,
+    style: null,
+  };
+
+  render() {
+    return <TYRCTConicGradientComp {...this.props} />;
+  }
+}

package/src/modules/biorhythm/circular/conical-gradient/Normal.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import _ from 'lodash';
+import Svg, { G, LinearGradient, Path, Defs, Stop } from 'react-native-svg';
+import { interpolateHcl as interpolateGradient } from 'd3-interpolate';
+import { Coordinate, ColorItem } from './interface';
+
+const fullDeg = Math.PI * 2;
+
+interface Props {
+  outerRadius: number;
+  innerRadius: number;
+  segmentAngle: number;
+  offsetAngle: number; // 偏移角度
+  colors: ColorItem[];
+}
+
+export default class RingBackground extends React.Component<Props> {
+  static defaultProps = {
+    outerRadius: 120,
+    innerRadius: 80,
+    offsetAngle: 0,
+    colors: [],
+    segmentAngle: fullDeg / 360, // 每隔多少度切一个颜色
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    const { outerRadius, innerRadius, colors, segmentAngle, offsetAngle } = this.props;
+    this.handleSize(outerRadius, innerRadius, offsetAngle);
+    this.handleColors(colors, segmentAngle);
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillReceiveProps(nextProps: Props) {
+    if (!_.isEqual(nextProps, this.props)) {
+      this.setNativeProps(nextProps);
+    }
+  }
+
+  setNativeProps(props: Props) {
+    const {
+      outerRadius: oldOuterRadius,
+      innerRadius: oldInnerRadius,
+      colors: oldColors,
+      segmentAngle: oldSegmentAngle,
+      offsetAngle: oldOffsetAngle,
+    } = this.props;
+
+    const {
+      outerRadius = oldOuterRadius,
+      innerRadius = oldInnerRadius,
+      colors = oldColors,
+      segmentAngle = oldSegmentAngle,
+      offsetAngle = oldOffsetAngle,
+    } = props;
+
+    this.handleSize(outerRadius, innerRadius, offsetAngle);
+    this.handleColors(colors, segmentAngle);
+
+    this.forceUpdate();
+  }
+
+  getPoint(angle: number, radius: number) {
+    const { offsetAngle, outerRadius } = this;
+    // 精度过高，有些安卓手机会出现有角的现象，这里降低下精度
+    const deg = Math.round(10000 * (angle + offsetAngle)) / 10000;
+    return {
+      x: radius * Math.cos(deg) + outerRadius,
+      y: radius * Math.sin(deg) + outerRadius,
+    };
+  }
+
+  getPath(start: Coordinate, end: Coordinate) {
+    const { radius } = this;
+    const { x: x1, y: y1 } = start;
+    const { x: x2, y: y2 } = end;
+    return `M${x1} ${y1} A${radius} ${radius} 0 0 1 ${x2} ${y2}`;
+  }
+
+  private offsetAngle = 0;
+
+  private size = 0;
+
+  private radius = 0;
+
+  private innerRadius = 0;
+
+  private outerRadius = 0;
+
+  private colors: ColorItem[] = [];
+
+  handleColors(colors: ColorItem[], segmentAngle: number) {
+    let prev = colors[colors.length - 1];
+    // 按分隔的角度，插入数据
+    const list: ColorItem[] = [];
+    colors.forEach((item: ColorItem) => {
+      const { angle: start, color: startColor } = prev;
+      // eslint-disable-next-line
+      let { angle: end, color: endColor } = item;
+      if (end <= start) {
+        end += fullDeg;
+      }
+      const steps = Math.floor((end - start) / segmentAngle);
+      const interpolate = interpolateGradient(startColor, endColor);
+      const startDeg = Math.ceil(start / segmentAngle) * segmentAngle;
+      for (let i = 0; i < steps; i++) {
+        const deg = startDeg + segmentAngle * i;
+        const percent = (deg - start) / (end - start);
+        const stepColor = interpolate(percent);
+        list.push({
+          angle: deg > fullDeg ? deg % fullDeg : deg,
+          color: stepColor,
+        });
+      }
+      prev = item;
+      list.push({
+        angle: item.angle,
+        color: interpolate(1),
+      });
+    });
+
+    prev = list[list.length - 1];
+    this.colors = list.map(current => {
+      // 计算渐变方向
+      const { angle: startAngle, color: startColor } = prev;
+      const { angle: endAngle, color: endColor } = current;
+      const point1 = this.getPoint(startAngle, this.radius);
+      // 加 0.005 使用每条线段有重叠，保证圆圆滑
+      const point2 = this.getPoint(endAngle + 0.005, this.radius);
+      prev = current;
+      return {
+        path: this.getPath(point1, point2),
+        from: point1,
+        to: point2,
+        startColor,
+        endColor,
+      };
+    });
+  }
+
+  handleSize(outerRadius: number, innerRadius: number, offsetAngle: number) {
+    this.size = outerRadius * 2;
+    this.radius = (outerRadius + innerRadius) / 2;
+    this.outerRadius = outerRadius;
+    this.innerRadius = innerRadius;
+    this.offsetAngle = offsetAngle;
+  }
+
+  render() {
+    const { size, outerRadius, innerRadius } = this;
+    return (
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <Defs>
+          {this.colors.map(({ from, to, startColor, endColor }, index) => (
+            <LinearGradient
+              // eslint-disable-next-line
+              key={index}
+              id={`linear${index}`}
+              x1={from.x.toFixed(2)}
+              y1={from.y.toFixed(2)}
+              x2={to.x.toFixed(2)}
+              y2={to.y.toFixed(2)}
+            >
+              <Stop offset="0" stopColor={startColor} />
+              <Stop offset="1" stopColor={endColor} />
+            </LinearGradient>
+          ))}
+        </Defs>
+        <G>
+          {this.colors.map(({ path }: ColorItem, index) => {
+            return (
+              <Path
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                d={path}
+                fill="transparent"
+                stroke={`url(#linear${index})`}
+                strokeWidth={`${outerRadius - innerRadius}`}
+              />
+            );
+          })}
+        </G>
+      </Svg>
+    );
+  }
+}

package/src/modules/biorhythm/circular/conical-gradient/index.android.tsx

@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import _ from 'lodash';
+import { Svg, Circle, Defs, Stop, G } from 'react-native-svg';
+import { interpolateHcl as interpolateGradient } from 'd3-interpolate';
+import Normal from './Normal';
+import AndroidConicalGradent from './Android';
+import { isLargeAppRnVersion } from './utils';
+import { StopItem } from './interface';
+
+const fullDeg = Math.PI * 2;
+
+interface Props {
+  /**
+   * 外圈半径
+   */
+  outerRadius: number;
+  /**
+   * 内圈半径
+   */
+  innerRadius: number;
+  /**
+   * 切分角度
+   */
+  segmentAngle: number;
+  /**
+   * 偏移角度
+   */
+  offsetAngle: number;
+  /**
+   * 渐变颜色配置
+   */
+  colors: StopItem[];
+}
+
+interface State {
+  colors: StopItem[];
+}
+
+export default class ConicalGradent extends Component<Props, State> {
+  static defaultProps = {
+    outerRadius: 120,
+    innerRadius: 80,
+    offsetAngle: 0,
+    colors: [
+      { angle: 0, color: 'red' },
+      { angle: fullDeg, color: 'green' },
+    ],
+    segmentAngle: fullDeg / 360, // 每隔多少度切一个颜色
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      colors: this.getColors(this.props.colors),
+    };
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillReceiveProps(nextProps: Props) {
+    if (!_.isEqual(nextProps.colors, this.props.colors)) {
+      this.setState({ colors: [...nextProps.colors] });
+    }
+  }
+
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    const { outerRadius, innerRadius, segmentAngle, offsetAngle, colors } = nextProps;
+    const {
+      outerRadius: oldOuterRadius,
+      innerRadius: oldinnerRadius,
+      segmentAngle: oldSegmentAngle,
+      offsetAngle: oldOffsetAngle,
+      colors: oldColors,
+    } = nextProps;
+    return (
+      !_.isEqual(outerRadius, oldOuterRadius) ||
+      !_.isEqual(innerRadius, oldinnerRadius) ||
+      !_.isEqual(segmentAngle, oldSegmentAngle) ||
+      !_.isEqual(offsetAngle, oldOffsetAngle) ||
+      !_.isEqual(colors, oldColors) ||
+      !_.isEqual(this.state.colors, nextState.colors)
+    );
+  }
+
+  getColors(colors: StopItem[]) {
+    return [...colors].sort((a: StopItem, b: StopItem) => {
+      return a.angle > b.angle ? 1 : -1;
+    });
+  }
+
+  setColors(colors: StopItem[]) {
+    this.setState({ colors: this.getColors(colors) });
+  }
+
+  renderStops() {
+    const { offsetAngle } = this.props;
+    const { colors } = this.state;
+    // 转换角度
+    const list: StopItem[] = colors
+      .map(item => ({
+        angle: (item.angle + offsetAngle) % fullDeg,
+        color: item.color,
+      }))
+      .sort((item1, item2) => (item1.angle > item2.angle ? 1 : -1));
+
+    // 第一个是否为0
+    if (list[0].angle !== 0) {
+      // 加入 0 角度的颜色
+      // 上一个颜色
+      const { color: startColor, angle: startAngle } = list[list.length - 1];
+      const { color: endColor, angle: endAngle } = list[0];
+      // 补帧
+      const interpolate = interpolateGradient(startColor, endColor);
+      // 0 角度的位置百分比
+      const percent = (fullDeg - startAngle) / (endAngle + fullDeg - startAngle);
+      // 0 角度的颜色
+      const zeroColor = interpolate(percent);
+      list.splice(0, 0, { angle: 0, color: zeroColor });
+    }
+    // 最后是否有颜色
+    list.push({ angle: fullDeg, color: list[0].color });
+    return list.map((item: StopItem, index: number) => {
+      const offset = `${Math.round((item.angle * 100) / fullDeg)}%`;
+      // eslint-disable-next-line react/no-array-index-key
+      return <Stop offset={offset} stopColor={item.color} key={index} />;
+    });
+  }
+
+  render() {
+    const { colors } = this.state;
+    if (isLargeAppRnVersion([5, 20])) {
+      const { outerRadius, innerRadius } = this.props;
+      const size = outerRadius * 2;
+      const radius = (outerRadius + innerRadius) / 2;
+      return (
+        <View
+          style={{
+            width: size,
+            height: size,
+            borderRadius: outerRadius,
+            overflow: 'hidden',
+          }}
+        >
+          <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+            <Defs>
+              <AndroidConicalGradent id="gradent">{this.renderStops()}</AndroidConicalGradent>
+            </Defs>
+            <G origin={`${outerRadius},${outerRadius}`}>
+              <Circle
+                cx={outerRadius}
+                cy={outerRadius}
+                r={radius}
+                fill="transparent"
+                strokeWidth={outerRadius - innerRadius}
+                stroke="url(#gradent)"
+              />
+            </G>
+          </Svg>
+        </View>
+      );
+    }
+    return <Normal {...this.props} colors={colors} />;
+  }
+}

package/src/modules/biorhythm/circular/conical-gradient/index.ios.tsx

@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import { processColor, View } from 'react-native';
+import _ from 'lodash';
+import Normal from './Normal';
+import IOSConicalGradent from './Ios';
+import { isLargeAppRnVersion } from './utils';
+import { StopItem } from './interface';
+
+const fullDeg = Math.PI * 2;
+
+interface Props {
+  /**
+   * 外圈半径
+   */
+  outerRadius: number;
+  /**
+   * 内圈半径
+   */
+  innerRadius: number;
+  /**
+   * 切分角度
+   */
+  segmentAngle: number;
+  /**
+   * 偏移角度
+   */
+  offsetAngle: number;
+  /**
+   * 渐变颜色配置
+   */
+  colors: StopItem[];
+}
+
+interface State {
+  colors: StopItem[];
+}
+
+export default class ConicalGradent extends Component<Props, State> {
+  static defaultProps = {
+    outerRadius: 120,
+    innerRadius: 80,
+    offsetAngle: 0,
+    colors: [
+      { angle: 0, color: 'red' },
+      { angle: fullDeg, color: 'green' },
+    ],
+    segmentAngle: fullDeg / 360, // 每隔多少度切一个颜色
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      colors: this.getColors(this.props.colors),
+    };
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillReceiveProps(nextProps: Props) {
+    if (!_.isEqual(nextProps.colors, this.props.colors)) {
+      this.setState({ colors: [...nextProps.colors] });
+    }
+  }
+
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    const { outerRadius, innerRadius, segmentAngle, offsetAngle, colors } = nextProps;
+    const {
+      outerRadius: oldOuterRadius,
+      innerRadius: oldinnerRadius,
+      segmentAngle: oldSegmentAngle,
+      offsetAngle: oldOffsetAngle,
+      colors: oldColors,
+    } = nextProps;
+    return (
+      !_.isEqual(outerRadius, oldOuterRadius) ||
+      !_.isEqual(innerRadius, oldinnerRadius) ||
+      !_.isEqual(segmentAngle, oldSegmentAngle) ||
+      !_.isEqual(offsetAngle, oldOffsetAngle) ||
+      !_.isEqual(colors, oldColors) ||
+      !_.isEqual(this.state.colors, nextState.colors)
+    );
+  }
+
+  getColors(colors: StopItem[]) {
+    return [...colors].sort((a, b) => {
+      return a.angle > b.angle ? 1 : -1;
+    });
+  }
+
+  setColors(colors: StopItem[]) {
+    this.setState({ colors: this.getColors(colors) });
+  }
+
+  getIosProps() {
+    const { outerRadius, innerRadius, offsetAngle } = this.props;
+    const { colors } = this.state;
+    const lastAngle = colors[colors.length - 1].angle;
+    const list: StopItem[] = colors
+      .map(item => ({ angle: lastAngle - item.angle, color: item.color }))
+      .reverse();
+    list.push({ angle: fullDeg, color: list[0].color });
+    const size = outerRadius * 2;
+    return {
+      innerRadius: innerRadius / outerRadius,
+      fromDegree: ((offsetAngle - fullDeg + lastAngle) * 180) / Math.PI,
+      colors: list.map(item => processColor(item.color)),
+      stops: list.map(item => item.angle / fullDeg),
+      style: { width: size, height: size },
+    };
+  }
+
+  render() {
+    const { colors } = this.state;
+    if (isLargeAppRnVersion([5, 19])) {
+      const { outerRadius } = this.props;
+      const size = outerRadius * 2;
+      return (
+        <View style={{ width: size, height: size, borderRadius: outerRadius, overflow: 'hidden' }}>
+          <IOSConicalGradent {...this.getIosProps()} />
+        </View>
+      );
+    }
+    return <Normal {...this.props} colors={colors} />;
+  }
+}

package/src/modules/biorhythm/circular/conical-gradient/index.tsx

@@ -0,0 +1,3 @@
+import Grandient from './index.ios';
+
+export default Grandient;

package/src/modules/biorhythm/circular/conical-gradient/index.web.tsx

@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import { processColor } from 'react-native';
+import _ from 'lodash';
+import Normal from './Normal';
+import { StopItem } from './interface';
+
+const fullDeg = Math.PI * 2;
+
+interface Props {
+  /**
+   * 外圈半径
+   */
+  outerRadius: number;
+  /**
+   * 内圈半径
+   */
+  innerRadius: number;
+  /**
+   * 切分角度
+   */
+  segmentAngle: number;
+  /**
+   * 偏移角度
+   */
+  offsetAngle: number;
+  /**
+   * 渐变颜色配置
+   */
+  colors: StopItem[];
+}
+
+interface State {
+  colors: StopItem[];
+}
+
+export default class ConicalGradent extends Component<Props, State> {
+  static defaultProps = {
+    outerRadius: 120,
+    innerRadius: 80,
+    offsetAngle: 0,
+    colors: [
+      { angle: 0, color: 'red' },
+      { angle: fullDeg, color: 'green' },
+    ],
+    segmentAngle: fullDeg / 360, // 每隔多少度切一个颜色
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      colors: this.getColors(this.props.colors),
+    };
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillReceiveProps(nextProps: Props) {
+    if (!_.isEqual(nextProps.colors, this.props.colors)) {
+      this.setState({ colors: [...nextProps.colors] });
+    }
+  }
+
+  getColors(colors: StopItem[]) {
+    return [...colors].sort((a, b) => {
+      return a.angle > b.angle ? 1 : -1;
+    });
+  }
+
+  setColors(colors: StopItem[]) {
+    this.setState({ colors: this.getColors(colors) });
+  }
+
+  getIosProps() {
+    const { outerRadius, innerRadius, offsetAngle } = this.props;
+    const { colors } = this.state;
+    const lastAngle = colors[colors.length - 1].angle;
+    const list: StopItem[] = colors
+      .map(item => ({ angle: lastAngle - item.angle, color: item.color }))
+      .reverse();
+    list.push({ angle: fullDeg, color: list[0].color });
+    const size = outerRadius * 2;
+    return {
+      innerRadius: innerRadius / outerRadius,
+      fromDegree: ((offsetAngle - fullDeg + lastAngle) * 180) / Math.PI,
+      colors: list.map(item => processColor(item.color)),
+      stops: list.map(item => item.angle / fullDeg),
+      style: { width: size, height: size },
+    };
+  }
+
+  render() {
+    const { colors } = this.state;
+    return <Normal {...this.props} colors={colors} />;
+  }
+}

package/src/modules/biorhythm/circular/conical-gradient/interface.ts

@@ -0,0 +1,19 @@
+export interface StopItem {
+  angle: number;
+  color: string;
+}
+
+export interface Coordinate {
+  x: number;
+  y: number;
+}
+
+export interface ColorItem {
+  path?: string;
+  from?: Coordinate;
+  to?: Coordinate;
+  startColor?: string;
+  endColor?: string;
+  angle?: number;
+  color?: string;
+}

package/src/modules/biorhythm/circular/conical-gradient/utils.ts

@@ -0,0 +1,25 @@
+import { TYSdk } from 'tuya-panel-kit';
+
+export const isLargeAppRnVersion = (target: number[]): boolean => {
+  const { mobile } = TYSdk;
+  if (!mobile.mobileInfo) {
+    return true;
+  }
+  const {
+    mobileInfo: { appRnVersion },
+  } = mobile;
+  let versionInfo = [];
+  if (typeof appRnVersion === 'string') {
+    versionInfo = appRnVersion.split('.');
+  }
+  if (+versionInfo[0] > +target[0]) {
+    return true;
+  }
+  if (versionInfo[1] !== undefined && target[1] !== undefined && +versionInfo[1] > +target[1]) {
+    return true;
+  }
+  if (versionInfo[2] !== undefined && target[2] !== undefined && +versionInfo[2] > +target[2]) {
+    return true;
+  }
+  return false;
+};