jrs-react 1.2.17 → 1.2.18

package/build/index.es.js

@@ -5332,6 +5332,7 @@ styled.div`
 `;
 const StyledGrid = styled.div`
     display: grid;
+    gap:10px;
     grid: ${({
   grid,
   cols,
@@ -5348,6 +5349,7 @@ const StyledColumn = styled.div`
     flex:1;
     display: grid;
 
+
     ${({
   $layout,
   $labelWidth,
@@ -5362,6 +5364,7 @@ const StyledColumn = styled.div`
 }}
 `;
 const StyledColumnLabel = styled.div`
+    min-height:24px;
     ${({
   $layout
 }) => {
@@ -5369,7 +5372,7 @@ const StyledColumnLabel = styled.div`
     return `text-align: start;`;
   } else {
     return `text-align: end;
-                padding: 3px 8px;
+                padding-right:10px;
             `;
   }
 }}
@@ -5403,7 +5406,6 @@ const StyledColumnValue = styled.main`
     flex:1;
     flex-direction: column;
     overflow: hidden;
-    padding: 4px 0;
 
     text-align: start;
     ${({
@@ -5703,7 +5705,7 @@ class JRFields extends JRWindow {
   }
   renderMe() {
     return /*#__PURE__*/React__default.createElement(StyleJRFields, {
-      className: 'jr-fields',
+      className: `jr-fields`,
       style: this.props.typeStyle
     }, /*#__PURE__*/React__default.createElement(StyledGrid, {
       cols: this.props.cols,
@@ -6092,7 +6094,7 @@ function JRAlert(props) {
   })));
 }
 
-const StyledInput = styled.div`
+const StyledInput$1 = styled.div`
     display:flex;
     input:focus{
         outline: none; 
@@ -6103,7 +6105,7 @@ class JRInput extends React__default.Component {
     this.props?.onChange?.(value);
   }
   render() {
-    return /*#__PURE__*/React__default.createElement(StyledInput, null, this.input());
+    return /*#__PURE__*/React__default.createElement(StyledInput$1, null, this.input());
   }
 }
 
@@ -6138,12 +6140,14 @@ const StyledSelect = styled.select`
     ${({
   size,
   multiple
-}) => `${size == 1 || size == undefined && multiple != true ? 'height:30px;' : ''}`}
+}) => `${size == 1 || size == undefined && multiple != true ? 'height:24px;' : ''}`}
     width: 100%;
-
+    min-height: 24px;
+    
     option{
         padding: 4px;
-        height: 25px;
+        height: 24px;
+        min-height: 24px;
         display: flex;
         align-items: center;
     }
@@ -6152,8 +6156,8 @@ class JRSelect extends JROptions {
   renderer() {
     const {
       showBlank,
-      valueName = 'id',
-      labelName = 'name',
+      valueName = 'value',
+      labelName = 'label',
       multiple,
       size
     } = this.props;
@@ -6162,7 +6166,7 @@ class JRSelect extends JROptions {
       [valueName]: '',
       [labelName]: ''
     });
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledSelect, {
+    return /*#__PURE__*/React__default.createElement(StyledSelect, {
       value: this.getValue() ?? (multiple ? [] : ''),
       className: 'jr-select',
       onChange: e => {
@@ -6185,7 +6189,7 @@ class JRSelect extends JROptions {
         props.className = 'selected';
       }
       return /*#__PURE__*/React__default.createElement(StyledOption, props, record[labelName]);
-    })));
+    }));
   }
 }
 
