@xaypay/tui 0.0.25 → 0.0.27

package/package.json

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

package/src/assets_old/icons/style.css

@@ -1,4 +1,4 @@
-@font-face {
+/* @font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?pr3wo0');
   src:  url('fonts/icomoon.eot?pr3wo0#iefix') format('embedded-opentype'),
@@ -11,7 +11,6 @@
 }
 
 [class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
   speak: never;
   font-style: normal;
@@ -20,7 +19,6 @@
   text-transform: none;
   line-height: 1;
 
-  /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -57,4 +55,4 @@
 }
 .icon-arrow-back:before {
   content: "\e904";
-}
+} */

package/src/components/modal/index.js

@@ -1,22 +1,46 @@
-import React from "react";
+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';
 
-export const Modal = ({ setShow, headerText, className }) => {
+export const Modal = ({ setShow, headerText, className, type, data, selected}) => {
   const classProps = classnames(styles.modal, className);
+  const [select, setSelect] = useState(selected)
   return (
     <div className={styles["modal-wrap"]}>
-        <div className={styles["modal-content"]}>
+
+      {
+        type == 'content' ?
+          <div className={styles["modal-content"]}>
             <div className={styles["modal-top"]}>
-                <div className={styles['modal-title']}>Title</div>
-                <div className={styles["close-btn"]} onClick={() => setShow(false)}>
-                    <Icon className="icon-close"/>
-                </div>
+              <div className={styles['modal-title']}>Title</div>
+              <div className={styles["close-btn"]} onClick={() => setShow(false)}>
+                <Icon className="icon-close" />
+              </div>
+            </div>
+            <div className={styles["modal-section"]} />
+          </div>
+          : type == 'images' ?
+            <div className={styles["modal-content"]}>
+              <div className={styles["close-btn"]} onClick={() => setShow(false)}>
+                <Icon className="icon-close" />
+              </div>
+              <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)}}>+</h1>: null}
+              </div>
+              <div className={styles["modal-section"]} />
             </div>
-            <div className={styles["modal-section"]}/>
-        </div>
+            : null
+      }
     </div>
   );
 };
@@ -25,4 +49,7 @@ Modal.propTypes = {
   setShow: PropTypes.func,
   headerText: PropTypes.string,
   className: PropTypes.string,
+  type: PropTypes.string,
+  selected: PropTypes.string,
+  data: PropTypes.array
 };

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

@@ -8,6 +8,28 @@ export default {
 
 const Template = ({ headerText, className }) => {
   const [show, setShow] = useState(false);
+  const data = [
+    {
+      url: 'https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg',
+      id: 1
+    },
+    {
+      url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS8LHEGxt49kfpf7asGDZd5rnTjQMD0HF2WtJ3wKEDww&s',
+      id: 2
+    },
+    {
+      url: 'https://s.alamy.com/kdawwlsweh27/2LtummpjO849eQ83yGGiUN/316e62a71020a924f9f663b6ca6b7eda/Fresh_Stock_Content.jpg?fm=jpg&q=100',
+      id: 3
+    },
+    {
+      url:  'https://media.istockphoto.com/id/533899788/photo/mount-ararat-from-armenia.jpg?s=612x612&w=0&k=20&c=dB48gVwJq4UGCzdLpOsxDv9DniGQIOBdmli28zUXu0A=',
+      id: 4
+    },
+    {
+      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);
   };
@@ -15,7 +37,7 @@ const Template = ({ headerText, className }) => {
     <>
       <button onClick={handleClick}>Click</button>
       {show && (
-        <Modal setShow={setShow} headerText={headerText} className={className} />
+        <Modal type='images' selected={4} data={data} setShow={setShow} headerText={headerText} className={className} />
       )}
     </>
   );
@@ -25,5 +47,5 @@ export const Default = Template.bind({});
 
 Default.args = {
   headerText: "Hi...",
-  className: "Modal"
+  className: "Modal",
 };

package/src/components/select/select.module.css

@@ -85,7 +85,7 @@
     align-items: center;
     background: #ffffff;
     padding: 0 15px;
-    height: 46px;
+    min-height: 46px;
     font-size: 16px;
     color: #3C393E;
     line-height: 22px;

package/src/index.js

@@ -9,4 +9,5 @@ export * from './components/radio';
 export * from './components/captcha';
 export * from './components/stepper';
 export * from './components/select';
-export * from './components/file';
+export * from './components/file';
+export * from './components/modal';