fui-material 0.2.59 → 0.2.60

package/src/material/FTextField/FTextField.css

@@ -0,0 +1,95 @@
+.ui.input {
+    font-size: 1em;
+}
+.ui.input {
+    position: relative;
+    border: 2px solid #e4e9f100;
+}
+
+.ui.icon.input>i.icon:not(.link) {
+    pointer-events: none;
+}
+.ui[class*="left icon"].input>i.icon {
+    right: auto;
+    left: 1px;
+    border-radius: .28571429rem 0 0 .28571429rem;
+}
+.ui.icon.input>i.icon {
+    cursor: default;
+    position: absolute;
+    line-height: 1;
+    text-align: center;
+    top: 0;
+    right: 0;
+    margin: 0;
+    height: 100%;
+    width: 2.67142857em;
+    opacity: .5;
+    border-radius: 0 .28571429rem .28571429rem 0;
+    transition: opacity .3s ease;
+}
+i.icon, i.icons {
+    font-size: 1em;
+}
+i.icon {
+    animation: 1.2s spin infinite linear;
+}
+
+.ui.loading.loading.input>i.icon:before {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    margin: -.64285714em 0 0 -.64285714em;
+    width: 1.28571429em;
+    height: 1.28571429em;
+    border-radius: 500rem;
+    border: .2em solid rgba(0,0,0,.1);
+}
+.ui.icon.input>i.icon:after, .ui.icon.input>i.icon:before {
+    left: 0;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    width: 100%;
+    margin-top: -.5em;
+}
+
+i.icon.search:before {
+    content: "\f002";
+}
+i.icon:before {
+    background: 0 0!important;
+}
+
+.ui.loading.loading.input>i.icon:after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    margin: -.64285714em 0 0 -.64285714em;
+    width: 1.28571429em;
+    height: 1.28571429em;
+    -webkit-animation: button-spin .6s linear;
+    animation: button-spin .6s linear;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    border-radius: 500rem;
+    border-color: #2164BE transparent transparent;
+    border-style: solid;
+    border-width: .2em;
+    box-shadow: 0 0 0 1px transparent;
+}
+.ui.icon.input>i.icon:after, .ui.icon.input>i.icon:before {
+    left: 0;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    width: 100%;
+    margin-top: -.5em;
+}
+
+.ui[class*="left icon"].input>input {
+    padding-left: 2.67142857em!important;
+    padding-right: 1em!important;
+}

package/src/material/FTextField/FTextField.tsx

@@ -0,0 +1,163 @@
+import React, {FC} from "react";
+import {FStack} from "../index";
+import "./FTextField.css"
+import FLoadIcon from "../../icons/FLoadIcon";
+
+export interface IFTextField {
+    label?: string,
+    st?: React.CSSProperties,
+    value?: string | number | readonly string[] | undefined | null,
+    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,
+}
+
+const FTextField: FC<IFTextField> = (
+    {
+        label,
+        value,
+        onChange,
+        type = 'text',
+        onBlur,
+        onFocus,
+        fullWidth,
+        disabled,
+        readOnly,
+        defaultValue,
+        errText,
+        helpText,
+        onInput,
+        st,
+        id,
+        className,
+        load = false,
+        min,
+        max,
+        placeholder,
+    }
+) => {
+
+    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'
+        }
+    }
+
+    let style = {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    }
+    st = Object.assign({}, st, style);
+
+    if (value === null) {
+        value = ''
+    }
+
+    if (type === 'number' && (value === undefined)) {
+        value = ''
+    }
+
+    return (
+        <React.Fragment>
+            <div
+                className={`
+                form-group ${className !== undefined ? className : ''}`} style={st} id={id}>
+                {label &&
+                    <label className="control-label with-offset" style={{
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                    }}>
+                        {label}
+                    </label>
+                }
+                <div className={`${load ? 'ui left icon input loading' : ''}`}>
+                    <input
+                        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}
+                        className="form-control"
+                        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>
+            </div>
+        </React.Fragment>
+    )
+}
+
+export default FTextField;

package/src/material/FTextField/index.ts

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

package/src/material/FTimelineComponents/FTimeline/FTimeline.css

