fui-material 0.2.60 → 0.2.61

package/src/material/FPagination/FPagination.tsx

@@ -1,90 +0,0 @@
-import React, {FC} from 'react';
-import {usePagination, DOTS} from './hooks/usePagination';
-import "./FPagination.css"
-
-export interface IFPagination {
-    currentPage: number,
-    totalCount: number,
-    pageSize: number,
-    onPageChange: (page: number | string | number) => void,
-    id?: string,
-    className?: string,
-    st?: React.CSSProperties | undefined
-    siblingCount: 0 | 1 | 2
-}
-
-const FPagination: FC<IFPagination> = ({
-                                           currentPage,
-                                           totalCount,
-                                           pageSize,
-                                           onPageChange,
-                                           id,
-                                           className,
-                                           st,
-                                           siblingCount
-                                       }) => {
-
-    const paginationRange = usePagination({
-        currentPage,
-        totalCount,
-        siblingCount,
-        pageSize
-    });
-
-    // @ts-ignore
-    if (currentPage === 0 || paginationRange.length < 2) {
-        return null;
-    }
-
-    const onNext = () => {
-        onPageChange(currentPage + 1);
-    };
-
-    const onPrevious = () => {
-        onPageChange(currentPage - 1);
-    };
-
-    // @ts-ignore
-    let lastPage = paginationRange[paginationRange.length - 1];
-
-    return (
-        <React.Fragment>
-            <ul
-                className={`pagination-container ${className !== undefined ? className : ''}`}
-                style={st}
-                id={`${id !== undefined ? id : ''}`}
-            >
-                <li
-                    className={`pagination-item ${currentPage === 1 ? 'disabled' : ''}`}
-                    onClick={onPrevious}
-                >
-                    <div className="arrow left"/>
-                </li>
-                {/*@ts-ignore*/}
-                {paginationRange.map(pageNumber => {
-                    if (pageNumber === DOTS) {
-                        return <li className="pagination-item dots">&#8230;</li>;
-                    }
-
-                    return (
-                        <li
-                            className={`pagination-item ${pageNumber === currentPage ? 'selected' : ''}`}
-                            id={'test-id'}
-                            onClick={() => onPageChange(pageNumber)}
-                        >
-                            {pageNumber}
-                        </li>
-                    );
-                })}
-                <li
-                    className={`pagination-item ${currentPage === lastPage ? 'disabled' : ''}`}
-                    onClick={onNext}
-                >
-                    <div className="arrow right"/>
-                </li>
-            </ul>
-        </React.Fragment>
-    );
-};
-
-export default FPagination;

package/src/material/FPagination/hooks/usePagination.tsx

@@ -1,69 +0,0 @@
-import React, {FC} from 'react';
-import {useMemo} from 'react';
-
-export const DOTS = '...';
-
-const range = (start: number, end: number) => {
-    let length = end - start + 1;
-    return Array.from({length}, (_, idx) => idx + start);
-};
-
-interface IProps {
-    currentPage: number,
-    totalCount: number,
-    pageSize: number,
-    siblingCount: number,
-}
-
-export const usePagination = ({
-                                  totalCount,
-                                  pageSize,
-                                  siblingCount = 1,
-                                  currentPage
-                              }: IProps) => {
-
-    const paginationRange = useMemo(() => {
-        const totalPageCount = Math.ceil(totalCount / pageSize);
-
-        const totalPageNumbers = siblingCount + 5;
-
-        if (totalPageNumbers >= totalPageCount) {
-            return range(1, totalPageCount);
-        }
-
-        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-        const rightSiblingIndex = Math.min(
-            currentPage + siblingCount,
-            totalPageCount
-        );
-
-        const shouldShowLeftDots = leftSiblingIndex > 2;
-        const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
-
-        const firstPageIndex = 1;
-        const lastPageIndex = totalPageCount;
-
-        if (!shouldShowLeftDots && shouldShowRightDots) {
-            let leftItemCount = 3 + 2 * siblingCount;
-            let leftRange = range(1, leftItemCount);
-
-            return [...leftRange, DOTS, totalPageCount];
-        }
-
-        if (shouldShowLeftDots && !shouldShowRightDots) {
-            let rightItemCount = 3 + 2 * siblingCount;
-            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];
-        }
-    }, [totalCount, pageSize, siblingCount, currentPage]);
-
-    return paginationRange;
-};

package/src/material/FPagination/index.ts

@@ -1 +0,0 @@
-export { default } from "./FPagination";

package/src/material/FPaper/FPaper.css

