jrs-react 1.2.4 → 1.2.5

package/build/index.es.js

@@ -7086,7 +7086,7 @@ const StyledJRTable = styled.div`
 
             th{
                 position: relative;
-                height:32px;
+                height:24px;
                 padding: 4px;
                 background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
                 box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
@@ -7413,7 +7413,7 @@ class JRTable extends JRFrame {
 
 const StyleJRFields = styled.main`
     --column-bd-color:#cccccc;
-    --column-b-color:#eeeeee;
+    --column-b-color:unset;
     --column-b-hover-color:#ffffff;
 
     flex-direction: column;
@@ -7421,21 +7421,17 @@ const StyleJRFields = styled.main`
     overflow: overlay;
 
     color:#525252;
-    XXXborder: 1px solid #a0a0a0;
-    background: var(--column-b-color);
 
     >.jr-grid{
-        background:var(--column-b-color);
-
         .jr-column{
-            padding: 6px;
-
-            label{
+            > .label{
                 color:#525252;
                 text-wrap: nowrap;
-                padding: 4px 10px 4px 0;
+                padding: 3px 8px;
                 font-weight: bold;
             }
+            > .jr-column-value{
+            }
         }
     }
 `;
@@ -7523,8 +7519,9 @@ const StyledColumnLabel = styled.label`
 
 `;
 const StyledColumnValue = styled.main`
-    Xflex:1;
+    flex:1;
     Xdisplay:flex;
+    flex-direction: column;
     overflow: hidden;
 
     text-align: start;
@@ -7633,7 +7630,6 @@ class JRFields extends JRFrame {
       no += 1;
       const fullnameList = name ? [..._fullnameList, name] : _fullnameList;
       const fullname = fullnameList.join('.');
-      // po(`${no} - ${tab}fn= ${fullname}`)
       this.#findValidator(acc, fullname, column);
       if (type == null && columns) {
         this.#loopColumnsForValidateValue(no, fullnameList, columns, `${tab}\t`, result);
@@ -7725,17 +7721,12 @@ class JRFields extends JRFrame {
     required,
     ...column
   }, index, parentName, fullname) {
-    // po('----------------------------------------')
-    // po('parentName',parentName)
-    // po('fullname',fullname)
     const value = name ? parentValue?.[name] : parentValue;
     const gap = column.gap ?? this.props.gap;
     const label = column.label;
     const _style = flexType(style, this, {}, {});
     if (colSpan) _style.gridColumn = `span ${colSpan}`;
     if (rowSpan) _style.gridRow = `span ${rowSpan}`;
-    // Object.assign(_style,style)
-
     let content;
     this.createValidator({
       required,
@@ -7744,7 +7735,6 @@ class JRFields extends JRFrame {
     const fn = fullname.join('.');
     const onChange = inputValue => {
       const targetValue = inputValue?.target?.value ?? inputValue;
-      // po('===Form onChange===',targetValue)
       try {
         parentValue[name] = targetValue;
         this.setValue({
@@ -7832,12 +7822,13 @@ class JRFields extends JRFrame {
   }
   renderMe() {
     return /*#__PURE__*/React.createElement(StyleJRFields, {
-      className: 'jr-fields'
+      className: 'jr-fields',
+      style: this.props.typeStyle
     }, /*#__PURE__*/React.createElement(StyledGrid, {
       cols: this.props.cols,
       style: this.props.gridStyle,
       className: 'jr-grid',
-      $gap: this.props.gap
+      $gap: this.props.gap ?? '8px'
     }, this.createColumns(this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue(), this.props.columns, this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.dataSourceName ? [this.props.dataSourceName] : [])));
   }
 

package/build/index.js

@@ -7094,7 +7094,7 @@ const StyledJRTable = styled__default["default"].div`
 
             th{
                 position: relative;
-                height:32px;
+                height:24px;
                 padding: 4px;
                 background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
                 box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
@@ -7421,7 +7421,7 @@ class JRTable extends JRFrame {
 
 const StyleJRFields = styled__default["default"].main`
     --column-bd-color:#cccccc;
-    --column-b-color:#eeeeee;
+    --column-b-color:unset;
     --column-b-hover-color:#ffffff;
 
     flex-direction: column;
@@ -7429,21 +7429,17 @@ const StyleJRFields = styled__default["default"].main`
     overflow: overlay;
 
     color:#525252;
-    XXXborder: 1px solid #a0a0a0;
-    background: var(--column-b-color);
 
     >.jr-grid{
-        background:var(--column-b-color);
-
         .jr-column{
-            padding: 6px;
-
-            label{
+            > .label{
                 color:#525252;
                 text-wrap: nowrap;
-                padding: 4px 10px 4px 0;
+                padding: 3px 8px;
                 font-weight: bold;
             }
+            > .jr-column-value{
+            }
         }
     }
 `;
@@ -7531,8 +7527,9 @@ const StyledColumnLabel = styled__default["default"].label`
 
 `;
 const StyledColumnValue = styled__default["default"].main`
-    Xflex:1;
+    flex:1;
     Xdisplay:flex;
+    flex-direction: column;
     overflow: hidden;
 
     text-align: start;
@@ -7641,7 +7638,6 @@ class JRFields extends JRFrame {
       no += 1;
       const fullnameList = name ? [..._fullnameList, name] : _fullnameList;
       const fullname = fullnameList.join('.');
-      // po(`${no} - ${tab}fn= ${fullname}`)
       this.#findValidator(acc, fullname, column);
       if (type == null && columns) {
         this.#loopColumnsForValidateValue(no, fullnameList, columns, `${tab}\t`, result);
@@ -7733,17 +7729,12 @@ class JRFields extends JRFrame {
     required,
     ...column
   }, index, parentName, fullname) {
-    // po('----------------------------------------')
-    // po('parentName',parentName)
-    // po('fullname',fullname)
     const value = name ? parentValue?.[name] : parentValue;
     const gap = column.gap ?? this.props.gap;
     const label = column.label;
     const _style = flexType(style, this, {}, {});
     if (colSpan) _style.gridColumn = `span ${colSpan}`;
     if (rowSpan) _style.gridRow = `span ${rowSpan}`;
-    // Object.assign(_style,style)
-
     let content;
     this.createValidator({
       required,
@@ -7752,7 +7743,6 @@ class JRFields extends JRFrame {
     const fn = fullname.join('.');
     const onChange = inputValue => {
       const targetValue = inputValue?.target?.value ?? inputValue;
-      // po('===Form onChange===',targetValue)
       try {
         parentValue[name] = targetValue;
         this.setValue({
@@ -7840,12 +7830,13 @@ class JRFields extends JRFrame {
   }
   renderMe() {
     return /*#__PURE__*/React.createElement(StyleJRFields, {
-      className: 'jr-fields'
+      className: 'jr-fields',
+      style: this.props.typeStyle
     }, /*#__PURE__*/React.createElement(StyledGrid, {
       cols: this.props.cols,
       style: this.props.gridStyle,
       className: 'jr-grid',
-      $gap: this.props.gap
+      $gap: this.props.gap ?? '8px'
     }, this.createColumns(this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue(), this.props.columns, this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.dataSourceName ? [this.props.dataSourceName] : [])));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.4",
+	"version": "1.2.5",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",

package/public/data.json

@@ -0,0 +1,7 @@
+{
+    "name":"Joren"
+    ,"phone":[
+         {"no":"0948272834","name":"中華電信"}
+        ,{"no":"0987304555","name":"遠傳"}
+    ]
+}

package/public/list.json

@@ -0,0 +1,18 @@
+[
+    {
+        "name":"Joren"
+        ,"address":{
+            "no":"23"
+            ,"street":"Jalan Indah"
+            ,"country":"Malaysia"
+        }
+    }
+    ,{
+        "name":"John"
+        ,"address":{
+            "no":"36"
+            ,"street":"景興路"
+            ,"country":"台灣"
+        }
+    }
+]

package/src/components/JRFields/JRFields.jsx

@@ -80,8 +80,9 @@ const StyledColumnLabel=styled.label`
 
 `
 const StyledColumnValue=styled.main`
-    Xflex:1;
+    flex:1;
     Xdisplay:flex;
+    flex-direction: column;
     overflow: hidden;
 
     text-align: start;
@@ -186,7 +187,6 @@ export default class JRFields extends JRFrame {
             no+=1
             const fullnameList=name?[..._fullnameList,name]:_fullnameList
             const fullname=fullnameList.join('.')
-            // po(`${no} - ${tab}fn= ${fullname}`)
             this.#findValidator(acc,fullname,column)
             if(type==null&&columns){
                 this.#loopColumnsForValidateValue(no,fullnameList,columns,`${tab}\t`,result)
@@ -264,7 +264,8 @@ export default class JRFields extends JRFrame {
     createColumn(
         parentValue
         ,{
-            type,name,colSpan,rowSpan,style
+            type,name,colSpan,rowSpan
+            ,style
             ,typeStyle:_typeStyle
             ,required
             ,...column
@@ -273,9 +274,6 @@ export default class JRFields extends JRFrame {
         ,parentName
         ,fullname
     ){
-        // po('----------------------------------------')
-        // po('parentName',parentName)
-        // po('fullname',fullname)
         const value=name?parentValue?.[name]:parentValue
 
         const gap=column.gap??this.props.gap
@@ -283,7 +281,6 @@ export default class JRFields extends JRFrame {
         const _style=flexType(style,this,{},{})
         if (colSpan) _style.gridColumn = `span ${colSpan}`
         if (rowSpan) _style.gridRow = `span ${rowSpan}`
-        // Object.assign(_style,style)
 
 
         let content
@@ -293,7 +290,6 @@ export default class JRFields extends JRFrame {
         const fn=fullname.join('.')
         const onChange=(inputValue)=>{
             const targetValue=inputValue?.target?.value ?? inputValue
-            // po('===Form onChange===',targetValue)
             try{
                 parentValue[name]=targetValue
                 this.setValue({...this.getValue()})
@@ -403,8 +399,8 @@ export default class JRFields extends JRFrame {
 
 
     renderMe(){
-        return <StyleJRFields className={'jr-fields'}>
-            <StyledGrid cols={this.props.cols} style={this.props.gridStyle} className={'jr-grid'} $gap={this.props.gap}>
+        return <StyleJRFields className={'jr-fields'} style={this.props.typeStyle}>
+            <StyledGrid cols={this.props.cols} style={this.props.gridStyle} className={'jr-grid'} $gap={this.props.gap??'8px'}>
                 {
                     this.createColumns(
                         this.props.dataSourceName?this.getValue()?.[this.props.dataSourceName]:this.getValue()

package/src/components/JRFields/StyleJRFields.jsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const StyleJRFields=styled.main`
     --column-bd-color:#cccccc;
-    --column-b-color:#eeeeee;
+    --column-b-color:unset;
     --column-b-hover-color:#ffffff;
 
     flex-direction: column;
@@ -10,21 +10,17 @@ export const StyleJRFields=styled.main`
     overflow: overlay;
 
     color:#525252;
-    XXXborder: 1px solid #a0a0a0;
-    background: var(--column-b-color);
 
     >.jr-grid{
-        background:var(--column-b-color);
-
         .jr-column{
-            padding: 6px;
-
-            label{
+            > .label{
                 color:#525252;
                 text-wrap: nowrap;
-                padding: 4px 10px 4px 0;
+                padding: 3px 8px;
                 font-weight: bold;
             }
+            > .jr-column-value{
+            }
         }
     }
 `

package/src/components/JRInput/JRInput.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import styled from "styled-components";
+
+
+
+const StyledInput=styled.div`
+    display:flex;
+`
+export default class JRInput extends React.Component{
+    setValue(value){
+        this.props?.onChange?.(value)
+    }
+    render(){
+        return <StyledInput>
+            {this.input()}
+        </StyledInput>
+    }
+}

package/src/components/JRInput/JRText.jsx

@@ -1,7 +1,17 @@
 import React from "react";
+import { po } from "../JRUtils";
+import JRInput from "./JRInput";
 
-export default class JRText extends React.Component{
-    render(){
-        return <input value={this.props.value}/>
+export default class JRText extends JRInput{
+    input(){
+        return <input value={this.props.value}
+            style={{
+                height: '24px'
+                ,width: '100%'
+            }}
+            onChange={(e)=>{
+                this.setValue(e.target.value)
+            }}
+        />
     }
 }

package/src/components/JRTable/StyledJRTable.jsx

@@ -44,7 +44,7 @@ export const StyledJRTable=styled.div`
 
             th{
                 position: relative;
-                height:32px;
+                height:24px;
                 padding: 4px;
                 background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
                 box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;