@xaypay/tui 0.0.73 → 0.0.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/icon/Close.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgClose = ({ title, titleId, ...props }) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
+      fill="#3C393E"
+    />
+  </svg>
+);
+export default SvgClose;

package/src/components/icon/index.js

@@ -1,2 +1 @@
-export { default as Jpeg } from "./Jpeg";
-export { default as Png } from "./Png";
+

package/src/components/modal/index.js

@@ -1,95 +1,260 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import styles from "./modal.module.css";
-import Icon from "../icon/Icon";
-import { Typography, TypographyType } from "../typography";
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import SvgCloseIcon from './../icon/CloseIcon';
+import SvgNextarrow from './../icon/Nextarrow';
 
 export const Modal = ({
-    setShow,
-    headerText,
-    className,
     type,
     data,
+    setShow,
     selected,
     children,
+    className,
+    headerText,
 }) => {
-    const classProps = classnames(styles.modal, className);
-    const [select, setSelect] = useState(selected);
+    const classProps = classnames(className);
+
+    const [select, setSelect] = useState(0);
+    const [innerData, setInnerData] = useState([]);
+
+    const handleCloseModal = () => {
+        setShow(false)
+    };
+
+    const handleStopClosing = (e) => {
+        e.stopPropagation();
+    };
+
+    const handleGoTo = (e) => {
+        const goTo = e.target.getAttribute('data-go');
+        if (goTo === 'next') {
+            if (select >= data.length - 1) {
+                setSelect(0);
+            } else {
+                setSelect(select + 1);
+            }
+        } else {
+            if (select <= 0) {
+                setSelect(data.length - 1);
+            } else {
+                setSelect(select - 1);
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (type === 'images') {
+            if (data) {
+                if (data.length === 0) {
+                    alert('Please fill data prop');
+                } else {
+                    setInnerData(data);
+                }
+            } else {
+                alert('Please add data prop on Modal component');
+            }
+        }
+    }, [type, data, data?.length]);
+
+    useEffect(() => {
+        if (selected) {
+            if (selected <= 0) {
+                setSelect(0);
+            } else if (selected >= data.length - 1) {
+                setSelect(data.length - 1);
+            } else {
+                setSelect(selected);
+            }
+        }
+    }, [selected]);
+
+    useEffect(() => {
+        return () => {
+            setSelect(0);
+            setInnerData([]);
+        }
+    }, []);
+
     return (
-        <div className={`${styles["modal-wrap"]} modal-wrap-rem`} onClick={() => setShow(false)}>
-            {type == "content" ? (
+        <div
+            onClick={handleCloseModal}
+            style={{
+                position: 'fixed',
+                top: '0px',
+                left: '0px',
+                zIndex: 999,
+                width: '100%',
+                height: '100vh',
+                backgroundColor: 'rgba(0,0,0,0.4)' // TODO: config
+            }}
+        >
+            <div
+                style={{
+                    position: 'relative',
+                    width: '100%',
+                    height: '100vh'
+                }}
+            >
                 <div
-                    className={`${styles["modal-content"]} modal-content-rem`}
-                    onClick={(e) => {
-                        e.stopPropagation();
+                    className={classProps}
+                    onClick={handleStopClosing}
+                    style={{
+                        position: 'absolute',
+                        top: '0px',
+                        left: '0px',
+                        right: '0px',
+                        bottom: '0px',
+                        margin: 'auto',
+                        maxWidth: '95%',
+                        overflow: 'auto',
+                        maxHeight: '95vh',
+                        width: 'fit-content',
+                        borderRadius: '14px',
+                        height: 'fit-content',
+                        boxSizing: 'border-box',
+                        backgroundColor: 'white',
+                        padding: '10px 20px 20px',
+                        // TODO: animation
                     }}
                 >
-                    <div className={`${styles["modal-top"]} modal-top-rem`}>
-                        <div className={`${styles["modal-title"]} modal-title-rem`}>
-                            <Typography variant={TypographyType.p} color="#00236A">{headerText}</Typography>
-                        </div>
+                    <div
+                        style={{
+                            display: 'flex',
+                            width: '100%',
+                            height: '27px',
+                            alignItems: 'center',
+                            backgroundColor: '#fbfbfb',
+                            justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
+                        }}
+                    >
+                        {
+                            headerText && type === 'content' && <p
+                                style={{
+                                    color: '#00236a',
+                                    fontSize: '20px',
+                                    fontWeight: '600',
+                                    overflow: 'hidden',
+                                    whiteSpace: 'nowrap',
+                                    textOverflow: 'ellipsis',
+                                    margin: '0px 16px 0px 0px',
+                                    maxWidth: 'calc(100% - 30px)'
+                                }}
+                            >{headerText}</p>
+                        }
                         <div
-                            className={`${styles["close-btn"]} close-btn-rem`}
-                            onClick={() => setShow(false)}
+                            onClick={handleCloseModal}
+                            style={{
+                                width: '14px',
+                                height: '14px',
+                                cursor: 'pointer'
+                            }}
                         >
-                            <i className="icon-close" />
+                            <SvgCloseIcon />
                         </div>
                     </div>
-                    <div className={`${styles["modal-section"]} modal-section-rem`}>{children}</div>
-                </div>
-            ) : type == "images" ? (
-                <div
-                    className={`${styles["modal-content"]} modal-content-rem`}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                    }}
-                >
+
                     <div
-                        className={`${styles["close-btn"]} close-btn-rem`}
-                        onClick={() => setShow(false)}
+                        style={{
+                            display: 'flex',
+                            paddingTop: '10px',
+                            alignItems: 'center',
+                            boxSizing: 'border-box',
+                            justifyContent: 'center'
+                        }}
                     >
-                        <i className="icon-close" />
-                    </div>
-
-                    <div className={`${styles["modal-section"]} modal-section-rem`}>
-                        <div>
-                            {select > 1 ? (
-                                <h1 onClick={() => setSelect(select - 1)}>-</h1>
-                            ) : null}
-                            {data.map((elem) => {
-                                if (select == elem.id) {
-                                    return (
-                                        <img
-                                            width="600px"
-                                            key={elem.id}
-                                            src={elem.url}
-                                        />
-                                    );
-                                }
-                            })}
-                            {select < data.length ? (
-                                <h1
-                                    onClick={() => {
-                                        setSelect(select + 1);
+                        {
+                            type === 'content'
+                            ?
+                                children ? children : ''
+                            :
+                                <div
+                                    style={{
+                                        width: '100%'
                                     }}
                                 >
-                                    +
-                                </h1>
-                            ) : null}
-                        </div>
+                                    {
+                                        innerData && innerData.length > 0 && innerData.map((item, index) => {
+                                            if (select === index) {
+                                                if (!item.hasOwnProperty('url')) {
+                                                    alert('Please add url property in data prop on each element');
+                                                } else {
+                                                    return (
+                                                        <img
+                                                            style={{
+                                                                width: '600px',
+                                                                height: '300px',
+                                                                objectFit: 'cover',
+                                                                objectPosition: 'center'
+                                                            }}
+                                                            src={item.url}
+                                                        />
+                                                    )
+                                                }
+                                            }
+                                        })
+                                    }
+                                    <div
+                                        style={{
+                                            marginTop: '10px'
+                                        }}
+                                    >
+                                        <button
+                                            onClick={handleGoTo}
+                                            data-go='prev'
+                                            style={{
+                                                padding: '8px',
+                                                outline: 'none',
+                                                cursor: 'pointer',
+                                                marginRight: '10px',
+                                                borderRadius: '6px',
+                                                alignItems: 'center',
+                                                display: 'inline-flex',
+                                                justifyContent: 'center',
+                                                backgroundColor: 'white',
+                                                transform: 'rotate(180deg)',
+                                                border: '1px solid #979090'
+                                            }}
+                                        >
+                                            <SvgNextarrow />
+                                        </button>
+                                        <button
+                                            onClick={handleGoTo}
+                                            data-go='next'
+                                            style={{
+                                                padding: '8px',
+                                                outline: 'none',
+                                                cursor: 'pointer',
+                                                borderRadius: '6px',
+                                                alignItems: 'center',
+                                                display: 'inline-flex',
+                                                justifyContent: 'center',
+                                                backgroundColor: 'white',
+                                                border: '1px solid #979090'
+                                            }}
+                                        >
+                                            <SvgNextarrow />
+                                        </button>
+                                    </div>
+                                </div>
+                        }
                     </div>
                 </div>
-            ) : null}
+            </div>
         </div>
     );
 };
 
 Modal.propTypes = {
+    data: PropTypes.array,
+    type: PropTypes.string,
     setShow: PropTypes.func,
-    headerText: PropTypes.string,
+    selected: PropTypes.number,
     className: PropTypes.string,
-    type: PropTypes.string,
-    selected: PropTypes.string,
-    data: PropTypes.array,
+    headerText: PropTypes.string,
+};
+
+Modal.defaultProps = {
+    type: 'content'
 };

package/src/components/modal/modal.stories.js

@@ -8,6 +8,7 @@ export default {
 
 const Template = ({ headerText, className }) => {
   const [show, setShow] = useState(false);
+  const [type, setType] = useState('content');
   const data = [
     {
       url: 'https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg',
@@ -29,18 +30,32 @@ const Template = ({ headerText, className }) => {
       url:  'https://media.istockphoto.com/id/500221043/photo/cascade-yerevan.jpg?s=612x612&w=0&k=20&c=vaULCkIZaIbetZlkFnP20ELnD8cyhlc9cRsvt-X5YAk=',
       id: 5
     }
-  ]
+  ];
+
   const handleClick = () => {
     setShow(true);
   };
+
+  const handleChangeType = () => {
+    if (type === 'content') {
+      setType('images');
+    } else {
+      setType('content');
+    }
+  };
+  
   return (
     <>
-      <button onClick={handleClick}>Click</button>
+      <button
+        onClick={handleClick}
+        style={{ cursor: 'pointer', padding: '8px', fontSize: '16px', marginRight: '10px' }}
+      >Click</button>
+      <button
+        onClick={handleChangeType}
+        style={{ cursor: 'pointer', padding: '8px', fontSize: '16px' }}
+      >Change type to {type === 'content' ? 'images' : 'content'}</button>
       {show && (
-        // <Modal type='images' selected={4} data={data} setShow={setShow} headerText={headerText} className={className} />
-        <Modal type='content' headerText="test">
-          <div>TEst</div>
-        </Modal>
+        <Modal type={type} selected={0} data={data} setShow={setShow} headerText={headerText} className={className}></Modal>
       )}
     </>
   );
@@ -49,6 +64,6 @@ const Template = ({ headerText, className }) => {
 export const Default = Template.bind({});
 
 Default.args = {
-  headerText: "Hi...",
+  headerText: "Modal header text",
   className: "Modal",
 };

package/src/components/newAutocomplete/NewAutocomplete.stories.js

@@ -28,7 +28,7 @@ const Template = (args) => {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6ImY2N2FjNmNiYjI2YWM3NTRhMDhhOTgxOTZkOTZjNjFjNWI3YTA1NzUyN2U4MGE3NzM0ZDJlOGFlZjNkMjY0ZmRiMGZkN2QwZjllZjA1MmE4IiwiaWF0IjoxNjgwNzYzMzU3LjUyMzI5OCwibmJmIjoxNjgwNzYzMzU3LjUyMzMwNSwiZXhwIjoxNjgwNzg4NTU3LjQ5NjQzLCJzdWIiOiJtaW5hc0BtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.XLp4N1C9XYnX8EITknJs-j684GkppCVrREA5ttTAEyloxCftJUEo6KQGp-2grZDZvWvwvsgD9NF5lecdPOIYuSEgp7NPgbAQ34-hRn0u6TGoC5LQI6Vjc_PijH9YoH2a2V9q58jAJrxSbwNjKsMixiHmAsahIKl_XRL1ZoDxpKDE23avnndCZZ9Fw_oe8ypkEscfgrpK9iT9EhxWXZWC9MJ-iAxHox6b6XWsVHkJg5oN5MApJt1h9h-oZQmrKNn_274z3evPChlrvSjTyqLzGWy3zlVUMgGQWBE5RsKiuUh1O3TsF4PYvANKp0a_urOFtU9Q-umyfFNlWfgoLsTtKIQE0xmlLi8Kr5OutSna-a0Eu2hzgTM47_x-cJb7ImokTxdgoh1DDODmLDKkfTTXhEQ-KNTQ4J5T8UDn6a11E6EzBEfJYOIv9eXz5bQBf5H14x4mzXEkHNeC10EAsUFH7b9JT8DPJISwazeAA5zloj39dVFVDLoJS2TvZAxMRLQuyoMSs7eEXp4i7TTWPyrDhMLJ-YUgxmbAhWfwQ9J1ULkLyzFCrmvUz4xPmeRp9gnUNCXOo52jjSVD8x5q3cokFhCEUuWP6fE_DSgChe18j5w75Xi7BjGAIHRJjYtyvJQHy0DIQf2qd6YbbKkyP4iW_PvLfJah9JTlOU1_QGhUWqc',
+          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjRlZTI2OGU3NjhkMjA0YTdiMWM1NjU4NzE2Mjg0OTdjNTlmMmZjYjc4YzdiZTRjYTYzZGUyYjZmNjZjMzU3YjI0MzMwZjRhOTc5OGRjZDY4IiwiaWF0IjoxNjgxMzYzNDI2LjE0NDc0NywibmJmIjoxNjgxMzYzNDI2LjE0NDc1NCwiZXhwIjoxNjgxMzg4NjI2LjExODkzNywic3ViIjoibWluYXNAbWFpbC5ydSIsInNjb3BlcyI6WyJlbWFpbCJdfQ.nGU1Jf4XeVEqOHCXfDsjL-q--jTDrjlACMolSISUpviSaEDVLCI6BpY5_YYjOWRBUr4Utl_guFqpnb9jxbWdugL6_uFBANj1v0bi_g-RlzzeqF0FqlUqf1YZ_8S4c-l8nLsqfSDzPJs3nRB6oJVo7Di2O3fS_ka5MCkTXShzI6UJUZEvV4j60_QD7SmqmnDiij2rnfWt76YrNXZpDHt-zWMw6d7gD_pnX5RJ0YHUaXi2-M9ip-OcJfX4e_w7iMnckecaCfUolIO_rYNnHy6mleHX6Dimu6_niyMr0dj1ph9glv7fOHrIDwXx69AfJ4nuUQBa-G_AE9abot8cVzlPXAkwVa8WVkvH2mtzDgQuBLbQDM2VISqxO8j5jZhC9JDuXKN8TGukiBbePkWmpd9ASYaLQC02OqzZxqCaBBXCd72XMrwIynyjyTAW9t-VeraxFJgZwlqCnwZ7eTiIWSpPT7B5CLVumC24kz_ll8Tdbz4tMo0xdHNggD-hdPhciyVsaLk0q0Hx-vyIlKMS0KPez4EULQT2C3HaR5t81Pf4Qq06zLPXnKXXnoFc_p3u8TGDdqVXQBPdV1W8ck_3-hwIe-QzM5TbqTJjehiiH64QMcFTsJs--2APXNy3nBmU0D98is_eBGgHbgLJgck5v7MgYBaAaPjPf2lxtS-DF76ynQQ',
         },
       }).then((res)=> {
         return res.json()
@@ -46,5 +46,6 @@ const Template = (args) => {
 };
 export const Default = Template.bind({});
 Default.args = {
-  searchCount: 3
+  searchCount: 3,
+  selected: 'Jhon'
 }

package/src/components/newAutocomplete/index.js

@@ -12,6 +12,7 @@ export const NewAutocomplete = ({
     getItem,
     required,
     disabled,
+    selected,
     errorSize,
     labelSize,
     errorColor,
@@ -140,7 +141,7 @@ export const NewAutocomplete = ({
     const optionList = (
         <>
             {
-                show && innerOptions
+                show && innerOptions && !disabled
                 ?
                     innerOptions.length > 0
                     ?
@@ -248,7 +249,7 @@ export const NewAutocomplete = ({
         }
 
         options && setInnerOptions(options);
-    }, [options, options.length, getItem]);
+    }, [options, options?.length, getItem]);
 
     useEffect(() => {
         if (!change) {
@@ -256,6 +257,14 @@ export const NewAutocomplete = ({
         }
     }, [change]);
 
+    useEffect(() => {
+        if (selected) {
+            setInnerValue(selected);
+        } else {
+            setInnerValue('');
+        }
+    }, [selected, selected?.length]);
+
     return (
         <>
             {
@@ -354,6 +363,7 @@ NewAutocomplete.propTypes = {
     label: PropTypes.string,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
+    selected: PropTypes.string,
     errorSize: PropTypes.string,
     labelSize: PropTypes.string,
     errorColor: PropTypes.string,

package/src/components/select/index.js

@@ -194,7 +194,7 @@ export const Select = ({
             });
             setExistOptions(modifiedOptions);
         }
-    }, [options, multiple, selected, selected.length]);
+    }, [options, multiple, selected, selected?.length]);
     
     return (
         <div className={classProps}>