admin/webstudio
1
0 Fork 0
mirror of https://github.com/webstudio-is/webstudio.git synced 2026-11-08 04:55:06 +09:00
Code Issues Packages Projects Releases Wiki Activity

add a tag prop with a list of predefined container tags

Browse Source
This commit is contained in:
Oleg Isonen committed 2022-07-24 19:21:16 +02:00
1 parent 8588651576
commit 089ea60725
4 files changed
+167 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/designer/app/designer/features/props-panel/use-props-logic.test.ts
+76 -13
View File
@@ -102,20 +102,26 @@ describe("usePropsLogic", () => {
})
);
expect(result.current.userProps.length).toEqual(0);
expect(result.current.userProps.length).toEqual(1);
act(() => {
result.current.addEmptyProp();
});
expect(result.current.userProps.length).toEqual(1);
expect(result.current.userProps[0]).toMatchObject({ prop: "", value: "" });
expect(result.current.userProps.length).toEqual(2);
expect(result.current.userProps[1]).toMatchObject({ prop: "", value: "" });
});
test("should remove a prop", () => {
const { result } = renderHook(() =>
usePropsLogic({
selectedInstanceData: getSelectedInstanceData("Box", [
{
id: "1",
prop: "tag",
value: "div",
required: true,
},
{
id: "disabled",
prop: "disabled",
@@ -130,14 +136,29 @@ describe("usePropsLogic", () => {
result.current.handleDeleteProp("disabled");
});
expect(result.current.userProps.length).toEqual(0);
expect(result.current.userProps).toMatchInlineSnapshot(`Array []`);
expect(result.current.userProps.length).toEqual(1);
expect(result.current.userProps).toMatchInlineSnapshot(`
Array [
Object {
"id": "1",
"prop": "tag",
"required": true,
"value": "div",
},
]
`);
});
test("should update a prop", () => {
const { result } = renderHook(() =>
usePropsLogic({
selectedInstanceData: getSelectedInstanceData("Box", [
{
id: "1",
prop: "tag",
value: "div",
required: true,
},
{
id: "disabled",
prop: "disabled",
@@ -158,6 +179,12 @@ describe("usePropsLogic", () => {
expect(result.current.userProps).toMatchInlineSnapshot(`
Array [
Object {
"id": "1",
"prop": "tag",
"required": true,
"value": "div",
},
Object {
"id": "disabled",
"prop": "disabled2",
@@ -171,6 +198,12 @@ describe("usePropsLogic", () => {
const { result } = renderHook(() =>
usePropsLogic({
selectedInstanceData: getSelectedInstanceData("Box", [
{
id: "1",
prop: "tag",
value: "div",
required: true,
},
{
id: "disabled",
prop: "disabled",
@@ -182,15 +215,21 @@ describe("usePropsLogic", () => {
})
);
expect(result.current.userProps.length).toEqual(1);
expect(result.current.userProps.length).toEqual(2);
act(() => {
result.current.handleDeleteProp("disabled");
});
expect(result.current.userProps.length).toEqual(1);
expect(result.current.userProps.length).toEqual(2);
expect(result.current.userProps).toMatchInlineSnapshot(`
Array [
Object {
"id": "1",
"prop": "tag",
"required": true,
"value": "div",
},
Object {
"id": "disabled",
"prop": "disabled",
@@ -206,7 +245,13 @@ describe("usePropsLogic", () => {
usePropsLogic({
selectedInstanceData: getSelectedInstanceData("Box", [
{
id: "test",
id: "1",
prop: "tag",
value: "div",
required: true,
},
{
id: "2",
prop: "test",
value: "test",
required: true,
@@ -217,13 +262,19 @@ describe("usePropsLogic", () => {
);
act(() => {
result.current.handleChangeProp("test", "prop", "test-example");
result.current.handleChangeProp("2", "prop", "test-example");
});
expect(result.current.userProps).toMatchInlineSnapshot(`
Array [
Object {
"id": "test",
"id": "1",
"prop": "tag",
"required": true,
"value": "div",
},
Object {
"id": "2",
"prop": "test",
"required": true,
"value": "test",
@@ -237,7 +288,13 @@ describe("usePropsLogic", () => {
usePropsLogic({
selectedInstanceData: getSelectedInstanceData("Box", [
{
id: "test",
id: "1",
prop: "tag",
value: "div",
required: true,
},
{
id: "2",
prop: "test",
value: true,
required: true,
@@ -248,13 +305,19 @@ describe("usePropsLogic", () => {
);
act(() => {
result.current.handleChangeProp("test", "value", false);
result.current.handleChangeProp("2", "value", false);
});
expect(result.current.userProps).toMatchInlineSnapshot(`
Array [
Object {
"id": "test",
"id": "1",
"prop": "tag",
"required": true,
"value": "div",
},
Object {
"id": "2",
"prop": "test",
"required": true,
"value": false,
packages/react-sdk/src/components/box.props.json
+65
View File
@@ -2200,5 +2200,70 @@
"control": {
"type": "text"
}
},
"tag": {
"defaultValue": {
"value": "div"
},
"description": "",
"name": "tag",
"declarations": [
{
"fileName": "src/components/box.tsx",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "enum",
"raw": "\"div\" | \"address\" | \"article\" | \"aside\" | \"figure\" | \"footer\" | \"header\" | \"main\" | \"nav\" | \"section\"",
"value": [
{
"value": "\"div\""
},
{
"value": "\"address\""
},
{
"value": "\"article\""
},
{
"value": "\"aside\""
},
{
"value": "\"figure\""
},
{
"value": "\"footer\""
},
{
"value": "\"header\""
},
{
"value": "\"main\""
},
{
"value": "\"nav\""
},
{
"value": "\"section\""
}
]
},
"control": {
"type": "select"
},
"options": [
"div",
"address",
"article",
"aside",
"figure",
"footer",
"header",
"main",
"nav",
"section"
]
}
}
packages/react-sdk/src/components/box.tsx
+25 -5
View File
@@ -1,10 +1,30 @@
import React, { forwardRef, type ElementRef, type ComponentProps } from "react";
import React, {
createElement,
forwardRef,
type ElementRef,
type ComponentProps,
} from "react";
const defaultTag = "div";
export const Box = forwardRef<
ElementRef<typeof defaultTag>,
ComponentProps<typeof defaultTag>
>((props, ref) => <div {...props} ref={ref} />);
type Props = ComponentProps<typeof defaultTag> & {
tag?:
| "div"
| "header"
| "footer"
| "nav"
| "main"
| "section"
| "article"
| "aside"
| "address"
| "figure";
};
export const Box = forwardRef<ElementRef<typeof defaultTag>, Props>(
({ tag = defaultTag, ...props }, ref) => {
return createElement(tag as string, { ...props, ref });
}
);
Box.displayName = "Box";
packages/react-sdk/src/components/heading.tsx
+1 -5
View File
@@ -12,13 +12,9 @@ type Props = ComponentProps<typeof defaultTag> & {
};
export const Heading = forwardRef<ElementRef<typeof defaultTag>, Props>(
({ tag, ...props }, ref) => {
({ tag = defaultTag, ...props }, ref) => {
return createElement(tag as string, { ...props, ref });
}
);
Heading.defaultProps = {
tag: "h1",
};
Heading.displayName = "Heading";