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