calcite-react/TextField/TextField-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SearchClearIcon = exports.StyledAdornmentWrapper = exports.StyledTextFieldAdornmentWrapper = exports.StyledTextArea = exports.StyledTextField = void 0;

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

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _helpers = require("../utils/helpers");

var _commonElements = require("../utils/commonElements");

var _CalciteThemeProvider = require("../CalciteThemeProvider");

var _ButtonStyled = require("../Button/Button-styled");

var _SelectStyled = require("../Select/Select-styled");

var _XCircleIcon = _interopRequireDefault(require("calcite-ui-icons-react/XCircleIcon"));

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

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

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

// Third party libraries
var StyledTextField = (0, _styledComponents.default)(_commonElements.CalciteInput).withConfig({
  displayName: "StyledTextField",
  componentId: "wcvteo-0"
})(["", ";", ";"], function (props) {
  return props.hasAdornmentLeft && (0, _styledComponents.css)(["html:not([dir='rtl']) &{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;}html[dir='rtl'] &{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;}"]);
}, function (props) {
  return props.hasAdornmentRight && (0, _styledComponents.css)(["html:not([dir='rtl']) &{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;}html[dir='rtl'] &{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;}"]);
});
exports.StyledTextField = StyledTextField;
StyledTextField.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledTextArea = (0, _styledComponents.default)(_commonElements.CalciteTextarea).withConfig({
  displayName: "StyledTextArea",
  componentId: "wcvteo-1"
})(["", ";", ";"], function (props) {
  return props.hasAdornmentLeft && (0, _styledComponents.css)(["html:not([dir='rtl']) &{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;}html[dir='rtl'] &{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;}"]);
}, function (props) {
  return props.hasAdornmentRight && (0, _styledComponents.css)(["html:not([dir='rtl']) &{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;}html[dir='rtl'] &{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;}"]);
});
exports.StyledTextArea = StyledTextArea;
StyledTextArea.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledAdornmentWrapper = _styledComponents.default.div.withConfig({
  displayName: "StyledAdornmentWrapper",
  componentId: "wcvteo-2"
})(["display:flex;align-items:center;justify-content:center;margin:", " 0 0 0;padding:0 ", ";background:", ";color:", ";fill:currentColor;border:1px solid ", ";border-radius:", ";min-width:", ";input + &{border-right:1px solid ", ";html[dir='rtl'] &{border-right:initial;border-left:1px solid ", ";}}", ";", ";", ";"], function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 6, '/');
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, function (props) {
  return props.theme.palette.lightestGray;
}, function (props) {
  return props.theme.palette.darkerGray;
}, function (props) {
  return props.theme.palette.lightGray;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.baseline;
}, function (props) {
  return props.theme.palette.lightGray;
}, function (props) {
  return props.theme.palette.lightGray;
}, function (props) {
  return props.minimal && (0, _styledComponents.css)(["padding:0 ", ";min-width:auto;background:transparent;border:none;border-bottom:1px solid ", ";"], function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 6, '/');
  }, function (props) {
    return props.theme.palette.lighterGray;
  });
}, function (props) {
  return props.adornmentDirection === 'left' && (0, _styledComponents.css)(["html:not([dir='rtl']) &{border-top-right-radius:0;border-bottom-right-radius:0;}html[dir='rtl'] &{border-top-left-radius:0;border-bottom-left-radius:0;}"]);
}, function (props) {
  return props.adornmentDirection === 'right' && (0, _styledComponents.css)(["html:not([dir='rtl']) &{border-top-left-radius:0;border-bottom-left-radius:0;}html[dir='rtl'] &{border-top-right-radius:0;border-bottom-right-radius:0;}"]);
});

exports.StyledAdornmentWrapper = StyledAdornmentWrapper;
StyledAdornmentWrapper.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTextFieldAdornmentWrapper = _styledComponents.default.div.withConfig({
  displayName: "StyledTextFieldAdornmentWrapper",
  componentId: "wcvteo-3"
})(["position:relative;display:flex;", ",", ",", ",", ",", ",", "{margin:", " 0 0 0;}", ";"], StyledTextField, StyledTextArea, _ButtonStyled.StyledButton, StyledAdornmentWrapper, _SelectStyled.StyledSelectInput, _SelectStyled.StyledSelectButton, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 6, '/');
}, function (props) {
  return props.fullWidth && (0, _styledComponents.css)(["width:100%;"]);
});

exports.StyledTextFieldAdornmentWrapper = StyledTextFieldAdornmentWrapper;
StyledTextFieldAdornmentWrapper.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var SearchClearIcon = (0, _styledComponents.default)(function (_ref) {
  var isSuccess = _ref.isSuccess,
      isError = _ref.isError,
      rest = _objectWithoutProperties(_ref, ["isSuccess", "isError"]);

  return _react.default.createElement(_XCircleIcon.default, rest);
}).withConfig({
  displayName: "SearchClearIcon",
  componentId: "wcvteo-4"
})(["display:none;position:absolute;right:", ";bottom:", ";transform:translateY(50%);color:", ";opacity:0.5;cursor:pointer;", ":hover &{display:block;}", ";html[dir='rtl'] &{right:auto;left:", ";", ";}&:hover{opacity:0.8;}"], function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, (0, _helpers.unitCalc)('2.25rem', 2, '/'), function (props) {
  return props.theme.palette.darkerGray;
}, StyledTextFieldAdornmentWrapper, function (props) {
  return (props.isSuccess || props.isError) && (0, _styledComponents.css)(["right:", ";"], props.theme.baseline);
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, function (props) {
  return (props.isSuccess || props.isError) && (0, _styledComponents.css)(["left:", ";"], props.theme.baseline);
});
exports.SearchClearIcon = SearchClearIcon;