@s-ui/react-atom-input
Version:
> Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts.
34 lines • 1.64 kB
JavaScript
import cx from 'classnames';
import PropTypes from 'prop-types';
import { BASE_CLASS_ICON, BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_HANDLER, BASE_CLASS_ICON_COMPONENT_LEFT, BASE_CLASS_ICON_COMPONENT_RIGHT, BASE_CLASS_ICON_LEFT, BASE_CLASS_ICON_RIGHT } from './config.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var InputIcons = function InputIcons(_ref) {
var _cx, _cx2, _cx3;
var leftIcon = _ref.leftIcon,
rightIcon = _ref.rightIcon,
onClickLeftIcon = _ref.onClickLeftIcon,
onClickRightIcon = _ref.onClickRightIcon,
children = _ref.children;
if (!(leftIcon || rightIcon)) {
return children;
}
var handleLeftClick = function handleLeftClick(event) {
onClickLeftIcon && onClickLeftIcon(event);
};
var handleRightClick = function handleRightClick(event) {
onClickRightIcon && onClickRightIcon(event);
};
return /*#__PURE__*/_jsxs("div", {
className: cx(BASE_CLASS_ICON, (_cx = {}, _cx[BASE_CLASS_ICON_LEFT] = leftIcon, _cx[BASE_CLASS_ICON_RIGHT] = rightIcon, _cx)),
children: [leftIcon && /*#__PURE__*/_jsx("span", {
className: cx(BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_LEFT, (_cx2 = {}, _cx2[BASE_CLASS_ICON_COMPONENT_HANDLER] = onClickLeftIcon, _cx2)),
onClick: handleLeftClick,
children: leftIcon
}), children, rightIcon && /*#__PURE__*/_jsx("span", {
className: cx(BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_RIGHT, (_cx3 = {}, _cx3[BASE_CLASS_ICON_COMPONENT_HANDLER] = onClickRightIcon, _cx3)),
onClick: handleRightClick,
children: rightIcon
})]
});
};
export default InputIcons;