fui-material 0.2.59 → 0.2.60

package/src/material/TableComponents/FTableBody/FTableBody.tsx

@@ -0,0 +1,28 @@
+import React, {FC} from "react";
+
+export interface IFTableBody {
+    st?: React.CSSProperties
+    children?: React.ReactChild | React.ReactNode
+    onClick?: React.MouseEventHandler<HTMLTableSectionElement> | undefined
+    id?: string
+    className?: string
+}
+
+
+const FTableBody: FC<IFTableBody> = ({
+                                    st,
+                                    children,
+                                    id,
+                                    className,
+                                    onClick
+                                }) => {
+    return (
+        <React.Fragment>
+            <tbody style={st} className={className} id={id} onClick={onClick}>
+            {children}
+            </tbody>
+        </React.Fragment>
+    );
+};
+
+export default FTableBody;

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

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

package/src/material/TableComponents/FTableDataCell/FTableDataCell.tsx

@@ -0,0 +1,45 @@
+import React, {FC} from "react";
+
+export interface IFTableDataCell {
+    st?: React.CSSProperties
+    row?: number | undefined
+    col?: number | undefined
+    children?: React.ReactChild | React.ReactNode
+    onClick?: React.MouseEventHandler<HTMLTableHeaderCellElement> | undefined
+    id?: string
+    onBlur?: React.FocusEventHandler<HTMLTableDataCellElement> | undefined,
+    onFocus?: React.FocusEventHandler<HTMLTableDataCellElement> | undefined
+    className?: string
+}
+
+
+const FTableDataCell: FC<IFTableDataCell> = ({
+                                        st,
+                                        row,
+                                        col,
+                                        children,
+                                        onClick,
+                                        id,
+                                        onBlur,
+                                        onFocus,
+                                        className
+                                    }) => {
+    return (
+        <React.Fragment>
+            <td
+                style={st}
+                rowSpan={row}
+                colSpan={col}
+                onClick={onClick}
+                id={id}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                className={className}
+            >
+                {children}
+            </td>
+        </React.Fragment>
+    );
+};
+
+export default FTableDataCell;

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

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

package/src/material/TableComponents/FTableFooter/FTableFooter.tsx

@@ -0,0 +1,29 @@
+import React, {FC} from "react";
+
+export interface IFTableFooter {
+    st?: React.CSSProperties
+    children?: React.ReactChild | React.ReactNode
+    onClick?: React.MouseEventHandler<HTMLTableSectionElement> | undefined
+    id?: string
+    className?: string
+}
+
+
+const FTableFooter: FC<IFTableFooter> = ({
+                                             st,
+                                             children,
+                                             id,
+                                             className,
+                                             onClick
+                                         }) => {
+
+    return (
+        <React.Fragment>
+            <tfoot style={st} id={id} className={className} onClick={onClick}>
+                {children}
+            </tfoot>
+        </React.Fragment>
+    );
+};
+
+export default FTableFooter;

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

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

package/src/material/TableComponents/FTableHead/FTableHead.tsx

@@ -0,0 +1,28 @@
+import React, {FC} from "react";
+
+export interface IFTableHead {
+    st?: React.CSSProperties
+    children?: React.ReactChild | React.ReactNode
+    onClick?: React.MouseEventHandler<HTMLTableSectionElement> | undefined
+    id?: string
+    className?: string
+}
+
+
+const FTableHead: FC<IFTableHead> = ({
+                                    st,
+                                    children,
+                                    id,
+                                    className,
+                                    onClick
+                                }) => {
+    return (
+        <React.Fragment>
+            <thead style={st} id={id} className={className} onClick={onClick}>
+            {children}
+            </thead>
+        </React.Fragment>
+    );
+};
+
+export default FTableHead;

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

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

package/src/material/TableComponents/FTableHeaderCell/FTableHeaderCell.tsx

@@ -0,0 +1,39 @@
+import React, {FC} from "react";
+
+export interface IFTableHeaderCell {
+    st?: React.CSSProperties
+    row?: number | undefined
+    col?: number | undefined
+    children?: React.ReactChild | React.ReactNode
+    onClick?: React.MouseEventHandler<HTMLTableHeaderCellElement> | undefined
+    id?: string
+    className?: string
+}
+
+
+const FTableHeaderCell: FC<IFTableHeaderCell> = ({
+                                          st,
+                                          row,
+                                          col,
+                                          children,
+                                          onClick,
+                                          id,
+                                          className
+                                      }) => {
+    return (
+        <React.Fragment>
+            <th
+                style={st}
+                rowSpan={row}
+                colSpan={col}
+                onClick={onClick}
+                id={id}
+                className={className}
+            >
+                {children}
+            </th>
+        </React.Fragment>
+    );
+};
+
+export default FTableHeaderCell;

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

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

