حوارات على الوعد

ما هو مربع الحوار؟

تقول ويكيبيديا ما يلي:
مربع الحوار (مربع الحوار باللغة الإنجليزية) في واجهة المستخدم الرسومية هو عنصر واجهة خاص ، وهو إطار مصمم لعرض المعلومات و (أو) تلقي استجابة من المستخدم. لقد حصلت على اسمه لأنه ينفذ تفاعلًا بين مستخدمين للكمبيوتر ("حوار"): إخبار المستخدم بشيء وانتظار استجابة منه.

نحن مهتمون

في انتظار إجابة منه

وبعبارة أخرى ، نفتح نافذة مشروطة للحصول على ردود الفعل والقيام بشيء بعد ذلك. لا يشبه أي شيء؟ وأعتقد ذلك.

تخيل موقفًا ، لدينا تطبيق لإدارة المستخدم.
السيناريو كما يلي.

في الصفحة الرئيسية ، يمكن للمستخدم فتح نافذة مشروطة لقائمة المستخدمين الآخرين.
من القائمة ، يمكنك فتح نافذة مشروطة بمعلومات عن المستخدم ، كما يوجد في هذه النافذة نموذج لإرسال رسائل.

عند إرسال خطاب ، يفتح المستخدم نافذة مشروطة حول الإرسال الناجح.
عندما يغلق المستخدم نافذة الوسائط ، فإنه يعود إلى نافذة الوسائط في قائمة المستخدمين ، ولكن هناك زر لكتابة رسالة أخرى ، عند النقر فوقها ، يصل المستخدم إلى صفحة المستخدم.

من الصعب أن تتخيل هذه المهمة في شكل رسم تسلسلي.



الآن كل شيء أبسط بكثير.

من وجهة نظر الكود ، يعد فتح نافذة مشروط إجراءً متزامنًا ، يمكننا فتحه ، بداخله يمكن إغلاقه ، لكن ماذا لو كنت تريد تغيير البيانات في نافذة الوسائط ، عند إغلاقه ، تحتاج إلى الحصول على بيانات من هناك؟

مثال بسيط ، من نافذة مشروط للمستخدم ، نقوم بتغيير البيانات ، والعودة إلى نافذة مشروط من القائمة ، تحتاج إلى تحديث المعلومات حول هذا المستخدم.

انها صفعات من عدم التزامن ...

عندما نفتح الوحدة ، نحتاج إلى انتظار إغلاقها والحصول على البيانات التي أدخلها المستخدم. يتم تنفيذ الإجراءات غير المتزامنة بشكل جيد مع الوعود.

في الواقع ، يتم وضع الوعود بالفعل في الرسم البياني لدينا ، ونحن مجرد علامة عليها باعتبارها أفعال. يمكنك إعادة ذلك قليلا.



الآن يصبح كل شيء بسيطًا عندما يفتح المستخدم نافذة الوسائط ، ننتظر حتى ينتهي من عمله ، وبعد ذلك يتم استدعاء العزم على promis. يبدو بسيطًا ، لنبدأ.

إطار عملي الرئيسي هو رد فعل ، لذلك سنفعله فورًا بناءً عليه. لكي نتمكن من فتح نوافذ مشروط من أي جزء من التطبيق ، سنستخدم واجهة برمجة تطبيقات السياق.

بادئ ذي بدء ، نحن بحاجة إلى إنشاء سياق ومكان لتخزينه.

// ./Provider.js export const DialogContext = React.createContext(); export const Provider = ({ children, node, Layout, config }) => { const [instances, setInstances] = useState([]); const [events, setEvents] = useState([]); const context = { instances, setInstances, config, events, setEvents }; const Component = instances.map(instance => ( <Layout key={instance.instanceName} component={config[instance.instanceName]} {...instance} /> )); const context = { instances setInstances }; //   state     const child = useMemo(() => React.Children.only(children), [children]); return ( <DialogContext.Provider value={context}> <> {child} {createPortal(Component, node)} </> </DialogContext.Provider> ); }; 

كل شيء بسيط هنا ، نستخدم أول استخدامستيت لإنشاء مجموعة من النوافذ مشروط مفتوحة. شيء من هذا القبيل كومة.

الثاني ، useState ، ضروري من أجل إضافة مراجع لحل ورفض الوعد. هذا سوف نرى أدناه.

نحن نعيد توجيه العرض عبر البوابة حتى لا نضطر إلى القتال إذا حدث شيء ما باستخدام الفهرس z.

