@xaypay/tui 0.0.23 → 0.0.24

package/package.json

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

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';