fui-material 0.2.59 → 0.2.60

package/src/material/FPagination/FPagination.tsx

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,69 @@
+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

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

package/src/material/FPaper/FPaper.css

@@ -0,0 +1,61 @@
+.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

@@ -0,0 +1,62 @@
+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

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

package/src/material/FPreloader/FPreloader.css

@@ -0,0 +1,21 @@
+.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

@@ -0,0 +1,49 @@
+// *********************************************************************************************************************
+// Родительский компонет прелоадера
+// *********************************************************************************************************************
+
+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

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

package/src/material/FProgress/FProgress.css

@@ -0,0 +1,9 @@
+.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

@@ -0,0 +1,41 @@
+// *********************************************************************************************************************
+// Родительский компонет прогресс бара
+// *********************************************************************************************************************
+
+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

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

package/src/material/FRadioButton/FRadioButton.tsx

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,58 @@
+.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

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

package/src/material/FSearchBox/FSearchBox.css

@@ -0,0 +1,11 @@
+.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;
+}