Skip to content

Commit

Permalink
Merge pull request #17 from pandeyrasu/master
Browse files Browse the repository at this point in the history 
static date splitter changed to prop and removed camelcase in startDate and endDate title
  • Loading branch information
@pohsiu
pohsiu authored Jun 13, 2019
2 parents c04fd0d + 3d24ca3 commit 385ed76
Show file tree
Hide file tree
Showing 2 changed files with 289 additions and 211 deletions.
217 changes: 128 additions & 89 deletions src/ComposePicker.js
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,126 @@
import React, { Component } from 'react';
import { View, TouchableHighlight, Modal, Text } from 'react-native';
import PropTypes from 'prop-types';
import DateRange from './DateRange';
import moment from 'moment';
import moment from 'moment';
import normalize from './normalizeText';

const styles = {
placeholderText: {
color: '#c9c9c9',
fontSize: normalize(18),
fontSize: normalize(18)
},
contentInput: {
alignItems: 'center',
justifyContent: 'center',
justifyContent: 'center'
},
contentText: {
fontSize: normalize(18),
fontSize: normalize(18)
},
stylish : {
stylish: {
height: 48,
borderColor: '#bdbdbd',
borderWidth: 2,
borderRadius: 32,
borderRadius: 32
}

}
};
export default class ComposePicker extends Component {
constructor(props){
constructor(props) {
super(props);
this.state={
modalVisible:false,
allowPointerEvents:true,
showContent:false,
this.state = {
modalVisible: false,
allowPointerEvents: true,
showContent: false,
selected: '',
startDate: null,
endDate: null,
date: new Date(),
focus:'startDate',
currentDate: moment(),
}
focus: 'startDate',
currentDate: moment()
};
}
isDateBlocked = ( date ) => {
if ( this.props.blockBefore ){
isDateBlocked = date => {
if (this.props.blockBefore) {
return date.isBefore(moment(), 'day');
}else if(this.props.blockAfter){
} else if (this.props.blockAfter) {
return date.isAfter(moment(), 'day');
}
return false;
}
onDatesChange = (event) => {
const { startDate, endDate ,focusedInput, currentDate } = event;
};
onDatesChange = event => {
const { startDate, endDate, focusedInput, currentDate } = event;
if (currentDate) {
this.setState({currentDate});
this.setState({ currentDate });
return;
}
this.setState({ ...this.state, focus: focusedInput }, () => {
this.setState({ ...this.state, startDate, endDate })
}
);
}
setModalVisible = (visible) => {
this.setState({ ...this.state, startDate, endDate });
});
};
setModalVisible = visible => {
this.setState({ modalVisible: visible });
}
};
onConfirm = () => {
const returnFormat = this.props.returnFormat || 'YYYY/MM/DD';
const outFormat = this.props.outFormat || 'LL';
if (!this.props.mode || this.props.mode === 'single') {
this.setState({showContent:true, selected: this.state.currentDate.format(outFormat)});
this.setState({
showContent: true,
selected: this.state.currentDate.format(outFormat)
});
this.setModalVisible(false);
if(typeof this.props.onConfirm === 'function'){
this.props.onConfirm({currentDate:this.state.currentDate.format(returnFormat)});
if (typeof this.props.onConfirm === 'function') {
this.props.onConfirm({
currentDate: this.state.currentDate.format(returnFormat)
});
}
return;
}
}

if (this.state.startDate && this.state.endDate) {
const start = this.state.startDate.format(outFormat);
const end = this.state.endDate.format(outFormat);
this.setState({showContent:true, selected:`${start} → ${end}`});
this.setState({
showContent: true,
selected: `${start} ${this.props.dateSplitter} ${end}`
});
this.setModalVisible(false);

if (typeof this.props.onConfirm === 'function') {
this.props.onConfirm({startDate:this.state.startDate.format(returnFormat), endDate:this.state.endDate.format(returnFormat)});
this.props.onConfirm({
startDate: this.state.startDate.format(returnFormat),
endDate: this.state.endDate.format(returnFormat)
});
}
}
else {
} else {
alert('please select correct date');
}

}
};
getTitleElement() {
const { placeholder, customStyles = {}, allowFontScaling} = this.props;
const { placeholder, customStyles = {}, allowFontScaling } = this.props;
const showContent = this.state.showContent;
if (!showContent && placeholder) {
return (
<Text allowFontScaling={allowFontScaling} style={[styles.placeholderText,customStyles.placeholderText]}>
<Text
allowFontScaling={allowFontScaling}
style={[styles.placeholderText, customStyles.placeholderText]}
>
{placeholder}
</Text>
);
}
return (
<Text allowFontScaling={allowFontScaling} style={[styles.contentText,customStyles.contentText]}>
<Text
allowFontScaling={allowFontScaling}
style={[styles.contentText, customStyles.contentText]}
>
{this.state.selected}
</Text>
);
}