@@ -0,0 +1,82 @@
+.fv-tl-block-card {
+    position: relative;
+    max-width: 100%;
+}
+
+.fv-tl-block-card:nth-child(odd) {
+    padding: 30px 0 30px 30px;
+}
+
+.fv-tl-block-card:nth-child(even) {
+    padding: 30px 30px 30px 0;
+}
+
+.fv-tl-block-card::before {
+    content: "";
+    position: absolute;
+    width: 50%;
+    border: solid #0d6efd;
+}
+
+.fv-tl-block-card:nth-child(odd)::before {
+    left: 0px;
+    top: -4.5px;
+    bottom: -4.5px;
+    border-width: 5px 0 5px 5px;
+    border-radius: 50px 0 0 50px;
+}
+
+.fv-tl-block-card:nth-child(even)::before {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-width: 5px 5px 5px 0;
+    border-radius: 0 50px 50px 0;
+}
+
+.fv-tl-block-card:first-child::before {
+    border-top: 0;
+    border-top-left-radius: 0;
+}
+
+.fv-tl-block-card:last-child:nth-child(odd)::before {
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+}
+
+.fv-tl-block-card:last-child:nth-child(even)::before {
+    border-bottom: 0;
+    border-bottom-right-radius: 0;
+}
+
+.fv-tl-card {
+    position: inherit;
+    z-index: 1;
+}
+
+.fv-tl-line-circle {
+    color: #0d6efd;
+    position: relative;
+}
+
+.fv-tl-line-circle::before {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 999px;
+    border: 3px solid #0d6efd;
+}
+
+.fv-tl-block-card:nth-child(even) > .fv-tl-line-circle {
+    text-align: right;
+}
+
+.fv-tl-block-card:nth-child(odd) > .fv-tl-line-circle::before {
+    left: -32px;
+}
+
+.fv-tl-block-card:nth-child(even) > .fv-tl-line-circle::before {
+    right: -30px;
+}

package/src/material/FTimelineComponents/FTimeline/FTimeline.tsx

@@ -0,0 +1,28 @@
+import React, {FC} from 'react';
+import "./FTimeline.css"
+
+export interface IFTimeline {
+    children?: React.ReactChild | React.ReactNode,
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string
+}
+
+const FTimeline: FC<IFTimeline> = ({
+                                       children,
+                                       st,
+                                       id,
+                                       className
+                                   }) => {
+
+    return (
+        <React.Fragment>
+            <div className={`fv-timeline ${className !== undefined ? className : ''}`} style={st} id={id}>
+                {children}
+            </div>
+        </React.Fragment>
+
+    );
+};
+
+export default FTimeline;

package/src/material/FTimelineComponents/FTimeline/index.ts

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

package/src/material/FTimelineComponents/FTimelineCard/FTimelineCard.tsx

@@ -0,0 +1,31 @@
+import React, {FC} from 'react';
+import {FPaper} from "../../index";
+
+export interface IFTimelineCard {
+    children?: React.ReactChild | React.ReactNode,
+    st?: React.CSSProperties,
+    title?: string,
+    id?: string,
+    className?: string
+}
+
+const FTimelineCard: FC<IFTimelineCard> = ({
+                                               children,
+                                               st,
+                                               title,
+                                               id,
+                                               className
+                                           }) => {
+    return (
+        <React.Fragment>
+            <div className={`fv-tl-block-card ${className !== undefined ? className : ''}`} id={id}>
+                <div className={'fv-tl-line-circle'}/>
+                <FPaper label={title} st={st} className={'fv-tl-card'}>
+                    {children}
+                </FPaper>
+            </div>
+        </React.Fragment>
+    );
+};
+
+export default FTimelineCard;

package/src/material/FTimelineComponents/FTimelineCard/index.ts

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

package/src/material/SelectComponents/FSelect/FSelect.tsx

