From 2facffd3ea5df8b78405533d3fb8b2d33fb70a27 Mon Sep 17 00:00:00 2001 From: Lee Brindley Date: Thu, 22 Nov 2018 14:10:07 +0000 Subject: [PATCH 1/2] Added fontSize prop --- index.js | 399 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 203 insertions(+), 196 deletions(-) diff --git a/index.js b/index.js index 8c7f166..8458420 100644 --- a/index.js +++ b/index.js @@ -1,227 +1,234 @@ -import React from 'react'; -import styled from 'styled-components'; -import { - View, - ScrollView, - Dimensions, - Platform, -} from 'react-native'; -import PropTypes from 'prop-types'; +import React from "react"; +import styled from "styled-components"; +import { View, ScrollView, Dimensions, Platform } from "react-native"; +import PropTypes from "prop-types"; const Container = styled.View` - height: ${props => props.wrapperHeight}; - flex: 1; - overflow: hidden; - align-self: center; - width: ${props => props.wrapperWidth}; - background-color: ${props => props.wrapperBackground}; + height: ${(props) => props.wrapperHeight}; + flex: 1; + overflow: hidden; + align-self: center; + width: ${(props) => props.wrapperWidth}; + background-color: ${(props) => props.wrapperBackground}; `; export const HighLightView = styled.View` - position: absolute; - top: ${props => (props.wrapperHeight - props.itemHeight) / 2}; - height: ${props => props.itemHeight}; - width: ${props => props.highlightWidth}; - border-top-color: ${props => props.highlightColor}; - border-bottom-color: ${props => props.highlightColor}; - border-top-width: ${props => props.highlightBorderWidth}px; - border-bottom-width: ${props => props.highlightBorderWidth}px; + position: absolute; + top: ${(props) => (props.wrapperHeight - props.itemHeight) / 2}; + height: ${(props) => props.itemHeight}; + width: ${(props) => props.highlightWidth}; + border-top-color: ${(props) => props.highlightColor}; + border-bottom-color: ${(props) => props.highlightColor}; + border-top-width: ${(props) => props.highlightBorderWidth}px; + border-bottom-width: ${(props) => props.highlightBorderWidth}px; `; export const SelectedItem = styled.View` - height: 30px; - justify-content: center; - align-items: center; - height: ${props => props.itemHeight}; + height: 30px; + justify-content: center; + align-items: center; + height: ${(props) => props.itemHeight}; `; export const ItemText = styled.Text` - color: ${props => props.color}; - font-size: 20px; - line-height: 26px; - text-align: center; + color: ${(props) => props.color}; + font-size: ${(props) => props.fontSize}; + line-height: 26px; + text-align: center; `; -const deviceWidth = Dimensions.get('window').width; +const deviceWidth = Dimensions.get("window").width; export default class ScrollPicker extends React.Component { - constructor() { - super(); - this.onMomentumScrollBegin = this.onMomentumScrollBegin.bind(this); - this.onMomentumScrollEnd = this.onMomentumScrollEnd.bind(this); - this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this); - this.onScrollEndDrag = this.onScrollEndDrag.bind(this); - this.state = { - selectedIndex: 1, + constructor() { + super(); + this.onMomentumScrollBegin = this.onMomentumScrollBegin.bind(this); + this.onMomentumScrollEnd = this.onMomentumScrollEnd.bind(this); + this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this); + this.onScrollEndDrag = this.onScrollEndDrag.bind(this); + this.state = { + selectedIndex: 1 + }; } - } - componentDidMount() { - if (this.props.selectedIndex) { - setTimeout(() => { - this.scrollToIndex(this.props.selectedIndex); - }, 0); + componentDidMount() { + if (this.props.selectedIndex) { + setTimeout(() => { + this.scrollToIndex(this.props.selectedIndex); + }, 0); + } } - } - componentWillUnmount() { - if (this.timer) { - clearTimeout(this.timer); + componentWillUnmount() { + if (this.timer) { + clearTimeout(this.timer); + } } - } - - render() { - const { header, footer } = this.renderPlaceHolder(); - return ( - - - { - this.sview = sview; - }} - bounces={false} - showsVerticalScrollIndicator={false} - onTouchStart={this.props.onTouchStart} - onMomentumScrollBegin={this.onMomentumScrollBegin} - onMomentumScrollEnd={this.onMomentumScrollEnd} - onScrollBeginDrag={this.onScrollBeginDrag} - onScrollEndDrag={this.onScrollEndDrag} - > - {header} - {this.props.dataSource.map(this.renderItem.bind(this))} - {footer} - - - ); - } - renderPlaceHolder() { - const height = (this.props.wrapperHeight - this.props.itemHeight) / 2; - const header = ; - const footer = ; - return { header, footer }; - } + render() { + const { header, footer } = this.renderPlaceHolder(); + return ( + + + { + this.sview = sview; + }} + bounces={false} + showsVerticalScrollIndicator={false} + onTouchStart={this.props.onTouchStart} + onMomentumScrollBegin={this.onMomentumScrollBegin} + onMomentumScrollEnd={this.onMomentumScrollEnd} + onScrollBeginDrag={this.onScrollBeginDrag} + onScrollEndDrag={this.onScrollEndDrag}> + {header} + {this.props.dataSource.map(this.renderItem.bind(this))} + {footer} + + + ); + } - renderItem(data, index) { - const isSelected = index === this.state.selectedIndex; - const item = {data}; + renderPlaceHolder() { + const height = (this.props.wrapperHeight - this.props.itemHeight) / 2; + const header = ; + const footer = ; + return { header, footer }; + } - return ( - - {item} - - ); - } + renderItem(data, index) { + const isSelected = index === this.state.selectedIndex; + const item = ( + + {data} + + ); - scrollFix(e) { - let verticalY = 0; - const h = this.props.itemHeight; - if (e.nativeEvent.contentOffset) { - verticalY = e.nativeEvent.contentOffset.y; + return ( + + {item} + + ); } - const selectedIndex = Math.round(verticalY / h); - const verticalElem = selectedIndex * h; - if (verticalElem !== verticalY) { - // using scrollTo in ios, onMomentumScrollEnd will be invoked - if (Platform.OS === 'ios') { - this.isScrollTo = true; - } - this.sview.scrollTo({ y: verticalElem }); - } - if (this.state.selectedIndex === selectedIndex) { - return; - } - this.setState({ - selectedIndex, - }); - // onValueChange - if (this.props.onValueChange) { - const selectedValue = this.props.dataSource[selectedIndex]; - this.props.onValueChange(selectedValue, selectedIndex); - } - } - onScrollBeginDrag() { - this.dragStarted = true; - if (Platform.OS === 'ios') { - this.isScrollTo = false; + + scrollFix(e) { + let verticalY = 0; + const h = this.props.itemHeight; + if (e.nativeEvent.contentOffset) { + verticalY = e.nativeEvent.contentOffset.y; + } + const selectedIndex = Math.round(verticalY / h); + const verticalElem = selectedIndex * h; + if (verticalElem !== verticalY) { + // using scrollTo in ios, onMomentumScrollEnd will be invoked + if (Platform.OS === "ios") { + this.isScrollTo = true; + } + this.sview.scrollTo({ y: verticalElem }); + } + if (this.state.selectedIndex === selectedIndex) { + return; + } + this.setState({ + selectedIndex + }); + // onValueChange + if (this.props.onValueChange) { + const selectedValue = this.props.dataSource[selectedIndex]; + this.props.onValueChange(selectedValue, selectedIndex); + } } - if (this.timer) { - clearTimeout(this.timer); + onScrollBeginDrag() { + this.dragStarted = true; + if (Platform.OS === "ios") { + this.isScrollTo = false; + } + if (this.timer) { + clearTimeout(this.timer); + } } - } - onScrollEndDrag(e) { - this.props.onScrollEndDrag(); - this.dragStarted = false; - // if not used, event will be garbaged - const element = { - nativeEvent: { - contentOffset: { - y: e.nativeEvent.contentOffset.y, - }, - }, - }; - if (this.timer) { - clearTimeout(this.timer); + onScrollEndDrag(e) { + this.props.onScrollEndDrag(); + this.dragStarted = false; + // if not used, event will be garbaged + const element = { + nativeEvent: { + contentOffset: { + y: e.nativeEvent.contentOffset.y + } + } + }; + if (this.timer) { + clearTimeout(this.timer); + } + this.timer = setTimeout(() => { + if (!this.momentumStarted && !this.dragStarted) { + this.scrollFix(element, "timeout"); + } + }, 10); } - this.timer = setTimeout( - () => { - if (!this.momentumStarted && !this.dragStarted) { - this.scrollFix(element, 'timeout'); + onMomentumScrollBegin() { + this.momentumStarted = true; + if (this.timer) { + clearTimeout(this.timer); } - }, - 10, - ); - } - onMomentumScrollBegin() { - this.momentumStarted = true; - if (this.timer) { - clearTimeout(this.timer); } - } - onMomentumScrollEnd(e) { - this.props.onMomentumScrollEnd(); - this.momentumStarted = false; - if (!this.isScrollTo && !this.momentumStarted && !this.dragStarted) { - this.scrollFix(e); + onMomentumScrollEnd(e) { + this.props.onMomentumScrollEnd(); + this.momentumStarted = false; + if (!this.isScrollTo && !this.momentumStarted && !this.dragStarted) { + this.scrollFix(e); + } } - } - scrollToIndex(ind) { - this.setState({ - selectedIndex: ind, - }); - const y = this.props.itemHeight * ind; - this.sview.scrollTo({ y }); - } + scrollToIndex(ind) { + this.setState({ + selectedIndex: ind + }); + const y = this.props.itemHeight * ind; + this.sview.scrollTo({ y }); + } } ScrollPicker.propTypes = { - style: PropTypes.object, - dataSource: PropTypes.array, - selectedIndex: PropTypes.number, - onValueChange: PropTypes.func, - renderItem: PropTypes.func, - highlightColor: PropTypes.string, - itemHeight: PropTypes.number, - wrapperBackground: PropTypes.string, - wrapperWidth: PropTypes.number, - wrapperHeight: PropTypes.number, - highlightWidth: PropTypes.number, - highlightBorderWidth: PropTypes.number, - activeItemColor: PropTypes.string, - itemColor: PropTypes.string, - onMomentumScrollEnd: PropTypes.func, - onScrollEndDrag: PropTypes.func, + style: PropTypes.object, + dataSource: PropTypes.array, + fontSize: PropTypes.string, + selectedIndex: PropTypes.number, + onValueChange: PropTypes.func, + renderItem: PropTypes.func, + highlightColor: PropTypes.string, + itemHeight: PropTypes.number, + wrapperBackground: PropTypes.string, + wrapperWidth: PropTypes.number, + wrapperHeight: PropTypes.number, + highlightWidth: PropTypes.number, + highlightBorderWidth: PropTypes.number, + activeItemColor: PropTypes.string, + itemColor: PropTypes.string, + onMomentumScrollEnd: PropTypes.func, + onScrollEndDrag: PropTypes.func }; ScrollPicker.defaultProps = { - dataSource: [1, 2, 3], - itemHeight: 60, - wrapperBackground: '#FFFFFF', - wrapperHeight: 180, - wrapperWidth: 150, - highlightWidth: deviceWidth, - highlightBorderWidth: 2, - highlightColor: '#333', - activeItemColor: '#222121', - itemColor: '#B4B4B4', - onMomentumScrollEnd: () => {}, - onScrollEndDrag: () => {}, -}; \ No newline at end of file + dataSource: [1, 2, 3], + fontSize: "20px", + itemHeight: 60, + wrapperBackground: "#FFFFFF", + wrapperHeight: 180, + wrapperWidth: 150, + highlightWidth: deviceWidth, + highlightBorderWidth: 2, + highlightColor: "#333", + activeItemColor: "#222121", + itemColor: "#B4B4B4", + onMomentumScrollEnd: () => {}, + onScrollEndDrag: () => {} +}; From b1fa93dd86ede68123c0ac29a93b0a41e2d8b09a Mon Sep 17 00:00:00 2001 From: Lee Brindley Date: Thu, 22 Nov 2018 14:11:03 +0000 Subject: [PATCH 2/2] Documented channge --- readme.md | 55 ++++++++++++++++++++++++++----------------------------- 1 file changed, 26 insertions(+), 29 deletions(-) diff --git a/readme.md b/readme.md index 45003d8..7d542b3 100644 --- a/readme.md +++ b/readme.md @@ -1,10 +1,13 @@ +## Changes since fork + +- Added 'fontSize' prop, to allow further customisation of the text element rendered inside each option. + ## react-native-wheel-scroll-picker a pure js picker, each option item customizable ![example](./demo/test.gif) - ### usage ```shell @@ -12,37 +15,31 @@ npm install react-native-wheel-scroll-picker --save ``` ```jsx -import React, {Component} from 'react'; -import ScrollPicker from 'react-native-wheel-scroll-picker'; +import React, { Component } from "react"; +import ScrollPicker from "react-native-wheel-scroll-picker"; export default class SimpleExample extends Component { - render() { - return( - { - // - }} - onValueChange={(data, selectedIndex) => { - // - }} - wrapperHeight={180} - wrapperWidth={150} - wrapperBackground={'#FFFFFF'} - itemHeight={60} - highlightColor={'#d8d8d8'} - highlightBorderWidth={2} - activeItemColor={'#222121'} - itemColor={'#B4B4B4'} - /> - ) + return ( + { + // + }} + onValueChange={(data, selectedIndex) => { + // + }} + wrapperHeight={180} + wrapperWidth={150} + wrapperBackground={"#FFFFFF"} + itemHeight={60} + highlightColor={"#d8d8d8"} + highlightBorderWidth={2} + activeItemColor={"#222121"} + itemColor={"#B4B4B4"} + /> + ); } } ```