jrs-react 1.2.3 → 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;
@@ -7411,6 +7411,432 @@ class JRTable extends JRFrame {
   }
 }
 
+const StyleJRFields = styled.main`
+    --column-bd-color:#cccccc;
+    --column-b-color:unset;
+    --column-b-hover-color:#ffffff;
+
+    flex-direction: column;
+    flex:1;
+    overflow: overlay;
+
+    color:#525252;
+
+    >.jr-grid{
+        .jr-column{
+            > .label{
+                color:#525252;
+                text-wrap: nowrap;
+                padding: 3px 8px;
+                font-weight: bold;
+            }
+            > .jr-column-value{
+            }
+        }
+    }
+`;
+
+function checkMap(_name, inputValue, mapValue, nameList) {
+  if (nameList.length) {
+    const name = nameList.shift();
+    if (typeof mapValue[name] != 'object') {
+      mapValue[name] = {};
+    }
+    checkMap(_name, inputValue, mapValue[name], nameList);
+  } else {
+    mapValue[_name] = inputValue;
+  }
+}
+styled.div`
+    overflow: auto;    
+    flex:1;
+`;
+const StyledGrid = styled.div`
+    display: grid;
+    grid: ${({
+  grid,
+  cols,
+  children
+}) => grid ? grid : `auto / ${Array(cols ?? 1).fill().map(() => "1fr").join(" ")}`};
+
+    gap: ${({
+  $gap
+}) => $gap};
+`;
+styled.div`
+`;
+const StyledColumn = styled.div`
+    flex:1;
+    display: grid;
+
+    ${({
+  $layout,
+  $labelWidth,
+  $hasLabel,
+  $valueWidth
+}) => {
+  if ($layout == 'v') {
+    return `grid: auto 1fr / 1fr;`;
+  } else {
+    return `grid: 1fr / ${$hasLabel ? $labelWidth : ''} ${$valueWidth};`;
+  }
+}}
+`;
+const StyledColumnLabel = styled.label`
+    ${({
+  $layout
+}) => {
+  if ($layout == 'v') {
+    return `text-align: start;`;
+  } else {
+    return `text-align: end;`;
+  }
+}}
+
+    ${({
+  $required
+}) => {
+  if ($required !== undefined && $required) return `
+                &:not(:empty)::before{
+                    padding-right:4px;
+                    color:red;
+                    content:'*';
+                }
+            `;
+}}
+
+    ${({
+  $colon
+}) => {
+  if ($colon) {
+    return `
+                &:not(:empty)::after{
+                    content:'${$colon}';
+                }
+            `;
+  }
+}}
+
+`;
+const StyledColumnValue = styled.main`
+    flex:1;
+    Xdisplay:flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    text-align: start;
+    ${({
+  $validateValue
+}) => {
+  if ($validateValue != null) {
+    return `
+                > * {
+                    xborder:1px solid red;
+                }
+            `;
+  }
+}}
+`;
+
+// String.prototype.valueString = function (value = {}) {
+//     return Array.from(new Set(this.match(/[^{}]+(?=})/g))).reduce((aco, name) => {
+//         return aco.replace(new RegExp(`\\{${name}\\}`, "g"), value[name] ?? `{${name}}`);
+//     }, String(this));
+// };
+
+const valueString = (str = '', value = {}) => {
+  return Array.from(new Set(str.match(/[^{}]+(?=})/g))).reduce((aco, name) => {
+    return aco.replace(new RegExp(`\\{${name}\\}`, "g"), value?.[name] ?? `{${name}}`);
+  }, String(str));
+};
+const ColumnMessage = ({
+  value = {},
+  record
+}) => {
+  if (value.isValid === false) {
+    return valueString(value.msg, record);
+  }
+};
+const StyledColumnFooter = styled.div`
+    &:empty{
+            display: none;
+    }
+    ${({
+  $layout
+}) => {
+  if ($layout == 'v') {
+    return ``;
+  } else {
+    return `grid-column-start:2;`;
+  }
+}}
+    height:25px;
+    color:#ff6060;
+
+    display: flex;
+    justify-content: space-between;
+
+    .left:{
+        xflex:1;
+    }
+    .right{
+        color:gray;
+        xflex:1;
+    }
+`;
+function requiredValidator({
+  value
+}) {
+  if (value == null || value == '') {
+    return {
+      msg: this.msg ?? 'This is required'
+    };
+  }
+}
+class JRFields extends JRFrame {
+  UNSAFE_componentWillMount() {
+    this.#initValidateValue();
+  }
+  reset() {
+    this.clearValidateValue();
+    super.reset();
+  }
+  setValue(value, reset) {
+    super.setValue(value, reset);
+    if (reset) {
+      this.clearValidateValue();
+    }
+  }
+  //-----------------------------------------------------------------------------------
+  #findValidator(acc, fullname, {
+    required,
+    ...column
+  }) {
+    const _required = required;
+    if (required == true || required?.value) {
+      acc[fullname] = {
+        isValid: null,
+        validators: [requiredValidator.bind(_required)]
+      };
+    }
+  }
+  #loopColumnsForValidateValue(no, _fullnameList, columns, tab, result) {
+    const validateValue = columns?.reduce((acc, {
+      name,
+      type,
+      columns,
+      ...column
+    }, index) => {
+      no += 1;
+      const fullnameList = name ? [..._fullnameList, name] : _fullnameList;
+      const fullname = fullnameList.join('.');
+      this.#findValidator(acc, fullname, column);
+      if (type == null && columns) {
+        this.#loopColumnsForValidateValue(no, fullnameList, columns, `${tab}\t`, result);
+      }
+      return acc;
+    }, result);
+    return validateValue;
+  }
+  clearValidateValue() {
+    Object.values(this.getValidateValue()).forEach(v => v.isValid = null);
+  }
+  #initValidateValue() {
+    const columns = this.getColumns();
+    const validateValue = this.#loopColumnsForValidateValue(0, this.props.dataSourceName ? [this.props.dataSourceName] : [], columns, '', {});
+    this.setState({
+      validateValue
+    });
+  }
+  #exeValidateConfig(validateConfig, value, record) {
+    validateConfig.isValid = true;
+    for (var i = 0; i < validateConfig.validators.length; i++) {
+      const result = validateConfig.validators[i]({
+        value,
+        record
+      });
+      if (result) {
+        validateConfig.isValid = false;
+        validateConfig.msg = result.msg;
+        break;
+      }
+    }
+  }
+  validateFields() {
+    console.clear();
+    Object.entries(this.getValidateValue()).filter(([fullname, validateConfig]) => validateConfig.isValid != true).forEach(([fullname, validateConfig]) => {
+      this.#exeValidateConfig(validateConfig, this.getValue(fullname), this.getValue());
+    });
+    this.setState({
+      validateValue: this.getValidateValue()
+    });
+  }
+  get validateValueFrom() {
+    return this.props.validateValue === undefined ? 'state' : 'props';
+  }
+  getValidateValue(fullname) {
+    if (fullname === undefined) {
+      return this[this.validateValueFrom]?.validateValue;
+    } else {
+      return this[this.validateValueFrom]?.validateValue?.[fullname];
+    }
+  }
+  setValidateValue(validateValue) {
+    if (this.props.setValidateValue) {
+      this.props.setValidateValue(validateValue);
+    } else {
+      this.setState({
+        validateValue
+      });
+    }
+  }
+  createValidator({
+    required
+  }) {
+    const validators = [];
+    if (required === true && required.value) {
+      validators.push(requiredValidator);
+    }
+    return validators;
+  }
+  //--------------------------------------------------------------------------------------
+  get columnsFrom() {
+    return this.props.initColumns !== undefined ? 'state' : 'props';
+  }
+  getColumns() {
+    return this[this.columnsFrom]?.columns;
+  }
+  //-------------------------------------------------------------------------------------------
+
+  get colon() {
+    return this.props.labelProps?.colon === undefined ? ':' : this.props.labelProps?.colon;
+  }
+  createColumn(parentValue, {
+    type,
+    name,
+    colSpan,
+    rowSpan,
+    style,
+    typeStyle: _typeStyle,
+    required,
+    ...column
+  }, index, parentName, 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}`;
+    let content;
+    this.createValidator({
+      required,
+      column
+    });
+    const fn = fullname.join('.');
+    const onChange = inputValue => {
+      const targetValue = inputValue?.target?.value ?? inputValue;
+      try {
+        parentValue[name] = targetValue;
+        this.setValue({
+          ...this.getValue()
+        });
+      } catch (e) {
+        const _value = this.getValue() ?? {};
+        checkMap(name, targetValue, _value, [...parentName]);
+        this.setValue(_value);
+      }
+      if (this.getValidateValue()[fn]) this.#exeValidateConfig(this.getValidateValue()[fn], targetValue, this.getValue());
+    };
+    const _parentName = [...parentName];
+    if (name !== undefined) {
+      _parentName.push(name);
+    }
+    if (type) {
+      const typeStyle = flexType(_typeStyle, this, null);
+      content = /*#__PURE__*/React.createElement(StyledColumnValue, {
+        className: 'jr-column-value',
+        style: {
+          gridColumn: label == null ? 'span 2' : null
+        }
+      }, /*#__PURE__*/React.createElement(type, {
+        value: value,
+        onChange,
+        record: parentValue,
+        style: {
+          width: '100%',
+          ...typeStyle
+        },
+        ...column
+      }));
+    } else if (column.columns) {
+      content = /*#__PURE__*/React.createElement(StyledGrid, {
+        cols: column.cols,
+        className: 'jr-grid',
+        $gap: gap
+      }, this.createColumns(value, column.columns, _parentName, fullname));
+    } else if (name || column.render) {
+      content = /*#__PURE__*/React.createElement(StyledColumnValue, {
+        className: 'jr-column-value',
+        style: {
+          gridColumn: label == null ? 'span 2' : null,
+          padding: column.render ? '4px 0' : null
+        }
+      }, column.render ? column.render.bind(this)({
+        onChange,
+        value: value,
+        record: this.getValue()
+      }) : typeof value === 'object' ? JSON.stringify(value) : value);
+    }
+    const layout = column.labelProps?.layout === undefined ? this.props.labelProps?.layout : column.labelProps?.layout;
+    return /*#__PURE__*/React.createElement(StyledColumn, {
+      $layout: layout,
+      $hasLabel: label != null,
+      key: `f${index}`,
+      style: _style,
+      className: 'jr-column',
+      $labelWidth: column.labelProps?.width ?? this.props.labelProps?.width ?? '120px',
+      $valueWidth: column.valueProps?.width ?? this.props.valueProps?.width ?? '1fr'
+    }, label != null && /*#__PURE__*/React.createElement(StyledColumnLabel, {
+      $required: required,
+      className: 'label',
+      $layout: layout,
+      $colon: column.labelProps?.colon === undefined ? this.colon : column.labelProps?.colon
+    }, label), content, this.props.debugMode && /*#__PURE__*/React.createElement(StyledColumnFooter, null, /*#__PURE__*/React.createElement("div", {
+      className: "left"
+    }, /*#__PURE__*/React.createElement(ColumnMessage, {
+      value: this.getValidateValue(_parentName.join('.')),
+      record: this.getValue()
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "right"
+    }))
+    // validateValue?.[name]!==undefined && <StyledColumnFooter $layout={layout}>
+    //     {/* {validateValue?.[name]?.$message} */}
+    //     <ColumnMessage value={validateValue?.[name]}/>
+    // </StyledColumnFooter>
+    );
+  }
+  createColumns(parentValue, columns, parentName, fullname) {
+    return columns?.map((column, index) => {
+      return this.createColumn(parentValue, column, index, parentName, column.name ? [...fullname, column.name] : fullname);
+    });
+  }
+  renderMe() {
+    return /*#__PURE__*/React.createElement(StyleJRFields, {
+      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 ?? '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] : [])));
+  }
+
+  // render(){
+  //     return this.renderMe()
+  // }
+}
+
 const StyledJRFrame = styled.div`
     display:flex;
     flex:1;
