fui-material 0.2.58 → 0.2.60

package/src/material/FButtonFile/FButtonFile.tsx

@@ -0,0 +1,157 @@
+import React, {useRef, useState} from "react";
+import './FButtonFile.css'
+import {FStack} from "../index";
+
+export interface IFButtonFile {
+    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
+    fullWidth?: boolean
+    id?: string,
+    onChange: (file: FileList | null) => void,
+    multiple?: boolean,
+    maxCount?: number,
+    accept?: string
+    spacing?: 0 | 0.5 | 1 | 2 | 3 | 4 | 8 | 12 | undefined,
+    direction?: "row" | "row-reverse" | "column" | "column-reverse" | undefined
+}
+
+const FButtonFile = (
+    {
+        children,
+        variant = 'contained',
+        color = 'primary',
+        size = 'btn-sm',
+        disabled,
+        st,
+        className,
+        fullWidth,
+        id,
+        onChange,
+        multiple = false,
+        maxCount,
+        accept,
+        spacing,
+        direction
+    }: IFButtonFile
+) => {
+
+    const fileRef = useRef();
+    const [files, setFiles] = useState<[]>([]);
+
+    if (fullWidth) {
+        if (st === undefined) {
+            st = {
+                width: '100%'
+            }
+        } else {
+            st.width = '100%'
+        }
+    }
+
+    return (
+        <React.Fragment>
+            <button
+                disabled={disabled}
+                className={`btn ${variant === 'contained' ? 'btn' : 'btn-default'}-${color} ${size} ${className !== undefined ? className : ''}`}
+                style={st}
+                id={id}
+                //@ts-ignore
+                onClick={() => fileRef.current.click()}
+            >
+                {children}
+            </button>
+            <input
+                style={{display: 'none'}}
+                //@ts-ignore
+                ref={fileRef}
+                onChange={(e) => {
+
+                    const newFiles = [...files]
+
+                    //@ts-ignore
+                    Object.values(e.target.files).map((opt) => {
+                        //@ts-ignore
+                        newFiles.push(opt)
+                    })
+
+                    // @ts-ignore
+                    setFiles(newFiles)
+                    // @ts-ignore
+                    onChange(newFiles)
+                }}
+                multiple={multiple}
+                type="file"
+                hidden
+                maxCount={maxCount}
+                accept={accept}
+            />
+            <div className="custom-files-preview" id="files" style={{marginTop: '16px'}}>
+                <FStack direction={direction} spacing={spacing}>
+                    {files !== undefined &&
+                        files.map((opt, index) => {
+                            return (
+                                <span
+                                    // @ts-ignore
+                                    key={`file-${opt.name}-${Math.round(+opt.size / 1024)}}`}
+                                    className="tag tag-default tag-file tag-block"
+                                    style={{
+                                        width: 'fit-content',
+                                        display: 'flex',
+                                        justifyContent: 'flex-end',
+                                    }}
+                                >
+                                    <span className="tag-file-name">
+                                        {/*@ts-ignore*/}
+                                        {opt.name}
+                                    </span>
+                                    <span className="tag-file-size">
+                                        {/*@ts-ignore*/}
+                                        ({Math.round(+opt.size / 1024)} КБ)
+                                    </span>
+                                        <div
+                                            className="cl-btn-3"
+                                            style={{
+                                                marginLeft: '16px',
+                                                marginTop: '2px',
+                                                width: '10px',
+                                                height: '10px',
+                                        }}
+                                             onClick={() => {
+                                                 let arFiles = [...files]
+
+                                                 arFiles.splice(index, 1)
+
+                                                 //@ts-ignore
+                                                 setFiles(arFiles)
+
+                                                 if (arFiles.length === 0) {
+                                                     // @ts-ignore
+                                                     fileRef.current.value = null;
+                                                     // @ts-ignore
+                                                     onChange(null)
+                                                 } else {
+                                                     // @ts-ignore
+                                                     onChange(arFiles)
+                                                 }
+
+                                             }}
+                                        >
+                                            <span className="top"></span>
+                                            <span className="bot"></span>
+                                        </div>
+                                </span>
+                            )
+                        })
+                    }
+                </FStack>
+            </div>
+        </React.Fragment>
+    )
+}
+
+export default FButtonFile

