Designer wants to hide additional buttons in edit mode

Dexels · Nov 26, 2021 · 0f266f9 · 0f266f9
1 parent 20b2130
commit 0f266f9
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 87 deletions.
diff --git a/src/app/components/organisms/EditableInformation/EditableInformation.stories.tsx b/src/app/components/organisms/EditableInformation/EditableInformation.stories.tsx
@@ -29,24 +29,22 @@ const BaseComponent = <T extends DropdownSelectOption, U extends DropdownMultiSe
     const [updatedData, setUpdatedData] = useState<EditableInformationData<T, U>>(data);
     const [isSaving, setIsSaving] = useState(false);
     const [isEditing, setIsEditing] = useState(isEditingMode);
-    const [isInEditMode, setIsInEditMode] = useState(isEditingMode);
     const [saveErrors, setSaveErrors] = useState<Array<string>>(undefined as unknown as string[]);
     const [saveWarnings, setSaveWarnings] = useState<Array<string>>(undefined as unknown as string[]);
 
     useEffect(() => {
         setIsEditing((saveErrors && saveErrors.length !== 0) || isEditingMode);
     }, [isEditingMode, saveErrors]);
 
-    const onEditCallback = (isEditingReturnValue: boolean) => {
-        setIsInEditMode(isEditingReturnValue);
+    const onEditCallback = () => {
+        console.log('onEditCallback');
     };
 
-    const onSaveCallback = (newData: { [key: string]: ValueTypes<T, U> }, isEditingReturnValue: boolean): void => {
+    const onSaveCallback = (newData: { [key: string]: ValueTypes<T, U> }): void => {
         // eslint-disable-next-line no-console
-        console.log('[onSaveCallback]] ', newData, isEditingReturnValue);
+        console.log('[onSaveCallback]] ', newData);
         setIsSaving(true);
         setIsEditing(isEditingMode);
-        setIsInEditMode(isEditingReturnValue);
 
         setUpdatedData(updateValuesOfData(updatedData, newData));
 
@@ -64,9 +62,8 @@ const BaseComponent = <T extends DropdownSelectOption, U extends DropdownMultiSe
         }, 5000);
     };
 
-    const onCancelCallback = (isEditingReturnValue: boolean) => {
+    const onCancelCallback = () => {
         setSaveErrors(undefined as unknown as string[]);
-        setIsInEditMode(isEditingReturnValue);
     };
 
     const onChangeCallback = (newData: unknown) => {
@@ -114,7 +111,7 @@ const BaseComponent = <T extends DropdownSelectOption, U extends DropdownMultiSe
                 hasOptions ? (
                     <Button
                         iconType={IconType.GEAR}
-                        isDisabled={isSaving || isInEditMode}
+                        isDisabled={isSaving}
                         onClick={() => console.log('Does nothing -> additional button')}
                         size={ButtonSize.SMALL}
                         variant={ButtonVariant.TEXT_ONLY}

diff --git a/src/app/components/organisms/EditableInformation/EditableInformation.tsx b/src/app/components/organisms/EditableInformation/EditableInformation.tsx
@@ -43,10 +43,10 @@ export interface EditableInformationProps<T extends DropdownOption, U extends Dr
     keepEditMode?: boolean;
     locale?: Locale;
     localeCurrency?: Locale;
-    onCancel?: (isEditing: boolean) => void;
+    onCancel?: () => void;
     onChange?: (data: unknown, isDataChanged: boolean) => void;
-    onEdit?: (isEditing: boolean) => void;
-    onSave?: (data: { [key: string]: ValueTypes<T, U> }, isDataChanged: boolean, isEditing: boolean) => void;
+    onEdit?: () => void;
+    onSave?: (data: { [key: string]: ValueTypes<T, U> }, isDataChanged: boolean) => void;
     onValidation?: (isValidData: boolean) => void;
     options?: ReactNode;
     saveConfirmDialog?: ConfirmDialog;
@@ -118,7 +118,7 @@ export const EditableInformation = <T extends DropdownOption, U extends Dropdown
         setIsBeingEdited(true);
 
         if (onEdit) {
-            onEdit(true);
+            onEdit();
         }
     }, [onEdit]);
 
@@ -130,7 +130,7 @@ export const EditableInformation = <T extends DropdownOption, U extends Dropdown
         if (onSave) {
             // Note: if in the onChange prop we cause a re-render of this component with an updated originalValues then areEqualObjects will always return false.
             // In that case it will be needed to either call areEqualObjects outside with the real originalValues or keep the value of isDataChanged in the onChange in a local state
-            onSave(updatedValues, !areEqualObjects(originalValues, updatedValues), keepEditMode);
+            onSave(updatedValues, !areEqualObjects(originalValues, updatedValues));
         }
     }, [keepEditMode, onSave, originalValues, updatedValues]);
 
@@ -139,7 +139,7 @@ export const EditableInformation = <T extends DropdownOption, U extends Dropdown
         setUpdatedValues(originalValues);
 
         if (onCancel) {
-            onCancel(false);
+            onCancel();
         }
     }, [originalValues, onCancel]);
 

