Add group details gen & recode input with text field component #22
@ -1,120 +1,59 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
$line-min-height: 26px;
|
||||
$line-min-height: 24px;
|
||||
|
||||
div.attr-input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-height: $line-min-height;
|
||||
padding: 5px 0;
|
||||
div.attr-input-root {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
div.input-intro {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
min-height: $line-min-height;
|
||||
max-width: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.root-content {
|
||||
width: 50%;
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 180px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
min-height: $line-min-height;
|
||||
};
|
||||
|
||||
div.input-content {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: $line-min-height;
|
||||
input:focus {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline:none;
|
||||
};
|
||||
|
||||
input:focus {
|
||||
border: none;
|
||||
}
|
||||
|
||||
div.button-left, div.button-right {
|
||||
min-height: $line-min-height;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
div.input-content.error {
|
||||
border: 1px solid $lt-red;
|
||||
}
|
||||
|
||||
div.input-content.focus {
|
||||
border: 1px solid $lt-blue;
|
||||
}
|
||||
|
||||
div.err-message {
|
||||
color: $lt-red;
|
||||
padding-top: 5px;
|
||||
min-height: $line-min-height;
|
||||
}
|
||||
|
||||
div.error-view {
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $line-min-height;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: none;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
cursor:not-allowed;
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
div.button-left, div.button-right {
|
||||
min-height: $line-min-height;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
div.dark.attr-input {
|
||||
div.dark.text-field-root {
|
||||
|
||||
div.input-content, div.error-view,
|
||||
div.input-content input {
|
||||
input {
|
||||
background-color: $lt-bg-color-lvl3-dark;
|
||||
color: $lt-font-color-normal-dark;
|
||||
}
|
||||
|
||||
div.error-view:hover,
|
||||
div.button-left:hover, div.button-right:hover {
|
||||
background-color: $lt-bg-color-lvl2-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.light.attr-input {
|
||||
div.light.text-field-root {
|
||||
|
||||
div.input-content, div.error-view,
|
||||
div.input-content input {
|
||||
input {
|
||||
background-color: $lt-bg-color-lvl3-light;
|
||||
color: $lt-font-color-normal-light;
|
||||
}
|
||||
|
||||
div.error-view:hover,
|
||||
div.button-left:hover, div.button-right:hover {
|
||||
background-color: $lt-bg-color-lvl2-light;
|
||||
}
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { FontLevel, Theme } from "@Component/Theme/Theme";
|
||||
import "./AttrInput.scss";
|
||||
import { Icon } from "@fluentui/react";
|
||||
import { Localization, AllI18nKeys } from "@Component/Localization/Localization";
|
||||
import { ObjectID } from "@Model/Renderer";
|
||||
import { TextField, ITextFieldProps } from "../TextField/TextField";
|
||||
import "./AttrInput.scss";
|
||||
|
||||
interface IAttrInputProps {
|
||||
interface IAttrInputProps extends ITextFieldProps {
|
||||
id?: ObjectID;
|
||||
keyI18n: AllI18nKeys;
|
||||
infoI18n?: AllI18nKeys;
|
||||
value?: number | string;
|
||||
isNumber?: boolean;
|
||||
maxLength?: number;
|
||||
@ -16,15 +14,14 @@ interface IAttrInputProps {
|
||||
max?: number;
|
||||
min?: number;
|
||||
step?: number;
|
||||
disable?: boolean;
|
||||
disableI18n?: AllI18nKeys;
|
||||
valueChange?: (value: this["isNumber"] extends true ? number : string) => any;
|
||||
}
|
||||
|
||||
class AttrInput extends Component<IAttrInputProps> {
|
||||
|
||||
private value: string = "";
|
||||
private error: ReactNode;
|
||||
private error?: AllI18nKeys;
|
||||
private errorOption?: Record<string, string>;
|
||||
private numberTestReg = [/\.0*$/, /\.\d*[1-9]+0+$/];
|
||||
|
||||
private numberTester(value: string) {
|
||||
@ -33,17 +30,21 @@ class AttrInput extends Component<IAttrInputProps> {
|
||||
this.numberTestReg[1].test(value);
|
||||
}
|
||||
|
||||
private check(value: string): ReactNode {
|
||||
private check(value: string): AllI18nKeys | undefined {
|
||||
|
||||
// 长度校验
|
||||
const maxLength = this.props.maxLength ?? 32;
|
||||
if (value.length > maxLength) {
|
||||
return <Localization i18nKey="Input.Error.Length" options={{ num: maxLength.toString() }} />
|
||||
this.error = "Input.Error.Length";
|
||||
this.errorOption = { num: maxLength.toString() };
|
||||
return this.error;
|
||||
}
|
||||
|
||||
const minLength = this.props.minLength ?? 1;
|
||||
if (value.length < minLength) {
|
||||
return <Localization i18nKey="Input.Error.Length.Less" options={{ num: minLength.toString() }} />
|
||||
this.error = "Input.Error.Length.Less";
|
||||
this.errorOption = { num: minLength.toString() };
|
||||
return this.error;
|
||||
}
|
||||
|
||||
if (this.props.isNumber) {
|
||||
@ -51,17 +52,22 @@ class AttrInput extends Component<IAttrInputProps> {
|
||||
|
||||
// 数字校验
|
||||
if (this.numberTester(value)) {
|
||||
return <Localization i18nKey="Input.Error.Not.Number" />
|
||||
this.error = "Input.Error.Not.Number";
|
||||
return this.error;
|
||||
}
|
||||
|
||||
// 最大值校验
|
||||
if (this.props.max !== undefined && praseNumber > this.props.max) {
|
||||
return <Localization i18nKey="Input.Error.Max" options={{ num: this.props.max.toString() }} />
|
||||
this.error = "Input.Error.Max";
|
||||
this.errorOption = { num: this.props.max.toString() };
|
||||
return this.error;
|
||||
}
|
||||
|
||||
// 最小值校验
|
||||
if (this.props.min !== undefined && praseNumber < this.props.min) {
|
||||
return <Localization i18nKey="Input.Error.Min" options={{ num: this.props.min.toString() }} />
|
||||
this.error = "Input.Error.Min";
|
||||
this.errorOption = { num: this.props.min.toString() };
|
||||
return this.error;
|
||||
}
|
||||
|
||||
}
|
||||
@ -102,41 +108,33 @@ class AttrInput extends Component<IAttrInputProps> {
|
||||
|
||||
private renderInput() {
|
||||
return <>
|
||||
<div className={"input-content" + (this.error ? ` error` : "")}>
|
||||
{
|
||||
this.props.isNumber ? <div
|
||||
className="button-left"
|
||||
onClick={() => this.changeValue(-1)}
|
||||
>
|
||||
<Icon iconName="ChevronLeft"></Icon>
|
||||
</div> : null
|
||||
}
|
||||
<input
|
||||
className="input"
|
||||
value={this.value}
|
||||
style={{
|
||||
padding: this.props.isNumber ? "0 3px" : "0 8px"
|
||||
}}
|
||||
onChange={(e) => {
|
||||
this.value = e.target.value;
|
||||
this.error = this.check(e.target.value);
|
||||
this.handelValueChange();
|
||||
}}
|
||||
></input>
|
||||
{
|
||||
this.props.isNumber ? <div
|
||||
className="button-right"
|
||||
onClick={() => this.changeValue(1)}
|
||||
>
|
||||
<Icon iconName="ChevronRight"></Icon>
|
||||
</div> : null
|
||||
}
|
||||
</div>
|
||||
{
|
||||
this.error ?
|
||||
<div className="err-message">
|
||||
{this.error}
|
||||
</div> : null
|
||||
this.props.isNumber ? <div
|
||||
className="button-left"
|
||||
onClick={() => this.changeValue(-1)}
|
||||
>
|
||||
<Icon iconName="ChevronLeft"></Icon>
|
||||
</div> : null
|
||||
}
|
||||
<input
|
||||
className="input"
|
||||
value={this.value}
|
||||
style={{
|
||||
padding: this.props.isNumber ? "0 3px" : "0 8px"
|
||||
}}
|
||||
onChange={(e) => {
|
||||
this.value = e.target.value;
|
||||
this.error = this.check(e.target.value);
|
||||
this.handelValueChange();
|
||||
}}
|
||||
></input>
|
||||
{
|
||||
this.props.isNumber ? <div
|
||||
className="button-right"
|
||||
onClick={() => this.changeValue(1)}
|
||||
>
|
||||
<Icon iconName="ChevronRight"></Icon>
|
||||
</div> : null
|
||||
}
|
||||
</>
|
||||
}
|
||||
@ -166,33 +164,19 @@ class AttrInput extends Component<IAttrInputProps> {
|
||||
this.error = this.check(value.toString());
|
||||
}
|
||||
|
||||
private renderErrorInput() {
|
||||
return <div className="error-view">
|
||||
{
|
||||
this.props.disableI18n ?
|
||||
<Localization i18nKey={this.props.disableI18n}/> :
|
||||
<span>{this.props.value}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
|
||||
return <Theme
|
||||
className="attr-input"
|
||||
fontLevel={FontLevel.normal}
|
||||
return <TextField
|
||||
{...this.props}
|
||||
className="attr-input-root"
|
||||
customHoverStyle
|
||||
errorI18n={this.error}
|
||||
errorI18nOption={this.errorOption}
|
||||
>
|
||||
<div className="input-intro">
|
||||
<Localization i18nKey={this.props.keyI18n}/>
|
||||
</div>
|
||||
<div className="root-content">
|
||||
{
|
||||
this.props.disable ?
|
||||
this.renderErrorInput() :
|
||||
this.renderInput()
|
||||
}
|
||||
</div>
|
||||
</Theme>
|
||||
{
|
||||
this.renderInput()
|
||||
}
|
||||
</TextField>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,89 +1,32 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
$line-min-height: 24px;
|
||||
|
||||
$line-min-height: 26px;
|
||||
div.color-input {
|
||||
|
||||
div.color-input-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;
|
||||
div.color-view {
|
||||
width: $line-min-height;
|
||||
max-width: $line-min-height;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
div.color-view {
|
||||
width: $line-min-height;
|
||||
max-width: $line-min-height;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
div.color-box {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
div.value-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: $line-min-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div.text-box {
|
||||
padding-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
div.error-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
div.color-box {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.dark.color-input-root {
|
||||
div.value-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: $line-min-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
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.color-input-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.text-box {
|
||||
padding-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.color-picker-root {
|
||||
|
||||
@ -1,16 +1,11 @@
|
||||
import { Component, createRef, ReactNode } from "react";
|
||||
import { FontLevel, Theme } from "@Component/Theme/Theme";
|
||||
import { TextField, ITextFieldProps } from "@Component/TextField/TextField";
|
||||
import { Callout, ColorPicker, DirectionalHint } from "@fluentui/react";
|
||||
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
|
||||
import "./ColorInput.scss";
|
||||
|
||||
interface IColorInputProps {
|
||||
keyI18n: AllI18nKeys;
|
||||
infoI18n?: AllI18nKeys;
|
||||
interface IColorInputProps extends ITextFieldProps {
|
||||
value?: number[];
|
||||
normal?: boolean;
|
||||
disable?: boolean;
|
||||
disableI18n?: AllI18nKeys;
|
||||
valueChange?: (color: number[]) => any;
|
||||
}
|
||||
|
||||
@ -65,16 +60,6 @@ class ColorInput extends Component<IColorInputProps, IColorInputState> {
|
||||
</Callout>
|
||||
}
|
||||
|
||||
private renderErrorInput() {
|
||||
return <div className="error-box">
|
||||
{
|
||||
this.props.disableI18n ?
|
||||
<Localization i18nKey={this.props.disableI18n}/> :
|
||||
<span>{this.props.value}</span>
|
||||
}
|
||||
</div>;
|
||||
}
|
||||
|
||||
private renderColorInput() {
|
||||
return <>
|
||||
<div className="color-view">
|
||||
@ -104,29 +89,21 @@ class ColorInput extends Component<IColorInputProps, IColorInputState> {
|
||||
|
||||
public render(): ReactNode {
|
||||
return <>
|
||||
<Theme className="color-input-root" fontLevel={FontLevel.normal}>
|
||||
<div className="input-intro">
|
||||
<Localization i18nKey={this.props.keyI18n}/>
|
||||
</div>
|
||||
<div
|
||||
className="root-content"
|
||||
ref={this.pickerTarget}
|
||||
style={{
|
||||
cursor: this.props.disable ? "not-allowed" : "pointer"
|
||||
}}
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
isPickerVisible: !this.props.disable
|
||||
})
|
||||
}}
|
||||
>
|
||||
{ this.props.disable ? null : this.renderColorInput() }
|
||||
{ this.props.disable ? this.renderErrorInput() : null }
|
||||
</div>
|
||||
</Theme>
|
||||
|
||||
<TextField
|
||||
{...this.props}
|
||||
className="color-input"
|
||||
keyI18n={this.props.keyI18n}
|
||||
targetRef={this.pickerTarget}
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
isPickerVisible: !this.props.disableI18n
|
||||
})
|
||||
}}
|
||||
>
|
||||
{ this.renderColorInput() }
|
||||
</TextField>
|
||||
{this.state.isPickerVisible ? this.renderPicker(): null}
|
||||
</>
|
||||
</>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,87 +1,38 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
$line-min-height: 26px;
|
||||
$line-min-height: 24px;
|
||||
|
||||
div.combo-input-root {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-height: $line-min-height;
|
||||
padding: 5px 0;
|
||||
div.combo-input {
|
||||
|
||||
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%;
|
||||
div.value-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 180px;
|
||||
min-height: $line-min-height;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
max-width: calc( 100% - 32px );
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
div.value-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: $line-min-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
white-space: nowrap;
|
||||
span {
|
||||
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;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.dark.combo-input-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.combo-input-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;
|
||||
|
||||
div.list-button {
|
||||
width: $line-min-height;
|
||||
height: $line-min-height;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,10 @@
|
||||
import { Component, createRef, ReactNode } from "react";
|
||||
import { FontLevel, Theme } from "@Component/Theme/Theme";
|
||||
import { PickerList, IDisplayItem } from "../PickerList/PickerList";
|
||||
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
|
||||
import { TextField, ITextFieldProps } from "../TextField/TextField";
|
||||
import { Icon } from "@fluentui/react";
|
||||
import { Localization } from "@Component/Localization/Localization";
|
||||
import "./ComboInput.scss";
|
||||
|
||||
interface IComboInputProps {
|
||||
keyI18n: AllI18nKeys;
|
||||
infoI18n?: AllI18nKeys;
|
||||
interface IComboInputProps extends ITextFieldProps {
|
||||
allOption?: IDisplayItem[];
|
||||
value?: IDisplayItem;
|
||||
valueChange?: (value: IDisplayItem) => any;
|
||||
@ -53,31 +50,28 @@ class ComboInput extends Component<IComboInputProps, IComboInputState> {
|
||||
|
||||
public render(): ReactNode {
|
||||
return <>
|
||||
<Theme className="combo-input-root" fontLevel={FontLevel.normal}>
|
||||
<div className="input-intro">
|
||||
<Localization i18nKey={this.props.keyI18n}/>
|
||||
<TextField
|
||||
{...this.props}
|
||||
targetRef={this.pickerTarget}
|
||||
className="combo-input"
|
||||
keyI18n={this.props.keyI18n}
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
isPickerVisible: true
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div className="value-view">
|
||||
{
|
||||
this.props.value ?
|
||||
<Localization i18nKey={this.props.value.nameKey}/> :
|
||||
null
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
className="root-content"
|
||||
ref={this.pickerTarget}
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
isPickerVisible: true
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div className="value-view">
|
||||
{
|
||||
this.props.value ?
|
||||
<Localization i18nKey={this.props.value.nameKey}/> :
|
||||
null
|
||||
}
|
||||
</div>
|
||||
<div className="list-button">
|
||||
<Icon iconName="ChevronDownMed"/>
|
||||
</div>
|
||||
<div className="list-button">
|
||||
<Icon iconName="ChevronDownMed"/>
|
||||
</div>
|
||||
</Theme>
|
||||
</TextField>
|
||||
|
||||
{this.state.isPickerVisible ? this.renderPicker(): null}
|
||||
</>
|
||||
|
||||
@ -2,31 +2,6 @@
|
||||
|
||||
$line-min-height: 26px;
|
||||
|
||||
div.label-picker-root {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
min-height: $line-min-height;
|
||||
padding: 5px 0;
|
||||
|
||||
div.input-intro {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
min-height: $line-min-height;
|
||||
max-width: 220px;
|
||||
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;
|
||||
}
|
||||
div.label-picker {
|
||||
min-height: $line-min-height;
|
||||
}
|
||||
@ -1,14 +1,12 @@
|
||||
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
|
||||
import { PickerList } from "../PickerList/PickerList";
|
||||
import { Label } from "@Model/Label";
|
||||
import { TextField, ITextFieldProps } from "../TextField/TextField";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { Component, ReactNode, createRef } from "react";
|
||||
import { LabelList } from "../LabelList/LabelList";
|
||||
import "./LabelPicker.scss"
|
||||
|
||||
interface ILabelPickerProps {
|
||||
keyI18n: AllI18nKeys;
|
||||
infoI18n?: AllI18nKeys;
|
||||
interface ILabelPickerProps extends ITextFieldProps {
|
||||
labels: Label[];
|
||||
labelAdd?: (label: Label) => any;
|
||||
labelDelete?: (label: Label) => any;
|
||||
@ -47,47 +45,50 @@ class LabelPicker extends Component<ILabelPickerProps & IMixinStatusProps, ILabe
|
||||
return res;
|
||||
}
|
||||
|
||||
private renderPicker() {
|
||||
return <PickerList
|
||||
noData="Common.Attr.Key.Label.Picker.Nodata"
|
||||
objectList={this.getOtherLabel()}
|
||||
dismiss={() => {
|
||||
this.setState({
|
||||
isPickerVisible: false
|
||||
});
|
||||
}}
|
||||
clickObjectItems={(label) => {
|
||||
if (label instanceof Label && this.props.labelAdd) {
|
||||
this.props.labelAdd(label)
|
||||
}
|
||||
this.setState({
|
||||
isPickerVisible: false
|
||||
});
|
||||
}}
|
||||
target={this.addButtonRef}
|
||||
/>;
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <div
|
||||
className="label-picker-root"
|
||||
>
|
||||
<div className="input-intro">
|
||||
<Localization i18nKey={this.props.keyI18n}/>
|
||||
</div>
|
||||
<div className="root-content">
|
||||
<LabelList
|
||||
addRef={this.addButtonRef}
|
||||
labels={this.props.labels}
|
||||
minHeight={26}
|
||||
deleteLabel={(label) => {
|
||||
this.props.labelDelete ? this.props.labelDelete(label) : 0;
|
||||
}}
|
||||
addLabel={() => {
|
||||
this.setState({
|
||||
isPickerVisible: true
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{this.state.isPickerVisible ? <PickerList
|
||||
noData="Common.Attr.Key.Label.Picker.Nodata"
|
||||
objectList={this.getOtherLabel()}
|
||||
dismiss={() => {
|
||||
this.setState({
|
||||
isPickerVisible: false
|
||||
});
|
||||
}}
|
||||
clickObjectItems={(label) => {
|
||||
if (label instanceof Label && this.props.labelAdd) {
|
||||
this.props.labelAdd(label)
|
||||
}
|
||||
this.setState({
|
||||
isPickerVisible: false
|
||||
});
|
||||
}}
|
||||
target={this.addButtonRef}
|
||||
/> : null}
|
||||
</div>
|
||||
</div>
|
||||
return <TextField
|
||||
{...this.props}
|
||||
className="label-picker"
|
||||
customHoverStyle
|
||||
customStyle
|
||||
keyI18n={this.props.keyI18n}
|
||||
>
|
||||
<LabelList
|
||||
addRef={this.addButtonRef}
|
||||
labels={this.props.labels}
|
||||
minHeight={26}
|
||||
deleteLabel={(label) => {
|
||||
this.props.labelDelete ? this.props.labelDelete(label) : 0;
|
||||
}}
|
||||
addLabel={() => {
|
||||
this.setState({
|
||||
isPickerVisible: true
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{this.state.isPickerVisible ? this.renderPicker(): null}
|
||||
</TextField>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
57
source/Component/ObjectPicker/ObjectPicker.scss
Normal file
57
source/Component/ObjectPicker/ObjectPicker.scss
Normal file
@ -0,0 +1,57 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
$line-min-height: 24px;
|
||||
|
||||
div.object-picker {
|
||||
|
||||
div.list-color {
|
||||
width: 3px;
|
||||
height: $line-min-height;
|
||||
border-radius: 1000px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.value-view {
|
||||
flex-shrink: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: calc( 100% - 51px );
|
||||
min-height: $line-min-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
word-break: keep-all;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div.list-button {
|
||||
width: $line-min-height;
|
||||
height: $line-min-height;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.list-empty {
|
||||
width: $line-min-height;
|
||||
height: $line-min-height;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.list-empty:hover {
|
||||
color: $lt-red;
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,169 @@
|
||||
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 { TextField, ITextFieldProps } from "../TextField/TextField";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { PickerList, IDisplayItem, getObjectDisplayInfo, IDisplayInfo } from "../PickerList/PickerList";
|
||||
import { 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 extends ITextFieldProps {
|
||||
type: Array<"L" | "G" | "R">;
|
||||
value?: IObjectType;
|
||||
valueChange?: (value: IObjectType) => any;
|
||||
cleanValue?: () => 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;
|
||||
}
|
||||
|
||||
private isClean: boolean = false;
|
||||
|
||||
public constructor(props: IObjectPickerProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isPickerVisible: false
|
||||
}
|
||||
}
|
||||
|
||||
private pickerTarget = createRef<HTMLDivElement>();
|
||||
|
||||
private renderPicker() {
|
||||
return <PickerList
|
||||
noData="Object.Picker.List.No.Data"
|
||||
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 disPlayInfo: IDisplayInfo;
|
||||
let isDelete: boolean = false;
|
||||
|
||||
if (this.props.value) {
|
||||
disPlayInfo = getObjectDisplayInfo(this.props.value);
|
||||
isDelete = this.props.value.isDeleted();
|
||||
} else {
|
||||
disPlayInfo = {
|
||||
name: "",
|
||||
icon: "Label",
|
||||
color: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
|
||||
return <>
|
||||
<TextField
|
||||
{...this.props}
|
||||
className="object-picker"
|
||||
keyI18n={this.props.keyI18n}
|
||||
targetRef={this.pickerTarget}
|
||||
onClick={() => {
|
||||
if (this.isClean) {
|
||||
this.isClean = false;
|
||||
} else {
|
||||
this.setState({
|
||||
isPickerVisible: true
|
||||
})
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="list-color"
|
||||
style={{
|
||||
backgroundColor: disPlayInfo.color
|
||||
}}
|
||||
/>
|
||||
<div className="list-button">
|
||||
<Icon iconName={disPlayInfo.icon}/>
|
||||
</div>
|
||||
<div
|
||||
className="value-view"
|
||||
style={{
|
||||
textDecoration: isDelete ? "line-through" : undefined,
|
||||
opacity: isDelete ? ".6" : undefined
|
||||
}}
|
||||
>
|
||||
{
|
||||
disPlayInfo.name ?
|
||||
<span>{disPlayInfo.name}</span> :
|
||||
<Localization i18nKey="Input.Error.Select"/>
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
className="list-empty"
|
||||
onClick={() => {
|
||||
if (this.props.cleanValue && disPlayInfo.name) {
|
||||
this.isClean = true;
|
||||
this.props.cleanValue();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{
|
||||
disPlayInfo.name ?
|
||||
<Icon iconName="delete"/> :
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</TextField>
|
||||
|
||||
{this.state.isPickerVisible ? this.renderPicker(): null}
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
export { ObjectPicker, IDisplayItem };
|
||||
@ -1,12 +1,13 @@
|
||||
div.picker-list-root {
|
||||
max-width: 200px;
|
||||
min-width: 200px;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow-y: auto;
|
||||
|
||||
div.picker-list-item {
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
padding-right: 10px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -37,6 +38,7 @@ div.picker-list-root {
|
||||
|
||||
div.list-item-name {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,13 +7,45 @@ import { Range } from "@Model/Range";
|
||||
import { Component, ReactNode, RefObject } from "react";
|
||||
import "./PickerList.scss";
|
||||
|
||||
type IPickerListItem = CtrlObject | Label;
|
||||
type IDisplayInfo = Record<"color" | "icon" | "name", string>;
|
||||
type IPickerListItem = CtrlObject | Label | Range | Group;
|
||||
type IDisplayItem = {
|
||||
nameKey: AllI18nKeys;
|
||||
key: string;
|
||||
mark?: boolean;
|
||||
}
|
||||
|
||||
function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {
|
||||
|
||||
let color: number[] = [];
|
||||
let icon: string = "tag";
|
||||
let name: string = "";
|
||||
|
||||
if (item instanceof Range) {
|
||||
icon = "CubeShape"
|
||||
}
|
||||
if (item instanceof Group) {
|
||||
icon = "WebAppBuilderFragment"
|
||||
}
|
||||
if (item instanceof CtrlObject) {
|
||||
color[0] = Math.round(item.color[0] * 255);
|
||||
color[1] = Math.round(item.color[1] * 255);
|
||||
color[2] = Math.round(item.color[2] * 255);
|
||||
name = item.displayName;
|
||||
}
|
||||
if (item instanceof Label) {
|
||||
icon = "tag";
|
||||
color = item.color.concat([]);
|
||||
name = item.name;
|
||||
}
|
||||
|
||||
return {
|
||||
color: `rgb(${color[0]},${color[1]},${color[2]})`,
|
||||
icon: icon,
|
||||
name: name
|
||||
}
|
||||
}
|
||||
|
||||
interface IPickerListProps {
|
||||
displayItems?: IDisplayItem[];
|
||||
objectList?: IPickerListItem[];
|
||||
@ -27,28 +59,7 @@ interface IPickerListProps {
|
||||
class PickerList extends Component<IPickerListProps> {
|
||||
|
||||
private renderItem(item: IPickerListItem) {
|
||||
|
||||
let color: number[] = [];
|
||||
let icon: string = "tag";
|
||||
let name: string = "";
|
||||
|
||||
if (item instanceof Range) {
|
||||
icon = "CubeShape"
|
||||
}
|
||||
if (item instanceof Group) {
|
||||
icon = "WebAppBuilderFragment"
|
||||
}
|
||||
if (item instanceof CtrlObject) {
|
||||
color[0] = Math.round(item.color[0] * 255);
|
||||
color[1] = Math.round(item.color[1] * 255);
|
||||
color[2] = Math.round(item.color[2] * 255);
|
||||
name = item.displayName;
|
||||
}
|
||||
if (item instanceof Label) {
|
||||
icon = "tag";
|
||||
color = item.color.concat([]);
|
||||
name = item.name;
|
||||
}
|
||||
const displayInfo = getObjectDisplayInfo(item);
|
||||
|
||||
return <div
|
||||
className="picker-list-item"
|
||||
@ -61,14 +72,14 @@ class PickerList extends Component<IPickerListProps> {
|
||||
>
|
||||
<div className="list-item-color"
|
||||
style={{
|
||||
backgroundColor: `rgb(${color[0]},${color[1]},${color[2]})`
|
||||
backgroundColor: displayInfo.color
|
||||
}}
|
||||
></div>
|
||||
<div className="list-item-icon">
|
||||
<Icon iconName={icon}/>
|
||||
<Icon iconName={displayInfo.icon}/>
|
||||
</div>
|
||||
<div className="list-item-name">
|
||||
{name}
|
||||
{displayInfo.name}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
@ -124,4 +135,4 @@ class PickerList extends Component<IPickerListProps> {
|
||||
}
|
||||
}
|
||||
|
||||
export { PickerList, IDisplayItem }
|
||||
export { PickerList, IDisplayItem, IDisplayInfo, getObjectDisplayInfo }
|
||||
84
source/Component/TextField/TextField.scss
Normal file
84
source/Component/TextField/TextField.scss
Normal file
@ -0,0 +1,84 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
$line-min-height: 26px;
|
||||
|
||||
div.text-field-root {
|
||||
min-height: $line-min-height;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 5px 0;
|
||||
|
||||
div.text-field-intro {
|
||||
min-height: $line-min-height;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
max-width: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.text-field-container {
|
||||
min-height: $line-min-height;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
max-width: 180px;
|
||||
|
||||
div.text-field-content {
|
||||
min-height: $line-min-height;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div.text-field-content-styled {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div.text-field-content-disable {
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
div.text-field-content-error {
|
||||
border: 1px solid $lt-red;
|
||||
}
|
||||
|
||||
div.text-field-error-message {
|
||||
padding-top: 5px;
|
||||
color: $lt-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.dark.text-field-root {
|
||||
|
||||
div.text-field-content-styled {
|
||||
background-color: $lt-bg-color-lvl3-dark;
|
||||
color: $lt-font-color-normal-dark;
|
||||
}
|
||||
|
||||
div.text-field-content-hover-styled:hover {
|
||||
background-color: $lt-bg-color-lvl2-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.light.text-field-root {
|
||||
|
||||
div.text-field-content-styled {
|
||||
background-color: $lt-bg-color-lvl3-light;
|
||||
color: $lt-font-color-normal-light;
|
||||
}
|
||||
|
||||
div.text-field-content-hover-styled:hover {
|
||||
background-color: $lt-bg-color-lvl2-light;
|
||||
}
|
||||
}
|
||||
104
source/Component/TextField/TextField.tsx
Normal file
104
source/Component/TextField/TextField.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
import { Component, ReactNode, RefObject } from "react";
|
||||
import { FontLevel, Theme } from "@Component/Theme/Theme";
|
||||
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
|
||||
import "./TextField.scss";
|
||||
|
||||
interface ITextFieldProps {
|
||||
className?: string;
|
||||
keyI18n: AllI18nKeys;
|
||||
infoI18n?: AllI18nKeys;
|
||||
disableI18n?: AllI18nKeys;
|
||||
disableI18nOption?: Record<string, string>;
|
||||
errorI18n?: AllI18nKeys;
|
||||
errorI18nOption?: Record<string, string>;
|
||||
targetRef?: RefObject<HTMLDivElement>;
|
||||
customStyle?: boolean;
|
||||
customHoverStyle?: boolean;
|
||||
onClick?: () => any;
|
||||
}
|
||||
|
||||
class TextField extends Component<ITextFieldProps> {
|
||||
|
||||
private renderInput() {
|
||||
|
||||
const classList: string[] = ["text-field-content"];
|
||||
if (this.props.className) {
|
||||
classList.push(this.props.className);
|
||||
}
|
||||
if (!this.props.customStyle) {
|
||||
classList.push("text-field-content-styled");
|
||||
}
|
||||
if (!this.props.customHoverStyle) {
|
||||
classList.push("text-field-content-hover-styled");
|
||||
}
|
||||
if (this.props.errorI18n) {
|
||||
classList.push("text-field-content-error");
|
||||
}
|
||||
|
||||
return <div
|
||||
className={classList.join(" ")}
|
||||
ref={this.props.targetRef}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
{ this.props.children }
|
||||
</div>
|
||||
}
|
||||
|
||||
private renderDisable() {
|
||||
return <div
|
||||
className={
|
||||
`${
|
||||
"text-field-content"
|
||||
} ${
|
||||
"text-field-content-styled"
|
||||
} ${
|
||||
"text-field-content-hover-styled"
|
||||
} ${
|
||||
"text-field-content-disable"
|
||||
}`
|
||||
}
|
||||
ref={this.props.targetRef}
|
||||
style={{ cursor: "not-allowed" }}
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
<Localization
|
||||
i18nKey={this.props.disableI18n ?? "Common.No.Unknown.Error"}
|
||||
options={this.props.disableI18nOption}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
private renderError() {
|
||||
return <div className="text-field-error-message">
|
||||
<Localization
|
||||
i18nKey={this.props.errorI18n ?? "Common.No.Unknown.Error"}
|
||||
options={this.props.errorI18nOption}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <>
|
||||
<Theme className="text-field-root" fontLevel={FontLevel.normal}>
|
||||
<div className="text-field-intro">
|
||||
<Localization i18nKey={this.props.keyI18n}/>
|
||||
</div>
|
||||
<div className="text-field-container">
|
||||
{
|
||||
this.props.disableI18n ?
|
||||
this.renderDisable() :
|
||||
this.renderInput()
|
||||
}
|
||||
{
|
||||
this.props.errorI18n ?
|
||||
this.renderError() :
|
||||
undefined
|
||||
}
|
||||
</div>
|
||||
</Theme>
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
export { TextField, ITextFieldProps };
|
||||
@ -3,62 +3,40 @@
|
||||
$line-min-height: 26px;
|
||||
|
||||
div.toggles-input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-height: $line-min-height;
|
||||
padding: 5px 0;
|
||||
|
||||
div.toggles-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.toggles-content {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
max-width: 180px;
|
||||
min-height: $line-min-height;
|
||||
|
||||
div.checkbox {
|
||||
width: $line-min-height;
|
||||
height: $line-min-height;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
div.checkbox {
|
||||
width: $line-min-height;
|
||||
height: $line-min-height;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.dark.toggles-input {
|
||||
div.dark.text-field-root {
|
||||
|
||||
div.toggles-content div.checkbox {
|
||||
div.toggles-input div.checkbox {
|
||||
background-color: $lt-bg-color-lvl3-dark;
|
||||
color: $lt-font-color-normal-dark;
|
||||
}
|
||||
|
||||
div.toggles-content div.checkbox:hover {
|
||||
div.toggles-input div.checkbox:hover {
|
||||
background-color: $lt-bg-color-lvl2-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.light.toggles-input {
|
||||
div.light.text-field-root {
|
||||
|
||||
div.toggles-content div.checkbox {
|
||||
div.toggles-input div.checkbox {
|
||||
background-color: $lt-bg-color-lvl3-light;
|
||||
color: $lt-font-color-normal-light;
|
||||
}
|
||||
|
||||
div.toggles-content div.checkbox:hover {
|
||||
div.toggles-input div.checkbox:hover {
|
||||
background-color: $lt-bg-color-lvl2-light;
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,10 @@
|
||||
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
|
||||
import { Theme } from "@Component/Theme/Theme";
|
||||
import { Icon } from "@fluentui/react";
|
||||
import { Component, ReactNode } from "react";
|
||||
import { TextField, ITextFieldProps } from "../TextField/TextField";
|
||||
import "./TogglesInput.scss";
|
||||
|
||||
interface ITogglesInputProps {
|
||||
keyI18n: AllI18nKeys;
|
||||
infoI18n?: AllI18nKeys;
|
||||
interface ITogglesInputProps extends ITextFieldProps {
|
||||
value?: boolean;
|
||||
disable?: boolean;
|
||||
onIconName?: string;
|
||||
offIconName?: string;
|
||||
valueChange?: (value: boolean) => any;
|
||||
@ -16,39 +12,40 @@ interface ITogglesInputProps {
|
||||
|
||||
class TogglesInput extends Component<ITogglesInputProps> {
|
||||
public render(): ReactNode {
|
||||
return <Theme className="toggles-input">
|
||||
<div className="toggles-intro">
|
||||
<Localization i18nKey={this.props.keyI18n}/>
|
||||
</div>
|
||||
<div className="toggles-content">
|
||||
<div
|
||||
className="checkbox"
|
||||
return <TextField
|
||||
{...this.props}
|
||||
className="toggles-input"
|
||||
keyI18n={this.props.keyI18n}
|
||||
customHoverStyle
|
||||
customStyle
|
||||
>
|
||||
<div
|
||||
className="checkbox"
|
||||
style={{
|
||||
cursor: this.props.disableI18n ? "not-allowed" : "pointer"
|
||||
}}
|
||||
onClick={(() => {
|
||||
if (this.props.disableI18n) {
|
||||
return;
|
||||
}
|
||||
if (this.props.valueChange) {
|
||||
this.props.valueChange(!this.props.value);
|
||||
}
|
||||
})}
|
||||
>
|
||||
<Icon
|
||||
iconName={
|
||||
this.props.value ?
|
||||
this.props.onIconName ?? "CheckMark" :
|
||||
this.props.offIconName ?? undefined
|
||||
}
|
||||
style={{
|
||||
cursor: this.props.disable ? "not-allowed" : "pointer"
|
||||
display: this.props.value ? "inline-block" :
|
||||
this.props.offIconName ? "inline-block" : "none"
|
||||
}}
|
||||
onClick={(() => {
|
||||
if (this.props.disable) {
|
||||
return;
|
||||
}
|
||||
if (this.props.valueChange) {
|
||||
this.props.valueChange(!this.props.value);
|
||||
}
|
||||
})}
|
||||
>
|
||||
<Icon
|
||||
iconName={
|
||||
this.props.value ?
|
||||
this.props.onIconName ?? "CheckMark" :
|
||||
this.props.offIconName ?? undefined
|
||||
}
|
||||
style={{
|
||||
display: this.props.value ? "inline-block" :
|
||||
this.props.offIconName ? "inline-block" : "none"
|
||||
}}
|
||||
></Icon>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
</Theme>
|
||||
</TextField>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -24,10 +24,12 @@ 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}",
|
||||
"Object.List.No.Data": "There are no objects in the model, click the button to create it",
|
||||
"Object.Picker.List.No.Data": "There is no model in the model for this option",
|
||||
"Panel.Title.Notfound": "{id}",
|
||||
"Panel.Info.Notfound": "This panel with id {id} can not found!",
|
||||
"Panel.Title.Render.View": "Live preview",
|
||||
@ -43,6 +45,7 @@ const EN_US = {
|
||||
"Panel.Title.Group.Details.View": "Group",
|
||||
"Panel.Info.Group.Details.View": "Edit view group attributes",
|
||||
"Common.No.Data": "No Data",
|
||||
"Common.No.Unknown.Error": "Unknown error",
|
||||
"Common.Attr.Title.Basic": "Basic properties",
|
||||
"Common.Attr.Title.Spatial": "Spatial property",
|
||||
"Common.Attr.Title.Individual.Generation": "Individual generation",
|
||||
@ -65,6 +68,11 @@ 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",
|
||||
"Common.Attr.Key.Generation.Count": "Generation count",
|
||||
"Common.Attr.Key.Generation.Point.X": "Generation Point X",
|
||||
"Common.Attr.Key.Generation.Point.Y": "Generation Point Y",
|
||||
"Common.Attr.Key.Generation.Point.Z": "Generation Point Z",
|
||||
"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,10 +24,12 @@ 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}",
|
||||
"Object.List.No.Data": "模型中没有任何对象，点击按钮以创建",
|
||||
"Object.Picker.List.No.Data": "模型中没有合适此选项的模型",
|
||||
"Panel.Title.Notfound": "{id}",
|
||||
"Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!",
|
||||
"Panel.Title.Render.View": "实时预览",
|
||||
@ -43,6 +45,7 @@ const ZH_CN = {
|
||||
"Panel.Title.Group.Details.View": "群",
|
||||
"Panel.Info.Group.Details.View": "编辑查看群属性",
|
||||
"Common.No.Data": "暂无数据",
|
||||
"Common.No.Unknown.Error": "未知错误",
|
||||
"Common.Attr.Title.Basic": "基础属性",
|
||||
"Common.Attr.Title.Spatial": "空间属性",
|
||||
"Common.Attr.Title.Individual.Generation": "个体生成",
|
||||
@ -65,6 +68,11 @@ 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": "生成范围",
|
||||
"Common.Attr.Key.Generation.Count": "生成个数",
|
||||
"Common.Attr.Key.Generation.Point.X": "生成位置 X 坐标",
|
||||
"Common.Attr.Key.Generation.Point.Y": "生成位置 Y 坐标",
|
||||
"Common.Attr.Key.Generation.Point.Z": "生成位置 Z 坐标",
|
||||
"Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
|
||||
"Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
|
||||
"Panel.Info.Group.Details.Attr.Error.Not.Group": "对象不是一个群",
|
||||
|
||||
@ -52,6 +52,31 @@ class CtrlObject extends LabelObject {
|
||||
public delete() {
|
||||
this.model.deleteObject([this]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为相同对象
|
||||
*/
|
||||
public equal(obj: CtrlObject): boolean {
|
||||
return this === obj || this.id === obj.id;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 删除标记
|
||||
*/
|
||||
private deleteFlag: boolean = false;
|
||||
|
||||
/**
|
||||
* 是否被删除
|
||||
*/
|
||||
public isDeleted(): boolean {
|
||||
if (this.deleteFlag) return true;
|
||||
for (let i = 0; i < this.model.objectPool.length; i++) {
|
||||
if (this.model.objectPool[i].equal(this)) return false;
|
||||
}
|
||||
this.deleteFlag = true;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export default CtrlObject;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Individual } from "./Individual";
|
||||
import { CtrlObject } from "./CtrlObject";
|
||||
import type { Behavior } from "./Behavior";
|
||||
import type { Model } from "./Model";
|
||||
import type { Label } from "./Label";
|
||||
|
||||
enum GenMod {
|
||||
Point = "p",
|
||||
@ -23,6 +23,21 @@ class Group extends CtrlObject {
|
||||
*/
|
||||
public genMethod: GenMod = GenMod.Point;
|
||||
|
||||
/**
|
||||
* 生成位置坐标
|
||||
*/
|
||||
public genPoint: number[] = [0, 0, 0];
|
||||
|
||||
/**
|
||||
* 生成范围
|
||||
*/
|
||||
public genRange?: CtrlObject | Label;
|
||||
|
||||
/**
|
||||
* 生成个数
|
||||
*/
|
||||
public genCount?: number = 0;
|
||||
|
||||
/**
|
||||
* 创建个体
|
||||
* @param count 创建数量
|
||||
|
||||
@ -44,13 +44,20 @@ class Label {
|
||||
return this === label || this.id === label.id;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除标记
|
||||
*/
|
||||
private deleteFlag: boolean = false;
|
||||
|
||||
/**
|
||||
* 是否被删除
|
||||
*/
|
||||
public isDeleted(): boolean {
|
||||
if (this.deleteFlag) return true;
|
||||
for (let i = 0; i < this.model.labelPool.length; i++) {
|
||||
if (this.model.labelPool[i].equal(this)) return false;
|
||||
}
|
||||
this.deleteFlag = true;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -90,6 +90,31 @@ class Model extends Emitter<ModelEvent> {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 通过标签获取指定类型的对象
|
||||
* @param label 标签
|
||||
* @param type 筛选类型
|
||||
*/
|
||||
public getObjectByLabel(
|
||||
label: Label, type?:
|
||||
(new (...p: any) => Range) |
|
||||
(new (...p: any) => Group)
|
||||
): CtrlObject[] {
|
||||
const res: CtrlObject[] = [];
|
||||
for (let i = 0; i < this.objectPool.length; i++) {
|
||||
if (this.objectPool[i].hasLabel(label)) {
|
||||
if (type) {
|
||||
if (this.objectPool[i] instanceof type) {
|
||||
res.push(this.objectPool[i]);
|
||||
}
|
||||
} else {
|
||||
res.push(this.objectPool[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加组
|
||||
*/
|
||||
|
||||
@ -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 {}
|
||||
@ -25,58 +26,33 @@ const allOption: IDisplayItem[] = [
|
||||
@useStatusWithEvent("groupAttrChange", "groupLabelChange", "focusObjectChange")
|
||||
class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
|
||||
|
||||
private renderAttrInput(
|
||||
id: ObjectID, key: AllI18nKeys, val: string | number | undefined,
|
||||
change: (val: string, status: Status) => any,
|
||||
step?: number, max?: number, min?: number
|
||||
) {
|
||||
const handelFunc = (e: string) => {
|
||||
if (this.props.status) {
|
||||
change(e, this.props.status);
|
||||
}
|
||||
}
|
||||
if (step) {
|
||||
return <AttrInput
|
||||
id={id} isNumber={true} step={step} keyI18n={key}
|
||||
value={val} max={max} min={min}
|
||||
valueChange={handelFunc}
|
||||
/>
|
||||
} else {
|
||||
return <AttrInput
|
||||
id={id} keyI18n={key} value={val}
|
||||
valueChange={handelFunc}
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
private renderFrom(group: Group) {
|
||||
return <>
|
||||
|
||||
<Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
|
||||
|
||||
{this.renderAttrInput(
|
||||
group.id, "Common.Attr.Key.Display.Name", group.displayName,
|
||||
(val, status) => {
|
||||
status.changeGroupAttrib(group.id, "displayName", val);
|
||||
}
|
||||
)}
|
||||
<AttrInput
|
||||
id={group.id} keyI18n="Common.Attr.Key.Display.Name" value={group.displayName}
|
||||
valueChange={(val) => {
|
||||
this.props.status?.changeGroupAttrib(group.id, "displayName", val);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorInput
|
||||
keyI18n="Common.Attr.Key.Color"
|
||||
value={group.color} normal
|
||||
valueChange={(color) => {
|
||||
if (this.props.status) {
|
||||
this.props.status.changeGroupAttrib(group.id, "color", color);
|
||||
}
|
||||
this.props.status?.changeGroupAttrib(group.id, "color", color);
|
||||
}}
|
||||
/>
|
||||
|
||||
{this.renderAttrInput(
|
||||
group.id, "Common.Attr.Key.Size", group.size,
|
||||
(val, status) => {
|
||||
status.changeGroupAttrib(group.id, "size", (val as any) / 1);
|
||||
}, 10, undefined, 0
|
||||
)}
|
||||
<AttrInput
|
||||
id={group.id} isNumber={true} step={10} keyI18n="Common.Attr.Key.Size"
|
||||
value={group.size} min={0}
|
||||
valueChange={(val) => {
|
||||
this.props.status?.changeGroupAttrib(group.id, "size", (val as any) / 1);
|
||||
}}
|
||||
/>
|
||||
|
||||
<LabelPicker
|
||||
keyI18n="Common.Attr.Key.Label"
|
||||
@ -137,9 +113,77 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<AttrInput
|
||||
id={group.id} isNumber={true} step={1} keyI18n="Common.Attr.Key.Generation.Count"
|
||||
value={group.genCount} min={0} max={1000}
|
||||
valueChange={(val) => {
|
||||
this.props.status?.changeGroupAttrib(group.id, "genCount", (val as any) / 1);
|
||||
}}
|
||||
/>
|
||||
|
||||
{group.genMethod === GenMod.Point ? this.renderPointGenOption(group) : null}
|
||||
|
||||
{group.genMethod === GenMod.Range ? this.renderRangeGenOption(group) : null}
|
||||
|
||||
<TogglesInput
|
||||
keyI18n="Common.Attr.Key.Generation"
|
||||
onIconName="BuildDefinition" offIconName="BuildDefinition"
|
||||
valueChange={() => {
|
||||
console.log("gen");
|
||||
}}
|
||||
/>
|
||||
|
||||
</>
|
||||
}
|
||||
|
||||
private renderPointGenOption(group: Group) {
|
||||
return <>
|
||||
<AttrInput
|
||||
id={group.id} isNumber={true} step={0.1} keyI18n="Common.Attr.Key.Generation.Point.X"
|
||||
value={group.genPoint[0] ?? 0}
|
||||
valueChange={(val) => {
|
||||
group.genPoint[0] = (val as any) / 1;
|
||||
this.props.status?.changeGroupAttrib(group.id, "genPoint", group.genPoint);
|
||||
}}
|
||||
/>
|
||||
|
||||
<AttrInput
|
||||
id={group.id} isNumber={true} step={0.1} keyI18n="Common.Attr.Key.Generation.Point.Y"
|
||||
value={group.genPoint[1] ?? 0}
|
||||
valueChange={(val) => {
|
||||
group.genPoint[1] = (val as any) / 1;
|
||||
this.props.status?.changeGroupAttrib(group.id, "genPoint", group.genPoint);
|
||||
}}
|
||||
/>
|
||||
|
||||
<AttrInput
|
||||
id={group.id} isNumber={true} step={0.1} keyI18n="Common.Attr.Key.Generation.Point.Z"
|
||||
value={group.genPoint[2] ?? 0}
|
||||
valueChange={(val) => {
|
||||
group.genPoint[2] = (val as any) / 1;
|
||||
this.props.status?.changeGroupAttrib(group.id, "genPoint", group.genPoint);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
|
||||
private renderRangeGenOption(group: Group) {
|
||||
return <>
|
||||
<ObjectPicker
|
||||
keyI18n="Common.Attr.Key.Generation.Use.Range"
|
||||
type={["L", "R"]}
|
||||
value={group.genRange}
|
||||
valueChange={(value) => {
|
||||
this.props.status?.changeGroupAttrib(group.id, "genRange", value);
|
||||
}}
|
||||
cleanValue={() => {
|
||||
this.props.status?.changeGroupAttrib(group.id, "genRange", undefined);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
if (this.props.status) {
|
||||
if (this.props.status.focusObject.size <= 0) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user