Teil 1: Einrichten der grundlegenden Dialogkomponente mit Minimieren/Erweitern-Funktionalität

Willkommen zum ersten Teil meiner vierteiligen Serie zum Erstellen einer responsiven Dialogkomponente in React. In dieser Serie werde ich verschiedene Ansätze untersuchen, um reibungslose Animationsübergänge zu erzielen und gleichzeitig die fließenden Dimensionen des Dialogs beizubehalten. In diesem ersten Teil richte ich die grundlegende Dialogkomponente mit Minimierungs- und Erweiterungsfunktionen ein.

Bitte beachten Sie, dass Barrierefreiheit und responsives Design nicht Teil der Überlegungen dieser Serie sind. Das Hauptaugenmerk liegt auf der Erstellung einer wiederverwendbaren Dialogkomponente mit reibungslosen Animationsübergängen.

Diese Serie ist Teil eines Proof of Concept, an dem ich gearbeitet habe und der darauf abzielt, Techniken zur Animation von UI-Komponenten zu diskutieren und zu verfeinern. Ich bitte um Feedback und Erkenntnisse von anderen Entwicklern, um meinen Ansatz zu validieren oder Verbesserungen vorzuschlagen.

Einrichten der Basisdialogkomponente

Beginnen wir mit der Erstellung einer hochgradig wiederverwendbaren Dialogkomponente, die das Minimieren und Erweitern unterstützt. Ich werde das Kompositionsmuster verwenden, um sicherzustellen, dass sich der Dialog an sich ändernde Inhalte anpassen kann.

Dateistruktur:

src/
  components/
    FluidDialog/
      Dialog.js
      DialogContext.js
      DialogHeader.js
      DialogBody.js
      DialogFooter.js
      DialogContainer.js
      index.js
  App.js
  index.js

Schritt 1: Dialogkontext

Zuerst erstelle ich einen Kontext, um den Status unserer Dialogkomponente zu verwalten.

Wichtige Punkte:

• Der DialogContext speichert den Status und stellt Funktionen bereit, um den Dialog zwischen minimierten und erweiterten Zuständen umzuschalten.
• Die DialogProvider-Komponente initialisiert den Zustand und stellt ihn den Dialogkomponenten per Kontext zur Verfügung.

// src/components/FluidDialog/DialogContext.js
import { createContext, useContext, useId, useState } from 'react';

const DialogContext = createContext();

export function DialogProvider({
  rootRef,
  isExpandedByDefault,
  children,
  maxWidth,
}) {
  const dialogId = useId();
  const [isExpanded, setIsExpanded] = useState(isExpandedByDefault);

  return (
    
      {children}
    
  );
}

export function useDialog() {
  return useContext(DialogContext);
}

Schritt 2: Dialogkomponente

Als nächstes erstelle ich die Hauptdialogkomponente, die den Kontext verwendet, um die Erweiterung und Minimierung durchzuführen.

Wichtige Punkte:

• Die Dialogkomponente initialisiert den Kontextanbieter mit relevanten Requisiten.
• Die DialogComponent-Stilkomponente verwaltet den grundlegenden Stil und das Layout des Dialogs.

// src/components/FluidDialog/Dialog.js
import { useRef } from 'react';
import { styled } from 'styled-components';
import { DialogProvider } from './DialogContext';

export default function Dialog({
  id,
  isExpandedByDefault = true,
  maxWidth = 400,
  children,
}) {
  const rootRef = useRef(null);
  return (
    
      
        {children}
      
    
  );
}

const DialogComponent = styled.section`
  max-width: ${({ maxWidth }) => (maxWidth ? `${maxWidth}px` : undefined)};
  position: absolute;
  right: 16px;
  bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
  overflow: hidden;
`;

Schritt 3: Zusätzliche Komponenten

Ich werde zusätzliche Komponenten für die Kopfzeile, den Hauptteil, die Fußzeile und den Container des Dialogs erstellen, um Modularität und Wiederverwendbarkeit sicherzustellen.

Wichtige Punkte:

• DialogHeader enthält eine Schaltfläche zum Umschalten zwischen minimiertem und erweitertem Status mithilfe des Kontexts.
• DialogContainer umschließt den Text- und Fußzeileninhalt, um sie automatisch auszublenden, wenn der isExpanded-Wert geändert wird.
• Die Komponenten DialogBody und DialogFooter sind einfache Container für den Inhalt des Dialogs.

