Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrians5j
adrians5j committed Dec 31, 2024
1 parent 198a65d commit 8cdc049
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 176 deletions.
1 change: 0 additions & 1 deletion packages/admin-ui/src/Dialog/components/DialogFooter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from "react";
import { cn } from "~/utils";

export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
actions?: React.ReactNode;
Expand Down
28 changes: 8 additions & 20 deletions packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, { useState, useEffect, useCallback } from "react";
import cloneDeep from "lodash/cloneDeep";
import { css } from "emotion";
import styled from "@emotion/styled";
import {
Dialog,
DialogContent,
DialogTitle,
DialogCancel,
DialogActions,
DialogButton
DialogButton,
DialogAccept
} from "@webiny/ui/Dialog";
import { Form, FormOnSubmit } from "@webiny/form";
import { plugins } from "@webiny/plugins";
Expand All @@ -17,17 +17,11 @@ import GeneralTab from "./EditFieldDialog/GeneralTab";
import ValidatorsTab from "./EditFieldDialog/ValidatorsTab";
import FieldTypeSelector from "./EditFieldDialog/FieldTypeSelector";
import { i18n } from "@webiny/app/i18n";

const t = i18n.namespace("FormEditor.EditFieldDialog");
import { useFormEditor } from "../../Context";
import { FbBuilderFieldPlugin, FbFormModelField } from "~/types";

const dialogBody = css({
"&.webiny-ui-dialog__content": {
width: 875,
height: 450
}
});

