ywana-core8 0.0.226 → 0.0.230

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.226",
+  "version": "0.0.230",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",
@@ -35,6 +35,7 @@
     "react-error-overlay": "^6.0.10",
     "react-notifications": "^1.7.3",
     "react-switch": "^6.0.0",
+    "react-tooltip": "^4.2.21",
     "resumablejs": "^1.1.0"
   }
 }

package/src/html/index.js

@@ -16,4 +16,6 @@ export { Text } from './text'
 export { TextField, DropDown } from './textfield'
 export { TokenField } from './tokenfield'
 export { Tree, TreeNode, TreeItem } from './tree'
-export { Switch } from './switch'
+export { Switch } from './switch'
+export { Tooltip } from './tooltip'
+export { Thumbnail } from './thumbnail'

package/src/html/thumbnail.css

@@ -0,0 +1,16 @@
+.thumbnail {
+    width: 100%;
+    min-width: 3rem;
+    max-width: 6rem;
+
+    height: 100%;
+    min-height: 3rem;
+    max-height: 6rem;
+    
+    overflow: hidden;
+}
+
+.thumbnail>img {
+    width: 100%;
+    height: 100%;
+}

package/src/html/thumbnail.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import './thumbnail.css'
+
+/**
+ * Thumbnail
+ */
+export const Thumbnail = (props) => {
+
+    const {
+        src = "https://www.w3schools.com/howto/img_forest.jpg",
+        empty = "",
+        objectFit = "cover"
+    } = props
+
+    const image = src ? src : empty
+    const style = { objectFit }
+    return (
+        <div className="thumbnail" >
+            <img src={image} style={style} />
+        </div>
+    )
+}

package/src/html/tooltip.css

@@ -0,0 +1,3 @@
+.tooltip {
+    
+}

package/src/html/tooltip.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './tooltip.css'
+
+/**
+ * Tooltip
+ */
+export const Tooltip = (props) => {
+
+    const { text = "..." } = props
+
+    return (
+        <ReactTooltip id="filters" effect="solid" className="tooltip">
+            <Text use="body2">{text}</Text>
+        </ReactTooltip>
+    )
+
+} 

package/src/widgets/index.js

@@ -2,4 +2,5 @@ export * from './login/LoginBox'
 export * from './login/ResetPasswordBox'
 export * from './viewer/Viewer'
 export * from './kanban/Kanban'
-export * from './avatar/avatar'
+export * from './avatar/avatar'
+export * from './waiter'

package/src/widgets/waiter/index.js

@@ -0,0 +1 @@
+export * from './waiter'

package/src/widgets/waiter/waiter.css

@@ -0,0 +1,11 @@
+.wait-screen {
+    position:absolute;
+    top:0px;
+    left:0px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(200,200,200,.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

package/src/widgets/waiter/waiter.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { CircularProgress } from '../../html'
+import './waiter.css'
+
+export const WaitScreen = () => {
+    return (
+        <div className="wait-screen">
+            <CircularProgress size="large"/>
+        </div>
+    )
+}