// src/components/FluidDialog/DialogHeader.js
import { styled } from 'styled-components';
import { IconButton } from '../IconButton';
import { useDialog } from './DialogContext';

export default function DialogHeader({ children, expandedTitle }) {
  const { dialogId, isExpanded, setIsExpanded } = useDialog();

  return (
    
      
        
        
           setIsExpanded(false)}
          />
        
      
       setIsExpanded(true)}
      >
        
        
          
        
      
    
  );
}

const DialogHeaderComponent = styled.div``;

const ExpandedState = styled.header`
  transition: opacity 0.3s;
  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};
  pointer-events: ${({ isVisible }) => (isVisible ? 'all' : 'none')};
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #f3f3f3;
  display: flex;
  flex-direction: row;
`;

const MinimizedState = styled.header`
  transition: opacity 0.3s;
  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};
  pointer-events: ${({ isVisible }) => (isVisible ? 'all' : 'none')};
  background: #f3f3f3;
  display: flex;
  flex-direction: row;
  cursor: pointer;
`;

const Title = styled.span`
  flex-grow: 1;
  text-align: left;
  display: flex;
  align-items: center;
  padding: 0 16px;
`;

const IconButtons = styled.div``;

// src/components/FluidDialog/DialogContainer.js
import { styled } from 'styled-components';
import { useDialog } from './DialogContext';

export default function DialogContainer({ children }) {
  const { isExpanded } = useDialog();

  return (
    
      {children}
    
  );
}

const DialogContainerComponent = styled.div`
  display: ${({ isVisible }) => (isVisible ? undefined : 'none')};
`;

// src/components/FluidDialog/DialogBody.js
import { styled } from 'styled-components';
import DialogContainer from './DialogContainer';
import { useDialog } from './DialogContext';

export default function DialogBody({ children }) {
  const { dialogId } = useDialog();

  return (
    
      
        
          {children}
        
      
    
  );
}

const DialogBodyComponent = styled.div``;

const DialogBodyContent = styled.div`
  padding: 8px 16px;
`;

// src/components/FluidDialog/DialogFooter.js
import { styled } from 'styled-components';
import DialogContainer from './DialogContainer';

export default function DialogFooter({ children }) {
  return (
    
      
        {children}
      
    
  );
}

const DialogFooterComponent = styled.div`
  background: #f3f3f3;
`;

const DialogFooterContent = styled.div`
  padding: 8px 16px;
`;

Schritt 4: Alles zusammenfügen

Zuletzt importiere und verwende ich die Dialogkomponente in der Haupt-App.

Wichtige Punkte:

• Die App-Komponente enthält den Dialog mit seinen Kopf-, Text- und Fußzeilenkomponenten.
• Dieses Setup stellt sicher, dass der Dialog für weitere Verbesserungen und Animationen in den kommenden Teilen bereit ist.

// src/App.js
import React from 'react';
import Dialog from './components/FluidDialog/Dialog';
import DialogHeader from './components/FluidDialog/DialogHeader';
import DialogBody from './components/FluidDialog/DialogBody';
import DialogFooter from './components/FluidDialog/DialogFooter';

function App() {
  return (
    

      

        My dialog/DialogHeader>
        This is the content of the dialog.
        This is the footer of the dialog.
      
    
  );
}

export default App;

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

Sie können auf den gesamten Quellcode auf CodeSandbox zugreifen.

Sie können auch eine Live-Vorschau der Implementierung sehen:

Abschluss

In diesem ersten Teil habe ich in React ein einfaches Dialogfeld mit Minimierungs- und Erweiterungsfunktionen eingerichtet. Diese grundlegende Komponente wird als Grundlage für weitere Verbesserungen in den kommenden Artikeln dienen. Die Dialogkomponente ist so konzipiert, dass sie sich an ihren Inhalt anpasst und sich an Änderungen anpasst, wodurch sie äußerst wiederverwendbar und flexibel ist.

Seien Sie gespannt auf Teil 2, in dem ich mich mit dem Hinzufügen von Animationen zu den Dialogübergängen befasse und verschiedene Optionen erkunde, um reibungslose Effekte zu erzielen.

Ich bitte um Feedback und Kommentare von anderen Entwicklern, um diesen Ansatz zu verfeinern und zu verbessern. Ihre Erkenntnisse sind von unschätzbarem Wert, um diesen Proof of Concept robuster und effektiver zu machen.