fui-material 0.2.60 → 0.2.62

package/src/material/FSearchBox/FSearchBox.tsx

@@ -1,184 +0,0 @@
-import React, {FC} from "react";
-import {FButton, FStack} from "../index";
-import './FSearchBox.css'
-import '../FTextField/FTextField.css'
-import FLoadIcon from "../../icons/FLoadIcon";
-import '../statick/index.css'
-
-export interface IFSearchBox {
-    label?: string,
-    st?: React.CSSProperties,
-    value?: string | number | readonly string[] | undefined,
-    onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined,
-    type?: 'text' | 'number' | 'email' | 'tel' | 'password',
-    onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined,
-    onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined,
-    fullWidth?: boolean,
-    disabled?: boolean,
-    readOnly?: boolean | undefined,
-    defaultValue?: string | number | readonly string[] | undefined,
-    errText?: string[],
-    helpText?: string,
-    onInput?: React.FormEventHandler<HTMLInputElement> | undefined,
-    id?: string,
-    className?: string,
-    load?: boolean,
-    min?: number,
-    max?: number,
-    placeholder?: string | undefined,
-
-
-    children?: React.ReactChild | React.ReactNode,
-    variant?: 'contained' | 'default'
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
-}
-
-const FSearchBox: FC<IFSearchBox> = ({
-                                         label,
-                                         value,
-                                         onChange,
-                                         type,
-                                         onBlur,
-                                         onFocus,
-                                         fullWidth,
-                                         disabled,
-                                         readOnly,
-                                         defaultValue,
-                                         errText,
-                                         helpText,
-                                         onInput,
-                                         st,
-                                         id,
-                                         className,
-                                         load = false,
-                                         min,
-                                         max,
-                                         placeholder,
-
-                                         children,
-                                         onClick,
-                                         color,
-                                         variant
-                                     }) => {
-
-    let style = {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    }
-    st = Object.assign({}, st, style);
-
-    if (fullWidth) {
-        if (st === undefined) {
-            st = {
-                width: '100%'
-            }
-        } else {
-            st.width = '100%'
-        }
-    } else {
-        if (st === undefined) {
-            st = {
-                width: 'fit-content'
-            }
-        } else {
-            st.width = 'fit-content'
-        }
-    }
-
-    return (
-        <React.Fragment>
-            <div
-                className={`f-search-box
-                form-group`} style={st}>
-                {label &&
-                    <label className="control-label with-offset" style={{
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
-                    }}>
-                        {label}
-                    </label>
-                }
-                <div className={'f-search-box-box'}>
-                    <div className={`${load ? 'ui left icon input loading' : ''}`} style={{width: '100%'}}>
-                        <input
-                            id={id}
-                            placeholder={placeholder}
-                            style={{
-                                borderColor: errText !== undefined && errText.length > 0 ? 'red' : '#C4C4C4'
-                            }}
-                            min={min}
-                            max={max}
-                            disabled={disabled}
-                            defaultValue={defaultValue}
-                            required
-                            onInput={onInput}
-                            readOnly={readOnly || load}
-                            value={value}
-                            //@ts-ignore
-                            onChange={onChange}
-                            type={type === undefined ? 'text' : type}
-                            className={`form-control f-search-box-inp ${className !== undefined ? className : ''}`}
-                            onBlur={onBlur}
-                            onFocus={onFocus}
-                        />
-                        {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>
-                    <FButton
-                        st={{
-                            borderTopLeftRadius: '0',
-                            borderBottomLeftRadius: '0',
-                            height: '34px',
-                            whiteSpace: 'nowrap',
-                            textAlign: 'center',
-                        }}
-                        disabled={disabled}
-                        onClick={onClick}
-                        color={color}
-                        variant={variant}
-                    >
-                        {children}
-                    </FButton>
-                </div>
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FSearchBox

package/src/material/FSelectSearchDb/FSelectSearchDb.css

@@ -1,83 +0,0 @@
-.select-search-db {
-    position: relative;
-    display: inline-block;
-    padding-bottom: 16px;
-}
-
-.select-search-db-input-block {
-    position: relative;
-}
-
-.select-search-db-input-arrow{
-    position: absolute;
-    cursor: pointer;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 1em;
-}
-
-.select-search-db-input-load {
-    position: absolute;
-    cursor: pointer;
-    top: 60%;
-    transform: translateY(-50%);
-    left: 1em;
-}
-
-.select-search-db-dropdown {
-    display: none;
-    flex-direction: column;
-    position: absolute;
-    padding: 10px;
-    box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
-    border-radius: 10px;
-    width: 100%;
-    z-index: 6;
-    margin-top: 2px;
-    opacity: 0;
-    background-color: white;
-    overflow-y: auto;
-    max-height: 300px;
-}
-
-.select-search-db:hover .select-search-db-dropdown {
-    display: flex;
-    opacity: 1;
-    animation: fadeInFromNone 0.3s ease;
-}
-
-.select-search-db-dropdown li {
-    padding: 8px;
-    color: #656565;
-    font-size: 14px;
-    border-bottom: 1px solid #C4C4C4;
-    cursor: pointer;
-    list-style-type: none;
-}
-
-.select-search-db-dropdown li:last-child {
-    border-bottom: 0;
-}
-
-.select-search-db-dropdown li:hover {
-    background-color: rgb(47 128 237 / 21%);
-}
-
-@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/FSelectSearchDb/FSelectSearchDb.tsx

@@ -1,196 +0,0 @@
-import React, {FC, useRef, useState} from "react";
-import {FStack} from "../index";
-import {FArrowIcon} from "../../icons";
-import './FSelectSearchDb.css'
-import FLoadIcon from "../../icons/FLoadIcon";
-
-export interface IFSelectSearchDb {
-    fetchingFunc: (text: string) => Promise<any[]>,
-    selectedElement: (e: any | undefined) => void,
-    selectItem: any,
-    label?: string
-    st?: React.CSSProperties,
-    id?: string,
-    fullWidth?: boolean,
-    className?: string,
-    disabled?: boolean
-    readOnly?: boolean,
-    errText?: string[],
-    helpText?: string,
-    onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined,
-    onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined,
-    minLengthText?: number
-}
-
-const FSelectSearchDb: FC<IFSelectSearchDb> = ({
-                                         fetchingFunc,
-                                         selectedElement,
-                                         selectItem,
-                                         st,
-                                         id,
-                                         className,
-                                         disabled,
-                                         readOnly,
-                                         fullWidth,
-                                         label,
-                                         onBlur,
-                                         onFocus,
-                                         errText,
-                                         helpText,
-                                                   minLengthText
-                                     }) => {
-
-    const [valueInput, setValueInput] = useState<string>('')
-
-    const [arrObject, setArrObject] = useState<any[]>([])
-
-    const timerDebounceRef = useRef<number>();
-
-    const [load, setLoad] = useState<boolean>(false)
-
-    const handlerOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-
-        const text = e.target.value
-
-        setValueInput(text)
-
-        if (timerDebounceRef.current) {
-            clearTimeout(timerDebounceRef.current);
-        }
-
-        if (text !== '') {
-            if (minLengthText !== undefined && text.length === minLengthText) {
-                timerDebounceRef.current = setTimeout(() => {
-                    setLoad(true)
-                    fetchingFunc(e.target.value).then(r => {
-                        setArrObject(r)
-                        setLoad(false)
-                    })
-                }, 1000);
-            } else {
-                timerDebounceRef.current = setTimeout(() => {
-                    setLoad(true)
-                    fetchingFunc(e.target.value).then(r => {
-                        setArrObject(r)
-                        setLoad(false)
-                    })
-                }, 1000);
-            }
-
-        } else {
-            setArrObject([])
-            setLoad(false)
-        }
-
-    }
-
-    let style = {
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        width: 'fit-content'
-    }
-
-    st = Object.assign({}, st, style);
-
-    if (fullWidth) {
-        st.width = '100%'
-    }
-
-    return (
-        <React.Fragment>
-            <div
-                className={`select-search-db ${className !== undefined ? className : ''} ${load ? 'ui left icon input loading' : ''}`}
-                style={st} id={id}>
-                {label &&
-                    <label
-                        className="control-label with-offset"
-                        style={{
-                            whiteSpace: 'nowrap',
-                            textOverflow: 'ellipsis'
-                        }}
-                    >
-                        {label}
-                    </label>
-                }
-                <div className={'select-search-db-input-block'}>
-                    <input
-                        readOnly={readOnly}
-                        disabled={disabled || load}
-                        required={true}
-                        style={{
-                            borderColor: errText !== undefined && errText.length > 0 ? 'red' : '#C4C4C4'
-                        }}
-                        type={'text'}
-                        className="form-control select-search-db-input"
-                        value={valueInput}
-                        onChange={handlerOnChange}
-                        onFocus={onFocus}
-                        onBlur={onBlur}
-                    />
-                    {(!load && !disabled) &&
-                        <div className={'select-search-db-input-arrow'}>
-                            <FArrowIcon direction={'down'} size={15}/>
-                        </div>
-                    }
-                    {load &&
-                        <div className={'select-search-db-input-load'}>
-                            <FLoadIcon size={10}/>
-                        </div>
-                    }
-                </div>
-
-                {(!load && arrObject !== undefined && arrObject.length > 0) &&
-                    <div className={'select-search-db-dropdown'}>
-                        <FStack direction={'column'} st={{paddingLeft: '11px'}}>
-                            {arrObject.slice(0, 10).map((opt, index) => (
-                                <li
-                                    key={index}
-                                    onClick={(e) => {
-                                        selectedElement(opt)
-                                        //@ts-ignore
-                                        setValueInput(e.target.textContent)
-                                    }}
-                                >
-                                    {selectItem(opt)}
-                                </li>
-                            ))
-                            }
-                        </FStack>
-                    </div>
-                }
-                {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>
-                }
-            </div>
-        </React.Fragment>
-    )
-};
-
-export default FSelectSearchDb;

package/src/material/FSelectSearchDb/index.ts

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

package/src/material/FStack/FStack.css

@@ -1,3 +0,0 @@
-.margin-item  {
-    margin: 0 0 0 8px;
-}

package/src/material/FStack/FStack.tsx

@@ -1,55 +0,0 @@
-import React, {FC} from "react";
-import "./FStack.css"
-
-export interface IFStack {
-    direction?: 'row' | "row-reverse" | 'column' | "column-reverse",
-    alignItems?: "flex-start" | "center" | "flex-end" | "stretch" | "baseline",
-    justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly",
-    spacing?: number,
-    children?: React.ReactChild | React.ReactNode,
-    className?: string,
-    st?: React.CSSProperties,
-    id?: string
-}
-
-const FStack: FC<IFStack> = ({
-                                 children,
-                                 alignItems,
-                                 justifyContent,
-                                 direction = 'column',
-                                 spacing = 0,
-                                 className,
-                                 st,
-                                 id
-                             }) => {
-
-    let style: React.CSSProperties = {
-        gap: `${+spacing * 8}px`,
-        display: 'flex',
-        flexDirection: direction,
-        // @ts-ignore
-        WebkitBoxPack: justifyContent,
-        justifyContent: justifyContent,
-        // @ts-ignore
-        WebkitBoxAlign: alignItems,
-        alignItems: alignItems,
-    }
-
-    if (st !== undefined) {
-        style = Object.assign(style, st);
-    }
-
-    return (
-        <React.Fragment>
-            <div
-                className={className}
-                style={style}
-                id={id}
-            >
-                {children}
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FStack

package/src/material/FStack/index.ts

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

package/src/material/FTextArea/FTextArea.tsx

@@ -1,124 +0,0 @@
-import React, {FC} from "react";
-import {FStack} from "../index";
-import FLoadIcon from "../../icons/FLoadIcon";
-
-export interface IFTextArea {
-    label?: string
-    st?: React.CSSProperties,
-    value?: string | undefined
-    cols?: number
-    rows?: number
-    placeholder?: string
-    readOnly?: boolean
-    disabled?: boolean
-    autoComplete?: boolean,
-    className?: string,
-    id?: string,
-    fullWidth?: boolean,
-    onChange?: React.ChangeEventHandler<HTMLTextAreaElement> | undefined,
-    onClick?:  React.MouseEventHandler<HTMLTextAreaElement> | undefined
-    onFocus?: React.FocusEventHandler<HTMLTextAreaElement> | undefined,
-    errText?: string[],
-    helpText?: string,
-    load?: boolean,
-}
-
-const FTextArea: FC<IFTextArea> = (
-    {
-        label,
-        st,
-        value,
-        cols,
-        rows,
-        placeholder,
-        readOnly,
-        disabled,
-        autoComplete,
-        className,
-        id,
-        fullWidth,
-        onChange,
-        onClick,
-        onFocus,
-        errText,
-        helpText,
-        load,
-    }
-) => {
-
-    return (
-        <React.Fragment>
-            <div
-                style={{
-                    width: fullWidth ? '100%' : 'fit-content'
-                }}
-                className={`control-group ${className !== undefined ? className : ''}`}
-                id={id}
-            >
-                <div className={`${load ? 'ui left icon input loading' : ''} form-group`} style={st}>
-                    {label &&
-                        <label className="control-label with-offset required">
-                            {label}
-                        </label>
-                    }
-                    <textarea
-                        onClick={onClick}
-                        onFocus={onFocus}
-                        cols={cols}
-                        rows={rows}
-                        style={{
-                            borderColor: errText !== undefined && errText.length > 0 ? 'red' : '#C4C4C4'
-                        }}
-                        disabled={disabled || load}
-                        readOnly={readOnly}
-                        //@ts-ignore
-                        autoComplete={autoComplete}
-                        required
-                        value={load ? undefined : value}
-                        placeholder={placeholder}
-                        className="form-control"
-                        onChange={onChange}
-                    />
-                    {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>
-            </div>
-
-        </React.Fragment>
-    )
-}
-
-export default FTextArea;

package/src/material/FTextArea/index.ts

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