@xaypay/tui 0.0.3 → 0.0.5

package/src/components/multiselect/multiselect.stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Multiselect } from "./index";
+
+export default {
+  component: Multiselect,
+  title: "Components/Multiselect",
+};
+
+const Template = (args) => <Multiselect {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    jsonOptionsData: '[{"id":"1", "name":"Կենտրոն"}]',
+    jsonSelectedOptionsData: '[{"id":"0", "name":"Արաբկիր"}, {"id":"2", "name":"Մալաթիա"}]',
+    label: 'label',
+    onchange: (newValue)=> {
+        console.log(newValue);
+    }
+};

package/src/components/pagination/index.js

@@ -0,0 +1,119 @@
+import { React, useState, useEffect } from "react";
+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'
+
+export const Pagination = ({
+  onChange,
+  totalCount,
+  siblingCount,
+  currentPage,
+  offset,
+  className,
+}) => {
+  const [siblingCountNumber, setSibilingCountNumber] = useState(2);
+  const [currentPageNumber, setCurrentPage] = useState(1);
+  const [currentTotalCount, setcurrentTotalCount] = useState(10);
+  useEffect(() => {
+    setcurrentTotalCount(totalCount);
+  }, [totalCount]);
+  useEffect(() => {
+    setSibilingCountNumber(siblingCount);
+  }, [siblingCount]);
+  useEffect(() => {
+    setCurrentPage(currentPage);
+  }, [currentPage]);
+
+  const onPageChange = (page) => {
+    setCurrentPage(page);
+  };
+  onChange(currentPageNumber);
+  const paginationRange = PaginationRange({
+    currentPageNumber,
+    currentTotalCount,
+    siblingCountNumber,
+    offset,
+  });
+  if (currentPageNumber === 0 || paginationRange.length < 2) {
+    return null;
+  }
+  const classProps = classnames(styles.list, className ? className : styles["pagination-bar"]);
+
+  const onNext = () => {
+    onPageChange(currentPageNumber + 1);
+  };
+
+  const onPrevious = () => {
+    onPageChange(currentPageNumber - 1);
+  };
+
+  const onNextFive = () => {
+    currentPageNumber !== lastPage - 4 ?
+    onPageChange(currentPageNumber + 5) : onPageChange(currentPageNumber + 4);
+  };
+
+  const onPreviousFive = (e) => {
+    currentPageNumber !== 5
+      ? onPageChange(currentPageNumber - 5)
+      : onPageChange(currentPageNumber - 4);
+  };
+
+  let lastPage = paginationRange[paginationRange.length - 1];
+  return (
+    <ul className={classProps}>
+      <button className={styles["pagination-btn"]} onClick={onPrevious} disabled={currentPage === 1 ? true : false}>
+        <Icon className="icon-arrow-back"/>
+      </button>
+
+      {paginationRange.map((pageNumber, id) => {
+        if (pageNumber === Dots) {
+            let currentPageIndex = paginationRange.indexOf(currentPageNumber);
+          return (
+            <li key={id} className={classnames(styles['pagination-jump-next'],styles.listItem)} onClick={id < currentPageIndex ? onPreviousFive : onNextFive}
+                disabled={currentPageIndex === 0 ? true : false}>
+              <span className={styles['pagination-jump-next-txt']}>...</span>
+              <span className={styles['pagination-jump-next-arrow']}>
+                <Icon className="icon-arrow-jump-next"/>
+              </span>
+            </li>
+          );
+        }
+
+        return (
+          <li
+            onClick={() => onPageChange(pageNumber)}
+            key={id}
+            className={classnames(
+                `${
+                    pageNumber === currentPageNumber
+                        ? styles.selected
+                        : styles.listItem
+                    }`, styles['pagination-item']
+            )}
+          >
+            {pageNumber}
+          </li>
+        );
+      })}
+      <button
+        onClick={onNext}
+        className={styles["pagination-btn"]}
+        disabled={currentPageNumber === lastPage ? true : false}
+      >
+        <Icon className='icon-arrow'/>
+      </button>
+    </ul>
+  );
+};
+
+Pagination.propTypes = {
+  offset: PropTypes.number,
+  totalCount: PropTypes.number,
+  className: PropTypes.string,
+  siblingCount: PropTypes.number,
+  currentPage: PropTypes.number,
+};
+
+Pagination.defaultProps = { offset: 2, siblingCount: 2 };

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