@@ -1,61 +0,0 @@
-.panel {
-    border: 0 none;
-}
-
-.panel-default {
-    box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
-    margin-bottom: 20px;
-    background-color: #fff;
-    border-radius: 8px;
-}
-
-.panel-default > .panel-heading {
-    color: #000;
-}
-
-.panel-default > .panel-heading {
-    background-color: #F8F8F8;
-}
-
-.panel-heading {
-    padding: 10px 40px;
-    border-bottom: 1px solid transparent;
-    border-top-right-radius: 7px;
-    border-top-left-radius: 7px;
-}
-
-.panel-body {
-    padding: 15px 40px;
-    width: auto;
-}
-
-.portlet-body .panel-title:last-child, .panel-group.panel-group-accordion .panel-title:last-child, .form-title:last-child {
-    margin-bottom: 0;
-}
-
-.panel-group.panel-group-accordion .panel-title, .portlet-body .panel-title {
-    font-size: 16px;
-}
-
-.portlet-body .panel-title, .panel-group.panel-group-accordion .panel-title, .form-title {
-    font-family: "SF UI Display", sans-serif;
-    line-height: 1.2;
-    color: inherit;
-    font-weight: bold;
-    margin: 0;
-    margin-bottom: 20px;
-}
-
-.panel-title {
-    font-size: 1em;
-    font-weight: 500;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-}
-
-.panel-title {
-    margin-top: 0;
-    margin-bottom: 0;
-    font-size: 16px;
-    color: inherit;
-}

package/src/material/FPaper/FPaper.tsx

