@blend-ui/core/dist/esm/Input.js

Blend core cmponents

import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
import React, { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { compose, layout, color, space, border, typography } from 'styled-system';
import Text from './Text.js';
import Box from './Box.js';
import { useTheme } from './theme/ThemeProvider.js';
var _excluded = ["errorMsg", "promptMsg"];
var systemProps = compose(layout, color, space, border, typography);
var inputTheme = css(["margin:0;", " appearance:none;display:block;height:", ";font-family:inherit;font-size:", ";line-height:", ";color:", ";background-color:", ";border:", ";border-radius:", ";padding-left:", ";padding-right:", ";padding-top:", ";padding-bottom:", ";::placeholder{color:", ";}&:disabled{background:", ";border:", ";pointer-events:none;}&:invalid{outline:none;-webkit-box-shadow:none;box-shadow:none;border:", ";}&:focus,&:not([disabled]):hover{outline:none;-webkit-box-shadow:none;box-shadow:none;border:", ";}::-ms-clear{display:none;}"], systemProps, function (props) {
  return props.height ? props.height : props.isIcon ? "100%" : props.theme.componentStyles[props.as].base.height;
}, function (props) {
  return props.theme.componentStyles[props.as].base.fontSize;
}, function (props) {
  return props.theme.componentStyles[props.as].base.lineHeight;
}, function (props) {
  return typeof props.color !== "undefined" ? props.color : props.theme.componentStyles[props.as].base.color;
}, function (props) {
  return props.theme.componentStyles[props.as].base.backgroundColor || "transparent";
}, function (props) {
  return typeof props.borders !== "undefined" ? props.borders : props.theme.componentStyles[props.as].base.border;
}, function (props) {
  return typeof props.borderRadius !== "undefined" ? props.borderRadius : props.theme.componentStyles[props.as].base.borderRadius;
}, function (props) {
  return props.theme.componentStyles[props.as].base.paddingLeft;
}, function (props) {
  return props.theme.componentStyles[props.as].base.paddingRight;
}, function (props) {
  return props.theme.componentStyles[props.as].base.paddingTop;
}, function (props) {
  return props.theme.componentStyles[props.as].base.paddingBottom;
}, function (props) {
  return props.theme.colors.text.muted;
}, function (props) {
  return props.theme.colors.text.muted;
}, function (props) {
  return props.isIcon ? 0 : props.theme.borders.input.disabled;
}, function (props) {
  return props.isIcon ? 0 : props.theme.borders.input.error;
}, function (props) {
  return props.isIcon ? 0 : props.theme.borders.input.active;
});

var themeColorStyles = function themeColorStyles(props) {
  return props.colorStyle ? props.theme.colorStyles[props.colorStyle] : null;
};

var errorStyles = function errorStyles(props) {
  return props.error ? {
    border: props.isIcon ? 0 : props.theme.borders.input.error
  } : null;
};

var InputElement = styled.input.withConfig({
  displayName: "Input__InputElement",
  componentId: "sc-1cjfi0-0"
})(["", " ", " ", ""], inputTheme, themeColorStyles, errorStyles);
var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var errorMsg = _ref.errorMsg,
      promptMsg = _ref.promptMsg,
      props = _objectWithoutProperties(_ref, _excluded); //console.log("INPUT  ", props, ref);


  var _useTheme = useTheme(),
      colors = _useTheme.colors; //console.log("IS ICON ", props.isIcon);
  //const InputRef = ref || React.createRef();


  if (errorMsg && errorMsg.length > 0) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputElement, _extends({}, props, {
      ref: ref
    })), /*#__PURE__*/React.createElement(Text, {
      mt: 5,
      textStyle: "caption2",
      color: colors.baseError
    }, errorMsg));
  } else if (promptMsg && promptMsg.length > 0) {
    return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(InputElement, _extends({}, props, {
      ref: ref
    })), /*#__PURE__*/React.createElement(Text, {
      mt: 5,
      mb: 10,
      textStyle: "caption2",
      color: colors.baseSecondary
    }, promptMsg));
  } else {
    return /*#__PURE__*/React.createElement(InputElement, _extends({}, props, {
      ref: ref
    }));
  }
});
Input.defaultProps = {
  as: "input",
  type: "text",
  width: "100%"
};
Input.displayName = "Input";
Input.isField = true;
Input.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Input",
  "props": {
    "as": {
      "defaultValue": {
        "value": "\"input\"",
        "computed": false
      },
      "required": false
    },
    "type": {
      "defaultValue": {
        "value": "\"text\"",
        "computed": false
      },
      "required": false
    },
    "width": {
      "defaultValue": {
        "value": "\"100%\"",
        "computed": false
      },
      "required": false
    }
  }
};
export { Input as default };