@music-loopy/loops/lib/components/Input/index.js

A React component library for Music Loopy Applications and websites

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _excluded = ["variant", "startIcon", "endIcon", "color"];
var _templateObject, _templateObject2, _templateObject3;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
var Container = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border: 1px solid\n    ", ";\n  border-radius: 6px;\n  background: ", ";\n  padding: 0em;\n  gap: 0.5em;\n"])), function (props) {
  var _props$color;
  return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color = props.color) === null || _props$color === void 0 ? void 0 : _props$color.border) || 'primary'].color;
}, function (props) {
  var _props$color2;
  return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color2 = props.color) === null || _props$color2 === void 0 ? void 0 : _props$color2.background) || 'primary'].color;
});
var IconContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5em 0.5em 0.5em 0.5em;\n  color: ", ";\n"])), function (props) {
  var _props$color3;
  return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color3 = props.color) === null || _props$color3 === void 0 ? void 0 : _props$color3.icon) || 'darkGrey'].color;
});
var StyledInput = _styledComponents["default"].input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  background: none;\n  color: ", ";\n  font-size: 1em;\n  width: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  &::placeholder {\n    color: hsl(\n      from\n        ", "\n        h s calc(l + 20)\n    );\n    opacity: 1; /* Firefox */\n  }\n\n  &::-ms-input-placeholder {\n    /* Edge 12-18 */\n    color: hsl(\n      from\n        ", "\n        h s calc(l + 20)\n    );\n  }\n"])), function (props) {
  var _props$color4;
  return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color4 = props.color) === null || _props$color4 === void 0 ? void 0 : _props$color4.text) || 'darkGrey'].color;
}, function (props) {
  return props.withStartIcon ? '0em' : '1em';
}, function (props) {
  return props.withEndIcon ? '0em' : '1em';
}, function (props) {
  var _props$color5;
  return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color5 = props.color) === null || _props$color5 === void 0 ? void 0 : _props$color5.text) || 'darkGrey'].color;
}, function (props) {
  var _props$color6;
  return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color6 = props.color) === null || _props$color6 === void 0 ? void 0 : _props$color6.text) || 'darkGrey'].color;
});
var exists = function exists(icon) {
  return icon && icon.name;
};
var Input = function Input(_ref) {
  var _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'dark' : _ref$variant,
    startIcon = _ref.startIcon,
    endIcon = _ref.endIcon,
    color = _ref.color,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var preIcon = _extends({}, startIcon, {
    fill: (startIcon === null || startIcon === void 0 ? void 0 : startIcon.fill) || variant
  });
  var postIcon = _extends({}, endIcon, {
    fill: (endIcon === null || endIcon === void 0 ? void 0 : endIcon.fill) || variant
  });
  console.log('Post Icon', postIcon);
  return /*#__PURE__*/_react["default"].createElement(Container, {
    color: color
  }, startIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
    color: color
  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], preIcon)), /*#__PURE__*/_react["default"].createElement(StyledInput, _extends({
    color: color
  }, props, {
    withStartIcon: exists(startIcon),
    withAnyIcon: exists(startIcon) || exists(endIcon)
  })), endIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
    color: color
  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], postIcon)));
};
Input.propTypes = process.env.NODE_ENV !== "production" ? {
  variant: _propTypes["default"].oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning']),
  startIcon: _propTypes["default"].shape({
    name: _propTypes["default"].string.isRequired,
    size: _propTypes["default"].string,
    fill: _propTypes["default"].oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning'])
  }),
  endIcon: _propTypes["default"].shape({
    name: _propTypes["default"].string.isRequired,
    size: _propTypes["default"].string,
    fill: _propTypes["default"].oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning'])
  })
} : {};
Input.defaultProps = {
  variant: 'dark'
};
var _default = exports["default"] = Input;
module.exports = exports.default;