Merge pull request #51 from entrylabs/issue/7700_2

Issue/7700 2

src/components/Progress/ProgressBar.jsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+
+const ProgressBar = (props) => {
+    const { percent, preset = 'default' } = props;
+    const [roundPercent, setRoundPercent] = useState(0);
+    const overHalf = roundPercent > 50;
+
+    useEffect(() => {
+        if (preset === 'full') {
+            setRoundPercent(100);
+        } else if (preset === 'fail') {
+            setRoundPercent(Math.round(0));
+        } else {
+            setRoundPercent(Math.round(percent));
+        }
+    }, [preset, percent]);
+
+    return (
+        <div className={`entry-modal-progressbar-wrapper`}>
+            <progress className={`entry-modal-progressbar`} value={roundPercent} max="100" />
+            <div
+                className={`entry-modal-progressbar-text ${
+                    overHalf ? 'entry-modal-text-invert' : ''
+                }`}
+            >
+                {preset === 'fail' ? '!' : `${roundPercent}%`}
+            </div>
+        </div>
+    );
+};
+export default ProgressBar;

src/components/Progress/index.jsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useCallback, useMemo } from 'react';
+import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import Buttons from '../common/Buttons.jsx';
 import Title from '../common/Title.jsx';
 import StepTitle from '../common/StepTitle.jsx';
-import { getLang } from '../../utils/index';
+import ProgressBar from './ProgressBar.jsx';
+import ContentImage from '../common/ContentImage.jsx';
 import { get as _get } from 'lodash-es';
 
 const Progress = (props) => {
@@ -12,7 +13,7 @@ const Progress = (props) => {
             titles: [],
             select: 0,
         },
-        contentImage,
+        imageType, // 'beforeConnect', 'connecting', 'checked'
         content,
         buttonInfos = [
             {
@@ -22,18 +23,17 @@ const Progress = (props) => {
                 btnValue: 'ok',
             },
         ],
-        options = { btnAlignCol: false },
+        options = {
+            btnAlignCol: false,
+            // style: { width, height }
+            // INFO: 예외상황은 progressPreset로, 일반적인 상황은 event.percent로 다룬다.
+            // progressPreset: 'full' | 'fail'
+            // event: { close, percent }
+        },
         onEvent,
     } = props;
 
-    // const { title, negativeButtonText, positiveButtonText } = useMemo(() => {
-    //     return {
-    //         title: props.title || getLang('General.progress_title', 'progress'),
-    //         negativeButtonText: options.negativeButtonText || getLang('Buttons.cancel', 'cancel'),
-    //         positiveButtonText:
-    //             options.positiveButtonText || getLang('Buttons.course_done', 'cancel'),
-    //     };
-    // }, [props.title, options]);
+    const [percent, setPercent] = useState(undefined);
 
     const handleButtonClick = useCallback(
         (event) => {
@@ -89,20 +89,43 @@ const Progress = (props) => {
         event.preventDefault();
     }, []);
 
+    const setEntryEvent = () => {
+        if (options && options.event) {
+            const entryAddEventListener = Entry.addEventListener.bind(Entry);
+            const entryRemoveEventListener = Entry.removeEventListener.bind(Entry);
+            const addEventListener = (eventName, func) => {
+                entryRemoveEventListener(eventName, func);
+                entryAddEventListener(eventName, func);
+            };
+
+            if (options.event.close) {
+                addEventListener(options.event.close, () => {
+                    handleButtonClick();
+                });
+            }
+            if (options.event.percent) {
+                addEventListener(options.event.percent, (percent) => {
+                    setPercent(percent);
+                });
+            }
+        }
+    };
+
     useEffect(() => {
         document.body.style.overflow = 'hidden';
         document.addEventListener('keydown', keyboardEvent);
         document.addEventListener('touchmove', preventDefault, {
             passive: false,
         });
+        setEntryEvent();
         return () => {
             document.body.style.overflow = 'auto';
             document.removeEventListener('keydown', keyboardEvent);
             document.removeEventListener('touchmove', preventDefault, {
                 passive: false,
             });
         };
-    }, [keyboardEvent, preventDefault]);
+    }, [keyboardEvent, preventDefault, options.event]);
 
     return (
         <div className={'entry-modal-progress'}>
@@ -114,13 +137,22 @@ const Progress = (props) => {
             >
                 {title}
             </Title>
-            <div className={'entry-modal-contentView'}>
+            <div
+                className={'entry-modal-contentView'}
+                style={options?.style ? options.style : null}
+            >
                 <StepTitle
                     className={'entry-modal-stepTitle'}
                     titles={stepTitle.titles}
                     select={stepTitle.select}
                 />
                 <div className={'entry-modal-content'}>{renderContent}</div>
+                {!!imageType && typeof imageType === 'string' && (
+                    <ContentImage imageType={imageType} />
+                )}
+                {(!!percent || options.progressPreset) && (
+                    <ProgressBar percent={percent} preset={options && options.progressPreset} />
+                )}
                 <div className={'entry-modal-button-group'}>
                     <Buttons
                         buttonInfos={buttonInfos}

src/components/common/Buttons.jsx

@@ -16,8 +16,8 @@ const Buttons = (props) => {
     } = props;
 
     return (
-        <div className={`${alignCol ? 'entry-modal-buttons-col' : ''}`}>
-            {buttonInfos.map((button) => {
+        <div className={`${alignCol ? 'entry-modal-buttons-col' : 'entry-modal-buttons-row'}`}>
+            {buttonInfos.map((button, idx) => {
                 return (
                     <Button
                         className={`entry-modal-button ${
@@ -29,6 +29,7 @@ const Buttons = (props) => {
                             defaultOnClick(event);
                         }}
                         btnValue={button.btnValue}
+                        key={`button_${idx}`}
                     />
                 );
             })}

src/components/common/ContentImage.jsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react';
+import { IMAGE_TYPES } from '../../constants';
+
+const ContentImage = (props) => {
+    const { imageType } = props;
+    const [currentName, setCurrentName] = useState(undefined);
+
+    useEffect(() => {
+        if (IMAGE_TYPES.includes(imageType)) {
+            setCurrentName(imageType);
+        } else {
+            console.log('ERROR: not supported imageType.');
+        }
+    }, [imageType]);
+
+    return (
+        currentName && (
+            <div
+                className={`entry-modal-contentImage entry-modal-img_${currentName}`}
+                alt={imageType}
+            />
+        )
+    );
+};
+export default ContentImage;

src/constants.js

@@ -3,3 +3,5 @@ export const compStatusTypes = {
     DISABLED: 'DISABLED',
     HIDDEN: 'HIDDEN',
 };
+
+export const IMAGE_TYPES = ['checked', 'beforeConnect', 'connecting'];

src/index.jsx

@@ -13,7 +13,7 @@ export const confirm = withDefaultModal(Confirm, ['content', 'title', 'options']
 export const progress = withDefaultModal(Progress, [
     'title',
     'stepTitle',
-    'contentImage',
+    'imageType',
     'content',
     'buttonInfos',
     'options',