ywana-core8 0.0.269 → 0.0.272

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.269",
+  "version": "0.0.272",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "moment-range": "^4.0.2",
     "react-datepicker": "^4.6.0",
     "react-error-overlay": "^6.0.10",
-    "react-notifications": "^1.7.3",
+    "react-notifications-component": "^3.4.1",
     "react-switch": "^6.0.0",
     "react-tooltip": "^4.2.21",
     "resumablejs": "^1.1.0"

package/src/html/table.js

@@ -13,7 +13,7 @@ const isFunction = value => value && (Object.prototype.toString.call(value) ===
  */
 export const DataTable = (props) => {
 
-    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined } = props
+    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false } = props
     const [sortDir, setSortDir] = useState({})
 
     function multiSort(array, sortObject = {}) {
@@ -103,7 +103,7 @@ export const DataTable = (props) => {
                 <tbody>
                     {
                         multiSort(rows, sortDir).map(row => (
-                            <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={sort} editable={editable} />
+                            <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={sort} editable={editable} expanded={expanded} />
                         ))
                     }
                 </tbody>
@@ -117,9 +117,9 @@ export const DataTable = (props) => {
  */
 const DataTableRow = (props) => {
 
-    const { row, columns = [], onSelect, editable } = props
+    const { row, columns = [], onSelect, editable, expanded = false } = props
     const { className} = row
-    const [isInfoOpen, toggleInfo] = useState(false)
+    const [isInfoOpen, toggleInfo] = useState(expanded)
     const infoIcon = isInfoOpen ? 'expand_more' : 'expand_less'
 
     return (

package/src/html/text.js

@@ -14,7 +14,7 @@ export const TEXTFORMATS = {
 /**
  * Text
  */
-export const Text = ({ format, children }) => {
+export const Text = ({ format, children, className }) => {
 
   const site = useContext(SiteContext)
   let value = children
@@ -31,6 +31,6 @@ export const Text = ({ format, children }) => {
     case TEXTFORMATS.NUMERIC: value = formatter.format(children); break;
   }
 
-  return children ? <span>{value}</span> : ''
+  return children ? <span className={className}>{value}</span> : ''
 
 }

package/src/site/site.js

@@ -4,14 +4,11 @@ import { Tabs, Tab } from '../html/tab'
 import { Header } from '../html/header'
 import { Page } from './page'
 import { SiteContext } from './siteContext'
+import './site.css'
 
-/*
-import { NotificationManager } from 'react-notifications'
-import { NotificationContainer } from 'react-notifications'
-*/
+import { ReactNotifications, Store } from 'react-notifications-component'
+import 'react-notifications-component/dist/theme.css'
 
-import './site.css'
-import 'react-notifications/lib/notifications.css';
 
 
 /**
@@ -74,8 +71,20 @@ export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }
 
         confirm: (message) => window.confirm(message),
 
-        notify: ({ title, body }) => {
-            //NotificationManager.info(body, title)
+        notify: ({ title, body, type = "success" }) => {
+            Store.addNotification({
+                title,
+                message: body,
+                type,
+                insert: "top",
+                container: "top-right",
+                animationIn: ["animate__animated", "animate__fadeIn"],
+                animationOut: ["animate__animated", "animate__fadeOut"],
+                dismiss: {
+                  duration: 3000,
+                  onScreen: true
+                }
+              });
         }
     }
 
@@ -93,7 +102,7 @@ export const Site = ({ icon, logo, title, toolbar, children, init, min, lang, di
     return (
         <SiteProvider siteLang={lang} siteDictionary={dictionary}>
             <div className="site6">
-                <SiteHeader icon={icon} />
+                <SiteHeader icon={icon} title={title}/>
                 <SiteToolBar >{toolbar}</SiteToolBar>
                 <SiteMenu logo={logo} title={title} min={min} >{children}</SiteMenu>
                 <SitePage init={init}>
@@ -112,10 +121,7 @@ export const Site = ({ icon, logo, title, toolbar, children, init, min, lang, di
 
 const SiteNotifications = () => {
     return (
-        <div></div>
-    )
-    return (
-        <NotificationContainer />
+        <ReactNotifications />
     )
 }
 

package/src/site/site.test.js

@@ -1,19 +1,37 @@
-import React, { useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { Site } from './site'
 import { Page } from './page'
 import './site.css'
 import './page.css'
+import { Fragment } from 'react/cjs/react.production.min'
+import { SiteContext } from './siteContext'
 
 const SiteTest = (prop) => {
-
     return (
         <Site icon="star" title="Site Test" init={"PAGE1"}>
-            <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1">
-                111
+            <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
+                <Page1 />
             </Page>
-            <Page id="PAGE2" section="SECTION1" icon="description" title="Page 2">
+            <Page id="PAGE2" section="SECTION1" icon="description" title="Page 2" layout="workspace">
                 222
             </Page>
         </Site>
     )
+}
+
+const Page1 = (props) => {
+
+    const site = useContext(SiteContext)
+    useEffect(() => {
+
+        site.notify({ title: "Notification 1", body: "Lorem ipsum dolor sit amet"})
+    }, [])
+
+    return (
+        <Fragment>
+            <header>Page 1</header>
+            <main>1</main>
+            <footer>f1</footer>
+        </Fragment>
+    )
 }

package/src/widgets/kanban/Kanban.test.js

@@ -3,16 +3,17 @@ import { Kanban, KanbanCard, KanbanColumn } from './Kanban'
 
 const KanbanTest = (prop) => {
     return (
-           <Kanban>
-               <KanbanColumn title="TODO">
-                    <KanbanCard />
-               </KanbanColumn>
-               <KanbanColumn title="IN PROGRESS">
+        <Kanban>
+            <KanbanColumn title="TODO" badge="1">
+                <KanbanCard />
+            </KanbanColumn>
+            <KanbanColumn title="IN PROGRESS" badge="0">
 
-               </KanbanColumn>
-               <KanbanColumn title="DONE">
-                   
-               </KanbanColumn>
-           </Kanban>
+            </KanbanColumn>
+            <KanbanColumn title="DONE" badge="2">
+                <KanbanCard />
+                <KanbanCard />
+            </KanbanColumn>
+        </Kanban>
     )
 }

package/src/widgets/upload/Upload.test.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { UploadArea } from './UploadArea'
+import { Uploader, UPLOAD_STATES } from './Uploader'
+import { UploadProgress } from './UploadProgress'
+
+const UploadAreaTest = (props) => {
+
+    return (
+        <div style={{ padding: "1rem" }}>
+            <UploadArea icon="cloud_upload" label="UploadArea Test" />
+        </div>
+    )
+}
+
+const UploadProgressTest = (prop) => {
+
+    const files = [
+        { icon: "image", fileName: "fileName1", uploadState: UPLOAD_STATES.RUNNING, progress: () => { return 50 } },
+        { icon: "image", fileName: "fileName4", uploadState: UPLOAD_STATES.SUCCESS, progress: () => { return 70 } },
+        { icon: "description", fileName: "fileName2", uploadState: UPLOAD_STATES.ERROR, progress: () => { return 70 }, uploadError: "Unknow error" },
+    ]
+
+    return (
+        <UploadProgress files={files} />
+    )
+}
+
+const UploaderTest = (prop) => {
+
+    return (
+        <div style={{ padding: "1rem" }}>
+            <Uploader target="https://maso.developxp.com/kiosk/api/upload" />
+        </div>
+    )
+}

package/src/widgets/upload/UploadArea.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Icon } from '../../html'
+
+/**
+ * Upload Area
+ */
+export const UploadArea = (props) => {
+
+    const { icon, label = 'Add file or drop file here...' } = props
+    const areaElement = useRef()
+    const [drag, setDrag] = useState(false)
+
+    useEffect(() => {
+        const { resumable } = props
+        if (resumable && areaElement) resumable.assignDrop(areaElement.current)
+    }, [])
+
+    const onDragOver = () => {
+        setDrag(true)
+    }
+
+    const onDragLeave = () => {
+        setDrag(false)
+    }
+
+    const dragging = drag === true ? 'drag-over' : ''
+
+    return (
+        <div className={`upload-area6 ${dragging}`}
+            onDragOver={onDragOver}
+            onDragLeave={onDragLeave}
+            ref={areaElement}
+        >
+            <UploadIcon icon={icon} resumable={props.resumable} />
+            <label>{label}</label>
+        </div>
+    )
+}
+
+/**
+ * Upload Icon
+ */
+const UploadIcon = ({ icon = "folder_open", resumable }) => {
+
+    const iconElement = useRef()
+
+    useEffect(() => {
+        if (resumable && iconElement) resumable.assignBrowse(iconElement.current)
+    }, [])
+
+    return (
+        <div className="upload-icon" ref={iconElement}>
+            <Icon icon={icon} clickable/>
+        </div>
+    )
+}

package/src/widgets/upload/UploadDialog.js

@@ -0,0 +1,41 @@
+import React, { Fragment, useContext, useState } from 'react';
+import { Uploader } from './Uploader'
+import { Button, Text } from '../html';
+import { SiteContext, Dialog } from '../site';
+import { UploadFile } from './UploadFile';
+
+/**
+ * Upload Dialog
+ */
+export const UploadDialog = ({ label, target, accept, onSuccess, onOK, onError, onClose, onActionClose = true }) => {
+
+    const site = useContext(SiteContext);
+    const [file, setFile] = useState();
+    const [errors, setErrors] = useState([])
+
+    function onComplete(uploads) {
+        setFile(uploads[0]);
+        if (onSuccess) onSuccess(uploads[0])
+    }
+
+    function onAction(action) {
+        if (action === 'CLOSE' || onActionClose === true) {
+            site.closeDialog();
+            onClose()
+        }
+    }
+
+    const actions = (
+        <Fragment>
+            <Button label="CLOSE" action={() => onAction("CLOSE")} />
+        </Fragment>
+    )
+
+    const title = <Text use="headline6">{label}</Text>
+    return (
+        <Dialog title={title} open={true} onAction={onAction} actions={actions}>
+            {file ? <UploadFile file={file} /> : <Uploader label={label} accept={accept} target={target} onComplete={onComplete} />}
+            {errors.map(error => <Text use="overline" tag="div" className="error">{error}</Text>)}
+        </Dialog>
+    )
+}

package/src/widgets/upload/UploadFile.js

@@ -0,0 +1,24 @@
+import React, { Fragment } from 'react'
+import { Icon, Text, LinearProgress } from '../../html'
+import { UPLOAD_STATES } from './Uploader'
+import './Uploader.css'
+
+/**
+ * Upload File
+ */
+export const UploadFile = ({ file }) => {
+
+    const { icon, name, state, progress, error } = file
+
+    return (
+        <Fragment>
+            <div className="upload-file">
+                { icon ? <Icon icon={icon} /> : null }
+                <label>{name}</label>
+                {state === UPLOAD_STATES.RUNNING ? <main><LinearProgress progress={progress} /><Icon icon="close" clickable /></main> : ''}
+                {state === UPLOAD_STATES.SUCCESS ? <main><Icon icon="done" /></main> : ''}
+                {state === UPLOAD_STATES.ERROR ? <main><div className="error">{error}</div><Icon icon="error" /></main> : ''}
+            </div>
+        </Fragment>
+    )
+}

package/src/widgets/upload/UploadProgress.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { UPLOAD_STATES } from './Uploader';
+import { UploadFile } from './UploadFile';
+
+export const UploadProgress = ({ files = [], state }) => {
+
+    return (
+        <div>
+            {files.map((file) => {
+                const f = { 
+                    icon: "image",
+                    name: file.fileName,
+                    progress: file.progress() * 100,
+                    state: file.uploadState,
+                    error: file.uploadError
+                }
+                return <UploadFile key={f.name} file={f} />;
+            })}
+        </div>
+    );
+};

package/src/widgets/upload/Uploader.css

@@ -0,0 +1,77 @@
+.uploader {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.demo-uploader {
+  width: 40rem;
+  height: 30rem;
+  margin: 5rem auto;
+  flex-direction: column;
+}
+
+/***************** Upload Area ***********************/
+
+.upload-area6 {
+  flex: 1;
+  margin: 0 0 1rem 0;
+  border: dashed 2px var(--divider-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 1rem;
+  min-height: 10rem;
+}
+
+.upload-area6 > label {
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+
+.upload-area6.drag-over {
+  background-color: rgba(200, 200, 200, 0.1);
+}
+
+/***************** Upload File ***********************/
+
+.upload-file {
+  display: flex;
+  align-items: center;
+}
+
+.upload-file > label {
+  min-width: 30%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 1rem;
+}
+
+.upload-file > main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.upload-file .error {
+  color: red;
+  text-align: center;
+}
+
+.upload-file progress {
+  appearance: none;
+  border: solid 1px var(--divider-color);
+}
+
+.upload-file ::-webkit-progress-bar {
+  border: solid 1px rgb(235, 235, 235);
+  background-color: rgb(241, 241, 241);
+}
+
+.upload-file ::-webkit-progress-value {
+  background-color: rgb(182, 182, 182);
+  opacity: 1;
+}

package/src/widgets/upload/Uploader.js

@@ -0,0 +1,73 @@
+import React, { useState, useMemo } from 'react'
+import ResumableJS from 'resumablejs'
+import { UploadArea } from "./UploadArea";
+import { UploadProgress } from './UploadProgress';
+import './Uploader.css'
+
+export const UPLOAD_STATES = {
+    IDLE: 0, RUNNING: 1, SUCCESS: 2, ERROR: 3, COMPLETED: 4 
+}
+
+/**
+ * Uploader
+ */
+export const Uploader = ({ label, target, accept, simultaneousUploads = 1, className, onProgress, onSuccess, onError, onComplete }) => {
+
+        const resumable = useMemo(() => {
+            const config = {
+                target: target,
+                chunkSize: 1 * 1024 * 1024,
+                simultaneousUploads,
+                testChunks: false,
+                throttleProgressCallbacks: 1,
+                fileType: accept
+            }
+            const resumable = new ResumableJS(config)
+            resumable.on('fileAdded', onFileAdded)
+            resumable.on('fileProgress', onFileProgress)
+            resumable.on('fileSuccess', onFileSuccess)
+            resumable.on('fileError', onFileError)
+            resumable.on('complete', onAllComplete)
+            return resumable
+        }, [])
+
+        const [progress, setProgress] = useState(0)
+        const [state, setState] = useState(UPLOAD_STATES.IDLE)
+        const [files, setFiles] = useState([])
+
+        function onFileAdded(file) {
+            files.push(file)
+            setFiles(files)
+            setState(UPLOAD_STATES.RUNNING)
+            resumable.upload()
+        }
+
+        function onFileProgress(file) {
+            file.uploadState = UPLOAD_STATES.RUNNING
+            const progress = file.progress()
+            setProgress(progress)
+            if (onProgress) onProgress(files);
+        }
+
+        function onFileSuccess(file, message) {
+            file.uploadState = UPLOAD_STATES.SUCCESS
+            if (onSuccess) onSuccess(file, message)
+        }
+
+        function onFileError(file, message) {
+            file.uploadState = UPLOAD_STATES.ERROR
+            file.uploadError = message
+            if (onError) onError(file, message)
+        }
+
+        function onAllComplete() {
+            setState(UPLOAD_STATES.COMPLETED)
+            if (onComplete) onComplete(files)
+        }
+
+        return (
+            <div className={`uploader ${className}`}>
+                {state === UPLOAD_STATES.IDLE ? <UploadArea resumable={resumable} label={label}  /> : <UploadProgress files={files} state={state} /> }
+            </div>
+        )
+    }

package/src/widgets/upload/index.js

@@ -0,0 +1,4 @@
+export * from './Uploader'
+export * from './UploadDialog'
+export * from './UploadArea'
+export * from './UploadFile'