orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
125 lines • 3.2 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
import Popover from "../../Popover";
import Icon from "../../Icon";
import Button from "../../Button";
import BaseSection, { AvatarLink, Item } from "../components/BaseSection";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const SideNavPinnedSection = _ref => {
let {
items,
isExpanded
} = _ref;
const renderPinnedItem = (item, isExpanded) => {
const {
avatar,
name,
link,
shape,
onUnpin
} = item;
return /*#__PURE__*/_jsx(Item, {
children: isExpanded ? /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(AvatarLink, {
avatar: avatar,
name: name,
link: link,
shape: shape,
showName: true
}), /*#__PURE__*/_jsx(Popover, {
text: "Unpin item",
direction: "right",
width: "fit-content",
tabIndex: "-1",
children: /*#__PURE__*/_jsx(Button, {
height: "20px",
width: "20px",
borderRadius: "20px",
variant: "borderGrey",
borderColor: "white",
onClick: () => onUnpin?.(item),
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "thumbtack"],
color: "greyDarkest",
size: "sm"
})
})
})]
}) : /*#__PURE__*/_jsx(Popover, {
text: name,
direction: "right",
width: "fit-content",
children: /*#__PURE__*/_jsx(AvatarLink, {
avatar: avatar,
name: name,
link: link,
shape: shape,
showName: false
})
})
}, name);
};
return /*#__PURE__*/_jsx(BaseSection, {
title: "Pinned",
items: items,
isExpanded: isExpanded,
renderItem: renderPinnedItem
});
};
SideNavPinnedSection.propTypes = {
items: PropTypes.arrayOf(PropTypes.shape({
avatar: PropTypes.string,
name: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
shape: PropTypes.string,
onUnpin: PropTypes.func
})),
isExpanded: PropTypes.bool
};
SideNavPinnedSection.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "SideNavPinnedSection",
"props": {
"items": {
"description": "",
"type": {
"name": "arrayOf",
"value": {
"name": "shape",
"value": {
"avatar": {
"name": "string",
"required": false
},
"name": {
"name": "string",
"required": true
},
"link": {
"name": "string",
"required": true
},
"shape": {
"name": "string",
"required": false
},
"onUnpin": {
"name": "func",
"required": false
}
}
}
},
"required": false
},
"isExpanded": {
"description": "",
"type": {
"name": "bool"
},
"required": false
}
}
};
export default SideNavPinnedSection;