@confi/conflux-react-ui-test-package
Version:
Modern and minimalist React UI library.
47 lines (43 loc) • 3.22 kB
JavaScript
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
var InputIconClear = function InputIconClear(_ref) {
var onClick = _ref.onClick,
heightRatio = _ref.heightRatio,
disabled = _ref.disabled,
visibale = _ref.visibale;
var theme = useTheme();
var width = useMemo(function () {
return heightRatio ? "calc(10.66px * ".concat(heightRatio, ")") : '18px';
}, [heightRatio]);
var clickHandler = function clickHandler(event) {
event.preventDefault();
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
onClick && onClick(event);
};
return /*#__PURE__*/React.createElement("div", {
onClick: clickHandler,
className: _JSXStyle.dynamic([["1971843609", [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground, width, width]]]) + " " + "clear-icon ".concat(visibale ? 'visibale' : '')
}, /*#__PURE__*/React.createElement("svg", {
viewBox: "0 0 24 24",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round",
fill: "none",
shapeRendering: "geometricPrecision",
className: _JSXStyle.dynamic([["1971843609", [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground, width, width]]])
}, /*#__PURE__*/React.createElement("path", {
d: "M18 6L6 18",
className: _JSXStyle.dynamic([["1971843609", [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground, width, width]]])
}), /*#__PURE__*/React.createElement("path", {
d: "M6 6l12 12",
className: _JSXStyle.dynamic([["1971843609", [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground, width, width]]])
})), /*#__PURE__*/React.createElement(_JSXStyle, {
id: "1971843609",
dynamic: [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground, width, width]
}, ".clear-icon.__jsx-style-dynamic-selector{padding:0 ".concat(theme.layout.gapHalf, ";margin:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;cursor:").concat(disabled ? 'not-allowed' : 'pointer', ";box-sizing:border-box;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;color:").concat(theme.palette.accents_3, ";visibility:hidden;opacity:0;}.visibale.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme.palette.accents_3 : theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:").concat(width, ";height:").concat(width, ";}")));
};
var MemoInputIconClear = React.memo(InputIconClear);
export default MemoInputIconClear;