@@ -0,0 +1,121 @@
+import React, {FC} from "react";
+import "./FSelect.css"
+import {FStack} from "../../index";
+import FLoadIcon from "../../../icons/FLoadIcon";
+
+export interface IFSelect {
+    label?: string
+    st?: React.CSSProperties
+    onChange?: React.ChangeEventHandler<HTMLSelectElement> | undefined
+    children?: React.ReactChild | React.ReactNode
+    value?: string | number | readonly string[] | undefined
+    multiple?: boolean | undefined
+    size?: number | undefined
+    fullWidth?: boolean
+    disabled?: boolean
+    defaultValue?: string | number | readonly string[] | undefined,
+    id?: string,
+    className?: string,
+    load?: boolean,
+    errText?: string[],
+    helpText?: string,
+}
+
+const FSelect: FC<IFSelect> = ({
+                                   label,
+                                   st,
+                                   onChange,
+                                   children,
+                                   value,
+                                   multiple,
+                                   size,
+                                   fullWidth,
+                                   disabled,
+                                   defaultValue,
+                                   id,
+                                   className,
+                                   load = false,
+                                   errText,
+                                   helpText,
+                               }) => {
+
+    return (
+        <React.Fragment>
+            <div
+                className={`form-group ${className !== undefined ? className : ''}`}
+                style={{
+                    width: fullWidth ? '100%' : 'fit-content',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+
+                }}
+                id={id}
+            >
+                <label
+                    className="control-label with-offset"
+                    style={{
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                    }}
+                >
+                    {label}
+                </label>
+                <div className={`${load ? 'ui left icon input loading' : ''}`}>
+                    <select
+                        disabled={disabled || load}
+                        style={Object.assign({}, st, {borderColor: errText !== undefined && errText.length > 0 ? 'red' : '#C4C4C4'})}
+                        className="form-control"
+                        onChange={onChange}
+                        value={load ? undefined : value}
+                        multiple={multiple}
+                        size={size}
+                        defaultValue={defaultValue}
+                    >
+                        {!load &&
+                            children
+                        }
+                    </select>
+                    {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 FSelect

package/src/material/SelectComponents/FSelect/index.ts

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

package/src/material/SelectComponents/FSelectItem/FSelectItem.tsx

@@ -0,0 +1,42 @@
+import React, {FC} from "react";
+
+export interface IFSelectItem {
+    st?: React.CSSProperties
+    value?: string | number | readonly string[] | undefined
+    children?: React.ReactChild | React.ReactNode
+    disabled?: boolean
+    onClick?: React.MouseEventHandler<HTMLOptionElement> | undefined
+    selected?: boolean
+    className?: string,
+    id?: string
+}
+
+const FSelectItem: FC<IFSelectItem> = ({
+                                           st,
+                                           value,
+                                           children,
+                                           onClick,
+                                           disabled,
+                                           className,
+                                           id
+                                       }) => {
+
+    return (
+        <React.Fragment>
+            <option
+                selected={true}
+                disabled={disabled}
+                onClick={onClick}
+                style={st}
+                value={value}
+                className={className}
+                id={id}
+            >
+                {children}
+            </option>
+        </React.Fragment>
+    )
+
+}
+
+export default FSelectItem

package/src/material/SelectComponents/FSelectItem/index.ts

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

package/src/material/TableComponents/FTable/FTable.css

@@ -0,0 +1,62 @@
+.table-responsive .table {
+    min-width: 100%;
+    margin-bottom: 10px;
+}
+
+.table-bordered.table-bordered-half {
+    border-width: 0;
+}
+
+table, .table {
+    font-size: 13px;
+    color: #656565;
+    border-collapse: collapse;
+    border-top-width: 0;
+}
+
+.table-bordered {
+    border: 1px solid #C4C4C4;
+}
+
+.table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 20px;
+}
+
+table {
+    background-color: transparent;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+table thead tr {
+    border-top: 0;
+}
+table thead tr th {
+    border-top: 0;
+}
+table thead tr th:first-child {
+    border-left: 0;
+}
+table thead tr th:last-child {
+    border-right: 0;
+}
+table tbody tr td:first-child {
+    border-left: 0;
+}
+table tbody tr td:last-child {
+    border-right: 0;
+}
+
+table > tbody > tr > th, table > tbody > tr > td, table > tfoot > tr > th, table > tfoot > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
+    vertical-align: middle;
+}
+
+.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
+    padding: 12px 20px;
+    line-height: 1.42857;
+}

package/src/material/TableComponents/FTable/FTable.tsx

@@ -0,0 +1,39 @@
+import React, {FC} from "react";
+import "./FTable.css"
+import {FStack} from "../../index";
+
+export interface IFTable {
+    st?: React.CSSProperties
+    children?: React.ReactChild | React.ReactNode
+    id?: string
+    className?: string
+    onClick?: React.MouseEventHandler<HTMLTableElement> | undefined,
+    overflowX?: 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | undefined
+}
+
+
+const FTable: FC<IFTable> = ({
+                                 st,
+                                 children,
+                                 id,
+                                 className,
+                                 onClick,
+                                 overflowX="auto"
+                             }) => {
+    return (
+        <React.Fragment>
+            <FStack direction={'row'} spacing={2} st={{overflowX: overflowX}}>
+                <table
+                    className={`table table-bordered table-bordered-half ${className}`}
+                    style={st}
+                    id={id}
+                    onClick={onClick}
+                >
+                    {children}
+                </table>
+            </FStack>
+        </React.Fragment>
+    );
+};
+
+export default FTable;

package/src/material/TableComponents/FTable/index.ts

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