jrs-react 1.2.2 → 1.2.4

package/build/index.es.js

@@ -6464,18 +6464,6 @@ class JRSubmit extends React.Component {
     const isSuccess = response.status >= 200 && response.status <= 299;
     this.setRes(isSuccess, response, config);
     this.showMessage(isSuccess, isSuccess ? config.successMessage : config.failedMessage);
-
-    // if (isSuccess) {
-    //     if (config.successMessage) {
-    //         // msg.success({ message:config.successMessage })
-    //         // alert(config.successMessage)
-    //     }
-    // } else {
-    //     if (config.failedMessage) {
-    //         // msg.error({ message:config.failedMessage })
-    //         // alert(config.failedMessage)
-    //     }
-    // }    
     config.callback?.bind(this)(isSuccess, response, payload);
   };
   showMessage(success, message) {
@@ -7423,6 +7411,441 @@ class JRTable extends JRFrame {
   }
 }
 
+const StyleJRFields = styled.main`
+    --column-bd-color:#cccccc;
+    --column-b-color:#eeeeee;
+    --column-b-hover-color:#ffffff;
+
+    flex-direction: column;
+    flex:1;
+    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{
+                color:#525252;
+                text-wrap: nowrap;
+                padding: 4px 10px 4px 0;
+                font-weight: bold;
+            }
+        }
+    }
+`;
+
+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`
+    Xflex:1;
+    Xdisplay:flex;
+    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('.');
+      // po(`${no} - ${tab}fn= ${fullname}`)
+      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) {
+    // 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,
+      column
+    });
+    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()
+        });
+      } 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'
+    }, /*#__PURE__*/React.createElement(StyledGrid, {
+      cols: this.props.cols,
+      style: this.props.gridStyle,
+      className: 'jr-grid',
+      $gap: this.props.gap
+    }, 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;
@@ -7522,4 +7945,4 @@ class JRTestReact extends JRSubmit {
   }
 }
 
-export { JRFrame, JRSubmit, JRTable, JRTestReact };
+export { JRFields, JRFrame, JRSubmit, JRTable, JRTestReact };