alm-search-01/dist/components/Field/Field.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _styles = require("@material-ui/core/styles");

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));

var _brandStyles = _interopRequireDefault(require("../../utils/brandStyles"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    iconContainer: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      marginLeft: 4,
      marginRight: 12
    },
    button: {
      flex: '1',
      padding: '7px 11px',
      background: function background(getBrandStyles) {
        return getBrandStyles.inputBgColor;
      },
      borderRadius: '4px',
      border: '0',
      minHeight: '55px',
      textTransform: 'capitalize',
      display: 'block',
      margin: '0 4px',
      textAlign: 'left',
      position: 'relative',
      '&:hover': {
        border: '0',
        background: function background(getBrandStyles) {
          return getBrandStyles.inputBgColor;
        }
      }
    },
    errorContainer: {
      color: '#ef4050',
      position: 'absolute',
      right: '10px',
      left: 'auto',
      top: 16,
      zIndex: 10
    },
    icon: {
      color: function color(getBrandStyles) {
        return getBrandStyles.iconColor;
      },
      fontSize: 24,
      margin: '0',
      position: 'static',
      padding: '0'
    },
    labelText: {
      color: function color(getBrandStyles) {
        return getBrandStyles.labelColor;
      },
      fontSize: '12px',
      fontWeight: 'normal',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      display: 'block',
      background: 'transparent',
      textAlign: 'initial',
      padding: '0'
    },
    labelValue: {
      color: '#333333',
      fontSize: '14px',
      fontWeight: 'normal',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap'
    },
    //RTL
    iconContainerRtl: {
      marginLeft: 12,
      marginRight: 4
    },
    textRtl: {
      textAlign: 'right'
    },
    errorContainerRtl: {
      right: 'auto',
      left: '10px'
    }
  };
});

var Field = function Field(_ref) {
  var label = _ref.label,
      value = _ref.value,
      onClick = _ref.onClick,
      required = _ref.required,
      IconComponent = _ref.iconComponent,
      lang = _ref.lang,
      brand = _ref.brand;
  var classes = useStyles((0, _brandStyles.default)(brand));
  var ar = "ar";
  return _react.default.createElement(_react.default.Fragment, null, IconComponent ? _react.default.createElement("div", {
    className: "".concat(classes.iconContainer, " ").concat(lang === ar && classes.iconContainerRtl)
  }, _react.default.createElement(IconComponent, {
    classes: {
      root: classes.icon
    },
    color: "primary"
  })) : null, _react.default.createElement(_Button.default, {
    classes: {
      root: "".concat(classes.button, " ").concat(lang === ar && classes.textRtl)
    },
    onClick: onClick,
    variant: "outlined",
    color: "primary"
  }, _react.default.createElement("div", {
    className: classes.labelText
  }, label), value ? _react.default.createElement("div", {
    className: classes.labelValue
  }, value) : null, required && _react.default.createElement("div", {
    className: "".concat(classes.errorContainer, " ").concat(lang === ar && classes.errorContainerRtl)
  }, _react.default.createElement(_Error.default, null))));
};

var _default = Field;
exports.default = _default;