@ant-design/icons#GoldenFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#GoldenFilled.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: any-brick.editor.tsx From next-basics with GNU General Public License v3.0 | 5 votes |
export function AnyBrickEditor({
nodeUid,
}: EditorComponentProps): React.ReactElement {
const node = useBuilderNode({ nodeUid });
const mountPoints = useBuilderNodeMountPoints({ nodeUid });
let icon: JSX.Element;
let displayType = DisplayType.DEFAULT;
if (node.type === "provider" || node.bg) {
displayType = DisplayType.PROVIDER;
icon = <DatabaseFilled />;
} else if (node.type === "template") {
displayType = DisplayType.TEMPLATE;
icon = <GoldenFilled />;
} else if (node.portal) {
displayType = DisplayType.PORTAL;
icon = <MessageFilled />;
}
return (
<EditorContainer nodeUid={nodeUid}>
<div
className={classNames(
styles.wrapper,
styles[displayType],
mountPoints.length > 0 ? styles.hasChildren : styles.noChildren,
{
[styles.isExpandableTemplate]: node.$$isExpandableTemplate,
}
)}
>
{mountPoints.length > 0 ? (
mountPoints.map((mountPoint) => (
<SlotContainer
key={mountPoint}
nodeUid={nodeUid}
slotName={mountPoint}
/>
))
) : (
<>
{icon && <div className={styles.icon}>{icon}</div>}
<div className={styles.name}>{node.alias}</div>
</>
)}
</div>
</EditorContainer>
);
}
Example #2
Source File: BrickItem.spec.tsx From next-basics with GNU General Public License v3.0 | 4 votes |
describe("BrickItem", () => {
afterEach(() => {
jest.clearAllMocks();
});
it("should display a brick", () => {
const dragRef = jest.fn();
mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
const mockOnDraggingChange = jest.fn();
const wrapper = mount(
<BrickItem
brick={{
type: "brick",
id: "my.awesome-brick",
title: "awesome-brick",
description: "My awesome brick",
}}
onDraggingChange={mockOnDraggingChange}
/>
);
expect(wrapper.find(".brickItem").hasClass("brick")).toBe(true);
expect(wrapper.find(".brickItem").prop("title")).toBe("My awesome brick");
expect(wrapper.find(BuildFilled).length).toBe(1);
expect(wrapper.find(".brickName").text()).toBe("awesome-brick");
expect(mockUseDrag).toBeCalledWith(
expect.objectContaining({
item: {
type: BuilderDataTransferType.NODE_TO_ADD,
brickType: undefined,
brick: "my.awesome-brick",
},
})
);
expect(mockOnDraggingChange).toBeCalledWith(false);
});
it("should display a provider", () => {
const dragRef = jest.fn();
mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
const wrapper = shallow(
<BrickItem
brick={{
type: "provider",
id: "my.awesome-provider",
title: "awesome-provider",
}}
/>
);
expect(wrapper.find(".brickItem").hasClass("provider")).toBe(true);
expect(wrapper.find(".brickItem").prop("title")).toBe("awesome-provider");
expect(wrapper.find(DatabaseFilled).length).toBe(1);
expect(wrapper.find(".brickName").text()).toBe("awesome-provider");
expect(mockUseDrag).toBeCalledWith(
expect.objectContaining({
item: {
type: BuilderDataTransferType.NODE_TO_ADD,
brickType: "provider",
brick: "my.awesome-provider",
},
})
);
});
it("should display a legacy template", () => {
const dragRef = jest.fn();
mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
const wrapper = shallow(
<BrickItem
brick={{
type: "template",
id: "my.awesome-template",
title: "awesome-template",
}}
/>
);
expect(wrapper.find(".brickItem").hasClass("template")).toBe(true);
expect(wrapper.find(GoldenFilled).length).toBe(1);
expect(wrapper.find(".brickName").text()).toBe("awesome-template");
expect(mockUseDrag).toBeCalledWith(
expect.objectContaining({
item: {
type: BuilderDataTransferType.NODE_TO_ADD,
brickType: "template",
brick: "my.awesome-template",
},
})
);
});
it("should display a custom template", () => {
const dragRef = jest.fn();
mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
const wrapper = shallow(
<BrickItem
brick={{
type: "customTemplate",
id: "my.awesome-custom-template",
title: "awesome-custom-template",
}}
/>
);
expect(wrapper.find(".brickItem").hasClass("customTemplate")).toBe(true);
expect(wrapper.find(CopyFilled).length).toBe(1);
expect(wrapper.find(".brickName").text()).toBe("awesome-custom-template");
expect(mockUseDrag).toBeCalledWith(
expect.objectContaining({
item: {
type: BuilderDataTransferType.NODE_TO_ADD,
brickType: undefined,
brick: "my.awesome-custom-template",
},
})
);
});
it("should display a snippet", () => {
const dragRef = jest.fn();
mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
const wrapper = shallow(
<BrickItem
brick={{
type: "snippet",
id: "my.snippet",
title: "My Snippet",
bricks: [
{
brick: "easy-view",
},
],
thumbnail: "test.svg",
}}
/>
);
expect(wrapper.find(".brickItem").hasClass("snippet")).toBe(true);
expect(wrapper.find(".brickIcon img").prop("src")).toBe("test.svg");
expect(wrapper.find(NumberOutlined).length).toBe(0);
expect(wrapper.find(".brickName").text()).toBe("My Snippet");
expect(mockUseDrag).toBeCalledWith(
expect.objectContaining({
item: {
type: BuilderDataTransferType.SNIPPET_TO_APPLY,
bricks: [
{
brick: "easy-view",
},
],
},
})
);
});
it("should display a snippet without thumbnail", () => {
const dragRef = jest.fn();
mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
const wrapper = shallow(
<BrickItem
brick={{
type: "snippet",
id: "my.snippet",
title: "My Snippet",
bricks: [
{
brick: "easy-view",
},
],
}}
/>
);
expect(wrapper.find(".brickItem").hasClass("snippet")).toBe(true);
expect(wrapper.find(NumberOutlined).length).toBe(1);
expect(wrapper.find(".brickIcon img").length).toBe(0);
});
it("should render icon", () => {
const dragRef = jest.fn();
mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
const wrapper = shallow(
<BrickItem
brick={{
category: "form-input",
icon: {
lib: "fa",
icon: "abacus",
},
type: "brick",
id: "my.awesome-brick",
title: "awesome-brick",
}}
/>
);
expect(wrapper.find(GeneralIcon).prop("icon")).toEqual({
icon: "abacus",
lib: "fa",
});
});
it("should show thumbnail while layerType was widget", () => {
const dragRef = jest.fn();
mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
const wrapper = shallow(
<BrickItem
brick={{
type: "brick",
id: "widget-project.my-widget",
title: "my-widget",
thumbnail: "xxx.png",
}}
layerType={LayerType.WIDGET}
/>
);
expect(wrapper.find(".brickIcon img").prop("src")).toBe("xxx.png");
});
it("should show BuildFilled while layType was widget and thumbnail was null", () => {
const dragRef = jest.fn();
mockUseDrag.mockReturnValueOnce([{ isDragging: false }, dragRef]);
const wrapper = shallow(
<BrickItem
brick={{
type: "brick",
id: "widget-project.my-widget",
title: "my-widget",
thumbnail: null,
}}
layerType={LayerType.WIDGET}
/>
);
expect(wrapper.find(BuildFilled).length).toBe(1);
});
});
Example #3
Source File: BrickItem.tsx From next-basics with GNU General Public License v3.0 | 4 votes |
export function BrickItem({
brick,
onDraggingChange,
layerType,
}: BrickItemProps): React.ReactElement {
let brickType: string;
switch (brick.type) {
case "provider":
case "template":
brickType = brick.type;
// `customTemplate` will be treated as `brick`.
}
const transferItem =
brick.type === "snippet"
? {
type: BuilderDataTransferType.SNIPPET_TO_APPLY,
bricks: brick.bricks,
}
: {
type: BuilderDataTransferType.NODE_TO_ADD,
brickType,
brick: brick.id,
};
const [{ isDragging }, dragRef] = useDrag({
item: transferItem,
options: {
dropEffect: "copy",
},
collect: /* istanbul ignore next */ (monitor) => ({
isDragging: monitor.isDragging(),
}),
});
useEffect(() => {
onDraggingChange?.(isDragging);
}, [isDragging, onDraggingChange]);
let icon: JSX.Element;
if (brick.icon) {
icon = <GeneralIcon icon={brick.icon} />;
} else if (layerType === "widget") {
icon = brick.thumbnail ? (
<img
style={{
width: "auto",
height: "100%",
}}
src={brick.thumbnail}
/>
) : (
<BuildFilled />
);
} else {
switch (brick.type) {
case "provider":
icon = <DatabaseFilled />;
break;
case "template":
icon = <GoldenFilled />;
break;
case "customTemplate":
icon = (
<CopyFilled
className={classNames({
[styles.thumbnailType]: layerType !== LayerType.BRICK,
})}
/>
);
break;
case "snippet":
icon = brick.thumbnail ? (
<img src={brick.thumbnail} />
) : (
<NumberOutlined
className={classNames({
[styles.thumbnailType]: layerType !== LayerType.BRICK,
})}
/>
);
break;
default:
icon = <BuildFilled />;
}
}
return (
<div
className={`${styles.brickItem} ${styles[brick.type]} ${
styles[`layer-${layerType ?? LayerType.BRICK}`]
}`}
title={brick.description || brick.title}
ref={dragRef}
>
<span className={styles.brickIcon}>{icon}</span>
<span className={styles.brickName}>{brick.title}</span>
</div>
);
}