ffr-components/es/dynamic-form/FormInput.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import classnames from 'classnames';
import React from 'react';
var INPUT_TYPES = ['normal', 'valid', 'invalid', 'warning'];
export var FormInput = React.forwardRef(function (_ref, ref) {
  var state = _ref.state,
      className = _ref.className,
      compact = _ref.compact,
      disabled = _ref.disabled,
      id = _ref.id,
      name = _ref.name,
      placeholder = _ref.placeholder,
      readOnly = _ref.readOnly,
      type = _ref.type,
      value = _ref.value,
      props = _objectWithoutProperties(_ref, ["state", "className", "compact", "disabled", "id", "name", "placeholder", "readOnly", "type", "value"]);

  var formInputClasses = classnames('fd-input', 'ffr-input', _defineProperty({
    'fd-input--compact': !!compact
  }, "is-".concat(state), !!state), className);
  return React.createElement("input", _extends({}, props, {
    className: formInputClasses,
    disabled: disabled,
    id: id,
    name: name,
    placeholder: placeholder,
    readOnly: readOnly,
    ref: ref,
    type: type,
    value: value
  }));
});
FormInput.displayName = 'FormInput';
FormInput.inputType = INPUT_TYPES;
FormInput.defaultProps = {
  type: 'text'
};
FormInput.propDescriptions = {
  name: 'Value for the `name` attribute on the input.',
  state: 'Sets the state of the input. Can be left empty for default styles.',
  type: 'Value for the `type` attribute on the input.',
  value: 'Value for the `value` attribute on the input.'
};