package/src/material/FButtonFile/index.ts

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

package/src/material/FCheckbox/Checkbox.css

@@ -0,0 +1,57 @@
+.f-checkbox 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-checkbox label input[type=checkbox] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    margin: 0;
+    font: inherit;
+    color: #fff;
+    width: 1.15em;
+    height: 1.15em;
+    border: 1px solid #C4C4C4;
+    border-radius: 0.15em;
+    display: grid;
+    place-content: center;
+}
+
+.f-checkbox label input[type=checkbox]::before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    transform: scale(0);
+    transform-origin: bottom left;
+    transition: 120ms transform ease-in-out;
+    background-color: #fff;
+}
+
+.f-checkbox label input[type=checkbox]:checked::before {
+    transform: scale(1);
+}
+
+.f-checkbox label input[type=checkbox]:checked {
+    transform: scale(1);
+    border: 1px solid #2F80ED;
+    background-color: #2F80ED;
+    color: #fff;
+}
+
+.f-checkbox label input[type=checkbox]:focus {
+    outline: none !important;
+}
+
+.f-checkbox label input[type=checkbox]:disabled {
+    cursor: not-allowed;
+}

package/src/material/FCheckbox/FCheckbox.tsx

@@ -0,0 +1,45 @@
+import React, {FC} from "react";
+import "./Checkbox.css"
+
+export interface IFCheckbox {
+    label?: React.ReactChild | React.ReactNode,
+    onChange: React.ChangeEventHandler<HTMLInputElement> | undefined
+    defaultChecked?: boolean | undefined
+    className?: string
+    id?: string
+    st?: React.CSSProperties | undefined,
+    checked?: boolean | undefined,
+    disabled?: boolean
+}
+
+
+const FCheckbox: FC<IFCheckbox> = ({
+                                       label,
+                                       onChange,
+                                       defaultChecked,
+                                       className,
+                                       id,
+                                       st,
+                                       checked,
+                                       disabled
+                                   }) => {
+
+    return (
+        <React.Fragment>
+            <div className={`f-checkbox ${className !== undefined ? className : ''}`} id={id} style={st}>
+                <label>
+                    <input
+                        defaultChecked={defaultChecked}
+                        type="checkbox"
+                        onChange={onChange}
+                        checked={checked}
+                        disabled={disabled}
+                    />
+                    {label}
+                </label>
+            </div>
+        </React.Fragment>
+    )
+}
+
+export default FCheckbox;

package/src/material/FCheckbox/index.ts

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

package/src/material/FContainer/FContainer.css

