fui-material 0.2.60 → 0.2.61

package/src/icons/FFilterIcon/FFilterIcon.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-export interface IFFilterIcon {
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-    size?: number
-    st?: React.CSSProperties,
-    id?: string,
-    className?: string,
-    handleClick?: () => void,
-}
-
-const FFilterIcon = ({color = 'dark', size = 30, st, id, className, handleClick}: IFFilterIcon) => {
-    return (
-        <svg
-            width={size}
-            viewBox="0 0 24 24"
-            className={`${color} ${className !== undefined ? className : ''}`}
-            id={id}
-            onClick={handleClick}
-            style={st}
-        >
-            <path fill="none" d="M0 0h24v24H0z"/>
-            <path fillRule="nonzero" d="M14 14v6l-4 2v-8L4 5V3h16v2l-6 9zM6.404 5L12 13.394 17.596 5H6.404z"/>
-        </svg>
-    );
-};
-
-export default FFilterIcon;

package/src/icons/FFilterIcon/index.ts

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

package/src/icons/FListIcon/FListIcon.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import "../../material/statick/Colors.css"
-
-export interface IFListIcon {
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-    size?: number
-    st?: React.CSSProperties,
-    id?: string,
-    className?: string,
-    handleClick?: () => void,
-}
-
-const FListIcon = ({
-                       color = 'dark',
-                       size = 32,
-                       st,
-                       id,
-                       className,
-                       handleClick
-                   }: IFListIcon) => {
-    return (
-        <svg
-            width={size}
-            style={st}
-            className={`bi bi-card-list ${color} ${className !== undefined ? className : ''}`}
-            viewBox="0 0 16 16"
-            id={id}
-            onClick={handleClick}
-        >
-            <path
-                d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
-            <path
-                d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
-        </svg>
-    );
-};
-
-export default FListIcon;

package/src/icons/FListIcon/index.ts

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

package/src/icons/FLoadIcon/FLoadIcon.tsx

@@ -1,61 +0,0 @@
-import React, {useRef} from 'react';
-import './FLoadIconCss.css'
-export interface IFLoadIcon {
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-    size?: number
-    st?: React.CSSProperties,
-    id?: string,
-    className?: string,
-    handleClick?: () => void,
-}
-
-const FLoadIcon = ({size = 35, st, id, className, color = 'primary'}: IFLoadIcon) => {
-
-    const randomId= useRef<string>((Math.random() + 1).toString(36).substring(2))
-
-    return (
-        <div style={{margin: 0, padding: 0}}>
-            <style>
-                {
-                    `
-                    .f-load-icon-${randomId.current} {
-                        width: ${size}px;
-                        height: ${size * 2.25}px;
-                        -webkit-animation: anim-f-load-icon-${randomId.current} 2s linear infinite alternate;
-                        animation: anim-f-load-icon-${randomId.current} 2s linear infinite alternate;
-                        transform: perspective(${size * 2.5}px) rotateX(-45deg);
-                        border-width: ${size/10}px !important;
-                    }
-                    `
-                }
-                {
-                    `@-webkit-keyframes anim-f-load-icon-${randomId.current} {
-                        0% {
-                            box-shadow: 0 0 inset;
-                        }
-                        100% {
-                            box-shadow: 0 calc((${size * 2.25}px - 2px) * -1) inset;
-                        }
-                    }`
-                }
-                {
-                    `@keyframes anim-f-load-icon-${randomId.current} {
-                        0% {
-                            box-shadow: 0 0 inset;
-                        }
-                        100% {
-                            box-shadow: 0 calc((${size * 2.25}px - 2px) * -1) inset;
-                        }
-                    }`
-                }
-            </style>
-            <span
-                className={`f-load-icon f-load-icon-${randomId.current} ${color} ${className !== undefined ? className : ''}`}
-                style={st}
-                id={id}
-            />
-        </div>
-    );
-};
-
-export default FLoadIcon;

package/src/icons/FLoadIcon/FLoadIconCss.css

