@xaypay/tui 0.0.22 → 0.0.24

package/package.json

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

package/src/components/autocomplate/autocomplate.stories.js

@@ -11,13 +11,23 @@ const Template = (args) => <Autocomplate {...args} />;
 export const Default = Template.bind({});
 Default.args = {
   jsonOptionsData: '[{"bbb":"0", "value":"asd"}, {"bbb":"2", "value":"bas"}]',
-  // jsonSelectedOptionsData: '{"bbb":"0", "value":"asd"}',
+  jsonSelectedOptionsData: '{"bbb":"0", "value":"gasdfgdsfgdsg"}',
   label: 'label',
   keyNames: { name: 'value', id: 'bbb' },
   searchCount: 2,
   onChange: (aa)=> {
     console.log(aa);
-    // console.log(aa.id);
+    fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${aa.name? aa.name : 'a'}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6Ijk2Mjk0MjJkNTY1ZTQ3MGM3MjFkZjY5NDgzMzE3ZThmYjdlMDJmMjI4YjY5MzZhYzdiM2EzMWM4ODZkMWQwZDk2YjIzNzYwMmJhMWE0MTE0IiwiaWF0IjoxNjY5MTgyOTI5LjczMjIwOCwibmJmIjoxNjY5MTgyOTI5LjczMjIzLCJleHAiOjE2NjkyMDgxMjkuNzEyNDczLCJzdWIiOiJtaW5hcyIsInNjb3BlcyI6WyJlbWFpbCJdfQ.NsFsqDHOBYzgReUtW9iumbEvYCB8O7yCIJ2UTz0-AeVEjdUxE-htZMBYF8pP3m-lM1IQ3iN2ude7AZhTzVLMAhTt-5tKJr8YAxhX28yCBLYsFHE-e0k7-FLKBkkZxt9yrvX_Rz8aSQ39-3HrkyB-BYHzV5-GnMgAhnrWKYlTmrVFi9SWu0WBYPHvblMTEh3Vkkd1ESn7fUhy8gf8qma0ChRAMbkozLffbVVYfnWlU0eySD2PUWrZ26JtKAX6k-q7TiMd6HMjOEFUi80JH7aoKDI1vdg8kKlPqcjYTEJK3hzIJrtOHTTUoW4m1-k5x9Le3ULdT4Hctr0bh--ERShnTTg-DBJh0zIoBol4hFHZnA35_FEqKBkDAJ3EOt9DusBTJ9Iad-JzrxJqb-4uhzWjTg8f3F_IedPgG3pwqGkSw2U2dVqzwdqy3yaElp7SGWpicNxJWJsr5Vfa8gLhMkmDMooOHNBUNkS-4Z8Cn6dPc-1mg2JZxrBuSMElkp8-DQr9Xe9VBf8wCUEdHDvQmb-6LIEL8njS2XGL82m827uO-BOVVOIiZO-BVGn_VjIwdhywrjmudPWBy2CVUxHEft64Bz3VkS2FnFoSN7_zsaCE6dpXWTRJKv-4IeBv8pn4-lYw67jMINza7Om9_6BOlnk1VvjixmulPyTobgEO7PQ6FeE',
+      },
+    }).then((res)=> {
+      return res.json()
+    }).then((data)=> {
+      console.log(data)
+    })
   }
 
 };

package/src/components/autocomplate/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./autocomplate.module.css";
@@ -13,79 +13,81 @@ export const Autocomplate = ({
   onChange,
   value,
   searchCount,
+  placeHolder,
   keyNames,
+  errorMesage,
   ...props
 }) => {
   const classProps = classnames(styles.searchBox, className);
-  const [inputValue, setInputValue] = useState(null);
-  const [inputId, setInputId] = useState(null);
+  const parseSelectedOptionsData =
+    jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : { name: '', id: '' };
+  const [inputValue, setInputValue] = useState(parseSelectedOptionsData[keyNames.name]);
+  const [inputId, setInputId] = useState(parseSelectedOptionsData[keyNames.id]);
   const [activeOption, setActiveOption] = useState(0);
-  const [filteredOptions, setFilteredOptions] = useState([]);
   const [showOptions, setShowOptions] = useState(false);
   const parseOptionsData =
-    jsonOptionsData? JSON.parse(jsonOptionsData).sort() : [];
-    const parseSelectedOptionsData =
-    jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {};
-    
+    jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
+  useEffect(() => {
+    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name])
+    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id])
+  }, [jsonSelectedOptionsData])
+
   const handleChange = (e) => {
     const currentInputValue = e.currentTarget.value;
     setInputId(null)
-    const filteredOptions = parseOptionsData.filter(
-      (optionName) =>
-        optionName[keyNames.name].toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1
-    );
     setInputValue(currentInputValue);
+    setInputId('')
     setActiveOption(0);
-    setFilteredOptions(filteredOptions);
-    setShowOptions(true);    
+    setShowOptions(true);
+    onChange({ name: currentInputValue, id: e.target.id });
   };
   const handleClick = (e) => {
-    setInputValue(e.currentTarget.innerText);
-    setInputId(e.target.id)
     setActiveOption(0);
-    setFilteredOptions([]);
     setShowOptions(false);
-    onChange({name: e.currentTarget.innerText, id: e.target.id});
+    setInputValue(e.target.innerText);
+    setInputId(e.target.id)
+
+    onChange({ name: e.target.innerText, id: e.target.id });
 
   };
   let optionList;
