Skip to content

F
fanLight
Commit ffc90f9e authored by sliao's avatar sliao
Browse files
Options

fix

parent 751e5876
Show whitespace changes
Inline Side-by-side
Showing with 594 additions and 506 deletions
src/app.tsx
View file @ ffc90f9e
...@@ -10,12 +10,12 @@ import { devices } from '@/devices'; ...@@ -10,12 +10,12 @@ import { devices } from '@/devices';
const { initPanelEnvironment } = kit; const { initPanelEnvironment } = kit;
interface Props { interface Props {
children: React.ReactNode children: React.ReactNode;
} }
initPanelEnvironment({ useDefaultOffline: true }); initPanelEnvironment({ useDefaultOffline: true });
class App extends React.Component<Props>{ class App extends React.Component<Props> {
componentDidMount() { componentDidMount() {
console.info('app did mount '); console.info('app did mount ');
} }
...@@ -24,10 +24,9 @@ class App extends React.Component<Props>{ ...@@ -24,10 +24,9 @@ class App extends React.Component<Props>{
console.info(e, '=== App onLaunch'); console.info(e, '=== App onLaunch');
} }
render() { render() {
return <SdmProvider value={devices.fan} >{this.props.children}</SdmProvider>; return <SdmProvider value={devices.fan}>{this.props.children}</SdmProvider>;
} }
} }
export default App export default App;
src/components/fan-vertical/index.tsx
View file @ ffc90f9e
import React from 'react'; import React from 'react';
import { DpBooleanAction, DpCommonAction } from '@tuya-miniapp/sdm'; import { DpBooleanAction, DpCommonAction } from '@tuya-miniapp/sdm';
import { useSdmProps } from '@ray-js/sdm-react'; import { useSdmProps } from '@ray-js/sdm-react';
import {devices} from '@/devices' import { devices } from '@/devices';
import styles from '../../pages/home/index.module.less'; import styles from '../../pages/home/index.module.less';
import { Image, View, Text } from '@ray-js/components' import { Image, View, Text } from '@ray-js/components';
import horizontalOff from '../../../public/icon-horizontal-off.png' import horizontalOff from '../../../public/icon-horizontal-off.png';
import horizontalOn from '../../../public/icon-horizontal-on.png' import horizontalOn from '../../../public/icon-horizontal-on.png';
import verticalOn from '../../../public/icon-vertical-on.png' import verticalOn from '../../../public/icon-vertical-on.png';
import verticalOff from '../../../public/icon-vertical-off.png' import verticalOff from '../../../public/icon-vertical-off.png';
export const FanVertical = React.memo(() => { export const FanVertical = React.memo(() => {
const fanHorizontalCode = 'fan_horizontal';
const fanVerticalCode = 'fan_vertical';
const fanVerticalSwitchCode = 'switch_vertical';
const fanHorizontalSwitchCode = 'switch_horizontal';
const fanHorizontalCode = 'fan_horizontal' const fanHorizontalVal = useSdmProps(props => props[fanHorizontalCode]);
const fanVerticalCode = 'fan_vertical' const fanVerticalVal = useSdmProps(props => props[fanVerticalCode]);
const fanVerticalSwitchCode = 'switch_vertical' const fanHorizontalSwitch = useSdmProps(props => props[fanHorizontalSwitchCode]);
const fanHorizontalSwitchCode = 'switch_horizontal' const fanVerticalSwitch = useSdmProps(props => props[fanVerticalSwitchCode]);
const fanHorizontalVal = useSdmProps((props) => props[fanHorizontalCode])
const fanVerticalVal = useSdmProps((props) => props[fanVerticalCode])
const fanHorizontalSwitch = useSdmProps((props) => props[fanHorizontalSwitchCode])
const fanVerticalSwitch = useSdmProps((props) => props[fanVerticalSwitchCode])
const device = devices.fan const device = devices.fan;
const actions = device.model.actions const actions = device.model.actions;
const fanHorizontalAction = actions[fanHorizontalCode] as DpCommonAction<string>
const fanVerticalAction = actions[fanVerticalCode] as DpCommonAction<string>
const fanHorizontalSwitchAction = actions[fanHorizontalSwitchCode] as DpBooleanAction
const fanVerticalSwitchAction = actions[fanVerticalSwitchCode] as DpBooleanAction
const fanHorizontalAction = actions[fanHorizontalCode] as DpCommonAction<string>;
const fanVerticalAction = actions[fanVerticalCode] as DpCommonAction<string>;
const fanHorizontalSwitchAction = actions[fanHorizontalSwitchCode] as DpBooleanAction;
const fanVerticalSwitchAction = actions[fanVerticalSwitchCode] as DpBooleanAction;
const verticalMenu = [ const verticalMenu = [
{ {
title:'Vertical', title: 'Vertical',
icon:verticalOn, icon: verticalOn,
offIcon: verticalOff, offIcon: verticalOff,
mode:'vertical', mode: 'vertical',
value: fanVerticalVal value: fanVerticalVal,
}, { },
title:'Horizontal', {
icon:horizontalOn, title: 'Horizontal',
icon: horizontalOn,
offIcon: horizontalOff, offIcon: horizontalOff,
mode:'horizontal', mode: 'horizontal',
value: fanHorizontalVal value: fanHorizontalVal,
} },
] ];
function handleVerticalMenu(index) { function handleVerticalMenu(index) {
if (index == 0) { if (index == 0) {
...@@ -57,71 +54,93 @@ export const FanVertical = React.memo(() => { ...@@ -57,71 +54,93 @@ export const FanVertical = React.memo(() => {
// fanVerticalSwitchAction.off() // fanVerticalSwitchAction.off()
// } // }
fanVerticalSwitchAction.toggle() fanVerticalSwitchAction.toggle();
} else {
}else {
// if (!fanHorizontalSwitch) { // if (!fanHorizontalSwitch) {
// fanHorizontalAction.set(String(90)) // fanHorizontalAction.set(String(90))
// fanHorizontalSwitchAction.on() // fanHorizontalSwitchAction.on()
// }else { // }else {
// fanHorizontalSwitchAction.off() // fanHorizontalSwitchAction.off()
// } // }
fanHorizontalSwitchAction.toggle() fanHorizontalSwitchAction.toggle();
} }
} }
function submenuItem(index, arr = verticalMenu, clickFun = handleVerticalMenu) { function submenuItem(index, arr = verticalMenu, clickFun = handleVerticalMenu) {
const isOn = index == 0 ? fanVerticalSwitch : fanHorizontalSwitch const isOn = index == 0 ? fanVerticalSwitch : fanHorizontalSwitch;
const {title, icon, offIcon} = arr[index] const { title, icon, offIcon } = arr[index];
return ( return (
<View className={styles.button}> <View className={styles.button}>
<Image className={styles.menuImage} src={isOn ? icon:offIcon} onClick={() => {clickFun(index)}}/> <Image
className={styles.menuImage}
src={isOn ? icon : offIcon}
onClick={() => {
clickFun(index);
}}
/>
<Text className={styles.bTitle}>{title}</Text> <Text className={styles.bTitle}>{title}</Text>
</View> </View>
) );
} }
const clickNum = (val, index) => { const clickNum = (val, index) => {
console.log(val, index) console.log(val, index);
if (index == 0 && fanVerticalSwitch) { if (index == 0 && fanVerticalSwitch) {
fanVerticalAction.set(String(val)) fanVerticalAction.set(String(val));
}else if (index == 1 && fanHorizontalSwitch) { } else if (index == 1 && fanHorizontalSwitch) {
fanHorizontalAction.set(String(val)) fanHorizontalAction.set(String(val));
}
} }
};
function verticalItem(index) { function verticalItem(index) {
const item = verticalMenu[index] const item = verticalMenu[index];
const isBlack = (index == 0 && fanVerticalSwitch) || (index == 1 && fanHorizontalSwitch) const isBlack = (index == 0 && fanVerticalSwitch) || (index == 1 && fanHorizontalSwitch);
const textColor = (subIndex) => { const textColor = subIndex => {
return {color: isBlack && (Number(item.value) == (subIndex * 30)) ? '#000000':'rgba(0,0,0,0.4)', return {
width:'33.3%', color: isBlack && Number(item.value) == subIndex * 30 ? '#000000' : 'rgba(0,0,0,0.4)',
textAlign:'center', width: '33.3%',
lineHeight:'64px', textAlign: 'center',
fontWeight:'500' lineHeight: '64px',
}} fontWeight: '500',
};
};
return ( return (
<View className={styles.verticalItem}> <View className={styles.verticalItem}>
{submenuItem(index, verticalMenu, handleVerticalMenu)} {submenuItem(index, verticalMenu, handleVerticalMenu)}
<View className={styles.verticalNumBg}> <View className={styles.verticalNumBg}>
<View style={textColor(1)} onClick={() => {clickNum(30, index)}}>30</View> <View
<View style={textColor(2)} onClick={() => {clickNum(60, index)}}>60</View> style={textColor(1)}
<View style={textColor(3)} onClick={() => {clickNum(90, index)}}>90</View> onClick={() => {
clickNum(30, index);
}}
>
30
</View>
<View
style={textColor(2)}
onClick={() => {
clickNum(60, index);
}}
>
60
</View>
<View
style={textColor(3)}
onClick={() => {
clickNum(90, index);
}}
>
90
</View>
</View> </View>
</View> </View>
) );
} }
return ( return (
<View> <View>
{ {verticalItem(0)}
verticalItem(0) {verticalItem(1)}
}
{
verticalItem(1)
}
</View> </View>
) );
});
})
\ No newline at end of file
src/components/light-panel/index.tsx
View file @ ffc90f9e
import React, {useState} from 'react'; import React, { useState } from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
// import { View } from '@ray-js/ray'; // import { View } from '@ray-js/ray';
import { DpBooleanAction, DpCommonAction } from '@tuya-miniapp/sdm'; import { DpBooleanAction, DpCommonAction } from '@tuya-miniapp/sdm';
import { useSdmProps } from '@ray-js/sdm-react'; import { useSdmProps } from '@ray-js/sdm-react';
import {devices} from '@/devices' import { devices } from '@/devices';
import styles from './index.module.less'; import styles from './index.module.less';
import { Image, View } from '@ray-js/components' import { Image, View } from '@ray-js/components';
import iconClose from '../../../public/icon-close.png' import iconClose from '../../../public/icon-close.png';
import iconLightWhite from '../../../public/icon-light-white.png' import iconLightWhite from '../../../public/icon-light-white.png';
import iconSun from '../../../public/icon-sun.png' import iconSun from '../../../public/icon-sun.png';
import { usePageEvent } from '@ray-js/ray';
export interface Props { export interface Props {
isShow: boolean; isShow: boolean;
setModal: (boolean) => void; setModal: (boolean) => void;
} }
export const LightPanel = React.memo<Props>(props => { export const LightPanel = React.memo<Props>(props => {
const brightRange = [10, 1000];
const cctRange = [0, 1000];
const brightRange = [10, 1000] const brightCode = 'bright_value';
const cctRange = [0, 1000] const temperatureCode = 'temp_value';
const switchCode = 'light';
const brightCode = 'bright_value'
const temperatureCode = 'temp_value'
const switchCode = 'light'
let { isShow, setModal} = props; let { isShow, setModal } = props;
const brightVal = useSdmProps(dpState => { const brightVal = useSdmProps(dpState => {
const val = dpState[brightCode] const val = dpState[brightCode];
const percent = getValueInRange(val || 10, brightRange).percent const percent = getValueInRange(val || 10, brightRange).percent;
return percent return percent;
}); });
const temperatureVal = useSdmProps(dpState => { const temperatureVal = useSdmProps(dpState => {
const val = dpState[temperatureCode] const val = dpState[temperatureCode];
// const percent = getValueInRange(val || 0, cctRange).percent // const percent = getValueInRange(val || 0, cctRange).percent
return val return val;
}); });
const switchVal = useSdmProps(dpState => dpState[switchCode]); const switchVal = useSdmProps(dpState => dpState[switchCode]);
const device = devices.fan const device = devices.fan;
const actions = device.model.actions const actions = device.model.actions;
const switchAction = actions[switchCode] as DpBooleanAction const switchAction = actions[switchCode] as DpBooleanAction;
const brightAction = actions[brightCode] as DpCommonAction<number> const brightAction = actions[brightCode] as DpCommonAction<number>;
const temperatureAction = actions[temperatureCode] as DpCommonAction<number> const temperatureAction = actions[temperatureCode] as DpCommonAction<number>;
const [point, setPoint] = useState({pageX: getOrignPointX(), pageY: 250}) const [point, setPoint] = useState({ pageX: 0, pageY: 250 });
const [selectColor, setColor] = useState(pointToRGB(point.pageX)) // const [selectColor, setColor] = useState(pointToRGB(point.pageX));
const [brightPercent, setBrightPercent] = useState(brightVal);
function getOrignPointX() { function getOrignPointX() {
const percent = getValueInRange(temperatureVal || 10, cctRange).percent const percent = getValueInRange(temperatureVal || 10, cctRange).percent;
const originX = 28 + 319 * (percent / 100) const originX = 28 + 319 * (percent / 100);
console.log(temperatureVal, percent, originX); console.log(temperatureVal, percent, originX);
return originX return originX;
} }
//0-value是值 1-value是百分比 左边最小值是0，右边最大值range[1]，起始位置rang[0] //0-value是值 1-value是百分比 左边最小值是0，右边最大值range[1]，起始位置rang[0]
function getValueInRange(value, range, type = 0) { function getValueInRange(value, range, type = 0) {
const percent = type == 0 ? (value / range[1]) : (value / 100) const percent = type == 0 ? value / range[1] : value / 100;
return { return {
value: type == 0 ? value : (percent * range[1]).toFixed(), value: type == 0 ? value : (percent * range[1]).toFixed(),
percent: type == 0 ? (percent * 100).toFixed() : value percent: type == 0 ? (percent * 100).toFixed() : value,
} };
} }
usePageEvent('onShow', () => {
setPoint({
pageX: getOrignPointX(),
pageY: 250,
});
});
function touchStart(e) { function touchStart(e) {
handlePoint(e) e.origin.stopPropagation();
handlePoint(e);
} }
function handleTouch(e) { function handleTouch(e) {
handlePoint(e) handlePoint(e, false);
} }
function touchEnd(e) { function touchEnd(e) {
handlePoint(e) handlePoint(e);
} }
function handlePoint(e) { function handlePoint(e, isAction = true) {
const {pageX, pageY} = e.changedTouches.length && e.changedTouches[0] const { pageX, pageY } = e.changedTouches.length && e.changedTouches[0];
let x = pageX let x = pageX;
let y = pageY let y = pageY;
const xRange = [28, 347] const xRange = [28, 347];
if (pageX < xRange[0]) { if (pageX < xRange[0]) {
x = xRange[0] x = xRange[0];
} }
if (pageX > xRange[1]) { if (pageX > xRange[1]) {
x = xRange[1] x = xRange[1];
} }
if (pageY < 197) { if (pageY < 197) {
y = 197 y = 197;
} }
if (pageY > 320) { if (pageY > 320) {
y =320 y = 320;
} }
setPoint({pageX: x, pageY: y})
const percent = (x - xRange[0]) / (xRange[1] - xRange[0]) // console.log(x, 'xxxxxxx');
const value = Number((cctRange[1] * percent).toFixed()) setPoint({ pageX: x, pageY: y });
setColor(pointToRGB(x)) const percent = (x - xRange[0]) / (xRange[1] - xRange[0]);
temperatureAction.set(value) const value = Number((cctRange[1] * percent).toFixed());
} // setColor(pointToRGB(x));
if (isAction) {
temperatureAction.set(value);
function pointToRGB(pageX) { }
const half = (347 - 28) / 2 }
const middle = 28 + half
const leftColor = {h: 40, s:100, l:68} // function pointToRGB(pageX) {
const rightColor = {h:202,s:96, l:90} // const half = (347 - 28) / 2;
let newL = leftColor.l // const middle = 28 + half;
let color = leftColor // const leftColor = { h: 40, s: 100, l: 68 };
if (pageX < middle) { // const rightColor = { h: 202, s: 96, l: 90 };
newL = 68 + (pageX - 28) * 32 / 161 // let newL = leftColor.l;
leftColor.l = newL // let color = leftColor;
color = leftColor // if (pageX < middle) {
} else { // newL = 68 + ((pageX - 28) * 32) / 161;
newL = 100 - (pageX - middle) * 10 / 161 // leftColor.l = newL;
rightColor.l = newL // color = leftColor;
color = rightColor // } else {
} // newL = 100 - ((pageX - middle) * 10) / 161;
return HSLToRGB(color) // rightColor.l = newL;
} // color = rightColor;
// }
function HSLToRGB({h, s, l}) { // return HSLToRGB(color);
s /= 100; // }
l /= 100;
const k = n => (n + h / 30) % 12; // function HSLToRGB({ h, s, l }) {
const a = s * Math.min(l, 1 - l); // s /= 100;
const f = n => // l /= 100;
l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); // const k = n => (n + h / 30) % 12;
const color = `rgb(${255 * f(0)}, ${255 * f(8)}, ${255 * f(4)})` // const a = s * Math.min(l, 1 - l);
console.log(color) // const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
return color // const color = `rgb(${255 * f(0)}, ${255 * f(8)}, ${255 * f(4)})`;
}; // console.log(color);
// return color;
// }
const handleLightOn = () => { const handleLightOn = () => {
switchAction.toggle() switchAction.toggle();
} };
function progressStart(e) { function progressStart(e) {
console.log(e, 'progressStart'); console.log(e, 'progressStart');
handleProgress(e) e.origin.stopPropagation();
handleProgress(e);
} }
function progressMove(e) { function progressMove(e) {
console.log(e, 'progressMove'); // console.log(e, 'progressMove');
handleProgress(e) handleProgress(e, false);
} }
function progressEnd(e) { function progressEnd(e) {
console.log(e, 'progressEnd'); // console.log(e, 'progressEnd');
handleProgress(e) handleProgress(e);
} }
function handleProgress(e) { function handleProgress(e, isAction = true) {
let {pageX, pageY} = e.changedTouches.length && e.changedTouches[0] let { pageX, pageY } = e.changedTouches.length && e.changedTouches[0];
const xRange = [20,335] const xRange = [20, 335];
let differ = pageX - xRange[0] let differ = pageX - xRange[0];
if (differ < 0) { if (differ < 0) {
differ = 0 differ = 0;
} else if (differ > xRange[1]) { } else if (differ > xRange[1]) {
differ = xRange[1] differ = xRange[1];
} }
const percent = differ / (xRange[1] - xRange[0]); const percent = differ / (xRange[1] - xRange[0]);
const value = Number((brightRange[1] * percent).toFixed()) const value = Number((brightRange[1] * percent).toFixed());
brightAction.set(value) setBrightPercent(Number((percent * 100).toFixed()));
if (isAction) {
brightAction.set(value);
}
} }
return ( return (
<View className={styles.modalback} style={{background:'rgba(0, 0, 0, 0.1)',backdropFilter:'blur(35px)', visibility: isShow ? 'visible':'hidden' }}> <View
className={styles.modalback}
style={{
background: 'rgba(0, 0, 0, 0.1)',
backdropFilter: 'blur(35px)',
visibility: isShow ? 'visible' : 'hidden',
}}
>
<View className={styles.lightModal}> <View className={styles.lightModal}>
<View className={styles.lightModalTop}> <View className={styles.lightModalTop}>
<View className={styles.lightCloseBg}>Light</View> <View className={styles.lightCloseBg}>Light</View>
<View className={styles.lightCloseBg}> <View className={styles.lightCloseBg}>
<Image className={styles.lightModalClose} src={iconClose} onClick={() => { <Image
setModal(false) className={styles.lightModalClose}
}}></Image> src={iconClose}
onClick={() => {
setModal(false);
}}
></Image>
</View> </View>
</View> </View>
<View <View
...@@ -180,22 +203,41 @@ export const LightPanel = React.memo<Props>(props => { ...@@ -180,22 +203,41 @@ export const LightPanel = React.memo<Props>(props => {
onTouchStart={touchStart} onTouchStart={touchStart}
onTouchMove={handleTouch} onTouchMove={handleTouch}
onTouchEnd={touchEnd} onTouchEnd={touchEnd}
> ></View>
</View> <View
<View className={styles.progressBg} onTouchStart={progressStart} className={styles.progressBg}
onTouchStart={progressStart}
onTouchMove={progressMove} onTouchMove={progressMove}
onTouchEnd={progressEnd}> onTouchEnd={progressEnd}
>
<Image className={styles.progressSun} src={iconSun}></Image> <Image className={styles.progressSun} src={iconSun}></Image>
<View className={styles.progressTitle}>{brightVal}%</View> <View className={styles.progressTitle}>{brightPercent}%</View>
<View className={styles.progressBar} style={{width: (brightVal - 0.5) + '%', borderBottomRightRadius: brightVal == 100 ? '16px':'0'}}></View> <View
className={styles.progressBar}
style={{
width: brightPercent - 0.5 + '%',
borderBottomRightRadius: brightPercent == 100 ? '16px' : '0',
}}
></View>
</View> </View>
<View className={styles.lightBtn} style={{backgroundColor: switchVal ? '#6395F6':'rgba(0,0,0,0.5)'}} onClick={handleLightOn}> <View
className={styles.lightBtn}
style={{ backgroundColor: switchVal ? '#6395F6' : 'rgba(0,0,0,0.5)' }}
onClick={handleLightOn}
>
<Image className={styles.lightBtnIcon} src={iconLightWhite}></Image> <Image className={styles.lightBtnIcon} src={iconLightWhite}></Image>
<View className={styles.lightBtnTitle}>{switchVal ? 'ON':'OFF'}</View> <View className={styles.lightBtnTitle}>{switchVal ? 'ON' : 'OFF'}</View>
<View className={styles.lightBtnSubtitle}>{switchVal ? '/OFF':'/ON'}</View> <View className={styles.lightBtnSubtitle}>{switchVal ? '/OFF' : '/ON'}</View>
</View> </View>
</View> </View>
<View className={styles.moveCircle} style={{top: point.pageY - 14 + 'px', left: point.pageX - 14 + 'px', backgroundColor: selectColor}}></View> <View
className={styles.moveCircle}
style={{
top: point.pageY - 14 + 'px',
left: point.pageX - 14 + 'px',
backgroundColor: 'transparent',
}}
></View>
</View> </View>
) );
}) });
\ No newline at end of file
src/pages/home/index.module.less
View file @ ffc90f9e
...@@ -105,13 +105,22 @@ ...@@ -105,13 +105,22 @@
position: relative; position: relative;
} }
.modalOverlay {
position: absolute;
left: 0;
top: 0;
width:100vw;
height: 100vh;
background-color: transparent;
z-index: 999;
}
.modalBg { .modalBg {
// position: absolute; position: absolute;
// left: 0; left: 0;
// right: 0; right: 0;
margin-bottom: -164px; margin: 0 auto;
bottom: 140px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// align-items: flex-end; // align-items: flex-end;
......
src/pages/home/index.tsx
View file @ ffc90f9e
import { Text, View, Swiper, SwiperItem} from '@ray-js/components'; import { Text, View, Swiper, SwiperItem } from '@ray-js/components';
// import { // import {
// getSystemInfo, // getSystemInfo,
// onNetworkStatusChange, // onNetworkStatusChange,
...@@ -16,116 +16,123 @@ import { Text, View, Swiper, SwiperItem} from '@ray-js/components'; ...@@ -16,116 +16,123 @@ import { Text, View, Swiper, SwiperItem} from '@ray-js/components';
// openTimerPage, // openTimerPage,
// } from '@ray-js/api'; // } from '@ray-js/api';
// import { hooks } from '@ray-js/panel-sdk'; // import { hooks } from '@ray-js/panel-sdk';
import { router, usePageEvent, setNavigationBarTitle} from '@ray-js/ray'; import { router, usePageEvent, setNavigationBarTitle, Slider } from '@ray-js/ray';
import React from 'react'; import React from 'react';
import { useSelector } from '@/redux'; import { useSelector } from '@/redux';
import styles from './index.module.less'; import styles from './index.module.less';
import { Image, Slider, Modal } from '@ray-js/components' import { Image} from '@ray-js/components';
import iconTempr from '../../../public/icon-temperature.png' import iconTempr from '../../../public/icon-temperature.png';
import iconFanBg from '../../../public/icon-fan-bg.png' import iconFanBg from '../../../public/icon-fan-bg.png';
import iconFan from '../../../public/icon-fan.png' import iconFan from '../../../public/icon-fan.png';
import iconOpen from '../../../public/icon-open.png' import iconOpen from '../../../public/icon-open.png';
import iconSleep from '../../../public/icon-sleep.png' import iconSleep from '../../../public/icon-sleep.png';
import iconLight from '../../../public/icon-light.png' import iconLight from '../../../public/icon-light.png';
import iconVertical from '../../../public/icon-vertical.png' import iconVertical from '../../../public/icon-vertical.png';
import iconOpenOff from '../../../public/icon-open-off.png' import iconOpenOff from '../../../public/icon-open-off.png';
import middleware from '../../../public/icon-middleware.png' import middleware from '../../../public/icon-middleware.png';
import nature from '../../../public/icon-nature.png' import nature from '../../../public/icon-nature.png';
import natureOn from '../../../public/icon-nature-on.png' import natureOn from '../../../public/icon-nature-on.png';
import moon from '../../../public/icon-moon.png' import moon from '../../../public/icon-moon.png';
import moonOn from '../../../public/icon-moon-on.png' import moonOn from '../../../public/icon-moon-on.png';
import fresh from '../../../public/icon-fresh.png' import fresh from '../../../public/icon-fresh.png';
import freshOn from '../../../public/icon-fresh-on.png' import freshOn from '../../../public/icon-fresh-on.png';
import smart from '../../../public/icon-smart.png' import smart from '../../../public/icon-smart.png';
import smartOn from '../../../public/icon-smart-on.png' import smartOn from '../../../public/icon-smart-on.png';
import hand from '../../../public/icon-hand.png' import hand from '../../../public/icon-hand.png';
import handOn from '../../../public/icon-hand-on.png' import handOn from '../../../public/icon-hand-on.png';
import mode from '../../../public/icon-mode.png' import mode from '../../../public/icon-mode.png';
import modeOn from '../../../public/icon-mode-on.png' import modeOn from '../../../public/icon-mode-on.png';
import {useState, useEffect} from 'react'
import { LightPanel,FanVertical } from '@/components';
import { useSdmProps, useSdmDevice} from '@ray-js/sdm-react';
import {devices} from '@/devices'
import { DpBooleanAction, DpCommonAction} from '@tuya-miniapp/sdm';
import { useState, useEffect } from 'react';
import { LightPanel, FanVertical } from '@/components';
import { useSdmProps, useSdmDevice } from '@ray-js/sdm-react';
import { devices } from '@/devices';
import { DpBooleanAction, DpCommonAction } from '@tuya-miniapp/sdm';
export function Home() { export function Home() {
const deviceName = useSdmDevice(d => d.devInfo.name);
const deviceName = useSdmDevice(d => d.devInfo.name)
useEffect(() => { useEffect(() => {
setNavigationBarTitle({ title: deviceName }); setNavigationBarTitle({ title: deviceName });
}, [deviceName]) }, [deviceName]);
const fanSwitchCode = 'switch' const fanSwitchCode = 'switch';
const fanSpeedCode = 'fan_speed' const fanSpeedCode = 'fan_speed';
const fanModeCode = 'mode' const fanModeCode = 'mode';
const currentTempCode = 'temp_current' const currentTempCode = 'temp_current';
const isOpen = useSdmProps((props) => { const isOpen = useSdmProps(props => {
return Boolean(props[fanSwitchCode]) return Boolean(props[fanSwitchCode]);
}) });
const spinSpeed = useSdmProps((props) => Number(props[fanSpeedCode])) const fanSpeedVal = useSdmProps(props => Number(props[fanSpeedCode]));
const fanModeVal = useSdmProps((props) => props[fanModeCode]) const fanModeVal = useSdmProps(props => props[fanModeCode]);
const currentTempVal = useSdmProps(props => props[currentTempCode]);
const currentTempVal = useSdmProps((props) => props[currentTempCode]) const device = devices.fan;
const actions = device.model.actions;
const switchAction = actions[fanSwitchCode] as DpBooleanAction;
const speedAction = actions[fanSpeedCode] as DpCommonAction<number>;
const fanModeAction = actions[fanModeCode] as DpCommonAction<string>;
const [sliderValue, setSliderValue] = useState(1);
const device = devices.fan usePageEvent('onShow', () => {
const actions = device.model.actions console.log('home on show');
const switchAction = actions[fanSwitchCode] as DpBooleanAction const val = fanSpeedVal;
const speedAction = actions[fanSpeedCode] as DpCommonAction<number> setSliderValue(val);
const fanModeAction = actions[fanModeCode] as DpCommonAction<string> });
const menu = [ const menu = [
{ {
title:'Switch', title: 'Switch',
icon:iconOpen, icon: iconOpen,
offIcon: iconOpenOff offIcon: iconOpenOff,
}, },
{ {
title:'Sleep', title: 'Sleep',
icon:iconSleep icon: iconSleep,
}, },
{ {
title:'Light', title: 'Light',
icon:iconLight icon: iconLight,
}, },
{ {
title:'Vertical', title: 'Vertical',
icon:iconVertical icon: iconVertical,
}, },
] ];
const firstMenu = const firstMenu = [
[ { {
title:'Nature', title: 'Nature',
icon:natureOn, icon: natureOn,
offIcon: nature, offIcon: nature,
id: 0, id: 0,
mode:'nature' mode: 'nature',
}, { },
title:'Sleep', {
icon:moonOn, title: 'Sleep',
icon: moonOn,
offIcon: moon, offIcon: moon,
id: 1, id: 1,
mode:'sleep' mode: 'sleep',
}, { },
title:'Fresh', {
icon:freshOn, title: 'Fresh',
icon: freshOn,
offIcon: fresh, offIcon: fresh,
id: 2, id: 2,
mode: 'fresh', mode: 'fresh',
}, { },
title:'Smart', {
icon:smartOn, title: 'Smart',
icon: smartOn,
offIcon: smart, offIcon: smart,
id: 3, id: 3,
mode:'smart' mode: 'smart',
}] },
];
const secondMenu = [ const secondMenu = [
// { // {
...@@ -135,44 +142,40 @@ export function Home() { ...@@ -135,44 +142,40 @@ export function Home() {
// id: 4 // id: 4
// }, // },
{ {
title:'Strong', title: 'Strong',
icon:modeOn, icon: modeOn,
offIcon: mode, offIcon: mode,
id: 4, id: 4,
mode:'strong' mode: 'strong',
} },
] ];
const [menuIndex, setMenuIndex] = useState(null) const [menuIndex, setMenuIndex] = useState(null);
// const [preTime, setPreTime] = useState(null) // const [preTime, setPreTime] = useState(null)
const [isShowModal, setModal] = useState(false) const [isShowModal, setModal] = useState(false);
function spinDuration() { function spinDuration() {
if (spinSpeed == 0) { if (fanSpeedVal == 0) {
return '0s' return '0s';
} else { } else {
return 2 - ((2 - 0.2) / 100) * spinSpeed + 's' return 2 - ((2 - 0.2) / 100) * fanSpeedVal + 's';
} }
} }
function clickMenu(e) { function clickMenu(e) {
const index = e.currentTarget.id const index = e.currentTarget.id;
if (index == 0) { if (index == 0) {
switchAction.toggle() switchAction.toggle();
setMenuIndex(null) setMenuIndex(null);
} } else if (isOpen) {
else if (isOpen) {
if (index == 2) { if (index == 2) {
setMenuIndex(null) setMenuIndex(null);
setModal(true) setModal(true);
}else { } else {
if (index == menuIndex) { if (index == menuIndex) {
setMenuIndex( null) setMenuIndex(null);
} else { } else {
setMenuIndex(index) setMenuIndex(index);
} }
} }
} }
...@@ -180,33 +183,44 @@ export function Home() { ...@@ -180,33 +183,44 @@ export function Home() {
function handleSubmenu(mode) { function handleSubmenu(mode) {
if (mode !== fanModeVal) { if (mode !== fanModeVal) {
fanModeAction.set(mode) fanModeAction.set(mode);
} }
} }
function submenuItem(index, arr = firstMenu, clickFun = handleSubmenu, currentIndex = fanModeVal) { function SubmenuItem(item, clickFun = handleSubmenu, currentIndex = fanModeVal) {
const {title, mode, icon, offIcon} = arr[index] const { title, mode, icon, offIcon, id } = item;
return ( return (
<View className={styles.button}> <View className={styles.button} key={item.id}>
<Image className={styles.menuImage} src={mode == currentIndex ? icon:offIcon} onClick={() => {clickFun(mode)}}/> <Image
className={styles.menuImage}
src={mode == currentIndex ? icon : offIcon}
onClick={() => {
clickFun(mode);
}}
/>
<Text className={styles.bTitle}>{title}</Text> <Text className={styles.bTitle}>{title}</Text>
</View> </View>
) );
} }
const toggleModal = () => { const toggleModal = e => {
console.log('toggleModal'); console.log(e, 'toggleModal');
// setModal(false) // setModal(false)
setMenuIndex(null) setMenuIndex(null);
};
const stopFurtherClick = e => {
console.log(e, 'stopFurtherClick');
e.origin.stopPropagation();
}; };
const modalSetting = { const modalSetting = {
show: true, show: true,
position: 'center', position: 'center',
overlay:true, overlay: true,
onClickOverlay: toggleModal, onClickOverlay: toggleModal,
overlayStyle: {backgroundColor: 'transparent'} overlayStyle: { backgroundColor: 'transparent' },
} };
return ( return (
<View className={styles.page}> <View className={styles.page}>
...@@ -219,93 +233,98 @@ export function Home() { ...@@ -219,93 +233,98 @@ export function Home() {
</View> </View>
<View className={styles.fanGroup}> <View className={styles.fanGroup}>
<Image className={styles.fanBg} src={iconFanBg}></Image> <Image className={styles.fanBg} src={iconFanBg}></Image>
<Image className={styles.fan} src={iconFan} style={{animationDuration: spinDuration(), animationPlayState: isOpen ? 'running' : 'paused'}}></Image> <Image
className={styles.fan}
src={iconFan}
style={{
animationDuration: spinDuration(),
animationPlayState: isOpen ? 'running' : 'paused',
}}
></Image>
</View> </View>
<View className={styles.sliderBg}> <View className={styles.sliderBg}>
<Slider <Slider
activeColor='linear-gradient(-90deg, #87ABF2 11.62%, #4B7EE2 100%)' activeColor="linear-gradient(-90deg, #87ABF2 11.62%, #4B7EE2 100%)"
blockColor='white' blockColor="white"
blockSize={28} blockSize={28}
min={1} min={1}
max={100} max={100}
value={spinSpeed} value={sliderValue}
step={1} step={5}
disabled={!isOpen} disabled={!isOpen}
onChange={(e) => { onChange={e => {
speedAction.set(e.value) setSliderValue(e.value);
speedAction.set(e.value);
}} }}
onChanging={(e) => { onChanging={e => {
speedAction.set(e.value) setSliderValue(e.value);
}} }}
/> />
<View className={styles.fantBottom}> <View className={styles.fantBottom}>
<View className={styles.fontBottomTint}>Fan Speed</View> <View className={styles.fontBottomTint}>Fan Speed</View>
<View className={styles.fontBottomTint}>{spinSpeed}</View> <View className={styles.fontBottomTint}>{sliderValue}</View>
</View> </View>
</View> </View>
<View className={styles.flexRowBetween}> <View className={styles.flexRowBetween}>
{ {menu.map(({ title, icon, offIcon }, index) => {
menu.map(({title, icon, offIcon}, index) => {
return ( return (
<View <View className={styles.button} key={index}>
className={styles.button} <Image
key={index} className={styles.middleware}
> src={middleware}
{ style={{ visibility: menuIndex == index ? 'visible' : 'hidden' }}
menuIndex == 1 ? />
<Modal show={true} position='center' overlay={true} onClickOverlay={toggleModal} overlayStyle={{backgroundColor: 'transparent'}}> <Image
<View className={styles.modalBg} > src={index > 0 ? icon : isOpen ? icon : offIcon}
<Swiper dots={true} dotActiveColor='#6395F6' dotColor='rgba(99,149,246, 0.2)'> className={styles.menuImage}
id={String(index)}
style={{ opacity: isOpen ? 1 : index > 0 ? 0.4 : 1 }}
onClick={clickMenu}
></Image>
<Text className={styles.bTitle}>{title}</Text>
</View>
);
})}
</View>
{menuIndex == 1 && (
<View className={styles.modalOverlay} onClick={toggleModal}>
<View className={styles.modalBg} onClick={stopFurtherClick}>
<Swiper dots={true} dotActiveColor="#6395F6" dotColor="rgba(99,149,246, 0.2)">
<SwiperItem> <SwiperItem>
<View className={styles.swiperItem}> <View className={styles.swiperItem}>
{ {firstMenu.map(item => SubmenuItem(item))}
submenuItem(0)
}
{
submenuItem(1)
}
{
submenuItem(2)
}
{
submenuItem(3)
}
</View> </View>
</SwiperItem> </SwiperItem>
<SwiperItem> <SwiperItem>
<View className={styles.swiperItemNext}> <View className={styles.swiperItemNext}>
{ {secondMenu.map(item => SubmenuItem(item))}
submenuItem(0, secondMenu)
}
</View> </View>
</SwiperItem> </SwiperItem>
</Swiper> </Swiper>
</View> </View>
</Modal>
: menuIndex == 3 ?
<Modal show={true} position='center' overlay={true} onClickOverlay={toggleModal} overlayStyle={{backgroundColor: 'transparent'}}>
<View className={styles.modalBg} style={{height: '213px', display: 'flex', flexDirection:'column', padding:'16px 16px 0', gap:'12px', marginBottom:'-102px'}}>
<FanVertical></FanVertical>
</View> </View>
</Modal> )}
: null {menuIndex == 3 && (
} <View className={styles.modalOverlay} onClick={toggleModal}>
<Image className={styles.middleware} src={middleware} style={{visibility: menuIndex == index ? 'visible':'hidden'}} /> <View
<Image src={index > 0 ? icon: isOpen ? icon:offIcon} className={styles.menuImage} id={String(index) } style={{opacity: isOpen ? 1: index > 0 ? 0.4:1 }} onClick={ className={styles.modalBg}
clickMenu style={{
}></Image> height: '213px',
<Text className={styles.bTitle}>{title}</Text> display: 'flex',
flexDirection: 'column',
padding: '16px 16px 0',
gap: '12px',
bottom: '140px',
}}
onClick={stopFurtherClick}
>
<FanVertical></FanVertical>
</View> </View>
)
})
}
</View> </View>
<LightPanel )}
isShow={isShowModal} <LightPanel isShow={isShowModal} setModal={setModal}></LightPanel>
setModal={setModal}
></LightPanel>
</View> </View>
) );
} }
export default Home; export default Home;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment