Часть 1. Настройка базового компонента диалогового окна с возможностью минимизации/расширения функций

Добро пожаловать в первую часть моей серии из четырех частей, посвященной созданию адаптивного диалогового компонента в React. В этой серии я рассмотрю различные подходы к достижению плавных анимационных переходов, сохраняя при этом плавные размеры диалога. В этой начальной части я настрою базовый компонент диалогового окна с функциями свертывания и расширения.

Обратите внимание, что доступность и адаптивный дизайн не рассматриваются в этой серии статей. Основное внимание уделяется созданию многократно используемого диалогового компонента с плавными анимационными переходами.

Эта серия является частью проверки концепции, над которой я работаю, и направлена ​​на обсуждение и совершенствование методов анимации компонентов пользовательского интерфейса. Я приглашаю коллег-разработчиков получить отзывы и идеи, чтобы подтвердить мой подход или предложить улучшения.

Настройка основного компонента диалогового окна

Давайте начнем с создания многоразового диалогового компонента, поддерживающего свертывание и раскрытие. Я буду использовать композиционный шаблон, чтобы диалог мог адаптироваться к изменяющемуся содержанию.

Структура файла:

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

Шаг 1. Контекст диалогового окна

Сначала я создам контекст для управления состоянием нашего диалогового компонента.

Ключевые моменты:

• DialogContext будет хранить состояние и предоставлять функции для переключения диалога между свернутым и развернутым состояниями.
• Компонент DialogProvider инициализирует состояние и передает его компонентам диалога через контекст.

// 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);
}

Шаг 2: Диалоговый компонент

Далее я создам основной компонент диалогового окна, который использует контекст для управления расширением и минимизацией.

Ключевые моменты:

• Компонент Dialog инициализирует поставщика контекста с соответствующими реквизитами.
• Стилизованный компонент DialogComponent управляет основным стилем и макетом диалогового окна.

// 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;
`;

Шаг 3: Дополнительные компоненты

Я создам дополнительные компоненты для заголовка, тела, нижнего колонтитула и контейнера диалогового окна, чтобы обеспечить модульность и возможность повторного использования.

Ключевые моменты:

• DialogHeader включает кнопку для переключения между свернутым и развернутым состояниями с помощью контекста.
• DialogContainer оборачивает содержимое тела и нижнего колонтитула, чтобы автоматически скрывать их при изменении значения isExpanded.
• Компоненты DialogBody и DialogFooter — это простые контейнеры для содержимого диалога.

// 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;
`;

Шаг 4: Собираем все вместе

Наконец, я импортирую и использую компонент диалога в основном приложении.

Ключевые моменты:

• Компонент приложения включает в себя диалоговое окно с компонентами заголовка, тела и нижнего колонтитула.
• Эта настройка гарантирует, что диалог будет готов к дальнейшим улучшениям и анимации в следующих частях.

// 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')
);

Вы можете получить доступ ко всему исходному коду на CodeSandbox.

Вы также можете просмотреть предварительный просмотр реализации:

Заключение

В этой первой части я настроил базовое диалоговое окно в React с функциями свертывания и расширения. Этот основополагающий компонент послужит основой для дальнейших улучшений в следующих статьях. Диалоговый компонент спроектирован так, чтобы охватывать его содержимое и адаптироваться к изменениям, что делает его многоразовым и гибким.

Следите за обновлениями во второй части, где я расскажу о добавлении анимации к диалоговым переходам и изучении различных вариантов достижения плавных эффектов.

Я жду отзывов и комментариев от коллег-разработчиков, которые помогут усовершенствовать и улучшить этот подход. Ваши идеи неоценимы и помогут сделать это доказательство концепции более надежным и эффективным.