aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-09-08 18:10:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update dropdown component

Browse Source
This commit is contained in:
Steven
2022-09-12 21:17:23 +08:00
parent 840659e2b2
commit 0ba7a9e519
6 changed files with 312 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/components/common/Dropdown.tsx
View File

@@ -3,13 +3,14 @@ import useToggle from "../../hooks/useToggle";
import Icon from "../Icon";
import "../../less/common/dropdown.less";
interface DropdownProps {
children?: ReactNode;
interface Props {
trigger?: ReactNode;
actions?: ReactNode;
className?: string;
}
const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
const { children, className } = props;
const Dropdown: React.FC<Props> = (props: Props) => {
const { trigger, actions, className } = props;
const [dropdownStatus, toggleDropdownStatus] = useToggle(false);
const dropdownWrapperRef = useRef<HTMLDivElement>(null);
@@ -29,10 +30,14 @@ const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
return (
<div ref={dropdownWrapperRef} className={`dropdown-wrapper ${className ?? ""}`} onClick={() => toggleDropdownStatus()}>
<span className="trigger-button">
<Icon.MoreHorizontal className="icon-img" />
</span>
<div className={`action-buttons-container ${dropdownStatus ? "" : "!hidden"}`}>{children}</div>
{trigger ? (
trigger
) : (
<span className="trigger-button">
<Icon.MoreHorizontal className="icon-img" />
</span>
)}
<div className={`action-buttons-container ${dropdownStatus ? "" : "!hidden"}`}>{actions}</div>
</div>
);
};