@@ -1,48 +0,0 @@
-.f-load-icon {
-    display: block;
-}
-
-.f-load-icon.primary {
-    border: 2px solid #2F80ED;
-    color: rgba(47, 128, 237, 0.5);
-}
-
-.f-load-icon.secondary {
-    border: 2px solid #6c757d;
-    color: rgba(108, 117, 125, 0.5);
-}
-
-.f-load-icon.success {
-    border: 2px solid #198754;
-    color: rgba(25, 135, 84, 0.5);
-}
-
-.f-load-icon.danger {
-    border: 2px solid #dc3545;
-    color: rgba(220, 53, 69, 0.5);
-}
-
-.f-load-icon.warning {
-    border: 2px solid #ffc107;
-    color: rgba(255, 193, 7, 0.5);
-}
-
-.f-load-icon.info {
-    border: 2px solid #0dcaf0;
-    color: rgba(13, 202, 240, 0.5);
-}
-
-.f-load-icon.light {
-    border: 2px solid #f8f9fa;
-    color: rgba(248, 249, 250, 0.5);
-}
-
-.f-load-icon.dark {
-    border: 2px solid #212529;
-    color: rgba(33, 37, 41, 0.5);
-}
-
-.f-load-icon.link {
-    border: 2px solid #0a58ca;
-    color: rgba(10, 88, 202, 0.5);
-}

package/src/icons/FLoadIcon/index.ts

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

package/src/icons/FPenIcon/FPenIcon.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import "../../material/statick/Colors.css"
-
-export interface IFPenIcon {
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-    size?: number
-    st?: React.CSSProperties,
-    id?: string,
-    className?: string,
-    handleClick?: () => void,
-}
-
-const FPenIcon = ({color = 'dark', size = 30, st, id, className, handleClick}: IFPenIcon) => {
-    return (
-        <svg
-            width={size}
-            style={st}
-            className={`bi bi-pencil ${color} ${className !== undefined ? className : ''}`}
-            viewBox="0 0 16 16"
-            onClick={handleClick}
-            id={id}
-        >
-            <path
-                d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
-        </svg>
-    );
-};
-
-export default FPenIcon;

package/src/icons/FPenIcon/index.ts

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

package/src/icons/FPlusIcon/FPlusIcon.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import "../../material/statick/Colors.css"
-
-export interface IFPlusIcon {
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-    size?: number
-    st?: React.CSSProperties,
-    id?: string,
-    className?: string,
-    handleClick?: () => void,
-}
-
-const FPlusIcon = ({
-                       color = 'primary',
-                       size = 32,
-                       st,
-                       className,
-                       id,
-                       handleClick
-                   }: IFPlusIcon) => {
-    return (
-        <svg
-            onClick={handleClick}
-            className={`MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ${color} ${className !== undefined ? className : ''}`}
-            id={id}
-            width={size}
-            style={st}
-            focusable="false"
-            aria-hidden="true"
-            viewBox="0 0 24 24"
-            data-testid="AddCircleOutlineOutlinedIcon"
-        >
-            <path
-                d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
-        </svg>
-    );
-};
-
-export default FPlusIcon;

package/src/icons/FPlusIcon/index.ts

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

package/src/icons/FTrashIcon/FTrashIcon.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import "../../material/statick/Colors.css"
-export interface IFTrashIcon {
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-    size?: number
-    st?: React.CSSProperties,
-    id?: string,
-    className?: string,
-    handleClick?: () => void,
-}
-
-
-const FTrashIcon = ({
-                        color = "primary",
-                        size = 32,
-                        st,
-                        id,
-                        className,
-                        handleClick,
-                    }: IFTrashIcon
-) => {
-    return (
-        <svg
-            onClick={handleClick}
-            xmlns="http://www.w3.org/2000/svg"
-            width={size}
-            style={st}
-            className={`bi bi-trash ${color} ${className !== undefined ? className : ''}`}
-            viewBox="0 0 16 16"
-            id={id}
-        >
-            <path
-                d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
-            <path fillRule="evenodd"
-                  d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
-        </svg>
-    );
-};
-
-export default FTrashIcon;

package/src/icons/FTrashIcon/index.ts

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