@@ -7510,4 +7936,4 @@ class JRTestReact extends JRSubmit {
   }
 }
 
-export { JRFrame, JRSubmit, JRTable, JRTestReact };
+export { JRFields, JRFrame, JRSubmit, JRTable, JRTestReact };

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;
@@ -7419,6 +7419,432 @@ class JRTable extends JRFrame {
   }
 }
 
+const StyleJRFields = styled__default["default"].main`
+    --column-bd-color:#cccccc;
+    --column-b-color:unset;
+    --column-b-hover-color:#ffffff;
+
+    flex-direction: column;
+    flex:1;
+    overflow: overlay;
+
+    color:#525252;
+
+    >.jr-grid{
+        .jr-column{
+            > .label{
+                color:#525252;
+                text-wrap: nowrap;
+                padding: 3px 8px;
+                font-weight: bold;
+            }
+            > .jr-column-value{
+            }
+        }
+    }
+`;
+
+function checkMap(_name, inputValue, mapValue, nameList) {
+  if (nameList.length) {
+    const name = nameList.shift();
+    if (typeof mapValue[name] != 'object') {
+      mapValue[name] = {};
+    }
+    checkMap(_name, inputValue, mapValue[name], nameList);
+  } else {
+    mapValue[_name] = inputValue;
+  }
+}
+styled__default["default"].div`
+    overflow: auto;    
+    flex:1;
+`;
+const StyledGrid = styled__default["default"].div`
+    display: grid;
+    grid: ${({
+  grid,
+  cols,
+  children
+}) => grid ? grid : `auto / ${Array(cols ?? 1).fill().map(() => "1fr").join(" ")}`};
+
+    gap: ${({
+  $gap
+}) => $gap};
+`;
+styled__default["default"].div`
+`;
+const StyledColumn = styled__default["default"].div`
+    flex:1;
+    display: grid;
+
+    ${({
+  $layout,
+  $labelWidth,
+  $hasLabel,
+  $valueWidth
+}) => {
+  if ($layout == 'v') {
+    return `grid: auto 1fr / 1fr;`;
+  } else {
+    return `grid: 1fr / ${$hasLabel ? $labelWidth : ''} ${$valueWidth};`;
+  }
+}}
+`;
+const StyledColumnLabel = styled__default["default"].label`
+    ${({
+  $layout
+}) => {
+  if ($layout == 'v') {
+    return `text-align: start;`;
+  } else {
+    return `text-align: end;`;
+  }
+}}
+
+    ${({
+  $required
+}) => {
+  if ($required !== undefined && $required) return `
+                &:not(:empty)::before{
+                    padding-right:4px;
+                    color:red;
+                    content:'*';
+                }
+            `;
+}}
+
+    ${({
+  $colon
+}) => {
+  if ($colon) {
+    return `
+                &:not(:empty)::after{
+                    content:'${$colon}';
+                }
+            `;
+  }
+}}
+
+`;
+const StyledColumnValue = styled__default["default"].main`
+    flex:1;
+    Xdisplay:flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    text-align: start;
+    ${({
+  $validateValue
+}) => {
+  if ($validateValue != null) {
+    return `
+                > * {
+                    xborder:1px solid red;
+                }
+            `;
+  }
+}}
+`;
+
+// String.prototype.valueString = function (value = {}) {
+//     return Array.from(new Set(this.match(/[^{}]+(?=})/g))).reduce((aco, name) => {
+//         return aco.replace(new RegExp(`\\{${name}\\}`, "g"), value[name] ?? `{${name}}`);
+//     }, String(this));
+// };
+
+const valueString = (str = '', value = {}) => {
+  return Array.from(new Set(str.match(/[^{}]+(?=})/g))).reduce((aco, name) => {
+    return aco.replace(new RegExp(`\\{${name}\\}`, "g"), value?.[name] ?? `{${name}}`);
+  }, String(str));
+};
+const ColumnMessage = ({
+  value = {},
+  record
+}) => {
+  if (value.isValid === false) {
+    return valueString(value.msg, record);
+  }
+};
+const StyledColumnFooter = styled__default["default"].div`
+    &:empty{
+            display: none;
+    }
+    ${({
+  $layout
+}) => {
+  if ($layout == 'v') {
+    return ``;
+  } else {
+    return `grid-column-start:2;`;
+  }
+}}
+    height:25px;
+    color:#ff6060;
+
+    display: flex;
+    justify-content: space-between;
+
+    .left:{
+        xflex:1;
+    }
+    .right{
+        color:gray;
+        xflex:1;
+    }
+`;
+function requiredValidator({
+  value
+}) {
+  if (value == null || value == '') {
+    return {
+      msg: this.msg ?? 'This is required'
+    };
+  }
+}
+class JRFields extends JRFrame {
+  UNSAFE_componentWillMount() {
+    this.#initValidateValue();
+  }
+  reset() {
+    this.clearValidateValue();
+    super.reset();
+  }
+  setValue(value, reset) {
+    super.setValue(value, reset);
+    if (reset) {
+      this.clearValidateValue();
+    }
+  }
+  //-----------------------------------------------------------------------------------
+  #findValidator(acc, fullname, {
+    required,
+    ...column
+  }) {
+    const _required = required;
+    if (required == true || required?.value) {
+      acc[fullname] = {
+        isValid: null,
+        validators: [requiredValidator.bind(_required)]
+      };
+    }
+  }
+  #loopColumnsForValidateValue(no, _fullnameList, columns, tab, result) {
+    const validateValue = columns?.reduce((acc, {
+      name,
+      type,
+      columns,
+      ...column
+    }, index) => {
+      no += 1;
+      const fullnameList = name ? [..._fullnameList, name] : _fullnameList;
+      const fullname = fullnameList.join('.');
+      this.#findValidator(acc, fullname, column);
+      if (type == null && columns) {
+        this.#loopColumnsForValidateValue(no, fullnameList, columns, `${tab}\t`, result);
+      }
+      return acc;
+    }, result);
+    return validateValue;
+  }
+  clearValidateValue() {
+    Object.values(this.getValidateValue()).forEach(v => v.isValid = null);
+  }
+  #initValidateValue() {
+    const columns = this.getColumns();
+    const validateValue = this.#loopColumnsForValidateValue(0, this.props.dataSourceName ? [this.props.dataSourceName] : [], columns, '', {});
+    this.setState({
+      validateValue
+    });
+  }
+  #exeValidateConfig(validateConfig, value, record) {
+    validateConfig.isValid = true;
+    for (var i = 0; i < validateConfig.validators.length; i++) {
+      const result = validateConfig.validators[i]({
+        value,
+        record
+      });
+      if (result) {
+        validateConfig.isValid = false;
+        validateConfig.msg = result.msg;
+        break;
+      }
+    }
+  }
+  validateFields() {
+    console.clear();
+    Object.entries(this.getValidateValue()).filter(([fullname, validateConfig]) => validateConfig.isValid != true).forEach(([fullname, validateConfig]) => {
+      this.#exeValidateConfig(validateConfig, this.getValue(fullname), this.getValue());
+    });
+    this.setState({
+      validateValue: this.getValidateValue()
+    });
+  }
+  get validateValueFrom() {
+    return this.props.validateValue === undefined ? 'state' : 'props';
+  }
+  getValidateValue(fullname) {
+    if (fullname === undefined) {
+      return this[this.validateValueFrom]?.validateValue;
+    } else {
+      return this[this.validateValueFrom]?.validateValue?.[fullname];
+    }
+  }
+  setValidateValue(validateValue) {
+    if (this.props.setValidateValue) {
+      this.props.setValidateValue(validateValue);
+    } else {
+      this.setState({
+        validateValue
+      });
+    }
+  }
+  createValidator({
+    required
+  }) {
+    const validators = [];
+    if (required === true && required.value) {
+      validators.push(requiredValidator);
+    }
+    return validators;
+  }
+  //--------------------------------------------------------------------------------------
+  get columnsFrom() {
+    return this.props.initColumns !== undefined ? 'state' : 'props';
+  }
+  getColumns() {
+    return this[this.columnsFrom]?.columns;
+  }
+  //-------------------------------------------------------------------------------------------
+
+  get colon() {
+    return this.props.labelProps?.colon === undefined ? ':' : this.props.labelProps?.colon;
+  }
+  createColumn(parentValue, {
+    type,
+    name,
+    colSpan,
+    rowSpan,
+    style,
+    typeStyle: _typeStyle,
+    required,
+    ...column
+  }, index, parentName, 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}`;
+    let content;
+    this.createValidator({
+      required,
+      column
+    });
+    const fn = fullname.join('.');
+    const onChange = inputValue => {
+      const targetValue = inputValue?.target?.value ?? inputValue;
+      try {
+        parentValue[name] = targetValue;
+        this.setValue({
+          ...this.getValue()
+        });
+      } catch (e) {
+        const _value = this.getValue() ?? {};
+        checkMap(name, targetValue, _value, [...parentName]);
+        this.setValue(_value);
+      }
+      if (this.getValidateValue()[fn]) this.#exeValidateConfig(this.getValidateValue()[fn], targetValue, this.getValue());
+    };
+    const _parentName = [...parentName];
+    if (name !== undefined) {
+      _parentName.push(name);
+    }
+    if (type) {
+      const typeStyle = flexType(_typeStyle, this, null);
+      content = /*#__PURE__*/React.createElement(StyledColumnValue, {
+        className: 'jr-column-value',
+        style: {
+          gridColumn: label == null ? 'span 2' : null
+        }
+      }, /*#__PURE__*/React.createElement(type, {
+        value: value,
+        onChange,
+        record: parentValue,
+        style: {
+          width: '100%',
+          ...typeStyle
+        },
+        ...column
+      }));
+    } else if (column.columns) {
+      content = /*#__PURE__*/React.createElement(StyledGrid, {
+        cols: column.cols,
+        className: 'jr-grid',
+        $gap: gap
+      }, this.createColumns(value, column.columns, _parentName, fullname));
+    } else if (name || column.render) {
+      content = /*#__PURE__*/React.createElement(StyledColumnValue, {
+        className: 'jr-column-value',
+        style: {
+          gridColumn: label == null ? 'span 2' : null,
+          padding: column.render ? '4px 0' : null
+        }
+      }, column.render ? column.render.bind(this)({
+        onChange,
+        value: value,
+        record: this.getValue()
+      }) : typeof value === 'object' ? JSON.stringify(value) : value);
+    }
+    const layout = column.labelProps?.layout === undefined ? this.props.labelProps?.layout : column.labelProps?.layout;
+    return /*#__PURE__*/React.createElement(StyledColumn, {
+      $layout: layout,
+      $hasLabel: label != null,
+      key: `f${index}`,
+      style: _style,
+      className: 'jr-column',
+      $labelWidth: column.labelProps?.width ?? this.props.labelProps?.width ?? '120px',
+      $valueWidth: column.valueProps?.width ?? this.props.valueProps?.width ?? '1fr'
+    }, label != null && /*#__PURE__*/React.createElement(StyledColumnLabel, {
+      $required: required,
+      className: 'label',
+      $layout: layout,
+      $colon: column.labelProps?.colon === undefined ? this.colon : column.labelProps?.colon
+    }, label), content, this.props.debugMode && /*#__PURE__*/React.createElement(StyledColumnFooter, null, /*#__PURE__*/React.createElement("div", {
+      className: "left"
+    }, /*#__PURE__*/React.createElement(ColumnMessage, {
+      value: this.getValidateValue(_parentName.join('.')),
+      record: this.getValue()
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "right"
+    }))
+    // validateValue?.[name]!==undefined && <StyledColumnFooter $layout={layout}>
+    //     {/* {validateValue?.[name]?.$message} */}
+    //     <ColumnMessage value={validateValue?.[name]}/>
+    // </StyledColumnFooter>
+    );
+  }
+  createColumns(parentValue, columns, parentName, fullname) {
+    return columns?.map((column, index) => {
+      return this.createColumn(parentValue, column, index, parentName, column.name ? [...fullname, column.name] : fullname);
+    });
+  }
+  renderMe() {
+    return /*#__PURE__*/React.createElement(StyleJRFields, {
+      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 ?? '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] : [])));
+  }
+
+  // render(){
+  //     return this.renderMe()
+  // }
+}
+
 const StyledJRFrame = styled__default["default"].div`
     display:flex;
     flex:1;
@@ -7518,6 +7944,7 @@ class JRTestReact extends JRSubmit {
   }
 }
 
+exports.JRFields = JRFields;
 exports.JRFrame = JRFrame;
 exports.JRSubmit = JRSubmit;
 exports.JRTable = JRTable;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.3",
+	"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;

package/src/index.js

@@ -1,8 +1,9 @@
 import JRSubmit from './components/JRSubmit'
 import JRFrame from './components/JRFrame/JRFrame'
 import JRTable from './components/JRTable/JRTable'
+import JRFields from './components/JRFields/JRFields'
 import JRTestReact from './components/JRTest'
 export {
     JRTestReact
-    ,JRSubmit,JRFrame,JRTable
+    ,JRSubmit,JRFrame,JRTable,JRFields
 }