Optim object list checkout icon
This commit is contained in:
parent
63f13183d0
commit
851ca149b9
@ -11,7 +11,7 @@ div.details-list {
|
||||
min-height: 30px;
|
||||
|
||||
div.details-list-value {
|
||||
padding: 5px 5px;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -23,10 +23,13 @@ interface IDetailsListProps {
|
||||
click?: () => void;
|
||||
clickLine?: (item: IItems) => any;
|
||||
checkBox?: (data: IItems) => any;
|
||||
renderCheckbox?: (data: IItems, click: () => void) => ReactNode;
|
||||
}
|
||||
|
||||
class DetailsList extends Component<IDetailsListProps> {
|
||||
|
||||
private propagationCount = 0;
|
||||
|
||||
private renderValue<D extends IItems, K extends keyof D>(item: IItems, column: IColumns<D, K>) {
|
||||
const classList: string[] = [];
|
||||
if (!column.noDefaultStyle) {
|
||||
@ -43,15 +46,36 @@ class DetailsList extends Component<IDetailsListProps> {
|
||||
</div>
|
||||
}
|
||||
|
||||
private handelClickCheckbox(item: IItems) {
|
||||
if (this.propagationCount <= 2 && this.props.checkBox) {
|
||||
this.props.checkBox(item);
|
||||
this.propagationCount = 2;
|
||||
}
|
||||
}
|
||||
|
||||
private renderCheckbox(item: IItems) {
|
||||
const { checkboxClassName } = this.props;
|
||||
return <div
|
||||
className={"details-list-checkbox" + (checkboxClassName ? ` ${checkboxClassName}` : "")}
|
||||
onClick={() => this.handelClickCheckbox(item)}
|
||||
>
|
||||
<Icon iconName="CheckMark"></Icon>
|
||||
</div>;
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <Theme
|
||||
className={"details-list" + (this.props.className ? ` ${this.props.className}` : "")}
|
||||
onClick={this.props.click}
|
||||
onClick={() => {
|
||||
if (this.propagationCount <= 0 && this.props.click) {
|
||||
this.props.click();
|
||||
}
|
||||
this.propagationCount = 0;
|
||||
}}
|
||||
backgroundLevel={BackgroundLevel.Level4}
|
||||
fontLevel={FontLevel.normal}
|
||||
>{
|
||||
this.props.items.map((item) => {
|
||||
const { checkboxClassName } = this.props;
|
||||
const classList: string[] = ["details-list-item"];
|
||||
if (item.select) {
|
||||
classList.push("active");
|
||||
@ -59,10 +83,10 @@ class DetailsList extends Component<IDetailsListProps> {
|
||||
return <div
|
||||
className={classList.join(" ")}
|
||||
key={item.key}
|
||||
onClick={(e) => {
|
||||
if (this.props.clickLine) {
|
||||
e.stopPropagation();
|
||||
onClick={() => {
|
||||
if (this.propagationCount <= 1 && this.props.clickLine) {
|
||||
this.props.clickLine(item);
|
||||
this.propagationCount = 1;
|
||||
}
|
||||
}}
|
||||
>
|
||||
@ -75,17 +99,9 @@ class DetailsList extends Component<IDetailsListProps> {
|
||||
}
|
||||
{
|
||||
this.props.hideCheckBox ? null :
|
||||
<div
|
||||
className={"details-list-checkbox" + (checkboxClassName ? ` ${checkboxClassName}` : "")}
|
||||
onClick={(e) => {
|
||||
if (this.props.checkBox) {
|
||||
e.stopPropagation();
|
||||
this.props.checkBox(item);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon iconName="CheckMark"></Icon>
|
||||
</div>
|
||||
this.props.renderCheckbox ?
|
||||
this.props.renderCheckbox(item, () => this.handelClickCheckbox(item)) :
|
||||
this.renderCheckbox(item)
|
||||
}
|
||||
{
|
||||
this.props.columns.map((column) => {
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
@import "../../Component/Theme/Theme.scss";
|
||||
|
||||
div.object-list {
|
||||
min-height: 100%;
|
||||
|
||||
div.object-list-color-value {
|
||||
height: calc( 100% - 6px);
|
||||
margin: 3px 0;
|
||||
@ -8,8 +11,36 @@ div.object-list-color-value {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
div.object-list {
|
||||
min-height: 100%;
|
||||
div.object-list-checkbox {
|
||||
opacity: 1 !important;
|
||||
padding-left: 2px;
|
||||
|
||||
i.checkbox-icon {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
i.type-icon {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
div.details-list-item:hover {
|
||||
|
||||
div.object-list-checkbox {
|
||||
|
||||
i.checkbox-icon {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
i.type-icon {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.object-list-command-bar {
|
||||
|
||||
@ -4,6 +4,7 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { useSetting, IMixinSettingProps } from "@Context/Setting";
|
||||
import { Localization } from "@Component/Localization/Localization";
|
||||
import { ObjectID } from "@Model/Renderer";
|
||||
import { Icon } from "@fluentui/react";
|
||||
import "./ObjectList.scss";
|
||||
|
||||
@useSetting
|
||||
@ -71,6 +72,22 @@ class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
|
||||
this.props.status.setFocusObject(new Set<ObjectID>());
|
||||
}
|
||||
}}
|
||||
renderCheckbox={(item, click) => {
|
||||
let icon = "CheckMark";
|
||||
if (item.key.slice(0, 1) === "R") {
|
||||
icon = "CubeShape";
|
||||
}
|
||||
if (item.key.slice(0, 1) === "G") {
|
||||
icon = "WebAppBuilderFragment";
|
||||
}
|
||||
return <div
|
||||
className="object-list-checkbox details-list-checkbox"
|
||||
onClick={click}
|
||||
>
|
||||
<Icon className="checkbox-icon" iconName="CheckMark"></Icon>
|
||||
<Icon className="type-icon" iconName={icon}></Icon>
|
||||
</div>;
|
||||
}}
|
||||
columns={[
|
||||
{
|
||||
key: "color",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user