ywana-core8 0.0.272 → 0.0.275

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.272",
+  "version": "0.0.275",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/html/tooltip-test.js

@@ -0,0 +1,13 @@
+import React, { useState } from 'react'
+import { Tooltip } from './tooltip'
+
+const TooltipTest = (prop) => {
+
+    return (
+        <>
+           <Tooltip text="role1" top="2rem" >
+               John Smith
+           </Tooltip>
+        </>
+    )
+}

package/src/html/tooltip.css

@@ -1,3 +1,18 @@
 .tooltip {
-    
+    position: relative;
+    cursor: pointer;
+}
+
+.tooltip-text {
+    display: none;
+}
+
+.tooltip:hover .tooltip-text {
+    display: block;
+    position: absolute;
+    border: solid 1px var(--divider-color);
+    background-color: var(--text-color-light);
+    color: var(--paper-color);
+    padding: .5rem;
+    border-radius: 4px;
 }

package/src/html/tooltip.js

@@ -6,12 +6,15 @@ import './tooltip.css'
  */
 export const Tooltip = (props) => {
 
-    const { text = "..." } = props
+    const { text = "...", top = "1rem", left = "1rem" } = props
+
+    const style = { top, left }
 
     return (
-        <ReactTooltip id="filters" effect="solid" className="tooltip">
-            <Text use="body2">{text}</Text>
-        </ReactTooltip>
+        <div className="tooltip" >
+            <span className="tooltip-text" style={style}>{text}</span>
+            {props.children}
+        </div>
     )
 
 } 

package/src/index.js

@@ -6,6 +6,5 @@ export * from './html'
 export * from './widgets'
 export * from './site'
 export * from './domain'
-export * from './upload'
 
 export const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);

package/src/widgets/index.js

@@ -4,4 +4,5 @@ export * from './viewer/Viewer'
 export * from './kanban/Kanban'
 export * from './avatar/avatar'
 export * from './waiter'
-export * from './planner/Planner'
+export * from './planner/Planner'
+export * from './upload'

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

@@ -1,10 +1,10 @@
 import React from 'react'
 import { UploadArea } from './UploadArea'
+import { UploadDialog } from './UploadDialog'
 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" />
@@ -13,23 +13,20 @@ const UploadAreaTest = (props) => {
 }
 
 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/UploadDialog.js

@@ -1,25 +1,21 @@
 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';
+import { Button, Text } from '../../html';
+import { SiteContext, Dialog } from '../../site';
 
 /**
  * Upload Dialog
  */
-export const UploadDialog = ({ label, target, accept, onSuccess, onOK, onError, onClose, onActionClose = true }) => {
+export const UploadDialog = ({ label, target, accept, onSuccess, onClose }) => {
 
     const site = useContext(SiteContext);
-    const [file, setFile] = useState();
-    const [errors, setErrors] = useState([])
 
     function onComplete(uploads) {
-        setFile(uploads[0]);
-        if (onSuccess) onSuccess(uploads[0])
+        if (onSuccess) onSuccess(uploads)
     }
 
     function onAction(action) {
-        if (action === 'CLOSE' || onActionClose === true) {
+        if (action === 'CLOSE') {
             site.closeDialog();
             onClose()
         }
@@ -34,8 +30,7 @@ export const UploadDialog = ({ label, target, accept, onSuccess, onOK, onError,
     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>)}
+            <Uploader label={label} accept={accept} target={target} onComplete={onComplete} />
         </Dialog>
     )
 }

package/src/widgets/upload/UploadFile.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
-import { Icon, Text, LinearProgress } from '../../html'
-import { UPLOAD_STATES } from './Uploader'
+import { Icon, LinearProgress } from '../../html'
+import { UPLOAD_STATES } from './UploadStates'
 import './Uploader.css'
 
 /**

package/src/widgets/upload/UploadProgress.js

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

package/src/widgets/upload/UploadStates.js

@@ -0,0 +1,4 @@
+
+export const UPLOAD_STATES = {
+    IDLE: 0, RUNNING: 1, SUCCESS: 2, ERROR: 3, COMPLETED: 4 
+}

package/src/widgets/upload/Uploader.js

@@ -3,10 +3,8 @@ import ResumableJS from 'resumablejs'
 import { UploadArea } from "./UploadArea";
 import { UploadProgress } from './UploadProgress';
 import './Uploader.css'
+import { UPLOAD_STATES } from './UploadStates';
 
-export const UPLOAD_STATES = {
-    IDLE: 0, RUNNING: 1, SUCCESS: 2, ERROR: 3, COMPLETED: 4 
-}
 
 /**
  * Uploader
@@ -67,7 +65,7 @@ export const Uploader = ({ label, target, accept, simultaneousUploads = 1, class
 
         return (
             <div className={`uploader ${className}`}>
-                {state === UPLOAD_STATES.IDLE ? <UploadArea resumable={resumable} label={label}  /> : <UploadProgress files={files} state={state} /> }
+                {state === UPLOAD_STATES.IDLE ? <UploadArea resumable={resumable} label={label}  /> : <UploadProgress files={files} /> }
             </div>
         )
     }

package/src/widgets/upload/index.js

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