fui-material 0.2.59 → 0.2.60

package/src/icons/FUnlinkIcon/FUnlinkIcon.tsx

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

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

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

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

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

@@ -0,0 +1,43 @@
+// *********************************************************************************************************************
+// Основная часть компонента диалогового окна
+// *********************************************************************************************************************
+
+
+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

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

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

@@ -0,0 +1,26 @@
+// *********************************************************************************************************************
+// Нижняя часть компонента диалогового окна
+// *********************************************************************************************************************
+
+
+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

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

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

@@ -0,0 +1,40 @@
+// *********************************************************************************************************************
+// Головная часть компонента диалогового окна
+// *********************************************************************************************************************
+
+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

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

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

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

package/src/material/Dropdown/FDropdown/FDropdown.tsx

@@ -0,0 +1,60 @@
+import React, {FC} from "react";
+import '../statick/FDropdown.css'
+import {FButton, FStack} from "../../index";
+
+// @ts-ignore
+import downArrow from '../statick/down-arrow.png'
+
+export interface IFDropdown {
+    label?: React.ReactChild | React.ReactNode,
+    children?: React.ReactChild | React.ReactNode,
+    variant?: 'contained' | 'default'
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: 'btn-lg' | 'btn-sm' | 'btn-xs'
+    disabled?: boolean
+    st?: React.CSSProperties,
+    className?: string
+    id?: string,
+}
+
+const FDropdown: FC<IFDropdown> = ({
+                                       label,
+                                       variant = 'contained',
+                                       color = 'primary',
+                                       size = 'btn-sm',
+                                       disabled,
+                                       st,
+                                       className,
+                                       id,
+                                       children
+                                   }) => {
+
+    return (
+        <React.Fragment>
+            <div className={'f-dropdown'}>
+                <FButton
+                    variant={variant}
+                    color={color}
+                    size={size}
+                    disabled={disabled}
+                    st={st}
+                    className={`f-dropdown-bottom ${className !== undefined ? className : ''}`}
+                    id={id}
+                    onClick={() => {
+                        document.getElementsByClassName('#heading');
+                    }}
+                >
+                    <FStack direction={'row'} spacing={1} justifyContent={"center"} alignItems={'center'}>
+                        {label}
+                        <img className={'f-dropdown-down-arrow'} src={downArrow}/>
+                    </FStack>
+                </FButton>
+                <div className="f-dropdown-content">
+                    {children}
+                </div>
+            </div>
+        </React.Fragment>
+    )
+}
+
+export default FDropdown

package/src/material/Dropdown/FDropdownItem/FDropdownItem.tsx

@@ -0,0 +1,35 @@
+import React, {FC} from "react";
+
+export interface IFDropdownItem {
+    disabled?: boolean
+    st?: React.CSSProperties,
+    className?: string
+    id?: string,
+    children?: React.ReactChild | React.ReactNode,
+    onClick?: React.MouseEventHandler<HTMLLIElement> | undefined
+}
+
+const FDropdownItem: FC<IFDropdownItem> = ({
+                                               disabled,
+                                               st,
+                                               className,
+                                               id,
+                                               children,
+                                               onClick
+                                           }) => {
+
+    return (
+        <React.Fragment>
+            <li
+                className={`f-dropdown-link ${className !== undefined ? className : ''} ${disabled ? 'disabled' : ''}`}
+                id={id}
+                style={st}
+                onClick={onClick}
+            >
+                {children}
+            </li>
+        </React.Fragment>
+    )
+}
+
+export default FDropdownItem

package/src/material/Dropdown/statick/FDropdown.css

