@ledvance/group-ui-biz-bundle 1.0.120 → 1.0.122

package/src/modules/biorhythm/circular/RhythmsCircle.tsx

@@ -0,0 +1,483 @@
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable no-return-assign */
+/* eslint-disable no-lonely-if */
+import React, { useRef, useEffect, useState, useMemo } from 'react';
+import {
+  View,
+  StyleSheet,
+  Image,
+  PanResponder,
+  GestureResponderEvent,
+  PanResponderGestureState,
+} from 'react-native';
+import { usePersistFn } from 'ahooks';
+import ConicalGradient from './conical-gradient';
+import { IData, RhythmsCircleProps } from './interface';
+import { Utils } from 'tuya-panel-kit';
+const { convertX: cx } = Utils.RatioUtils
+
+const totalTime = 24 * 60;
+const fullDeg = Math.PI * 2;
+
+// 获取图标的x,y坐标
+const getPoint = (deg: number, radius: number, center: number) => {
+  return {
+    x: radius * Math.sin(deg) + center,
+    y: -radius * Math.cos(deg) + center,
+  };
+};
+
+const RhythmsCircle: React.FC<RhythmsCircleProps & { gradientMode?: boolean }> = props => {
+  const {
+    thumbSize,
+    thumbStyle,
+    disabled = false,
+    disabledOpacity = 1,
+    iconStyle,
+    timeStyle,
+    pickerStyle,
+    timeImg,
+    lastRingColor,
+    gradientMode = true,
+  } = props;
+
+  const dragEnabled = useRef(false);
+
+  const markRefs = useRef<any>([]).current;
+
+  const markImgRefs = useRef<any>([]).current;
+
+  const dragIndex = useRef(0);
+
+  const outerRadius = useRef(props.size / 2);
+
+  const size = useRef(props.size);
+
+  const ringWidth = useRef(props.ringWidth);
+
+  const innerSize = useRef(props.size - props.ringWidth * 2);
+
+  const innerRadius = useRef(innerSize.current / 2);
+
+  const ringRadius = useRef((innerRadius.current + outerRadius.current) / 2);
+
+  const ringRef = useRef<ConicalGradient>();
+
+  const initData = (v: IData[]) => {
+    return v.map(({ index, time, icon, color, noActiveColor, activeColor }) => ({
+      index,
+      time,
+      icon,
+      color,
+      noActiveColor,
+      activeColor,
+      deg: (time / totalTime) * fullDeg,
+    }));
+  };
+
+  const [allData, setAllData] = useState(() => initData(props.data || []));
+
+  useEffect(() => {
+    size.current = props.size;
+    ringWidth.current = props.ringWidth;
+    innerSize.current = props.size - props.ringWidth * 2;
+    innerRadius.current = innerSize.current / 2;
+    outerRadius.current = props.size / 2;
+    ringRadius.current = (innerRadius.current + outerRadius.current) / 2;
+  }, [props.size, props.ringWidth]);
+
+  useEffect(() => {
+    setAllData(() => initData(props.data || []));
+  }, [props.data]);
+
+  // 极坐标的渐变色 - 修改以支持两种模式
+  const getRingColors = (data: IData[]) => {
+    type ColorStop = { color: string; angle: number };
+
+    // 角度规范化函数：确保角度在0到2π范围内
+    const normalizeAngle = (angle: number) => {
+      while (angle < 0) {
+        angle += fullDeg;
+      }
+      while (angle >= fullDeg) {
+        angle -= fullDeg;
+      }
+      return angle;
+    };
+
+    if (gradientMode) {
+      // 渐变模式：原有逻辑
+      const colors: ColorStop[] = data.map(({ time, color }) => ({
+        color,
+        angle: normalizeAngle((time / totalTime) * fullDeg - Math.PI / 2),
+      }));
+
+      // 在日落节点后多加一个颜色节点优化显示
+      colors.push({
+        color: lastRingColor || '#000',
+        angle: normalizeAngle(((data[0].time - 60) / totalTime) * fullDeg - Math.PI / 2),
+      });
+
+      colors.sort((a, b) => {
+        return a.angle - b.angle;
+      });
+      return colors;
+    } else {
+      // 直接变化模式：创建阶梯式颜色变化，消除渐变效果
+      const sortedData = [...data].sort((a, b) => a.time - b.time);
+      const colors: ColorStop[] = [];
+
+      for (let i = 0; i < sortedData.length; i++) {
+        const currentItem = sortedData[i];
+        const nextItem = sortedData[(i + 1) % sortedData.length];
+
+        // 当前节点的开始角度
+        const currentAngle = normalizeAngle((currentItem.time / totalTime) * fullDeg - Math.PI / 2);
+
+        // 下一个节点的角度
+        let nextAngle = normalizeAngle((nextItem.time / totalTime) * fullDeg - Math.PI / 2);
+
+        // 处理跨越0点的情况
+        if (nextAngle <= currentAngle) {
+          nextAngle += fullDeg;
+        }
+
+        // 在当前颜色区间内创建多个相同颜色的点来消除渐变
+        const segmentLength = nextAngle - currentAngle;
+        const numSegments = Math.max(10, Math.floor(segmentLength / (fullDeg / 100))); // 至少10个点
+
+        for (let j = 0; j < numSegments; j++) {
+          const angle = currentAngle + (segmentLength * j / numSegments);
+          colors.push({
+            color: currentItem.color,
+            angle: normalizeAngle(angle),
+          });
+        }
+
+        // 在下一个节点前的最后一个点
+        if (i === sortedData.length - 1) {
+          // 最后一个段，延伸到第一个节点
+          colors.push({
+            color: currentItem.color,
+            angle: normalizeAngle(nextAngle - 0.001),
+          });
+        } else {
+          colors.push({
+            color: currentItem.color,
+            angle: normalizeAngle(nextAngle - 0.001),
+          });
+        }
+      }
+
+      return colors;
+    }
+  };
+
+  // 是否成为响应者
+  const handleSetPanResponder = usePersistFn((e: GestureResponderEvent) => {
+    // 如果传过来的disabled属性为true,则返回false阻止成为响应者
+    if (disabled) {
+      return false;
+    }
+    // 拿到触摸点相对于父元素的横纵坐标
+    const { locationX, locationY } = e.nativeEvent;
+    let selectIndex = -1;
+    const exist = allData.some(({ deg }, index) => {
+      const { x, y } = getPoint(deg, cx(ringRadius.current), cx(outerRadius.current));
+      const length = Math.sqrt((x - locationX) ** 2 + (y - locationY) ** 2);
+      if (length <= thumbSize / 2) {
+        selectIndex = index;
+        dragEnabled.current = true;
+        return true;
+      }
+      return false;
+    });
+    dragIndex.current = selectIndex;
+    if (exist) {
+      return true;
+    }
+    return true;
+  });
+
+  const moveMark = usePersistFn(
+    ({ dx, dy }: PanResponderGestureState, callback: Function | null, needUpdateState: boolean) => {
+      const dragInx = dragIndex.current;
+      const rinRad = cx(ringRadius.current);
+      const outRad = cx(outerRadius.current);
+      const mark = allData[dragInx];
+      const markRef = markRefs[dragInx];
+      if (!mark || !markRef) {
+        return;
+      }
+
+      const markImgRef = markImgRefs[dragInx];
+      markImgRef.setNativeProps({
+        style: {
+          tintColor: allData[dragInx].activeColor,
+        },
+      });
+      const { deg } = mark;
+      const { x, y } = getPoint(deg, rinRad, outRad);
+      const newX = x + dx;
+      const newY = y + dy;
+      // const length = Math.sqrt((newX - outRad) ** 2 + (newY - outRad) ** 2);
+      let angle = Math.atan2(newX - outRad, -(newY - outRad));
+      if (angle < 0) {
+        angle += fullDeg;
+      }
+
+      // 角度对应的时间
+      let time = Math.floor((angle * totalTime) / fullDeg);
+      // 是否是允许的时间范围
+      time = handleStepOver(time);
+      // 转回成角度，确保不出现跳动问题
+      angle = (time / totalTime) * fullDeg;
+      const point = getPoint(angle, rinRad, outRad);
+      markRef.setNativeProps({
+        style: {
+          top: point.y,
+          left: point.x,
+        },
+      });
+
+      const newData = allData.map((item, index) => {
+        if (index !== dragInx) {
+          return item;
+        }
+        return {
+          ...item,
+          deg: angle,
+          time,
+        };
+      });
+      callback && callback(newData, dragInx);
+      // onChange
+      props.onChange && props.onChange(newData);
+
+      ringRef?.current?.setColors(getRingColors(newData));
+      if (needUpdateState) {
+        setAllData(newData);
+      }
+    }
+  );
+
+  const handleStepOver = (time: number) => {
+    let newTime = time;
+    if (allData.length === 1) {
+      return newTime;
+    }
+
+    const dragInx = dragIndex.current;
+    const currentTime = allData[dragInx].time;
+    const MIN_DISTANCE = 15; // 定义最小距离为15分钟
+
+    // 如果几乎没有移动，直接返回原时间
+    if (Math.abs(time - currentTime) < 2) {
+      return currentTime;
+    }
+
+    // 找出所有其他节点的时间
+    const otherTimes = allData
+      .filter((_, index) => index !== dragInx)
+      .map(item => item.time);
+
+    // 检查是否接近其他节点
+    for (let i = 0; i < otherTimes.length; i++) {
+      const otherTime = otherTimes[i];
+
+      // 计算距离（考虑圆形24小时的特性）
+      let distance = Math.abs(newTime - otherTime);
+      if (distance > totalTime / 2) {
+        distance = totalTime - distance; // 取较短的距离
+      }
+
+      // 如果距离小于MIN_DISTANCE，调整位置
+      if (distance < MIN_DISTANCE) {
+        // 确定调整方向
+        const direction = ((newTime - otherTime + totalTime) % totalTime) < totalTime / 2 ? 1 : -1;
+
+        // 计算新位置，保持15分钟距离
+        newTime = (otherTime + direction * MIN_DISTANCE + totalTime) % totalTime;
+
+        // 检查新位置是否与其他节点冲突
+        let hasConflict = false;
+        for (let j = 0; j < otherTimes.length; j++) {
+          if (j !== i) {
+            const checkTime = otherTimes[j];
+            let checkDistance = Math.abs(newTime - checkTime);
+            if (checkDistance > totalTime / 2) {
+              checkDistance = totalTime - checkDistance;
+            }
+
+            if (checkDistance < MIN_DISTANCE) {
+              hasConflict = true;
+              break;
+            }
+          }
+        }
+
+        // 如果新位置仍有冲突，回到原位置
+        if (hasConflict) {
+          newTime = currentTime;
+        }
+
+        break;
+      }
+    }
+
+    return newTime;
+  };
+
+  const onMove = usePersistFn((_: GestureResponderEvent, g: PanResponderGestureState) => {
+    moveMark(g, props.onMove || null, false);
+  });
+
+  const onRelease = usePersistFn((_: GestureResponderEvent, g: PanResponderGestureState) => {
+    dragEnabled.current = false;
+    moveMark(g, props.onRelease || null, true);
+  });
+
+  const _panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: handleSetPanResponder,
+        // 另一个组件成为新的响应者
+        onPanResponderTerminationRequest: () => !(!props.disabled && dragEnabled.current),
+        onPanResponderGrant: () => { },
+        onPanResponderMove: onMove,
+        onPanResponderRelease: onRelease,
+      }),
+    [props.disabled]
+  );
+
+  const bgSize = innerSize.current - 12;
+  return (
+    <View
+      style={[
+        disabled && { opacity: disabledOpacity },
+        pickerStyle,
+        { borderRadius: cx(outerRadius.current) },
+      ]}
+    >
+      {/* timeStyle */}
+      <View
+        style={[
+          {
+            width: cx(size.current),
+            height: cx(size.current),
+            borderRadius: cx(size.current / 2),
+            position: 'relative',
+          },
+          timeStyle,
+        ]}
+      >
+        {/* ConicalGradient */}
+        <ConicalGradient
+          ref={(ref: ConicalGradient) => (ringRef.current = ref)}
+          innerRadius={cx(innerRadius.current)}
+          outerRadius={cx(outerRadius.current)}
+          colors={getRingColors(allData)}
+          offsetAngle={0}
+          segmentAngle={Math.PI / 120}
+        />
+        {/* timeImg */}
+        <Image
+          source={timeImg || {}}
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            width: cx(bgSize),
+            height: cx(bgSize),
+            transform: [{ translateX: -cx(bgSize / 2) }, { translateY: -cx(bgSize / 2) }],
+          }}
+          resizeMode="contain"
+        />
+
+        {/* Icon */}
+        <View style={[styles.thumbBox, { width: cx(size.current), height: cx(size.current) }]}>
+          {allData.map((item, index) => {
+            const point = getPoint(item.deg, cx(ringRadius.current), cx(outerRadius.current));
+            return (
+              <View
+                key={item.time}
+                ref={(ref: View) => (markRefs[index] = ref)}
+                style={[
+                  styles.thumbStyle,
+                  {
+                    width: cx(thumbSize),
+                    height: cx(thumbSize),
+                    borderRadius: cx(thumbSize / 2),
+                    transform: [{ translateX: -cx(thumbSize / 2) }, { translateY: -cx(thumbSize / 2) }],
+                    left: point.x,
+                    top: point.y,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  },
+                  thumbStyle,
+                ]}
+              >
+                <Image
+                  source={{ uri: item.icon }}
+                  ref={(ref: Image) => (markImgRefs[index] = ref)}
+                  style={[
+                    {
+                      width: cx(thumbSize - 10),
+                      height: cx(thumbSize - 10),
+                      tintColor: item.noActiveColor,
+                    },
+                    iconStyle,
+                  ]}
+                  resizeMode="contain"
+                />
+              </View>
+            );
+          })}
+        </View>
+      </View>
+      {/* panResponder  */}
+      <View
+        style={[styles.thumbBox, { width: cx(size.current), height: cx(size.current) }]}
+        pointerEvents="box-only"
+        {..._panResponder.panHandlers}
+      />
+    </View>
+  );
+};
+
+RhythmsCircle.defaultProps = {
+  size: 250,
+  ringWidth: 40,
+  thumbSize: 36,
+  data: [],
+  disabled: false,
+  disabledOpacity: 1,
+  pickerStyle: {},
+  timeStyle: {
+    backgroundColor: 'transparent',
+  },
+  thumbStyle: {
+    backgroundColor: '#fff',
+  },
+  iconStyle: {},
+  lastRingColor: '#000',
+  gradientMode: true,
+  onMove() { },
+  onRelease() { },
+  onChange() { },
+};
+
+export default RhythmsCircle;
+
+const styles = StyleSheet.create({
+  thumbBox: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    zIndex: 1,
+  },
+  thumbStyle: {
+    backgroundColor: '#fff',
+    position: 'absolute',
+  },
+});

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} />;
+  }
+}