Add label picker
This commit is contained in:
@@ -35,6 +35,7 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
|
||||
classList.push("one-line");
|
||||
}
|
||||
const colorCss = `rgb(${label.color.join(",")})`;
|
||||
const isDelete = label.isDeleted();
|
||||
|
||||
return <div
|
||||
style={{
|
||||
@@ -54,7 +55,13 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
|
||||
backgroundColor: colorCss,
|
||||
borderRadius: isFocus ? 0 : 3
|
||||
}}/>
|
||||
<div className="label-name">
|
||||
<div
|
||||
className="label-name"
|
||||
style={{
|
||||
textDecoration: isDelete ? "line-through" : undefined,
|
||||
opacity: isDelete ? ".6" : undefined
|
||||
}}
|
||||
>
|
||||
<div>{label.name}</div>
|
||||
</div>
|
||||
{
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
|
||||
import { PickerList } from "../PickerList/PickerList";
|
||||
import { Label } from "@Model/Label";
|
||||
import { Component, ReactNode } from "react";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { Component, ReactNode, createRef } from "react";
|
||||
import { LabelList } from "../LabelList/LabelList";
|
||||
import "./LabelPicker.scss"
|
||||
|
||||
@@ -8,9 +10,42 @@ interface ILabelPickerProps {
|
||||
keyI18n: AllI18nKeys;
|
||||
infoI18n?: AllI18nKeys;
|
||||
labels: Label[];
|
||||
labelAdd?: (label: Label) => any;
|
||||
labelDelete?: (label: Label) => any;
|
||||
}
|
||||
|
||||
class LabelPicker extends Component<ILabelPickerProps> {
|
||||
interface ILabelPickerState {
|
||||
isPickerVisible: boolean;
|
||||
}
|
||||
|
||||
@useStatusWithEvent("labelAttrChange", "labelChange")
|
||||
class LabelPicker extends Component<ILabelPickerProps & IMixinStatusProps, ILabelPickerState> {
|
||||
|
||||
public constructor(props: ILabelPickerProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isPickerVisible: false
|
||||
}
|
||||
}
|
||||
|
||||
private addButtonRef = createRef<HTMLDivElement>();
|
||||
|
||||
private getOtherLabel() {
|
||||
let res: Label[] = [];
|
||||
let nowLabel: Label[] = this.props.labels ?? [];
|
||||
if (this.props.status) {
|
||||
this.props.status.model.labelPool.forEach((aLabel) => {
|
||||
let isHas = false;
|
||||
nowLabel.forEach((nLabel) => {
|
||||
if (aLabel.equal(nLabel)) isHas = true;
|
||||
})
|
||||
if (!isHas) {
|
||||
res.push(aLabel);
|
||||
}
|
||||
})
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <div
|
||||
@@ -21,15 +56,35 @@ class LabelPicker extends Component<ILabelPickerProps> {
|
||||
</div>
|
||||
<div className="root-content">
|
||||
<LabelList
|
||||
addRef={this.addButtonRef}
|
||||
labels={this.props.labels}
|
||||
minHeight={26}
|
||||
deleteLabel={() => {
|
||||
|
||||
deleteLabel={(label) => {
|
||||
this.props.labelDelete ? this.props.labelDelete(label) : 0;
|
||||
}}
|
||||
addLabel={() => {
|
||||
|
||||
this.setState({
|
||||
isPickerVisible: true
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{this.state.isPickerVisible ? <PickerList
|
||||
objectList={this.getOtherLabel()}
|
||||
dismiss={() => {
|
||||
this.setState({
|
||||
isPickerVisible: false
|
||||
});
|
||||
}}
|
||||
click={(label) => {
|
||||
if (label instanceof Label && this.props.labelAdd) {
|
||||
this.props.labelAdd(label)
|
||||
}
|
||||
this.setState({
|
||||
isPickerVisible: false
|
||||
});
|
||||
}}
|
||||
target={this.addButtonRef}
|
||||
/> : null}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
div.picker-list-root {
|
||||
max-width: 200px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow-y: auto;
|
||||
|
||||
div.picker-list-item {
|
||||
width: 200px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
|
||||
div.list-item-color {
|
||||
width: 3px;
|
||||
height: calc( 100% - 6px );
|
||||
margin: 3px 0 3px 3px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 1000px;
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
div.list-item-icon {
|
||||
width: 30px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.list-item-name {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div.picker-list-item:hover {
|
||||
background-color: rgba($color: #000000, $alpha: .1);
|
||||
}
|
||||
|
||||
span.picker-list-nodata {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
div.picker-list-root::-webkit-scrollbar {
|
||||
width : 0; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 0;
|
||||
}
|
||||
|
||||
div.picker-list-root::-webkit-scrollbar {
|
||||
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 0;
|
||||
}
|
||||
|
||||
div.picker-list-root::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 8px;
|
||||
background-color: rgba($color: #000000, $alpha: .1);
|
||||
}
|
||||
|
||||
div.picker-list-root::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
border-radius: 8px;
|
||||
background-color: rgba($color: #000000, $alpha: 0);
|
||||
}
|
||||
@@ -1,11 +1,86 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { Localization } from "@Component/Localization/Localization";
|
||||
import { Callout, DirectionalHint, Icon } from "@fluentui/react";
|
||||
import { CtrlObject } from "@Model/CtrlObject";
|
||||
import { Group } from "@Model/Group";
|
||||
import { Label } from "@Model/Label";
|
||||
import { Range } from "@Model/Range";
|
||||
import { Component, ReactNode, RefObject } from "react";
|
||||
import "./PickerList.scss";
|
||||
|
||||
interface IPickerListProps {}
|
||||
type IPickerListItem = CtrlObject | Label;
|
||||
|
||||
interface IPickerListProps {
|
||||
objectList?: IPickerListItem[];
|
||||
target?: RefObject<any>;
|
||||
dismiss?: () => any;
|
||||
click?: (item: IPickerListItem) => any;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
return <div
|
||||
className="picker-list-item"
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
if (this.props.click) {
|
||||
this.props.click(item)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="list-item-color"
|
||||
style={{
|
||||
backgroundColor: `rgb(${color[0]},${color[1]},${color[2]})`
|
||||
}}
|
||||
></div>
|
||||
<div className="list-item-icon">
|
||||
<Icon iconName={icon}/>
|
||||
</div>
|
||||
<div className="list-item-name">
|
||||
{name}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <div></div>
|
||||
return <Callout
|
||||
onDismiss={this.props.dismiss}
|
||||
target={this.props.target}
|
||||
directionalHint={DirectionalHint.topAutoEdge}
|
||||
>
|
||||
<div className="picker-list-root">
|
||||
{this.props.objectList ? this.props.objectList.map((item) => {
|
||||
return this.renderItem(item);
|
||||
}) : null}
|
||||
{!this.props.objectList || (this.props.objectList && this.props.objectList.length <= 0) ?
|
||||
<Localization className="picker-list-nodata" i18nKey="Common.Attr.Key.Label.Picker.Nodata"/>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
</Callout>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user