add:

- Support for ui:widget hidden
- Section Style Update
- DateWidget malformed JS calls issue fix
- Removed Slider Widget Support
- Add Dropdown Widget Support
- Fix RadioWidget to support 0 as index value
- Add support for Unsupported Widget

Author: Prateek Rathore

src/FormStyle.js

@@ -4,26 +4,10 @@ const styles = {
   container: {
     flex: 1
   },
-  cardContainer: {
+  sectionContainer: {
     flex: 1,
-    borderWidth: 1,
-    borderRadius: 2,
-    shadowColor: "#ddd",
-    borderLeftWidth: 2,
-    borderRightWidth: 2,
-    borderBottomWidth: 2,
-    borderTopWidth: 2,
-    shadowOffset: {
-      width: 1,
-      height: 1
-    },
     padding: metrics.cardPadding,
-    marginTop: metrics.cardMarginTop,
-    marginBottom: metrics.cardMarginTop,
-    paddingBottom: metrics.cardMarginTop,
-    shadowColor: "#ddd",
-    shadowOpacity: 1.0,
-    borderColor: "white"
+    marginBottom: metrics.baseMargin * 3,
   },
   sectionTitle: {
     fontSize: 16,
@@ -37,9 +21,11 @@ const styles = {
   button: {
     alignItems: 'center',
     backgroundColor: "#ad2960",
-    marginTop: metrics.doubleBaseMargin * 2,
-    marginBottom: 0,
-    height:40
+    margin: metrics.doubleBaseMargin,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height:54,
+    borderRadius: 10,
   },
   description: {
     fontSize: 14,
@@ -50,9 +36,9 @@ const styles = {
   },
   buttonText:{
       textAlign:"center",
-      marginTop:8,
-      fontSize:15,
-      color:"white"
+      fontSize:18,
+      color:"white",
+      fontWeight: 'bold',
   }
 };
 

src/Section.js

@@ -55,7 +55,7 @@ class Section extends Component {
     const sectionFormData = formData.hasOwnProperty(keyName) ? formData[keyName] : {};
     return (
       <View
-        style={styles.cardContainer}
+        style={styles.sectionContainer}
         onLayout={e => {
           this.props.storeLayoutSection(keyName, e.nativeEvent.layout.height);
         }}
@@ -64,7 +64,7 @@ class Section extends Component {
 
         {uiOrder["ui:order"].map(idSchema => {
           if (uiOrder[idSchema] == undefined) {
-            console.log(uiOrder[idSchema] + " Not Found ");
+            // console.log(uiOrder[idSchema] + " Not Found ");
           } else {
             const required = this.isRequired(idSchema);
             const errors = sectionErrors[idSchema]

src/Util.js

@@ -43,7 +43,7 @@ const widgetMap = {
     text: "TextWidget",
     select: "DropDownWidget",
     updown: "UnsupportedWidget",
-    range: "SliderWidget",
+    range: "UnsupportedWidget",
     radio: "RadioWidget",
     hidden: "UnsupportedWidget",
     checkboxes: "CheckboxesWidget"
@@ -87,7 +87,8 @@ export function getWidget(schema, widget, registeredWidgets = {}) {
   }
 
   if (typeof widget !== "string") {
-    throw new Error(`Unsupported widget definition: ${typeof widget}`);
+    console.log(widget);
+    // throw new Error(`Unsupported widget definition: ${typeof widget}`);
   }
 
   if (registeredWidgets.hasOwnProperty(widget)) {

src/Widgets/DateWidget.js

@@ -15,7 +15,7 @@ const DateWidget = props => {
       date={value}
       mode="date"
       placeholder="Select date"
-      format="MM-DD-YYYY"
+      format="YYYY-MM-DD"
       minDate="1900-05-01"
       maxDate={maxDateValue}
       confirmBtnText="Confirm"

src/Widgets/DropDownWidget.js

@@ -17,7 +17,7 @@ const DropDownWidget = props => {
           return (
             <Picker.Item
               label={item.title}
-              value={item.title}
+              value={item.enum[0]}
               key={item.title}
             />
           );

src/Widgets/RadioWidget.js

@@ -57,7 +57,7 @@ export default class RadioForm extends React.Component {
    * @returns {boolean} item.value
    */
   getIndexFromProps = (props, options) => {
-    if (props.value) {
+    if (props.value !== undefined || props.value !== null) {
       return _.findIndex(options, function(item) {
         return item.value == props.value;
       });

src/Widgets/SchemaWidget.js

@@ -25,17 +25,17 @@ class SchemaWidget extends Component {
     if (this.props.schema.type == "boolean") {
       return null;
     }
-    const color = hasErrors(errors) ?  styles.requiredColor : {};
+    const color = hasErrors(errors) ? styles.requiredColor : {};
     const { title } = this.props.schema;
     return (
       <View style={styles.label}>
         <Text
-        style={
-          this.props.idSchema == "cannula_size" ? styles.title1 : styles.title
-        }
-      >
-        {title}
-        {this.props.required && <Text style={color}> *</Text>}
+          style={
+            this.props.idSchema == "cannula_size" ? styles.title1 : styles.title
+          }
+        >
+          {title}
+          {this.props.required && <Text style={color}> *</Text>}
         </Text>
       </View>
     );
@@ -61,6 +61,9 @@ class SchemaWidget extends Component {
     const _value = value;
     const options = {};
     const deselectAlert = this.props.schema.deselectAlert;
+    if (widgetType == "hidden") {
+      return null;
+    }
     return (
       <View
         style={styles.container}

src/Widgets/UpsupportedWidget.js renamed to src/Widgets/UnsupportedWidget.js

@@ -1,11 +1,11 @@
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
+import metrics from "../Metrics";
 /**
  * Method gives the Unsupported widget in the json schema form
  * @param  {object} props
  */
 const UnsupportedWidget = props => {
-  console.log(props);
   return (
     <View>
       <Text style={styles.textStyle}>UnsupportedWidget</Text>
@@ -15,7 +15,9 @@ const UnsupportedWidget = props => {
 
 const styles = StyleSheet.create({
   textStyle: {
-    fontSize: 30
+    fontSize: 16,
+    margin: metrics.doubleBaseMargin,
+    color: "tomato"
   }
 });
 

src/Widgets/index.js

@@ -5,6 +5,7 @@ import DateWidget from "./DateWidget";
 import DropDownWidget from "./DropDownWidget";
 import SliderWidget from "./SliderWidget";
 import CheckboxWidget from "./CheckboxWidget";
+import UnsupportedWidget from './UnsupportedWidget';
 
 export default {
   TextWidget,
@@ -13,5 +14,6 @@ export default {
   DateWidget,
   DropDownWidget,
   SliderWidget,
-  CheckboxWidget
+  CheckboxWidget,
+  UnsupportedWidget
 };