56 lines
2.2 KiB
TypeScript
56 lines
2.2 KiB
TypeScript
import * as React from "react";
|
|
import {ReactComponentBase} from "tc-shared/ui/react-elements/ReactComponentBase";
|
|
import {IconRenderer, RemoteIconRenderer} from "tc-shared/ui/react-elements/Icon";
|
|
import {getIconManager, RemoteIconInfo} from "tc-shared/file/Icons";
|
|
const cssStyle = require("./Button.scss");
|
|
|
|
export interface DropdownEntryProperties {
|
|
icon?: string | RemoteIconInfo;
|
|
text: JSX.Element | string;
|
|
|
|
onClick?: (event: React.MouseEvent) => void;
|
|
onAuxClick?: (event: React.MouseEvent) => void;
|
|
onContextMenu?: (event: React.MouseEvent) => void;
|
|
|
|
children?: React.ReactElement<DropdownEntry>[]
|
|
}
|
|
|
|
const LocalIconRenderer = (props: { icon?: string | RemoteIconInfo }) => {
|
|
if(!props.icon || typeof props.icon === "string") {
|
|
return <IconRenderer icon={props.icon as any} key={"fixed-icon"} />
|
|
} else {
|
|
return <RemoteIconRenderer icon={getIconManager().resolveIcon(props.icon.iconId, props.icon.serverUniqueId)} key={"remote-icon"} />;
|
|
}
|
|
}
|
|
|
|
export class DropdownEntry extends ReactComponentBase<DropdownEntryProperties, {}> {
|
|
protected defaultState() { return {}; }
|
|
|
|
render() {
|
|
if(this.props.children) {
|
|
return (
|
|
<div className={cssStyle.dropdownEntry} onClick={this.props.onClick} onAuxClick={this.props.onAuxClick} onContextMenu={this.props.onContextMenu}>
|
|
<LocalIconRenderer icon={this.props.icon} />
|
|
<a className={cssStyle.entryName}>{this.props.text}</a>
|
|
<div className={cssStyle.arrow + " " + cssStyle.right} />
|
|
<DropdownContainer>
|
|
{this.props.children}
|
|
</DropdownContainer>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className={cssStyle.dropdownEntry} onClick={this.props.onClick} onAuxClick={this.props.onAuxClick} onContextMenu={this.props.onContextMenu}>
|
|
<LocalIconRenderer icon={this.props.icon} />
|
|
<a className={cssStyle.entryName}>{this.props.text}</a>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
export const DropdownContainer = (props: { children: any }) => (
|
|
<div className={cssStyle.dropdown}>
|
|
{props.children}
|
|
</div>
|
|
); |