@xaypay/tui 0.0.119 → 0.0.120

package/src/components/newFile/newFile.stories.js

@@ -1,93 +0,0 @@
-import React, { useState } from 'react'
-import { NewFile } from './index'
-
-export default {
-    component: NewFile,
-    title: 'Components/NewFile',
-    argTypes: {
-        change: {
-            control: 'function',
-        },
-    },
-}
-
-const Template = (args) => {
-    const [files, setFiles] = useState([])
-    const [secondFiles, setSecondFiles] = useState([])
-
-    const handleChange = (file) => {
-        setFiles((prev) => {
-            return [...prev, file]
-        })
-    }
-
-    const handleRemove = (id) => {
-        setFiles((prevItems) => prevItems.filter((item) => item.uuid !== id))
-    }
-
-    const handleRemoveComponent = (componentId) => {
-        alert(`You want to remove component with id, ${componentId}`)
-    }
-
-    const secondHandleChange = (file) => {
-        setSecondFiles((prev) => {
-            return [...prev, file]
-        })
-    }
-
-    const secondHandleRemove = (id) => {
-        setSecondFiles((prevItems) => prevItems.filter((item) => item.uuid !== id))
-    }
-
-    const secondHandleRemoveComponent = (componentId) => {
-        alert(`You want to remove component with id, ${componentId}`)
-    }
-
-    return (
-        <div
-            style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-            }}
-        >
-            <NewFile
-                {...args}
-                removeFromDOM
-                componentId={2}
-                filesArray={files}
-                change={handleChange}
-                removeFile={handleRemove}
-                removeComponent={handleRemoveComponent}
-                formatError="Փաստաթղթի ֆորմատը չի համապատասխանում"
-                maxSizeError="Փաստաթուղթը գերազանցում է առավելագույն չափը"
-            />
-
-            <NewFile
-                {...args}
-                removeFromDOM
-                height="50px"
-                preview={false}
-                componentId={2}
-                filesArray={secondFiles}
-                change={secondHandleChange}
-                removeFile={secondHandleRemove}
-                removeComponent={secondHandleRemoveComponent}
-                formatError="Փաստաթղթի ֆորմատը չի համապատասխանում"
-                maxSizeError="Փաստաթուղթը գերազանցում է առավելագույն չափը"
-            />
-        </div>
-    )
-}
-
-export const Default = Template.bind({})
-Default.args = {
-    label: 'File component',
-    deleteComponent: false,
-    disabled: false,
-    defaultData: {
-        url: 'https://images.pexels.com/photos/753626/pexels-photo-753626.jpeg?auto=compress&cs=tinysrgb&w=1600',
-        type: 'image/png',
-    },
-    multiple: true,
-    name: 'sss',
-}

package/src/components/pagination/index.js

