ywana-core8 0.0.746 → 0.0.748

package/package.json

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

package/src/domain2/CollectionList.js

@@ -8,7 +8,7 @@ import './CollectionList.css'
  */
 export const CollectionList = (props) => {
 
-    const { itemRenderer, groupBy, searchBy = [], sortBy, sortDir } = props
+    const { itemRenderer, groupBy, groupRenderer, searchBy = [], sortBy, sortDir } = props
     const context = useContext(CollectionContext)
     const { all = [], selected, filters, customFilters } = context
     const [search, setSearch] = useState('')
@@ -51,7 +51,7 @@ export const CollectionList = (props) => {
 
     return (
         <div className={`collection-list ${style}`}>
-            <List items={items} onSelect={select} groupBy={groupBy} />
+            <List items={items} onSelect={select} groupBy={groupBy} groupRenderer={groupRenderer} />
             {searchBy.length > 0 ? (
                 <div className="search-box">
                     <Icon icon="search" size="small" />

package/src/domain2/CollectionPage.js

@@ -17,7 +17,7 @@ export const CollectionPage = (props) => {
         title, actions,
         canFilter, customFilters, filtersValue,
         sortBy, sortDir,
-        listGroupBy, listSearchBy, listItemRenderer,
+        listGroupBy, listSearchBy, listItemRenderer, listGroupRenderer,
         customEditor,
     } = props
     
@@ -28,7 +28,7 @@ export const CollectionPage = (props) => {
                     {actions}
                 </Header>
                 {canFilter ? <CollectionFilters schema={schema} >{customFilters}</CollectionFilters> : null}
-                <CollectionList itemRenderer={listItemRenderer} groupBy={listGroupBy} searchBy={listSearchBy} sortBy={sortBy} sortDir={sortDir} />
+                <CollectionList itemRenderer={listItemRenderer} groupBy={listGroupBy} groupRenderer={listGroupRenderer} searchBy={listSearchBy} sortBy={sortBy} sortDir={sortDir} />
                 <CollectionEditor customEditor={customEditor} />
             </CollectionContextProvider>
         </div>

package/src/html/list.js

@@ -8,7 +8,7 @@ import "./list.css"
  */
 export const List = (props) => {
 
-    const { items = [], children, selected, onSelect, groupBy } = props
+    const { items = [], children, selected, onSelect, groupBy, groupRenderer } = props
 
     function select(id) {
         if (onSelect) onSelect(id)
@@ -28,7 +28,7 @@ export const List = (props) => {
  * Grouped List
  */
 const GroupedList = (props) => {
-    const { items = [], children, selected, onSelect, groupBy } = props
+    const { items = [], children, selected, onSelect, groupBy, groupRenderer } = props
 
     const groups = items.reduce((groups, item) => {
         let group = groups.find(g => g.name === item[groupBy])
@@ -42,14 +42,17 @@ const GroupedList = (props) => {
 
     return (
         <div className="list grouped">
-            {groups.map(group => (
-                <Fragment key={group.name}>
-                    <header key={`${group.name}-header`}><Text>{group.name}</Text></header>
-                    <ul key={`${group.name}-ul`}>
-                        {group.items.map(item => <ListItem key={item.id} item={item} selected={selected} onSelect={onSelect} />)}
-                    </ul>
-                </Fragment>
-            ))}
+            {groups.map(group => {
+                const groupTitle = groupRenderer ? groupRenderer(group) : <Text>{group.name}</Text>
+                return (
+                    <Fragment key={group.name}>
+                        <header key={`${group.name}-header`}>{groupTitle}</header>
+                        <ul key={`${group.name}-ul`}>
+                            {group.items.map(item => <ListItem key={item.id} item={item} selected={selected} onSelect={onSelect} />)}
+                        </ul>
+                    </Fragment>
+                )
+            })}
             {children}
         </div>
     )

package/src/widgets/login/ResetPasswordBox.js

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { TextField, Text, Button } from '../../html'
 import './ResetPasswordBox.css'
 
 /**
  * Reset Password
  */
-export const ResetPasswordBox = ({ logo, title, children, onOK, onClose }) => {
+export const ResetPasswordBox = ({ logo, title, userRequired = true, lang = "EN", children, onOK, onClose }) => {
 
-    const [form, setForm ] = useState({})
+    const [form, setForm] = useState({})
     const [error, setError] = useState()
 
     function canOK() {
@@ -15,17 +15,19 @@ export const ResetPasswordBox = ({ logo, title, children, onOK, onClose }) => {
     }
 
     function changeField(id, value) {
-        const next = Object.assign({}, form, {[id]: value})
+        const next = Object.assign({}, form, { [id]: value })
         setForm(next)
     }
 
     function ok() {
         if (onOK && canOK()) {
-            if (form.password1 === form.password2 ) {
+            if (form.password1 === form.password2) {
                 setError(null)
                 onOK(form)
             } else {
-                setError("New Password and Confirm New Password do not match")
+
+                const errorLabel = lang === "EN" ? "Passwords do not match" : "Las claves no coinciden"
+                setError(errorLabel)
             }
         }
     }
@@ -34,23 +36,30 @@ export const ResetPasswordBox = ({ logo, title, children, onOK, onClose }) => {
         if (onClose) onClose()
     }
 
+    const text = lang === "EN" ? "CHANGE PASSWORD" : "CAMBIO DE CLAVE"
+    const userLabel = lang === "EN" ? "User" : "Usuario"
+    const passwordLabel = lang === "EN" ? "New Password" : "Nueva Clave"
+    const password2Label = lang === "EN" ? "Confirm New Password" : "Confirmar Nueva Clave"
+    const okLabel = lang === "EN" ? "OK" : "Aceptar"
+    const cancelLabel = lang === "EN" ? "Cancel" : "Cancelar"
+
     return (
         <div className="reset-password-box">
             <header>
                 {logo ? <img src={logo} /> : null}
                 {title ? <div className="title"><Text>{title}</Text></div> : null}
-                { children }
+                {children}
             </header>
             <main>
-                <Text use="headline6">Change Password</Text>      
-                <TextField id="user"      outlined icon="person"               label="User"                 lapse={100} onChange={changeField} onEnter={ok}/>
-                <TextField id="password1" outlined icon="lock" type="password" label="New Password"         lapse={100} onChange={changeField} onEnter={ok}/>
-                <TextField id="password2" outlined icon="lock" type="password" label="Confirm New Password" lapse={100} onChange={changeField} onEnter={ok}/>
-                { error ? <div className="error">{error}</div> : null}
+                <Text use="headline6">{text}</Text>
+                {userRequired ? <TextField id="user" outlined icon="person" label={userLabel} lapse={100} onChange={changeField} onEnter={ok} /> : null}
+                <TextField id="password1" outlined icon="lock" type="password" label={passwordLabel} lapse={100} onChange={changeField} onEnter={ok} />
+                <TextField id="password2" outlined icon="lock" type="password" label={password2Label} lapse={100} onChange={changeField} onEnter={ok} />
+                {error ? <div className="error">{error}</div> : null}
             </main>
             <footer>
-                <Button label="Close" action={close}/>
-                <Button label="OK" raised disabled={!canOK()} action={ok}/>
+                <Button label={cancelLabel} action={close} />
+                <Button label={okLabel} raised disabled={!canOK()} action={ok} />
             </footer>
         </div>
     )