@@ -0,0 +1,80 @@
+
+.listItem:focus {
+    background-color: #4CAF50;
+    color: white;
+  }
+
+.listItem:hover:not(.active) {
+    background-color: #ddd;
+}
+
+.pagination-bar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 8px;
+}
+.pagination-btn {
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 1);
+    box-shadow: 0 0 0 1px rgba(238,238,238, 1);
+    border-radius: 6px;
+    cursor: pointer;
+    border: none;
+    outline: none;
+}
+.pagination-item, .pagination-jump-next {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    position: relative;
+    font-size: 16px;
+    line-height: 22px;
+    background-color: rgba(255, 255, 255, 1);
+    box-shadow: 0 0 0 1px rgba(238,238,238, 1);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 240ms;
+}
+.pagination-item:hover {
+    background-color: rgba(238, 238, 238, 1);
+}
+.pagination-item.selected {
+    background-color: rgba(0, 35, 106, 1);
+    color: rgba(255, 255, 255, 1);
+}
+.pagination-jump-next-txt, .pagination-jump-next-arrow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-size: 12px;
+    line-height: 14px;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 240ms, color 240ms;
+}
+.pagination-jump-next-arrow {
+    opacity: 0;
+}
+.pagination-jump-next:hover .pagination-jump-next-arrow {
+    opacity: 1;
+}
+.pagination-jump-next:hover .pagination-jump-next-txt {
+    opacity: 0;
+}
+i {
+    font-size: 12px;
+    line-height: 12px;
+    color: #3C393E;
+}

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