يعد Layout مكونًا مكونًا أساسيًا لجميع الإطارات المشروطة.

معلمة التكوين هي مجرد كائن ، حيث يكون المفتاح هو معرف نافذة الوسائط ، والقيمة هي مكون إطار النافذة.

 //  config.js export const exampleInstanceName = 'modal/example'; export default { [exampleInstanceName]: React.lazy(() => import('./Example')), }; 

نكتب الآن تطبيق للأسلوب الذي سيفتح نافذة مشروط.

هذا سيكون الخطاف:

 export const useDialog = () => { const { setEvents, setInstances, config } = useContext(DialogContext); const open = instance => new Promise((resolve, reject) => { if (instance.instanceName in config) { setInstances(prevInstances => [...prevInstances, instance]); setEvents(prevEvents => [...prevEvents, { resolve, reject }]); } else { throw new Error(`${instance['instanceName']} don't exist in modal config`); } }); return { open }; }; 

يُرجع الخطاف وظيفة مفتوحة يمكننا استخدامها لاستدعاء نافذة مشروطة.

 import { exampleInstanceName } from './config'; import { useDialog } from './useDialog'; const FillFormButton = () => { const { open } = useDialog(); const fillForm = () => open(exampleInstanceName) return <button onClick={fillForm}>fill form from modal</button> } 

في هذا الخيار ، لن ننتظر أبدًا إغلاق نافذة الوسائط ؛ نحتاج إلى إضافة طرق لإكمال الوعد:

 // ./Provider.js export const DialogContext = React.createContext(); export const Provider = ({ children, node, Layout, config }) => { const [instances, setInstances] = useState([]); const [events, setEvents] = useState([]); const close = useCallback(() => { const { resolve } = events[events.length - 1]; const resolveParams = { action: actions.close }; setInstances(prevInstances => prevInstances.filter((_, index) => index !== prevInstances.length - 1)); setEvents(prevEvents => prevEvents.filter((_, index) => index !== prevEvents.length - 1)); resolve(resolveParams); }, [events]); const cancel = useCallback((values): void => { const { resolve } = events[events.length - 1]; const resolveParams = { action: actions.cancel, values }; setInstances(prevInstances => prevInstances.filter((_el, index) => index !== prevInstances.length - 1)); setEvents(prevEvents => prevEvents.filter((_el, index) => index !== prevEvents.length - 1)); resolve(resolveParams); }, [events]); const success = useCallback((values) => { const { resolve } = events[events.length - 1]; const resolveParams = { action: actions.success, values }; setInstances(prevInstances => prevInstances.filter((_el, index) => index !== prevInstances.length - 1)); setEvents(prevEvents => prevEvents.filter((_el, index) => index !== prevEvents.length - 1)); resolve(resolveParams); }, [events]); const context = { instances, setInstances, config, events, setEvents }; const Component = instances.map(instance => ( <Layout key={instance.instanceName} component={config[instance.instanceName]} cancel={cancel} success={success} close={close} {...instance} /> )); const context = { instances setInstances }; //   state     const child = useMemo(() => React.Children.only(children), [children]); return ( <DialogContext.Provider value={context}> <> {child} {createPortal(Component, node)} </> </DialogContext.Provider> ); }; 

الآن ، عندما تكون في مكون Layout أو إذا نقلت هذه الأساليب إلى مكوّن نافذة مشروط ، فسيتم استدعاء أساليب النجاح أو الإلغاء أو الإغلاق ، وسيكون لدينا العزم عند الوعد اللازم. هنا يتم إضافة مفهوم مثل الإجراء ، وهذا هو الخط الذي يجيب في حالة تم الانتهاء من الحوار. قد يكون هذا مفيدًا عندما نقوم ببعض الإجراءات بعد تنفيذ نافذة الوسائط:

 const { useState } from 'rect'; import { exampleInstanceName } from './config'; import { useDialog } from './useDialog'; const FillFormButton = () => { const [disabled, setDisabled] = useState(false); const { open } = useDialog(); const fillForm = () => open(exampleInstanceName) .then(({ action }) => { if (action === 'success') setDisabled(true); }); return <button onClick={fillForm} disabled={disabled}>fill form from modal</button> } 

هذا كل شيء. يبقى لإضافة نقل المعلمات من نافذة مشروط إلى نافذة مشروط من وظيفة مفتوحة. حسنًا ، أعتقد أنه يمكنك التعامل مع هذا بنفسك ، ولكن إذا كنت كسولًا جدًا ، فهناك حزمة جاهزة يمكنك استخدامها في مشاريعك.