ywana-core8 0.0.227 → 0.0.231

package/package.json

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

package/src/domain/ContentType.js

@@ -16,6 +16,7 @@ export const TYPES = {
 export const FORMATS = {
     NONE: '',
     DATE: 'date',
+    TIME: 'time',
     EMAIL: 'email',
     HTML: 'HTML',
     URL: 'URL'

package/src/html/index.js

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

package/src/html/table.js

@@ -203,8 +203,18 @@ const BooleanCellViewer = ({ id, value = false }) => {
 const StringCellViewer = ({ id, value, format, options }) => {
     const option = options ? options.find(o => o.value === value) : null
     let text = option ? option.label : value
+    const  locale = window.navigator.userLanguage || window.navigator.language;
     switch (format) {
-        case FORMATS.DATE: text = new Date(text).toLocaleString(); break;
+        case FORMATS.DATE: text = new Date(text).toLocaleString( locale, {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric'
+          }); break;
+        case FORMATS.TIME: text = new Date(text).toLocaleString( locale, {
+            year: 'hour',
+            month: 'minute',
+            day: 'second'
+          }); break;
     }
     return (<div className="field-editor string-viewer">{text}</div>)
 }

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/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>
+    )
+}