@@ -0,0 +1,371 @@
+import { React, useState, useMemo, useEffect } from "react";
+import { Pagination } from "./index";
+
+export default {
+  component: Pagination,
+  title: "Components/Pagination",
+};
+
+const data = [
+  {
+    id: 1,
+    first_name: "Jessamyn",
+    last_name: "Espinazo",
+    email: "jespinazo0@chicagotribune.com",
+    phone: "162-166-0977",
+  },
+  {
+    id: 2,
+    first_name: "Isac",
+    last_name: "Tooher",
+    email: "itooher1@psu.edu",
+    phone: "655-567-3619",
+  },
+  {
+    id: 3,
+    first_name: "Tabbatha",
+    last_name: "Proschke",
+    email: "tproschke2@weibo.com",
+    phone: "327-612-4850",
+  },
+  {
+    id: 4,
+    first_name: "Ninetta",
+    last_name: "Mabb",
+    email: "nmabb3@canalblog.com",
+    phone: "971-296-0911",
+  },
+  {
+    id: 5,
+    first_name: "Danni",
+    last_name: "Wallentin",
+    email: "dwallentin4@comcast.net",
+    phone: "983-297-0506",
+  },
+  {
+    id: 6,
+    first_name: "Neely",
+    last_name: "Purkins",
+    email: "npurkins5@mediafire.com",
+    phone: "379-119-4237",
+  },
+  {
+    id: 7,
+    first_name: "Jessika",
+    last_name: "Kinkaid",
+    email: "jkinkaid6@eventbrite.com",
+    phone: "771-888-6284",
+  },
+  {
+    id: 8,
+    first_name: "Julianna",
+    last_name: "Swindall",
+    email: "jswindall7@aol.com",
+    phone: "252-614-0486",
+  },
+  {
+    id: 9,
+    first_name: "Corrinne",
+    last_name: "Geeve",
+    email: "cgeeve8@wisc.edu",
+    phone: "450-872-8646",
+  },
+  {
+    id: 10,
+    first_name: "Trumann",
+    last_name: "Flux",
+    email: "tflux9@census.gov",
+    phone: "249-892-1585",
+  },
+  {
+    id: 11,
+    first_name: "Annalise",
+    last_name: "Keinrat",
+    email: "akeinrata@i2i.jp",
+    phone: "659-283-4601",
+  },
+  {
+    id: 12,
+    first_name: "Cal",
+    last_name: "Haverson",
+    email: "chaversonb@multiply.com",
+    phone: "689-567-9516",
+  },
+  {
+    id: 13,
+    first_name: "Erik",
+    last_name: "McGillivrie",
+    email: "emcgillivriec@theglobeandmail.com",
+    phone: "334-579-0995",
+  },
+  {
+    id: 14,
+    first_name: "Cherilyn",
+    last_name: "Tuddenham",
+    email: "ctuddenhamd@indiegogo.com",
+    phone: "408-721-4575",
+  },
+  {
+    id: 15,
+    first_name: "Merola",
+    last_name: "MacDowal",
+    email: "mmacdowale@omniture.com",
+    phone: "863-234-5628",
+  },
+  {
+    id: 16,
+    first_name: "Olenolin",
+    last_name: "O'Shiels",
+    email: "ooshielsf@smh.com.au",
+    phone: "646-127-1652",
+  },
+  {
+    id: 17,
+    first_name: "Donnie",
+    last_name: "Oliphant",
+    email: "doliphantg@i2i.jp",
+    phone: "975-457-5826",
+  },
+  {
+    id: 18,
+    first_name: "Carly",
+    last_name: "Bulleyn",
+    email: "cbulleynh@fc2.com",
+    phone: "938-211-6682",
+  },
+  {
+    id: 19,
+    first_name: "Walt",
+    last_name: "Meace",
+    email: "wmeacei@printfriendly.com",
+    phone: "688-775-4039",
+  },
+  {
+    id: 20,
+    first_name: "Debbie",
+    last_name: "Rockhall",
+    email: "drockhallj@weebly.com",
+    phone: "120-270-4052",
+  },
+  {
+    id: 21,
+    first_name: "Devonna",
+    last_name: "Oylett",
+    email: "doylettk@jalbum.net",
+    phone: "364-921-6359",
+  },
+  {
+    id: 22,
+    first_name: "Jourdan",
+    last_name: "Grahamslaw",
+    email: "jgrahamslawl@irs.gov",
+    phone: "939-973-9940",
+  },
+  {
+    id: 23,
+    first_name: "Brana",
+    last_name: "Haste",
+    email: "bhastem@typepad.com",
+    phone: "142-349-6034",
+  },
+  {
+    id: 24,
+    first_name: "Wilmer",
+    last_name: "Trenouth",
+    email: "wtrenouthn@netvibes.com",
+    phone: "346-897-1305",
+  },
+  {
+    id: 25,
+    first_name: "Brandtr",
+    last_name: "Esler",
+    email: "beslero@wikispaces.com",
+    phone: "638-763-4382",
+  },
+  {
+    id: 26,
+    first_name: "Andonis",
+    last_name: "Durbin",
+    email: "adurbinp@newyorker.com",
+    phone: "531-854-8916",
+  },
+  {
+    id: 27,
+    first_name: "Cynthia",
+    last_name: "How to preserve",
+    email: "chowtopreserveq@de.vu",
+    phone: "119-342-9726",
+  },
+  {
+    id: 28,
+    first_name: "Jennee",
+    last_name: "Cowdroy",
+    email: "jcowdroyr@marketwatch.com",
+    phone: "804-307-6112",
+  },
+  {
+    id: 29,
+    first_name: "Lorin",
+    last_name: "D'Hooghe",
+    email: "ldhooghes@wix.com",
+    phone: "374-113-9906",
+  },
+  {
+    id: 30,
+    first_name: "Letti",
+    last_name: "Acreman",
+    email: "lacremant@ted.com",
+    phone: "157-463-7705",
+  },
+  {
+    id: 31,
+    first_name: "Drucie",
+    last_name: "Watkins",
+    email: "dwatkinsu@japanpost.jp",
+    phone: "778-273-9630",
+  },
+  {
+    id: 32,
+    first_name: "Ev",
+    last_name: "Christy",
+    email: "echristyv@addthis.com",
+    phone: "575-366-6055",
+  },
+  {
+    id: 33,
+    first_name: "Nick",
+    last_name: "Moores",
+    email: "nmooresw@privacy.gov.au",
+    phone: "905-406-0567",
+  },
+  {
+    id: 34,
+    first_name: "Mollie",
+    last_name: "Strut",
+    email: "mstrutx@ftc.gov",
+    phone: "838-952-4289",
+  },
+  {
+    id: 35,
+    first_name: "Dasha",
+    last_name: "Gerring",
+    email: "dgerringy@histats.com",
+    phone: "147-553-3272",
+  },
+  {
+    id: 36,
+    first_name: "Hazel",
+    last_name: "Barber",
+    email: "hbarberz@walmart.com",
+    phone: "830-229-8318",
+  },
+  {
+    id: 37,
+    first_name: "Danila",
+    last_name: "Gidman",
+    email: "dgidman10@networkadvertising.org",
+    phone: "474-241-8816",
+  },
+  {
+    id: 38,
+    first_name: "Gladi",
+    last_name: "Torry",
+    email: "gtorry11@usgs.gov",
+    phone: "865-594-2480",
+  },
+  {
+    id: 39,
+    first_name: "Mair",
+    last_name: "Garnam",
+    email: "mgarnam12@miitbeian.gov.cn",
+    phone: "890-209-7033",
+  },
+  {
+    id: 40,
+    first_name: "Wilie",
+    last_name: "Sebire",
+    email: "wsebire13@pen.io",
+    phone: "303-945-1363",
+  },
+  {
+    id: 41,
+    first_name: "Corrie",
+    last_name: "Terrett",
+    email: "cterrett14@comcast.net",
+    phone: "410-942-4578",
+  },
+  {
+    id: 42,
+    first_name: "Dene",
+    last_name: "Mullender",
+    email: "dmullender15@sun.com",
+    phone: "901-439-2803",
+  },
+  {
+    id: 43,
+    first_name: "Prue",
+    last_name: "Digginson",
+    email: "pdigginson16@discuz.net",
+    phone: "149-648-9075",
+  },
+  {
+    id: 44,
+    first_name: "Blithe",
+    last_name: "Huriche",
+    email: "bhuriche17@dion.ne.jp",
+    phone: "572-905-5251",
+  },
+];
+const Template = ({ offset, currentPage, siblingCount, totalCount }) => {
+  const [currentPageNumber, setCurrentPageNumber] = useState(currentPage);
+  const currentTableData = useMemo(() => {
+    const firstPageIndex = (currentPageNumber - 1) * offset;
+    const lastPageIndex = firstPageIndex + offset;
+    return data.slice(firstPageIndex, lastPageIndex);
+  }, [offset, currentPageNumber]);
+
+  return (
+    <>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>FIRST NAME</th>
+            <th>LAST NAME</th>
+            <th>EMAIL</th>
+            <th>PHONE</th>
+          </tr>
+        </thead>
+        <tbody>
+          {currentTableData.map((item, id) => {
+            return (
+              <tr key={id}>
+                <td>{item.id}</td>
+                <td>{item.first_name}</td>
+                <td>{item.last_name}</td>
+                <td>{item.email}</td>
+                <td>{item.phone}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      <Pagination
+        currentPage={currentPage}
+        totalCount={totalCount}
+        offset={offset}
+        siblingCount={siblingCount}
+        onChange={(page) => setCurrentPageNumber(page)}
+      />
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  offset: 10,
+  currentPage: 4,
+  siblingCount: 2,
+  totalCount: 44
+};

package/src/components/pagination/paginationRange.js

@@ -0,0 +1,70 @@
+import React, { useMemo } from "react";
+// import styles from "./pagination.module.scss";
+
+export const Dots = "...";
+
+const range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, idx) => idx + start);
+};
+
+export const PaginationRange = ({
+  currentTotalCount,
+  offset,
+  siblingCountNumber,
+  currentPageNumber,
+}) => {
+  const paginationRange = useMemo(() => {
+    const totalPageCount = Math.ceil(currentTotalCount / offset);
+
+    //currentPage + 2*Dots + start + end = 5
+    const totalPageNumber = siblingCountNumber + 5;
+    if (totalPageNumber >= totalPageCount) {
+      return range(1, totalPageCount);
+    }
+    const rightSiblingIndex = Math.min(
+      currentPageNumber + siblingCountNumber,
+      totalPageCount
+    );
+
+    const leftSiblingIndex = Math.max(
+      currentPageNumber - siblingCountNumber,
+      1
+    );
+
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPageCount;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      let leftItemCount =
+        currentPageNumber === 4 && lastPageIndex > 7
+          ? 4 + siblingCountNumber
+          : 3 + siblingCountNumber;
+
+      let leftRange = range(1, leftItemCount);
+
+      return [...leftRange, Dots, totalPageCount];
+    }
+
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      let rightItemCount =
+        currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7
+          ? (rightItemCount = 4 + siblingCountNumber)
+          : (rightItemCount = 3 + siblingCountNumber);
+
+      let rightRange = range(
+        totalPageCount - rightItemCount + 1,
+        totalPageCount
+      );
+      return [firstPageIndex, Dots, ...rightRange];
+    }
+
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      let middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
+    }
+  }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
+
+  return paginationRange;
+};