100 lines
2.5 KiB
JavaScript
100 lines
2.5 KiB
JavaScript
import React from "react";
|
|
import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
|
|
import { StyledSelectedItem, StyledLabel } from "./styled-selected-item";
|
|
import PropTypes from "prop-types";
|
|
import IconButton from "../icon-button";
|
|
|
|
const SelectedItem = (props) => {
|
|
const {
|
|
label,
|
|
onClose,
|
|
isDisabled,
|
|
onClick,
|
|
isInline,
|
|
className,
|
|
id,
|
|
propKey,
|
|
group,
|
|
forwardedRef,
|
|
classNameCloseButton,
|
|
hideCross,
|
|
} = props;
|
|
if (!label) return <></>;
|
|
|
|
const onCloseClick = (e) => {
|
|
!isDisabled && onClose && onClose(propKey, label, group, e);
|
|
};
|
|
|
|
const handleOnClick = (e) => {
|
|
!isDisabled &&
|
|
onClick &&
|
|
!e.target.classList.contains("selected-tag-removed") &&
|
|
onClick(propKey, label, group, e);
|
|
};
|
|
|
|
return (
|
|
<StyledSelectedItem
|
|
onClick={handleOnClick}
|
|
isInline={isInline}
|
|
className={className}
|
|
isDisabled={isDisabled}
|
|
id={id}
|
|
ref={forwardedRef}
|
|
>
|
|
<StyledLabel
|
|
className="selected-item_label"
|
|
truncate={true}
|
|
noSelect
|
|
isDisabled={isDisabled}
|
|
>
|
|
{label}
|
|
</StyledLabel>
|
|
{!hideCross && (
|
|
<IconButton
|
|
className={"selected-tag-removed " + classNameCloseButton}
|
|
iconName={CrossReactSvgUrl}
|
|
size={12}
|
|
onClick={onCloseClick}
|
|
isFill
|
|
isDisabled={isDisabled}
|
|
/>
|
|
)}
|
|
</StyledSelectedItem>
|
|
);
|
|
};
|
|
|
|
SelectedItem.propTypes = {
|
|
/** Selected item text */
|
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
/** Sets the 'width: fit-content' property */
|
|
isInline: PropTypes.bool,
|
|
/** Hide cross icon */
|
|
hideCross: PropTypes.bool,
|
|
/** Sets a callback function that is triggered when the cross icon is clicked */
|
|
onClose: PropTypes.func.isRequired,
|
|
/** Sets a callback function that is triggered when the selected item is clicked */
|
|
onClick: PropTypes.func,
|
|
/** Sets the button to present a disabled state */
|
|
isDisabled: PropTypes.bool,
|
|
/** Accepts class */
|
|
className: PropTypes.string,
|
|
/** Accepts id */
|
|
id: PropTypes.string,
|
|
/** Accepts css style */
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
/** Accepts key to remove item */
|
|
propKey: PropTypes.string,
|
|
/** Accepts group key to remove item */
|
|
group: PropTypes.string,
|
|
/** Passes ref to component */
|
|
forwardedRef: PropTypes.object,
|
|
};
|
|
|
|
SelectedItem.defaultProps = {
|
|
isInline: true,
|
|
hideCross: false,
|
|
isDisabled: false,
|
|
};
|
|
|
|
export default React.memo(SelectedItem);
|