@ledvance/group-ui-biz-bundle 1.0.37 → 1.0.39

package/src/modules/biorhythm/IconSelect.tsx

@@ -0,0 +1,84 @@
+import {useNavigation} from '@react-navigation/native'
+import React, {useEffect, useState} from 'react'
+import {Image, ScrollView, Text, TouchableOpacity, View} from 'react-native'
+import {Utils} from 'tuya-panel-kit'
+import iconList from './iconListData'
+import LDVTopBar from '@ledvance/base/src/components/ldvTopBar'
+import I18n from '@ledvance/base/src/i18n'
+import { useParams } from '@ledvance/base/src/hooks/Hooks'
+
+const cx = Utils.RatioUtils.convertX
+
+interface IconSelectPageParams {
+  id: string | number
+  setIcon: (id: string | number) => void,
+  iconIdList: any
+}
+
+function IconSelectPage() {
+  const [list, setList] = useState(iconList)
+  const navigation = useNavigation()
+  const params = useParams<IconSelectPageParams>()
+  const setColor = id => {
+    const newList = list?.map(item => {
+      return {
+        ...item,
+        selectStatus: item?.id === id,
+      }
+    })
+    setList(newList)
+  }
+  useEffect(() => {
+    const iconIdList = params?.iconIdList
+    const iconId = params?.id
+    const newList = list?.map(item => {
+      return {
+        ...item,
+        selectStatus: item?.id === iconId,
+        disabled: iconIdList?.some(val => val === item?.id && val !== iconId),
+      }
+    })
+    setList(newList)
+  }, [])
+
+  return (
+    <View style={{flex: 1, flexDirection: 'column'}}>
+      <LDVTopBar
+        title={I18n.getLang('add_new_trigger_time_system_back_text')}
+        onBackPress={() => {
+          navigation.goBack()
+        }}
+      />
+      <ScrollView nestedScrollEnabled={true} style={{marginHorizontal: cx(24)}}>
+        <View style={{marginTop: cx(40), marginBottom: cx(20)}}>
+          <Text style={{fontSize: cx(24), color: '#ff6600'}}>Select an icon</Text>
+        </View>
+        <View
+          style={{flexDirection: 'row', flex: 1, flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start'}}>
+          {list?.map(item => {
+            return <TouchableOpacity
+              onPress={() => {
+                setColor(item?.id)
+                params?.setIcon(item?.id)
+              }}
+              disabled={item?.disabled}
+              key={item.id}
+            >
+              <Image
+                source={item?.icon}
+                style={{
+                  width: cx(32),
+                  height: cx(32),
+                  margin: cx(10),
+                  tintColor: item?.selectStatus ? '#ff757d' : item?.disabled && '#e6e7e8' || '#474e5d',
+                }}
+              />
+            </TouchableOpacity>
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
+
+export default IconSelectPage

package/src/modules/biorhythm/circular/ItemIcon.d.ts

@@ -0,0 +1,22 @@
+import { PureComponent } from "react";
+import { PanResponderInstance } from "react-native";
+export default class ItemIcon extends PureComponent<any> {
+    lastX: any;
+    lastY: any;
+    _panResponder: PanResponderInstance;
+    state: any;
+    constructor(props: any);
+    componentWillMount(): void;
+    onMoveShouldSetPanResponder(): boolean;
+    onPanResponderMove(evt: any, gestureState: any): void;
+    onPanResponderEnd(evt: any, gestureState: any): void;
+    handlerData(_evt: any, ges: any, moving: any): void;
+    getPointValues(locationX: any, locationY: any): {
+        angle: number;
+        maxX: number;
+        maxY: number;
+        length: number;
+    };
+    getPointAngle(x: any, y: any): number;
+    render(): any;
+}

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

@@ -0,0 +1,173 @@
+import React, { PureComponent } from "react";
+import { Image, PanResponder, PanResponderInstance, StyleSheet, View } from "react-native";
+
+const timeIconSize = 40; //时间图标ding
+const deviationSize = 0;
+
+export default class ItemIcon extends PureComponent<any> {
+    lastX: any;
+    lastY: any;
+    _panResponder: PanResponderInstance;
+    state: any;
+
+    constructor(props) {
+        super(props);
+
+        this.onMoveShouldSetPanResponder = this.onMoveShouldSetPanResponder.bind(this);
+        this.onPanResponderMove = this.onPanResponderMove.bind(this);
+        this.onPanResponderEnd = this.onPanResponderEnd.bind(this);
+        const { leftValeu, topValue, circularRadius } = this.props;
+
+        this.lastX = leftValeu;
+        this.lastY = topValue;
+        this.state = { radius: circularRadius };
+    }
+
+    componentWillMount() {
+        this._panResponder = PanResponder.create({
+
+            onMoveShouldSetPanResponder: this.onMoveShouldSetPanResponder,
+            onPanResponderMove: this.onPanResponderMove,
+            onPanResponderRelease: this.onPanResponderEnd
+        });
+    }
+
+    //触摸点开始移动的时候，是否响应触摸交互
+    onMoveShouldSetPanResponder() {
+        return true;
+    }
+
+    // 最近一次的移动距离为gestureState.move{X,Y}
+    onPanResponderMove(evt, gestureState) {
+
+        this.handlerData(evt, gestureState, true);
+
+    }
+
+    // 停止移动
+    onPanResponderEnd(evt, gestureState) {
+        this.handlerData(evt, gestureState, false);
+    }
+
+    handlerData(_evt, ges, moving) {
+
+        //此时视图的坐标
+        let locationX = this.lastX + ges.dx + deviationSize;
+        let locationY = this.lastY + ges.dy + deviationSize;
+
+        // 获取在父元素的实际坐标点值
+        let result = this.getPointValues(locationX, locationY);
+        let maxX = result.maxX;
+        let maxY = result.maxY;
+
+        this.setState({
+            offset: {
+                x: maxX,
+                y: maxY
+            }
+        });
+
+        const { onPanMoving, onPanMoveEnd } = this.props;
+        onPanMoving && onPanMoving(maxX, maxY, result.angle);
+
+        if (!(!!moving)) {
+            // 记录滑动前 图表的位置
+            if (this.state.offset) {
+                this.lastX = this.state.offset.x;
+                this.lastY = this.state.offset.y;
+            }
+
+            onPanMoveEnd && onPanMoveEnd();
+        }
+    }
+
+    // 获取实际坐标的 角度 坐标值 步长
+    getPointValues(locationX, locationY) {
+        //半径
+        let radius = this.state.radius;
+        // 求斜边的长度
+        let offsetX = Math.abs(radius - locationX);
+        let offsetY = Math.abs(radius - locationY);
+        // 斜边长度
+        let length = Math.sqrt(offsetX * offsetX + offsetY * offsetY);
+
+        //求角度
+        let angle = this.getPointAngle(radius - locationX, radius - locationY);
+
+        // 最终的坐标
+        let maxX = locationX - deviationSize;
+        let maxY = locationY - deviationSize;
+
+        //超出边界: 在圆环滑动
+        if (length !== radius) {
+            let maxOffsetX = radius * (locationX - radius) / length;
+            let maxOffsetY = radius * (radius - locationY) / length;
+            //   maxX = radius + maxOffsetX - deviationSize + 1.5
+            //   maxY = radius - maxOffsetY - deviationSize + 1.5
+            maxX = radius + maxOffsetX - deviationSize;
+            maxY = radius - maxOffsetY - deviationSize;
+            length = radius;
+        }
+
+        return {
+            angle: angle,
+            maxX: maxX,
+            maxY: maxY,
+            length: length
+        };
+    }
+
+    getPointAngle(x, y) {
+        // 此时的角度是从左边为 0°开始 顺时针 到右边为 180° 逆时针到最右边为 -180°
+        let angle = Math.atan2(y, x) * (180 / Math.PI);
+        //改为正常坐标的角度（表盘中心为圆形）
+        if (angle > 0) {
+            //第四象限
+            if (angle < 90) {
+                angle = 270 + angle;
+            } else {
+                //第一象限
+                angle = angle - 90;
+            }
+        } else if (angle == 0) {
+            angle = 270;
+        } else if (angle < 0) {
+            //第三象限
+            if (angle > -90) {
+                angle = 270 + angle;
+
+            } else {
+                //第二象限
+                angle = 90 + (180 + angle);
+            }
+        }
+
+        return angle;
+    }
+    render() {
+        const { leftValeu, topValue, imageSource } = this.props;
+        return (
+            <View style={[styles.timeIconView, { left: leftValeu, top: topValue, alignItems: 'center', justifyContent: 'center' }]} {...this._panResponder.panHandlers}>
+                <Image source={imageSource}
+                    style={{
+                        width: 30,
+                        height: 30,
+                        marginLeft: 0,
+                        tintColor: '#474e5d'
+                    }} />
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    timeIconView: {
+        position: "absolute",
+        height: timeIconSize,
+        width: timeIconSize,
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: "#FFFFFF",
+        borderRadius: Math.round(timeIconSize / 2)
+    }
+});

package/src/modules/biorhythm/circular/Progress.d.ts

@@ -0,0 +1,24 @@
+import { Component } from 'react';
+export default class Progress extends Component<any> {
+    timeIconList: any[];
+    timer: any;
+    state: any;
+    constructor(props: any);
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    componentWillUnmount(): void;
+    render(): any;
+    playTimeChangeCallBack(id: number, time: string): void;
+    getTimeIntVale(time: any): number;
+    createFormTime(totalMinutes: any): string;
+    checkTimesFormat(newTimeMinutes: any): {
+        ret: boolean;
+        failMinutes: number;
+    } | {
+        ret: boolean;
+        failMinutes?: undefined;
+    };
+    getColorTempStringVale(colorTempInt: any): {
+        rgbColor: number[];
+        normalColor: string;
+    };
+}