@xaypay/tui 0.0.72 → 0.0.74

package/src/components/pagination/index.js

@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./pagination.module.css";
 import { PaginationRange, Dots } from "./paginationRange";
-import Icon from "../icon/Icon";
 
 import DotsIcon from './../../components/icon/Dots';
 import SvgNextarrow from './../../components/icon/Nextarrow';
 
 export const Pagination = ({
+    goTo,
     onChange,
     totalCount,
     siblingCount,
@@ -16,6 +16,8 @@ export const Pagination = ({
     offset,
     className,
 }) => {
+  const [inpVal, setInpVal] = useState('');
+  const [error, setError] = useState(false);
   const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
@@ -67,6 +69,43 @@ export const Pagination = ({
             : onPageChange(currentPageNumber - 4);
     };
 
+    const handleChangeInput = (e) => {
+        setError(false);
+        if (e.target.value.trim() !== '') {
+            const val = parseInt(e.target.value);
+            if (Number.isInteger(val)) {
+                setInpVal(val);
+            } else {
+                setInpVal('');
+            }
+        } else {
+            setInpVal('');
+        }
+    };
+
+    const handleKeyDown = (e) => {
+        const forbiddenKeys = ["e", ".", "+", "-"];
+        if (forbiddenKeys.includes(e.key)) {
+            e.preventDefault();
+        }
+
+        if (e.keyCode === 13) {
+            if (inpVal === '') {
+                setError(true);
+            } else {
+                if (inpVal <= 1) {
+                    setInpVal(1);
+                    onPageChange(1);
+                } else if (inpVal >= (totalCount / offset)) {
+                    setInpVal(Math.ceil(totalCount / offset));
+                    onPageChange(Math.ceil(totalCount / offset));
+                } else {
+                    onPageChange(inpVal);
+                }
+            }
+        }
+    };
+
     let lastPage = paginationRange[paginationRange.length - 1];
     return (
         <ul className={classProps}>
@@ -74,9 +113,9 @@ export const Pagination = ({
                 style={{
                     transform: 'rotate(180deg)'
                 }}
-                className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 onClick={onPrevious}
                 disabled={currentPage === 1 ? true : false}
+                className={`${styles["pagination-btn"]} pagination-btn-rem`}
             >
                 <SvgNextarrow />
             </button>
@@ -157,18 +196,50 @@ export const Pagination = ({
                     </li>
                 );
             })}
+
             <button
                 onClick={onNext}
-                className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 disabled={currentPageNumber === lastPage ? true : false}
+                className={`${styles["pagination-btn"]} pagination-btn-rem`}
             >
                 <SvgNextarrow />
             </button>
+
+            {
+                goTo && <div>
+                    <input
+                        onKeyDown={handleKeyDown}
+                        onInput={handleChangeInput}
+                        type='number'
+                        style={{
+                            width: '53px',
+                            height: '30px',
+                            outline: 'none',
+                            color: '#3C393E',
+                            fontSize: '13px',
+                            margin: '0px 6px',
+                            fontWeight: '500',
+                            textAlign: 'center',
+                            border: '1px solid',
+                            borderRadius: '6px',
+                            borderColor: error ? 'red' : '#00236a'
+                        }}
+                        value={inpVal}
+                    />
+                    <span
+                        style={{
+                            color: '#3C393E',
+                            fontSize: '13px'
+                        }}
+                    >Էջ</span>
+                </div>
+            }
         </ul>
     );
 };
 
 Pagination.propTypes = {
+    goTo: PropTypes.bool,
     offset: PropTypes.number,
     totalCount: PropTypes.number,
     className: PropTypes.string,

package/src/components/pagination/pagination.module.css

@@ -78,4 +78,16 @@ i {
     font-size: 12px;
     line-height: 12px;
     color: #3C393E;
-}
+}
+
+/* Works for Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Works for Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}

package/src/components/pagination/pagination.stories.js

@@ -316,7 +316,7 @@ const data = [
     phone: "572-905-5251",
   },
 ];
-const Template = ({ offset, currentPage, siblingCount, totalCount }) => {
+const Template = ({ goTo, offset, currentPage, siblingCount, totalCount }) => {
   const [currentPageNumber, setCurrentPageNumber] = useState(currentPage);
   const currentTableData = useMemo(() => {
     const firstPageIndex = (currentPageNumber - 1) * offset;
@@ -351,6 +351,7 @@ const Template = ({ offset, currentPage, siblingCount, totalCount }) => {
         </tbody>
       </table>
       <Pagination
+        goTo={goTo}
         currentPage={currentPage}
         totalCount={totalCount}
         offset={offset}
@@ -364,8 +365,9 @@ const Template = ({ offset, currentPage, siblingCount, totalCount }) => {
 export const Default = Template.bind({});
 
 Default.args = {
+  goTo: false,
   offset: 10,
-  currentPage: 4,
+  currentPage: 1,
   siblingCount: 2,
   totalCount: 44
 };

package/src/components/select/index.js

@@ -170,7 +170,14 @@ export const Select = ({
     }, [opened]);
 
     useEffect(() => {
-        selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? []: selected );
+        if (selected) {
+            if (selected.length > 0) {
+                setNewSelected(isObjectEmpty(selected[0]) ? []: selected );
+            } else {
+                setNewSelected([]);
+            }
+        }
+
         if (!multiple) {
             options && options.length > 0 && setExistOptions(options);
         } else {
@@ -187,7 +194,7 @@ export const Select = ({
             });
             setExistOptions(modifiedOptions);
         }
-    }, [options, multiple, selected]);
+    }, [options, multiple, selected, selected?.length]);
     
     return (
         <div className={classProps}>

package/src/components/select/select.stories.js

@@ -25,4 +25,3 @@ Default.args = {
     selected: [{"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}],
     keyNames: {name: 'value', id : 'bbb'}
 };
-

package/src/components/typography/index.js

@@ -74,7 +74,7 @@ export const Typography = ({
 				textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform'+variant],
 				textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration'+variant],
 				backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor'+variant],
-				color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover'+variant] : color ? color : configStyles.TYPOGRAPHY['color'+variant],
+				color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY['color'+variant] : color ? color : configStyles.TYPOGRAPHY['color'+variant],
 			},
 			...props,
 			className: classProps,

package/src/components/typography/typography.stories.js

@@ -13,9 +13,10 @@ export const Template = (args) => <>
 	{
 		staticTag.map((tag,key) => {
 			return <Typography
+				{...args}
 				key={key}
 				variant={tag} 
-				color={"#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase()}
+				color='#a3d177'
 			>
 				{tag}
 			</Typography>;

package/src/stories/configuration.stories.mdx

@@ -556,7 +556,10 @@ import StackAlt from './assets/stackalt.svg';
   progressFailedColor: '#E40E00',                       // for file list item progress backfround color when file upload is failed
   progressSuccessColor: '#069768',                      // for file list item progress background color when file upload is success
   progressLoadingColor: '#051942',                      // for file list item progress background color when file upload is loading
+  formatError: 'ֆայլի սխալ ֆորմատ',                     // for file error text when file extention is invalid
+  noChoosenFile: 'Ֆայլը ընտրված չէ',                    // for file error text when file is not choosen
   listItemBackgroundColor: '#F6F8F8',                   // for file list item background color
+  maxSizeError: 'Առավելագույն ծավալ',                   // for file error text when choosen file size is more then maxSize prop
   putFileHere: 'Տեղադրել ֆայլը այստեղ',                 // for file place text
   hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
   listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color

package/tui.config.js

@@ -101,14 +101,14 @@ module.exports = {
         sizeh6: '14px',                                    // for variant h6 font size
         sizespan: '12px',                                  // for variant span font size
 
-        textAlignp: '0px',                                 // for variant p text align
-        textAlignh1: '0px',                                // for variant h1 text align
-        textAlignh2: '0px',                                // for variant h2 text align
-        textAlignh3: '0px',                                // for variant h3 text align
-        textAlignh4: '0px',                                // for variant h4 text align
-        textAlignh5: '0px',                                // for variant h5 text align
-        textAlignh6: '0px',                                // for variant h6 text align
-        textAlignspan: '0px',                              // for variant span text align
+        textAlignp: 'left',                                 // for variant p text align
+        textAlignh1: 'left',                                // for variant h1 text align
+        textAlignh2: 'left',                                // for variant h2 text align
+        textAlignh3: 'left',                                // for variant h3 text align
+        textAlignh4: 'left',                                // for variant h4 text align
+        textAlignh5: 'left',                                // for variant h5 text align
+        textAlignh6: 'left',                                // for variant h6 text align
+        textAlignspan: 'left',                              // for variant span text align
 
         weightp: '500',                                    // for variant p font weight
         weighth1: '400',                                   // for variant h1 font weight
@@ -119,15 +119,6 @@ module.exports = {
         weighth6: '600',                                   // for variant h6 font weight
         weightspan: '500',                                 // for variant span font weight
 
-        colorHoverp: '#3C393E',                            // for variant p color in hover mode
-        colorHoverh1: '#3C393E',                           // for variant h1 color in hover mode
-        colorHoverh2: '#3C393E',                           // for variant h2 color in hover mode
-        colorHoverh3: '#3C393E',                           // for variant h3 color in hover mode
-        colorHoverh4: '#3C393E',                           // for variant h4 color in hover mode
-        colorHoverh5: '#3C393E',                           // for variant h5 color in hover mode
-        colorHoverh6: '#3C393E',                           // for variant h6 color in hover mode
-        colorHoverspan: '#3C393E',                         // for variant span color in hover mode
-
         backgroundColorp: 'transparent',                   // for variant p background color
         backgroundColorh1: 'transparent',                  // for variant h1 background color
         backgroundColorh2: 'transparent',                  // for variant h2 background color
@@ -363,7 +354,10 @@ module.exports = {
         progressFailedColor: '#E40E00',                       // for file list item progress backfround color when file upload is failed
         progressSuccessColor: '#069768',                      // for file list item progress background color when file upload is success
         progressLoadingColor: '#051942',                      // for file list item progress background color when file upload is loading
+        formatError: 'ֆայլի սխալ ֆորմատ',                     // for file error text when file extention is invalid
+        noChoosenFile: 'Ֆայլը ընտրված չէ',                    // for file error text when file is not choosen
         listItemBackgroundColor: '#F6F8F8',                   // for file list item background color
+        maxSizeError: 'Առավելագույն ծավալ',                   // for file error text when choosen file size is more then maxSize prop
         putFileHere: 'Տեղադրել ֆայլը այստեղ',                 // for file place text
         hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
         listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color