appbaseio/reactivesearch

import React, { Component } from 'react';
import { View, Modal, TouchableWithoutFeedback, Platform } from 'react-native';
import { Calendar } from 'react-native-calendars';
import { Text, Body, Item, Header, Left, Button, Icon, Title, Right } from 'native-base';

import {
    addComponent,
    removeComponent,
    watchComponent,
    updateQuery,
    setQueryListener,
} from '@appbaseio/reactivecore/lib/actions';
import {
    isEqual,
    checkValueChange,
    checkPropChange,
    getInnerKey,
    formatDate,
} from '@appbaseio/reactivecore/lib/utils/helper';
import types from '@appbaseio/reactivecore/lib/utils/types';

import withTheme from '../../theme/withTheme';
import { connect } from '../../utils';

const XDate = require('xdate');

class DatePicker extends Component {
    constructor(props) {
        super(props);

        this.type = 'range';
        this.state = {
            currentDate: null,
            showModal: false,
        };
        props.setQueryListener(props.componentId, props.onQueryChange, null);
    }

    componentDidMount() {
        this.props.addComponent(this.props.componentId);
        this.setReact(this.props);

        if (this.props.selectedValue) {
            const currentDate = {
                dateString: new XDate(this.props.selectedValue).toString('yyyy-MM-dd'),
                timestamp: new XDate(this.props.selectedValue).getTime(),
            };
            this.handleDateChange(currentDate);
        } else if (this.props.defaultSelected) {
            const currentDate = {
                dateString: new XDate(this.props.defaultSelected).toString('yyyy-MM-dd'),
                timestamp: new XDate(this.props.defaultSelected).getTime(),
            };
            this.handleDateChange(currentDate);
        }
    }

    componentWillReceiveProps(nextProps) {
        checkPropChange(this.props.react, nextProps.react, () => this.setReact(nextProps));

        if (!isEqual(this.props.defaultSelected, nextProps.defaultSelected)) {
            const currentDate = {
                dateString: new XDate(nextProps.defaultSelected).toString('yyyy-MM-dd'),
                timestamp: new XDate(nextProps.defaultSelected).getTime(),
            };
            this.handleDateChange(currentDate, nextProps);
        } else if (
            this.props.selectedValue !== nextProps.selectedValue
            && !nextProps.selectedValue
        ) {
            this.handleDateChange(null, nextProps);
        }
    }

    componentWillUnmount() {
        this.props.removeComponent(this.props.componentId);
    }

    setReact(props) {
        if (props.react) {
            props.watchComponent(props.componentId, props.react);
        }
    }

    defaultQuery = (value, props) => {
        let query = null;
        if (value && props.queryFormat) {
            query = {
                range: {
                    [props.dataField]: {
                        gte: formatDate(new XDate(value).addHours(-24)),
                        lte: formatDate(new XDate(value)),
                    },
                },
            };
        }
        return query;
    };

    handleDateChange = (currentDate, props = this.props) => {
        let value = null;
        let date = null;
        if (currentDate) {
            value = currentDate.timestamp;
            date = formatDate(new XDate(value));
        }

        const performUpdate = () => {
            this.setState(
                {
                    currentDate,
                },
                () => {
                    this.updateQuery(value, props);
                    if (props.onValueChange) props.onValueChange(date);
                },
            );
        };
        checkValueChange(props.componentId, date, props.beforeValueChange, performUpdate);
    };

    updateQuery = (value, props) => {
        const query = props.customQuery || this.defaultQuery;
        const date = value ? formatDate(new XDate(value)) : null;

        props.updateQuery({
            componentId: props.componentId,
            query: query(value, props),
            value: date,
            showFilter: props.showFilter,
            label: props.filterLabel,
            URLParams: false,
        });
    };

    toggleModal = () => {
        this.setState({
            showModal: !this.state.showModal,
        });
    };

