diff --git a/index.js b/index.js index dc77b4c47ec3fbf4cfa08a19906e2905d2cf0b63..f218451ae3b7fe06cf15a4ae52f28bf5f356692b 100644 --- a/index.js +++ b/index.js @@ -22,21 +22,27 @@ export default class PickerAny extends React.Component { static propTypes = { pickerBtnText: PropTypes.string, + pickerCancelBtnText: PropTypes.string, pickerBtnStyle: PropTypes.any, + pickerTitle: PropTypes.string, + pickerTitleStyle: PropTypes.any, pickerToolBarStyle: PropTypes.any, pickerItemStyle: PropTypes.any, pickerHeight: PropTypes.number, showDuration: PropTypes.number, pickerData: PropTypes.any.isRequired, selectedValue: PropTypes.any.isRequired, - onPickerDone: PropTypes.func + onPickerDone: PropTypes.func, + onPickerCancel: PropTypes.func } static defaultProps = { pickerBtnText: '完成', + pickerCancelBtnText: '取消', pickerHeight: 250, showDuration: 300, - onPickerDone: ()=>{} + onPickerDone: ()=>{}, + onPickerCancel: ()=>{} } constructor(props, context){ @@ -56,7 +62,10 @@ export default class PickerAny extends React.Component { //the pickedValue must looks like [wheelone's, wheeltwo's, ...] //this.state.selectedValue may be the result of the first pickerWheel let pickerBtnText = props.pickerBtnText; + let pickerCancelBtnText = props.pickerCancelBtnText; let pickerBtnStyle = props.pickerBtnStyle; + let pickerTitle = props.pickerTitle; + let pickerTitleStyle = props.pickerTitleStyle; let pickerToolBarStyle = props.pickerToolBarStyle; let pickerItemStyle = props.pickerItemStyle; let pickerHeight = props.pickerHeight; @@ -64,10 +73,12 @@ export default class PickerAny extends React.Component { let pickerData = props.pickerData; let selectedValue = props.selectedValue; let onPickerDone = props.onPickerDone; + let onPickerCancel = props.onPickerCancel; let pickerStyle = pickerData.constructor === Array ? 'parallel' : 'cascade'; let firstWheelData; let firstPickedData; + let secondPickedData; let secondWheelData; let secondPickedDataIndex; let thirdWheelData; @@ -96,7 +107,10 @@ export default class PickerAny extends React.Component { this.pickerStyle = pickerStyle; return { pickerBtnText, + pickerCancelBtnText, pickerBtnStyle, + pickerTitle, + pickerTitleStyle, pickerToolBarStyle, pickerItemStyle, pickerHeight, @@ -104,6 +118,7 @@ export default class PickerAny extends React.Component { pickerData, selectedValue, onPickerDone, + onPickerCancel, //list of first wheel data firstWheelData, //first wheel selected value @@ -176,6 +191,11 @@ export default class PickerAny extends React.Component { this.pickerWheel.moveDown(); } + _pickerCancel() { + this._toggle(); + this.state.onPickerCancel(); + } + _pickerFinish(){ this._toggle(); this.state.onPickerDone(this.pickedValue); @@ -298,7 +318,7 @@ export default class PickerAny extends React.Component { selectedValue={me.state.firstPickedData} onValueChange={value => { let secondWheelData = Object.keys(pickerData[value]); - cascadeData = me._getCascadeData(pickerData, me.pickedValue, value, secondWheelData[0]); + let cascadeData = me._getCascadeData(pickerData, me.pickedValue, value, secondWheelData[0]); //when onPicked, this.pickedValue will pass to the parent //when firstWheel changed, second and third will also change if(cascadeData.thirdWheelData){ @@ -412,14 +432,20 @@ export default class PickerAny extends React.Component { 下一个 );*/ - let pickerBtn = null; + // let pickerBtn = null; return ( - {pickerBtn} + + {this.state.pickerCancelBtnText} + + + {this.state.pickerTitle} + {this.state.pickerBtnText} @@ -469,6 +495,18 @@ let styles = StyleSheet.create({ fontSize: 16, marginLeft: 20 }, + pickerCancelBtn: { + flex: 1, + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center', + marginLeft: 20 + }, + pickerTitle: { + flex: 5, + color: 'black', + textAlign: 'center' + }, pickerFinishBtn: { flex: 1, flexDirection: 'row',