Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
rmc-picker
Advanced tools
rmc-picker - npm Package Compare versions
Comparing version 3.10.5 to 3.10.6
@@ -1,9 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| import React from 'react'; | ||
| import MultiPickerProps from './MultiPickerProps'; | ||
| declare class MultiPicker extends React.Component<MultiPickerProps, any> { | ||
| getValue: () => any; | ||
| onValueChange: (i: number) => any; | ||
| render(): JSX.Element; | ||
| } | ||
| declare const MultiPicker: any; | ||
| export default MultiPicker; |
| import _extends from 'babel-runtime/helpers/extends'; | ||
| import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
| import _createClass from 'babel-runtime/helpers/createClass'; | ||
| import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
| import _inherits from 'babel-runtime/helpers/inherits'; | ||
| import React from 'react'; | ||
| import classnames from 'classnames'; | ||
| import reactMixin from 'react-mixin'; | ||
| import createClass from 'create-react-class'; | ||
| import Picker from './Picker'; | ||
| import MultiPickerMixin from './MultiPickerMixin'; | ||
| var MultiPicker = createClass({ | ||
| mixins: [MultiPickerMixin], | ||
| render: function render() { | ||
| var _this = this; | ||
| var MultiPicker = function (_React$Component) { | ||
| _inherits(MultiPicker, _React$Component); | ||
| var _props = this.props, | ||
| prefixCls = _props.prefixCls, | ||
| pickerPrefixCls = _props.pickerPrefixCls, | ||
| className = _props.className, | ||
| rootNativeProps = _props.rootNativeProps, | ||
| disabled = _props.disabled, | ||
| pickerItemStyle = _props.pickerItemStyle, | ||
| indicatorStyle = _props.indicatorStyle, | ||
| pure = _props.pure, | ||
| children = _props.children; | ||
| function MultiPicker() { | ||
| _classCallCheck(this, MultiPicker); | ||
| return _possibleConstructorReturn(this, (MultiPicker.__proto__ || Object.getPrototypeOf(MultiPicker)).apply(this, arguments)); | ||
| } | ||
| _createClass(MultiPicker, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| var _props = this.props, | ||
| prefixCls = _props.prefixCls, | ||
| pickerPrefixCls = _props.pickerPrefixCls, | ||
| className = _props.className, | ||
| rootNativeProps = _props.rootNativeProps, | ||
| disabled = _props.disabled, | ||
| pickerItemStyle = _props.pickerItemStyle, | ||
| indicatorStyle = _props.indicatorStyle, | ||
| pure = _props.pure, | ||
| children = _props.children; | ||
| var selectedValue = this.getValue(); | ||
| var colElements = children.map(function (col, i) { | ||
| return React.createElement( | ||
| 'div', | ||
| { key: col.key || i, className: prefixCls + '-item' }, | ||
| React.createElement(Picker, _extends({ itemStyle: pickerItemStyle, disabled: disabled, pure: pure, indicatorStyle: indicatorStyle, prefixCls: pickerPrefixCls, selectedValue: selectedValue[i], onValueChange: _this2.onValueChange.bind(_this2, i) }, col.props)) | ||
| ); | ||
| }); | ||
| var selectedValue = this.getValue(); | ||
| var colElements = children.map(function (col, i) { | ||
| return React.createElement( | ||
| 'div', | ||
| _extends({}, rootNativeProps, { className: classnames(className, prefixCls) }), | ||
| colElements | ||
| { key: col.key || i, className: prefixCls + '-item' }, | ||
| React.createElement(Picker, _extends({ itemStyle: pickerItemStyle, disabled: disabled, pure: pure, indicatorStyle: indicatorStyle, prefixCls: pickerPrefixCls, selectedValue: selectedValue[i], onValueChange: function onValueChange() { | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| return _this.onValueChange.apply(_this, [i].concat(args)); | ||
| } }, col.props)) | ||
| ); | ||
| } | ||
| }]); | ||
| return MultiPicker; | ||
| }(React.Component); | ||
| reactMixin.onClass(MultiPicker, MultiPickerMixin); | ||
| }); | ||
| return React.createElement( | ||
| 'div', | ||
| _extends({}, rootNativeProps, { className: classnames(className, prefixCls) }), | ||
| colElements | ||
| ); | ||
| } | ||
| }); | ||
| export default MultiPicker; |
@@ -1,9 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| import React from 'react'; | ||
| import MultiPickerProps from './MultiPickerProps'; | ||
| declare class MultiPicker extends React.Component<MultiPickerProps, any> { | ||
| getValue: () => any; | ||
| onValueChange: (i: number) => any; | ||
| render(): JSX.Element; | ||
| } | ||
| declare const MultiPicker: any; | ||
| export default MultiPicker; |
| import _extends from 'babel-runtime/helpers/extends'; | ||
| import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
| import _createClass from 'babel-runtime/helpers/createClass'; | ||
| import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
| import _inherits from 'babel-runtime/helpers/inherits'; | ||
| import React from 'react'; | ||
| import createClass from 'create-react-class'; | ||
| import { View, StyleSheet } from 'react-native'; | ||
| import reactMixin from 'react-mixin'; | ||
| import Picker from './Picker'; | ||
@@ -22,44 +18,35 @@ import MultiPickerMixin from './MultiPickerMixin'; | ||
| }); | ||
| var MultiPicker = createClass({ | ||
| mixins: [MultiPickerMixin], | ||
| render: function render() { | ||
| var _this = this; | ||
| var MultiPicker = function (_React$Component) { | ||
| _inherits(MultiPicker, _React$Component); | ||
| var props = this.props; | ||
| var disabled = props.disabled, | ||
| pickerItemStyle = props.pickerItemStyle, | ||
| pure = props.pure, | ||
| children = props.children, | ||
| style = props.style; | ||
| function MultiPicker() { | ||
| _classCallCheck(this, MultiPicker); | ||
| return _possibleConstructorReturn(this, (MultiPicker.__proto__ || Object.getPrototypeOf(MultiPicker)).apply(this, arguments)); | ||
| } | ||
| _createClass(MultiPicker, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| var props = this.props; | ||
| var disabled = props.disabled, | ||
| pickerItemStyle = props.pickerItemStyle, | ||
| pure = props.pure, | ||
| children = props.children, | ||
| style = props.style; | ||
| var selectedValue = this.getValue(); | ||
| var colElements = children.map(function (col, i) { | ||
| return React.createElement( | ||
| View, | ||
| { key: col.key || i, style: styles.item }, | ||
| React.createElement(Picker, _extends({ itemStyle: pickerItemStyle, disabled: disabled, pure: pure, selectedValue: selectedValue[i], onValueChange: _this2.onValueChange.bind(_this2, i) }, col.props)) | ||
| ); | ||
| }); | ||
| var selectedValue = this.getValue(); | ||
| var colElements = children.map(function (col, i) { | ||
| return React.createElement( | ||
| View, | ||
| { style: [styles.root, style] }, | ||
| colElements | ||
| { key: col.key || i, style: styles.item }, | ||
| React.createElement(Picker, _extends({ itemStyle: pickerItemStyle, disabled: disabled, pure: pure, selectedValue: selectedValue[i], onValueChange: function onValueChange() { | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| return _this.onValueChange.apply(_this, [i].concat(args)); | ||
| } }, col.props)) | ||
| ); | ||
| } | ||
| }]); | ||
| return MultiPicker; | ||
| }(React.Component); | ||
| reactMixin.onClass(MultiPicker, MultiPickerMixin); | ||
| }); | ||
| return React.createElement( | ||
| View, | ||
| { style: [styles.root, style] }, | ||
| colElements | ||
| ); | ||
| } | ||
| }); | ||
| export default MultiPicker; |
@@ -1,24 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| import React from 'react'; | ||
| import { IPickerProps } from './PickerTypes'; | ||
| declare class Picker extends React.Component<IPickerProps, any> { | ||
| static defaultProps: { | ||
| onValueChange(): void; | ||
| }; | ||
| itemHeight: number; | ||
| itemWidth: number; | ||
| select: (selectedValue: string | number) => void; | ||
| scrollBuffer: any; | ||
| doScrollingComplete: (y: number) => void; | ||
| onItemLayout: (e: any) => void; | ||
| componentDidUpdate(): void; | ||
| componentWillUnMount(): void; | ||
| clearScrollBuffer(): void; | ||
| scrollTo(y: any): void; | ||
| fireValueChange(selectedValue: any): void; | ||
| onScroll: (e: any) => void; | ||
| getChildMember(child: any, m: any): any; | ||
| toChildrenArray(children: any): React.ReactChild[]; | ||
| render(): JSX.Element; | ||
| } | ||
| declare const Picker: any; | ||
| export default Picker; |
@@ -1,8 +0,4 @@ | ||
| import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
| import _createClass from 'babel-runtime/helpers/createClass'; | ||
| import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
| import _inherits from 'babel-runtime/helpers/inherits'; | ||
| import React from 'react'; | ||
| import { ScrollView, View, StyleSheet, PixelRatio, Text } from 'react-native'; | ||
| import reactMixin from 'react-mixin'; | ||
| import createClass from 'create-react-class'; | ||
| import PickerMixin from './PickerMixin'; | ||
@@ -33,152 +29,124 @@ var ratio = PixelRatio.get(); | ||
| }); | ||
| var Picker = createClass({ | ||
| mixins: [PickerMixin], | ||
| statics: { | ||
| Item: function Item() {} | ||
| }, | ||
| onItemLayout: function onItemLayout(e) { | ||
| var _this = this; | ||
| var Picker = function (_React$Component) { | ||
| _inherits(Picker, _React$Component); | ||
| var _e$nativeEvent$layout = e.nativeEvent.layout, | ||
| height = _e$nativeEvent$layout.height, | ||
| width = _e$nativeEvent$layout.width; | ||
| // console.log('onItemLayout', height); | ||
| function Picker() { | ||
| _classCallCheck(this, Picker); | ||
| var _this = _possibleConstructorReturn(this, (Picker.__proto__ || Object.getPrototypeOf(Picker)).apply(this, arguments)); | ||
| _this.onItemLayout = function (e) { | ||
| var _e$nativeEvent$layout = e.nativeEvent.layout, | ||
| height = _e$nativeEvent$layout.height, | ||
| width = _e$nativeEvent$layout.width; | ||
| // console.log('onItemLayout', height); | ||
| if (_this.itemHeight !== height || _this.itemWidth !== width) { | ||
| _this.itemWidth = width; | ||
| _this.refs.indicator.setNativeProps({ | ||
| style: [styles.indicator, { | ||
| top: height * 3, | ||
| height: height, | ||
| width: width | ||
| }] | ||
| }); | ||
| } | ||
| if (_this.itemHeight !== height) { | ||
| _this.itemHeight = height; | ||
| _this.refs.scroller.setNativeProps({ | ||
| style: { | ||
| height: height * 7 | ||
| } | ||
| }); | ||
| _this.refs.content.setNativeProps({ | ||
| style: { | ||
| paddingTop: height * 3, | ||
| paddingBottom: height * 3 | ||
| } | ||
| }); | ||
| // i do no know why!... | ||
| setTimeout(function () { | ||
| _this.select(_this.props.selectedValue); | ||
| }, 0); | ||
| } | ||
| }; | ||
| _this.onScroll = function (e) { | ||
| var y = e.nativeEvent.contentOffset.y; | ||
| _this.clearScrollBuffer(); | ||
| _this.scrollBuffer = setTimeout(function () { | ||
| _this.clearScrollBuffer(); | ||
| _this.doScrollingComplete(y); | ||
| }, 100); | ||
| }; | ||
| return _this; | ||
| } | ||
| _createClass(Picker, [{ | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| this.select(this.props.selectedValue); | ||
| if (this.itemHeight !== height || this.itemWidth !== width) { | ||
| this.itemWidth = width; | ||
| this.refs.indicator.setNativeProps({ | ||
| style: [styles.indicator, { | ||
| top: height * 3, | ||
| height: height, | ||
| width: width | ||
| }] | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'componentWillUnMount', | ||
| value: function componentWillUnMount() { | ||
| this.clearScrollBuffer(); | ||
| } | ||
| }, { | ||
| key: 'clearScrollBuffer', | ||
| value: function clearScrollBuffer() { | ||
| if (this.scrollBuffer) { | ||
| clearTimeout(this.scrollBuffer); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'scrollTo', | ||
| value: function scrollTo(y) { | ||
| this.refs.scroller.scrollTo({ | ||
| y: y, | ||
| animated: false | ||
| if (this.itemHeight !== height) { | ||
| this.itemHeight = height; | ||
| this.refs.scroller.setNativeProps({ | ||
| style: { | ||
| height: height * 7 | ||
| } | ||
| }); | ||
| this.refs.content.setNativeProps({ | ||
| style: { | ||
| paddingTop: height * 3, | ||
| paddingBottom: height * 3 | ||
| } | ||
| }); | ||
| // i do no know why!... | ||
| setTimeout(function () { | ||
| _this.select(_this.props.selectedValue); | ||
| }, 0); | ||
| } | ||
| }, { | ||
| key: 'fireValueChange', | ||
| value: function fireValueChange(selectedValue) { | ||
| if (this.props.selectedValue !== selectedValue && this.props.onValueChange) { | ||
| this.props.onValueChange(selectedValue); | ||
| } | ||
| }, | ||
| componentDidUpdate: function componentDidUpdate() { | ||
| this.select(this.props.selectedValue); | ||
| }, | ||
| componentWillUnMount: function componentWillUnMount() { | ||
| this.clearScrollBuffer(); | ||
| }, | ||
| clearScrollBuffer: function clearScrollBuffer() { | ||
| if (this.scrollBuffer) { | ||
| clearTimeout(this.scrollBuffer); | ||
| } | ||
| }, { | ||
| key: 'getChildMember', | ||
| value: function getChildMember(child, m) { | ||
| return child.props[m]; | ||
| }, | ||
| scrollTo: function scrollTo(y) { | ||
| this.refs.scroller.scrollTo({ | ||
| y: y, | ||
| animated: false | ||
| }); | ||
| }, | ||
| fireValueChange: function fireValueChange(selectedValue) { | ||
| if (this.props.selectedValue !== selectedValue && this.props.onValueChange) { | ||
| this.props.onValueChange(selectedValue); | ||
| } | ||
| }, { | ||
| key: 'toChildrenArray', | ||
| value: function toChildrenArray(children) { | ||
| return React.Children.toArray(children); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| }, | ||
| onScroll: function onScroll(e) { | ||
| var _this2 = this; | ||
| var _props = this.props, | ||
| children = _props.children, | ||
| itemStyle = _props.itemStyle, | ||
| selectedValue = _props.selectedValue, | ||
| style = _props.style; | ||
| var y = e.nativeEvent.contentOffset.y; | ||
| var items = React.Children.map(children, function (item, index) { | ||
| var totalStyle = [styles.itemText]; | ||
| if (selectedValue === item.props.value) { | ||
| totalStyle.push(styles.selectedItemText); | ||
| } | ||
| totalStyle.push(itemStyle); | ||
| return React.createElement( | ||
| View, | ||
| { ref: 'item' + index, onLayout: index === 0 ? _this2.onItemLayout : undefined, key: item.key }, | ||
| React.createElement( | ||
| Text, | ||
| { style: totalStyle, numberOfLines: 1 }, | ||
| item.props.label | ||
| ) | ||
| ); | ||
| }); | ||
| this.clearScrollBuffer(); | ||
| this.scrollBuffer = setTimeout(function () { | ||
| _this2.clearScrollBuffer(); | ||
| _this2.doScrollingComplete(y); | ||
| }, 100); | ||
| }, | ||
| getChildMember: function getChildMember(child, m) { | ||
| return child.props[m]; | ||
| }, | ||
| toChildrenArray: function toChildrenArray(children) { | ||
| return React.Children.toArray(children); | ||
| }, | ||
| render: function render() { | ||
| var _this3 = this; | ||
| var _props = this.props, | ||
| children = _props.children, | ||
| itemStyle = _props.itemStyle, | ||
| selectedValue = _props.selectedValue, | ||
| style = _props.style; | ||
| var items = React.Children.map(children, function (item, index) { | ||
| var totalStyle = [styles.itemText]; | ||
| if (selectedValue === item.props.value) { | ||
| totalStyle.push(styles.selectedItemText); | ||
| } | ||
| totalStyle.push(itemStyle); | ||
| return React.createElement( | ||
| View, | ||
| { style: style }, | ||
| { ref: 'item' + index, onLayout: index === 0 ? _this3.onItemLayout : undefined, key: item.key }, | ||
| React.createElement( | ||
| ScrollView, | ||
| { style: styles.scrollView, ref: 'scroller', onScroll: this.onScroll, scrollEventThrottle: 16, showsVerticalScrollIndicator: false }, | ||
| React.createElement( | ||
| View, | ||
| { ref: 'content' }, | ||
| items | ||
| ) | ||
| ), | ||
| React.createElement(View, { ref: 'indicator', style: styles.indicator }) | ||
| Text, | ||
| { style: totalStyle, numberOfLines: 1 }, | ||
| item.props.label | ||
| ) | ||
| ); | ||
| } | ||
| }]); | ||
| return Picker; | ||
| }(React.Component); | ||
| Picker.defaultProps = { | ||
| onValueChange: function onValueChange() {} | ||
| }; | ||
| Picker.Item = function Item() {}; | ||
| reactMixin.onClass(Picker, PickerMixin); | ||
| }); | ||
| return React.createElement( | ||
| View, | ||
| { style: style }, | ||
| React.createElement( | ||
| ScrollView, | ||
| { style: styles.scrollView, ref: 'scroller', onScroll: this.onScroll, scrollEventThrottle: 16, showsVerticalScrollIndicator: false }, | ||
| React.createElement( | ||
| View, | ||
| { ref: 'content' }, | ||
| items | ||
| ) | ||
| ), | ||
| React.createElement(View, { ref: 'indicator', style: styles.indicator }) | ||
| ); | ||
| } | ||
| }); | ||
| export default Picker; |
@@ -1,4 +0,1 @@ | ||
| /// <reference types="react" /> | ||
| import React from 'react'; | ||
| import { IPickerProps } from './PickerTypes'; | ||
| export interface IPickerItem { | ||
@@ -8,26 +5,3 @@ value: string | number; | ||
| } | ||
| declare class Picker extends React.Component<IPickerProps, any> { | ||
| static defaultProps: { | ||
| prefixCls: string; | ||
| pure: boolean; | ||
| onValueChange(): void; | ||
| }; | ||
| itemHeight: number; | ||
| zscroller: any; | ||
| select: (selectedValue: string | number) => void; | ||
| doScrollingComplete: (y: number) => void; | ||
| constructor(props: any); | ||
| componentDidMount(): void; | ||
| componentWillReceiveProps(nextProps: any): void; | ||
| shouldComponentUpdate(nextProps: any, nextState: any): boolean; | ||
| componentDidUpdate(): void; | ||
| componentWillUnmount(): void; | ||
| scrollTo(top: any): void; | ||
| fireValueChange(selectedValue: any): void; | ||
| scrollingComplete: () => void; | ||
| getChildMember(child: any, m: any): any; | ||
| getValue(): any; | ||
| toChildrenArray(children: any): any; | ||
| render(): JSX.Element; | ||
| } | ||
| declare const Picker: any; | ||
| export default Picker; |
244
es/Picker.js
| import _defineProperty from 'babel-runtime/helpers/defineProperty'; | ||
| import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
| import _createClass from 'babel-runtime/helpers/createClass'; | ||
| import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
| import _inherits from 'babel-runtime/helpers/inherits'; | ||
| import React from 'react'; | ||
| import reactMixin from 'react-mixin'; | ||
| import createClass from 'create-react-class'; | ||
| import classNames from 'classnames'; | ||
@@ -12,23 +8,16 @@ import ZScroller from 'zscroller'; | ||
| import isChildrenEqual from './isChildrenEqual'; | ||
| var Picker = function (_React$Component) { | ||
| _inherits(Picker, _React$Component); | ||
| function Picker(props) { | ||
| _classCallCheck(this, Picker); | ||
| var _this = _possibleConstructorReturn(this, (Picker.__proto__ || Object.getPrototypeOf(Picker)).call(this, props)); | ||
| _this.scrollingComplete = function () { | ||
| var _this$zscroller$scrol = _this.zscroller.scroller.getValues(), | ||
| top = _this$zscroller$scrol.top; | ||
| if (top >= 0) { | ||
| _this.doScrollingComplete(top); | ||
| } | ||
| var Picker = createClass({ | ||
| mixins: [PickerMixin], | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| prefixCls: 'rmc-picker', | ||
| pure: true | ||
| }; | ||
| }, | ||
| getInitialState: function getInitialState() { | ||
| var selectedValueState = void 0; | ||
| var selectedValue = props.selectedValue, | ||
| defaultSelectedValue = props.defaultSelectedValue, | ||
| children = props.children; | ||
| var _props = this.props, | ||
| selectedValue = _props.selectedValue, | ||
| defaultSelectedValue = _props.defaultSelectedValue, | ||
| children = _props.children; | ||
@@ -42,133 +31,108 @@ if (selectedValue !== undefined) { | ||
| } | ||
| _this.state = { | ||
| return { | ||
| selectedValue: selectedValueState | ||
| }; | ||
| return _this; | ||
| } | ||
| _createClass(Picker, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| // https://github.com/react-component/m-picker/issues/18 | ||
| this.itemHeight = this.refs.indicator.getBoundingClientRect().height; | ||
| // compact | ||
| this.refs.content.style.padding = this.itemHeight * 3 + 'px 0'; | ||
| this.zscroller = new ZScroller(this.refs.content, { | ||
| scrollingX: false, | ||
| snapping: true, | ||
| locking: false, | ||
| penetrationDeceleration: .1, | ||
| minVelocityToKeepDecelerating: 0.5, | ||
| scrollingComplete: this.scrollingComplete | ||
| }, | ||
| componentDidMount: function componentDidMount() { | ||
| // https://github.com/react-component/m-picker/issues/18 | ||
| this.itemHeight = this.refs.indicator.getBoundingClientRect().height; | ||
| // compact | ||
| this.refs.content.style.padding = this.itemHeight * 3 + 'px 0'; | ||
| this.zscroller = new ZScroller(this.refs.content, { | ||
| scrollingX: false, | ||
| snapping: true, | ||
| locking: false, | ||
| penetrationDeceleration: .1, | ||
| minVelocityToKeepDecelerating: 0.5, | ||
| scrollingComplete: this.scrollingComplete | ||
| }); | ||
| this.zscroller.setDisabled(this.props.disabled); | ||
| this.zscroller.scroller.setSnapSize(0, this.itemHeight); | ||
| this.select(this.state.selectedValue); | ||
| }, | ||
| componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
| if ('selectedValue' in nextProps) { | ||
| this.setState({ | ||
| selectedValue: nextProps.selectedValue | ||
| }); | ||
| this.zscroller.setDisabled(this.props.disabled); | ||
| this.zscroller.scroller.setSnapSize(0, this.itemHeight); | ||
| this.select(this.state.selectedValue); | ||
| } | ||
| }, { | ||
| key: 'componentWillReceiveProps', | ||
| value: function componentWillReceiveProps(nextProps) { | ||
| if ('selectedValue' in nextProps) { | ||
| this.zscroller.setDisabled(nextProps.disabled); | ||
| }, | ||
| shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) { | ||
| return this.state.selectedValue !== nextState.selectedValue || !isChildrenEqual(this.props.children, nextProps.children, this.props.pure); | ||
| }, | ||
| componentDidUpdate: function componentDidUpdate() { | ||
| this.zscroller.reflow(); | ||
| this.select(this.state.selectedValue); | ||
| }, | ||
| componentWillUnmount: function componentWillUnmount() { | ||
| this.zscroller.destroy(); | ||
| }, | ||
| scrollTo: function scrollTo(top) { | ||
| this.zscroller.scroller.scrollTo(0, top); | ||
| }, | ||
| fireValueChange: function fireValueChange(selectedValue) { | ||
| if (selectedValue !== this.state.selectedValue) { | ||
| if (!('selectedValue' in this.props)) { | ||
| this.setState({ | ||
| selectedValue: nextProps.selectedValue | ||
| selectedValue: selectedValue | ||
| }); | ||
| } | ||
| this.zscroller.setDisabled(nextProps.disabled); | ||
| } | ||
| }, { | ||
| key: 'shouldComponentUpdate', | ||
| value: function shouldComponentUpdate(nextProps, nextState) { | ||
| return this.state.selectedValue !== nextState.selectedValue || !isChildrenEqual(this.props.children, nextProps.children, this.props.pure); | ||
| } | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| this.zscroller.reflow(); | ||
| this.select(this.state.selectedValue); | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| this.zscroller.destroy(); | ||
| } | ||
| }, { | ||
| key: 'scrollTo', | ||
| value: function scrollTo(top) { | ||
| this.zscroller.scroller.scrollTo(0, top); | ||
| } | ||
| }, { | ||
| key: 'fireValueChange', | ||
| value: function fireValueChange(selectedValue) { | ||
| if (selectedValue !== this.state.selectedValue) { | ||
| if (!('selectedValue' in this.props)) { | ||
| this.setState({ | ||
| selectedValue: selectedValue | ||
| }); | ||
| } | ||
| if (this.props.onValueChange) { | ||
| this.props.onValueChange(selectedValue); | ||
| } | ||
| if (this.props.onValueChange) { | ||
| this.props.onValueChange(selectedValue); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'getChildMember', | ||
| value: function getChildMember(child, m) { | ||
| return child[m]; | ||
| }, | ||
| scrollingComplete: function scrollingComplete() { | ||
| var _zscroller$scroller$g = this.zscroller.scroller.getValues(), | ||
| top = _zscroller$scroller$g.top; | ||
| if (top >= 0) { | ||
| this.doScrollingComplete(top); | ||
| } | ||
| }, { | ||
| key: 'getValue', | ||
| value: function getValue() { | ||
| return this.props.selectedValue || this.props.children && this.props.children[0] && this.props.children[0].value; | ||
| } | ||
| }, { | ||
| key: 'toChildrenArray', | ||
| value: function toChildrenArray(children) { | ||
| return children; | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _pickerCls; | ||
| }, | ||
| getChildMember: function getChildMember(child, m) { | ||
| return child[m]; | ||
| }, | ||
| getValue: function getValue() { | ||
| return this.props.selectedValue || this.props.children && this.props.children[0] && this.props.children[0].value; | ||
| }, | ||
| toChildrenArray: function toChildrenArray(children) { | ||
| // when use preact，when the children is [] will change to undeined | ||
| return children || []; | ||
| }, | ||
| render: function render() { | ||
| var _pickerCls; | ||
| var _props = this.props, | ||
| children = _props.children, | ||
| prefixCls = _props.prefixCls, | ||
| className = _props.className, | ||
| itemStyle = _props.itemStyle, | ||
| indicatorStyle = _props.indicatorStyle; | ||
| var selectedValue = this.state.selectedValue; | ||
| var _props2 = this.props, | ||
| children = _props2.children, | ||
| prefixCls = _props2.prefixCls, | ||
| className = _props2.className, | ||
| itemStyle = _props2.itemStyle, | ||
| indicatorStyle = _props2.indicatorStyle; | ||
| var selectedValue = this.state.selectedValue; | ||
| var itemClassName = prefixCls + '-item'; | ||
| var selectedItemClassName = itemClassName + ' ' + prefixCls + '-item-selected'; | ||
| var items = children.map(function (item) { | ||
| return React.createElement( | ||
| 'div', | ||
| { style: itemStyle, className: selectedValue === item.value ? selectedItemClassName : itemClassName, key: item.value }, | ||
| item.label | ||
| ); | ||
| }); | ||
| var pickerCls = (_pickerCls = {}, _defineProperty(_pickerCls, className, !!className), _defineProperty(_pickerCls, prefixCls, true), _pickerCls); | ||
| var itemClassName = prefixCls + '-item'; | ||
| var selectedItemClassName = itemClassName + ' ' + prefixCls + '-item-selected'; | ||
| var items = this.toChildrenArray(children).map(function (item) { | ||
| return React.createElement( | ||
| 'div', | ||
| { className: classNames(pickerCls) }, | ||
| React.createElement('div', { className: prefixCls + '-mask' }), | ||
| React.createElement('div', { className: prefixCls + '-indicator', ref: 'indicator', style: indicatorStyle }), | ||
| React.createElement( | ||
| 'div', | ||
| { className: prefixCls + '-content', ref: 'content' }, | ||
| items | ||
| ) | ||
| { style: itemStyle, className: selectedValue === item.value ? selectedItemClassName : itemClassName, key: item.value }, | ||
| item.label | ||
| ); | ||
| } | ||
| }]); | ||
| return Picker; | ||
| }(React.Component); | ||
| Picker.defaultProps = { | ||
| prefixCls: 'rmc-picker', | ||
| pure: true, | ||
| onValueChange: function onValueChange() {} | ||
| }; | ||
| reactMixin.onClass(Picker, PickerMixin); | ||
| }); | ||
| var pickerCls = (_pickerCls = {}, _defineProperty(_pickerCls, className, !!className), _defineProperty(_pickerCls, prefixCls, true), _pickerCls); | ||
| return React.createElement( | ||
| 'div', | ||
| { className: classNames(pickerCls) }, | ||
| React.createElement('div', { className: prefixCls + '-mask' }), | ||
| React.createElement('div', { className: prefixCls + '-indicator', ref: 'indicator', style: indicatorStyle }), | ||
| React.createElement( | ||
| 'div', | ||
| { className: prefixCls + '-content', ref: 'content' }, | ||
| items | ||
| ) | ||
| ); | ||
| } | ||
| }); | ||
| export default Picker; |
@@ -1,18 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| import React from 'react'; | ||
| import { IPopupPickerProps } from './PopupPickerTypes'; | ||
| declare class PopupPicker extends React.Component<IPopupPickerProps, any> { | ||
| static defaultProps: { | ||
| prefixCls: string; | ||
| triggerType: string; | ||
| WrapComponent: string; | ||
| }; | ||
| hide: () => void; | ||
| onDismiss: () => void; | ||
| onOk: () => void; | ||
| getContent: () => any; | ||
| getRender: () => any; | ||
| getModal(): JSX.Element | null; | ||
| render(): any; | ||
| } | ||
| declare const PopupPicker: any; | ||
| export default PopupPicker; |
119
es/Popup.js
@@ -1,82 +0,63 @@ | ||
| import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
| import _createClass from 'babel-runtime/helpers/createClass'; | ||
| import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
| import _inherits from 'babel-runtime/helpers/inherits'; | ||
| import React from 'react'; | ||
| import Modal from 'rc-dialog'; | ||
| import reactMixin from 'react-mixin'; | ||
| import createClass from 'create-react-class'; | ||
| import PopupMixin from './PopupMixin'; | ||
| import Touchable from 'rc-touchable'; | ||
| var PopupPicker = createClass({ | ||
| mixins: [PopupMixin], | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| prefixCls: 'rmc-picker-popup', | ||
| triggerType: 'onClick', | ||
| WrapComponent: 'span' | ||
| }; | ||
| }, | ||
| getModal: function getModal() { | ||
| var props = this.props; | ||
| if (!this.state.visible) { | ||
| return null; | ||
| } | ||
| var prefixCls = props.prefixCls; | ||
| var PopupPicker = function (_React$Component) { | ||
| _inherits(PopupPicker, _React$Component); | ||
| function PopupPicker() { | ||
| _classCallCheck(this, PopupPicker); | ||
| return _possibleConstructorReturn(this, (PopupPicker.__proto__ || Object.getPrototypeOf(PopupPicker)).apply(this, arguments)); | ||
| } | ||
| _createClass(PopupPicker, [{ | ||
| key: 'getModal', | ||
| value: function getModal() { | ||
| var props = this.props; | ||
| if (!this.state.visible) { | ||
| return null; | ||
| } | ||
| var prefixCls = props.prefixCls; | ||
| return React.createElement( | ||
| Modal, | ||
| { prefixCls: '' + prefixCls, className: props.className || '', visible: true, closable: false, transitionName: props.transitionName || props.popupTransitionName, maskTransitionName: props.maskTransitionName, onClose: this.hide.bind(this), style: props.style }, | ||
| return React.createElement( | ||
| Modal, | ||
| { prefixCls: '' + prefixCls, className: props.className || '', visible: true, closable: false, transitionName: props.transitionName || props.popupTransitionName, maskTransitionName: props.maskTransitionName, onClose: this.hide, style: props.style }, | ||
| React.createElement( | ||
| 'div', | ||
| null, | ||
| React.createElement( | ||
| 'div', | ||
| null, | ||
| { className: prefixCls + '-header' }, | ||
| React.createElement( | ||
| Touchable, | ||
| { activeClassName: prefixCls + '-item-active' }, | ||
| React.createElement( | ||
| 'div', | ||
| { className: prefixCls + '-item ' + prefixCls + '-header-left', onClick: this.onDismiss }, | ||
| props.dismissText | ||
| ) | ||
| ), | ||
| React.createElement( | ||
| 'div', | ||
| { className: prefixCls + '-header' }, | ||
| { className: prefixCls + '-item ' + prefixCls + '-title' }, | ||
| props.title | ||
| ), | ||
| React.createElement( | ||
| Touchable, | ||
| { activeClassName: prefixCls + '-item-active' }, | ||
| React.createElement( | ||
| Touchable, | ||
| { activeClassName: prefixCls + '-item-active' }, | ||
| React.createElement( | ||
| 'div', | ||
| { className: prefixCls + '-item ' + prefixCls + '-header-left', onClick: this.onDismiss.bind(this) }, | ||
| props.dismissText | ||
| ) | ||
| ), | ||
| React.createElement( | ||
| 'div', | ||
| { className: prefixCls + '-item ' + prefixCls + '-title' }, | ||
| props.title | ||
| ), | ||
| React.createElement( | ||
| Touchable, | ||
| { activeClassName: prefixCls + '-item-active' }, | ||
| React.createElement( | ||
| 'div', | ||
| { className: prefixCls + '-item ' + prefixCls + '-header-right', onClick: this.onOk.bind(this) }, | ||
| props.okText | ||
| ) | ||
| { className: prefixCls + '-item ' + prefixCls + '-header-right', onClick: this.onOk }, | ||
| props.okText | ||
| ) | ||
| ), | ||
| this.getContent() | ||
| ) | ||
| ); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| return this.getRender(); | ||
| } | ||
| }]); | ||
| return PopupPicker; | ||
| }(React.Component); | ||
| PopupPicker.defaultProps = { | ||
| prefixCls: 'rmc-picker-popup', | ||
| triggerType: 'onClick', | ||
| WrapComponent: 'span' | ||
| }; | ||
| reactMixin.onClass(PopupPicker, PopupMixin); | ||
| ) | ||
| ), | ||
| this.getContent() | ||
| ) | ||
| ); | ||
| }, | ||
| render: function render() { | ||
| return this.getRender(); | ||
| } | ||
| }); | ||
| export default PopupPicker; |
@@ -1,20 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| /// <reference types="react-native" /> | ||
| import React from 'react'; | ||
| import { IPopupPickerProps } from './PopupPickerTypes'; | ||
| declare class PopupPicker extends React.Component<IPopupPickerProps, any> { | ||
| static defaultProps: { | ||
| actionTextUnderlayColor: string; | ||
| actionTextActiveOpacity: number; | ||
| triggerType: string; | ||
| styles: {}; | ||
| WrapComponent: React.ViewStatic; | ||
| }; | ||
| onDismiss: () => void; | ||
| onOk: () => void; | ||
| getContent: () => any; | ||
| getRender: () => any; | ||
| getModal(): JSX.Element; | ||
| render(): any; | ||
| } | ||
| declare const PopupPicker: any; | ||
| export default PopupPicker; |
@@ -1,87 +0,68 @@ | ||
| import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
| import _createClass from 'babel-runtime/helpers/createClass'; | ||
| import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
| import _inherits from 'babel-runtime/helpers/inherits'; | ||
| import React from 'react'; | ||
| import { View, TouchableHighlight, Text } from 'react-native'; | ||
| import reactMixin from 'react-mixin'; | ||
| import createClass from 'create-react-class'; | ||
| import PopupMixin from './PopupMixin'; | ||
| import Modal from 'rc-dialog/es/Modal'; | ||
| var PopupPicker = createClass({ | ||
| mixins: [PopupMixin], | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| actionTextUnderlayColor: '#ddd', | ||
| actionTextActiveOpacity: 1, | ||
| triggerType: 'onPress', | ||
| styles: {}, | ||
| WrapComponent: View | ||
| }; | ||
| }, | ||
| getModal: function getModal() { | ||
| var props = this.props; | ||
| var styles = props.styles, | ||
| title = props.title, | ||
| okText = props.okText, | ||
| dismissText = props.dismissText; | ||
| var PopupPicker = function (_React$Component) { | ||
| _inherits(PopupPicker, _React$Component); | ||
| function PopupPicker() { | ||
| _classCallCheck(this, PopupPicker); | ||
| return _possibleConstructorReturn(this, (PopupPicker.__proto__ || Object.getPrototypeOf(PopupPicker)).apply(this, arguments)); | ||
| } | ||
| _createClass(PopupPicker, [{ | ||
| key: 'getModal', | ||
| value: function getModal() { | ||
| var props = this.props; | ||
| var styles = props.styles, | ||
| title = props.title, | ||
| okText = props.okText, | ||
| dismissText = props.dismissText; | ||
| var titleEl = typeof title === 'string' ? React.createElement( | ||
| Text, | ||
| { style: [styles.title] }, | ||
| title | ||
| ) : title; | ||
| var okEl = typeof okText === 'string' ? React.createElement( | ||
| Text, | ||
| { style: [styles.actionText] }, | ||
| okText | ||
| ) : okText; | ||
| var dismissEl = typeof dismissText === 'string' ? React.createElement( | ||
| Text, | ||
| { style: [styles.actionText] }, | ||
| dismissText | ||
| ) : dismissText; | ||
| return React.createElement( | ||
| Modal, | ||
| { animationType: 'slide-up', wrapStyle: styles.modal, visible: this.state.visible, onClose: this.onDismiss.bind(this) }, | ||
| var titleEl = typeof title === 'string' ? React.createElement( | ||
| Text, | ||
| { style: [styles.title] }, | ||
| title | ||
| ) : title; | ||
| var okEl = typeof okText === 'string' ? React.createElement( | ||
| Text, | ||
| { style: [styles.actionText] }, | ||
| okText | ||
| ) : okText; | ||
| var dismissEl = typeof dismissText === 'string' ? React.createElement( | ||
| Text, | ||
| { style: [styles.actionText] }, | ||
| dismissText | ||
| ) : dismissText; | ||
| return React.createElement( | ||
| Modal, | ||
| { animationType: 'slide-up', wrapStyle: styles.modal, visible: this.state.visible, onClose: this.onDismiss }, | ||
| React.createElement( | ||
| View, | ||
| { style: [styles.header] }, | ||
| React.createElement( | ||
| TouchableHighlight, | ||
| { onPress: this.onDismiss, style: [styles.headerItem], activeOpacity: props.actionTextActiveOpacity, underlayColor: props.actionTextUnderlayColor }, | ||
| dismissEl | ||
| ), | ||
| React.createElement( | ||
| View, | ||
| { style: [styles.header] }, | ||
| React.createElement( | ||
| TouchableHighlight, | ||
| { onPress: this.onDismiss.bind(this), style: [styles.headerItem], activeOpacity: props.actionTextActiveOpacity, underlayColor: props.actionTextUnderlayColor }, | ||
| dismissEl | ||
| ), | ||
| React.createElement( | ||
| View, | ||
| { style: [styles.headerItem] }, | ||
| titleEl | ||
| ), | ||
| React.createElement( | ||
| TouchableHighlight, | ||
| { onPress: this.onOk.bind(this), style: [styles.headerItem], activeOpacity: props.actionTextActiveOpacity, underlayColor: props.actionTextUnderlayColor }, | ||
| okEl | ||
| ) | ||
| { style: [styles.headerItem] }, | ||
| titleEl | ||
| ), | ||
| this.getContent() | ||
| ); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| return this.getRender(); | ||
| } | ||
| }]); | ||
| return PopupPicker; | ||
| }(React.Component); | ||
| PopupPicker.defaultProps = { | ||
| actionTextUnderlayColor: '#ddd', | ||
| actionTextActiveOpacity: 1, | ||
| triggerType: 'onPress', | ||
| styles: {}, | ||
| WrapComponent: View | ||
| }; | ||
| reactMixin.onClass(PopupPicker, PopupMixin); | ||
| React.createElement( | ||
| TouchableHighlight, | ||
| { onPress: this.onOk, style: [styles.headerItem], activeOpacity: props.actionTextActiveOpacity, underlayColor: props.actionTextUnderlayColor }, | ||
| okEl | ||
| ) | ||
| ), | ||
| this.getContent() | ||
| ); | ||
| }, | ||
| render: function render() { | ||
| return this.getRender(); | ||
| } | ||
| }); | ||
| export default PopupPicker; |
@@ -81,3 +81,3 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty'; | ||
| if (!disabled) { | ||
| newChildProps[props.triggerType] = this.onTriggerClick.bind(this); | ||
| newChildProps[props.triggerType] = this.onTriggerClick; | ||
| } | ||
@@ -112,3 +112,3 @@ return React.createElement( | ||
| } | ||
| return React.cloneElement(this.props.picker, (_React$cloneElement = {}, _defineProperty(_React$cloneElement, this.props.pickerValueProp, pickerValue), _defineProperty(_React$cloneElement, this.props.pickerValueChangeProp, this.onPickerChange.bind(this)), _defineProperty(_React$cloneElement, 'ref', this.saveRef.bind(this)), _React$cloneElement)); | ||
| return React.cloneElement(this.props.picker, (_React$cloneElement = {}, _defineProperty(_React$cloneElement, this.props.pickerValueProp, pickerValue), _defineProperty(_React$cloneElement, this.props.pickerValueChangeProp, this.onPickerChange), _defineProperty(_React$cloneElement, 'ref', this.saveRef), _React$cloneElement)); | ||
| } else { | ||
@@ -115,0 +115,0 @@ return this.props.content; |
@@ -1,9 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| import React from 'react'; | ||
| import MultiPickerProps from './MultiPickerProps'; | ||
| declare class MultiPicker extends React.Component<MultiPickerProps, any> { | ||
| getValue: () => any; | ||
| onValueChange: (i: number) => any; | ||
| render(): JSX.Element; | ||
| } | ||
| declare const MultiPicker: any; | ||
| export default MultiPicker; |
@@ -11,18 +11,2 @@ 'use strict'; | ||
| var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
| var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
| var _createClass2 = require('babel-runtime/helpers/createClass'); | ||
| var _createClass3 = _interopRequireDefault(_createClass2); | ||
| var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
| var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
| var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
| var _inherits3 = _interopRequireDefault(_inherits2); | ||
| var _react = require('react'); | ||
@@ -36,5 +20,5 @@ | ||
| var _reactMixin = require('react-mixin'); | ||
| var _createReactClass = require('create-react-class'); | ||
| var _reactMixin2 = _interopRequireDefault(_reactMixin); | ||
| var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
@@ -51,46 +35,40 @@ var _Picker = require('./Picker'); | ||
| var MultiPicker = function (_React$Component) { | ||
| (0, _inherits3['default'])(MultiPicker, _React$Component); | ||
| var MultiPicker = (0, _createReactClass2['default'])({ | ||
| mixins: [_MultiPickerMixin2['default']], | ||
| render: function render() { | ||
| var _this = this; | ||
| function MultiPicker() { | ||
| (0, _classCallCheck3['default'])(this, MultiPicker); | ||
| return (0, _possibleConstructorReturn3['default'])(this, (MultiPicker.__proto__ || Object.getPrototypeOf(MultiPicker)).apply(this, arguments)); | ||
| } | ||
| var _props = this.props, | ||
| prefixCls = _props.prefixCls, | ||
| pickerPrefixCls = _props.pickerPrefixCls, | ||
| className = _props.className, | ||
| rootNativeProps = _props.rootNativeProps, | ||
| disabled = _props.disabled, | ||
| pickerItemStyle = _props.pickerItemStyle, | ||
| indicatorStyle = _props.indicatorStyle, | ||
| pure = _props.pure, | ||
| children = _props.children; | ||
| (0, _createClass3['default'])(MultiPicker, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| var _props = this.props, | ||
| prefixCls = _props.prefixCls, | ||
| pickerPrefixCls = _props.pickerPrefixCls, | ||
| className = _props.className, | ||
| rootNativeProps = _props.rootNativeProps, | ||
| disabled = _props.disabled, | ||
| pickerItemStyle = _props.pickerItemStyle, | ||
| indicatorStyle = _props.indicatorStyle, | ||
| pure = _props.pure, | ||
| children = _props.children; | ||
| var selectedValue = this.getValue(); | ||
| var colElements = children.map(function (col, i) { | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { key: col.key || i, className: prefixCls + '-item' }, | ||
| _react2['default'].createElement(_Picker2['default'], (0, _extends3['default'])({ itemStyle: pickerItemStyle, disabled: disabled, pure: pure, indicatorStyle: indicatorStyle, prefixCls: pickerPrefixCls, selectedValue: selectedValue[i], onValueChange: _this2.onValueChange.bind(_this2, i) }, col.props)) | ||
| ); | ||
| }); | ||
| var selectedValue = this.getValue(); | ||
| var colElements = children.map(function (col, i) { | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| (0, _extends3['default'])({}, rootNativeProps, { className: (0, _classnames2['default'])(className, prefixCls) }), | ||
| colElements | ||
| { key: col.key || i, className: prefixCls + '-item' }, | ||
| _react2['default'].createElement(_Picker2['default'], (0, _extends3['default'])({ itemStyle: pickerItemStyle, disabled: disabled, pure: pure, indicatorStyle: indicatorStyle, prefixCls: pickerPrefixCls, selectedValue: selectedValue[i], onValueChange: function onValueChange() { | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| return _this.onValueChange.apply(_this, [i].concat(args)); | ||
| } }, col.props)) | ||
| ); | ||
| } | ||
| }]); | ||
| return MultiPicker; | ||
| }(_react2['default'].Component); | ||
| _reactMixin2['default'].onClass(MultiPicker, _MultiPickerMixin2['default']); | ||
| }); | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| (0, _extends3['default'])({}, rootNativeProps, { className: (0, _classnames2['default'])(className, prefixCls) }), | ||
| colElements | ||
| ); | ||
| } | ||
| }); | ||
| exports['default'] = MultiPicker; | ||
| module.exports = exports['default']; |
@@ -1,9 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| import React from 'react'; | ||
| import MultiPickerProps from './MultiPickerProps'; | ||
| declare class MultiPicker extends React.Component<MultiPickerProps, any> { | ||
| getValue: () => any; | ||
| onValueChange: (i: number) => any; | ||
| render(): JSX.Element; | ||
| } | ||
| declare const MultiPicker: any; | ||
| export default MultiPicker; |
@@ -11,18 +11,2 @@ 'use strict'; | ||
| var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
| var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
| var _createClass2 = require('babel-runtime/helpers/createClass'); | ||
| var _createClass3 = _interopRequireDefault(_createClass2); | ||
| var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
| var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
| var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
| var _inherits3 = _interopRequireDefault(_inherits2); | ||
| var _react = require('react'); | ||
@@ -32,7 +16,7 @@ | ||
| var _reactNative = require('react-native'); | ||
| var _createReactClass = require('create-react-class'); | ||
| var _reactMixin = require('react-mixin'); | ||
| var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
| var _reactMixin2 = _interopRequireDefault(_reactMixin); | ||
| var _reactNative = require('react-native'); | ||
@@ -60,43 +44,36 @@ var _Picker = require('./Picker'); | ||
| }); | ||
| var MultiPicker = (0, _createReactClass2['default'])({ | ||
| mixins: [_MultiPickerMixin2['default']], | ||
| render: function render() { | ||
| var _this = this; | ||
| var MultiPicker = function (_React$Component) { | ||
| (0, _inherits3['default'])(MultiPicker, _React$Component); | ||
| var props = this.props; | ||
| var disabled = props.disabled, | ||
| pickerItemStyle = props.pickerItemStyle, | ||
| pure = props.pure, | ||
| children = props.children, | ||
| style = props.style; | ||
| function MultiPicker() { | ||
| (0, _classCallCheck3['default'])(this, MultiPicker); | ||
| return (0, _possibleConstructorReturn3['default'])(this, (MultiPicker.__proto__ || Object.getPrototypeOf(MultiPicker)).apply(this, arguments)); | ||
| } | ||
| (0, _createClass3['default'])(MultiPicker, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| var props = this.props; | ||
| var disabled = props.disabled, | ||
| pickerItemStyle = props.pickerItemStyle, | ||
| pure = props.pure, | ||
| children = props.children, | ||
| style = props.style; | ||
| var selectedValue = this.getValue(); | ||
| var colElements = children.map(function (col, i) { | ||
| return _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { key: col.key || i, style: styles.item }, | ||
| _react2['default'].createElement(_Picker2['default'], (0, _extends3['default'])({ itemStyle: pickerItemStyle, disabled: disabled, pure: pure, selectedValue: selectedValue[i], onValueChange: _this2.onValueChange.bind(_this2, i) }, col.props)) | ||
| ); | ||
| }); | ||
| var selectedValue = this.getValue(); | ||
| var colElements = children.map(function (col, i) { | ||
| return _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { style: [styles.root, style] }, | ||
| colElements | ||
| { key: col.key || i, style: styles.item }, | ||
| _react2['default'].createElement(_Picker2['default'], (0, _extends3['default'])({ itemStyle: pickerItemStyle, disabled: disabled, pure: pure, selectedValue: selectedValue[i], onValueChange: function onValueChange() { | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| return _this.onValueChange.apply(_this, [i].concat(args)); | ||
| } }, col.props)) | ||
| ); | ||
| } | ||
| }]); | ||
| return MultiPicker; | ||
| }(_react2['default'].Component); | ||
| _reactMixin2['default'].onClass(MultiPicker, _MultiPickerMixin2['default']); | ||
| }); | ||
| return _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { style: [styles.root, style] }, | ||
| colElements | ||
| ); | ||
| } | ||
| }); | ||
| exports['default'] = MultiPicker; | ||
| module.exports = exports['default']; |
@@ -1,24 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| import React from 'react'; | ||
| import { IPickerProps } from './PickerTypes'; | ||
| declare class Picker extends React.Component<IPickerProps, any> { | ||
| static defaultProps: { | ||
| onValueChange(): void; | ||
| }; | ||
| itemHeight: number; | ||
| itemWidth: number; | ||
| select: (selectedValue: string | number) => void; | ||
| scrollBuffer: any; | ||
| doScrollingComplete: (y: number) => void; | ||
| onItemLayout: (e: any) => void; | ||
| componentDidUpdate(): void; | ||
| componentWillUnMount(): void; | ||
| clearScrollBuffer(): void; | ||
| scrollTo(y: any): void; | ||
| fireValueChange(selectedValue: any): void; | ||
| onScroll: (e: any) => void; | ||
| getChildMember(child: any, m: any): any; | ||
| toChildrenArray(children: any): React.ReactChild[]; | ||
| render(): JSX.Element; | ||
| } | ||
| declare const Picker: any; | ||
| export default Picker; |
@@ -7,18 +7,2 @@ 'use strict'; | ||
| var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
| var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
| var _createClass2 = require('babel-runtime/helpers/createClass'); | ||
| var _createClass3 = _interopRequireDefault(_createClass2); | ||
| var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
| var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
| var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
| var _inherits3 = _interopRequireDefault(_inherits2); | ||
| var _react = require('react'); | ||
@@ -30,5 +14,5 @@ | ||
| var _reactMixin = require('react-mixin'); | ||
| var _createReactClass = require('create-react-class'); | ||
| var _reactMixin2 = _interopRequireDefault(_reactMixin); | ||
| var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
@@ -65,152 +49,125 @@ var _PickerMixin = require('./PickerMixin'); | ||
| }); | ||
| var Picker = (0, _createReactClass2['default'])({ | ||
| mixins: [_PickerMixin2['default']], | ||
| statics: { | ||
| Item: function Item() {} | ||
| }, | ||
| onItemLayout: function onItemLayout(e) { | ||
| var _this = this; | ||
| var Picker = function (_React$Component) { | ||
| (0, _inherits3['default'])(Picker, _React$Component); | ||
| var _e$nativeEvent$layout = e.nativeEvent.layout, | ||
| height = _e$nativeEvent$layout.height, | ||
| width = _e$nativeEvent$layout.width; | ||
| // console.log('onItemLayout', height); | ||
| function Picker() { | ||
| (0, _classCallCheck3['default'])(this, Picker); | ||
| var _this = (0, _possibleConstructorReturn3['default'])(this, (Picker.__proto__ || Object.getPrototypeOf(Picker)).apply(this, arguments)); | ||
| _this.onItemLayout = function (e) { | ||
| var _e$nativeEvent$layout = e.nativeEvent.layout, | ||
| height = _e$nativeEvent$layout.height, | ||
| width = _e$nativeEvent$layout.width; | ||
| // console.log('onItemLayout', height); | ||
| if (_this.itemHeight !== height || _this.itemWidth !== width) { | ||
| _this.itemWidth = width; | ||
| _this.refs.indicator.setNativeProps({ | ||
| style: [styles.indicator, { | ||
| top: height * 3, | ||
| height: height, | ||
| width: width | ||
| }] | ||
| }); | ||
| } | ||
| if (_this.itemHeight !== height) { | ||
| _this.itemHeight = height; | ||
| _this.refs.scroller.setNativeProps({ | ||
| style: { | ||
| height: height * 7 | ||
| } | ||
| }); | ||
| _this.refs.content.setNativeProps({ | ||
| style: { | ||
| paddingTop: height * 3, | ||
| paddingBottom: height * 3 | ||
| } | ||
| }); | ||
| // i do no know why!... | ||
| setTimeout(function () { | ||
| _this.select(_this.props.selectedValue); | ||
| }, 0); | ||
| } | ||
| }; | ||
| _this.onScroll = function (e) { | ||
| var y = e.nativeEvent.contentOffset.y; | ||
| _this.clearScrollBuffer(); | ||
| _this.scrollBuffer = setTimeout(function () { | ||
| _this.clearScrollBuffer(); | ||
| _this.doScrollingComplete(y); | ||
| }, 100); | ||
| }; | ||
| return _this; | ||
| } | ||
| (0, _createClass3['default'])(Picker, [{ | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| this.select(this.props.selectedValue); | ||
| if (this.itemHeight !== height || this.itemWidth !== width) { | ||
| this.itemWidth = width; | ||
| this.refs.indicator.setNativeProps({ | ||
| style: [styles.indicator, { | ||
| top: height * 3, | ||
| height: height, | ||
| width: width | ||
| }] | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'componentWillUnMount', | ||
| value: function componentWillUnMount() { | ||
| this.clearScrollBuffer(); | ||
| } | ||
| }, { | ||
| key: 'clearScrollBuffer', | ||
| value: function clearScrollBuffer() { | ||
| if (this.scrollBuffer) { | ||
| clearTimeout(this.scrollBuffer); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'scrollTo', | ||
| value: function scrollTo(y) { | ||
| this.refs.scroller.scrollTo({ | ||
| y: y, | ||
| animated: false | ||
| if (this.itemHeight !== height) { | ||
| this.itemHeight = height; | ||
| this.refs.scroller.setNativeProps({ | ||
| style: { | ||
| height: height * 7 | ||
| } | ||
| }); | ||
| this.refs.content.setNativeProps({ | ||
| style: { | ||
| paddingTop: height * 3, | ||
| paddingBottom: height * 3 | ||
| } | ||
| }); | ||
| // i do no know why!... | ||
| setTimeout(function () { | ||
| _this.select(_this.props.selectedValue); | ||
| }, 0); | ||
| } | ||
| }, { | ||
| key: 'fireValueChange', | ||
| value: function fireValueChange(selectedValue) { | ||
| if (this.props.selectedValue !== selectedValue && this.props.onValueChange) { | ||
| this.props.onValueChange(selectedValue); | ||
| } | ||
| }, | ||
| componentDidUpdate: function componentDidUpdate() { | ||
| this.select(this.props.selectedValue); | ||
| }, | ||
| componentWillUnMount: function componentWillUnMount() { | ||
| this.clearScrollBuffer(); | ||
| }, | ||
| clearScrollBuffer: function clearScrollBuffer() { | ||
| if (this.scrollBuffer) { | ||
| clearTimeout(this.scrollBuffer); | ||
| } | ||
| }, { | ||
| key: 'getChildMember', | ||
| value: function getChildMember(child, m) { | ||
| return child.props[m]; | ||
| }, | ||
| scrollTo: function scrollTo(y) { | ||
| this.refs.scroller.scrollTo({ | ||
| y: y, | ||
| animated: false | ||
| }); | ||
| }, | ||
| fireValueChange: function fireValueChange(selectedValue) { | ||
| if (this.props.selectedValue !== selectedValue && this.props.onValueChange) { | ||
| this.props.onValueChange(selectedValue); | ||
| } | ||
| }, { | ||
| key: 'toChildrenArray', | ||
| value: function toChildrenArray(children) { | ||
| return _react2['default'].Children.toArray(children); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| }, | ||
| onScroll: function onScroll(e) { | ||
| var _this2 = this; | ||
| var _props = this.props, | ||
| children = _props.children, | ||
| itemStyle = _props.itemStyle, | ||
| selectedValue = _props.selectedValue, | ||
| style = _props.style; | ||
| var y = e.nativeEvent.contentOffset.y; | ||
| var items = _react2['default'].Children.map(children, function (item, index) { | ||
| var totalStyle = [styles.itemText]; | ||
| if (selectedValue === item.props.value) { | ||
| totalStyle.push(styles.selectedItemText); | ||
| } | ||
| totalStyle.push(itemStyle); | ||
| return _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { ref: 'item' + index, onLayout: index === 0 ? _this2.onItemLayout : undefined, key: item.key }, | ||
| _react2['default'].createElement( | ||
| _reactNative.Text, | ||
| { style: totalStyle, numberOfLines: 1 }, | ||
| item.props.label | ||
| ) | ||
| ); | ||
| }); | ||
| this.clearScrollBuffer(); | ||
| this.scrollBuffer = setTimeout(function () { | ||
| _this2.clearScrollBuffer(); | ||
| _this2.doScrollingComplete(y); | ||
| }, 100); | ||
| }, | ||
| getChildMember: function getChildMember(child, m) { | ||
| return child.props[m]; | ||
| }, | ||
| toChildrenArray: function toChildrenArray(children) { | ||
| return _react2['default'].Children.toArray(children); | ||
| }, | ||
| render: function render() { | ||
| var _this3 = this; | ||
| var _props = this.props, | ||
| children = _props.children, | ||
| itemStyle = _props.itemStyle, | ||
| selectedValue = _props.selectedValue, | ||
| style = _props.style; | ||
| var items = _react2['default'].Children.map(children, function (item, index) { | ||
| var totalStyle = [styles.itemText]; | ||
| if (selectedValue === item.props.value) { | ||
| totalStyle.push(styles.selectedItemText); | ||
| } | ||
| totalStyle.push(itemStyle); | ||
| return _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { style: style }, | ||
| { ref: 'item' + index, onLayout: index === 0 ? _this3.onItemLayout : undefined, key: item.key }, | ||
| _react2['default'].createElement( | ||
| _reactNative.ScrollView, | ||
| { style: styles.scrollView, ref: 'scroller', onScroll: this.onScroll, scrollEventThrottle: 16, showsVerticalScrollIndicator: false }, | ||
| _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { ref: 'content' }, | ||
| items | ||
| ) | ||
| ), | ||
| _react2['default'].createElement(_reactNative.View, { ref: 'indicator', style: styles.indicator }) | ||
| _reactNative.Text, | ||
| { style: totalStyle, numberOfLines: 1 }, | ||
| item.props.label | ||
| ) | ||
| ); | ||
| } | ||
| }]); | ||
| return Picker; | ||
| }(_react2['default'].Component); | ||
| Picker.defaultProps = { | ||
| onValueChange: function onValueChange() {} | ||
| }; | ||
| Picker.Item = function Item() {}; | ||
| _reactMixin2['default'].onClass(Picker, _PickerMixin2['default']); | ||
| }); | ||
| return _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { style: style }, | ||
| _react2['default'].createElement( | ||
| _reactNative.ScrollView, | ||
| { style: styles.scrollView, ref: 'scroller', onScroll: this.onScroll, scrollEventThrottle: 16, showsVerticalScrollIndicator: false }, | ||
| _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { ref: 'content' }, | ||
| items | ||
| ) | ||
| ), | ||
| _react2['default'].createElement(_reactNative.View, { ref: 'indicator', style: styles.indicator }) | ||
| ); | ||
| } | ||
| }); | ||
| exports['default'] = Picker; | ||
| module.exports = exports['default']; |
@@ -1,4 +0,1 @@ | ||
| /// <reference types="react" /> | ||
| import React from 'react'; | ||
| import { IPickerProps } from './PickerTypes'; | ||
| export interface IPickerItem { | ||
@@ -8,26 +5,3 @@ value: string | number; | ||
| } | ||
| declare class Picker extends React.Component<IPickerProps, any> { | ||
| static defaultProps: { | ||
| prefixCls: string; | ||
| pure: boolean; | ||
| onValueChange(): void; | ||
| }; | ||
| itemHeight: number; | ||
| zscroller: any; | ||
| select: (selectedValue: string | number) => void; | ||
| doScrollingComplete: (y: number) => void; | ||
| constructor(props: any); | ||
| componentDidMount(): void; | ||
| componentWillReceiveProps(nextProps: any): void; | ||
| shouldComponentUpdate(nextProps: any, nextState: any): boolean; | ||
| componentDidUpdate(): void; | ||
| componentWillUnmount(): void; | ||
| scrollTo(top: any): void; | ||
| fireValueChange(selectedValue: any): void; | ||
| scrollingComplete: () => void; | ||
| getChildMember(child: any, m: any): any; | ||
| getValue(): any; | ||
| toChildrenArray(children: any): any; | ||
| render(): JSX.Element; | ||
| } | ||
| declare const Picker: any; | ||
| export default Picker; |
@@ -11,18 +11,2 @@ 'use strict'; | ||
| var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
| var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
| var _createClass2 = require('babel-runtime/helpers/createClass'); | ||
| var _createClass3 = _interopRequireDefault(_createClass2); | ||
| var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
| var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
| var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
| var _inherits3 = _interopRequireDefault(_inherits2); | ||
| var _react = require('react'); | ||
@@ -32,5 +16,5 @@ | ||
| var _reactMixin = require('react-mixin'); | ||
| var _createReactClass = require('create-react-class'); | ||
| var _reactMixin2 = _interopRequireDefault(_reactMixin); | ||
| var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
@@ -55,22 +39,16 @@ var _classnames = require('classnames'); | ||
| var Picker = function (_React$Component) { | ||
| (0, _inherits3['default'])(Picker, _React$Component); | ||
| function Picker(props) { | ||
| (0, _classCallCheck3['default'])(this, Picker); | ||
| var _this = (0, _possibleConstructorReturn3['default'])(this, (Picker.__proto__ || Object.getPrototypeOf(Picker)).call(this, props)); | ||
| _this.scrollingComplete = function () { | ||
| var _this$zscroller$scrol = _this.zscroller.scroller.getValues(), | ||
| top = _this$zscroller$scrol.top; | ||
| if (top >= 0) { | ||
| _this.doScrollingComplete(top); | ||
| } | ||
| var Picker = (0, _createReactClass2['default'])({ | ||
| mixins: [_PickerMixin2['default']], | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| prefixCls: 'rmc-picker', | ||
| pure: true | ||
| }; | ||
| }, | ||
| getInitialState: function getInitialState() { | ||
| var selectedValueState = void 0; | ||
| var selectedValue = props.selectedValue, | ||
| defaultSelectedValue = props.defaultSelectedValue, | ||
| children = props.children; | ||
| var _props = this.props, | ||
| selectedValue = _props.selectedValue, | ||
| defaultSelectedValue = _props.defaultSelectedValue, | ||
| children = _props.children; | ||
@@ -84,133 +62,109 @@ if (selectedValue !== undefined) { | ||
| } | ||
| _this.state = { | ||
| return { | ||
| selectedValue: selectedValueState | ||
| }; | ||
| return _this; | ||
| } | ||
| (0, _createClass3['default'])(Picker, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| // https://github.com/react-component/m-picker/issues/18 | ||
| this.itemHeight = this.refs.indicator.getBoundingClientRect().height; | ||
| // compact | ||
| this.refs.content.style.padding = this.itemHeight * 3 + 'px 0'; | ||
| this.zscroller = new _zscroller2['default'](this.refs.content, { | ||
| scrollingX: false, | ||
| snapping: true, | ||
| locking: false, | ||
| penetrationDeceleration: .1, | ||
| minVelocityToKeepDecelerating: 0.5, | ||
| scrollingComplete: this.scrollingComplete | ||
| }, | ||
| componentDidMount: function componentDidMount() { | ||
| // https://github.com/react-component/m-picker/issues/18 | ||
| this.itemHeight = this.refs.indicator.getBoundingClientRect().height; | ||
| // compact | ||
| this.refs.content.style.padding = this.itemHeight * 3 + 'px 0'; | ||
| this.zscroller = new _zscroller2['default'](this.refs.content, { | ||
| scrollingX: false, | ||
| snapping: true, | ||
| locking: false, | ||
| penetrationDeceleration: .1, | ||
| minVelocityToKeepDecelerating: 0.5, | ||
| scrollingComplete: this.scrollingComplete | ||
| }); | ||
| this.zscroller.setDisabled(this.props.disabled); | ||
| this.zscroller.scroller.setSnapSize(0, this.itemHeight); | ||
| this.select(this.state.selectedValue); | ||
| }, | ||
| componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
| if ('selectedValue' in nextProps) { | ||
| this.setState({ | ||
| selectedValue: nextProps.selectedValue | ||
| }); | ||
| this.zscroller.setDisabled(this.props.disabled); | ||
| this.zscroller.scroller.setSnapSize(0, this.itemHeight); | ||
| this.select(this.state.selectedValue); | ||
| } | ||
| }, { | ||
| key: 'componentWillReceiveProps', | ||
| value: function componentWillReceiveProps(nextProps) { | ||
| if ('selectedValue' in nextProps) { | ||
| this.zscroller.setDisabled(nextProps.disabled); | ||
| }, | ||
| shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) { | ||
| return this.state.selectedValue !== nextState.selectedValue || !(0, _isChildrenEqual2['default'])(this.props.children, nextProps.children, this.props.pure); | ||
| }, | ||
| componentDidUpdate: function componentDidUpdate() { | ||
| this.zscroller.reflow(); | ||
| this.select(this.state.selectedValue); | ||
| }, | ||
| componentWillUnmount: function componentWillUnmount() { | ||
| this.zscroller.destroy(); | ||
| }, | ||
| scrollTo: function scrollTo(top) { | ||
| this.zscroller.scroller.scrollTo(0, top); | ||
| }, | ||
| fireValueChange: function fireValueChange(selectedValue) { | ||
| if (selectedValue !== this.state.selectedValue) { | ||
| if (!('selectedValue' in this.props)) { | ||
| this.setState({ | ||
| selectedValue: nextProps.selectedValue | ||
| selectedValue: selectedValue | ||
| }); | ||
| } | ||
| this.zscroller.setDisabled(nextProps.disabled); | ||
| } | ||
| }, { | ||
| key: 'shouldComponentUpdate', | ||
| value: function shouldComponentUpdate(nextProps, nextState) { | ||
| return this.state.selectedValue !== nextState.selectedValue || !(0, _isChildrenEqual2['default'])(this.props.children, nextProps.children, this.props.pure); | ||
| } | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| this.zscroller.reflow(); | ||
| this.select(this.state.selectedValue); | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| this.zscroller.destroy(); | ||
| } | ||
| }, { | ||
| key: 'scrollTo', | ||
| value: function scrollTo(top) { | ||
| this.zscroller.scroller.scrollTo(0, top); | ||
| } | ||
| }, { | ||
| key: 'fireValueChange', | ||
| value: function fireValueChange(selectedValue) { | ||
| if (selectedValue !== this.state.selectedValue) { | ||
| if (!('selectedValue' in this.props)) { | ||
| this.setState({ | ||
| selectedValue: selectedValue | ||
| }); | ||
| } | ||
| if (this.props.onValueChange) { | ||
| this.props.onValueChange(selectedValue); | ||
| } | ||
| if (this.props.onValueChange) { | ||
| this.props.onValueChange(selectedValue); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'getChildMember', | ||
| value: function getChildMember(child, m) { | ||
| return child[m]; | ||
| }, | ||
| scrollingComplete: function scrollingComplete() { | ||
| var _zscroller$scroller$g = this.zscroller.scroller.getValues(), | ||
| top = _zscroller$scroller$g.top; | ||
| if (top >= 0) { | ||
| this.doScrollingComplete(top); | ||
| } | ||
| }, { | ||
| key: 'getValue', | ||
| value: function getValue() { | ||
| return this.props.selectedValue || this.props.children && this.props.children[0] && this.props.children[0].value; | ||
| } | ||
| }, { | ||
| key: 'toChildrenArray', | ||
| value: function toChildrenArray(children) { | ||
| return children; | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _pickerCls; | ||
| }, | ||
| getChildMember: function getChildMember(child, m) { | ||
| return child[m]; | ||
| }, | ||
| getValue: function getValue() { | ||
| return this.props.selectedValue || this.props.children && this.props.children[0] && this.props.children[0].value; | ||
| }, | ||
| toChildrenArray: function toChildrenArray(children) { | ||
| // when use preact，when the children is [] will change to undeined | ||
| return children || []; | ||
| }, | ||
| render: function render() { | ||
| var _pickerCls; | ||
| var _props = this.props, | ||
| children = _props.children, | ||
| prefixCls = _props.prefixCls, | ||
| className = _props.className, | ||
| itemStyle = _props.itemStyle, | ||
| indicatorStyle = _props.indicatorStyle; | ||
| var selectedValue = this.state.selectedValue; | ||
| var _props2 = this.props, | ||
| children = _props2.children, | ||
| prefixCls = _props2.prefixCls, | ||
| className = _props2.className, | ||
| itemStyle = _props2.itemStyle, | ||
| indicatorStyle = _props2.indicatorStyle; | ||
| var selectedValue = this.state.selectedValue; | ||
| var itemClassName = prefixCls + '-item'; | ||
| var selectedItemClassName = itemClassName + ' ' + prefixCls + '-item-selected'; | ||
| var items = children.map(function (item) { | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { style: itemStyle, className: selectedValue === item.value ? selectedItemClassName : itemClassName, key: item.value }, | ||
| item.label | ||
| ); | ||
| }); | ||
| var pickerCls = (_pickerCls = {}, (0, _defineProperty3['default'])(_pickerCls, className, !!className), (0, _defineProperty3['default'])(_pickerCls, prefixCls, true), _pickerCls); | ||
| var itemClassName = prefixCls + '-item'; | ||
| var selectedItemClassName = itemClassName + ' ' + prefixCls + '-item-selected'; | ||
| var items = this.toChildrenArray(children).map(function (item) { | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { className: (0, _classnames2['default'])(pickerCls) }, | ||
| _react2['default'].createElement('div', { className: prefixCls + '-mask' }), | ||
| _react2['default'].createElement('div', { className: prefixCls + '-indicator', ref: 'indicator', style: indicatorStyle }), | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: prefixCls + '-content', ref: 'content' }, | ||
| items | ||
| ) | ||
| { style: itemStyle, className: selectedValue === item.value ? selectedItemClassName : itemClassName, key: item.value }, | ||
| item.label | ||
| ); | ||
| } | ||
| }]); | ||
| return Picker; | ||
| }(_react2['default'].Component); | ||
| Picker.defaultProps = { | ||
| prefixCls: 'rmc-picker', | ||
| pure: true, | ||
| onValueChange: function onValueChange() {} | ||
| }; | ||
| _reactMixin2['default'].onClass(Picker, _PickerMixin2['default']); | ||
| }); | ||
| var pickerCls = (_pickerCls = {}, (0, _defineProperty3['default'])(_pickerCls, className, !!className), (0, _defineProperty3['default'])(_pickerCls, prefixCls, true), _pickerCls); | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { className: (0, _classnames2['default'])(pickerCls) }, | ||
| _react2['default'].createElement('div', { className: prefixCls + '-mask' }), | ||
| _react2['default'].createElement('div', { className: prefixCls + '-indicator', ref: 'indicator', style: indicatorStyle }), | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: prefixCls + '-content', ref: 'content' }, | ||
| items | ||
| ) | ||
| ); | ||
| } | ||
| }); | ||
| exports['default'] = Picker; | ||
| module.exports = exports['default']; |
@@ -1,18 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| import React from 'react'; | ||
| import { IPopupPickerProps } from './PopupPickerTypes'; | ||
| declare class PopupPicker extends React.Component<IPopupPickerProps, any> { | ||
| static defaultProps: { | ||
| prefixCls: string; | ||
| triggerType: string; | ||
| WrapComponent: string; | ||
| }; | ||
| hide: () => void; | ||
| onDismiss: () => void; | ||
| onOk: () => void; | ||
| getContent: () => any; | ||
| getRender: () => any; | ||
| getModal(): JSX.Element | null; | ||
| render(): any; | ||
| } | ||
| declare const PopupPicker: any; | ||
| export default PopupPicker; |
130
lib/Popup.js
@@ -7,18 +7,2 @@ 'use strict'; | ||
| var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
| var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
| var _createClass2 = require('babel-runtime/helpers/createClass'); | ||
| var _createClass3 = _interopRequireDefault(_createClass2); | ||
| var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
| var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
| var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
| var _inherits3 = _interopRequireDefault(_inherits2); | ||
| var _react = require('react'); | ||
@@ -32,5 +16,5 @@ | ||
| var _reactMixin = require('react-mixin'); | ||
| var _createReactClass = require('create-react-class'); | ||
| var _reactMixin2 = _interopRequireDefault(_reactMixin); | ||
| var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
@@ -47,72 +31,60 @@ var _PopupMixin = require('./PopupMixin'); | ||
| var PopupPicker = function (_React$Component) { | ||
| (0, _inherits3['default'])(PopupPicker, _React$Component); | ||
| var PopupPicker = (0, _createReactClass2['default'])({ | ||
| mixins: [_PopupMixin2['default']], | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| prefixCls: 'rmc-picker-popup', | ||
| triggerType: 'onClick', | ||
| WrapComponent: 'span' | ||
| }; | ||
| }, | ||
| getModal: function getModal() { | ||
| var props = this.props; | ||
| if (!this.state.visible) { | ||
| return null; | ||
| } | ||
| var prefixCls = props.prefixCls; | ||
| function PopupPicker() { | ||
| (0, _classCallCheck3['default'])(this, PopupPicker); | ||
| return (0, _possibleConstructorReturn3['default'])(this, (PopupPicker.__proto__ || Object.getPrototypeOf(PopupPicker)).apply(this, arguments)); | ||
| } | ||
| (0, _createClass3['default'])(PopupPicker, [{ | ||
| key: 'getModal', | ||
| value: function getModal() { | ||
| var props = this.props; | ||
| if (!this.state.visible) { | ||
| return null; | ||
| } | ||
| var prefixCls = props.prefixCls; | ||
| return _react2['default'].createElement( | ||
| _rcDialog2['default'], | ||
| { prefixCls: '' + prefixCls, className: props.className || '', visible: true, closable: false, transitionName: props.transitionName || props.popupTransitionName, maskTransitionName: props.maskTransitionName, onClose: this.hide.bind(this), style: props.style }, | ||
| return _react2['default'].createElement( | ||
| _rcDialog2['default'], | ||
| { prefixCls: '' + prefixCls, className: props.className || '', visible: true, closable: false, transitionName: props.transitionName || props.popupTransitionName, maskTransitionName: props.maskTransitionName, onClose: this.hide, style: props.style }, | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| null, | ||
| { className: prefixCls + '-header' }, | ||
| _react2['default'].createElement( | ||
| _rcTouchable2['default'], | ||
| { activeClassName: prefixCls + '-item-active' }, | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: prefixCls + '-item ' + prefixCls + '-header-left', onClick: this.onDismiss }, | ||
| props.dismissText | ||
| ) | ||
| ), | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: prefixCls + '-header' }, | ||
| { className: prefixCls + '-item ' + prefixCls + '-title' }, | ||
| props.title | ||
| ), | ||
| _react2['default'].createElement( | ||
| _rcTouchable2['default'], | ||
| { activeClassName: prefixCls + '-item-active' }, | ||
| _react2['default'].createElement( | ||
| _rcTouchable2['default'], | ||
| { activeClassName: prefixCls + '-item-active' }, | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: prefixCls + '-item ' + prefixCls + '-header-left', onClick: this.onDismiss.bind(this) }, | ||
| props.dismissText | ||
| ) | ||
| ), | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: prefixCls + '-item ' + prefixCls + '-title' }, | ||
| props.title | ||
| ), | ||
| _react2['default'].createElement( | ||
| _rcTouchable2['default'], | ||
| { activeClassName: prefixCls + '-item-active' }, | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: prefixCls + '-item ' + prefixCls + '-header-right', onClick: this.onOk.bind(this) }, | ||
| props.okText | ||
| ) | ||
| { className: prefixCls + '-item ' + prefixCls + '-header-right', onClick: this.onOk }, | ||
| props.okText | ||
| ) | ||
| ), | ||
| this.getContent() | ||
| ) | ||
| ); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| return this.getRender(); | ||
| } | ||
| }]); | ||
| return PopupPicker; | ||
| }(_react2['default'].Component); | ||
| PopupPicker.defaultProps = { | ||
| prefixCls: 'rmc-picker-popup', | ||
| triggerType: 'onClick', | ||
| WrapComponent: 'span' | ||
| }; | ||
| _reactMixin2['default'].onClass(PopupPicker, _PopupMixin2['default']); | ||
| ) | ||
| ), | ||
| this.getContent() | ||
| ) | ||
| ); | ||
| }, | ||
| render: function render() { | ||
| return this.getRender(); | ||
| } | ||
| }); | ||
| exports['default'] = PopupPicker; | ||
| module.exports = exports['default']; |
@@ -1,20 +0,2 @@ | ||
| /// <reference types="react" /> | ||
| /// <reference types="react-native" /> | ||
| import React from 'react'; | ||
| import { IPopupPickerProps } from './PopupPickerTypes'; | ||
| declare class PopupPicker extends React.Component<IPopupPickerProps, any> { | ||
| static defaultProps: { | ||
| actionTextUnderlayColor: string; | ||
| actionTextActiveOpacity: number; | ||
| triggerType: string; | ||
| styles: {}; | ||
| WrapComponent: React.ViewStatic; | ||
| }; | ||
| onDismiss: () => void; | ||
| onOk: () => void; | ||
| getContent: () => any; | ||
| getRender: () => any; | ||
| getModal(): JSX.Element; | ||
| render(): any; | ||
| } | ||
| declare const PopupPicker: any; | ||
| export default PopupPicker; |
@@ -7,18 +7,2 @@ 'use strict'; | ||
| var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
| var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
| var _createClass2 = require('babel-runtime/helpers/createClass'); | ||
| var _createClass3 = _interopRequireDefault(_createClass2); | ||
| var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
| var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
| var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
| var _inherits3 = _interopRequireDefault(_inherits2); | ||
| var _react = require('react'); | ||
@@ -30,5 +14,5 @@ | ||
| var _reactMixin = require('react-mixin'); | ||
| var _createReactClass = require('create-react-class'); | ||
| var _reactMixin2 = _interopRequireDefault(_reactMixin); | ||
| var _createReactClass2 = _interopRequireDefault(_createReactClass); | ||
@@ -45,77 +29,65 @@ var _PopupMixin = require('./PopupMixin'); | ||
| var PopupPicker = function (_React$Component) { | ||
| (0, _inherits3['default'])(PopupPicker, _React$Component); | ||
| var PopupPicker = (0, _createReactClass2['default'])({ | ||
| mixins: [_PopupMixin2['default']], | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| actionTextUnderlayColor: '#ddd', | ||
| actionTextActiveOpacity: 1, | ||
| triggerType: 'onPress', | ||
| styles: {}, | ||
| WrapComponent: _reactNative.View | ||
| }; | ||
| }, | ||
| getModal: function getModal() { | ||
| var props = this.props; | ||
| var styles = props.styles, | ||
| title = props.title, | ||
| okText = props.okText, | ||
| dismissText = props.dismissText; | ||
| function PopupPicker() { | ||
| (0, _classCallCheck3['default'])(this, PopupPicker); | ||
| return (0, _possibleConstructorReturn3['default'])(this, (PopupPicker.__proto__ || Object.getPrototypeOf(PopupPicker)).apply(this, arguments)); | ||
| } | ||
| (0, _createClass3['default'])(PopupPicker, [{ | ||
| key: 'getModal', | ||
| value: function getModal() { | ||
| var props = this.props; | ||
| var styles = props.styles, | ||
| title = props.title, | ||
| okText = props.okText, | ||
| dismissText = props.dismissText; | ||
| var titleEl = typeof title === 'string' ? _react2['default'].createElement( | ||
| _reactNative.Text, | ||
| { style: [styles.title] }, | ||
| title | ||
| ) : title; | ||
| var okEl = typeof okText === 'string' ? _react2['default'].createElement( | ||
| _reactNative.Text, | ||
| { style: [styles.actionText] }, | ||
| okText | ||
| ) : okText; | ||
| var dismissEl = typeof dismissText === 'string' ? _react2['default'].createElement( | ||
| _reactNative.Text, | ||
| { style: [styles.actionText] }, | ||
| dismissText | ||
| ) : dismissText; | ||
| return _react2['default'].createElement( | ||
| _Modal2['default'], | ||
| { animationType: 'slide-up', wrapStyle: styles.modal, visible: this.state.visible, onClose: this.onDismiss.bind(this) }, | ||
| var titleEl = typeof title === 'string' ? _react2['default'].createElement( | ||
| _reactNative.Text, | ||
| { style: [styles.title] }, | ||
| title | ||
| ) : title; | ||
| var okEl = typeof okText === 'string' ? _react2['default'].createElement( | ||
| _reactNative.Text, | ||
| { style: [styles.actionText] }, | ||
| okText | ||
| ) : okText; | ||
| var dismissEl = typeof dismissText === 'string' ? _react2['default'].createElement( | ||
| _reactNative.Text, | ||
| { style: [styles.actionText] }, | ||
| dismissText | ||
| ) : dismissText; | ||
| return _react2['default'].createElement( | ||
| _Modal2['default'], | ||
| { animationType: 'slide-up', wrapStyle: styles.modal, visible: this.state.visible, onClose: this.onDismiss }, | ||
| _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { style: [styles.header] }, | ||
| _react2['default'].createElement( | ||
| _reactNative.TouchableHighlight, | ||
| { onPress: this.onDismiss, style: [styles.headerItem], activeOpacity: props.actionTextActiveOpacity, underlayColor: props.actionTextUnderlayColor }, | ||
| dismissEl | ||
| ), | ||
| _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { style: [styles.header] }, | ||
| _react2['default'].createElement( | ||
| _reactNative.TouchableHighlight, | ||
| { onPress: this.onDismiss.bind(this), style: [styles.headerItem], activeOpacity: props.actionTextActiveOpacity, underlayColor: props.actionTextUnderlayColor }, | ||
| dismissEl | ||
| ), | ||
| _react2['default'].createElement( | ||
| _reactNative.View, | ||
| { style: [styles.headerItem] }, | ||
| titleEl | ||
| ), | ||
| _react2['default'].createElement( | ||
| _reactNative.TouchableHighlight, | ||
| { onPress: this.onOk.bind(this), style: [styles.headerItem], activeOpacity: props.actionTextActiveOpacity, underlayColor: props.actionTextUnderlayColor }, | ||
| okEl | ||
| ) | ||
| { style: [styles.headerItem] }, | ||
| titleEl | ||
| ), | ||
| this.getContent() | ||
| ); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| return this.getRender(); | ||
| } | ||
| }]); | ||
| return PopupPicker; | ||
| }(_react2['default'].Component); | ||
| PopupPicker.defaultProps = { | ||
| actionTextUnderlayColor: '#ddd', | ||
| actionTextActiveOpacity: 1, | ||
| triggerType: 'onPress', | ||
| styles: {}, | ||
| WrapComponent: _reactNative.View | ||
| }; | ||
| _reactMixin2['default'].onClass(PopupPicker, _PopupMixin2['default']); | ||
| _react2['default'].createElement( | ||
| _reactNative.TouchableHighlight, | ||
| { onPress: this.onOk, style: [styles.headerItem], activeOpacity: props.actionTextActiveOpacity, underlayColor: props.actionTextUnderlayColor }, | ||
| okEl | ||
| ) | ||
| ), | ||
| this.getContent() | ||
| ); | ||
| }, | ||
| render: function render() { | ||
| return this.getRender(); | ||
| } | ||
| }); | ||
| exports['default'] = PopupPicker; | ||
| module.exports = exports['default']; |
@@ -95,3 +95,3 @@ 'use strict'; | ||
| if (!disabled) { | ||
| newChildProps[props.triggerType] = this.onTriggerClick.bind(this); | ||
| newChildProps[props.triggerType] = this.onTriggerClick; | ||
| } | ||
@@ -126,3 +126,3 @@ return _react2['default'].createElement( | ||
| } | ||
| return _react2['default'].cloneElement(this.props.picker, (_React$cloneElement = {}, (0, _defineProperty3['default'])(_React$cloneElement, this.props.pickerValueProp, pickerValue), (0, _defineProperty3['default'])(_React$cloneElement, this.props.pickerValueChangeProp, this.onPickerChange.bind(this)), (0, _defineProperty3['default'])(_React$cloneElement, 'ref', this.saveRef.bind(this)), _React$cloneElement)); | ||
| return _react2['default'].cloneElement(this.props.picker, (_React$cloneElement = {}, (0, _defineProperty3['default'])(_React$cloneElement, this.props.pickerValueProp, pickerValue), (0, _defineProperty3['default'])(_React$cloneElement, this.props.pickerValueChangeProp, this.onPickerChange), (0, _defineProperty3['default'])(_React$cloneElement, 'ref', this.saveRef), _React$cloneElement)); | ||
| } else { | ||
@@ -129,0 +129,0 @@ return this.props.content; |
| { | ||
| "name": "rmc-picker", | ||
| "version": "3.10.5", | ||
| "version": "3.10.6", | ||
| "description": "React Mobile Picker Component(web and react-native)", | ||
@@ -39,3 +39,3 @@ "keywords": [ | ||
| "karma": "rc-test run karma", | ||
| "saucelabs": "rc-tools run saucelabs", | ||
| "saucelabs": "rc-test run saucelabs", | ||
| "test": "rc-test run test", | ||
@@ -49,6 +49,6 @@ "chrome-test": "rc-test run chrome-test", | ||
| "classnames": "2.x", | ||
| "create-react-class": "15.x", | ||
| "object-assign": "4.x", | ||
| "rc-dialog": "^6.4.0", | ||
| "rc-touchable": "^1.0.2", | ||
| "react-mixin": "^3.0.5", | ||
| "zscroller": "~0.3.0" | ||
@@ -55,0 +55,0 @@ }, |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-17.5%
86450
- Lines of code
- decreased by-14.84%
2364
Dependency changes
+ Addedcreate-react-class@15.x
- Removedreact-mixin@^3.0.5
- Removedreact-mixin@3.1.1(transitive)
- Removedsmart-mixin@2.0.0(transitive)