@ray-js/components-ty-picker v0.1.5

English | 简体中文

@ray-js/components-ty-picker

Tuya picker. Base library version 2.3.0 and above available

Installation

$ npm install @ray-js/components-ty-picker
# or
$ yarn add @ray-js/components-ty-picker

Basic Usage

import React from 'react';
import TyPicker from '@ray-js/components-ty-picker';

export default function Template() {
  const [value, setValue] = React.useState(0);
  const handleChange = (e: Event) => {
    setValue(e.value);
  };
  return (
    <TyPicker
      dataSource={['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']}
      value={value}
      onChange={handleChange}
    />
  );
}

Two Column

import React from 'react';
import TyPicker from '@ray-js/components-ty-picker';

export default function Template() {
  const [value, setValue] = React.useState([0, 1]);
  const handleChange = (e: Event) => {
    setValue(e.value);
  };
  return (
    <TyPicker
      dataSource={[
        ['Brazil', 'China', 'Japan', 'United States'],
        ['orange', 'apple', 'banana', 'watermelon'],
      ]}
      value={value}
      onChange={handleChange}
    />
  );
}

Custom dataSource

import { View, Text, Icon } from '@ray-js/components';
import TyPicker from '@ray-js/components-ty-picker';

const IconArr = ['giftfill', 'cloudfogfill', 'moonstarsfill', 'sunhazefill', 'tramfill'];

export default function Template() {
  const [value, setValue] = React.useState(0);
  const handleChange = (e: Event) => {
    setValue(e.value);
  };

  const iconEleMap = IconArr.map(key => (
    <View
      key={key}
      style={{
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      }}
    >
      {/* @ts-ignore */}
      <Icon type={`icon-a-${key}`} size={30} color="#007aff" />
      <Text style={{ marginLeft: '4px' }}>{key}</Text>
    </View>
  ));

  return (
    <TyPicker dataSource={iconEleMap} value={value} onChange={handleChange} />;
  );
}