2022-03-28 23:17:34 +08:00
16 changed files with 130 additions and 53 deletions
--- a/source/Behavior/Behavior.ts
+++ b/source/Behavior/Behavior.ts
@ -1,7 +1,7 @@
 import { BehaviorRecorder, IAnyBehaviorRecorder } from "@Model/Behavior";
 import { Template } from "./Template";

-const AllBehaviors: IAnyBehaviorRecorder[] = new Array(20).fill(0).map((_, i) => {
+const AllBehaviors: IAnyBehaviorRecorder[] = new Array(4).fill(0).map((_, i) => {
    let behavior = new BehaviorRecorder(Template);
    behavior.behaviorId = behavior.behaviorId + i;
    return behavior;
--- a/source/Component/BehaviorList/BehaviorList.scss
+++ b/source/Component/BehaviorList/BehaviorList.scss
@ -10,6 +10,7 @@ div.behavior-list {
 	div.behavior-item {
 		margin: 5px;
 		height: $behavior-item-height;
+		user-select: none;
 		border-radius: 3px;
 		cursor: pointer;
 		display: flex;
--- a/source/Component/BehaviorPopup/BehaviorPopup.scss
+++ b/source/Component/BehaviorPopup/BehaviorPopup.scss
@ -5,6 +5,10 @@ div.behavior-popup {
 	height: 100%;
 }

+span.behavior-popup-select-counter {
+	opacity: .75;
+}
+
 div.behavior-popup-search-box {
 	padding: 10px 0 10px 10px;
 	width: calc(100% - 10px);
--- a/source/Component/BehaviorPopup/BehaviorPopup.tsx
+++ b/source/Component/BehaviorPopup/BehaviorPopup.tsx
@ -62,28 +62,7 @@ class BehaviorPopupComponent extends Component<
 		</div>;
 	}

-	public render(): ReactNode {
-		return <ConfirmContent
-			className="behavior-popup"
-			actions={[{
-				i18nKey: "Popup.Add.Behavior.Action.Add"
-			}]}
-			header={this.renderHeader}
-			headerHeight={46}
-		>
-			<Message i18nKey="ZH_CN" isTitle first/>
-			<BehaviorList
-				focusBehaviors={Array.from(this.state.focusBehavior)}
-				behaviors={AllBehaviors}
-				click={(behavior) => {
-					if (this.state.focusBehavior.has(behavior)) {
-						this.state.focusBehavior.delete(behavior);
-					} else {
-						this.state.focusBehavior.add(behavior);
-					}
-					this.forceUpdate();
-				}}
-				action={(behavior)=>{
+	private showBehaviorInfo = (behavior: IRenderBehavior) => {
 		if (this.props.status) {
 			const status = this.props.status;
 			status.popup.showPopup(ConfirmPopup, {
@ -95,6 +74,41 @@ class BehaviorPopupComponent extends Component<
 				yesI18n: "Popup.Behavior.Info.Confirm",
 			})
 		}
+	}
+
+	private renderActionBar = () => {
+		return <Localization
+			className="behavior-popup-select-counter"
+			i18nKey="Popup.Add.Behavior.Select.Counter"
+			options={{
+				count: this.state.focusBehavior.size.toString()
+			}}
+		/>
+	}
+
+	public render(): ReactNode {
+		return <ConfirmContent
+			className="behavior-popup"
+			actions={[{
+				i18nKey: "Popup.Add.Behavior.Action.Add",
+				disable: this.state.focusBehavior.size <= 0
+			}]}
+			header={this.renderHeader}
+			customFooter={this.renderActionBar}
+			headerHeight={46}
+		>
+			<Message i18nKey="ZH_CN" isTitle first/>
+			<BehaviorList
+				focusBehaviors={Array.from(this.state.focusBehavior)}
+				behaviors={AllBehaviors}
+				action={this.showBehaviorInfo}
+				click={(behavior) => {
+					if (this.state.focusBehavior.has(behavior)) {
+						this.state.focusBehavior.delete(behavior);
+					} else {
+						this.state.focusBehavior.add(behavior);
+					}
+					this.forceUpdate();
 				}}
 			/>
 		</ConfirmContent>
--- a/source/Component/ConfirmPopup/ConfirmPopup.scss
+++ b/source/Component/ConfirmPopup/ConfirmPopup.scss
@ -47,7 +47,17 @@ div.confirm-root {
 		justify-content: flex-end;
 		align-items: center;

+		div.action-right-view {
+			width: 100%;
+			height: 100%;
+			flex-shrink: 1;
+			display: flex;
+			align-items: center;
+			padding-left: 10px;
+		}
+
 		div.action-button {
+			flex-shrink: 0;
 			height: 26px;
 			padding: 0 10px;
 			border-radius: 3px;
--- a/source/Component/ConfirmPopup/ConfirmPopup.tsx
+++ b/source/Component/ConfirmPopup/ConfirmPopup.tsx
@ -68,6 +68,7 @@ interface IConfirmContentProps {
 	hidePadding?: boolean;
 	className?: string;
 	actions: IActionButtonProps[];
+	customFooter?: () => ReactNode;
 	header?: () => ReactNode;
 	headerHeight?: number;
 }
@ -154,10 +155,14 @@ class ConfirmContent extends Component<IConfirmContentProps> {
 			</div>
 			
 			<div className="action-view">
+				<div className="action-right-view">
+					{this.props.customFooter ? this.props.customFooter() : null}
+				</div>
 				{
+					this.props.actions ? 
 						this.props.actions.map((prop, index) => {
 							return this.renderActionButton(prop, index);
-					})
+						}) : null
 				}
 			</div>
 		</Theme>;
--- a/source/Component/Localization/Localization.tsx
+++ b/source/Component/Localization/Localization.tsx
@ -9,7 +9,7 @@ const LanguageDataBase = {
    EN_US, ZH_CN
 }

-type AllI18nKeys = keyof typeof EN_US;
+type AllI18nKeys = (keyof typeof EN_US) | string;

 interface ILocalizationProps {
    className?: string;
@ -17,14 +17,17 @@ interface ILocalizationProps {
    options?: Record<string, string>;
 }

-function I18N(language: Language | IMixinSettingProps, key: keyof typeof EN_US, values?: Record<string, string>) {
+function I18N(language: Language | IMixinSettingProps, key: AllI18nKeys, values?: Record<string, string>) {
    let lang: Language;
    if (typeof language === "string") {
        lang = language;
    } else {
        lang = language.setting?.language ?? "EN_US";
    }
-    let i18nValue = LanguageDataBase[lang][key];
+    let languageDataBase = LanguageDataBase[lang];
+    if (!languageDataBase) languageDataBase = LanguageDataBase["EN_US"];
+    let i18nValue = languageDataBase[key as keyof typeof EN_US];
+    if (!i18nValue) i18nValue = key;
    if (values) {
        for (let valueKey in values) {
            i18nValue = i18nValue.replaceAll(new RegExp(`\\{\\s*${valueKey}\\s*\\}`, "g"), values[valueKey]);
--- a/source/Component/ObjectPicker/ObjectPicker.scss
+++ b/source/Component/ObjectPicker/ObjectPicker.scss
@ -1,4 +1,5 @@
@import "../Theme/Theme.scss";
+@import "../PickerList/RainbowBg.scss";

 $line-min-height: 24px;

--- a/source/Component/ObjectPicker/ObjectPicker.tsx
+++ b/source/Component/ObjectPicker/ObjectPicker.tsx
@ -97,20 +97,8 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb

    public render(): ReactNode {

-        let disPlayInfo: IDisplayInfo;
-        let isDelete: boolean = false;
-
-        if (this.props.value) {
-            disPlayInfo = getObjectDisplayInfo(this.props.value);
-            isDelete = this.props.value.isDeleted();
-        } else {
-            disPlayInfo = {
-                name: "Input.Error.Select",
-                icon: "Label",
-                color: "transparent",
-                needI18n: true
-            }
-        }
+        let disPlayInfo: IDisplayInfo = getObjectDisplayInfo(this.props.value);
+        let isDelete: boolean = !!this.props.value?.isDeleted();

        return <>
            <TextField
@ -129,7 +117,11 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
                }}
            >
                <div
-                    className="list-color"
+                    className={
+                        "list-color" + (
+                            disPlayInfo.allLabel ? " rainbow-back-ground-color" : ""
+                        )
+                    }
                    style={{
                        backgroundColor: disPlayInfo.color
                    }}
@ -145,7 +137,7 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
                    }}
                >
                    {   
-                        disPlayInfo.needI18n ? 
+                        disPlayInfo.internal ? 
                            <Localization i18nKey={disPlayInfo.name as any}/> :
                            <span>{disPlayInfo.name}</span>
                    }
--- a/source/Component/PickerList/PickerList.scss
+++ b/source/Component/PickerList/PickerList.scss
@ -1,3 +1,5 @@
+@import "./RainbowBg.scss";
+
 div.picker-list-root {
 	min-width: 200px;
 	height: 100%;
--- a/source/Component/PickerList/PickerList.tsx
+++ b/source/Component/PickerList/PickerList.tsx
@ -12,7 +12,8 @@ interface IDisplayInfo {
    color: string;
    icon: string;
    name: string;
-    needI18n?: boolean;
+    internal: boolean;
+    allLabel: boolean;
 };

 interface IDisplayItem {
@ -21,12 +22,23 @@ interface IDisplayItem {
 	mark?: boolean;
 }

-function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {
+function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {

-	let color: number[] = [];
+    if (!item) {
+        return {
+            color: "transparent",
+            icon: "Label",
+            name: "Input.Error.Select",
+            internal: true,
+            allLabel: false
+        }
+    }
+
+	let color: number[] | string = [];
 	let icon: string = "tag";
 	let name: string = "";
-    let needI18n: boolean = false;
+    let internal: boolean = false;
+    let allLabel: boolean = false;

 	if (item instanceof Range) {
 		icon = "CubeShape"
@ -35,6 +47,7 @@ function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {
 		icon = "WebAppBuilderFragment"
 	}
 	if (item instanceof CtrlObject) {
+        color = [];
 		color[0] = Math.round(item.color[0] * 255);
 		color[1] = Math.round(item.color[1] * 255);
 		color[2] = Math.round(item.color[2] * 255);
@ -43,7 +56,9 @@ function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {
 	if (item instanceof Label) {

 		if (item.isBuildIn) {
-            needI18n = true;
+            internal = true;
+            allLabel = true;
+            color = "transparent";
            if (item.id === "AllRange") {
                icon = "ProductList";
                name = "Build.In.Label.Name.All.Range";
@ -60,11 +75,16 @@ function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {
        }
 	}

+    if (Array.isArray(color)) {
+        color = `rgb(${color[0]},${color[1]},${color[2]})`;
+    }
+
 	return {
-		color: needI18n ? "transparent" : `rgb(${color[0]},${color[1]},${color[2]})`,
+		color: color,
 		icon: icon,
 		name: name,
-        needI18n: needI18n
+        internal: internal,
+        allLabel: allLabel
 	}
 }

@ -92,7 +112,11 @@ class PickerList extends Component<IPickerListProps> {
 				}
 			}}
 		>
-			<div className="list-item-color"
+			<div className={
+                "list-item-color" + (
+                    displayInfo.allLabel ? " rainbow-back-ground-color" : ""
+                )
+            }
 				style={{
 					backgroundColor: displayInfo.color
 				}}
@ -102,8 +126,8 @@ class PickerList extends Component<IPickerListProps> {
 			</div>
 			<div className="list-item-name">
 				{
-                    displayInfo.needI18n ? 
-                        <Localization i18nKey={displayInfo.name as any}/> : 
+                    displayInfo.internal ? 
+                        <Localization i18nKey={displayInfo.name}/> :
                        displayInfo.name
                }
 			</div>
--- a/source/Component/PickerList/RainbowBg.scss
+++ b/source/Component/PickerList/RainbowBg.scss
@ -0,0 +1,13 @@
+div.rainbow-back-ground-color {
+    background-image: linear-gradient(
+        to top,
+        orangered,
+        orange,
+        gold,
+        lightgreen,
+        cyan,
+        dodgerblue,
+        mediumpurple,
+        hotpink,
+        orangered);
+}
--- a/source/Component/Popup/Popup.tsx
+++ b/source/Component/Popup/Popup.tsx
@ -78,9 +78,6 @@ class Popup extends Component<IPopupProps & IMixinStatusProps & IMixinSettingPro
                    popup.isOnMouseDown = true;
                    popup.lastMouseLeft = e.clientX;
                    popup.lastMouseTop = e.clientY;
-                    if (this.props.status) {
-                        this.props.status.popup.topping(popup);
-                    }
                }}
            >
                {popup.onRenderHeader()}
@ -257,6 +254,11 @@ class Popup extends Component<IPopupProps & IMixinStatusProps & IMixinSettingPro
                className: "popup-layer" + (hasAnimate ? " show-scale" : ""),
                backgroundLevel: BackgroundLevel.Level4,
            }, this.props.setting).join(" ")}
+            onClick={() => {
+                if (this.props.status) {
+                    this.props.status.popup.topping(popup);
+                }
+            }}
        >
            {this.renderDragLine(ResizeDragDirection.top, popup)}
            <div className="popup-layer-container">
--- a/source/Context/Popups.ts
+++ b/source/Context/Popups.ts
@ -163,8 +163,12 @@ class PopupController extends Emitter<IPopupControllerEvent> {
            newPopup = new (popup ?? Popup)(props);
        }
        newPopup.init(this, `P-${this.idIndex ++}`);
+
+        // 延迟渲染防止焦点冲突
+        setTimeout(() => {
            this.popups.push(newPopup);
            this.sortPopup();
+        });
        return newPopup;
    }

--- a/source/Localization/EN-US.ts
+++ b/source/Localization/EN-US.ts
@ -54,6 +54,7 @@ const EN_US = {
    "Popup.Setting.Title": "Preferences setting",
    "Popup.Add.Behavior.Title": "Add behavior",
    "Popup.Add.Behavior.Action.Add": "Add all select behavior",
+    "Popup.Add.Behavior.Select.Counter": "Selected {count} behavior",
    "Popup.Behavior.Info.Title": "Behavior details: {behavior}",
    "Popup.Behavior.Info.Confirm": "OK, I know it",
    "Build.In.Label.Name.All.Group": "All group",
--- a/source/Localization/ZH-CN.ts
+++ b/source/Localization/ZH-CN.ts
@ -54,6 +54,7 @@ const ZH_CN = {
    "Popup.Setting.Title": "首选项设置",
    "Popup.Add.Behavior.Title": "添加行为",
    "Popup.Add.Behavior.Action.Add": "添加全部选中行为",
+    "Popup.Add.Behavior.Select.Counter": "已选择 {count} 个行为",
    "Popup.Behavior.Info.Title": "行为详情: {behavior}",
    "Popup.Behavior.Info.Confirm": "好的, 我知道了",
    "Build.In.Label.Name.All.Group": "全部群",