@@ -1,234 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { compereConfigs } from './../../utils'
-import styles from './pagination.module.css'
-import { PaginationRange, Dots } from './paginationRange'
-
-import DotsIcon from './../../components/icon/Dots'
-import SvgNextarrow from './../../components/icon/Nextarrow'
-
-export const Pagination = ({ goTo, offset, onChange, className, totalCount, currentPage }) => {
-    const configStyles = compereConfigs()
-    const [inpVal, setInpVal] = useState('')
-    const [error, setError] = useState(false)
-    const [currentPageNumber, setCurrentPage] = useState(currentPage)
-    const [currentTotalCount, setcurrentTotalCount] = useState(totalCount)
-    useEffect(() => {
-        setcurrentTotalCount(totalCount)
-    }, [totalCount])
-    useEffect(() => {
-        setCurrentPage(currentPage)
-    }, [currentPage])
-    const onPageChange = (page) => {
-        if (page > 0) {
-            setCurrentPage(page)
-        }
-    }
-    useEffect(() => {
-        onChange(currentPageNumber)
-    }, [currentPageNumber])
-    const paginationRange = PaginationRange({
-        currentPageNumber,
-        currentTotalCount,
-        offset,
-    })
-
-    if (currentPageNumber === 0 || paginationRange?.length < 2) {
-        return null
-    }
-    const classProps = classnames(
-        styles.list,
-        className ? className : configStyles.PAGINATION.className,
-        `${styles['pagination-bar']} pagination-bar-rem`
-    )
-
-    const onNext = () => {
-        onPageChange(currentPageNumber + 1)
-    }
-
-    const onPrevious = () => {
-        onPageChange(currentPageNumber - 1)
-    }
-
-    const onNextFive = () => {
-        currentPageNumber !== lastPage - 4 ? onPageChange(currentPageNumber + 5) : onPageChange(currentPageNumber + 4)
-    }
-
-    const onPreviousFive = () => {
-        currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : 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 (
-        <div
-            style={{
-                display: 'flex',
-                margin: '0 auto',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}
-            className={classProps}
-        >
-            <ul>
-                <button
-                    style={{
-                        transform: 'rotate(180deg)',
-                    }}
-                    onClick={onPrevious}
-                    disabled={currentPageNumber === 1 ? true : false}
-                    className={`${styles['pagination-btn']} pagination-btn-rem`}
-                >
-                    <SvgNextarrow />
-                </button>
-
-                {paginationRange.map((pageNumber, id) => {
-                    if (pageNumber === Dots) {
-                        let currentPageIndex = paginationRange.indexOf(currentPageNumber)
-                        return (
-                            <li
-                                key={id}
-                                className={classnames(
-                                    `${styles['pagination-jump-next']} pagination-jump-next-rem`,
-                                    styles.listItem
-                                )}
-                                onClick={id < currentPageIndex ? onPreviousFive : onNextFive}
-                                disabled={currentPageIndex === 0 ? true : false}
-                            >
-                                {id < currentPageIndex ? (
-                                    <>
-                                        <span
-                                            className={`${styles['pagination-jump-next-txt']} pagination-jump-next-txt-rem`}
-                                        >
-                                            <DotsIcon />
-                                        </span>
-                                        <span
-                                            className={`${styles['pagination-jump-next-arrow']} pagination-jump-next-arrow-rem`}
-                                            style={{
-                                                transform: 'rotate(180deg)',
-                                            }}
-                                        >
-                                            <SvgNextarrow />
-                                        </span>
-                                    </>
-                                ) : (
-                                    <>
-                                        <span
-                                            className={`${styles['pagination-jump-next-txt']} pagination-jump-next-txt-rem`}
-                                        >
-                                            <DotsIcon />
-                                        </span>
-                                        <span
-                                            className={`${styles['pagination-jump-next-arrow']} pagination-jump-next-arrow-rem`}
-                                        >
-                                            <SvgNextarrow />
-                                        </span>
-                                    </>
-                                )}
-                            </li>
-                        )
-                    }
-
-                    return (
-                        <li
-                            onClick={() => onPageChange(pageNumber)}
-                            key={id}
-                            className={classnames(
-                                `${pageNumber === currentPageNumber ? styles.selected : styles.listItem}`,
-                                `${styles['pagination-item']} pagination-item-rem`
-                            )}
-                        >
-                            {pageNumber}
-                        </li>
-                    )
-                })}
-
-                <button
-                    onClick={onNext}
-                    disabled={currentPageNumber === lastPage ? true : false}
-                    className={`${styles['pagination-btn']} pagination-btn-rem`}
-                >
-                    <SvgNextarrow />
-                </button>
-            </ul>
-            {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>
-            )}
-        </div>
-    )
-}
-
-Pagination.propTypes = {
-    goTo: PropTypes.bool,
-    offset: PropTypes.number,
-    totalCount: PropTypes.number,
-    className: PropTypes.string,
-    currentPage: PropTypes.number,
-}
-
-Pagination.defaultProps = { offset: 2 }

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

@@ -1,93 +0,0 @@
-
-.listItem:focus {
-    background-color: #4CAF50;
-    color: white;
-  }
-
-.listItem:hover:not(.active) {
-    background-color: #ddd;
-}
-
-.pagination-bar {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    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: 13px;
-    line-height: 16px;
-    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;
-}
-
-/* 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;
-}