2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2021-02-23 19:43:25 +00:00
|
|
|
import { ReactSVG } from "react-svg";
|
|
|
|
|
2021-02-10 11:32:42 +00:00
|
|
|
import { StyledDropdownItem, IconWrapper } from "./styled-drop-down-item";
|
2021-02-23 19:43:25 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const DropDownItem = (props) => {
|
2019-07-31 11:45:01 +00:00
|
|
|
//console.log("DropDownItem render");
|
2020-11-05 17:34:35 +00:00
|
|
|
const {
|
|
|
|
isSeparator,
|
|
|
|
label,
|
|
|
|
icon,
|
|
|
|
children,
|
|
|
|
disabled,
|
|
|
|
onClick,
|
|
|
|
className,
|
2022-01-24 14:32:05 +00:00
|
|
|
theme,
|
2022-06-30 08:25:20 +00:00
|
|
|
fillIcon,
|
2022-07-04 03:18:28 +00:00
|
|
|
isSubMenu,
|
|
|
|
isActive,
|
2022-07-04 04:23:51 +00:00
|
|
|
withoutIcon,
|
2022-07-05 10:15:57 +00:00
|
|
|
noHover,
|
2020-11-05 17:34:35 +00:00
|
|
|
} = props;
|
2021-02-23 19:43:25 +00:00
|
|
|
|
2020-06-25 15:11:34 +00:00
|
|
|
const onClickAction = (e) => {
|
|
|
|
onClick && !disabled && onClick(e);
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-09-06 13:50:37 +00:00
|
|
|
|
2019-07-31 11:45:01 +00:00
|
|
|
return (
|
2020-11-05 17:34:35 +00:00
|
|
|
<StyledDropdownItem
|
|
|
|
{...props}
|
2022-07-05 10:15:57 +00:00
|
|
|
noHover={noHover}
|
2020-11-05 17:34:35 +00:00
|
|
|
className={className}
|
|
|
|
onClick={onClickAction}
|
2021-02-10 11:32:42 +00:00
|
|
|
disabled={disabled}
|
2022-07-04 03:18:28 +00:00
|
|
|
isActive={isActive}
|
2020-11-05 17:34:35 +00:00
|
|
|
>
|
2020-10-16 13:16:01 +00:00
|
|
|
{icon && (
|
2022-01-27 13:54:58 +00:00
|
|
|
<IconWrapper>
|
2022-07-05 09:40:50 +00:00
|
|
|
{!withoutIcon && (
|
|
|
|
<ReactSVG
|
|
|
|
src={icon}
|
|
|
|
className={fillIcon ? "drop-down-item_icon" : ""}
|
|
|
|
/>
|
|
|
|
)}
|
2019-07-31 11:45:01 +00:00
|
|
|
</IconWrapper>
|
2020-10-16 13:16:01 +00:00
|
|
|
)}
|
2022-07-04 04:08:54 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
{isSeparator ? "\u00A0" : label ? label : children && children}
|
2022-07-04 03:18:28 +00:00
|
|
|
|
|
|
|
{isSubMenu && (
|
|
|
|
<IconWrapper className="submenu-arrow">
|
|
|
|
<ReactSVG
|
|
|
|
src="/static/images/right.arrow.react.svg"
|
|
|
|
className="drop-down-item_icon"
|
|
|
|
/>
|
|
|
|
</IconWrapper>
|
|
|
|
)}
|
2019-07-31 11:45:01 +00:00
|
|
|
</StyledDropdownItem>
|
|
|
|
);
|
2019-08-08 10:47:12 +00:00
|
|
|
};
|
2019-06-24 13:18:47 +00:00
|
|
|
|
|
|
|
DropDownItem.propTypes = {
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Tells when the dropdown item should display like separator */
|
2019-07-31 11:45:01 +00:00
|
|
|
isSeparator: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Tells when the dropdown item should display like header */
|
2019-07-31 11:45:01 +00:00
|
|
|
isHeader: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts tab-index */
|
2019-07-31 11:45:01 +00:00
|
|
|
tabIndex: PropTypes.number,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Dropdown item text */
|
2019-07-31 11:45:01 +00:00
|
|
|
label: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Tells when the dropdown item should display like disabled */
|
2019-07-31 11:45:01 +00:00
|
|
|
disabled: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Dropdown item icon */
|
2019-09-06 13:50:37 +00:00
|
|
|
icon: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Disable default style hover effect */
|
2019-09-09 13:56:54 +00:00
|
|
|
noHover: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** What the dropdown item will trigger when clicked */
|
2019-09-09 13:56:54 +00:00
|
|
|
onClick: PropTypes.func,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Children elements */
|
2019-11-27 13:39:21 +00:00
|
|
|
children: PropTypes.any,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts class */
|
2019-11-27 13:39:21 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts id */
|
2019-11-27 13:39:21 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts css style */
|
2020-09-15 06:02:24 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts css text-overflow */
|
2020-10-16 13:16:01 +00:00
|
|
|
textOverflow: PropTypes.bool,
|
2022-06-30 08:25:20 +00:00
|
|
|
fillIcon: PropTypes.bool,
|
2022-07-04 03:18:28 +00:00
|
|
|
isSubMenu: PropTypes.bool,
|
|
|
|
isActive: PropTypes.bool,
|
2022-07-04 04:23:51 +00:00
|
|
|
withoutIcon: PropTypes.bool,
|
2019-06-24 13:18:47 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
DropDownItem.defaultProps = {
|
2019-07-31 11:45:01 +00:00
|
|
|
isSeparator: false,
|
|
|
|
isHeader: false,
|
|
|
|
tabIndex: -1,
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "",
|
2019-09-06 13:50:37 +00:00
|
|
|
disabled: false,
|
2020-09-15 06:02:24 +00:00
|
|
|
noHover: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
textOverflow: false,
|
2022-06-30 08:25:20 +00:00
|
|
|
fillIcon: true,
|
2022-07-04 04:23:51 +00:00
|
|
|
isSubMenu: false,
|
|
|
|
isActive: false,
|
|
|
|
withoutIcon: false,
|
2019-06-24 13:18:47 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
export default DropDownItem;
|