Add object picker component
This commit is contained in:
parent
901913a4de
commit
d07a20d8fe
86
source/Component/ObjectPicker/ObjectPicker.scss
Normal file
86
source/Component/ObjectPicker/ObjectPicker.scss
Normal file
@ -0,0 +1,86 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
$line-min-height: 26px;
|
||||
|
||||
div.object-picker-root {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-height: $line-min-height;
|
||||
padding: 5px 0;
|
||||
|
||||
div.input-intro {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
max-width: 220px;
|
||||
min-height: $line-min-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.root-content {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
max-width: 180px;
|
||||
min-height: $line-min-height;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
div.value-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: $line-min-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
div.list-button {
|
||||
width: $line-min-height;
|
||||
height: $line-min-height;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.dark.object-picker-root {
|
||||
|
||||
div.root-content {
|
||||
background-color: $lt-bg-color-lvl3-dark;
|
||||
color: $lt-font-color-normal-dark;
|
||||
}
|
||||
|
||||
div.root-content:hover {
|
||||
background-color: $lt-bg-color-lvl2-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.light.object-picker-root {
|
||||
|
||||
div.root-content {
|
||||
background-color: $lt-bg-color-lvl3-light;
|
||||
color: $lt-font-color-normal-light;
|
||||
}
|
||||
|
||||
div.root-content:hover {
|
||||
background-color: $lt-bg-color-lvl2-light;
|
||||
}
|
||||
}
|
||||
|
||||
div.combo-picker-root {
|
||||
width: 300px;
|
||||
height: 340px;
|
||||
}
|
||||
@ -1,12 +1,143 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { Component, createRef, ReactNode } from "react";
|
||||
import { Label } from "@Model/Label";
|
||||
import { Group } from "@Model/Group";
|
||||
import { Range } from "@Model/Range";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { FontLevel, Theme } from "@Component/Theme/Theme";
|
||||
import { PickerList, IDisplayItem } from "../PickerList/PickerList";
|
||||
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
|
||||
import { Icon } from "@fluentui/react";
|
||||
import CtrlObject from "@Model/CtrlObject";
|
||||
import "./ObjectPicker.scss";
|
||||
|
||||
interface IObjectPickerProps {}
|
||||
type IObjectType = Label | Group | Range | CtrlObject;
|
||||
|
||||
class ObjectPicker extends Component<IObjectPickerProps> {
|
||||
|
||||
public render(): ReactNode {
|
||||
return <div></div>
|
||||
}
|
||||
interface IObjectPickerProps {
|
||||
keyI18n: AllI18nKeys;
|
||||
infoI18n?: AllI18nKeys;
|
||||
type: Array<"L" | "G" | "R">;
|
||||
value?: IObjectType;
|
||||
valueChange?: (value: IObjectType) => any;
|
||||
}
|
||||
|
||||
export { ObjectPicker }
|
||||
interface IObjectPickerState {
|
||||
isPickerVisible: boolean;
|
||||
}
|
||||
|
||||
@useStatusWithEvent("objectChange", "labelChange")
|
||||
class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IObjectPickerState> {
|
||||
|
||||
private getAllOption() {
|
||||
let option: Array<IObjectType> = [];
|
||||
if (this.props.status) {
|
||||
|
||||
for (let i = 0; i < this.props.type.length; i++) {
|
||||
|
||||
if (this.props.type[i] === "L") {
|
||||
for (let j = 0; j < this.props.status.model.labelPool.length; j++) {
|
||||
option.push(this.props.status.model.labelPool[j]);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.type[i] === "R") {
|
||||
for (let j = 0; j < this.props.status.model.objectPool.length; j++) {
|
||||
if (this.props.status.model.objectPool[j] instanceof Range) {
|
||||
option.push(this.props.status.model.objectPool[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.type[i] === "G") {
|
||||
for (let j = 0; j < this.props.status.model.objectPool.length; j++) {
|
||||
if (this.props.status.model.objectPool[j] instanceof Group) {
|
||||
option.push(this.props.status.model.objectPool[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return option;
|
||||
}
|
||||
|
||||
public constructor(props: IObjectPickerProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isPickerVisible: false
|
||||
}
|
||||
}
|
||||
|
||||
private pickerTarget = createRef<HTMLDivElement>();
|
||||
|
||||
private renderPicker() {
|
||||
return <PickerList
|
||||
target={this.pickerTarget}
|
||||
objectList={this.getAllOption()}
|
||||
clickObjectItems={((item) => {
|
||||
if (this.props.valueChange) {
|
||||
this.props.valueChange(item);
|
||||
}
|
||||
this.setState({
|
||||
isPickerVisible: false
|
||||
})
|
||||
})}
|
||||
dismiss={() => {
|
||||
this.setState({
|
||||
isPickerVisible: false
|
||||
})
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
|
||||
let name = "";
|
||||
let icon = "Label";
|
||||
if (this.props.value instanceof CtrlObject) {
|
||||
name = this.props.value.displayName;
|
||||
|
||||
if (this.props.value instanceof Range) {
|
||||
icon = "CubeShape"
|
||||
}
|
||||
|
||||
if (this.props.value instanceof Group) {
|
||||
icon = "WebAppBuilderFragment"
|
||||
}
|
||||
}
|
||||
if (this.props.value instanceof Label) {
|
||||
name = this.props.value.name;
|
||||
icon = "tag";
|
||||
}
|
||||
|
||||
return <>
|
||||
<Theme className="object-picker-root" fontLevel={FontLevel.normal}>
|
||||
<div className="input-intro">
|
||||
<Localization i18nKey={this.props.keyI18n}/>
|
||||
</div>
|
||||
<div
|
||||
className="root-content"
|
||||
ref={this.pickerTarget}
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
isPickerVisible: true
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div className="list-button">
|
||||
<Icon iconName={icon}/>
|
||||
</div>
|
||||
<div className="value-view">
|
||||
{
|
||||
name ?
|
||||
<span>{name}</span> :
|
||||
<Localization i18nKey="Input.Error.Select"/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Theme>
|
||||
|
||||
{this.state.isPickerVisible ? this.renderPicker(): null}
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
export { ObjectPicker, IDisplayItem };
|
||||
@ -24,6 +24,7 @@ const EN_US = {
|
||||
"Input.Error.Min": "Enter value must be greater than {num}",
|
||||
"Input.Error.Length": "The length of the input content must be less than {num}",
|
||||
"Input.Error.Length.Less": "The length of the input content must be greater than {num}",
|
||||
"Input.Error.Select": "Select object ...",
|
||||
"Object.List.New.Group": "Group object {id}",
|
||||
"Object.List.New.Range": "Range object {id}",
|
||||
"Object.List.New.Label": "Label {id}",
|
||||
@ -65,6 +66,7 @@ const EN_US = {
|
||||
"Common.Attr.Key.Generation.Mod": "Generation model",
|
||||
"Common.Attr.Key.Generation.Mod.Point": "Point model",
|
||||
"Common.Attr.Key.Generation.Mod.Range": "Range model",
|
||||
"Common.Attr.Key.Generation.Use.Range": "Generation range",
|
||||
"Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
|
||||
"Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",
|
||||
"Panel.Info.Group.Details.Attr.Error.Not.Group": "Object is not a Group",
|
||||
|
||||
@ -24,6 +24,7 @@ const ZH_CN = {
|
||||
"Input.Error.Min": "输入数值须大于 {number}",
|
||||
"Input.Error.Length": "输入内容长度须小于 {number}",
|
||||
"Input.Error.Length.Less": "输入内容长度须大于 {number}",
|
||||
"Input.Error.Select": "选择对象 ...",
|
||||
"Object.List.New.Group": "组对象 {id}",
|
||||
"Object.List.New.Range": "范围对象 {id}",
|
||||
"Object.List.New.Label": "标签 {id}",
|
||||
@ -65,6 +66,7 @@ const ZH_CN = {
|
||||
"Common.Attr.Key.Generation.Mod": "生成模式",
|
||||
"Common.Attr.Key.Generation.Mod.Point": "点生成",
|
||||
"Common.Attr.Key.Generation.Mod.Range": "范围生成",
|
||||
"Common.Attr.Key.Generation.Use.Range": "生成范围",
|
||||
"Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
|
||||
"Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
|
||||
"Panel.Info.Group.Details.Attr.Error.Not.Group": "对象不是一个群",
|
||||
|
||||
@ -9,6 +9,7 @@ import { LabelPicker } from "@Component/LabelPicker/LabelPicker";
|
||||
import { Group, GenMod } from "@Model/Group";
|
||||
import { AllI18nKeys } from "@Component/Localization/Localization";
|
||||
import { ComboInput, IDisplayItem } from "@Component/ComboInput/ComboInput";
|
||||
import { ObjectPicker } from "@Component/ObjectPicker/ObjectPicker";
|
||||
import "./GroupDetails.scss";
|
||||
|
||||
interface IGroupDetailsProps {}
|
||||
@ -137,6 +138,11 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<ObjectPicker
|
||||
keyI18n="Common.Attr.Key.Generation.Use.Range"
|
||||
type={["L", "G", "R"]}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user