@@ -1,62 +0,0 @@
-import React, {FC, useEffect} from "react";
-import "./FPaper.css"
-
-export interface IFPaper {
-    label?: string
-    children?: React.ReactChild | React.ReactNode
-    st?: React.CSSProperties
-    fontSizeLabel?: string
-    fontSizeBody?: string
-    id?: string
-    className?: string,
-    onAnimationEnd?: () => void,
-    animated?: {
-        name: string,
-        value: string
-    }
-}
-
-const FPaper: FC<IFPaper> = (
-    {
-        label,
-        children,
-        st,
-        fontSizeLabel,
-        id,
-        className,
-        fontSizeBody,
-        onAnimationEnd,
-        animated
-    }
-) => {
-
-    useEffect(() => {
-        if (animated !== undefined) {
-            const element = document.getElementsByClassName(`animated-${animated.name}`)[0];
-            element?.setAttribute(animated.name, animated.value);
-        }
-    }, [animated?.value])
-
-    return (
-        <React.Fragment>
-            <div
-                className={`panel panel-default ${className} ${animated !== undefined ? `animated-${animated.name}` : ''}`}
-                style={st}
-                id={id}
-                onAnimationEnd={onAnimationEnd}
-            >
-                {label &&
-                    <div className="panel-heading">
-                        <h3 style={{fontSize:fontSizeLabel}} className="panel-title">{label}</h3>
-                    </div>
-                }
-                <div
-                    className="panel-body" style={{fontSize:fontSizeBody}}>
-                    {children}
-                </div>
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FPaper;

package/src/material/FPaper/index.ts

@@ -1 +0,0 @@
-export { default } from "./FPaper";

package/src/material/FPreloader/FPreloader.css

@@ -1,21 +0,0 @@
-.f-preloader {
-    display: block;
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1001;
-}
-
-.f-preloader-row {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    width: 70px;
-    height: 70px;
-    margin-top: -35px;
-    margin-left: -35px;
-    text-align: center;
-    animation: preloader-rotate 2s infinite linear;
-}

package/src/material/FPreloader/FPreloader.tsx

@@ -1,49 +0,0 @@
-// *********************************************************************************************************************
-// Родительский компонет прелоадера
-// *********************************************************************************************************************
-
-import React, {FC} from "react";
-import "./FPreloader.css"
-
-export interface IFPreloader {
-    st?: React.CSSProperties,
-    backgroundColor?: string,
-    children?: React.ReactChild | React.ReactNode,
-    open: boolean
-}
-
-
-const FPreloader: FC<IFPreloader> = ({
-                                         st,
-                                         backgroundColor = '#e0e0e0',
-                                         children,
-                                         open
-                                     }) => {
-
-    if (open) {
-        document.body.style.overflow = 'hidden';
-    } else {
-        document.body.style.overflow = 'auto';
-    }
-
-    let style: React.CSSProperties = {
-        backgroundColor: backgroundColor,
-        display: open ? 'block' : 'none'
-    }
-
-    if (st !== undefined) {
-        style = Object.assign(style, st)
-    }
-
-    return (
-        <React.Fragment>
-            <div className="f-preloader" style={style}>
-                <div className="f-preloader-row">
-                    {children}
-                </div>
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FPreloader

package/src/material/FPreloader/index.ts

@@ -1 +0,0 @@
-export { default } from "./FPreloader";

package/src/material/FProgress/FProgress.css

@@ -1,9 +0,0 @@
-.f-progress {
-    width: 5rem;
-    height: 5rem;
-    margin: 2rem;
-    border-radius: 50%;
-    border: 0.7rem solid rgba(151, 159, 208, 0.3);
-    border-top-color: #2164BE;
-    animation: 1.2s spin infinite linear;
-}

package/src/material/FProgress/FProgress.tsx

@@ -1,41 +0,0 @@
-// *********************************************************************************************************************
-// Родительский компонет прогресс бара
-// *********************************************************************************************************************
-
-import React, {FC} from "react";
-import "./FProgress.css"
-
-export interface IFProgress {
-    st?: React.CSSProperties,
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-}
-
-
-const FProgress: FC<IFProgress> = ({
-                                       st,
-                                       color = 'primary'
-                                   }) => {
-
-    let style: React.CSSProperties = {
-        borderTopColor: color === 'primary' ? '#007bff' :
-            color === 'secondary' ? '#6c757d' :
-                color === 'success' ? '#28a745' :
-                    color === 'danger' ? '#dc3545' :
-                        color === 'warning' ? '#ffc107' :
-                            color === 'info' ? '#17a2b8' :
-                                color === 'light' ? '#f8f9fa' :
-                                    color === 'dark' ? '#343a40' : '#007bff'
-    }
-
-    if (st !== undefined) {
-        style = Object.assign(style, st)
-    }
-
-    return (
-        <React.Fragment>
-            <div style={style} className={'f-progress'}/>
-        </React.Fragment>
-    )
-}
-
-export default FProgress

package/src/material/FProgress/index.ts

@@ -1 +0,0 @@
-export { default } from "./FProgress";

package/src/material/FRadioButton/FRadioButton.tsx

@@ -1,43 +0,0 @@
-import React, {FC} from "react";
-import './RadioButton.css'
-
-export interface IFRadioButton {
-    label?: React.ReactChild | React.ReactNode,
-    onClick: React.MouseEventHandler<HTMLInputElement> | undefined
-    className?: string
-    id?: string
-    st?: React.CSSProperties | undefined,
-    checked?: boolean | undefined
-    disabled?: boolean
-}
-
-
-const FRadioButton: FC<IFRadioButton> = ({
-                                          label,
-                                          onClick,
-                                          className,
-                                          id,
-                                          st,
-                                          checked,
-                                          disabled
-                                      }) => {
-
-    return (
-        <React.Fragment>
-            <div className={`f-radio ${className !== undefined ? className : ''}`} id={id} style={st}>
-                <label>
-                    <input
-                        type="radio"
-                        onClick={onClick}
-                        checked={checked}
-                        disabled={disabled}
-                    />
-                    {label}
-                </label>
-            </div>
-
-        </React.Fragment>
-    )
-}
-
-export default FRadioButton;

package/src/material/FRadioButton/RadioButton.css

@@ -1,58 +0,0 @@
-.f-radio label {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    color: #656565;
-    font-family: "SF UI Display", sans-serif;
-    font-size: 14px;
-    font-weight: 500;
-    align-items: center;
-}
-
-/* Наружний круг */
-.f-radio label input[type=radio] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-color: white;
-    margin: 0;
-    font: inherit;
-    color: #C4C4C4;
-    width: 16px;
-    height: 16px;
-    border: 1px solid #C4C4C4;
-    border-radius: 50%;
-    transform: translateY(-0.075em);
-    display: grid;
-    place-content: center;
-}
-
-/* Наружний круг Когда активен */
-.f-radio label input[type=radio]:checked {
-    border: 1px solid #2F80ED;
-}
-
-.f-radio label input[type=radio]:focus {
-    outline: none !important;
-}
-
-/* Наружний круг Когда заблокирован */
-.f-radio label input[type=radio]:disabled {
-    cursor: not-allowed;
-}
-
-/* Внутренний круг */
-.f-radio label input[type=radio]::before {
-    content: "";
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    transform: scale(0);
-    transition: 120ms transform ease-in-out;
-    box-shadow: inset 1em 1em #2F80ED;
-}
-
-/* Внутренний круг Когда активен */
-.f-radio label input[type=radio]:checked::before {
-    transform: scale(1);
-}

package/src/material/FRadioButton/index.ts

@@ -1 +0,0 @@
-export { default } from "./FRadioButton";

package/src/material/FSearchBox/FSearchBox.css

@@ -1,11 +0,0 @@
-.f-search-box-box {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-}
-
-.f-search-box-inp {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: 0;
-}