Music Drawer

The drawer container component MusicDrawer is used to implement music player features. For example, you can pass in an array of data and specify a target index. This way, music options can be selected or canceled in the container. An external listener can be registered to listen for the index changes and trigger further actions.

MusicDrawer

• Inactive status:

  

• Uneven distributed:

  

• Custom style:

  

Common properties

Properties of styles

Properties of value

Properties of rightIconSource

Example

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { MusicDrawer } from '@tuya/tuya-panel-lamp-sdk';
import { TYText } from 'tuya-panel-kit';
import Res from './res';

const MusicDrawers: React.FC = () => {
  const videoListData = ['multi', 'single'];
  const [activeVideoIndex, setActiveVideoIndex] = useState(-1);
  const DrawerData = videoListData.map((item, index) => ({
    id: item,
    leftIconSource: Res[`mode${index + 1}`],
    title: `${getLang('mode')}${index}`,
    rightIconSource: {
      stopIcon: Res.stopIconLight,
      startIcon: Res.startIconLight,
    },
  }));

  const renderActiveContent = (key: string) => {
    if (key === 'multi') {
      return (
        <View style={styles.imgCard} pointerEvents="none">
          <TYText style={{ padding: 20 }}>{getLang('drawerContent')}</TYText>
        </View>
      );
    }
    return (
      <View style={{ height: 50 }} pointerEvents="none">
        <TYText style={{ padding: 20 }}>{`${getLang('drawerContent')}2`}</TYText>
      </View>
    );
  };

  return (
    <View style={styles.container}>
        <MusicDrawer
          value={DrawerData}
          styles={{
            containerStyle: styles.videoContainer,
            contentStyle: styles.videoContent,
            titleStyle: styles.text,
            rightIconBoxStyle: styles.musicBtn,
            leftIconBoxStyle: styles.videoImg,
          }}
          activeIndex={activeVideoIndex}
          onPress={() => console.log('press')}
          onChangeIndex={setActiveVideoIndex}
          height={100}
          renderActiveContent={renderActiveContent}
        />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  imgCard: {
    height: 200,
    overflow: 'hidden',
    width: '100%',
  },
  musicBtn: {
    backgroundColor: 'rgba(255,255,255,0.1)',
    borderRadius: 19,
    borderWidth: 0,
    marginRight: 24,
  },
  text: { fontSize: 18 },
  title: {
    marginVertical: 10,
    paddingLeft: 15,
  },
  videoContainer: {
    borderRadius: 16,
    marginBottom: 16,
  },
  videoContent: {
    backgroundColor: '#fff',
    borderRadius: 16,
    paddingLeft: 14,
  },
  videoImg: {
    height: 52,
    marginHorizontal: 12,
    width: 52,
  },
});

export default MusicDrawers;