wix-incubator / react-native-zss-rich-text-editor

React Native rich text editor based on ZSSRichTextEditor
Other
841 stars 310 forks source link

timeout #126

Closed phmngocnghia closed 6 years ago

phmngocnghia commented 6 years ago

I got

Possible Unhandled Promise Rejection (id: 0): "timeout"

Here is my code

` import React, { Component } from 'react'; import { StyleSheet, Text, View, ScrollView, TouchableWithoutFeedback, Modal, WebView } from 'react-native'; import ImagePicker from 'react-native-image-picker' import {RichTextEditor, RichTextToolbar} from 'react-native-zss-rich-text-editor' import ShadenTouchableHightLight from './ShadenTouchableHightLight' import RNGooglePlaces from 'react-native-google-places'; import { TextField } from 'react-native-material-textfield' import FAIcon from 'react-native-vector-icons/FontAwesome' import primaryStyles, { PRIMARY_COLOR } from '../style/index' import { Dropdown } from 'react-native-material-dropdown' import request from 'superagent' import { validateObject } from '../helper/validate';

export default class ClinicInfo extends Component {

constructor(props) { super(props);

this.state = Object.assign({}, {data: props.initData}, {
  clinicType: [],
  locationError: '',
  isShowDescriptionModal: false
})

// Convert lại thành validate Object...

if (typeof this.state.data.name !== 'object') {
  this.state.data.name = new validateObject('Tên phòng khám', this.state.data.name)
}

}

componentDidMount () { this.props.ParentProps.showLoading() request.get('http://deltavn.net/api/clinic-type').set({ 'Authorization': Bearer ${this.props.ParentProps.idToken} }).then((res) => { this.setState({ clinicType: res.body.data }) }).finally(() => { this.props.ParentProps.hideLoading() }) }

async submit () { // Validate tên let newData = Object.assign({}, this.state.data) newData.name.startValidate().required() this.setState({ data: newData })

// Validate địa chỉ
if (this.state.data.longitude === 0) {
  this.setState({
    locationError: 'Địa chỉ không được bỏ trống'
  })
} else if (!this.state.locationError) {
  this.setState({
    locationError: ''
  })
}

if (
  this.state.data.name.isValid() &&
  this.state.data.longitude !== 0 &&
  this.state.data.latitude !== 0
) {
  this.props.submitCallBack(this.state.data)
}

}

render() { return ( <ScrollView style={{ padding: 20 }}> <TextField error={this.state.data.name.error} value={this.state.data.name.val} onChangeText={(text)=>{ let newData = Object.assign({}, this.state.data) newData.name.val = text this.setState({ data: newData }) }} label='Tên phòng khám' title = 'Không được bỏ trống' />

      <Dropdown
        value={this.state.data.type}
        valueExtractor={({ id }) => id}
        labelExtractor={({ name }) => name}
        title = 'nhấn để chọn'
        label='Loại phòng khám'
        data={this.state.clinicType}
      />

      <TouchableWithoutFeedback
      onPress={()=>{
         RNGooglePlaces.openAutocompleteModal({
          type: 'address',
          country: 'VN'
        })
          .then((place) => {
            if(place.types && place.types.indexOf('street_address') !== -1) {
              let newData = Object.assign({}, this.state.data)
              newData.longitude = place.longitude
              newData.latitude = place.latitude
              newData.address = place.address
              this.setState({
                data: newData
              })
              this.setState({
                locationError: ''
              })
            } else {
              let newData = Object.assign({}, this.state.data)
              newData.longitude = 0
              newData.latitude = 0
              newData.address = ''
              this.setState({
                locationError: 'Địa chỉ phải có đầy đủ quận, huyện, số địa chỉ',
              })
            }
          })
          .finally(() => {
            this.locationTextInput.blur()
          })
      }}>
        <View>
          <TextField
            marginTop={0}
            editable={false}
            value={this.state.data.address}
            error={this.state.locationError}
            ref={(r) => this.locationTextInput = r}
            label='Vị trí phòng khám'
            title = 'Không được bỏ trống'
          />
        </View>
      </TouchableWithoutFeedback>

      <TouchableWithoutFeedback onPress={()=>{
        this.setState({
          isShowDescriptionModal: true
        })
      }}>
        <View>
          <Text style={{
            fontSize:18,
            marginTop: 20,
            marginBottom: 10
          }}>Mô tả phòng khám:</Text>
          <View style={{
            width: '100%',
            height: 200,
            borderRadius: 2,
            borderWidth: StyleSheet.hairlineWidth,
            borderColor: '#ced4da'
          }}>
            <WebView source={{html: this.state.data.description}} />
          </View>
        </View>
      </TouchableWithoutFeedback>

      <ShadenTouchableHightLight
        onPress = {this.submit.bind(this)}
        marginTop = {30}
        marginBottom = {30}
        padding = {15}
        backgroundColor = {PRIMARY_COLOR}
        flexDirection = 'row'>
          <FAIcon
            name = "edit"
            size = {15}
            color = 'white'
            style = {primaryStyles.Icon}
          />
          <Text style = {primaryStyles.textWhite}>{this.props.submitText}</Text>
      </ShadenTouchableHightLight>

      <Modal
        animationType="slide"
        transparent={false}
        visible={this.state.isShowDescriptionModal}
        onRequestClose={async () => {
          let description = await this.richtext.getContentHtml()
          this.setState(state=>{
            data: Object.assign({}, state.data, {
              description
            })
          })
          this.setState({
            isShowDescriptionModal: false
          })
        }}>
          <View style={{
            flex: 1,
            width: '100%',
            padding: 20,
            paddingTop: 25
          }}>

            <View style={{
              flex: 1,
              borderWidth: StyleSheet.hairlineWidth,
              borderColor: '#ced4da'
            }}>
              <RichTextEditor
                  initialContentHTML={this.state.data.description}
                  ref={(r)=>{
                    this.richtext = r
                  }}
                  style={styles.richText}
                  initialTitleHTML={'Mô tả phòng khám'}
                  editorInitializedCallback={() => {
                    this.richtext.setTitleFocusHandler(() => {
                      this.richtext.focusContent()
                    });
                  }}
              />
            </View>
            <RichTextToolbar
              onPressAddImage={()=> {
                ImagePicker.showImagePicker({
                  includeBase64: true,
                  compressImageQuality: 0.5
                }, (image) => {
                  if (image.data) {
                    let imageSrc = `data:${image.mime};base64,${image.data}`
                    this.richtext.insertImage({ src: imageSrc })
                  }
                })
              }}
              selectedButtonStyle={{
                backgroundColor: 'white'
              }}
              getEditor={() => this.richtext}
            />

          <ShadenTouchableHightLight
            onPress = {async () => {
              debugger
              let description = await this.richtext.getContentHtml()
              this.setState(state=>{
                data: Object.assign({}, state.data, {
                  description
                })
              })
              this.setState({
                isShowDescriptionModal: false
              })
            }}
            marginTop = {20}
            marginBottom = {20}
            padding = {15}
            backgroundColor = {PRIMARY_COLOR}
            flexDirection = 'row'>
              <FAIcon
                name = "undo"
                size = {15}
                color = 'white'
                style = {primaryStyles.Icon}
              />
              <Text style = {primaryStyles.textWhite}>Quay lại</Text>
          </ShadenTouchableHightLight>
        </View>
      </Modal>
    </ScrollView>
);

} }

const styles = StyleSheet.create({ container: { flex: 1 }, richText: { alignItems:'center', justifyContent: 'center', backgroundColor: 'transparent', height: 400 }, }); `