package/src/icons/FUnlinkIcon/FUnlinkIcon.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import "../../material/statick/Colors.css"
-
-export interface IFUnlinkIcon {
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-    size?: number
-    st?: React.CSSProperties,
-    id?: string,
-    className?: string,
-    handleClick?: () => void,
-}
-
-const FUnlinkIcon = ({color = 'dark', size = 30, st, id, className, handleClick}: IFUnlinkIcon) => {
-    return (
-        <svg
-            width={size}
-            style={st}
-            className={`bi bi-pencil ${color} ${className !== undefined ? className : ''}`}
-            viewBox="-0.5 0 25 25"
-            onClick={handleClick}
-            id={id}
-            fill={'none'}
-        >
-            <path d="M9.23993 17.55L7.95993 18.84C7.33993 19.47 6.51992 19.79 5.69992 19.79C4.87992 19.79 4.05994 19.47 3.43994 18.84C2.18994 17.58 2.18994 15.54 3.43994 14.29L4.70993 13.02L6.11993 11.6L8.82993 8.86" stroke="#0F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M8.82996 3.86V6.86" stroke="#0F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M5.32996 5.22L6.82996 7.81" stroke="#0F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M9.23993 17.55L7.95993 18.84C7.33993 19.47 6.51992 19.79 5.69992 19.79C4.87992 19.79 4.05994 19.47 3.43994 18.84C2.18994 17.58 2.18994 15.54 3.43994 14.29L4.70993 13.02L6.11993 11.6L8.82993 8.86" stroke="#0F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M14.7599 7.45L16.0399 6.16C16.6599 5.53 17.4799 5.21 18.2999 5.21C19.1199 5.21 19.9399 5.53 20.5599 6.16C21.8099 7.42 21.8099 9.46 20.5599 10.71L19.2899 11.98L17.8799 13.4L15.1699 16.14" stroke="#0F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M12.33 5.22L10.83 7.81" stroke="#0F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M15.1699 21.14V18.14" stroke="#0F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M18.6699 19.79L17.1699 17.19" stroke="#0F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M11.6699 19.79L13.1699 17.19" stroke="#0F0F0F" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-
-        </svg>
-    );
-};
-
-export default FUnlinkIcon;

package/src/icons/index.ts

@@ -1,12 +0,0 @@
-export {default as FCloseIcon} from "./FCloseIcon"
-export {default as FArrowIcon} from "./FArrowIcon"
-export {default as FPlusIcon} from "./FPlusIcon"
-export {default as FTrashIcon} from "./FTrashIcon"
-export {default as FCheckIcon} from "./FCheckIcon"
-export {default as FListIcon} from "./FListIcon"
-export {default as FPenIcon} from "./FPenIcon"
-export {default as FDownloadIcon} from "./FDownloadIcon"
-export {default as FCopyAddIcon} from "./FCopyAddIcon"
-export {default as FUnlinkIcon} from "./FUnlinkIcon"
-export {default as FFilterIcon} from "./FFilterIcon"
-export {default as FLoadIcon} from "./FLoadIcon"

package/src/material/Dialog/FDialog/FDialog.tsx

