2019-08-07 15:17:21 +00:00
|
|
|
import React from "react";
|
2023-06-13 07:29:01 +00:00
|
|
|
import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
|
2023-07-07 12:44:20 +00:00
|
|
|
import { StyledSelectedItem, StyledLabel } from "./styled-selected-item";
|
2019-08-07 15:17:21 +00:00
|
|
|
import PropTypes from "prop-types";
|
2023-06-13 07:29:01 +00:00
|
|
|
import IconButton from "@docspace/components/icon-button";
|
2019-08-07 15:17:21 +00:00
|
|
|
|
2019-08-08 08:36:46 +00:00
|
|
|
const SelectedItem = (props) => {
|
2023-06-13 07:29:01 +00:00
|
|
|
const {
|
|
|
|
label,
|
|
|
|
onClose,
|
|
|
|
isDisabled,
|
|
|
|
onClick,
|
|
|
|
isInline,
|
|
|
|
className,
|
|
|
|
id,
|
|
|
|
propKey,
|
|
|
|
group,
|
2023-07-14 15:15:39 +00:00
|
|
|
forwardedRef,
|
2023-07-07 11:18:23 +00:00
|
|
|
classNameCloseButton,
|
2023-06-13 07:29:01 +00:00
|
|
|
} = props;
|
|
|
|
if (!label) return <></>;
|
2019-12-03 13:18:49 +00:00
|
|
|
|
2020-12-18 12:34:36 +00:00
|
|
|
const onCloseClick = (e) => {
|
2023-06-13 13:28:02 +00:00
|
|
|
!isDisabled && onClose && onClose(propKey, label, group, e);
|
2023-06-13 07:29:01 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const handleOnClick = (e) => {
|
|
|
|
!isDisabled &&
|
|
|
|
onClick &&
|
|
|
|
!e.target.classList.contains("selected-tag-removed") &&
|
2023-06-13 13:28:02 +00:00
|
|
|
onClick(propKey, label, group, e);
|
2020-12-18 12:34:36 +00:00
|
|
|
};
|
|
|
|
|
2019-12-03 13:18:49 +00:00
|
|
|
return (
|
2023-06-13 07:29:01 +00:00
|
|
|
<StyledSelectedItem
|
|
|
|
onClick={handleOnClick}
|
|
|
|
isInline={isInline}
|
|
|
|
className={className}
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
id={id}
|
2023-07-14 15:15:39 +00:00
|
|
|
ref={forwardedRef}
|
2023-06-13 07:29:01 +00:00
|
|
|
>
|
2023-07-07 12:44:20 +00:00
|
|
|
<StyledLabel
|
2023-07-07 11:18:23 +00:00
|
|
|
className="selected-item_label"
|
2023-06-13 07:29:01 +00:00
|
|
|
truncate={true}
|
|
|
|
noSelect
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
>
|
|
|
|
{label}
|
2023-07-07 12:44:20 +00:00
|
|
|
</StyledLabel>
|
2023-06-13 07:29:01 +00:00
|
|
|
<IconButton
|
2023-07-07 11:18:23 +00:00
|
|
|
className={"selected-tag-removed " + classNameCloseButton}
|
2023-06-13 07:29:01 +00:00
|
|
|
iconName={CrossReactSvgUrl}
|
|
|
|
size={12}
|
|
|
|
onClick={onCloseClick}
|
|
|
|
isFill
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
/>
|
2019-12-03 13:18:49 +00:00
|
|
|
</StyledSelectedItem>
|
|
|
|
);
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-12-03 13:18:49 +00:00
|
|
|
|
|
|
|
SelectedItem.propTypes = {
|
2021-03-10 13:47:42 +00:00
|
|
|
/** Selected item text */
|
2023-07-05 09:16:04 +00:00
|
|
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
2023-06-13 07:29:01 +00:00
|
|
|
/** Sets the 'width: fit-content' property */
|
2019-12-03 13:18:49 +00:00
|
|
|
isInline: PropTypes.bool,
|
2023-06-13 07:29:01 +00:00
|
|
|
/** Sets a callback function that is triggered when the cross icon is clicked */
|
2019-12-03 13:18:49 +00:00
|
|
|
onClose: PropTypes.func.isRequired,
|
2023-06-13 07:29:01 +00:00
|
|
|
/** Sets a callback function that is triggered when the selected item is clicked */
|
|
|
|
onClick: PropTypes.func,
|
2023-04-17 12:18:34 +00:00
|
|
|
/** Sets the button to present a disabled state */
|
2019-12-03 13:18:49 +00:00
|
|
|
isDisabled: PropTypes.bool,
|
2021-03-10 13:47:42 +00:00
|
|
|
/** Accepts class */
|
2019-12-03 13:18:49 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-10 13:47:42 +00:00
|
|
|
/** Accepts id */
|
2019-12-03 13:18:49 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-10 13:47:42 +00:00
|
|
|
/** Accepts css style */
|
2020-10-16 13:16:01 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2023-06-13 07:29:01 +00:00
|
|
|
/** Accepts key to remove item */
|
|
|
|
propKey: PropTypes.string,
|
|
|
|
/** Accepts group key to remove item */
|
|
|
|
group: PropTypes.string,
|
2023-07-14 15:15:39 +00:00
|
|
|
/** Passes ref to component */
|
|
|
|
forwardedRef: PropTypes.object,
|
2019-12-03 13:18:49 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
SelectedItem.defaultProps = {
|
|
|
|
isInline: true,
|
2020-10-16 13:16:01 +00:00
|
|
|
isDisabled: false,
|
2019-12-03 13:18:49 +00:00
|
|
|
};
|
|
|
|
|
2023-06-13 07:29:01 +00:00
|
|
|
export default React.memo(SelectedItem);
|