@@ -0,0 +1,165 @@
+.f-container {
+    width: 100%;
+    margin-left: auto;
+    box-sizing: border-box;
+    margin-right: auto;
+    display: block;
+    padding-left: 16px;
+    padding-right: 16px;
+}
+
+@media (min-width: 1400px) {
+    .container-xs {
+        max-width: 444px;
+    }
+
+    .container-sm {
+        max-width: 600px;
+    }
+
+    .container-md {
+        max-width: 900px;
+    }
+
+    .container-lg {
+        max-width: 1200px;
+    }
+
+    .container-xl {
+        max-width: 600px;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 1200px) and (max-width: 1399px) {
+    .container-xs {
+        max-width: 444px;
+    }
+
+    .container-sm {
+        max-width: 600px;
+    }
+
+    .container-md {
+        max-width: 900px;
+    }
+
+    .container-lg {
+        max-width: 1200px;
+    }
+
+    .container-xl {
+        max-width: 1140px;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+    .container-xs {
+        max-width: 444px;
+    }
+
+    .container-sm {
+        max-width: 600px;
+    }
+
+    .container-md {
+        max-width: 900px;
+    }
+
+    .container-lg {
+        max-width: 1200px;
+    }
+
+    .container-xl {
+        max-width: 100%;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+    .container-xs {
+        max-width: 444px;
+    }
+
+    .container-sm {
+        max-width: 600px;
+    }
+
+    .container-md {
+        max-width: 900px;
+    }
+
+    .container-lg {
+        max-width: 100%;
+    }
+
+    .container-xl {
+        max-width: 100%;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+    .container-xs {
+        max-width: 444px;
+    }
+
+    .container-sm {
+        max-width: 600px;
+    }
+
+    .container-md {
+        max-width: 100%;
+    }
+
+    .container-lg {
+        max-width: 100%;
+    }
+
+    .container-xl {
+        max-width: 100%;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 576px) {
+    .container-xs {
+        max-width: 100%;
+    }
+
+    .container-sm {
+        max-width: 100%;
+    }
+
+    .container-md {
+        max-width: 100%;
+    }
+
+    .container-lg {
+        max-width: 100%;
+    }
+
+    .container-xl {
+        max-width: 100%;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}

package/src/material/FContainer/FContainer.tsx

@@ -0,0 +1,33 @@
+import React, {FC} from "react";
+import "./FContainer.css"
+
+export interface IFContainer {
+    maxWidth?: 'container-xs' | 'container-sm' | 'container-md' | 'container-lg' | 'container-xl' | 'container-xxl' | 'container-fluid'
+    children?: React.ReactChild | React.ReactNode,
+    className?: string,
+    st?: React.CSSProperties,
+    id?: string
+}
+
+const FContainer: FC<IFContainer> = ({
+                                         children,
+                                         className,
+                                         st,
+                                         id,
+                                         maxWidth = 'container-xs'
+                                     }) => {
+
+    return (
+        <React.Fragment>
+            <div
+                className={`${className !== undefined ? className : ''} ${maxWidth} f-container`}
+                style={st}
+                id={id}
+            >
+                {children}
+            </div>
+        </React.Fragment>
+    )
+}
+
+export default FContainer

package/src/material/FContainer/index.ts

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

package/src/material/FFile/FFile.tsx

@@ -0,0 +1,46 @@
+import React, {FC} from 'react';
+import {FStack} from "../index";
+import {FCloseIcon} from "../../icons";
+
+export interface IFFile {
+    id?: string,
+    className?: string,
+    st?: React.CSSProperties,
+    handleDelete?: () => void,
+    name: string
+}
+
+const FFile: FC<IFFile> = ({
+                               id,
+                               className,
+                               st,
+                               handleDelete,
+                               name
+                           }) => {
+    return (
+        <React.Fragment>
+            <FStack direction={'row'} spacing={1} className={className} id={id} st={st}>
+                <svg className="svg-icon text-primary" focusable="false" role="img" viewBox="0 0 24 24">
+                    <path d="M15 16H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zm-6-2h3a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2z"/>
+                    <path
+                        d="M19.74 8.33l-5.44-6a1 1 0 0 0-.74-.33h-7A2.53 2.53 0 0 0 4 4.5v15A2.53 2.53 0 0 0 6.56 22h10.88A2.53 2.53 0 0 0 20 19.5V9a1 1 0 0 0-.26-.67zM14 5l2.74 3h-2a.79.79 0 0 1-.74-.85V5zm3.44 15H6.56a.532.532 0 0 1-.56-.5v-15a.53.53 0 0 1 .56-.5H12v3.15A2.79 2.79 0 0 0 14.71 10H18v9.5a.53.53 0 0 1-.56.5z"/>
+                </svg>
+                <FStack direction={'row'} justifyContent={'space-between'} st={{width: '100%'}}>
+                    <span>{name}</span>
+                    <FCloseIcon
+                        handleClose={handleDelete}
+                        st={{
+                            width: '10px',
+                            height: '10px',
+                            marginTop: '7px',
+                            marginRight: '15px',
+                            marginLeft: '8px'
+                        }}
+                    />
+                </FStack>
+            </FStack>
+        </React.Fragment>
+    );
+};
+
+export default FFile;

package/src/material/FFile/index.ts

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

package/src/material/FFullDateField/FFullDateField.tsx

@@ -0,0 +1,137 @@
+import React, {FC} from "react";
+import {FStack} from "../index";
+import '../statick/index.css'
+import FLoadIcon from "../../icons/FLoadIcon";
+
+export interface IFFullDateField {
+    label?: string
+    st?: React.CSSProperties,
+    value?: string | number | undefined | null
+    onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined
+    fullWidth?: boolean
+    defaultValue?: string | number | readonly string[] | undefined
+    disabled?: boolean
+    readOnly?: boolean,
+    id?: string,
+    className?: string
+    onkeydown?: React.KeyboardEventHandler<HTMLInputElement> | undefined,
+    min?: string | undefined,
+    max?: string | undefined,
+    load?: boolean,
+    errText?: string[],
+    helpText?: string,
+    onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined,
+    onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined
+}
+
+const FFullDateField: FC<IFFullDateField> = (
+    {
+        label,
+        st,
+        value,
+        onChange,
+        fullWidth,
+        defaultValue,
+        disabled,
+        readOnly,
+        onkeydown,
+        min,
+        max,
+        load = false,
+        errText,
+        helpText,
+        onBlur,
+        onFocus
+    }
+) => {
+
+    let style = {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        width: fullWidth ? '100%' : 'fit-content'
+    }
+
+    st = Object.assign({}, st, style);
+
+    if (typeof value === 'number') {
+        value = new Date(value).toISOString().split('T')[0]
+    } else if (value === undefined || value === null) {
+        value = ''
+    }
+
+    return (
+        <React.Fragment>
+            <div className={`form - group ${load ? 'ui left icon input loading' : ''}`} style={st}>
+                {label &&
+                    <label
+                        className="control-label"
+                        style={{
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis'
+                        }}
+                    >
+                        {label}
+                    </label>
+                }
+                <input
+                    min={min}
+                    max={max}
+                    onKeyDown={onkeydown}
+                    readOnly={readOnly}
+                    onBlur={onBlur}
+                    onFocus={onFocus}
+                    disabled={disabled || load}
+                    required
+                    style={{
+                        borderColor: errText !== undefined && errText.length > 0 ? 'red' : '#C4C4C4'
+                    }}
+                    defaultValue={defaultValue}
+                    value={load ? '' : value}
+                    //@ts-ignore
+                    onChange={onChange}
+                    type='date'
+                    className="form-control"
+                />
+                {helpText !== undefined &&
+                    <span
+                        style={{
+                            whiteSpace: 'initial',
+                            color: '#a6a3a3',
+                            fontSize: '12px'
+                        }}
+                    >
+                                    {helpText}
+                                </span>
+                }
+                {errText !== undefined && errText.length > 0 &&
+                    <FStack direction={'column'} st={{paddingLeft: '11px'}}>
+                        {
+                            errText?.map((opt, index) => {
+                                return (
+                                    <span
+                                        key={index}
+                                        style={{
+                                            whiteSpace: 'initial',
+                                            color: 'red'
+                                        }}
+                                    >
+                                            {opt}
+                                        </span>
+                                )
+                            })
+                        }
+                    </FStack>
+                }
+                {load &&
+                    <div className={'input-load'}>
+                        <FLoadIcon size={10}/>
+                    </div>
+                }
+            </div>
+        </React.Fragment>
+    )
+}
+
+export default FFullDateField;

package/src/material/FFullDateField/index.ts

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