भाग 1: कार्यक्षमता को न्यूनतम/विस्तारित करने के साथ मूल संवाद घटक की स्थापना

रिएक्ट में एक प्रतिक्रियाशील संवाद घटक बनाने पर मेरी चार-भाग श्रृंखला के पहले भाग में आपका स्वागत है। इस श्रृंखला में, मैं संवाद के तरल आयामों को बनाए रखते हुए सहज एनीमेशन बदलाव प्राप्त करने के लिए विभिन्न तरीकों का पता लगाऊंगा। इस प्रारंभिक भाग में, मैं न्यूनतम और विस्तृत कार्यक्षमता के साथ बुनियादी संवाद घटक स्थापित करूँगा।

कृपया ध्यान दें कि पहुंच और प्रतिक्रियाशील डिज़ाइन इस श्रृंखला में विचारों के हिस्से के रूप में शामिल नहीं हैं। प्राथमिक फोकस सुचारू एनीमेशन बदलावों के साथ एक पुन: प्रयोज्य संवाद घटक बनाने पर है।

यह श्रृंखला उस अवधारणा के प्रमाण का हिस्सा है जिस पर मैं काम कर रहा हूं, जिसका उद्देश्य यूआई घटकों को एनिमेट करने के लिए तकनीकों पर चर्चा करना और उन्हें परिष्कृत करना है। मैं अपने दृष्टिकोण को मान्य करने या सुधार का सुझाव देने के लिए साथी डेवलपर्स से प्रतिक्रिया और अंतर्दृष्टि आमंत्रित करता हूं।

मूल संवाद घटक की स्थापना

आइए एक अत्यधिक पुन: प्रयोज्य संवाद घटक बनाकर शुरुआत करें जो न्यूनतम करने और विस्तार करने का समर्थन करता है। यह सुनिश्चित करने के लिए कि संवाद बदलती सामग्री के अनुकूल हो सके, मैं संरचनागत पैटर्न का उपयोग करूंगा।

फ़ाइल संरचना:

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

चरण 1: संवाद प्रसंग

सबसे पहले, मैं हमारे संवाद घटक की स्थिति को प्रबंधित करने के लिए एक संदर्भ बनाऊंगा।

प्रमुख बिंदु:

• DialogContext स्थिति को बनाए रखेगा और न्यूनतम और विस्तारित स्थितियों के बीच संवाद को टॉगल करने के लिए फ़ंक्शन प्रदान करेगा।
• डायलॉगप्रोवाइडर घटक स्थिति को प्रारंभ करता है और इसे संदर्भ के माध्यम से संवाद घटकों को प्रदान करता है।

// 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: संवाद घटक

इसके बाद, मैं मुख्य संवाद घटक बनाऊंगा जो विस्तार और न्यूनतमकरण को संभालने के लिए संदर्भ का उपयोग करता है।

प्रमुख बिंदु:

• डायलॉग घटक प्रासंगिक प्रॉप्स के साथ संदर्भ प्रदाता को प्रारंभ करता है।
• 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: अतिरिक्त घटक

मैं मॉड्यूलैरिटी और पुन: प्रयोज्यता सुनिश्चित करने के लिए डायलॉग हेडर, बॉडी, फुटर और कंटेनर के लिए अतिरिक्त घटक बनाऊंगा।

प्रमुख बिंदु:

• डायलॉगहेडर में संदर्भ का उपयोग करके न्यूनतम और विस्तारित स्थितियों के बीच टॉगल करने के लिए एक बटन शामिल है।
• जब isExpanded मान बदला जाता है तो DialogContainer मुख्य भाग और पाद सामग्री को स्वचालित रूप से छिपाने के लिए लपेटता है।
• डायलॉगबॉडी और डायलॉगफुटर घटक डायलॉग की सामग्री के लिए सरल कंटेनर हैं।

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

आप कोडसैंडबॉक्स पर संपूर्ण स्रोत कोड तक पहुंच सकते हैं।

आप कार्यान्वयन का लाइव पूर्वावलोकन भी देख सकते हैं:

निष्कर्ष

इस पहले भाग में, मैंने न्यूनतम और विस्तृत कार्यक्षमता के साथ रिएक्ट में एक बुनियादी संवाद बॉक्स स्थापित किया है। यह मूलभूत घटक आगामी लेखों में और सुधार के आधार के रूप में काम करेगा। संवाद घटक को इसकी सामग्री को अपनाने और परिवर्तनों के अनुकूल बनाने के लिए डिज़ाइन किया गया है, जिससे यह अत्यधिक पुन: प्रयोज्य और लचीला हो जाता है।

भाग 2 के लिए बने रहें, जहां मैं संवाद परिवर्तनों में एनिमेशन जोड़ने और सहज प्रभाव प्राप्त करने के लिए विभिन्न विकल्पों की खोज करूंगा।

मैं इस दृष्टिकोण को परिष्कृत और बेहतर बनाने में मदद के लिए साथी डेवलपर्स से प्रतिक्रिया और टिप्पणियां आमंत्रित करता हूं। अवधारणा के इस प्रमाण को और अधिक मजबूत और प्रभावी बनाने में आपकी अंतर्दृष्टि अमूल्य है।