@confi/conflux-react-ui-test-package
Version:
Modern and minimalist React UI library.
27 lines (25 loc) • 1.56 kB
JavaScript
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;
var theme = useTheme();
var width = useMemo(function () {
return "calc(".concat(ratio, " * ").concat(theme.layout.gap, " * .42)");
}, [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([["1033785836", [width, padding, clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon"
}, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
id: "1033785836",
dynamic: [width, 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:center;margin:0;padding:0 ").concat(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;