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

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/group-ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.0.121",
+  "version": "1.0.123",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/biorhythm/BiorhythmActions.ts

@@ -23,12 +23,15 @@ export const useBiorhythm = (): [BiorhythmBean, (value: BiorhythmBean) => Promis
     return obj2Dp(val)
   })
   const supportOldData = useCallback((oldData: BiorhythmBean) =>{
+    const repeatPeriod = [...oldData.repeatPeriod]
+    repeatPeriod.sort((a, b) => a.index - b.index)
     return {
       ...oldData,
+      repeatPeriod: repeatPeriod,
       planList: oldData.planList.map(p => {
         // @ts-ignore  老数据中使用的是startTime
         if (!p.hasOwnProperty('time') && p.startTime){
-         // @ts-ignore
+          // @ts-ignore
           const t = p.startTime.split(':')
           return {
             ...p,
@@ -72,6 +75,7 @@ export function dp2Obj(dp: string): BiorhythmBean {
         enabled: p === '1',
       }
     })
+  repeatPeriod.sort((a, b) => a.index - b.index)
   dpCopy = dpCopy.slice(2)
   // 节点个数 (每个节点长度18)，最多8个节点
   hex2Int(dpCopy.slice(0, 2))
@@ -203,8 +207,9 @@ function obj2Dp(obj: BiorhythmBean): string {
   const versionHex = '00'
   const enableHex = obj.enable ? '01' : '00'
   const gradientHex = obj.gradient === BiorhythmGradientType.EntireGradient ? '00' : '0F'
+  const newRepeatPeriod = [obj.repeatPeriod[obj.repeatPeriod.length - 1], ...obj.repeatPeriod.slice(0, -1)]
   const repeatPeriodHex = parseInt(
-    obj.repeatPeriod
+    newRepeatPeriod
       .map(p => (p.enabled ? '1' : '0'))
       .reverse()
       .join(''),

package/src/modules/biorhythm/BiorhythmPage.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react'
 import { FlatList, Image, Linking, ScrollView, Switch, Text, TouchableOpacity, View } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
-import TimeCircular from './circular/TimeCircular'
 import { useDebounceFn, useReactive, useUpdateEffect } from 'ahooks'
 import {
   BiorhythmBean,
@@ -23,7 +22,6 @@ import I18n from '@ledvance/base/src/i18n'
 import res from '@ledvance/base/src/res'
 import { ui_biz_routerKey } from '../../navigation/Routers'
 import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
-import { setDataSource } from '@ledvance/base/src/components/weekSelect'
 import { BiorhythmEditPageParams } from './BiorhythmDetailPage'
 import { useBiorhythm } from './BiorhythmActions'
 import { convertMinutesTo12HourFormat, showDialog as showCommonDialog, showDialog } from '@ledvance/base/src/utils/common'
@@ -34,6 +32,7 @@ import ApplyForDeviceList from '@ledvance/base/src/components/ApplyForDeviceList
 import DeleteButton from '@ledvance/base/src/components/DeleteButton'
 import InfoText from '@ledvance/base/src/components/InfoText'
 import ThemeType from '@ledvance/base/src/config/themeType'
+import RhythmsCircle from './circular/RhythmsCircle'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
@@ -73,6 +72,14 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
     loading: false
   })
 
+  const timeImg = useMemo(() => {
+    if (is24Hour) {
+      return devicesJudge ? res.ic_warning_amber_sun : res.ic_warning_amber_new
+    } else {
+      return devicesJudge ? res.ic_warning_amber_sun_12 : res.ic_warning_amber_new_12
+    }
+  }, [is24Hour, devicesJudge])
+
   const showGradientTypeSelectModal = useCallback((show: boolean) => {
     state.showGradientTypeSelectModal = show
   }, [])
@@ -177,11 +184,7 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
   }, [JSON.stringify(biorhythm)])
 
   useEffect(() => {
-    const weeks: string[] = setDataSource(
-      biorhythm.repeatPeriod.map(item => {
-        return item?.enabled ? 1 : 0
-      })).filter(item => item.enabled)
-      .map(item => item.title)
+    const weeks = biorhythm.repeatPeriod.filter(it => it.enabled).map(it => it.title)
 
     if (weeks.length > 0) {
       // / more than one
@@ -215,7 +218,7 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
           fontSize: cx(14),
           flexDirection: 'row',
         }}>
-            <Text style={{color: props.theme?.global.fontColor }}>{text[0]}</Text>
+            <Text style={{ color: props.theme?.global.fontColor }}>{text[0]}</Text>
             <Text onPress={openLink}
                   style={{
                     fontFamily: 'helvetica_neue_lt_std_roman',
@@ -223,7 +226,7 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
                     textDecorationLine: 'underline',
                     flexWrap: 'wrap',
                   }}>SUN@HOME</Text>
-            <Text style={{color: props.theme?.global.fontColor }}>{text[1]}</Text>
+            <Text style={{ color: props.theme?.global.fontColor }}>{text[1]}</Text>
         </Text>
   }
 
@@ -243,6 +246,18 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
     return !!state.planList.filter(p => p.id !== plan.id).find(p => p.name === plan.name)
   }, [state.planList])
 
+  const convertPlandata = useCallback(() => {
+    return state.planList.map(item => {
+      return {
+        ...item,
+        index: item.id,
+        noActiveColor: '#474e5d',
+        activeColor: '#F7EB2A',
+        color: item?.brightness === 0 ? '#000' : !params.isSupportTemperature && cctToColor(1) || cctToColor(item.colorTemperature.toFixed(), item?.brightness)
+      }
+    }).filter(plan => plan.enable)
+  }, [JSON.stringify(state.planList), params.isSupportTemperature])
+
   return (
     <Page
       backText={uaGroupInfo.name}
@@ -327,10 +342,10 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
               })}
             </View>
             <View style={{ marginHorizontal: cx(24), marginTop: cx(20) }}>
