@dokuhero/react-native-components/dist/components/ItemIdentityPicker.js

Sets of React Native components that works with dokuhero/react-native-theme and react-i18next

import * as tslib_1 from "tslib";
import { withLocaleClass } from '@dokuhero/react-18n-ts-helper';
import { createStyleSheet, SpaceKeys, withThemeClass } from '@dokuhero/react-native-theme';
import React from 'react';
import { View } from 'react-native';
import { CheckBox } from 'react-native-elements';
import { ColorPicker } from './ColorPicker';
import { ImagePicker } from './ImagePicker';
var DEFAULT_COLOR = '#1abc9c';
var ItemIdentityPicker = /** @class */ (function (_super) {
    tslib_1.__extends(ItemIdentityPicker, _super);
    function ItemIdentityPicker(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            selectedTab: 'color',
            color: DEFAULT_COLOR,
            image: null
        };
        return _this;
    }
    ItemIdentityPicker.getDerivedStateFromProps = function (nextProps) {
        var _a = nextProps.value, colorOrUri = _a.colorOrUri, isImage = _a.isImage;
        return {
            selectedTab: isImage ? 'image' : 'color',
            color: isImage ? DEFAULT_COLOR : colorOrUri,
            image: isImage ? colorOrUri : null
        };
    };
    ItemIdentityPicker.prototype.render = function () {
        var _this = this;
        var selectedTab = this.state.selectedTab;
        var _a = this.props, t = _a.t, theme = _a.theme;
        return (<View style={styles.container}>
        <View style={styles.checkBoxContainer}>
          <CheckBox containerStyle={[
            styles.checkBox,
            { borderColor: theme.color.lighter }
        ]} center title={t('color')} checkedIcon="dot-circle-o" uncheckedIcon="circle-o" checked={selectedTab === 'color'} onPress={function () {
            _this.setState({ selectedTab: 'color' });
        }} textStyle={{ fontFamily: theme.fontName.semiBold }}/>
          <CheckBox containerStyle={[
            styles.checkBox,
            { borderColor: theme.color.lighter }
        ]} center title={t('image')} checkedIcon="dot-circle-o" uncheckedIcon="circle-o" checked={selectedTab === 'image'} onPress={function () {
            _this.setState({ selectedTab: 'image' });
        }} textStyle={{ fontFamily: theme.fontName.semiBold }}/>
        </View>
        {selectedTab === 'color' && this.renderColorPicker()}
        {selectedTab === 'image' && this.renderImagePicker()}
      </View>);
    };
    ItemIdentityPicker.prototype.renderColorPicker = function () {
        var _this = this;
        return (<View>
        <ColorPicker containerStyle={{ marginLeft: 0, marginRight: 0 }} selectedColor={this.state.color} onChange={function (color) {
            _this.setState({ color: color }, function () {
                _this.props.onChange({
                    colorOrUri: color,
                    isImage: false
                });
            });
        }}/>
      </View>);
    };
    ItemIdentityPicker.prototype.renderImagePicker = function () {
        var _this = this;
        return (<View>
        <ImagePicker uri={this.state.image} onChange={function (uri) {
            _this.setState({ image: uri }, function () {
                _this.props.onChange({
                    colorOrUri: uri,
                    isImage: true
                });
            });
        }}/>
      </View>);
    };
    ItemIdentityPicker = tslib_1.__decorate([
        withLocaleClass('common'),
        withThemeClass(),
        tslib_1.__metadata("design:paramtypes", [Object])
    ], ItemIdentityPicker);
    return ItemIdentityPicker;
}(React.Component));
export { ItemIdentityPicker };
var styles = createStyleSheet({
    container: {
        marginHorizontal: SpaceKeys.small
    },
    checkBoxContainer: { flexDirection: 'row', justifyContent: 'space-between' },
    checkBox: {
        flex: 1,
        backgroundColor: 'transparent',
        borderWidth: 1,
        borderStyle: 'dotted'
    }
});
//# sourceMappingURL=ItemIdentityPicker.js.map