Issue 205 (#502)

* v0.6.13 Support to disable a picker field Refactor code Change DatePicker style if is disabled * Change enabled property on picker * Update package.json
gcanti · Jun 29, 2018 · 467fe8f · 467fe8f
1 parent 655a9b6
commit 467fe8f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/lib/stylesheets/bootstrap.js b/lib/stylesheets/bootstrap.js
@@ -161,6 +161,12 @@ var stylesheet = Object.freeze({
     active: {
       borderBottomWidth: 1,
       borderColor: BORDER_COLOR
+    },
+    notEditable: {
+      height: 44,
+      flexDirection: "row",
+      alignItems: "center",
+      backgroundColor: DISABLED_BACKGROUND_COLOR
     }
   },
   pickerValue: {
@@ -184,7 +190,10 @@ var stylesheet = Object.freeze({
   },
   dateTouchable: {
     normal: {},
-    error: {}
+    error: {},
+    notEditable: {
+      backgroundColor: DISABLED_BACKGROUND_COLOR
+    }
   },
   dateValue: {
     normal: {

diff --git a/lib/templates/bootstrap/datepicker.ios.js b/lib/templates/bootstrap/datepicker.ios.js
@@ -65,6 +65,11 @@ class CollapsibleDatePickerIOS extends React.Component {
       datepickerStyle = stylesheet.datepicker.error;
       dateValueStyle = stylesheet.dateValue.error;
     }
+
+    if (locals.disabled) {
+      touchableStyle = stylesheet.dateTouchable.notEditable;
+    }
+
     let formattedValue = locals.value ? String(locals.value) : "";
     if (locals.config) {
       if (locals.config.format && formattedValue) {

diff --git a/lib/templates/bootstrap/select.android.js b/lib/templates/bootstrap/select.android.js
@@ -51,7 +51,7 @@ function select(locals) {
         selectedValue={locals.value}
         onValueChange={locals.onChange}
         help={locals.help}
-        enabled={locals.enabled}
+        enabled={!locals.disabled}
         mode={locals.mode}
         prompt={locals.prompt}
         itemStyle={locals.itemStyle}

diff --git a/lib/templates/bootstrap/select.ios.js b/lib/templates/bootstrap/select.ios.js
@@ -85,6 +85,10 @@ class CollapsiblePickerIOS extends React.Component {
       pickerValue = stylesheet.pickerValue.error;
     }
 
+    if (locals.disabled) {
+      touchableStyle = stylesheet.pickerTouchable.notEditable;
+    }
+
     const options = locals.options.map(({ value, text }) => (
       <Picker.Item key={value} value={value} label={text} />
     ));
@@ -101,6 +105,7 @@ class CollapsiblePickerIOS extends React.Component {
         ]}
       >
         <TouchableOpacity
+          disabled={locals.disabled}
           style={[
             touchableStyle,
             this.state.isCollapsed ? {} : touchableStyleActive
@@ -119,7 +124,7 @@ class CollapsiblePickerIOS extends React.Component {
             selectedValue={locals.value}
             onValueChange={locals.onChange}
             help={locals.help}
-            enabled={locals.enabled}
+            enabled={!locals.disabled}
             mode={locals.mode}
             prompt={locals.prompt}
             itemStyle={locals.itemStyle}