Detach form components to a separate directory
This commit is contained in:
@@ -0,0 +1,78 @@
|
||||
@import "./RainbowBg.scss";
|
||||
|
||||
div.picker-list-root {
|
||||
min-width: 200px;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow-y: auto;
|
||||
|
||||
div.picker-list-item {
|
||||
min-width: 200px;
|
||||
padding-right: 10px;
|
||||
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%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
div.picker-list-item:hover {
|
||||
background-color: rgba($color: #000000, $alpha: .1);
|
||||
}
|
||||
|
||||
span.picker-list-nodata {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
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: .2);
|
||||
}
|
||||
|
||||
div.picker-list-root::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
border-radius: 8px;
|
||||
background-color: rgba($color: #000000, $alpha: 0);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
|
||||
import { Callout, DirectionalHint, Icon } from "@fluentui/react";
|
||||
import { Behavior } from "@Model/Behavior";
|
||||
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";
|
||||
|
||||
type IPickerListItem = CtrlObject | Label | Range | Group | Behavior;
|
||||
interface IDisplayInfo {
|
||||
color: string;
|
||||
icon: string;
|
||||
name: string;
|
||||
internal: boolean;
|
||||
allLabel: boolean;
|
||||
};
|
||||
|
||||
interface IDisplayItem {
|
||||
nameKey: AllI18nKeys;
|
||||
key: string;
|
||||
mark?: boolean;
|
||||
}
|
||||
|
||||
function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
|
||||
|
||||
if (!item) {
|
||||
return {
|
||||
color: "transparent",
|
||||
icon: "Label",
|
||||
name: "Input.Error.Select",
|
||||
internal: true,
|
||||
allLabel: false
|
||||
}
|
||||
}
|
||||
|
||||
let color: number[] | string = [];
|
||||
let icon: string = "tag";
|
||||
let name: string = "";
|
||||
let internal: boolean = false;
|
||||
let allLabel: boolean = false;
|
||||
|
||||
if (item instanceof Range) {
|
||||
icon = "CubeShape"
|
||||
}
|
||||
if (item instanceof Group) {
|
||||
icon = "WebAppBuilderFragment"
|
||||
}
|
||||
if (item instanceof CtrlObject) {
|
||||
color = [];
|
||||
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) {
|
||||
|
||||
if (item.isBuildIn) {
|
||||
internal = true;
|
||||
allLabel = true;
|
||||
color = "transparent";
|
||||
if (item.id === "AllRange") {
|
||||
icon = "ProductList";
|
||||
name = "Build.In.Label.Name.All.Range";
|
||||
} else if (item.id === "AllGroup") {
|
||||
icon = "SizeLegacy";
|
||||
name = "Build.In.Label.Name.All.Group";
|
||||
}
|
||||
}
|
||||
|
||||
else {
|
||||
icon = "tag";
|
||||
color = item.color.concat([]);
|
||||
name = item.name;
|
||||
}
|
||||
}
|
||||
|
||||
if (item instanceof Behavior) {
|
||||
color = item.color;
|
||||
icon = item.iconName;
|
||||
name = item.name;
|
||||
internal = false;
|
||||
allLabel = false;
|
||||
}
|
||||
|
||||
if (Array.isArray(color)) {
|
||||
color = `rgb(${color[0]},${color[1]},${color[2]})`;
|
||||
}
|
||||
|
||||
return {
|
||||
color: color,
|
||||
icon: icon,
|
||||
name: name,
|
||||
internal: internal,
|
||||
allLabel: allLabel
|
||||
}
|
||||
}
|
||||
|
||||
interface IPickerListProps {
|
||||
displayItems?: IDisplayItem[];
|
||||
objectList?: IPickerListItem[];
|
||||
target?: RefObject<any>;
|
||||
noData?: AllI18nKeys;
|
||||
dismiss?: () => any;
|
||||
clickObjectItems?: (item: IPickerListItem) => any;
|
||||
clickDisplayItems?: (item: IDisplayItem) => any;
|
||||
}
|
||||
|
||||
class PickerList extends Component<IPickerListProps> {
|
||||
|
||||
private renderItem(item: IPickerListItem) {
|
||||
const displayInfo = getObjectDisplayInfo(item);
|
||||
|
||||
return <div
|
||||
className="picker-list-item"
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
if (this.props.clickObjectItems) {
|
||||
this.props.clickObjectItems(item)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className={
|
||||
"list-item-color" + (
|
||||
displayInfo.allLabel ? " rainbow-back-ground-color" : ""
|
||||
)
|
||||
}
|
||||
style={{
|
||||
backgroundColor: displayInfo.color
|
||||
}}
|
||||
></div>
|
||||
<div className="list-item-icon">
|
||||
<Icon iconName={displayInfo.icon}/>
|
||||
</div>
|
||||
<div className="list-item-name">
|
||||
{
|
||||
displayInfo.internal ?
|
||||
<Localization i18nKey={displayInfo.name}/> :
|
||||
displayInfo.name
|
||||
}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
private renderString(item: IDisplayItem) {
|
||||
return <div
|
||||
className="picker-list-item"
|
||||
key={item.key}
|
||||
onClick={() => {
|
||||
if (this.props.clickDisplayItems) {
|
||||
this.props.clickDisplayItems(item)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="list-item-icon">
|
||||
<Icon iconName="CheckMark" style={{
|
||||
display: item.mark ? "block" : "none"
|
||||
}}/>
|
||||
</div>
|
||||
<div className="list-item-name">
|
||||
<Localization i18nKey={item.nameKey}/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <Callout
|
||||
onDismiss={this.props.dismiss}
|
||||
target={this.props.target}
|
||||
directionalHint={DirectionalHint.topCenter}
|
||||
>
|
||||
<div className="picker-list-root">
|
||||
{this.props.objectList ? this.props.objectList.map((item) => {
|
||||
return this.renderItem(item);
|
||||
}) : null}
|
||||
{this.props.displayItems ? this.props.displayItems.map((item) => {
|
||||
return this.renderString(item);
|
||||
}) : null}
|
||||
{
|
||||
!(this.props.objectList || this.props.displayItems) ||
|
||||
!(
|
||||
this.props.objectList && this.props.objectList.length > 0 ||
|
||||
this.props.displayItems && this.props.displayItems.length > 0
|
||||
) ?
|
||||
<Localization
|
||||
className="picker-list-nodata"
|
||||
i18nKey={this.props.noData ?? "Common.No.Data"}
|
||||
/>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
</Callout>
|
||||
}
|
||||
}
|
||||
|
||||
export { PickerList, IDisplayItem, IDisplayInfo, getObjectDisplayInfo }
|
||||
@@ -0,0 +1,13 @@
|
||||
div.rainbow-back-ground-color {
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
orangered,
|
||||
orange,
|
||||
gold,
|
||||
lightgreen,
|
||||
cyan,
|
||||
dodgerblue,
|
||||
mediumpurple,
|
||||
hotpink,
|
||||
orangered);
|
||||
}
|
||||
Reference in New Issue
Block a user