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

Add group details gen & recode input with text field component #22

Merged
MrKBear merged 8 commits from dev-mrkbear into master 2022-03-16 12:50:40 +08:00
Conversation 0 Commits 8 Files Changed 23 +139 -248
6 changed files with 139 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a25c8dd789 - Show all commits

27
source/Component/LabelPicker/LabelPicker.scss
View File

@ -2,31 +2,6 @@
$line-min-height: 26px; $line-min-height: 26px;
div.label-picker-root { div.label-picker {
width: 100%;
display: flex;
flex-wrap: wrap;
min-height: $line-min-height; 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;
}
} }

59
source/Component/LabelPicker/LabelPicker.tsx
View File

@ -1,14 +1,12 @@
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
import { PickerList } from "../PickerList/PickerList"; import { PickerList } from "../PickerList/PickerList";
import { Label } from "@Model/Label"; import { Label } from "@Model/Label";
import { TextField, ITextFieldProps } from "../TextField/TextField";
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status"; import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { Component, ReactNode, createRef } from "react"; import { Component, ReactNode, createRef } from "react";
import { LabelList } from "../LabelList/LabelList"; import { LabelList } from "../LabelList/LabelList";
import "./LabelPicker.scss" import "./LabelPicker.scss"
interface ILabelPickerProps { interface ILabelPickerProps extends ITextFieldProps {
keyI18n: AllI18nKeys;
infoI18n?: AllI18nKeys;
labels: Label[]; labels: Label[];
labelAdd?: (label: Label) => any; labelAdd?: (label: Label) => any;
labelDelete?: (label: Label) => any; labelDelete?: (label: Label) => any;
@ -47,28 +45,8 @@ class LabelPicker extends Component<ILabelPickerProps & IMixinStatusProps, ILabe
return res; return res;
} }
public render(): ReactNode { private renderPicker() {
return <div return <PickerList
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" noData="Common.Attr.Key.Label.Picker.Nodata"
objectList={this.getOtherLabel()} objectList={this.getOtherLabel()}
dismiss={() => { dismiss={() => {
@ -85,9 +63,32 @@ class LabelPicker extends Component<ILabelPickerProps & IMixinStatusProps, ILabe
}); });
}} }}
target={this.addButtonRef} target={this.addButtonRef}
/> : null} />;
</div> }
</div>
public render(): ReactNode {
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>;
} }
} }

59
source/Component/ObjectPicker/ObjectPicker.scss
View File