const FbFormModelFieldList = styled("div")({
display: "flex",
justifyContent: "center",
Expand Down Expand Up @@ -86,7 +80,7 @@ const EditFieldDialog = ({ field, onSubmit, ...props }: EditFieldDialogProps) =>
<Form data={current} onSubmit={onSubmit}>
{form => (
<>
<DialogContent className={dialogBody}>
<DialogContent>
<Tabs>
<Tab label={t`General`}>
<GeneralTab form={form} field={current} />
Expand All @@ -98,20 +92,14 @@ const EditFieldDialog = ({ field, onSubmit, ...props }: EditFieldDialogProps) =>
)}
</Tabs>
</DialogContent>
<DialogActions
style={{
justifyContent: isNewField ? "space-between" : "flex-end"
}}
>
<DialogActions>
{isNewField && (
<DialogButton
onClick={() => setScreen("fieldType")}
>{t`Go back`}</DialogButton>
)}
<div>
<DialogButton onClick={onClose}>{t`Cancel`}</DialogButton>
<DialogButton onClick={form.submit}>{t`Save`}</DialogButton>
</div>
<DialogButton onClick={onClose}>{t`Cancel`}</DialogButton>
<DialogAccept onClick={form.submit}>{t`Save`}</DialogAccept>
</DialogActions>
</>
)}
Expand All @@ -122,7 +110,7 @@ const EditFieldDialog = ({ field, onSubmit, ...props }: EditFieldDialogProps) =>
default:
render = (
<>
<DialogContent className={dialogBody}>
<DialogContent>
<FbFormModelFieldList>
{plugins
.byType<FbBuilderFieldPlugin>("form-editor-field-type")
Expand Down
190 changes: 35 additions & 155 deletions packages/ui/src/Dialog/Dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,16 @@ import { DialogHeader as AdminUiDialogHeader } from "@webiny/admin-ui/Dialog/com
import { DialogFooter as AdminUiDialogFooter } from "@webiny/admin-ui/Dialog/components/DialogFooter";
import { DialogClose as AdminUiDialogClose } from "@webiny/admin-ui/Dialog/components/DialogClose";

//export type DialogOnClose = (event: DialogOnCloseEventT) => void;
export type DialogOnClose = any;

// export interface DialogProps extends RmwcDialogProps {
// className?: string;
//
// // Component's custom in-line styles.
// style?: React.CSSProperties;
//
// onClose?: (evt: DialogOnCloseEventT) => void;
//
// preventOutsideDismiss?: boolean;
//
// children?: React.ReactNode;
// }

export interface DialogActionsProps {
children: React.ReactNode[] | React.ReactNode;
}

/**
* @deprecated This component is deprecated and will be removed in future releases.
* Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
*/
export const DialogActions = (props: DialogActionsProps) => {
return <AdminUiDialogFooter style={{ marginTop: 32 }} actions={props.children} />;
};
Expand All @@ -36,15 +26,31 @@ export interface DialogAcceptProps extends AdminUiButtonProps {
children?: React.ReactNode[] | React.ReactNode;
}

/**
* @deprecated This component is deprecated and will be removed in future releases.
* Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
*/
export const DialogAccept = (props: DialogAcceptProps) => {
return <AdminUiButton variant={"primary"} {...props} />;
return <AdminUiButton {...props} variant={"primary"} text={props.text || props.children} />;
};

export interface DialogCancelProps extends AdminUiButtonProps {
export interface DialogButtonProps extends AdminUiButtonProps {
children?: React.ReactNode[] | React.ReactNode;
}

export const DialogCancel = (props: DialogCancelProps) => {
/**
* @deprecated This component is deprecated and will be removed in future releases.
* Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
*/
export const DialogButton = (props: DialogButtonProps) => {
return <AdminUiButton {...props} variant={"secondary"} text={props.text || props.children} />;
};

/**
* @deprecated This component is deprecated and will be removed in future releases.
* Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
*/
export const DialogCancel = (props: DialogButtonProps) => {
return (
<AdminUiDialogClose asChild>
<AdminUiButton {...props} variant={"secondary"} text={props.text || props.children} />
Expand All @@ -58,6 +64,10 @@ export interface DialogContentProps {
children: React.ReactNode[] | React.ReactNode;
}

/**
* @deprecated This component is deprecated and will be removed in future releases.
* Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
*/
export const DialogContent = (props: DialogContentProps) => {
return <>{props.children}</>;
};
Expand All @@ -68,12 +78,20 @@ export interface DialogTitleProps {
children: React.ReactNode[] | React.ReactNode;
}

/**
* @deprecated This component is deprecated and will be removed in future releases.
* Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
*/
export const DialogTitle = (props: DialogTitleProps) => {
return <AdminUiDialogHeader title={props.children} description={""} />;
};

DialogTitle.displayName = "DialogTitle";

/**
* @deprecated This component is deprecated and will be removed in future releases.
* Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
*/
export const Dialog = ({ onClose, open, children, showCloseButton }: any) => {
return (
<AdminUiDialog
Expand All @@ -88,142 +106,4 @@ export const Dialog = ({ onClose, open, children, showCloseButton }: any) => {
{children}
</AdminUiDialog>
);

// container: HTMLElement;
//
// constructor(props: DialogProps) {
// super(props);
// /**
// * We can safely cast
// */
// this.container = document.getElementById("dialog-container") as HTMLElement;
//
// if (!this.container) {
// this.container = document.createElement("div");
// this.container.setAttribute("id", "dialog-container");
// const container = this.container;
// document.body && document.body.appendChild(container);
// }
// }
//
// public override render() {
// const { children, ...props } = this.props;
// const container = this.container;
//
// // Let's pass "permanent" / "persistent" / "temporary" flags as "mode" prop instead.
// return ReactDOM.createPortal(
// <RmwcDialog {...getClasses(props, "webiny-ui-dialog")}>{children}</RmwcDialog>,
// container
// );
// }
};

// export interface DialogTitleProps extends RmwcDialogTitleProps {
// /**
// * Title text.
// */
// children: React.ReactNode[] | React.ReactNode;
// }
//
// /**
// * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
// */
// export const DialogTitle = (props: DialogTitleProps) => (
// <RmwcDialogTitle
// {...getClasses(props, "webiny-ui-dialog__title")}
// style={{ marginBottom: "0" }}
// />
// );
//
// export type DialogContentProps = RmwcDialogContentProps & {
// /**
// * Dialog content.
// */
// children: React.ReactNode[] | React.ReactNode;
//
// className?: string;
// };
//
// /**
// * A simple component for showing dialog's body.
// */
// export const DialogContent = (props: DialogContentProps) => (
// <RmwcDialogContent {...getClasses(props, "webiny-ui-dialog__content")} />
// );
//
// export interface DialogActionsProps extends RmwcDialogActionsProps {
// /**
// * Action buttons.
// */
// children: React.ReactNode[] | React.ReactNode;
//
// // Dialog component's custom in-line styles.
// style?: React.CSSProperties;
// }
//
// /**
// * Can be used to show accept and cancel buttons.
// */
// export const DialogActions = (props: DialogActionsProps) => (
// <RmwcDialogActions {...getClasses(props, ["webiny-ui-dialog__actions"])} />
// );
//
// interface DialogButtonProps extends RmwcDialogButtonProps {
// /**
// * Callback to execute then button is clicked.
// */
// onClick?: (e: React.MouseEvent) => void;
//
// className?: string;
// }
//
// /**
// * Use this to show a simple button.
// */
// export const DialogButton = (props: DialogButtonProps) => (
// <RmwcDialogButton {...getClasses(props, "webiny-ui-dialog__button")} />
// );
//
// interface DialogCancelProps extends RmwcDialogButtonProps {
// /**
// * Callback to execute then button is clicked.
// */
// onClick?: (e: React.MouseEvent) => void;
// }
//
// /**
// * Use this to close the dialog without taking any additional action.
// */
// export const DialogCancel = (props: DialogCancelProps) => {
// return (
// <DialogButton
// {...getClasses(props, "webiny-ui-dialog__button webiny-ui-dialog__button--cancel")}
// action="close"
// data-testid="dialog-cancel"
// >
// {props.children}
// </DialogButton>
// );
// };
//
// interface DialogAcceptProps extends RmwcDialogButtonProps {
// /**
// * Callback to execute then button is clicked.
// */
// onClick?: (e: React.MouseEvent) => void;
// }
//
// /**
// * Use this to close the dialog without taking any additional action.
// */
// export const DialogAccept = (props: DialogAcceptProps) => {
// return (
// <DialogButton
// {...getClasses(props, "webiny-ui-dialog__button webiny-ui-dialog__button--accept")}
// action="accept"
// data-testid="dialog-accept"
// >
// {props.children}
// </DialogButton>
// );
// };

0 comments on commit 8cdc049

Please sign in to comment.