npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-ts-wheel-picker

v2.0.1

Published

a sliding(wheel) picker built purely in JavaScript(use ts) that can be applied to iOS,Android and HarmonyOS platforms

Downloads

20

Readme

Welcome to the RN sliding selection component, which is already compatible with iOS, Android, and HarmonyOS Next. It is a pure tsx component and does not require native dependency support

Parameter Introduction

interface THWheelPickerProps extends ViewStyle {
  /**
   * wheelHeader参数
   */
  // 点击取消触发的方法
  // Click to cancel the triggering method
  onCancel?: () => void
  // 点击确认触发的方法
  // Click to confirm the triggering method
  onConfirm?: (e: any) => void
  // 标题 title
  title?: string | undefined
  // 返回标题 left title
  leftTitle?: string | undefined
  // 确认标题 rightTitle
  rightTitle?: string | undefined
  // 返回自定义 custom left view
  leftHeaderView?: ReactNode | undefined
  // 确认自定义 custom right view
  rightHeaderView?: ReactNode | undefined
  // 标题自定义 custom title view
  titleHeaderView?: ReactNode | undefined

  /**
   * wheelContainer参数, titleview 和滑动选择中间的部分
   */
  containerView?: ReactNode | Function | undefined
  /**
   * wheelPicker参数
   */
  // 展示 is show ?
  visible: boolean
  // 数据源格式 data Source
  dataSource: Array<THWheelPickerDataSource>
  // 需要展示的行列数 cols
  cols: number
  // line为模拟iOS原生选择的样式,block为两行线的模式
  // Line is a style that simulates iOS native selection, while block is a two line pattern
  lineType?: 'line' | 'block'
  // 默认的数组,例如树形结构想选择某个初始化的值,需要先defaultValue中传入这一组初始化的值
  // A default array, such as a tree structure, to select an initialized value, you need to first pass in this set of initialized values from the defaultValue
  defaultValue?: Array<string>
  // 字体样式
  fontStyle?: StyleProp<TextStyle> | undefined
  // item的高度
  itemHeight?: number | undefined
  // 滚动区域的高度
  wheelHeight?: number | undefined
  // ref
  wheelRef?: Ref<IRefs | undefined>
}
  • The above are optional parameters

  1. onCancel is Cancel button method
  2. onConfirm is Confirm button method
  3. title is title view text
  4. leftTitle is custom left title text
  5. rightTitle is custom right title text
  6. leftHeaderView is custom left title view
  7. rightHeaderView is custom right title view
  8. titleHeaderView is custom main title view
  9. containerView The part located in the middle of the title and sliding area, which does not exist if not set
  10. visible is show?
  11. dataSource Data sources that match label, value, and children
  12. cols num cols
  13. lineType The type of sliding area mask, where line represents the style of simulating iOS, and block represents the horizontal line style
  14. defaultValue Default data requires passing in the default selected value value value
  15. itemHeight height of item
  16. wheelRef ref of wheel, can get state
<>
  <WheelPicker
    containerView={
      <View
        style={{ height: 40, justifyContent: 'center', alignItems: 'center' }}
      >
        <Text>{'container view'}</Text>
      </View>
    }
    style={{
      position: 'absolute',
      top: '50%',
      width: '100%',
      height: 400,
      borderWidth: 1,
      borderColor: 'red',
    }}
    lineType="block"
    visible={true}
    defaultValue={['a', 'mala']}
    dataSource={[
      { label: 'a', value: 'a', children: [{ label: 'b', value: 'b' }] },
      { label: 'a1', value: 'a1', children: [{ label: 'b1', value: 'b1' }] },
      { label: 'aa', value: 'aa', children: [{ label: 'ba', value: 'ba' }] },
      {
        label: 'aaa',
        value: 'aaaa',
        children: [{ label: 'baa', value: 'baa' }],
      },
      {
        value: 'mala',
        label: 'aaa',
        children: [
          {
            value: 'asda',
            label: 2222,
            children: [{ value: 'a', label: 'b' }],
          },
        ],
      },
    ]}
    cols={1}
  />
</>
  1. This is line mode, and the mask color style can be changed. Zoom in to see the color difference in the image pkwBWo8.jpg
  2. use block pkwBRdf.jpg