MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add file download function

Browse Source
This commit is contained in:
MrKBear
2022-04-23 23:28:11 +08:00
parent 980d8afa3c
commit 03f0b9fd16
10 changed files with 146 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/Component/CommandBar/CommandBar.tsx
+71 -41
View File
@@ -1,22 +1,68 @@
import { Component, ReactNode } from "react";
import { DirectionalHint, IconButton } from "@fluentui/react";
import { useSetting, IMixinSettingProps } from "@Context/Setting";
import { useSetting, useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
import { LocalizationTooltipHost } from "@Component/Localization/LocalizationTooltipHost";
import { AllI18nKeys } from "@Component/Localization/Localization";
import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
import { SettingPopup } from "@Component/SettingPopup/SettingPopup";
import { BehaviorPopup } from "@Component/BehaviorPopup/BehaviorPopup";
import { MouseMod } from "@GLRender/ClassicRenderer";
import * as download from "downloadjs";
import "./CommandBar.scss";
interface ICommandBarProps {
width: number;
const COMMAND_BAR_WIDTH = 45;
function getRenderButton(param: {
i18NKey: AllI18nKeys;
iconName?: string;
click?: () => void;
active?: boolean;
}): ReactNode {
return <LocalizationTooltipHost
i18nKey={param.i18NKey}
directionalHint={DirectionalHint.rightCenter}
>
<IconButton
style={{ height: COMMAND_BAR_WIDTH }}
iconProps={{ iconName: param.iconName }}
onClick={ param.click }
className={"command-button on-end" + (param.active ? " active" : "")}
/>
</LocalizationTooltipHost>
}
@useSettingWithEvent("language")
@useStatusWithEvent()
class SaveCommandView extends Component<IMixinStatusProps & IMixinSettingProps> {
public render(): ReactNode {
return getRenderButton({
iconName: "Save",
i18NKey: "Command.Bar.Save.Info",
click: () => {
let fileName: string = "";
let isNewFile: boolean = true;
let isSaved: boolean = false;
if (this.props.status) {
isNewFile = this.props.status.archive.isNewFile;
fileName = this.props.status.archive.fileName ?? "";
isSaved = this.props.status.archive.isSaved;
}
const file = this.props.status?.archive.save(this.props.status.model) ?? "";
fileName = isNewFile ? I18N(this.props, "Header.Bar.New.File.Name") : fileName;
download(file, fileName, "text/json");
}
})
}
}
@useSetting
@useStatusWithEvent("mouseModChange", "actuatorStartChange")
class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixinStatusProps> {
class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps> {
render(): ReactNode {
@@ -25,7 +71,7 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
return <Theme
className="command-bar"
backgroundLevel={BackgroundLevel.Level2}
style={{ width: this.props.width }}
style={{ width: COMMAND_BAR_WIDTH }}
onClick={() => {
if (this.props.setting) {
this.props.setting.layout.focus("");
@@ -33,62 +79,65 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
}}
>
<div>
{this.getRenderButton({
iconName: "Save",
i18NKey: "Command.Bar.Save.Info",
click: () => {
this.props.status?.archive.save(this.props.status.model);
}
})}
{this.getRenderButton({
<SaveCommandView/>
{getRenderButton({
iconName: this.props.status?.actuator.start() ? "Pause" : "Play",
i18NKey: "Command.Bar.Play.Info",
click: () => this.props.status ? this.props.status.actuator.start(
!this.props.status.actuator.start()
) : undefined
})}
{this.getRenderButton({
{getRenderButton({
iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info",
active: mouseMod === MouseMod.Drag,
click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined
})}
{this.getRenderButton({
{getRenderButton({
iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info",
active: mouseMod === MouseMod.click,
click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined
})}
{this.getRenderButton({
{getRenderButton({
iconName: "WebAppBuilderFragmentCreate",
i18NKey: "Command.Bar.Add.Group.Info",
click: () => {
this.props.status ? this.props.status.newGroup() : undefined;
}
})}
{this.getRenderButton({
{getRenderButton({
iconName: "ProductVariant",
i18NKey: "Command.Bar.Add.Range.Info",
click: () => {
this.props.status ? this.props.status.newRange() : undefined;
}
})}
{this.getRenderButton({
{getRenderButton({
iconName: "Running",
i18NKey: "Command.Bar.Add.Behavior.Info",
click: () => {
this.props.status?.popup.showPopup(BehaviorPopup, {});
}
})}
{this.getRenderButton({
{getRenderButton({
iconName: "Tag",
i18NKey: "Command.Bar.Add.Tag.Info",
click: () => {
this.props.status ? this.props.status.newLabel() : undefined;
}
})}
{this.getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
{getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
</div>
<div>
{this.getRenderButton({
{getRenderButton({
iconName: "Settings",
i18NKey: "Command.Bar.Setting.Info",
click: () => {
@@ -98,25 +147,6 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
</div>
</Theme>
}
private getRenderButton(param: {
i18NKey: AllI18nKeys;
iconName?: string;
click?: () => void;
active?: boolean;
}): ReactNode {
return <LocalizationTooltipHost
i18nKey={param.i18NKey}
directionalHint={DirectionalHint.rightCenter}
>
<IconButton
style={{ height: this.props.width }}
iconProps={{ iconName: param.iconName }}
onClick={ param.click }
className={"command-button on-end" + (param.active ? " active" : "")}
/>
</LocalizationTooltipHost>
}
}
export { CommandBar };