@geezee/react-ui/esm/input/input-icon.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';

var InputIcon = function InputIcon(_ref) {
  var icon = _ref.icon,
      ratio = _ref.ratio,
      clickable = _ref.clickable,
      onClick = _ref.onClick,
      paddingLeft = _ref.paddingLeft,
      paddingRight = _ref.paddingRight;
  var theme = useTheme();
  var width = useMemo(function () {
    return "calc(".concat(ratio, " * ").concat(theme.layout.gap, " * .35)");
  }, [theme.layout.gap, ratio]);
  var padding = useMemo(function () {
    return "calc(".concat(ratio, " * ").concat(theme.layout.gap, " * .3)");
  }, [theme.layout.gap, ratio]);
  return /*#__PURE__*/React.createElement("span", {
    onClick: onClick,
    className: _JSXStyle.dynamic([["1104172110", [width, paddingRight || padding, paddingLeft || padding, clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon"
  }, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1104172110",
    dynamic: [width, paddingRight || padding, paddingLeft || padding, clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']
  }, ".input-icon.__jsx-style-dynamic-selector{box-sizing:content-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:".concat(width, ";height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;margin:0;padding:0 ").concat(paddingRight || padding, " 0 ").concat(paddingLeft || padding, ";line-height:1;position:relative;cursor:").concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}")));
};

var MemoInputIcon = React.memo(InputIcon);
export default MemoInputIcon;