fui-material 0.2.58 → 0.2.60

package/src/material/FSearchBox/FSearchBox.tsx

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

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

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

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

package/src/material/FStack/FStack.css

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

package/src/material/FStack/FStack.tsx

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

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

package/src/material/FTextArea/FTextArea.tsx

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

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