fui-material 0.2.60 → 0.2.61

package/src/material/FContainer/FContainer.css

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

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

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

package/src/material/FFile/FFile.tsx

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

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

package/src/material/FFullDateField/FFullDateField.tsx

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

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

package/src/material/FGrid/FGrid.css

@@ -1,179 +0,0 @@
-@media (min-width: 1400px) {
-    .container-xs {
-        max-width: 1320px;
-    }
-
-    .container-sm {
-        max-width: 1320px;
-    }
-
-    .container-md {
-        max-width: 1320px;
-    }
-
-    .container-lg {
-        max-width: 1320px;
-    }
-
-    .container-xl {
-        max-width: 1320px;
-    }
-
-    .container-xxl {
-        max-width: 1320px;
-    }
-
-    .container-fluid {
-        max-width: 100%;
-    }
-}
-
-@media (min-width: 1200px) and (max-width: 1399px) {
-    .container-xs {
-        max-width: 1140px;
-    }
-
-    .container-sm {
-        max-width: 1140px;
-    }
-
-    .container-md {
-        max-width: 1140px;
-    }
-
-    .container-lg {
-        max-width: 1140px;
-    }
-
-    .container-xl {
-        max-width: 1140px;
-    }
-
-    .container-xxl {
-        max-width: 100%;
-    }
-
-    .container-fluid {
-        max-width: 100%;
-    }
-}
-
-@media (min-width: 992px) and (max-width: 1199px) {
-    .container-xs {
-        max-width: 960px;
-    }
-
-    .container-sm {
-        max-width: 960px;
-    }
-
-    .container-md {
-        max-width: 960px;
-    }
-
-    .container-lg {
-        max-width: 960px;
-    }
-
-    .container-xl {
-        max-width: 100%;
-    }
-
-    .container-xxl {
-        max-width: 100%;
-    }
-
-    .container-fluid {
-        max-width: 100%;
-    }
-}
-
-@media (min-width: 768px) and (max-width: 991px) {
-    .container-xs {
-        max-width: 720px;
-    }
-
-    .container-sm {
-        max-width: 720px;
-    }
-
-    .container-md {
-        max-width: 720px;
-    }
-
-    .container-lg {
-        max-width: 100%;
-    }
-
-    .container-xl {
-        max-width: 100%;
-    }
-
-    .container-xxl {
-        max-width: 100%;
-    }
-
-    .container-fluid {
-        max-width: 100%;
-    }
-}
-
-@media (min-width: 576px) and (max-width: 767px) {
-    .container-xs {
-        max-width: 540px;
-    }
-
-    .container-sm {
-        max-width: 540px;
-    }
-
-    .container-md {
-        max-width: 100%;
-    }
-
-    .container-lg {
-        max-width: 100%;
-    }
-
-    .container-xl {
-        max-width: 100%;
-    }
-
-    .container-xxl {
-        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-xxl {
-        max-width: 100%;
-    }
-
-    .container-fluid {
-        max-width: 100%;
-    }
-}

package/src/material/FGrid/FGrid.tsx

@@ -1,76 +0,0 @@
-import React, {FC} from "react";
-// import "./css/bootstrap.css"
-
-export interface IFGrid {
-    children?: React.ReactChild | React.ReactNode,
-    className?: string,
-    st?: React.CSSProperties,
-    id?: string
-    obj?: 'container' | 'item'
-    xs?: number,
-    sm?: number,
-    md?: number,
-    lg?: number,
-    xl?: number,
-    xxl?: number,
-    colAuto?: 'col-sm-auto' | 'col-md-auto' | 'col-lg-auto' | 'col-xl-auto' | 'col-xxl-auto'
-}
-
-const FGrid: FC<IFGrid> = ({
-                               children,
-                               className,
-                               st,
-                               id,
-                               obj,
-                               xs,
-                               sm,
-                               md,
-                               lg,
-                               xl,
-                               xxl,
-                               colAuto
-                           }) => {
-
-    let style: React.CSSProperties = {
-        paddingBottom: '16px'
-    }
-
-    if (st !== undefined) {
-        style = Object.assign(style, st);
-    }
-
-
-    return (
-        <React.Fragment>
-            {obj === 'container' &&
-                <div
-                    className={`container`}
-                >
-                    <div
-                        className={`row ${className !== undefined ? className : ''}`}
-                        style={st}
-                        id={id}
-                    >
-                        {children}
-                    </div>
-                </div>
-            }
-            {obj === 'item' &&
-                <div
-                    className={`${className !== undefined ? className : ''} ${xs !== undefined ? `col-${xs}` : ''} ${sm !== undefined ? `col-sm-${sm}` : ''} ${md !== undefined ? `col-md-${md}` : ''} ${lg !== undefined ? `col-lg-${lg}` : ''} ${xl !== undefined ? `col-lg-${lg}` : ''} ${xxl !== undefined ? `col-xxl-${xxl}` : ''} ${colAuto !== undefined ? colAuto : ''}`}
-                    style={style}
-                    id={id}
-                >
-                    {children}
-                </div>
-            }
-            {obj === undefined &&
-                <div>
-                    {children}
-                </div>
-            }
-        </React.Fragment>
-    )
-}
-
-export default FGrid