@@ -1,61 +0,0 @@
-// *********************************************************************************************************************
-// Родительский компонет диалогового окна
-// *********************************************************************************************************************
-
-import React, {FC, useEffect} from "react";
-import "../style/style.css"
-
-export interface IFDialog {
-    openAndClose: boolean
-    id?: string,
-    className?: string
-    st?: React.CSSProperties,
-    children?: React.ReactChild | React.ReactNode,
-    hide?: boolean
-    closeButtonBackPage?: React.Dispatch<React.SetStateAction<boolean>>,
-    width?: 'xs' | 'md' | 'lg' | 'xxl' | 'adaptive'
-}
-
-
-const FDialog: FC<IFDialog> = ({
-                                   openAndClose,
-                                   closeButtonBackPage,
-                                   hide,
-                                   children,
-                                   id,
-                                   className,
-                                   st,
-                                   width = 'lg'
-                               }) => {
-
-    useEffect(() => {
-        if (document.getElementsByClassName("active-dialog").length > 0) {
-            document.body.classList.add('open-dialog')
-        } else {
-            document.body.classList.remove('open-dialog')
-        }
-    }, [openAndClose])
-
-    return (
-        <React.Fragment>
-            <div
-                className={`${openAndClose ? 'f-dialog active-dialog' : 'f-dialog'} ${className !== undefined ? className : ''}`}
-                onClick={() => closeButtonBackPage && closeButtonBackPage(false)}
-                id={id}
-                style={st}
-            >
-                <div
-                    className={`${openAndClose ? 'f-dialog-content active' : 'f-dialog-content'} ${hide ? 'hide' : ''}`}
-                    style={{
-                        width: width === 'xxl' ? '95vw' : width === 'lg' ? '80vw' : width === 'md' ? '65vw' : width === 'xs' ? '50vw' : 'fit-content'
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                >
-                    {children}
-                </div>
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FDialog

package/src/material/Dialog/FDialog/index.ts

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

package/src/material/Dialog/FDialogBody/FDialogBody.tsx

@@ -1,43 +0,0 @@
-// *********************************************************************************************************************
-// Основная часть компонента диалогового окна
-// *********************************************************************************************************************
-
-
-import React, {FC} from "react";
-
-
-export interface IFDialogBody {
-    st?: React.CSSProperties
-    children?: React.ReactChild | React.ReactNode
-    scroll?: boolean
-}
-
-
-const FDialogBody: FC<IFDialogBody> = ({
-                                           st,
-                                           children,
-                                           scroll
-                                       }) => {
-
-    let style: React.CSSProperties = {
-
-    }
-
-    if (scroll) {
-        style['overflowY'] = 'auto'
-    }
-
-    if (st !== undefined) {
-        style = Object.assign(style, st)
-    }
-
-    return (
-        <React.Fragment>
-            <div className="dialog-body" style={style}>
-                {children}
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FDialogBody

package/src/material/Dialog/FDialogBody/index.ts

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

package/src/material/Dialog/FDialogFooter/FDialogFooter.tsx

@@ -1,26 +0,0 @@
-// *********************************************************************************************************************
-// Нижняя часть компонента диалогового окна
-// *********************************************************************************************************************
-
-
-import React, {FC} from "react";
-
-export interface IFDialogFooter {
-    children?: React.ReactChild | React.ReactNode
-}
-
-
-const FDialogFooter: FC<IFDialogFooter> = ({
-                                       children
-                                   }) => {
-
-    return (
-        <React.Fragment>
-            <div className={'dialog-footer'}>
-                {children}
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FDialogFooter

package/src/material/Dialog/FDialogFooter/index.ts

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

package/src/material/Dialog/FDialogHeader/FDialogHeader.tsx

@@ -1,40 +0,0 @@
-// *********************************************************************************************************************
-// Головная часть компонента диалогового окна
-// *********************************************************************************************************************
-
-import React, {FC} from "react";
-
-
-export interface IFDialogHeader {
-    title?: string
-    handleClose?: () => void
-}
-
-
-const FDialogHeader: FC<IFDialogHeader> = ({
-                                               title,
-                                               handleClose,
-                                           }) => {
-
-    return (
-        <React.Fragment>
-            <div className="dialog-header">
-                <div>
-                    <h3 className="dialog-title" style={{margin: 0}}>
-                        {title === undefined ? '' : title}
-                    </h3>
-                </div>
-                {handleClose !== undefined &&
-                    <div>
-                        <div className="cl-btn-3" onClick={handleClose}>
-                            <span className="top"></span>
-                            <span className="bot"></span>
-                        </div>
-                    </div>
-                }
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FDialogHeader

package/src/material/Dialog/FDialogHeader/index.ts

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

package/src/material/Dialog/style/style.css

@@ -1,73 +0,0 @@
-.f-dialog {
-    z-index: 999999;
-    height: 100vh;
-    width: 100vw;
-    background-color: rgba(0,0,0,0.4);
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    pointer-events: none;
-    transition: 1s;
-}
-
-.f-dialog.active-dialog {
-    opacity: 1;
-    pointer-events: all;
-}
-
-.f-dialog-content {
-    padding: 20px;
-    border-radius: 12px;
-    background-color: white;
-    transform: scale(0.5);
-    transition: 1s;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    /* максимально возможная ширина */
-    max-width: 80vw;
-    max-height: 95vh;
-}
-
-.dialog-body {
-    width: 100%;
-}
-
-.f-dialog-content.active {
-    transform: scale(1);
-}
-
-.f-dialog-content.hide {
-    opacity: 0;
-    pointer-events: none;
-}
-
-.f-dialog-content.hide {
-    opacity: 0;
-    pointer-events: none;
-}
-
-/* Заголовок с кнопкой закрытия */
-.dialog-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    padding: 8px 16px 8px 16px;
-    gap: 24px;
-}
-
-/* Заголовок с кнопкой закрытия */
-.dialog-footer {
-    padding: 16px 8px 8px 8px;
-}
-
-body.open-dialog {
-    overflow: hidden;
-}