renderButton = () => {
const {
customButton
} = this.props;
const { customButton } = this.props;

if (customButton) {
return customButton(this.onConfirm);
Expand All @@ -117,60 +129,87 @@ export default class ComposePicker extends Component {
<TouchableHighlight
underlayColor={'transparent'}
onPress={this.onConfirm}
style={[{ width: '80%', marginHorizontal: '3%' }, this.props.ButtonStyle]}
>
<Text style={[{ fontSize:20 }, this.props.ButtonTextStyle]}>{this.props.ButtonText? this.props.ButtonText: "送出"}</Text>
style={[
{ width: '80%', marginHorizontal: '3%' },
this.props.ButtonStyle
]}
>
<Text style={[{ fontSize: 20 }, this.props.ButtonTextStyle]}>
{this.props.ButtonText ? this.props.ButtonText : '送出'}
</Text>
</TouchableHighlight>
)
}
);
};

render() {
const { customStyles = {} } = this.props;

render(){
const {
customStyles = {},
} = this.props;

let style = styles.stylish;
style = this.props.centerAlign ? { ...style } : style;
style = { ...style, ...this.props.style };


return(
<TouchableHighlight

return (
<TouchableHighlight
underlayColor={'transparent'}
onPress={()=>{this.setModalVisible(true);}}
style={[{ width:'100%', height:'100%', justifyContent: 'center' },style]}>
onPress={() => {
this.setModalVisible(true);
}}
style={[
{ width: '100%', height: '100%', justifyContent: 'center' },
style
]}
>
<View>
<View><View style={[customStyles.contentInput,styles.contentInput]}>{this.getTitleElement()}</View></View>
<Modal
animationType="slide"
onRequestClose={() => this.setModalVisible(false)}
transparent={false}
visible={this.state.modalVisible}>
<View stlye={{flex:1, flexDirection:'column'}}>
<View style={{height:'90%'}}>
<DateRange
headFormat={this.props.headFormat}
customStyles={customStyles}
markText={this.props.markText}
onDatesChange={this.onDatesChange}
isDateBlocked={this.isDateBlocked}
startDate={this.state.startDate}
endDate={this.state.endDate}
focusedInput={this.state.focus}
selectedBgColor={this.props.selectedBgColor || undefined}
selectedTextColor={this.props.selectedTextColor || undefined}
mode={this.props.mode || 'single'}
currentDate = {this.state.currentDate}
/>
<View>
<View style={[customStyles.contentInput, styles.contentInput]}>
{this.getTitleElement()}
</View>
<View style={{ paddingBottom: '5%',
width:'100%', height: '10%',flexDirection:'row',justifyContent: 'center', alignItems: 'center'}}>
</View>
<Modal
animationType="slide"
onRequestClose={() => this.setModalVisible(false)}
transparent={false}
visible={this.state.modalVisible}
>
<View stlye={{ flex: 1, flexDirection: 'column' }}>
<View style={{ height: '90%' }}>
<DateRange
headFormat={this.props.headFormat}
customStyles={customStyles}
markText={this.props.markText}
onDatesChange={this.onDatesChange}
isDateBlocked={this.isDateBlocked}
startDate={this.state.startDate}
endDate={this.state.endDate}
focusedInput={this.state.focus}
selectedBgColor={this.props.selectedBgColor || undefined}
selectedTextColor={this.props.selectedTextColor || undefined}
mode={this.props.mode || 'single'}
currentDate={this.state.currentDate}
/>
</View>
<View
style={{
paddingBottom: '5%',
width: '100%',
height: '10%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}}
>
{this.renderButton()}
</View>
</View>
</View>
</Modal>
</Modal>
</View>
</TouchableHighlight>
)
);
}
}

ComposePicker.propTypes = {
dateSplitter: PropTypes.string
};

ComposePicker.defaultProps = { dateSplitter: '->' };
Loading

0 comments on commit 385ed76

Please sign in to comment.