package/src/material/TableComponents/FTableRow/FTableRow.tsx

@@ -0,0 +1,28 @@
+import React, {FC} from "react";
+
+export interface IFTableRow {
+    st?: React.CSSProperties
+    children?: React.ReactChild | React.ReactNode
+    onClick?: React.MouseEventHandler<HTMLTableRowElement> | undefined
+    id?: string
+    className?: string
+}
+
+
+const FTableRow: FC<IFTableRow> = ({
+                                   st,
+                                   children,
+                                   onClick,
+                                   id,
+                                   className
+                               }) => {
+    return (
+        <React.Fragment>
+            <tr style={st} onClick={onClick} id={id} className={className}>
+                {children}
+            </tr>
+        </React.Fragment>
+    );
+};
+
+export default FTableRow;

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

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

package/src/material/Tabs/FTab/FTab.tsx

@@ -0,0 +1,39 @@
+import React, {FC} from "react";
+import '../styles/FTabs.css'
+
+export interface IFTabs {
+    children?: React.ReactChild | React.ReactNode
+    id?: string,
+    className?: string
+    st?: React.CSSProperties,
+    disabled?: boolean
+    active?: boolean
+    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
+}
+
+const FTab: FC<IFTabs> = ({
+                              children,
+                              id,
+                              className,
+                              st,
+                              onClick,
+                              disabled,
+                              active
+                          }) => {
+
+    return (
+        <React.Fragment>
+            <button
+                className={`f-tabs-btn ${active ? 'active' : ''} ${className !== undefined ? className : ''}`}
+                disabled={disabled}
+                onClick={onClick}
+                id={id}
+                style={st}
+            >
+                {children}
+            </button>
+        </React.Fragment>
+    )
+}
+
+export default FTab

package/src/material/Tabs/FTabs/FTabs.tsx

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

package/src/material/Tabs/styles/FTabs.css

@@ -0,0 +1,49 @@
+.f-tabs {
+    display: flex;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    margin-bottom: 16px;
+}
+
+ .f-tabs-btn {
+     display: inline-flex;
+     -webkit-box-align: center;
+     align-items: center;
+     -webkit-box-pack: center;
+     justify-content: center;
+     box-sizing: border-box;
+     -webkit-tap-highlight-color: transparent;
+     background-color: transparent;
+     outline: 0px;
+     border: 0px;
+     margin: 0px;
+     border-radius: 0px;
+     cursor: pointer;
+     user-select: none;
+     vertical-align: middle;
+     appearance: none;
+     text-decoration: none;
+     font-family: Roboto, Helvetica, Arial, sans-serif;
+     font-weight: 500;
+     line-height: 1.25;
+     letter-spacing: 0.02857em;
+     text-transform: uppercase;
+     max-width: 360px;
+     min-width: 90px;
+     position: relative;
+     min-height: 48px;
+     flex-shrink: 0;
+     padding: 12px 16px;
+     overflow: hidden;
+     white-space: normal;
+     text-align: center;
+     flex-direction: column;
+ }
+
+.f-tabs-btn.active {
+    color: #2F80ED;
+    border-bottom: solid 2px #2F80ED;
+}
+
+.f-tabs-btn:disabled {
+    color: rgb(196, 196, 196);
+}

package/src/material/index.ts

