95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import { Component, ReactNode, createRef } from "react";
|
|
import { Label } from "@Model/Label";
|
|
import { PickerList } from "@Input/PickerList/PickerList";
|
|
import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
|
|
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
|
import { LabelList } from "@Component/LabelList/LabelList";
|
|
import "./LabelPicker.scss"
|
|
|
|
interface ILabelPickerProps extends ITextFieldProps {
|
|
labels: Label[];
|
|
labelAdd?: (label: Label) => any;
|
|
labelDelete?: (label: Label) => any;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
private renderPicker() {
|
|
return <PickerList
|
|
noData="Common.Attr.Key.Label.Picker.Nodata"
|
|
item={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}
|
|
/>;
|
|
}
|
|
|
|
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>;
|
|
}
|
|
}
|
|
|
|
export { LabelPicker } |