react-native-surveys/Forms/components/Form/InputField.js

Build your own forms, surveys and polls for your React Native apps.

function _extends() {
  _extends =
    Object.assign ||
    function(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
  return _extends.apply(this, arguments);
}

import React from "react";
import { View, StyleSheet, Text, TextInput, Picker } from "react-native";
import { colors } from "../../theme";
import { returnInputName, returnKeyboardType } from "../../helpers";

const InputField = ({
  label,
  description,
  required,
  error,
  name,
  textColor,
  color,
  multiline,
  select,
  onValueChange,
  ...restProps
}) => {
  const labelStyle = {
    color: textColor
  };
  const inputStyle = {
    color: textColor,
    minHeight: multiline ? 100 : 46,
    maxHeight: multiline ? 100 : 46
  };
  const inputType = name || returnInputName(label);
  const keyboardType = returnKeyboardType(label);
  return React.createElement(
    View,
    {
      style: styles.container
    },
    React.createElement(
      Text,
      {
        style: [styles.label, labelStyle]
      },
      label,
      " ",
      required &&
        React.createElement(
          Text,
          {
            style: styles.required
          },
          "*"
        )
    ),
    select
      ? React.createElement(
          View,
          {
            style: styles.pickerStyle
          },
          React.createElement(
            Picker,
            {
              enabled: restProps.editable,
              selectedValue: restProps.value,
              onValueChange: onValueChange
            },
            React.createElement(Picker.Item, {
              color: textColor,
              label: "-- Select an option --",
              value: "-- Select an option --"
            }),
            select.map(item =>
              React.createElement(Picker.Item, {
                color: textColor,
                key: item,
                label: item,
                value: item
              })
            )
          )
        )
      : React.createElement(
          TextInput,
          _extends({}, restProps, {
            keyboardType: keyboardType,
            multiline: multiline,
            numberOfLines: multiline ? 4 : 1,
            maxLength: multiline ? 2500 : 1000,
            selectionColor: color,
            underlineColorAndroid: "transparent",
            textAlignVertical: "top",
            name: inputType,
            style: [inputStyle, styles.input]
          })
        ),
    error &&
      React.createElement(
        Text,
        {
          style: styles.error
        },
        error
      ),
    description &&
      !error &&
      React.createElement(
        Text,
        {
          style: styles.description
        },
        description
      )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    marginBottom: 12
  },
  label: {
    fontSize: 14,
    fontWeight: "bold",
    paddingHorizontal: 6
  },
  required: {
    fontSize: 14,
    fontWeight: "bold",
    color: colors.required
  },
  input: {
    borderColor: colors.buttonBorder,
    borderWidth: 1,
    borderStyle: "solid",
    borderRadius: 6,
    padding: 12,
    marginVertical: 6,
    width: "100%",
    fontSize: 15,
    backgroundColor: colors.white
  },
  pickerStyle: {
    borderColor: colors.buttonBorder,
    backgroundColor: colors.white,
    paddingHorizontal: 4,
    borderWidth: 1,
    borderStyle: "solid",
    borderRadius: 6,
    marginVertical: 6,
    width: "100%"
  },
  error: {
    fontSize: 14,
    color: colors.error,
    paddingHorizontal: 4
  },
  description: {
    fontSize: 14,
    color: colors.grey,
    paddingHorizontal: 4
  }
});
export default InputField;