-              <Text style={{color: props.theme?.global.fontColor}}>{state.weekString}</Text>
+              <Text style={{ color: props.theme?.global.fontColor }}>{state.weekString}</Text>
             </View>
             <View style={{ marginHorizontal: cx(24), marginTop: cx(16) }}>
-              <Text style={{color: props.theme?.global.fontColor}}>
+              <Text style={{ color: props.theme?.global.fontColor }}>
                 {I18n.getLang('bio_ryhthm_default_selectionfield_topic_text')}
               </Text>
               <TouchableOpacity
@@ -369,7 +384,7 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
               </TouchableOpacity>
             </View>
             <View style={{ height: cx(20) }} />
-            <TimeCircular
+            {/* <TimeCircular
               planEdit={true}
               planList={state.planList}
               onPanMoved={(id, time) => {
@@ -383,7 +398,27 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
               }}
               replaceStatus={devicesJudge}
               gradient={state.gradient === BiorhythmGradientType.DirectGradient}
-              isSupportTemperature={!params.isSupportTemperature} />
+              isSupportTemperature={!params.isSupportTemperature} /> */}
+
+            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+              <RhythmsCircle
+                size={250}
+                ringWidth={40}
+                thumbSize={36}
+                timeImg={timeImg}
+                gradientMode={state.gradient === BiorhythmGradientType.EntireGradient}
+                data={convertPlandata()}
+                onRelease={(planList) => {
+                  state.planList = state.planList.map(item => {
+                    return {
+                      ...item,
+                      time: planList.find(p => p.index === item.id)?.time
+                    }
+                  })
+                  state.flag = Symbol()
+                }}
+              />
+            </View>
             <View
               style={{
                 flexDirection: 'row',
@@ -394,7 +429,7 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
               }}>
               {state.planList.length === 8 && <View
                   style={{ marginVertical: cx(10), flexDirection: 'row', alignItems: 'center', width: width - cx(48) }}>
-                  <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.warning }} source={{uri: res.ic_warning_amber}} />
+                  <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.warning }} source={{ uri: res.ic_warning_amber }} />
                   <Text
                       style={{
                         flexWrap: 'wrap',
@@ -450,7 +485,7 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
                             }
                             navigation.navigate(ui_biz_routerKey.group_ui_biz_biological_detail, editPageParams)
                           }}>
-                          <Image source={{uri: res.biorhythom_add}} style={{ height: cx(24), width: cx(24), tintColor: props.theme?.icon.primary }} />
+                          <Image source={{ uri: res.biorhythom_add }} style={{ height: cx(24), width: cx(24), tintColor: props.theme?.icon.primary }} />
                       </TouchableOpacity>
                   </>
               }
@@ -516,7 +551,7 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
                         <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: cx(16) }}>
                           <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                             <Image
-                              source={{uri: setImg(item?.iconId)} || type && { uri: item?.icon } || item?.icon}
+                              source={{ uri: setImg(item?.iconId) } || type && { uri: item?.icon } || item?.icon}
                               style={{
                                 width: cx(24),
                                 height: cx(24),

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

@@ -0,0 +1,488 @@
+/* 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 };
+
+    // 防止数据为空时崩溃
+    if (!data || !data.length) {
+      return [{ color: '#000', angle: 0 }, { color: '#000', angle: fullDeg }]
+    }
+
+    // 角度规范化函数：确保角度在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',
+  },
+});