fui-material 1.16.2 → 1.16.4

package/src/material/FTextArea/FTextArea.tsx

@@ -0,0 +1,107 @@
+import { forwardRef } from "react";
+
+import FLoadIcon from "@icons/FLoadIcon";
+
+import FStack from "@material/FStack";
+
+export interface IFTextArea extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+    label?: string
+    st?: React.CSSProperties,
+    value?: string | undefined
+    disabled?: boolean
+    className?: string,
+    id?: string,
+    fullWidth?: boolean,
+    errText?: string[],
+    helpText?: string,
+    load?: boolean,
+    width?: string | number,
+    height?: string | number
+}
+
+const FTextArea = forwardRef<HTMLTextAreaElement, IFTextArea>((
+    {
+        label,
+        st,
+        value,
+        disabled,
+        className,
+        id,
+        fullWidth,
+        errText,
+        helpText,
+        load,
+        width = 'fit-content',
+        height = 'auto',
+        ...props
+    },
+    ref
+) => {
+
+    return (
+        <div
+            style={{
+                width: fullWidth ? '100%' : width,
+                height: "auto"
+            }}
+            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
+                    ref={ref}
+                    style={{
+                        borderColor: errText !== undefined && errText.length > 0 ? 'red' : '#C4C4C4',
+                        height: height
+                    }}
+                    disabled={disabled || load}
+                    value={load ? undefined : value}
+                    className="form-control"
+                    {...props}
+                />
+                {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>
+    )
+})
+
+export default FTextArea;

package/src/material/FTextArea/index.ts

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

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,139 @@
+import { forwardRef } from "react";
+
+import "./FTextField.css"
+
+import FLoadIcon from "@icons/FLoadIcon";
+
+import FStack from "@material/FStack";
+
+export interface IFTextField extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    st?: React.CSSProperties;
+    fullWidth?: boolean;
+    readOnly?: boolean | undefined;
+    errText?: string[];
+    helpText?: string;
+    load?: boolean;
+    width?: string | number;
+    height?: string | number;
+}
+
+
+const FTextField = forwardRef<HTMLInputElement, IFTextField>(({
+    label,
+    type = 'text',
+    fullWidth,
+    readOnly,
+    errText,
+    helpText,
+    st,
+    id,
+    className,
+    load = false,
+    height = 'auto',
+    width,
+    ...props
+}, ref) => {
+
+    if (fullWidth) {
+        if (st === undefined) {
+            st = {
+                width: '100%'
+            }
+        } else {
+            st.width = '100%'
+        }
+    }
+
+    const style: {
+        whiteSpace: string,
+        overflow: string,
+        textOverflow: string,
+        width: string | number,
+        height: string | number,
+    } = {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        width: 'fit-content',
+        height: 'auto',
+    }
+
+
+    if (width !== undefined) {
+        style['width'] = width
+    }
+
+    if (height !== undefined) {
+        style['height'] = height
+    }
+
+    st = Object.assign({}, style, st);
+
+    return (
+        <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
+                    ref={ref}
+                    height={height}
+                    style={{
+                        borderColor: errText !== undefined && errText.length > 0 ? 'red' : '#C4C4C4',
+                        height: height
+                    }}
+                    readOnly={readOnly || load}
+                    type={type}
+                    className="form-control"
+                    {...props}
+                />
+                {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>
+    )
+});
+
+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,26 @@
+import { FC } from 'react';
+
+import "./FTimeline.css"
+
+export interface IFTimeline {
+    children?: React.ReactElement | React.ReactNode,
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string
+}
+
+const FTimeline: FC<IFTimeline> = ({
+    children,
+    st,
+    id,
+    className
+}) => {
+
+    return (
+        <div className={`fv-timeline ${className !== undefined ? className : ''}`} style={st} id={id}>
+            {children}
+        </div>
+    );
+};
+
+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,30 @@
+import { FC } from 'react';
+
+import FPaper from '@material/FPaper';
+
+export interface IFTimelineCard {
+    children?: React.ReactElement | React.ReactNode,
+    st?: React.CSSProperties,
+    title?: string,
+    id?: string,
+    className?: string
+}
+
+const FTimelineCard: FC<IFTimelineCard> = ({
+    children,
+    st,
+    title,
+    id,
+    className
+}) => {
+    return (
+        <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>
+    );
+};
+
+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,120 @@
+import { forwardRef } from "react";
+
+import "./FSelect.css"
+
+import FLoadIcon from "@icons/FLoadIcon";
+
+import FStack from "@material/FStack";
+
+export interface IFSelect extends React.InputHTMLAttributes<HTMLSelectElement> {
+    label?: string
+    st?: React.CSSProperties
+    children?: React.ReactElement | React.ReactNode
+    value?: string | number | readonly string[] | undefined
+    fullWidth?: boolean
+    disabled?: boolean
+    id?: string,
+    className?: string,
+    load?: boolean,
+    errText?: string[],
+    helpText?: string,
+    width?: string | number,
+    height?: string | number,
+}
+
+const FSelect = forwardRef<HTMLSelectElement, IFSelect>(({
+    label,
+    st,
+    children,
+    value,
+    fullWidth,
+    disabled,
+    id,
+    className,
+    load = false,
+    errText,
+    helpText,
+    height = 'auto',
+    width = 'fit-content',
+    ...props
+}, ref) => {
+
+    return (
+        <div
+            className={`form-group ${className !== undefined ? className : ''}`}
+            style={{
+                width: fullWidth ? '100%' : width,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                height: "auto",
+            }}
+            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
+                    ref={ref}
+                    disabled={disabled || load}
+                    style={Object.assign({}, st, {
+                        borderColor: errText !== undefined && errText.length > 0 ? 'red' : '#C4C4C4',
+                        height: height
+                    })}
+                    className="form-control"
+                    value={load ? undefined : value}
+                    {...props}
+                >
+                    {!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>
+    )
+});
+
+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,41 @@
+import { FC } from "react";
+
+export interface IFSelectItem {
+    st?: React.CSSProperties
+    value?: string | number | readonly string[] | undefined
+    children?: React.ReactElement | 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,
+    selected
+}) => {
+
+    return (
+        <option
+            selected={selected}
+            disabled={disabled}
+            onClick={onClick}
+            style={st}
+            value={value}
+            className={className}
+            id={id}
+        >
+            {children}
+        </option>
+    )
+
+}
+
+export default FSelectItem

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

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