diff --git a/src/app/components/organisms/EditablePanel/EditablePanel.sc.ts b/src/app/components/organisms/EditablePanel/EditablePanel.sc.ts
@@ -1,9 +1,17 @@
-import styled from 'styled-components';
+import styled, { css, SimpleInterpolation } from 'styled-components';
 
-export const ButtonWrapper = styled.div`
-    button:nth-of-type(1) {
-        margin: 0 8px 0 0;
-    }
+export interface ButtonWrapperProps {
+    hasMargin: boolean;
+}
+
+export const ButtonWrapper = styled.div<ButtonWrapperProps>`
+    ${({ hasMargin }): SimpleInterpolation =>
+        hasMargin &&
+        css`
+            button:nth-of-type(1) {
+                margin: 0 8px 0 0;
+            }
+        `}
 `;
 
 export default ButtonWrapper;
diff --git a/src/app/components/organisms/EditablePanel/EditablePanel.tsx b/src/app/components/organisms/EditablePanel/EditablePanel.tsx
@@ -1,6 +1,6 @@
 import { ButtonSize, ButtonVariant, IconType, Status } from '../../../types';
 import PanelHeader, { PanelHeaderProps } from '../../molecules/PanelHeader/PanelHeader';
-import React, { FunctionComponent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FunctionComponent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import Button from '../../molecules/Button/Button';
 import { ButtonWrapper } from './EditablePanel.sc';
 import { ConfirmDialog } from './types';
@@ -131,71 +131,6 @@ export const EditablePanel: FunctionComponent<EditablePanelProps> = ({
         onEdit();
     }, [isBeingEdited, onEdit]);
 
-    // Constructs the options (e.g. buttons) for the Panel
-    const panelOptions = useMemo(() => {
-        if (hasButtons) {
-            if (isBeingEdited) {
-                return (
-                    <ButtonWrapper>
-                        {options}
-                        <Button
-                            iconType={iconCancel}
-                            isDisabled={isSaving}
-                            onClick={onCancelCallback}
-                            size={ButtonSize.SMALL}
-                            variant={ButtonVariant.TEXT_ONLY}
-                        >
-                            {textCancel}
-                        </Button>
-                        <Button
-                            iconType={iconSave}
-                            isDisabled={isButtonDisabled || isDisabled || hasError}
-                            isLoading={isSaving}
-                            onClick={!hasError ? onSaveCallback : undefined}
-                            size={ButtonSize.SMALL}
-                            variant={ButtonVariant.OUTLINE}
-                        >
-                            {textSave}
-                        </Button>
-                    </ButtonWrapper>
-                );
-            }
-
-            if (options) {
-                return (
-                    <ButtonWrapper>
-                        {options}
-                        <Button
-                            iconType={iconEdit}
-                            isDisabled={isButtonDisabled || isDisabled}
-                            isLoading={isSaving}
-                            onClick={setIsBeingEditedCallback}
-                            size={ButtonSize.SMALL}
-                            variant={ButtonVariant.TEXT_ONLY}
-                        >
-                            {textEdit}
-                        </Button>
-                    </ButtonWrapper>
-                );
-            }
-
-            return (
-                <Button
-                    iconType={iconEdit}
-                    isDisabled={isButtonDisabled || isDisabled}
-                    isLoading={isSaving}
-                    onClick={setIsBeingEditedCallback}
-                    size={ButtonSize.SMALL}
-                    variant={ButtonVariant.TEXT_ONLY}
-                >
-                    {textEdit}
-                </Button>
-            );
-        }
-
-        return undefined;
-    }, [hasButtons, isBeingEdited, options]);
-
     return (
         <>
             <PanelHeader
@@ -205,7 +140,46 @@ export const EditablePanel: FunctionComponent<EditablePanelProps> = ({
                 iconType={iconType}
                 isDisabled={isDisabled}
                 isLoading={isLoading}
-                options={panelOptions}
+                options={
+                    // eslint-disable-next-line no-nested-ternary
+                    !hasButtons ? undefined : isBeingEdited ? (
+                        <ButtonWrapper hasMargin>
+                            <Button
+                                iconType={iconCancel}
+                                isDisabled={isSaving}
+                                onClick={onCancelCallback}
+                                size={ButtonSize.SMALL}
+                                variant={ButtonVariant.TEXT_ONLY}
+                            >
+                                {textCancel}
+                            </Button>
+                            <Button
+                                iconType={iconSave}
+                                isDisabled={isButtonDisabled || isDisabled || hasError}
+                                isLoading={isSaving}
+                                onClick={!hasError ? onSaveCallback : undefined}
+                                size={ButtonSize.SMALL}
+                                variant={ButtonVariant.OUTLINE}
+                            >
+                                {textSave}
+                            </Button>
+                        </ButtonWrapper>
+                    ) : (
+                        <ButtonWrapper hasMargin={options !== undefined && !isSaving}>
+                            {options && !isSaving && options}
+                            <Button
+                                iconType={iconEdit}
+                                isDisabled={isButtonDisabled || isDisabled}
+                                isLoading={isSaving}
+                                onClick={setIsBeingEditedCallback}
+                                size={ButtonSize.SMALL}
+                                variant={ButtonVariant.TEXT_ONLY}
+                            >
+                                {textEdit}
+                            </Button>
+                        </ButtonWrapper>
+                    )
+                }
                 status={status}
                 title={title}
             />