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

Detach separates the combolist from the pickerlist

Browse Source
This commit is contained in:
MrKBear 2022-04-08 20:40:07 +08:00
parent 8cc8819cd3
commit cb2501f1f0
8 changed files with 99 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/Input/BehaviorPicker/BehaviorPicker.tsx
View File

@ -145,10 +145,10 @@ class BehaviorPicker extends Component<IBehaviorPickerProps & IMixinSettingProps
private renderPickerList(): ReactNode {
return <PickerList
objectList={this.getAllData()}
item={this.getAllData()}
noData="Behavior.Picker.Add.Nodata"
target={this.clickLineRef}
clickObjectItems={((item) => {
click={((item) => {
if (item instanceof Behavior && this.props.add) {
this.props.add(item);
}

16
source/Input/ComboInput/ComboInput.tsx
View File

@ -1,6 +1,6 @@
import { Component, createRef, ReactNode } from "react";
import { Icon } from "@fluentui/react";
import { PickerList, IDisplayItem } from "@Input/PickerList/PickerList";
import { ComboList, IDisplayItem } from "@Input/ComboList/ComboList";
import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
import { Localization } from "@Component/Localization/Localization";
import "./ComboInput.scss";
@ -26,13 +26,11 @@ class ComboInput extends Component<IComboInputProps, IComboInputState> {
private pickerTarget = createRef<HTMLDivElement>();
private renderPicker() {
return <PickerList
return <ComboList
target={this.pickerTarget}
displayItems={(this.props.allOption ?? []).map((item) => {
return item.key === this.props.value?.key ?
{...item, mark: true} : item;
})}
clickDisplayItems={((item) => {
item={this.props.allOption ?? []}
focus={this.props.value}
click={((item) => {
if (this.props.valueChange) {
this.props.valueChange(item);
}
@ -64,8 +62,8 @@ class ComboInput extends Component<IComboInputProps, IComboInputState> {
<div className="value-view">
{
this.props.value ?
<Localization i18nKey={this.props.value.nameKey}/> :
null
<Localization i18nKey={this.props.value.i18n} options={this.props.value.i18nOption}/> :
null
}
</div>
<div className="list-button">

1
source/Input/ComboList/ComboList.scss Normal file
View File

@ -0,0 +1 @@
@import "../PickerList/PickerList.scss";

71
source/Input/ComboList/ComboList.tsx Normal file
View File

@ -0,0 +1,71 @@
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
import { Callout, DirectionalHint, Icon } from "@fluentui/react";
import { Component, ReactNode, RefObject } from "react";
import "./ComboList.scss";
interface IDisplayItem {
i18nOption?: Record<string, string>;
i18n: AllI18nKeys;
key: string;
}
interface IComboListProps {
target?: RefObject<any>;
item: IDisplayItem[];
focus?: IDisplayItem;
noData?: AllI18nKeys;
dismiss?: () => any;
click?: (item: IDisplayItem) => any;
}
class ComboList extends Component<IComboListProps> {
private renderString(item: IDisplayItem) {
const isFocus = item.key === this.props.focus?.key;
return <div
className="picker-list-item"
key={item.key}
onClick={() => {
if (this.props.click) {
this.props.click(item)
}
}}
>
<div className="list-item-icon">
<Icon
iconName="CheckMark"
style={{
display: isFocus ? "block" : "none"
}}
/>
</div>
<div className="list-item-name">
<Localization i18nKey={item.i18n} options={item.i18nOption}/>
</div>
</div>;
}
public render(): ReactNode {
return <Callout
onDismiss={this.props.dismiss}
target={this.props.target}
directionalHint={DirectionalHint.topCenter}
>
<div className="picker-list-root">
{ this.props.item.map((item) => this.renderString(item)) }
{
this.props.item.length <= 0 ?
<Localization
className="picker-list-nodata"
i18nKey={this.props.noData ?? "Common.No.Data"}
/>
: null
}
</div>
</Callout>
}
}
export { ComboList, IDisplayItem }

4
source/Input/LabelPicker/LabelPicker.tsx
View File

@ -48,13 +48,13 @@ class LabelPicker extends Component<ILabelPickerProps & IMixinStatusProps, ILabe
private renderPicker() {
return <PickerList
noData="Common.Attr.Key.Label.Picker.Nodata"
objectList={this.getOtherLabel()}
item={this.getOtherLabel()}
dismiss={() => {
this.setState({
isPickerVisible: false
});
}}
clickObjectItems={(label) => {
click={(label) => {
if (label instanceof Label && this.props.labelAdd) {
this.props.labelAdd(label)
}

8
source/Input/ObjectPicker/ObjectPicker.tsx
View File

@ -6,7 +6,7 @@ import { Range } from "@Model/Range";
import { CtrlObject } from "@Model/CtrlObject";
import { Behavior } from "@Model/Behavior";
import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
import { PickerList, IDisplayItem, getObjectDisplayInfo, IDisplayInfo } from "@Input/PickerList/PickerList";
import { PickerList, getObjectDisplayInfo, IDisplayInfo } from "@Input/PickerList/PickerList";
import { Localization } from "@Component/Localization/Localization";
import { Icon } from "@fluentui/react";
import "./ObjectPicker.scss";
@ -79,8 +79,8 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
return <PickerList
noData="Object.Picker.List.No.Data"
target={this.pickerTarget}
objectList={this.getAllOption()}
clickObjectItems={((item) => {
item={this.getAllOption()}
click={((item) => {
if (item instanceof Behavior) return;
if (this.props.valueChange) {
this.props.valueChange(item);
@ -166,4 +166,4 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
}
}
export { ObjectPicker, IDisplayItem };
export { ObjectPicker };

54
source/Input/PickerList/PickerList.tsx
View File

@ -17,12 +17,6 @@ interface IDisplayInfo {
allLabel: boolean;
};
interface IDisplayItem {
nameKey: AllI18nKeys;
key: string;
mark?: boolean;
}
function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
if (!item) {
@ -98,13 +92,11 @@ function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
}
interface IPickerListProps {
displayItems?: IDisplayItem[];
objectList?: IPickerListItem[];
item: IPickerListItem[];
target?: RefObject<any>;
noData?: AllI18nKeys;
dismiss?: () => any;
clickObjectItems?: (item: IPickerListItem) => any;
clickDisplayItems?: (item: IDisplayItem) => any;
click?: (item: IPickerListItem) => any;
}
class PickerList extends Component<IPickerListProps> {
@ -116,8 +108,8 @@ class PickerList extends Component<IPickerListProps> {
className="picker-list-item"
key={item.id}
onClick={() => {
if (this.props.clickObjectItems) {
this.props.clickObjectItems(item)
if (this.props.click) {
this.props.click(item)
}
}}
>
@ -143,27 +135,6 @@ class PickerList extends Component<IPickerListProps> {
</div>;
}
private renderString(item: IDisplayItem) {
return <div
className="picker-list-item"
key={item.key}
onClick={() => {
if (this.props.clickDisplayItems) {
this.props.clickDisplayItems(item)
}
}}
>
<div className="list-item-icon">
<Icon iconName="CheckMark" style={{
display: item.mark ? "block" : "none"
}}/>
</div>
<div className="list-item-name">
<Localization i18nKey={item.nameKey}/>
</div>
</div>;
}
public render(): ReactNode {
return <Callout
onDismiss={this.props.dismiss}
@ -171,18 +142,11 @@ class PickerList extends Component<IPickerListProps> {
directionalHint={DirectionalHint.topCenter}
>
<div className="picker-list-root">
{this.props.objectList ? this.props.objectList.map((item) => {
return this.renderItem(item);
}) : null}
{this.props.displayItems ? this.props.displayItems.map((item) => {
return this.renderString(item);
}) : null}
{
!(this.props.objectList || this.props.displayItems) ||
!(
this.props.objectList && this.props.objectList.length > 0 ||
this.props.displayItems && this.props.displayItems.length > 0
) ?
this.props.item.map((item) => this.renderItem(item))
}
{
this.props.item.length <= 0 ?
<Localization
className="picker-list-nodata"
i18nKey={this.props.noData ?? "Common.No.Data"}
@ -194,4 +158,4 @@ class PickerList extends Component<IPickerListProps> {
}
}
export { PickerList, IDisplayItem, IDisplayInfo, getObjectDisplayInfo }
export { PickerList, IDisplayInfo, getObjectDisplayInfo }

6
source/Panel/GroupDetails/GroupDetails.tsx
View File

@ -22,8 +22,8 @@ mapGenModToI18nKey.set(GenMod.Point, "Common.Attr.Key.Generation.Mod.Point");
mapGenModToI18nKey.set(GenMod.Range, "Common.Attr.Key.Generation.Mod.Range");
const allOption: IDisplayItem[] = [
{nameKey: "Common.Attr.Key.Generation.Mod.Point", key: GenMod.Point},
{nameKey: "Common.Attr.Key.Generation.Mod.Range", key: GenMod.Range}
{i18n: "Common.Attr.Key.Generation.Mod.Point", key: GenMod.Point},
{i18n: "Common.Attr.Key.Generation.Mod.Range", key: GenMod.Range}
];
@useSetting
@ -144,7 +144,7 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps & IM
<ComboInput
keyI18n="Common.Attr.Key.Generation.Mod"
value={{
nameKey: mapGenModToI18nKey.get(group.genMethod) ?? "Common.No.Data",
i18n: mapGenModToI18nKey.get(group.genMethod) ?? "Common.No.Data",
key: group.genMethod
}}
allOption={allOption}