-    if (showOptions && inputValue) {
-        if (filteredOptions.length && inputValue.length >= searchCount) {
-            optionList = (
-                <div className={styles['autocomplate-content-bottom']}>
-                  <div className={styles['autocomplate-content-bottom-inner']}>
-                      {filteredOptions.map((optionName, index) => {
-                          let className;
-                          if (index === activeOption) {
-                              className = "option-active";
-                          }
-                          return (
-                              <div
-                                  className={styles[className]}
-                                  key={optionName[keyNames.id]}
-                                  onClick={handleClick}
-                              >
-                                <div id={optionName[keyNames.id]} className={styles['autocomplate-content-bottom-row']}>{optionName[keyNames.name]}</div>
-                              </div>
-                          );
-                      })}
-                  </div>
+  if (showOptions && inputValue) {
+    if (parseOptionsData.length && inputValue.length >= searchCount) {
+      optionList = (
+        <div className={styles['autocomplate-content-bottom']}>
+          <div className={styles['autocomplate-content-bottom-inner']}>
+            {parseOptionsData.map((optionName, index) => {
+              let className;
+              if (index === activeOption) {
+                className = "option-active";
+              }
+              return (
+                <div
+                  className={styles[className]}
+                  key={optionName[keyNames.id]}
+                  onClick={handleClick}
+                >
+                  <div id={optionName[keyNames.id]} className={styles['autocomplate-content-bottom-row']}>{optionName[keyNames.name]}</div>
                 </div>
+              );
+            })}
+          </div>
+        </div>
 
 
-            );
-        } else {
-            optionList = (
-                <div className={styles['autocomplate-content-bottom']}>
-                  <div className={styles['autocomplate-content-bottom-inner']}>
-                    <div className={styles['autocomplate-content-bottom-row']}>
-                      <div className={styles['no-option']}>No Option!</div>
-                    </div>
-                  </div>
-                </div>
-            );
-        }
+      );
+    } else {
+      optionList = (
+        <div className={styles['autocomplate-content-bottom']}>
+          <div className={styles['autocomplate-content-bottom-inner']}>
+            <div className={styles['autocomplate-content-bottom-row']}>
+              <div className={styles['no-option']}>No Option!</div>
+            </div>
+          </div>
+        </div>
+      );
     }
+  }
 
   return (
     <>
@@ -98,10 +100,12 @@ export const Autocomplate = ({
           required={required}
           disabled={disabled}
           onChange={handleChange}
-          value={inputValue != null ? inputValue : parseSelectedOptionsData[keyNames.name]}
-          placeholder= {!parseSelectedOptionsData[keyNames.name]  ?" Write..." : ''}
+          onClick={() => { setShowOptions(!showOptions) }}
+          value={inputValue}
+          placeholder={placeHolder}
           {...props}
-        />
+          />
+          {errorMesage ? <span className={styles.errorMessage}>{errorMesage}</span> : null}
         {optionList}
       </div>
     </>
@@ -111,6 +115,7 @@ export const Autocomplate = ({
 Autocomplate.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
+  placeHolder: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   jsonOptionsData: PropTypes.string,
@@ -119,6 +124,7 @@ Autocomplate.propTypes = {
   value: PropTypes.string,
   searchCount: PropTypes.number,
   keyNames: PropTypes.object,
+  errorMesage: PropTypes.string,
 };
 
 

package/src/components/button/button.module.css

@@ -1,5 +1,5 @@
 .btn {
-    text-transform: capitalize;
+    text-transform: none;
     font-size: 16px;
     line-height: 20px;
     padding: 12px 20px;

package/src/components/file/file.module.css

@@ -0,0 +1,11 @@
+.file-Form{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 3px dashed rgb(161, 160, 160);
+    width: 300px;
+    height: 200px;
+    cursor: pointer;
+    border-radius: 5px;
+}

package/src/components/file/file.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { File } from "./index";
+
+export default {
+  component: File,
+  title: "Components/File",
+};
+
+const Template = (args) => <File {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'ssa',
+  onChange: (aa) => {
+    console.log('barev', aa);
+
+  },
+  defaultData: {
+    url: 'https://images.pexels.com/photos/753626/pexels-photo-753626.jpeg?auto=compress&cs=tinysrgb&w=1600',
+    type: "image/png",
+  },
+  name: 'sss'
+
+};

package/src/components/file/index.js

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import styles from "./file.module.css";
+
+export const File = ({
+  className,
+  label,
+  required,
+  disabled,
+  onChange,
+  defaultData,
+  errorMesage,
+  name,
+  ...props
+}) => {
+  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ'
+  const [image, setImage] = useState(defaultData ?
+    defaultData.type != 'application/pdf' ?
+      defaultData.url : pdfImageName : null);
+  const [error, setError] = useState(errorMesage);
+  const [fileName, setFileName] = useState('no selected file');
+  function fileType(file) {
+    if (file.size <= 5000000) {
+      if (file.type === 'image/jpeg' || file.type === 'image/png') {
+        setImage(URL.createObjectURL(file))
+        setError('')
+
+      }
+      else if (file.type === 'application/pdf') {
+        setImage(pdfImageName)
+        setError('')
+
+      }
+      else {
+        setImage(null)
+        setFileName('no selected file');
+        setError('ֆայլի սխալ ֆորմատ')
+      }
+    }
+    else {
+      setImage(null)
+      setFileName('no selected file');
+      setError('առավելագույն ծավալ')
+    }
+  }
+
+  return (
+    <>
+      <label>{label}</label>
+      <div>
+        <div
+        className={styles['file-Form']}
+          onChange={(e) => { console.log(e) }}
+          style={error ? { borderColor: 'red' } : {}}
+          onClick={() => {
+            document.querySelector(`.${name}`).click()
+          }}
+        >
+          <input type='file' className={name}  hidden disabled={disabled}
+            onChange={({ target: { files } }) => {
+              onChange({ target: { files } })
+              files[0] && setFileName(files[0].name)
+              if (files[0]) {
+                fileType(files[0])
+              }
+            }}
+          />
+          {
+            image ?
+              <div>
+                <div
+                  onClick={() => {
+                    setFileName('no selected file');
+                    setImage(null)
+                  }}
+                >
+                  x
+                </div>
+                <img
+                  src={image}
+                  height={120}
+                  alt={fileName}
+                />
+              </div> :
+              <div>
+                <div>
+                  <img src='https://uxwing.com/wp-content/themes/uxwing/download/web-app-development/cloud-upload-icon.png' width={100} />
+                </div>
+                <div>
+                  <span>Տեղադրել ֆայլը այստեղ կամ Բեռնել</span>
+                </div>
+                <div>
+                  <span>Առավելագույնը 5ՄԲ ( jpg, jpeg, png, pdf)</span>
+                </div>
+              </div>
+          }
+        </div>
+      </div>
+      {
+        error ? <span style={{ color: 'red' }}>{error}</span> : null
+      }
+    </>
+  );
+};
+
+File.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  errorMesage: PropTypes.string,
+  defaultData: PropTypes.object
+};
+
+

package/src/components/input/input.module.css

@@ -16,7 +16,7 @@
     position: relative;
 }
 .input {
-    text-transform: capitalize;
+    text-transform: none;
     font-size: 16px;
     line-height: 20px;
     border-radius: 6px;

package/src/components/multiselect/multiselect.module.css

@@ -3,7 +3,7 @@
 }
 .multi-select-title {
     display: block;
-    text-transform: capitalize;
+    text-transform: none;
     font-size: 16px;
     color: #3C393E;
     line-height: 22px;

package/src/components/pagination/paginationRange.js

@@ -48,7 +48,7 @@ export const PaginationRange = ({
     }
 
     if (shouldShowLeftDots && !shouldShowRightDots) {
-      let rightItemCount =
+      let rightItemCount = 0;
         currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7
           ? (rightItemCount = 4 + siblingCountNumber)
           : (rightItemCount = 3 + siblingCountNumber);

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

@@ -1,6 +1,6 @@
 .select-title {
     display: block;
-    text-transform: capitalize;
+    text-transform: none;
     font-size: 16px;
     color: #3C393E;
     line-height: 22px;

package/src/components/typography/typography.module.css

@@ -34,21 +34,21 @@ h5 {
 }
 
 h5 {
-    text-transform: capitalize;
+    text-transform: none;
     font-size: 16px;
     line-height: 22px;
     font-weight: 600;
 }
 
 p {
-    text-transform: capitalize;
+    text-transform: none;
     font-size: 14px;
     line-height: 20px;
     font-weight: 600;
 }
 
 span {
-    text-transform: capitalize;
+    text-transform: none;
     font-size: 12px;
     line-height: 16px;
     font-weight: 500;

package/src/index.js

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