@@ -0,0 +1,68 @@
+.f-dropdown {
+    position: relative;
+    display: inline-block;
+    padding: 16px;
+}
+
+.f-dropdown-content {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    padding: 10px;
+    box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
+    border-radius: 10px;
+    min-width: 200px;
+    max-width: 400px;
+    z-index: 6;
+    margin-top: 10px;
+    opacity: 0;
+    background-color: white;
+}
+
+.f-dropdown-link {
+    padding: 8px;
+    color: #656565;
+    font-size: 14px;
+    border-bottom: 1px solid #C4C4C4;
+    cursor: pointer;
+    list-style-type: none;
+}
+
+.f-dropdown:hover .f-dropdown-content {
+    display: flex;
+    opacity: 1;
+    animation: fadeInFromNone 0.3s ease;
+}
+
+.f-dropdown-link:last-child {
+    border-bottom: 0;
+}
+
+.f-dropdown-link:hover {
+    color: #2F80ED;
+}
+
+.f-dropdown-down-arrow {
+    width: 2rem;
+    height: 2rem;
+}
+
+
+@keyframes fadeInFromNone {
+    0% {
+        display: none;
+        opacity: 0;
+    }
+
+    1% {
+        display: flex;
+        opacity: 0;
+        transform: translateY(-10%);
+    }
+
+    100% {
+        display: flex;
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/src/material/FAccordion/FAccordion.css

@@ -0,0 +1,80 @@
+:root {
+    --color-bg: #eeedeb;
+    --color-title: #0e1c4e;
+    --color-summary-1: #fff6ee;
+    --color-summary-1-highlight: #FBE62B;
+    --color-summary-2: #fafaff;
+    --color-summary-2-highlight: #2F80ED;
+    --color-summary-3: #fff0f3;
+    --color-summary-3-highlight: #D10000;
+}
+
+.card h1 {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 1.2;
+    color: var(--color-title);
+}
+
+.fv-accord-title {
+    cursor: pointer;
+}
+
+.card details {
+    display: flex;
+    border-radius: 5px;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.05);
+    border-left: 15px solid gray;
+    padding: 15px;
+    margin: 0;
+}
+
+.card details.warning {
+    --highlight: var(--color-summary-1-highlight);
+    background: var(--color-summary-1);
+    border-left-color: var(--color-summary-1-highlight);
+}
+
+.card details.warning p {
+    list-style-type: corona-warning;
+}
+
+.card details.info {
+    --highlight: var(--color-summary-2-highlight);
+    background: var(--color-summary-2);
+    border-left-color: var(--color-summary-2-highlight);
+}
+
+.card details.info p {
+    list-style-type: corona-info;
+}
+
+.card details.alert {
+    --highlight: var(--color-summary-3-highlight);
+    background: var(--color-summary-3);
+    border-left-color: var(--highlight);
+}
+
+.card details.alert p {
+    list-style-type: corona-alert;
+}
+
+.card details summary,
+.card details p {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: flex-start;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 18px;
+    color: var(--color-title);
+    padding: 20px;
+}
+
+.card details[open] summary {
+    font-weight: 700;
+}

package/src/material/FAccordion/FAccordion.tsx

@@ -0,0 +1,37 @@
+import React, {FC} from 'react';
+import './FAccordion.css'
+
+export interface IFAccordion {
+    children?: React.ReactChild | React.ReactNode,
+    variant?: 'info' | 'alert' | 'warning'
+    title?: string,
+    id?: string,
+    className?: string,
+    st?: React.CSSProperties,
+    defaultOpen?: boolean
+}
+
+const FAccordion: FC<IFAccordion> = ({
+                                         variant = 'info',
+                                         title,
+                                         children,
+                                         id,
+                                         className,
+                                         st,
+                                         defaultOpen
+                                     }) => {
+    return (
+        <React.Fragment>
+            <div className={`card ${className !== undefined ? className : ''}`} id={id}>
+
+                <details className={`${variant}`} open={defaultOpen} style={st}>
+                    <summary className={'fv-accord-title'}>{title}</summary>
+                    {children}
+                </details>
+
+            </div>
+        </React.Fragment>
+    );
+};
+
+export default FAccordion;

package/src/material/FAccordion/index.ts

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