ywana-core8 0.0.927 → 0.0.929

package/package.json

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

package/src/domain2/DynamicForm.css

@@ -11,4 +11,9 @@
 .dynamic-form-field {
     width: 100%;
     height: 100%;
+}
+
+.dynamic-form-field.readonly input {
+    background-color: var(--paper-color);
+    border: solid 0px var(--divider-color) !important;
 }

package/src/domain2/DynamicForm.js

@@ -34,7 +34,8 @@ export const DynamicForm = (props) => {
 const DynamicFormField = (props) => {
 
     const { field, value, onChange } = props
-    const { id, type, format, options, required } = field
+    const { id, type, format, options, required, editable = true } = field
+    const readOnly = field.readOnly || editable === false
 
     function change(id, value) {
         if (onChange) onChange(id, value)
@@ -50,16 +51,15 @@ 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 readOnly={readOnly}/>
+                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 readOnly={readOnly}/>
+                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 readOnly={readOnly}/>
+                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:
@@ -67,7 +67,7 @@ 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 readOnly={readOnly} position={position}/> :
+                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} />
         }
     }
@@ -81,8 +81,9 @@ const DynamicFormField = (props) => {
         }
     }
 
+    const className = `dynamic-form-field ${readOnly ? "readonly" : ""}`
     return (
-        <div className="dynamic-form-field">
+        <div className={className}>
             {renderByType()}
         </div>
     )