ywana-core8 0.0.880 → 0.0.882

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.880",
+  "version": "0.0.882",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/button.js

@@ -20,10 +20,8 @@ export const Button = ({ label, icon, action, disabled = false, outlined, raised
     if (disabled) style = `${style} disabled`
     return (
         <button className={`btn ${style} ${className}`} onClick={click}>
-            {icon ? <Icon icon={icon} size="small" clickable action={click} /> : null}
-            <span>
-                <Text>{label}</Text>
-            </span>
+            { icon ? <Icon icon={icon} size="small" clickable action={click} /> : null }
+            <Text>{ label }</Text>
         </button>
     )
 }

package/src/html/text.js

@@ -8,13 +8,14 @@ export const TEXTFORMATS = {
   TIME: 'time',
   EMAIL: 'email',
   HTML: 'HTML',
-  URL: 'URL'
+  URL: 'URL',
+  STRING: 'string',
 }
 
 /**
  * Text
  */
-export const Text = ({ format, children }) => {
+export const Text = ({ format = TEXTFORMATS.HTML, children, className }) => {
 
   const site = useContext(SiteContext)
   let value = children
@@ -23,14 +24,25 @@ export const Text = ({ format, children }) => {
     const { lang, dictionary = {} } = site
     const term = dictionary[children]
     const text = term ? term[lang] : children
-    if (text) value = text 
+    if (text) value = text
   }
-  
+
   const formatter = Intl.NumberFormat()
   switch (format) {
     case TEXTFORMATS.NUMERIC: value = formatter.format(children); break;
   }
 
-  return children ? value : ''
+  switch (format) {
+    case TEXTFORMATS.DATE: value = new Date(children).toLocaleDateString(); break;
+    case TEXTFORMATS.TIME: value = new Date(children).toLocaleTimeString(); break;
+  }
+
+  if (!children) return ''
+
+  switch (format) {
+    case TEXTFORMATS.STRING: return value
+    default: return <span className={className}>{value}</span>
+  }
+
+}
 
-}

package/src/html/text.test.js

@@ -9,6 +9,7 @@ const TextTest = (prop) => {
         <>
            <Text format={TEXTFORMATS.NUMERIC}>846964.4199142859</Text>
            <Text format={TEXTFORMATS.NUMERIC}>{"345356345.345"}</Text>
+           <Text format={TEXTFORMATS.STRING}>Lorem Ipsum dolro sit amet....</Text>
         </>
     )
 }

package/src/html/textfield.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react'
 import { SiteContext } from '../site/siteContext'
 import { Icon } from './icon'
-import { Text } from './text'
+import { TEXTFORMATS, Text } from './text'
 import './textfield-outlined.css'
 import './textfield.css'
 import './textarea.css'
@@ -45,7 +45,7 @@ export const TextField = (props) => {
     const labelPositionStyle = labelPosition == 'left' ? "label-left" : "label-top"
     const style = `${labelStyle} ${labelPositionStyle} ${borderStyle} textfield-${type}`
     const labelTxt = <Text>{label}</Text>
-    const placeholderTxt = placeholder ? <Text>{placeholder}</Text> : null
+    const placeholderTxt = site.translate ? site.translate(placeholder) : placeholder
 
     return (
         <div className={`${style} ${id}`} onClick={onClick}>
@@ -98,7 +98,8 @@ export const TextArea = (props) => {
     const labelStyle = label ? "" : "no-label"
     const style = `textarea ${labelStyle} textarea-${type}`
     const labelTxt = <Text>{label}</Text>
-    const placeholderTxt = <Text>{placeholder}</Text>
+
+    const placeholderTxt = site.translate ? site.translate(placeholder) : placeholder
 
     return (
         <div className={`${style}`} onClick={onClick}>

package/src/html/textfield.test.js

@@ -43,7 +43,7 @@ const TextFieldTest = (prop) => {
             <TokenField id="token2" label="Tokens DropDown" onChange={change} options={options} tokens={form.token2}/>
             <br/>
             <br/>
-            <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
+            <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} placeholder="loremitsum"/>
             <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
             <DateRange id="range1" value={form.range1} onChange={change}/>
         </>

package/src/site/site.js

@@ -34,6 +34,12 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
 
         dictionary,
         setDictionary,
+        translate: (key) => {
+            if (!key) return key
+            if (dictionary === undefined) return key
+            const term = dictionary[key]
+            return term ? term[lang] : key
+        },
         
         sideNav,
         setSideNav,