react-web-native-sketch/dist/src/nativeComponents/TextInputContainer/CustomPicker.js

[TODO: We need an overview of how this can be used via npm vs as a local package]

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_native_1 = require("react-native");
var react_native_modal_1 = require("react-native-modal");
var __1 = require("../../");
var BORDER_RADIUS = 13;
var BACKGROUND_COLOR = 'white';
var BORDER_COLOR = '#d5d5d5';
var TITLE_FONT_SIZE = 13;
var TITLE_COLOR = '#8f8f8f';
var BUTTON_FONT_WEIGHT = 'normal';
var BUTTON_FONT_COLOR = '#007ff9';
var BUTTON_FONT_SIZE = 20;
var styles = function () { return ({
    contentContainer: {
        justifyContent: 'flex-end',
        margin: 10,
    },
    datepickerContainer: {
        backgroundColor: BACKGROUND_COLOR,
        borderRadius: BORDER_RADIUS,
        marginBottom: 8,
        overflow: 'hidden',
    },
    titleContainer: {
        borderBottomColor: BORDER_COLOR,
        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
        padding: 14,
        backgroundColor: 'transparent',
    },
    title: {
        textAlign: 'center',
        color: TITLE_COLOR,
        fontSize: TITLE_FONT_SIZE,
    },
    confirmButton: {
        borderColor: BORDER_COLOR,
        borderTopWidth: react_native_1.StyleSheet.hairlineWidth,
        backgroundColor: 'transparent',
        height: 57,
        justifyContent: 'center',
    },
    confirmText: {
        textAlign: 'center',
        color: BUTTON_FONT_COLOR,
        fontSize: BUTTON_FONT_SIZE,
        fontWeight: BUTTON_FONT_WEIGHT,
        backgroundColor: 'transparent',
    },
    cancelButton: {
        backgroundColor: BACKGROUND_COLOR,
        borderRadius: BORDER_RADIUS,
        height: 57,
        justifyContent: 'center',
    },
    cancelText: {
        padding: 10,
        textAlign: 'center',
        color: BUTTON_FONT_COLOR,
        fontSize: BUTTON_FONT_SIZE,
        fontWeight: '600',
        backgroundColor: 'transparent',
    },
}); };
var CCustomPicker = /** @class */ (function (_super) {
    __extends(CCustomPicker, _super);
    function CCustomPicker() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            value: _this.props.value,
            userIsInteractingWithPicker: false,
        };
        _this._handleConfirm = function () {
            _this.props.onConfirm(_this.state.value);
        };
        _this._handleValueChange = function (value) {
            _this.setState({
                value: value,
                userIsInteractingWithPicker: false,
            });
        };
        _this._handleUserTouchInit = function () {
            _this.setState({
                userIsInteractingWithPicker: true,
            });
            return false;
        };
        return _this;
    }
    CCustomPicker.prototype.componentWillReceiveProps = function (nextProps) {
        if (this.props.value !== nextProps.value) {
            this.setState({
                value: nextProps.value,
            });
        }
    };
    CCustomPicker.prototype.render = function () {
        var _a = this.props, cancelTextIOS = _a.cancelTextIOS, classes = _a.classes, confirmTextIOS = _a.confirmTextIOS, isVisible = _a.isVisible, isSelect = _a.isSelect, minuteInterval = _a.minuteInterval, mode = _a.mode, neverDisableConfirmIOS = _a.neverDisableConfirmIOS, onCancel = _a.onCancel, options = _a.options, title = _a.title;
        return (React.createElement(react_native_modal_1.default, { isVisible: !!isVisible, style: classes.contentContainer, backdropOpacity: 0.4 },
            React.createElement(__1.View, { style: classes.datepickerContainer },
                React.createElement(__1.View, { style: classes.titleContainer },
                    React.createElement(__1.Text, { style: classes.title }, title)),
                React.createElement(__1.View /*onStartShouldSetResponderCapture={this._handleUserTouchInit}*/, null, isSelect
                    ? React.createElement(react_native_1.Picker, { selectedValue: this.state.value, onValueChange: this._handleValueChange }, options.map(function (option) {
                        return React.createElement(react_native_1.Picker.Item, { key: option.value, label: option.text, value: option.value });
                    }))
                    : React.createElement(react_native_1.DatePickerIOS, { date: this.state.value, mode: mode, onDateChange: this._handleValueChange, minuteInterval: minuteInterval })),
                React.createElement(react_native_1.TouchableHighlight, { style: classes.confirmButton, underlayColor: '#ebebeb', onPress: this._handleConfirm, disabled: !neverDisableConfirmIOS && this.state.userIsInteractingWithPicker },
                    React.createElement(__1.View, null,
                        React.createElement(__1.Text, { style: classes.confirmText }, confirmTextIOS)))),
            React.createElement(react_native_1.TouchableHighlight, { style: classes.cancelButton, underlayColor: '#ebebeb', onPress: onCancel },
                React.createElement(__1.View, null,
                    React.createElement(__1.Text, { style: classes.cancelText }, cancelTextIOS)))));
    };
    CCustomPicker.defaultProps = {
        neverDisableConfirmIOS: false,
        cancelTextIOS: 'Cancel',
        confirmTextIOS: 'Confirm',
        isVisible: false,
    };
    return CCustomPicker;
}(React.PureComponent));
var componentName = 'CustomPicker';
exports.CustomPicker = __1.createStyles(styles, componentName)(CCustomPicker);
//# sourceMappingURL=CustomPicker.js.map