Skip to content

Commit

Permalink
Control button options working
Browse files Browse the repository at this point in the history
  • Loading branch information
@TrangPham
TrangPham committed Mar 14, 2024
1 parent bc01a06 commit 78ccc2d
Show file tree
Hide file tree
Showing 4 changed files with 241 additions and 80 deletions.
Empty file removed src/controls/ArrayControlButtons.tsx
View file
Empty file.
43 changes: 22 additions & 21 deletions src/controls/ObjectArrayControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,9 @@ import {
} from "@jsonforms/core";
import { JsonFormsDispatch } from "@jsonforms/react";
import { Flex, List, Button } from "antd";
import { ButtonProps } from "antd/lib";
import range from "lodash.range";
import React, { useCallback, useEffect, ComponentType } from "react";

interface ArrayControlButtons {
AddButton?: ComponentType<ButtonProps>;
RemoveButton?: ComponentType<ButtonProps>;
}
import React, { useCallback, useEffect } from "react";
import { ArrayControlOptions } from "../ui-schema";

export function ObjectArrayControl({
enabled,
Expand All @@ -29,9 +24,7 @@ export function ObjectArrayControl({
cells,
rootSchema,
uischemas,
AddButton = Button,
RemoveButton = Button,
}: ArrayControlProps & ArrayControlButtons) {
}: ArrayControlProps) {
const innerCreateDefaultValue = useCallback(
() => createDefaultValue(schema, rootSchema),
[schema, rootSchema],
Expand All @@ -46,6 +39,9 @@ export function ObjectArrayControl({
const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema);
const label = labelDescription.show ? labelDescription.text : "";

const options: ArrayControlOptions =
(uischema.options as ArrayControlOptions) ?? {};

const renderItem = (_item: number, index: number) => {
const foundUISchema = findUISchema(
uischemas ?? [],
Expand All @@ -60,14 +56,15 @@ export function ObjectArrayControl({
<List.Item
key={index}
actions={[
<RemoveButton
<Button
key="remove"
children="Delete"
{...options.removeButtonProps}
disabled={!removeItems || (data === 1 && index === 0)}
onClick={(e) => {
e.stopPropagation();
removeItems?.(path, [index])();
}}
children="Delete"
/>,
]}
>
Expand All @@ -88,23 +85,27 @@ export function ObjectArrayControl({

const addButton = (
<Flex justify="center">
<AddButton
<Button
children={`Add ${label}`}
{...options.addButtonProps}
onClick={(e) => {
e.stopPropagation();
addItem(path, innerCreateDefaultValue())();
}}
children={`Add ${label}`}
/>
</Flex>
);

return (
<List // there's a compelling case to be made for Form.List instead, but going with this for now
dataSource={range(data)}
renderItem={renderItem}
{...(uischema.options?.addButtonLocation?.toUpperCase() === "TOP"
? { header: addButton }
: { footer: addButton })}
/>
<>
<b>{label}</b>
<List // there's a compelling case to be made for Form.List instead, but going with this for now
dataSource={range(data)}
renderItem={renderItem}
{...(options.addButtonLocation === "top"
? { header: addButton }
: { footer: addButton })}
/>
</>
);
}
141 changes: 139 additions & 2 deletions src/stories/controls/ObjectArraryControl.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import type { Meta, StoryObj } from "@storybook/react";
import { rendererRegistryEntries } from "../../renderers";
import { UISchema } from "../../ui-schema";
import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm";
import { PlusCircleTwoTone, DeleteOutlined } from "@ant-design/icons";
import React from "react";

const ObjectArrayControlUISchema: UISchema = {
type: "VerticalLayout",
Expand Down Expand Up @@ -69,7 +71,6 @@ export const ObjectArrayOfBooleans: Story = {
tags: ["autodocs"],
args: {
jsonSchema: {
title: "Yes Or No",
type: "object",
properties: {
options: {
Expand Down Expand Up @@ -102,7 +103,6 @@ export const ObjectArrayWithUiOptionAddButtonTop: Story = {
tags: ["autodocs"],
args: {
jsonSchema: {
title: "Yes Or No",
type: "object",
properties: {
options: {
Expand Down Expand Up @@ -133,3 +133,140 @@ export const ObjectArrayWithUiOptionAddButtonTop: Story = {
},
},
};

export const ObjectArrayWithUiOptionForButtons: Story = {
tags: ["autodocs"],
args: {
jsonSchema: {
type: "object",
properties: {
options: {
type: "array",
items: {
type: "object",
properties: {
option: {
title: "Option",
type: "boolean",
},
},
},
},
},
},
uiSchema: {
type: "VerticalLayout",
elements: [
{
scope: "#/properties/options",
type: "Control",
options: {
addButtonProps: {
children: "Add more items",
type: "primary",
},
removeButtonProps: {
children: "Destory of my life!",
danger: true,
},
},
},
],
},
},
};

export const ObjectArrayWithUiOptionWithIcons: Story = {
tags: ["autodocs"],
args: {
jsonSchema: {
type: "object",
properties: {
options: {
type: "array",
items: {
type: "object",
properties: {
option: {
title: "Option",
type: "boolean",
},
},
},
},
},
},
uiSchema: {
type: "VerticalLayout",
elements: [
{
scope: "#/properties/options",
type: "Control",
options: {
addButtonProps: {
children: "Add more items",
icon: <PlusCircleTwoTone />,
type: "primary",
},
removeButtonProps: {
children: "Destroy me!",
icon: <DeleteOutlined />,
danger: true,
onClick: (e) => {}, // User should be unable to override the onClick event
},
},
},
],
},
},
};

export const ObjectArrayWithMultipleProperties: Story = {
tags: ["autodocs"],
args: {
jsonSchema: {
type: "object",
properties: {
guest_list: {
type: "array",
items: {
type: "object",
properties: {
name: {
title: "name",
type: "string",
},
gluten_free: {
title: "gluten-free",
type: "boolean",
},
vegan: {
title: "vegan",
type: "boolean",
},
},
},
},
},
},
uiSchema: {
type: "VerticalLayout",
elements: [
{
scope: "#/properties/guest_list",
type: "Control",
options: {
addButtonProps: {
children: "Add Guest",
type: "primary",
},
removeButtonProps: {
children: "Remove",
danger: true,
},
},
},
],
},
},
};
Loading

0 comments on commit 78ccc2d

Please sign in to comment.