    render() {
        let markedDates = {};
        const current = this.state.currentDate
            ? this.state.currentDate.dateString
            : this.props.initialMonth || Date();

        if (this.state.currentDate) {
            markedDates = {
                [this.state.currentDate.dateString]: {
                    startingDay: true,
                    endingDay: true,
                    color:
                        this.props.innerProps
                        && this.props.innerProps.calendar
                        && this.props.innerProps.calendar.theme
                        && this.props.innerProps.calendar.theme.selectedDayBackgroundColor
                            ? this.props.innerProps.calendar.theme.selectedDayBackgroundColor
                            : this.props.theming.primaryColor,
                    textColor:
                        this.props.innerProps
                        && this.props.innerProps.calendar
                        && this.props.innerProps.calendar.theme
                        && this.props.innerProps.calendar.theme.selectedDayTextColor
                            ? this.props.innerProps.calendar.theme.selectedDayTextColor
                            : this.props.theming.primaryTextColor,
                },
            };
        }

        const resetButtonStyles = {};
        if (Platform.OS === 'android') {
            resetButtonStyles.color = this.props.theming.primaryTextColor;
        }

        return (
            <View>
                <Item
                    regular
                    style={{ marginLeft: 0, ...this.props.style }}
                    {...getInnerKey(this.props.innerProps, 'item')}
                >
                    <TouchableWithoutFeedback onPress={this.toggleModal}>
                        <Text
                            style={{
                                flex: 1,
                                alignItems: 'center',
                                color: this.state.currentDate
                                    ? this.props.theming.textColor
                                    : '#555',
                                fontSize: 17,
                                height: 50,
                                lineHeight: 24,
                                paddingLeft: 8,
                                paddingRight: 5,
                                paddingTop: 12,
                                ...getInnerKey(this.props.innerStyle, 'label'),
                            }}
                            {...getInnerKey(this.props.innerProps, 'text')}
                        >
                            {this.state.currentDate
                                ? this.state.currentDate.dateString
                                : this.props.placeholder}
                        </Text>
                    </TouchableWithoutFeedback>
                </Item>
                <Modal
                    supportedOrientations={this.props.supportedOrientations || null}
                    transparent={false}
                    visible={this.state.showModal}
                    onRequestClose={this.toggleModal}
                    {...getInnerKey(this.props.innerProps, 'modal')}
                >
                    <Header {...getInnerKey(this.props.innerProps, 'header')}>
                        <Left style={getInnerKey(this.props.innerStyle, 'left')}>
                            <Button
                                transparent
                                onPress={this.toggleModal}
                                style={getInnerKey(this.props.innerStyle, 'button')}
                            >
                                <Icon
                                    name="arrow-back"
                                    color={this.props.theming.primaryColor}
                                    style={getInnerKey(this.props.innerStyle, 'icon')}
                                    {...getInnerKey(this.props.innerProps, 'icon')}
                                />
                            </Button>
                        </Left>
                        <Body style={getInnerKey(this.props.innerStyle, 'body')}>
                            <Title
                                style={getInnerKey(this.props.innerStyle, 'title')}
                                {...getInnerKey(this.props.innerProps, 'title')}
                            >
                                {this.props.placeholder}
                            </Title>
                        </Body>
                        <Right style={getInnerKey(this.props.innerStyle, 'right')}>
                            {this.state.currentDate ? (
                                <Button
                                    style={{
                                        paddingRight: 0,
                                        ...getInnerKey(this.props.innerStyle, 'button'),
                                    }}
                                    transparent
                                    onPress={() => {
                                        this.handleDateChange(null);
                                        this.toggleModal();
                                    }}
                                >
                                    <Text
                                        style={{
                                            ...resetButtonStyles,
                                            ...getInnerKey(this.props.innerStyle, 'label'),
                                        }}
                                        {...getInnerKey(this.props.innerProps, 'text')}
                                    >
                                        Reset
                                    </Text>
                                </Button>
                            ) : null}
                        </Right>
                    </Header>
                    <Calendar
                        current={current}
                        onDayPress={this.handleDateChange}
                        markedDates={markedDates}
                        markingType="period"
                        style={{
                            marginTop: 10,
                            ...getInnerKey(this.props.innerStyle, 'calendar'),
                        }}
                        {...getInnerKey(this.props.innerProps, 'calendar')}
                    />
                    {this.state.currentDate ? (
                        <Button
                            onPress={this.toggleModal}
                            style={{
                                width: '100%',
                                borderRadius: 0,
                                alignItems: 'center',
                                justifyContent: 'center',
                                backgroundColor: this.props.theming.primaryColor,
                                ...getInnerKey(this.props.innerStyle, 'button'),
                            }}
                            {...getInnerKey(this.props.innerProps, 'button')}
                        >
                            <Text
                                style={{
                                    color: this.props.theming.primaryTextColor,
                                    ...getInnerKey(this.props.innerStyle, 'label'),
                                }}
                                {...getInnerKey(this.props.innerProps, 'text')}
                            >
                                View Results
                            </Text>
                        </Button>
                    ) : null}
                </Modal>
            </View>
        );
    }
}

DatePicker.propTypes = {
    addComponent: types.funcRequired,
    componentId: types.stringRequired,
    defaultSelected: types.date,
    react: types.react,
    initialMonth: types.date,
    removeComponent: types.funcRequired,
    setQueryListener: types.funcRequired,
    queryFormat: types.queryFormatDate,
    selectedValue: types.selectedValue,
    placeholder: types.string,
    style: types.style,
    showFilter: types.bool,
    filterLabel: types.string,
    supportedOrientations: types.supportedOrientations,
    onQueryChange: types.func,
    theming: types.style,
    innerStyle: types.style,
    innerProps: types.props,
};

DatePicker.defaultProps = {
    queryFormat: 'epoch_millis',
    placeholder: 'Select a date',
};

const mapStateToProps = (state, props) => ({
    selectedValue: state.selectedValues[props.componentId]
        ? state.selectedValues[props.componentId].value
        : null,
});

const mapDispatchtoProps = dispatch => ({
    addComponent: component => dispatch(addComponent(component)),
    removeComponent: component => dispatch(removeComponent(component)),
    watchComponent: (component, react) => dispatch(watchComponent(component, react)),
    updateQuery: updateQueryObject => dispatch(updateQuery(updateQueryObject)),
    setQueryListener: (component, onQueryChange, beforeQueryChange) =>
        dispatch(setQueryListener(component, onQueryChange, beforeQueryChange)),
});

export default connect(
    mapStateToProps,
    mapDispatchtoProps,
)(withTheme(DatePicker));