react-native-form-generator icon indicating copy to clipboard operation
react-native-form-generator copied to clipboard

How to disable fields?

Open msageryd opened this issue 8 years ago • 1 comments

I need my input forms to be read-only until I put them in edit mode.

So I need to manage editable and disabled props of the fields.

InputField is easy:

<InputField
      placeholder='Namn'
      ref='contactName'
      editable={this.props.isEditable}
/>

SwitchField is not easy. I'd like to do like this:

 <WrappedSwitchField
  value={this.props.project.isActive}
  disabled={!this.props.isEditable}
  label='Active'
/>

or even

 <WrappedSwitchField
  value={this.props.project.isActive}
  editable={this.props.isEditable}
  label='Active'
/>

But the switch field doesn't propagate the disabled prop to the internal switch. I could make a custom field, of course. But it would be nice if all form-generator fields were disableable (is that a word?). It would also be great if the editable prop where used everywhere (instead of disabled for switches)

How about one new line in SwitchComponent.js?

//src/lib/SwitchComponent.js
render(){
  return(<Field {...this.props}>
    <View style={this.props.containerStyle}
      onLayout={this.handleLayoutChange.bind(this)}>

      <Text style={this.props.labelStyle}>{this.props.label}</Text>
        <Switch
        onValueChange={this.handleValueChange.bind(this)}
        style={this.props.switchStyle}
        value={this.state.value} 

-->     disabled={ (typeof this.props.editable === 'undefined') ? false : !this.props.editable }/>        

    </View>

  </Field>
  )
}

msageryd avatar Sep 26 '16 12:09 msageryd

I'm going to check this. The props passed to the parent component are propagated to the children so I guess it should work no matter what. I'll include the change in the new version

MichaelCereda avatar Sep 26 '16 16:09 MichaelCereda