@@ -0,0 +1,60 @@
+export {default as FButton} from "./FButton";
+export {default as FButtonFile} from "./FButtonFile";
+export {default as FTextField} from "./FTextField";
+export {default as FStack} from "./FStack";
+export {default as FGrid} from "./FGrid";
+export {default as FContainer} from "./FContainer";
+export {default as FPaper} from "./FPaper";
+
+export {default as FTable} from "./TableComponents/FTable";
+export {default as FTableHead} from "./TableComponents/FTableHead";
+export {default as FTableBody} from "./TableComponents/FTableBody";
+export {default as FTableRow} from "./TableComponents/FTableRow";
+export {default as FTableHeaderCell} from "./TableComponents/FTableHeaderCell";
+export {default as FTableDataCell} from "./TableComponents/FTableDataCell";
+export {default as FTableFooter} from "./TableComponents/FTableFooter";
+
+export {default as FDialog} from "./Dialog/FDialog";
+export {default as FDialogHeader} from "./Dialog/FDialogHeader";
+export {default as FDialogBody} from "./Dialog/FDialogBody";
+export {default as FDialogFooter} from "./Dialog/FDialogFooter";
+
+export {default as FProgress} from "./FProgress";
+export {default as FPreloader} from "./FPreloader";
+
+export {default as FCheckbox} from "./FCheckbox";
+export {default as FRadioButton} from "./FRadioButton";
+
+export {default as FPagination} from "./FPagination";
+
+export {default as FTimeline} from "./FTimelineComponents/FTimeline";
+export {default as FTimelineCard} from "./FTimelineComponents/FTimelineCard";
+
+export {default as FOpenImgFull} from "./FOpenImgFull"
+
+export {default as FAccordion} from "./FAccordion"
+
+export {default as FInputFileForm} from "./FInputFileForm"
+
+export {default as FFile} from "./FFile"
+
+export {default as FSelect} from "./SelectComponents/FSelect"
+export {default as FSelectItem} from "./SelectComponents/FSelectItem"
+
+export {default as FFullDateField} from "./FFullDateField"
+
+export {default as FSelectSearchDb} from "./FSelectSearchDb"
+
+export {default as FTextArea} from "./FTextArea"
+
+export {default as FAlert} from "./FAlert"
+
+export {default as FNative} from "./FNative"
+
+export {default as FTabs} from "./Tabs/FTabs"
+export {default as FTab} from "./Tabs/FTab"
+
+export {default as FDropdown} from "./Dropdown/FDropdown"
+export {default as FDropdownItem} from "./Dropdown/FDropdownItem"
+
+export {default as FSearchBox} from "./FSearchBox"

package/src/material/statick/Colors.css

@@ -0,0 +1,87 @@
+.primary {
+    fill: #2F80ED !important;
+}
+.secondary {
+    fill: #6c757d !important;
+}
+.success {
+    fill: #198754 !important;
+}
+.danger {
+    fill: #dc3545 !important;
+}
+.warning {
+    fill: #ffc107 !important;
+}
+.info {
+    fill: #0dcaf0 !important;
+}
+.light {
+    fill: #f8f9fa !important;
+}
+.dark {
+    fill: #212529 !important;
+}
+.link {
+    fill: #0a58ca !important;
+}
+
+.btn-primary {
+    background-color: #2F80ED !important;
+}
+.btn-secondary {
+    background-color: #6c757d !important;
+}
+.btn-success {
+    color: #EFF5F0 !important;
+    background-color: #2E7D32 !important;
+    border-color: #2E7D32 !important;
+}
+.btn-danger {
+    background-color: #dc3545 !important;
+}
+.btn-warning {
+    background-color: #ffc107 !important;
+}
+.btn-info {
+    background-color: #0dcaf0 !important;
+}
+.btn-light {
+    background-color: #f8f9fa !important;
+}
+.btn-dark {
+    background-color: #212529 !important;
+}
+.btn-link {
+    background-color: #0a58ca !important;
+    color: #fff !important;
+}
+
+.btn-default-primary {
+    background-color: #2F80ED !important;
+}
+.btn-default-secondary {
+    background-color: #6c757d !important;
+}
+.btn-default-success {
+    background-color: #198754 !important;
+}
+.btn-default-danger {
+    background-color: #dc3545 !important;
+}
+.btn-default-warning {
+    background-color: #ffc107 !important;
+}
+.btn-default-info {
+    background-color: #0dcaf0 !important;
+}
+.btn-default-light {
+    background-color: #f8f9fa !important;
+}
+.btn-default-dark {
+    background-color: #212529 !important;
+}
+.btn-default-link {
+    background-color: #0a58ca !important;
+    color: #fff !important;
+}

package/src/material/statick/index.css

@@ -0,0 +1,7 @@
+.input-load {
+    position: absolute;
+    cursor: pointer;
+    top: 60%;
+    transform: translateY(-50%);
+    left: 1em;
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "lib": ["es5", "es6", "dom", "ESNext", "dom.iterable"],
+    "target": "ES6",
+    "module": "ESNext",
+    "strict": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "outDir": "dist",
+    "baseUrl": "./src",
+    "paths": {
+      "*": ["types/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}