@ -1,33 +1,8 @@
@import "../Theme/Theme.scss"; @import "../Theme/Theme.scss";
$line-min-height: 26px; $line-min-height: 24px;
div.object-picker-root { div.object-picker {
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 { div.value-view {
width: 100%; width: 100%;
@ -54,33 +29,3 @@ div.object-picker-root {
align-items: 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;
}

23
source/Component/ObjectPicker/ObjectPicker.tsx
View File

@ -2,19 +2,17 @@ import { Component, createRef, ReactNode } from "react";
import { Label } from "@Model/Label"; import { Label } from "@Model/Label";
import { Group } from "@Model/Group"; import { Group } from "@Model/Group";
import { Range } from "@Model/Range"; import { Range } from "@Model/Range";
import { TextField, ITextFieldProps } from "../TextField/TextField";
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status"; import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
import { FontLevel, Theme } from "@Component/Theme/Theme";
import { PickerList, IDisplayItem } from "../PickerList/PickerList"; import { PickerList, IDisplayItem } from "../PickerList/PickerList";
import { AllI18nKeys, Localization } from "@Component/Localization/Localization"; import { Localization } from "@Component/Localization/Localization";
import { Icon } from "@fluentui/react"; import { Icon } from "@fluentui/react";
import CtrlObject from "@Model/CtrlObject"; import CtrlObject from "@Model/CtrlObject";
import "./ObjectPicker.scss"; import "./ObjectPicker.scss";
type IObjectType = Label | Group | Range | CtrlObject; type IObjectType = Label | Group | Range | CtrlObject;
interface IObjectPickerProps { interface IObjectPickerProps extends ITextFieldProps {
keyI18n: AllI18nKeys;
infoI18n?: AllI18nKeys;
type: Array<"L" | "G" | "R">; type: Array<"L" | "G" | "R">;
value?: IObjectType; value?: IObjectType;
valueChange?: (value: IObjectType) => any; valueChange?: (value: IObjectType) => any;
@ -109,13 +107,11 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
} }
return <> return <>
<Theme className="object-picker-root" fontLevel={FontLevel.normal}> <TextField
<div className="input-intro"> {...this.props}
<Localization i18nKey={this.props.keyI18n}/> className="object-picker"
</div> keyI18n={this.props.keyI18n}
<div targetRef={this.pickerTarget}
className="root-content"
ref={this.pickerTarget}
onClick={() => { onClick={() => {
this.setState({ this.setState({
isPickerVisible: true isPickerVisible: true
@ -132,8 +128,7 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
<Localization i18nKey="Input.Error.Select"/> <Localization i18nKey="Input.Error.Select"/>
} }
</div> </div>
</div> </TextField>
</Theme>
{this.state.isPickerVisible ? this.renderPicker(): null} {this.state.isPickerVisible ? this.renderPicker(): null}
</> </>

34
source/Component/TogglesInput/TogglesInput.scss
View File

@ -3,27 +3,6 @@
$line-min-height: 26px; $line-min-height: 26px;
div.toggles-input { 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 { div.checkbox {
width: $line-min-height; width: $line-min-height;
@ -37,28 +16,27 @@ div.toggles-input {
user-select: none; 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; background-color: $lt-bg-color-lvl3-dark;
color: $lt-font-color-normal-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; 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; background-color: $lt-bg-color-lvl3-light;
color: $lt-font-color-normal-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; background-color: $lt-bg-color-lvl2-light;
} }
} }

29
source/Component/TogglesInput/TogglesInput.tsx
View File

@ -1,14 +1,10 @@
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
import { Theme } from "@Component/Theme/Theme";
import { Icon } from "@fluentui/react"; import { Icon } from "@fluentui/react";
import { Component, ReactNode } from "react"; import { Component, ReactNode } from "react";
import { TextField, ITextFieldProps } from "../TextField/TextField";
import "./TogglesInput.scss"; import "./TogglesInput.scss";
interface ITogglesInputProps { interface ITogglesInputProps extends ITextFieldProps {
keyI18n: AllI18nKeys;
infoI18n?: AllI18nKeys;
value?: boolean; value?: boolean;
disable?: boolean;
onIconName?: string; onIconName?: string;
offIconName?: string; offIconName?: string;
valueChange?: (value: boolean) => any; valueChange?: (value: boolean) => any;
@ -16,18 +12,20 @@ interface ITogglesInputProps {
class TogglesInput extends Component<ITogglesInputProps> { class TogglesInput extends Component<ITogglesInputProps> {
public render(): ReactNode { public render(): ReactNode {
return <Theme className="toggles-input"> return <TextField
<div className="toggles-intro"> {...this.props}
<Localization i18nKey={this.props.keyI18n}/> className="toggles-input"
</div> keyI18n={this.props.keyI18n}
<div className="toggles-content"> customHoverStyle
customStyle
>
<div <div
className="checkbox" className="checkbox"
style={{ style={{
cursor: this.props.disable ? "not-allowed" : "pointer" cursor: this.props.disableI18n ? "not-allowed" : "pointer"
}} }}
onClick={(() => { onClick={(() => {
if (this.props.disable) { if (this.props.disableI18n) {
return; return;
} }
if (this.props.valueChange) { if (this.props.valueChange) {
@ -45,10 +43,9 @@ class TogglesInput extends Component<ITogglesInputProps> {
display: this.props.value ? "inline-block" : display: this.props.value ? "inline-block" :
this.props.offIconName ? "inline-block" : "none" this.props.offIconName ? "inline-block" : "none"
}} }}
></Icon> />
</div> </div>
</div> </TextField>;
</Theme>
} }
} }