110 lines
2.8 KiB
JavaScript
110 lines
2.8 KiB
JavaScript
import React, { useState, useEffect, useCallback } from "react";
|
|
import PropTypes from "prop-types";
|
|
import DropDownItem from "../drop-down-item/index.js";
|
|
import Badge from "../badge/index.js";
|
|
|
|
import {
|
|
StyledItemTitle,
|
|
StyledItemContent,
|
|
StyledItemIcon,
|
|
StyledItemDescription,
|
|
StyledItem,
|
|
StyledWrapper,
|
|
} from "./styled-accessright.js";
|
|
|
|
const AccessRightSelect = ({
|
|
accessOptions,
|
|
onSelect,
|
|
advancedOptions,
|
|
selectedOption,
|
|
...props
|
|
}) => {
|
|
const [currentItem, setCurrentItem] = useState(selectedOption);
|
|
|
|
useEffect(() => {
|
|
setCurrentItem(selectedOption);
|
|
}, [selectedOption]);
|
|
|
|
const onSelectCurrentItem = useCallback(
|
|
(e) => {
|
|
const key = e.currentTarget.dataset.key;
|
|
const item = accessOptions.find((el) => {
|
|
return el.key === key;
|
|
});
|
|
|
|
if (item) {
|
|
setCurrentItem(item);
|
|
onSelect && onSelect(item);
|
|
}
|
|
},
|
|
[accessOptions, onSelect]
|
|
);
|
|
|
|
const formatToAccessRightItem = (data) => {
|
|
const items = data.map((item) => {
|
|
return item.isSeparator ? (
|
|
<DropDownItem key={item.key} isSeparator />
|
|
) : (
|
|
<DropDownItem
|
|
key={item.key}
|
|
data-key={item.key}
|
|
onClick={onSelectCurrentItem}
|
|
>
|
|
<StyledItem>
|
|
{item.icon && <StyledItemIcon src={item.icon} />}
|
|
<StyledItemContent>
|
|
<StyledItemTitle>
|
|
{item.label}
|
|
{item.quota && (
|
|
<Badge
|
|
label={item.quota}
|
|
backgroundColor={item.color}
|
|
fontSize="9px"
|
|
isPaidBadge
|
|
/>
|
|
)}
|
|
</StyledItemTitle>
|
|
<StyledItemDescription>{item.description}</StyledItemDescription>
|
|
</StyledItemContent>
|
|
</StyledItem>
|
|
</DropDownItem>
|
|
);
|
|
});
|
|
|
|
return <>{items}</>;
|
|
};
|
|
|
|
const formattedOptions = !!advancedOptions
|
|
? advancedOptions
|
|
: formatToAccessRightItem(accessOptions);
|
|
|
|
return (
|
|
<StyledWrapper
|
|
advancedOptions={formattedOptions}
|
|
onSelect={onSelectCurrentItem}
|
|
options={[]}
|
|
selectedOption={{
|
|
icon: currentItem.icon,
|
|
default: true,
|
|
key: currentItem?.key,
|
|
label: currentItem?.label,
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
AccessRightSelect.propTypes = {
|
|
/** Will be triggered whenever an AccessRightSelect is selected option */
|
|
onSelect: PropTypes.func,
|
|
/** List of advanced options */
|
|
advancedOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
|
/** List of access options */
|
|
accessOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
|
|
.isRequired,
|
|
/** The option that is selected by default */
|
|
selectedOption: PropTypes.object,
|
|
};
|
|
|
|
export default React.memo(AccessRightSelect);
|