Ryan Di
47cbb5b6fb
* refactor device to editor interface and derive styles panel * allow host app to control form factor and ui mode * add editor interface event listener * put new props inside UIOptions * refactor: move related apis into one file * expose getFormFactor * privatize the setting of desktop mode and fix snapshots * refactor and fix test * remove unimplemented code * export getFormFactor() * replace `getFormFactor` with `getEditorInterface` * remove dead & useless * comment * fix ts --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
32 lines
766 B
TypeScript
32 lines
766 B
TypeScript
import { useEditorInterface } from "../App";
|
|
|
|
import { Ellipsify } from "../Ellipsify";
|
|
|
|
import type { JSX } from "react";
|
|
|
|
const MenuItemContent = ({
|
|
textStyle,
|
|
icon,
|
|
shortcut,
|
|
children,
|
|
}: {
|
|
icon?: JSX.Element;
|
|
shortcut?: string;
|
|
textStyle?: React.CSSProperties;
|
|
children: React.ReactNode;
|
|
}) => {
|
|
const editorInterface = useEditorInterface();
|
|
return (
|
|
<>
|
|
{icon && <div className="dropdown-menu-item__icon">{icon}</div>}
|
|
<div style={textStyle} className="dropdown-menu-item__text">
|
|
<Ellipsify>{children}</Ellipsify>
|
|
</div>
|
|
{shortcut && editorInterface.formFactor !== "phone" && (
|
|
<div className="dropdown-menu-item__shortcut">{shortcut}</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
export default MenuItemContent;
|