maisonsport-common-ui/dist/commonjs/molecules/TextInput/index.js

Suite of styled-components to be consumed by the React-Native App and by the Web (via React-Native for Web)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.inputMargins = exports.inputColors = exports.inputID = exports.inputIconID = exports.inputContainerID = exports.placeholderErrorIconID = exports.errorMessageTestID = exports.inputParentID = void 0;

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _native = _interopRequireWildcard(require("styled-components/native"));

var _styledSystem = require("styled-system");

var _composeReactRefs = _interopRequireDefault(require("@seznam/compose-react-refs"));

var _Box = _interopRequireDefault(require("../../atoms/Box"));

var _Touchable = _interopRequireDefault(require("../../atoms/Touchable"));

var _Text = _interopRequireDefault(require("../../atoms/Text"));

var _theme = _interopRequireDefault(require("../../theme"));

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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); }

function _templateObject() {
  const data = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"]);

  _templateObject = function () {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

const inputParentID = 'input-parent';
exports.inputParentID = inputParentID;
const errorMessageTestID = 'input-error-message';
exports.errorMessageTestID = errorMessageTestID;
const placeholderErrorIconID = 'input-placeholder-error-icon';
exports.placeholderErrorIconID = placeholderErrorIconID;
const inputContainerID = 'input-container';
exports.inputContainerID = inputContainerID;
const inputIconID = 'input-icon';
exports.inputIconID = inputIconID;
const inputID = 'text-input';
exports.inputID = inputID;
const inputColors = {
  error: 'red',
  default: 'lightGrey'
};
exports.inputColors = inputColors;
const inputMargins = {
  error: 1,
  default: 0
};
exports.inputMargins = inputMargins;

const StyledTextInput = _native.default.TextInput.attrs(({
  theme
}) => ({
  placeholderTextColor: theme.colors.darkGrey
}))(_templateObject(), _styledSystem.color, _styledSystem.typography, _styledSystem.layout, _styledSystem.space, _styledSystem.fontFamily);

StyledTextInput.defaultProps = {
  color: 'black',
  backgroundColor: inputColors.default,
  fontFamily: 0,
  fontWeight: 3,
  fontSize: 2,
  height: '100%',
  flex: 1,
  width: 1,
  placeholderStyle: {
    font: 0
  }
};
const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
  noWrapTheme,
  icon,
  iconRight,
  error,
  errorMessages,
  ErrorIconComponent,
  marginBottom,
  marginTop,
  marginLeft,
  marginRight,
  backgroundColor,
  ...props
}, externalRef) => {
  const inputRef = /*#__PURE__*/(0, _react.createRef)();
  const [componentHasError, setComponentHasError] = (0, _react.useState)(false);
  (0, _react.useEffect)(() => {
    setComponentHasError(error || !!errorMessages.filter(Boolean).length);
  }, [error, errorMessages.filter(Boolean).length]);
  if (backgroundColor) inputColors.default = backgroundColor;

  function getErrorMessages() {
    return errorMessages.filter(Boolean).map(message => /*#__PURE__*/_react.default.createElement(_Box.default, {
      key: message,
      flexDirection: "row",
      marginBottom: 1,
      alignItems: "center"
    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
      width: "7.5px",
      height: "7.5px",
      backgroundColor: inputColors.error,
      borderRadius: "7.5px"
    }), /*#__PURE__*/_react.default.createElement(_Text.default, {
      testID: errorMessageTestID,
      noWrapTheme: true,
      variant: "p",
      color: inputColors.error,
      fontWeight: 4,
      marginLeft: 1,
      textAlign: "left"
    }, message)));
  }

  function getRightSideIcon() {
    const Container = ({
      onPress = () => {},
      children
    }) => /*#__PURE__*/_react.default.createElement(_Touchable.default, {
      noWrapTheme: true,
      accessible: false,
      backgroundColor: inputColors.default,
      width: "8%",
      height: 1,
      justifyContent: "center",
      alignItems: "center",
      onPress: onPress,
      activeOpacity: 1,
      tabIndex: -1,
      style: {
        cursor: 'text'
      }
    }, children);

    let rightSideIcon = null;

    if (componentHasError) {
      rightSideIcon = /*#__PURE__*/_react.default.createElement(Container, {
        onPress: () => {
          var _inputRef$current;

          return inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
        }
      }, /*#__PURE__*/_react.default.createElement(ErrorIconComponent, {
        width: 15,
        height: 15,
        stroke: _theme.default.colors[inputColors.error]
      }));
    } else if (iconRight) {
      rightSideIcon = /*#__PURE__*/_react.default.createElement(Container, {
        pointerEvents: "box-none"
      }, iconRight);
    }

    return rightSideIcon;
  }

  return /*#__PURE__*/_react.default.createElement(_native.ThemeProvider, {
    theme: _theme.default
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    testID: "".concat(props.placeholder || '', "_").concat(inputParentID),
    noWrapTheme: true,
    marginTop: marginTop,
    marginRight: marginRight,
    marginBottom: marginBottom,
    marginLeft: marginLeft
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    testID: inputContainerID,
    noWrapTheme: true,
    height: props.height || 'textInputHeight',
    backgroundColor: inputColors.default,
    borderColor: componentHasError ? inputColors.error : inputColors.default,
    borderWidth: "medium",
    borderRadius: 4,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: componentHasError ? inputMargins.error : inputMargins.default
  }, icon && /*#__PURE__*/_react.default.createElement(_Box.default, {
    testID: inputIconID,
    noWrapTheme: true,
    accessible: false,
    width: "8%",
    height: 1,
    backgroundColor: inputColors.default,
    justifyContent: "center",
    alignItems: "center",
    activeOpacity: 1,
    tabIndex: -1
  }, icon), /*#__PURE__*/_react.default.createElement(StyledTextInput, _extends({
    testID: inputID,
    paddingLeft: 1,
    autoCapitalize: (props === null || props === void 0 ? void 0 : props.type) && ['email'].includes(props.type) ? 'none' : 'sentences' // eslint-disable-next-line react/jsx-props-no-spreading

  }, props, {
    ref: (0, _composeReactRefs.default)(inputRef, externalRef)
  })), getRightSideIcon()), componentHasError && /*#__PURE__*/_react.default.createElement(_Box.default, {
    marginY: 1
  }, getErrorMessages())));
});
TextInput.defaultProps = {
  type: null,
  icon: null,
  iconRight: null,
  error: false,
  errorMessages: [],
  ErrorIconComponent: () => /*#__PURE__*/_react.default.createElement(_Text.default, {
    fontWeight: "black",
    color: inputColors.error,
    testID: placeholderErrorIconID
  }, "X"),
  backgroundColor: null
};
TextInput.propTypes = {
  type: _propTypes.default.string,
  icon: _propTypes.default.node,
  iconRight: _propTypes.default.node,
  error: _propTypes.default.bool,
  // eslint-disable-next-line react/forbid-prop-types
  errorMessages: _propTypes.default.array,
  ErrorIconComponent: _propTypes.default.func,
  backgroundColor: _propTypes.default.string
};
TextInput.displayName = 'TextInput';
var _default = TextInput;
exports.default = _default;
//# sourceMappingURL=index.js.map