Skip to content

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

fix

parent 751e5876
Hide 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 device = devices.fan;
const actions = device.model.actions;
const fanHorizontalVal = useSdmProps((props) => props[fanHorizontalCode]) const fanHorizontalAction = actions[fanHorizontalCode] as DpCommonAction<string>;
const fanVerticalVal = useSdmProps((props) => props[fanVerticalCode]) const fanVerticalAction = actions[fanVerticalCode] as DpCommonAction<string>;
const fanHorizontalSwitch = useSdmProps((props) => props[fanHorizontalSwitchCode]) const fanHorizontalSwitchAction = actions[fanHorizontalSwitchCode] as DpBooleanAction;
const fanVerticalSwitch = useSdmProps((props) => props[fanVerticalSwitchCode]) const fanVerticalSwitchAction = actions[fanVerticalSwitchCode] as DpBooleanAction;
const device = devices.fan const verticalMenu = [
const actions = device.model.actions {
title: 'Vertical',
icon: verticalOn,
offIcon: verticalOff,
mode: 'vertical',
value: fanVerticalVal,
},
{
title: 'Horizontal',
icon: horizontalOn,
offIcon: horizontalOff,
mode: 'horizontal',
value: fanHorizontalVal,
},
];
const fanHorizontalAction = actions[fanHorizontalCode] as DpCommonAction<string> function handleVerticalMenu(index) {
const fanVerticalAction = actions[fanVerticalCode] as DpCommonAction<string> if (index == 0) {
const fanHorizontalSwitchAction = actions[fanHorizontalSwitchCode] as DpBooleanAction // if (!fanVerticalSwitch) {
const fanVerticalSwitchAction = actions[fanVerticalSwitchCode] as DpBooleanAction // fanVerticalAction.set(String(90))
// fanVerticalSwitchAction.on()
// } else {
// fanVerticalSwitchAction.off()
// }
const verticalMenu = [ fanVerticalSwitchAction.toggle();
{ } else {
title:'Vertical', // if (!fanHorizontalSwitch) {
icon:verticalOn, // fanHorizontalAction.set(String(90))
offIcon: verticalOff, // fanHorizontalSwitchAction.on()
mode:'vertical', // }else {
value: fanVerticalVal // fanHorizontalSwitchAction.off()
}, { // }
title:'Horizontal', fanHorizontalSwitchAction.toggle();
icon:horizontalOn, }
offIcon: horizontalOff, }
mode:'horizontal',
value: fanHorizontalVal
}
]
function handleVerticalMenu(index) { function submenuItem(index, arr = verticalMenu, clickFun = handleVerticalMenu) {
if (index == 0) { const isOn = index == 0 ? fanVerticalSwitch : fanHorizontalSwitch;
// if (!fanVerticalSwitch) { const { title, icon, offIcon } = arr[index];
// fanVerticalAction.set(String(90)) return (
// fanVerticalSwitchAction.on() <View className={styles.button}>
// } else { <Image
// fanVerticalSwitchAction.off() className={styles.menuImage}
src={isOn ? icon : offIcon}
// } onClick={() => {
fanVerticalSwitchAction.toggle() clickFun(index);
}}
}else { />
// if (!fanHorizontalSwitch) { <Text className={styles.bTitle}>{title}</Text>
// fanHorizontalAction.set(String(90)) </View>
// fanHorizontalSwitchAction.on() );
// }else { }
// fanHorizontalSwitchAction.off()
// }
fanHorizontalSwitchAction.toggle()
}
}
function submenuItem(index, arr = verticalMenu, clickFun = handleVerticalMenu) { const clickNum = (val, index) => {
const isOn = index == 0 ? fanVerticalSwitch : fanHorizontalSwitch console.log(val, index);
const {title, icon, offIcon} = arr[index] if (index == 0 && fanVerticalSwitch) {
return ( fanVerticalAction.set(String(val));
<View className={styles.button}> } else if (index == 1 && fanHorizontalSwitch) {
<Image className={styles.menuImage} src={isOn ? icon:offIcon} onClick={() => {clickFun(index)}}/> fanHorizontalAction.set(String(val));
<Text className={styles.bTitle}>{title}</Text> }
</View> };
)
}
const clickNum = (val, index) => { function verticalItem(index) {
console.log(val, index) const item = verticalMenu[index];
if (index == 0 && fanVerticalSwitch) { const isBlack = (index == 0 && fanVerticalSwitch) || (index == 1 && fanHorizontalSwitch);
fanVerticalAction.set(String(val)) const textColor = subIndex => {
}else if (index == 1 && fanHorizontalSwitch) { return {
fanHorizontalAction.set(String(val)) color: isBlack && Number(item.value) == subIndex * 30 ? '#000000' : 'rgba(0,0,0,0.4)',
} width: '33.3%',
} textAlign: 'center',
lineHeight: '64px',
fontWeight: '500',
};
};
function verticalItem(index) { return (
const item = verticalMenu[index] <View className={styles.verticalItem}>
const isBlack = (index == 0 && fanVerticalSwitch) || (index == 1 && fanHorizontalSwitch) {submenuItem(index, verticalMenu, handleVerticalMenu)}
const textColor = (subIndex) => { <View className={styles.verticalNumBg}>
return {color: isBlack && (Number(item.value) == (subIndex * 30)) ? '#000000':'rgba(0,0,0,0.4)', <View
width:'33.3%', style={textColor(1)}
textAlign:'center', onClick={() => {
lineHeight:'64px', clickNum(30, index);
fontWeight:'500' }}
}} >
30
return (
<View className={styles.verticalItem}>
{submenuItem(index, verticalMenu, handleVerticalMenu)}
<View className={styles.verticalNumBg}>
<View style={textColor(1)} 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
} style={textColor(2)}
return ( onClick={() => {
<View> clickNum(60, index);
{ }}
verticalItem(0) >
} 60
{ </View>
verticalItem(1) <View
} style={textColor(3)}
</View> onClick={() => {
) clickNum(90, index);
}}
}) >
\ No newline at end of file 90
</View>
</View>
</View>
);
}
return (
<View>
{verticalItem(0)}
{verticalItem(1)}
</View>
);
});
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 brightRange = [10, 1000] const cctRange = [0, 1000];
const cctRange = [0, 1000]
const brightCode = 'bright_value';
const brightCode = 'bright_value' const temperatureCode = 'temp_value';
const temperatureCode = 'temp_value' const switchCode = 'light';
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() {
const percent = getValueInRange(temperatureVal || 10, cctRange).percent function getOrignPointX() {
const originX = 28 + 319 * (percent / 100) const percent = getValueInRange(temperatureVal || 10, cctRange).percent;
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,
} };
} }
function touchStart(e) { usePageEvent('onShow', () => {
handlePoint(e) setPoint({
} pageX: getOrignPointX(),
pageY: 250,
});
});
function handleTouch(e) { function touchStart(e) {
handlePoint(e) e.origin.stopPropagation();
} handlePoint(e);
}
function handleTouch(e) {
handlePoint(e, false);
}
function touchEnd(e) {
handlePoint(e);
}
function touchEnd(e) { function handlePoint(e, isAction = true) {
handlePoint(e) const { pageX, pageY } = e.changedTouches.length && e.changedTouches[0];
let x = pageX;
let y = pageY;
const xRange = [28, 347];
if (pageX < xRange[0]) {
x = xRange[0];
}
if (pageX > xRange[1]) {
x = xRange[1];
}
if (pageY < 197) {
y = 197;
}
if (pageY > 320) {
y = 320;
} }
function handlePoint(e) { // console.log(x, 'xxxxxxx');
const {pageX, pageY} = e.changedTouches.length && e.changedTouches[0] setPoint({ pageX: x, pageY: y });
let x = pageX const percent = (x - xRange[0]) / (xRange[1] - xRange[0]);
let y = pageY const value = Number((cctRange[1] * percent).toFixed());
const xRange = [28, 347] // setColor(pointToRGB(x));
if (pageX < xRange[0]) { if (isAction) {
x = xRange[0] temperatureAction.set(value);
}
if (pageX > xRange[1]) {
x = xRange[1]
}
if (pageY < 197) {
y = 197
}
if (pageY > 320) {
y =320
}
setPoint({pageX: x, pageY: y})
const percent = (x - xRange[0]) / (xRange[1] - xRange[0])
const value = Number((cctRange[1] * percent).toFixed())
setColor(pointToRGB(x))
temperatureAction.set(value)
} }
}
// function pointToRGB(pageX) {
// const half = (347 - 28) / 2;
// const middle = 28 + half;
// const leftColor = { h: 40, s: 100, l: 68 };
// const rightColor = { h: 202, s: 96, l: 90 };
// let newL = leftColor.l;
// let color = leftColor;
// if (pageX < middle) {
// newL = 68 + ((pageX - 28) * 32) / 161;
// leftColor.l = newL;
// color = leftColor;
// } else {
// newL = 100 - ((pageX - middle) * 10) / 161;
// rightColor.l = newL;
// color = rightColor;
// }
// return HSLToRGB(color);
// }
// function HSLToRGB({ h, s, l }) {
// s /= 100;
// l /= 100;
// const k = n => (n + h / 30) % 12;
// const a = s * Math.min(l, 1 - l);
// const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
// const color = `rgb(${255 * f(0)}, ${255 * f(8)}, ${255 * f(4)})`;
// console.log(color);
// return color;
// }
const handleLightOn = () => {
switchAction.toggle();
};
function progressStart(e) {
console.log(e, 'progressStart');
e.origin.stopPropagation();
handleProgress(e);
}
function pointToRGB(pageX) { function progressMove(e) {
const half = (347 - 28) / 2 // console.log(e, 'progressMove');
const middle = 28 + half handleProgress(e, false);
const leftColor = {h: 40, s:100, l:68} }
const rightColor = {h:202,s:96, l:90}
let newL = leftColor.l
let color = leftColor
if (pageX < middle) {
newL = 68 + (pageX - 28) * 32 / 161
leftColor.l = newL
color = leftColor
} else {
newL = 100 - (pageX - middle) * 10 / 161
rightColor.l = newL
color = rightColor
}
return HSLToRGB(color)
}
function HSLToRGB({h, s, l}) { function progressEnd(e) {
s /= 100; // console.log(e, 'progressEnd');
l /= 100; handleProgress(e);
const k = n => (n + h / 30) % 12; }
const a = s * Math.min(l, 1 - l);
const f = n => function handleProgress(e, isAction = true) {
l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); let { pageX, pageY } = e.changedTouches.length && e.changedTouches[0];
const color = `rgb(${255 * f(0)}, ${255 * f(8)}, ${255 * f(4)})` const xRange = [20, 335];
console.log(color) let differ = pageX - xRange[0];
return color if (differ < 0) {
}; differ = 0;
} else if (differ > xRange[1]) {
differ = xRange[1];
}
const percent = differ / (xRange[1] - xRange[0]);
const value = Number((brightRange[1] * percent).toFixed());
setBrightPercent(Number((percent * 100).toFixed()));
if (isAction) {
brightAction.set(value);
}
}
const handleLightOn = () => { return (
switchAction.toggle() <View
} className={styles.modalback}
style={{
function progressStart(e) { background: 'rgba(0, 0, 0, 0.1)',
console.log(e, 'progressStart'); backdropFilter: 'blur(35px)',
handleProgress(e) visibility: isShow ? 'visible' : 'hidden',
} }}
>
function progressMove(e) { <View className={styles.lightModal}>
console.log(e, 'progressMove'); <View className={styles.lightModalTop}>
handleProgress(e) <View className={styles.lightCloseBg}>Light</View>
} <View className={styles.lightCloseBg}>
<Image
function progressEnd(e) { className={styles.lightModalClose}
console.log(e, 'progressEnd'); src={iconClose}
handleProgress(e) onClick={() => {
} setModal(false);
}}
function handleProgress(e) { ></Image>
let {pageX, pageY} = e.changedTouches.length && e.changedTouches[0] </View>
const xRange = [20,335] </View>
let differ = pageX - xRange[0]
if (differ < 0) {
differ = 0
} else if (differ > xRange[1]) {
differ = xRange[1]
}
const percent = differ / (xRange[1] - xRange[0]);
const value = Number((brightRange[1] * percent).toFixed())
brightAction.set(value)
}
return (
<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.lightModalTop}>
<View className={styles.lightCloseBg}>Light</View>
<View className={styles.lightCloseBg}>
<Image className={styles.lightModalClose} src={iconClose} onClick={() => {
setModal(false)
}}></Image>
</View>
</View>
<View <View
className={styles.lightMiddle} className={styles.lightMiddle}
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
</View> className={styles.moveCircle}
) style={{
}) top: point.pageY - 14 + 'px',
\ No newline at end of file left: point.pageX - 14 + 'px',
backgroundColor: 'transparent',
}}
></View>
</View>
);
});
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,296 +16,315 @@ import { Text, View, Swiper, SwiperItem} from '@ray-js/components'; ...@@ -16,296 +16,315 @@ 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 = [
// { // {
// title:'Nature', // title:'Nature',
// icon:handOn, // icon:handOn,
// offIcon: hand, // offIcon: hand,
// 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)
}
} }
}
} }
} }
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}>
<View className={styles.header}> <View className={styles.header}>
<View className={styles.alignCenter}> <View className={styles.alignCenter}>
<Image className={styles.icon} src={iconTempr} /> <Image className={styles.icon} src={iconTempr} />
<View className={styles.title}>{currentTempVal}°C</View> <View className={styles.title}>{currentTempVal}°C</View>
</View>
{/* <View className={styles.timer}>Countdown to open 03:00</View> */}
</View> </View>
<View className={styles.fanGroup}> {/* <View className={styles.timer}>Countdown to open 03:00</View> */}
<Image className={styles.fanBg} src={iconFanBg}></Image> </View>
<Image className={styles.fan} src={iconFan} style={{animationDuration: spinDuration(), animationPlayState: isOpen ? 'running' : 'paused'}}></Image> <View className={styles.fanGroup}>
<Image className={styles.fanBg} src={iconFanBg}></Image>
<Image
className={styles.fan}
src={iconFan}
style={{
animationDuration: spinDuration(),
animationPlayState: isOpen ? 'running' : 'paused',
}}
></Image>
</View>
<View className={styles.sliderBg}>
<Slider
activeColor="linear-gradient(-90deg, #87ABF2 11.62%, #4B7EE2 100%)"
blockColor="white"
blockSize={28}
min={1}
max={100}
value={sliderValue}
step={5}
disabled={!isOpen}
onChange={e => {
setSliderValue(e.value);
speedAction.set(e.value);
}}
onChanging={e => {
setSliderValue(e.value);
}}
/>
<View className={styles.fantBottom}>
<View className={styles.fontBottomTint}>Fan Speed</View>
<View className={styles.fontBottomTint}>{sliderValue}</View>
</View> </View>
<View className={styles.sliderBg}> </View>
<Slider <View className={styles.flexRowBetween}>
activeColor='linear-gradient(-90deg, #87ABF2 11.62%, #4B7EE2 100%)' {menu.map(({ title, icon, offIcon }, index) => {
blockColor='white' return (
blockSize={28} <View className={styles.button} key={index}>
min={1} <Image
max={100} className={styles.middleware}
value={spinSpeed} src={middleware}
step={1} style={{ visibility: menuIndex == index ? 'visible' : 'hidden' }}
disabled={!isOpen} />
onChange={(e) => { <Image
speedAction.set(e.value) src={index > 0 ? icon : isOpen ? icon : offIcon}
}} className={styles.menuImage}
onChanging={(e) => { id={String(index)}
speedAction.set(e.value) style={{ opacity: isOpen ? 1 : index > 0 ? 0.4 : 1 }}
}} onClick={clickMenu}
/> ></Image>
<View className={styles.fantBottom}> <Text className={styles.bTitle}>{title}</Text>
<View className={styles.fontBottomTint}>Fan Speed</View> </View>
<View className={styles.fontBottomTint}>{spinSpeed}</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>
<View className={styles.swiperItem}>
{firstMenu.map(item => SubmenuItem(item))}
</View>
</SwiperItem>
<SwiperItem>
<View className={styles.swiperItemNext}>
{secondMenu.map(item => SubmenuItem(item))}
</View>
</SwiperItem>
</Swiper>
</View> </View>
</View> </View>
<View className={styles.flexRowBetween}> )}
{ {menuIndex == 3 && (
menu.map(({title, icon, offIcon}, index) => { <View className={styles.modalOverlay} onClick={toggleModal}>
return ( <View
<View className={styles.modalBg}
className={styles.button} style={{
key={index} height: '213px',
> display: 'flex',
{ flexDirection: 'column',
menuIndex == 1 ? padding: '16px 16px 0',
<Modal show={true} position='center' overlay={true} onClickOverlay={toggleModal} overlayStyle={{backgroundColor: 'transparent'}}> gap: '12px',
<View className={styles.modalBg} > bottom: '140px',
<Swiper dots={true} dotActiveColor='#6395F6' dotColor='rgba(99,149,246, 0.2)'> }}
<SwiperItem> onClick={stopFurtherClick}
<View className={styles.swiperItem}> >
{ <FanVertical></FanVertical>
submenuItem(0) </View>
}
{
submenuItem(1)
}
{
submenuItem(2)
}
{
submenuItem(3)
}
</View>
</SwiperItem>
<SwiperItem>
<View className={styles.swiperItemNext}>
{
submenuItem(0, secondMenu)
}
</View>
</SwiperItem>
</Swiper>
</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>
</Modal>
: null
}
<Image className={styles.middleware} src={middleware} style={{visibility: menuIndex == index ? 'visible':'hidden'}} />
<Image src={index > 0 ? icon: isOpen ? icon:offIcon} 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> </View>
<LightPanel )}
isShow={isShowModal} <LightPanel isShow={isShowModal} setModal={setModal}></LightPanel>
setModal={setModal} </View>
></LightPanel> );
</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