Переглянути джерело

update default prop and prop names

Abhinav 3 роки тому
батько
коміт
d312d6c339

+ 4 - 4
src/components/Collections/CollectionShare.tsx

@@ -352,8 +352,8 @@ function CollectionShare(props: Props) {
 
 
     return (
     return (
         <DialogBox
         <DialogBox
-            show={props.show}
-            onHide={props.onHide}
+            open={props.show}
+            onClose={props.onHide}
             attributes={{
             attributes={{
                 title: constants.SHARE_COLLECTION,
                 title: constants.SHARE_COLLECTION,
                 staticBackdrop: true,
                 staticBackdrop: true,
@@ -574,8 +574,8 @@ function CollectionShare(props: Props) {
                                 </OptionRow>
                                 </OptionRow>
                             </section>
                             </section>
                             <DialogBox
                             <DialogBox
-                                show={configurePassword}
-                                onHide={() => setConfigurePassword(false)}
+                                open={configurePassword}
+                                onClose={() => setConfigurePassword(false)}
                                 size="sm"
                                 size="sm"
                                 attributes={{
                                 attributes={{
                                     title: constants.PASSWORD_LOCK,
                                     title: constants.PASSWORD_LOCK,

+ 5 - 0
src/components/DialogBox/base.tsx

@@ -18,4 +18,9 @@ const DialogBoxBase = styled(Dialog)(({ theme }) => ({
     },
     },
 }));
 }));
 
 
+DialogBoxBase.defaultProps = {
+    fullWidth: true,
+    maxWidth: 'sm',
+};
+
 export default DialogBoxBase;
 export default DialogBoxBase;

+ 9 - 9
src/components/DialogBox/index.tsx

@@ -35,16 +35,16 @@ export interface DialogBoxAttributes {
 export type SetDialogBoxAttributes = React.Dispatch<
 export type SetDialogBoxAttributes = React.Dispatch<
     React.SetStateAction<DialogBoxAttributes>
     React.SetStateAction<DialogBoxAttributes>
 >;
 >;
-type Props = React.PropsWithChildren<
-    Omit<DialogProps, 'open' | 'onClose' | 'maxSize'> & {
-        show: boolean;
-        onHide: () => void;
+
+type IProps = React.PropsWithChildren<
+    Omit<DialogProps, 'onClose' | 'maxSize'> & {
+        onClose: () => void;
         attributes: DialogBoxAttributes;
         attributes: DialogBoxAttributes;
         size?: Breakpoint;
         size?: Breakpoint;
     }
     }
 >;
 >;
 
 
-export default function DialogBox({ attributes, children, ...props }: Props) {
+export default function DialogBox({ attributes, children, ...props }: IProps) {
     if (!attributes) {
     if (!attributes) {
         return <Dialog open={false} />;
         return <Dialog open={false} />;
     }
     }
@@ -55,13 +55,13 @@ export default function DialogBox({ attributes, children, ...props }: Props) {
         } else if (attributes?.staticBackdrop && reason === 'backdropClick') {
         } else if (attributes?.staticBackdrop && reason === 'backdropClick') {
             // no-op
             // no-op
         } else {
         } else {
-            props.onHide();
+            props.onClose();
         }
         }
     };
     };
 
 
     return (
     return (
         <DialogBoxBase
         <DialogBoxBase
-            open={props.show}
+            open={props.open}
             maxWidth={props.size}
             maxWidth={props.size}
             onClose={handleClose}
             onClose={handleClose}
             {...props}>
             {...props}>
@@ -91,7 +91,7 @@ export default function DialogBox({ attributes, children, ...props }: Props) {
                                 onClick={() => {
                                 onClick={() => {
                                     attributes.close.action &&
                                     attributes.close.action &&
                                         attributes.close?.action();
                                         attributes.close?.action();
-                                    props.onHide();
+                                    props.onClose();
                                 }}>
                                 }}>
                                 {attributes.close?.text ?? constants.OK}
                                 {attributes.close?.text ?? constants.OK}
                             </Button>
                             </Button>
@@ -101,7 +101,7 @@ export default function DialogBox({ attributes, children, ...props }: Props) {
                                 color={attributes.proceed?.variant ?? 'primary'}
                                 color={attributes.proceed?.variant ?? 'primary'}
                                 onClick={() => {
                                 onClick={() => {
                                     attributes.proceed.action();
                                     attributes.proceed.action();
-                                    props.onHide();
+                                    props.onClose();
                                 }}
                                 }}
                                 disabled={attributes.proceed.disabled}>
                                 disabled={attributes.proceed.disabled}>
                                 {attributes.proceed.text}
                                 {attributes.proceed.text}

+ 2 - 2
src/components/ExportModal.tsx

@@ -313,8 +313,8 @@ export default function ExportModal(props: Props) {
 
 
     return (
     return (
         <DialogBox
         <DialogBox
-            show={props.show}
-            onHide={props.onHide}
+            open={props.show}
+            onClose={props.onHide}
             attributes={{
             attributes={{
                 title: constants.EXPORT_DATA,
                 title: constants.EXPORT_DATA,
             }}>
             }}>

+ 2 - 2
src/components/FixCreationTime/index.tsx

@@ -94,8 +94,8 @@ export default function FixCreationTime(props: Props) {
 
 
     return (
     return (
         <DialogBox
         <DialogBox
-            show={props.isOpen}
-            onHide={props.hide}
+            open={props.isOpen}
+            onClose={props.hide}
             attributes={{
             attributes={{
                 title:
                 title:
                     fixState === FIX_STATE.RUNNING
                     fixState === FIX_STATE.RUNNING

+ 2 - 2
src/components/FixLargeThumbnail.tsx

@@ -137,8 +137,8 @@ export default function FixLargeThumbnails(props: Props) {
     };
     };
     return (
     return (
         <DialogBox
         <DialogBox
-            show={props.isOpen}
-            onHide={props.hide}
+            open={props.isOpen}
+            onClose={props.hide}
             attributes={{
             attributes={{
                 title: constants.COMPRESS_THUMBNAILS,
                 title: constants.COMPRESS_THUMBNAILS,
                 staticBackdrop: true,
                 staticBackdrop: true,

+ 2 - 2
src/components/RecoveryKey/index.tsx

@@ -57,8 +57,8 @@ function RecoveryKey({ somethingWentWrong, ...props }: Props) {
 
 
     return (
     return (
         <DialogBox
         <DialogBox
-            show={props.show}
-            onHide={props.onHide}
+            open={props.show}
+            onClose={props.onHide}
             size="sm"
             size="sm"
             attributes={recoveryKeyDialogAttributes}>
             attributes={recoveryKeyDialogAttributes}>
             <Typography mb={3}>{constants.RECOVERY_KEY_DESCRIPTION}</Typography>
             <Typography mb={3}>{constants.RECOVERY_KEY_DESCRIPTION}</Typography>

+ 2 - 2
src/components/TwoFactor/Modal/index.tsx

@@ -44,8 +44,8 @@ function TwoFactorModal(props: Props) {
         <DialogBox
         <DialogBox
             size="xs"
             size="xs"
             fullWidth
             fullWidth
-            show={props.show}
-            onHide={props.onHide}
+            open={props.show}
+            onClose={props.onHide}
             attributes={{
             attributes={{
                 title: constants.TWO_FACTOR_AUTHENTICATION,
                 title: constants.TWO_FACTOR_AUTHENTICATION,
                 staticBackdrop: true,
                 staticBackdrop: true,

+ 2 - 2
src/components/pages/gallery/Upload.tsx

@@ -422,8 +422,8 @@ export default function Upload(props: Props) {
     return (
     return (
         <>
         <>
             <UploadStrategyChoiceModal
             <UploadStrategyChoiceModal
-                show={choiceModalView}
-                onHide={() => setChoiceModalView(false)}
+                open={choiceModalView}
+                onClose={() => setChoiceModalView(false)}
                 uploadToSingleCollection={() =>
                 uploadToSingleCollection={() =>
                     uploadToSingleNewCollection(
                     uploadToSingleNewCollection(
                         analysisResult.suggestedCollectionName
                         analysisResult.suggestedCollectionName

+ 4 - 4
src/components/pages/gallery/UploadStrategyChoiceModal.tsx

@@ -5,8 +5,8 @@ import constants from 'utils/strings/constants';
 
 
 interface Props {
 interface Props {
     uploadToMultipleCollection: () => void;
     uploadToMultipleCollection: () => void;
-    show: boolean;
-    onHide: () => void;
+    open: boolean;
+    onClose: () => void;
     uploadToSingleCollection: () => void;
     uploadToSingleCollection: () => void;
 }
 }
 function UploadStrategyChoiceModal({
 function UploadStrategyChoiceModal({
@@ -37,7 +37,7 @@ function UploadStrategyChoiceModal({
                 <Button
                 <Button
                     variant="outline-success"
                     variant="outline-success"
                     onClick={() => {
                     onClick={() => {
-                        props.onHide();
+                        props.onClose();
                         uploadToSingleCollection();
                         uploadToSingleCollection();
                     }}
                     }}
                     style={{
                     style={{
@@ -58,7 +58,7 @@ function UploadStrategyChoiceModal({
                 <Button
                 <Button
                     variant="outline-success"
                     variant="outline-success"
                     onClick={() => {
                     onClick={() => {
-                        props.onHide();
+                        props.onClose();
                         uploadToMultipleCollection();
                         uploadToMultipleCollection();
                     }}
                     }}
                     style={{
                     style={{

+ 2 - 2
src/components/pages/sharedAlbum/AbuseReportForm.tsx

@@ -99,9 +99,9 @@ export function AbuseReportForm({ show, close, url }: Iprops) {
 
 
     return (
     return (
         <DialogBox
         <DialogBox
-            show={show}
+            open={show}
             size="lg"
             size="lg"
-            onHide={close}
+            onClose={close}
             attributes={{
             attributes={{
                 title: constants.ABUSE_REPORT,
                 title: constants.ABUSE_REPORT,
                 staticBackdrop: true,
                 staticBackdrop: true,

+ 2 - 2
src/pages/_app.tsx

@@ -285,8 +285,8 @@ export default function App({ Component, err }) {
                     <DialogBox
                     <DialogBox
                         fullWidth
                         fullWidth
                         size="sm"
                         size="sm"
-                        show={messageDialogView}
-                        onHide={closeMessageDialog}
+                        open={messageDialogView}
+                        onClose={closeMessageDialog}
                         attributes={dialogMessage}
                         attributes={dialogMessage}
                     />
                     />