random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2026-01-01 07:11:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move <Dialog/> state to zustand (#806)

Browse Source
This commit is contained in:
Steve Faulkner
2021-05-20 09:54:26 -05:00
committed by GitHub
parent 4351af986e
commit 42cf814700
9 changed files with 94 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/Explorer/Controls/Dialog.tsx
View File

@@ -15,7 +15,22 @@ import {
ProgressIndicator,
TextField,
} from "@fluentui/react";
import React, { FunctionComponent } from "react";
import React, { FC } from "react";
import create, { UseStore } from "zustand";
export interface DialogState {
visible: boolean;
dialogProps?: DialogProps;
openDialog: (props: DialogProps) => void;
closeDialog: () => void;
}
export const useDialog: UseStore<DialogState> = create((set) => ({
visible: false,
openDialog: (props: DialogProps) => set(() => ({ visible: true, dialogProps: props })),
closeDialog: () =>
set((state) => ({ visible: false, openDialog: state.openDialog, closeDialog: state.closeDialog }), true),
}));
export interface TextFieldProps extends ITextFieldProps {
label: string;
@@ -35,7 +50,6 @@ export interface DialogProps {
title: string;
subText: string;
isModal: boolean;
visible: boolean;
choiceGroupProps?: IChoiceGroupProps;
textFieldProps?: TextFieldProps;
linkProps?: LinkProps;
@@ -56,24 +70,26 @@ const DIALOG_TITLE_FONT_SIZE = "17px";
const DIALOG_TITLE_FONT_WEIGHT = 400;
const DIALOG_SUBTEXT_FONT_SIZE = "15px";
export const Dialog: FunctionComponent<DialogProps> = ({
title,
subText,
isModal,
visible,
choiceGroupProps,
textFieldProps,
linkProps,
progressIndicatorProps,
primaryButtonText,
secondaryButtonText,
onPrimaryButtonClick,
onSecondaryButtonClick,
primaryButtonDisabled,
type,
showCloseButton,
onDismiss,
}: DialogProps) => {
export const Dialog: FC = () => {
const { visible, dialogProps: props } = useDialog();
const {
title,
subText,
isModal,
choiceGroupProps,
textFieldProps,
linkProps,
progressIndicatorProps,
primaryButtonText,
secondaryButtonText,
onPrimaryButtonClick,
onSecondaryButtonClick,
primaryButtonDisabled,
type,
showCloseButton,
onDismiss,
} = props || {};
const dialogProps: IDialogProps = {
hidden: !visible,
dialogContentProps: {
@@ -105,7 +121,7 @@ export const Dialog: FunctionComponent<DialogProps> = ({
}
: {};
return (
return visible ? (
<FluentDialog {...dialogProps}>
{choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
{textFieldProps && <TextField {...textFieldProps} />}
@@ -120,5 +136,7 @@ export const Dialog: FunctionComponent<DialogProps> = ({
{secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
</DialogFooter>
</FluentDialog>
) : (
<></>
);
};