ywana-core8 0.0.925 → 0.0.927

package/package.json

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

package/src/domain2/DynamicForm.js

@@ -50,14 +50,16 @@ const DynamicFormField = (props) => {
     function renderByFormat() {
 
         const label = required ? `${field.label} *` : field.label
+        const readOnly = field.readOnly || field.editable === false
+        const { position = "bottom" } = field
 
         switch (format) {
             case FORMATS.TEXT:
-                return <TextArea id={id} label={label} value={value} onChange={change} outlined />
+                return <TextArea id={id} label={label} value={value} onChange={change} outlined readOnly={readOnly}/>
             case FORMATS.DATE:
-                return <TextField id={id} label={label} type="date" value={value} onChange={change} outlined />
+                return <TextField id={id} label={label} type="date" value={value} onChange={change} outlined readOnly={readOnly}/>
             case FORMATS.TIME:
-                return <TextField id={id} label={label} type="time" value={value} onChange={change} outlined />
+                return <TextField id={id} label={label} type="time" value={value} onChange={change} outlined readOnly={readOnly}/>
             case FORMATS.DATERANGE:
                 return <DateRange id={id} label={label} value={value} onChange={change} />
             case FORMATS.TOKENS:
@@ -65,8 +67,8 @@ const DynamicFormField = (props) => {
             case FORMATS.COLOR:
                 return <ColorField id={id} onChange={change} value={value} />
             default:
-                return options ? <DropDown id={id} label={label} value={value} onChange={change} options={buildOptions()} outlined/> :
-                    <TextField id={id} label={label} value={value} onChange={change} outlined />
+                return options ? <DropDown id={id} label={label} value={value} onChange={change} options={buildOptions()} outlined readOnly={readOnly} position={position}/> :
+                    <TextField id={id} label={label} value={value} onChange={change} outlined readOnly={readOnly} />
         }
     }
 
@@ -79,9 +81,8 @@ const DynamicFormField = (props) => {
         }
     }
 
-    const className = `dynamic-form-field ${id}`
     return (
-        <div className={className}>
+        <div className="dynamic-form-field">
             {renderByType()}
         </div>
     )

package/src/domain2/DynamicForm.test.js

@@ -16,10 +16,10 @@ const DynamicFormTest = (props) => {
     }
 
     const schema = [
-        { id: "id", type: "string", label: "ID" },
+        { id: "id", type: "string", label: "ID", editable: false },
         { id: "name", type: "string", label: "Name", filter: true, like: true },
         {
-            id: "gender", type: "string", label: "Gender", filter: true, options: [
+            id: "gender", type: "string", label: "Gender", filter: true, editable: true, options: [
                 { label: "Masculine", value: 1 },
                 { label: "Feminine", value: 0 }
             ]

package/src/html/switch.js

@@ -37,4 +37,10 @@ export const Switch2 = (props) => {
             <Icon icon={icon} clickable action={toggle} />
         </div>
     )
-}
+}
+
+const Switch2Test = () => {
+    return (
+        <Switch2 checked={true} onChange={console.log} />
+    )
+}

package/src/html/textfield.css

@@ -177,6 +177,11 @@ input:read-only ~ label,
   overflow: auto;
 }
 
+.dropdown>menu.top {
+  top: auto;
+  bottom: 3.8rem;
+}
+
 .dropdown>menu ul {
   list-style: none;
   margin: 0;

package/src/html/textfield.js

@@ -118,7 +118,7 @@ export const TextArea = (props) => {
 export const DropDown = (props) => {
 
     const site = useContext(SiteContext)
-    const { id, options = [], value, onChange, predictive = false, readOnly = false, verbose = true, editable = false, onBlur } = props
+    const { id, options = [], value, onChange, predictive = false, readOnly = false, verbose = true, editable = false, onBlur, position="bottom"} = props
     const [open, setOpen] = useState(false)
     const [label, setLabel] = useState()
 
@@ -185,7 +185,7 @@ export const DropDown = (props) => {
                     <Text>{option.label}</Text>
                 </li>
             ))
-            return <menu><ul>{lis}</ul></menu>
+            return <menu className={position}><ul>{lis}</ul></menu>
         } else {
             return null
         }

package/src/html/textfield.test.js

@@ -36,7 +36,7 @@ const TextFieldTest = (prop) => {
             <br/>
             <DropDown id="b1" label="Boolean1" labelPosition="left" onChange={change} options={options2} value={form.b1} />
             <br/>
-            <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={false}/>
+            <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={false} position="top"/>
             <DropDown id="gender2" label="Dropdown 2" value={form.gender2} onChange={change} options={options} predictive={true}/>
             <DropDown id="gender3" label="Dropdown 3" value={form.gender3} onChange={change} options={options} predictive={false} editable={true}/>
             <TokenField id="token1" label="Tokens" onChange={change} />