@@ -6193,7 +6197,7 @@ const StyledPick = styled.div`
     >label{
         white-space: nowrap;
         display: inline-flex;
-        align-items: center;
+        align-items: baseline;
         height: 30px;
         padding-right: 12px;
     }
@@ -6270,14 +6274,14 @@ class JRCheckbox extends JROptions {
   }
 }
 
+const StyledInput = styled.input`
+    min-height: 24px;
+    width: 100%;
+`;
 class JRText extends JRInput {
   input() {
-    return /*#__PURE__*/React__default.createElement("input", {
+    return /*#__PURE__*/React__default.createElement(StyledInput, {
       value: this.props.value ?? '',
-      style: {
-        height: '24px',
-        width: '100%'
-      },
       onChange: e => {
         this.setValue(e.target.value);
       }

package/build/index.js

@@ -5359,6 +5359,7 @@ styled__default["default"].div`
 `;
 const StyledGrid = styled__default["default"].div`
     display: grid;
+    gap:10px;
     grid: ${({
   grid,
   cols,
@@ -5375,6 +5376,7 @@ const StyledColumn = styled__default["default"].div`
     flex:1;
     display: grid;
 
+
     ${({
   $layout,
   $labelWidth,
@@ -5389,6 +5391,7 @@ const StyledColumn = styled__default["default"].div`
 }}
 `;
 const StyledColumnLabel = styled__default["default"].div`
+    min-height:24px;
     ${({
   $layout
 }) => {
@@ -5396,7 +5399,7 @@ const StyledColumnLabel = styled__default["default"].div`
     return `text-align: start;`;
   } else {
     return `text-align: end;
-                padding: 3px 8px;
+                padding-right:10px;
             `;
   }
 }}
@@ -5430,7 +5433,6 @@ const StyledColumnValue = styled__default["default"].main`
     flex:1;
     flex-direction: column;
     overflow: hidden;
-    padding: 4px 0;
 
     text-align: start;
     ${({
@@ -5730,7 +5732,7 @@ class JRFields extends JRWindow {
   }
   renderMe() {
     return /*#__PURE__*/React__default["default"].createElement(StyleJRFields, {
-      className: 'jr-fields',
+      className: `jr-fields`,
       style: this.props.typeStyle
     }, /*#__PURE__*/React__default["default"].createElement(StyledGrid, {
       cols: this.props.cols,
@@ -6119,7 +6121,7 @@ function JRAlert(props) {
   })));
 }
 
-const StyledInput = styled__default["default"].div`
+const StyledInput$1 = styled__default["default"].div`
     display:flex;
     input:focus{
         outline: none; 
@@ -6130,7 +6132,7 @@ class JRInput extends React__default["default"].Component {
     this.props?.onChange?.(value);
   }
   render() {
-    return /*#__PURE__*/React__default["default"].createElement(StyledInput, null, this.input());
+    return /*#__PURE__*/React__default["default"].createElement(StyledInput$1, null, this.input());
   }
 }
 
@@ -6165,12 +6167,14 @@ const StyledSelect = styled__default["default"].select`
     ${({
   size,
   multiple
-}) => `${size == 1 || size == undefined && multiple != true ? 'height:30px;' : ''}`}
+}) => `${size == 1 || size == undefined && multiple != true ? 'height:24px;' : ''}`}
     width: 100%;
-
+    min-height: 24px;
+    
     option{
         padding: 4px;
-        height: 25px;
+        height: 24px;
+        min-height: 24px;
         display: flex;
         align-items: center;
     }
@@ -6179,8 +6183,8 @@ class JRSelect extends JROptions {
   renderer() {
     const {
       showBlank,
-      valueName = 'id',
-      labelName = 'name',
+      valueName = 'value',
+      labelName = 'label',
       multiple,
       size
     } = this.props;
@@ -6189,7 +6193,7 @@ class JRSelect extends JROptions {
       [valueName]: '',
       [labelName]: ''
     });
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledSelect, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledSelect, {
       value: this.getValue() ?? (multiple ? [] : ''),
       className: 'jr-select',
       onChange: e => {
@@ -6212,7 +6216,7 @@ class JRSelect extends JROptions {
         props.className = 'selected';
       }
       return /*#__PURE__*/React__default["default"].createElement(StyledOption, props, record[labelName]);
-    })));
+    }));
   }
 }
 
@@ -6220,7 +6224,7 @@ const StyledPick = styled__default["default"].div`
     >label{
         white-space: nowrap;
         display: inline-flex;
-        align-items: center;
+        align-items: baseline;
         height: 30px;
         padding-right: 12px;
     }
@@ -6297,14 +6301,14 @@ class JRCheckbox extends JROptions {
   }
 }
 
+const StyledInput = styled__default["default"].input`
+    min-height: 24px;
+    width: 100%;
+`;
 class JRText extends JRInput {
   input() {
-    return /*#__PURE__*/React__default["default"].createElement("input", {
+    return /*#__PURE__*/React__default["default"].createElement(StyledInput, {
       value: this.props.value ?? '',
-      style: {
-        height: '24px',
-        width: '100%'
-      },
       onChange: e => {
         this.setValue(e.target.value);
       }

package/package.json

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

package/src/app/fields/FieldsApp.jsx

@@ -1,21 +1,36 @@
 
 import styled from "styled-components";
 import JRFields from "../../components/JRFields/JRFields";
-import { fieldsValidator ,fields} from "./validator";
-import { devFields, normalFields, withSomeButton } from "./fieldsConfig";
-// import { tryHOC } from "./tryHOC";
-
-
+import { devFields, withSomeButton } from "./fieldsConfig";
 
 const StyledJRFields=styled(JRFields)`
-    input {
-        background: #202020;
-        color:gray;
+    >Xmain{
+        >main{
+            >main{
+                >main{
+                    >.jr-grid{
+                        padding:0;
+                        margin:10px;
+                        gap:0;
+                        border-top: 1px solid white;
+                        border-right: 1px solid white;
+
+                        >.jr-column{
+                            border-bottom:1px solid white;
+                            border-left:1px solid white;
+                            padding:10px ;
+                        }
+                    }
+            
+                }
+            }
+        }
     }
+
 `
 export default function FieldsApp() {
 	return <>
-        <JRFields
+        <StyledJRFields
             initValue={{
                 checkbox:[1,3,5]
                 ,select:[2]
@@ -25,7 +40,6 @@ export default function FieldsApp() {
             open={true}
             popup={false}
             width={900}
-            // height={800}
             title={'Fields'}
         />
     </>

package/src/app/fields/fieldsConfig.jsx

@@ -6,7 +6,7 @@ import JRTable from "../../components/JRTable/JRTable";
 import { po } from "../../components/JRUtils";
 import styled from "styled-components";
 import JRCheckbox from "../../components/JRInput/JRCheckbox";
-import { JRRadio } from "../../components/JRInput/JRRadio";
+import JRRadio from "../../components/JRInput/JRRadio";
 
 export const fieldsConfig={
         popup:true
@@ -145,6 +145,7 @@ export const normalFields={
         url:'data.json'
         ,autoRun:true
     }
+
     ,columns:[
         {name:'name',label:'Name',type:JRText,required:true}
         ,{name:'account',label:'Account',type:JRText
@@ -184,10 +185,22 @@ export const normalFields={
             }
         }
         ,{
-            label:''
-            ,columns:[
-                {name:'father',label:'Father',type:JRText,required:true}
-                ,{name:'mother',label:'Mother',type:JRText,required:true}
+            columns:[
+                {name:'father',label:'Father',type:JRText,required:true
+                    ,labelProps:{
+                        width:'min-content'
+                    }
+                }
+                ,{name:'mother',label:'Mother',type:JRText,required:true
+                    ,labelProps:{
+                        width:'min-content'
+                    }
+                }
+                ,{name:'yo',label:'Yo',type:JRText,required:true
+                    ,labelProps:{
+                        width:'min-content'
+                    }
+                }
             ]
             ,cols:2
             ,columnStyle:{
@@ -388,9 +401,7 @@ export const devFields={
             ]
             ,cols:2
             ,columnStyle:{
-                padding:'6px'
-                ,marginTop: '4px'
-                ,border:'1px solid black'
+                border:'1px solid black'
                 ,borderRadius: '3px'
             }
             ,colSpan:2
@@ -454,6 +465,7 @@ export const devFields={
             }
             ,multiple:true
             ,required:true
+            ,colSpan:2
         }
     ]
     ,cols:2

package/src/components/JRFields/JRFields.jsx

@@ -28,6 +28,7 @@ const StyledGridFrame = styled.div`
 
 const StyledGrid = styled.div`
     display: grid;
+    gap:10px;
     grid: ${({ grid, cols, children }) =>
         grid
             ? grid
@@ -45,6 +46,7 @@ const StyledColumn=styled.div`
     flex:1;
     display: grid;
 
+
     ${({$layout,$labelWidth,$hasLabel,$valueWidth})=>{
         if($layout=='v'){
             return `grid: auto 1fr / 1fr;`
@@ -54,12 +56,13 @@ const StyledColumn=styled.div`
     }}
 `
 const StyledColumnLabel=styled.div`
+    min-height:24px;
     ${({$layout})=>{
         if($layout=='v'){
             return `text-align: start;`
         }else{
             return `text-align: end;
-                padding: 3px 8px;
+                padding-right:10px;
             `
         }
     }}
@@ -90,7 +93,6 @@ const StyledColumnValue=styled.main`
     flex:1;
     flex-direction: column;
     overflow: hidden;
-    padding: 4px 0;
 
     text-align: start;
     ${({$validateValue})=>{
@@ -447,7 +449,7 @@ export default class JRFields extends JRWindow {
     }
 
     renderMe(){
-        return <StyleJRFields className={'jr-fields'} style={this.props.typeStyle}>
+        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}>
                 {
                     this.createColumns(

package/src/components/JRInput/JRRadio.jsx

@@ -7,7 +7,7 @@ export const StyledPick=styled.div`
     >label{
         white-space: nowrap;
         display: inline-flex;
-        align-items: center;
+        align-items: baseline;
         height: 30px;
         padding-right: 12px;
     }

package/src/components/JRInput/JRSelect.jsx

@@ -7,23 +7,24 @@ import styled from "styled-components";
 const StyledOption=styled.option`
 `
 const StyledSelect=styled.select`
-    ${({size,multiple})=>`${size==1 || (size==undefined && multiple!=true)?'height:30px;':''}`}
+    ${({size,multiple})=>`${size==1 || (size==undefined && multiple!=true)?'height:24px;':''}`}
     width: 100%;
-
+    min-height: 24px;
+    
     option{
         padding: 4px;
-        height: 25px;
+        height: 24px;
+        min-height: 24px;
         display: flex;
         align-items: center;
     }
 `
 export default class JRSelect extends JROptions{
     renderer(){
-        const {showBlank,valueName='id',labelName='name',multiple,size}=this.props
+        const {showBlank,valueName='value',labelName='label',multiple,size}=this.props
         const options=[...this.getOptions()??[]]
         if(multiple!=true && showBlank!=false)options.unshift({[valueName]:'',[labelName]:''})
-        return <>
-        <StyledSelect 
+        return <StyledSelect 
             value={this.getValue()??(multiple?[]:'')}
             className={'jr-select'}
             onChange={(e)=>{
@@ -59,6 +60,5 @@ export default class JRSelect extends JROptions{
                 })
             }
         </StyledSelect>
-        </>
     }
 }

package/src/components/JRInput/JRText.jsx

@@ -1,13 +1,14 @@
 import React from "react";
 import JRInput from "./JRInput";
+import styled from "styled-components";
 
+const StyledInput=styled.input`
+    min-height: 24px;
+    width: 100%;
+`
 export default class JRText extends JRInput{
     input(){
-        return <input value={this.props.value??''}
-            style={{
-                height: '24px'
-                ,width: '100%'
-            }}
+        return <StyledInput value={this.props.value??''}
             onChange={(e)=>{
                 this.setValue(e.target.value)
             }}