jrs-react 1.2.15 → 1.2.17

package/build/index.es.js

@@ -3517,6 +3517,8 @@ class JRSubmit extends React__default.Component {
       const fullnamList = fullname.split('.');
       return this.#getValueByName(fullnamList, this[this.from]?.value);
     } else {
+      // po('ssssssssssssssssssssssssssssssssssssssssss')
+      // 忘記為甚麼這樣寫了 XDD
       return flexType(this[this.from]?.value, this, null, null);
     }
   }
@@ -3672,7 +3674,7 @@ class JRSubmit extends React__default.Component {
   }
 }
 
-const FreeType$1 = ({
+const FreeType = ({
   tag: Tag,
   config,
   me,
@@ -3696,7 +3698,7 @@ const FreeType$1 = ({
     }, config);
   }
 };
-const StyledJRFrame$1 = styled.div`
+const StyledJRFrame = styled.div`
     display:flex;
     flex:1;
     overflow:hidden;
@@ -3739,36 +3741,36 @@ const StyledJRFrame$1 = styled.div`
 `;
 class JRFrame extends JRSubmit {
   renderer() {
-    return /*#__PURE__*/React__default.createElement(StyledJRFrame$1, {
+    return /*#__PURE__*/React__default.createElement(StyledJRFrame, {
       id: this.props.id,
       style: this.props.style,
       className: `${this.props.className} jr-frame`
-    }, /*#__PURE__*/React__default.createElement(FreeType$1, {
+    }, /*#__PURE__*/React__default.createElement(FreeType, {
       tag: "div",
       config: this.props.start,
       me: this,
       className: 'start'
-    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeType$1, {
+    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeType, {
       tag: "header",
       config: this.props.top,
       me: this
-    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeType$1, {
+    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeType, {
       tag: "div",
       config: this.props.left,
       me: this,
       className: 'left'
     }), /*#__PURE__*/React__default.createElement("main", {
       className: 'body'
-    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default.createElement(FreeType$1, {
+    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default.createElement(FreeType, {
       tag: "div",
       config: this.props.right,
       me: this,
       className: 'right'
-    })), /*#__PURE__*/React__default.createElement(FreeType$1, {
+    })), /*#__PURE__*/React__default.createElement(FreeType, {
       tag: "footer",
       config: this.props.bottom,
       me: this
-    })), /*#__PURE__*/React__default.createElement(FreeType$1, {
+    })), /*#__PURE__*/React__default.createElement(FreeType, {
       tag: "div",
       config: this.props.end,
       me: this,
@@ -4043,7 +4045,7 @@ class TitleBar extends React__default.Component {
         this.start(e);
       },
       onDoubleClick: this.adjustScreen
-    }, /*#__PURE__*/React__default.createElement(FreeType$1, {
+    }, /*#__PURE__*/React__default.createElement(FreeType, {
       tag: "div",
       config: this.props.title ?? '',
       me: this.props.window,
@@ -6002,95 +6004,15 @@ class JRTable extends JRWindow {
 // export const FTable=JRFrameHOC(JRTable)
 // export const WTable=JRWindowHOC(JRTable)
 
-const StyledJRFrame = styled.div`
-    display:flex;
-    flex:1;
-    overflow:hidden;
-
-    > *{
-        Xborder:1px solid gray;
-    }
-    >main{
-        display:flex;
-        flex:1;
-        overflow:overlay;
-        flex-direction: column;
-        > *{
-            XXborder:1px solid gray;
-            min-height:30px;
-        }
-
-        >header{
-            XXborder:1px solid  red;
-            XXoverflow: overlay;
-        }
-        >main{
-            display:flex;
-            flex:1;
-            overflow:hidden;
-        }
-        >footer{
-            XXborder:1px solid  blue;
-            overflow: overlay;
-        }
-
-    }
-
+const StyledJRTest = styled.div`
+  
 `;
-const FreeType = ({
-  tag: Tag,
-  config,
-  me,
-  className
-}) => {
-  if (typeof config === 'function') {
-    let style;
-    const setStyle = function (_style) {
-      style = _style;
-    };
-    const content = config.bind(me)({
-      setStyle
-    });
-    return /*#__PURE__*/React__default.createElement(Tag, {
-      className: className,
-      style: style
-    }, content);
-  }
-};
 class JRTestReact extends JRSubmit {
   renderer() {
-    return /*#__PURE__*/React__default.createElement(StyledJRFrame, {
+    return /*#__PURE__*/React__default.createElement(StyledJRTest, {
       style: this.props.style,
       className: `${this.props.className} jr-frame`
-    }, /*#__PURE__*/React__default.createElement(FreeType, {
-      tag: "div",
-      config: this.props.start,
-      me: this,
-      className: 'start'
-    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeType, {
-      tag: "header",
-      config: this.props.top,
-      me: this
-    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeType, {
-      tag: "div",
-      config: this.props.left,
-      me: this,
-      className: 'left'
-    }), this.renderMe(), /*#__PURE__*/React__default.createElement(FreeType, {
-      tag: "div",
-      config: this.props.right,
-      me: this,
-      className: 'right'
-    })), /*#__PURE__*/React__default.createElement(FreeType, {
-      tag: "footer",
-      config: this.props.bottom,
-      me: this
-    })), /*#__PURE__*/React__default.createElement(FreeType, {
-      tag: "div",
-      config: this.props.end,
-      me: this,
-      className: 'end'
-    }));
+    });
   }
   renderMe() {
     return /*#__PURE__*/React__default.createElement("div", {
@@ -6170,4 +6092,197 @@ function JRAlert(props) {
   })));
 }
 
-export { JRAlert, JRButton, JRFields, JRFrame, JRSubmit, JRTable, JRTestReact, JRWindow };
+const StyledInput = styled.div`
+    display:flex;
+    input:focus{
+        outline: none; 
+    }
+`;
+class JRInput extends React__default.Component {
+  setValue(value) {
+    this.props?.onChange?.(value);
+  }
+  render() {
+    return /*#__PURE__*/React__default.createElement(StyledInput, null, this.input());
+  }
+}
+
+class JROptions extends JRSubmit {
+  get optionsFrom() {
+    return this.props.options === undefined ? 'state' : 'props';
+  }
+  setOptions(options) {
+    if (this.props.setOptions) {
+      this.props.setOptions(options);
+    } else {
+      this.setState({
+        options: options
+      });
+    }
+  }
+  getOptions() {
+    return this[this.optionsFrom]?.options;
+  }
+  setRes(isSuccess, response, config) {
+    if (isSuccess) {
+      const options = config.formatValue?.bind(this)(response.data) ?? response.data;
+      response.data = options;
+      this.setOptions(options);
+    }
+  }
+}
+
+const StyledOption = styled.option`
+`;
+const StyledSelect = styled.select`
+    ${({
+  size,
+  multiple
+}) => `${size == 1 || size == undefined && multiple != true ? 'height:30px;' : ''}`}
+    width: 100%;
+
+    option{
+        padding: 4px;
+        height: 25px;
+        display: flex;
+        align-items: center;
+    }
+`;
+class JRSelect extends JROptions {
+  renderer() {
+    const {
+      showBlank,
+      valueName = 'id',
+      labelName = 'name',
+      multiple,
+      size
+    } = this.props;
+    const options = [...(this.getOptions() ?? [])];
+    if (multiple != true && showBlank != false) options.unshift({
+      [valueName]: '',
+      [labelName]: ''
+    });
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledSelect, {
+      value: this.getValue() ?? (multiple ? [] : ''),
+      className: 'jr-select',
+      onChange: e => {
+        if (multiple) {
+          const selectedIndex = [...e.target.selectedOptions].map(option => option.index);
+          this.setValue(selectedIndex.length ? selectedIndex.map(index => options[index][valueName]) : null);
+        } else {
+          const selectedIndex = e.target.selectedOptions[0].index;
+          this.setValue(selectedIndex ? options[selectedIndex][valueName] : null);
+        }
+      },
+      size: size,
+      multiple: multiple
+    }, options.map((record, key) => {
+      const props = {
+        value: record[valueName],
+        key: key
+      };
+      if (multiple && this.getValue()?.indexOf(record[valueName]) > -1 || this.getValue() == record[valueName]) {
+        props.className = 'selected';
+      }
+      return /*#__PURE__*/React__default.createElement(StyledOption, props, record[labelName]);
+    })));
+  }
+}
+
+const StyledPick = styled.div`
+    >label{
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        height: 30px;
+        padding-right: 12px;
+    }
+`;
+class JRRadio extends JROptions {
+  renderer() {
+    const {
+      valueName = 'value',
+      labelName = 'label',
+      onChange,
+      ...props
+    } = this.props;
+    const options = this.getOptions();
+    return /*#__PURE__*/React__default.createElement(StyledPick, {
+      className: 'jr-radio'
+    }, options?.map((record, key) => {
+      const recordValue = record[valueName];
+      return /*#__PURE__*/React__default.createElement("label", {
+        key: key
+      }, /*#__PURE__*/React__default.createElement("input", {
+        type: 'radio',
+        name: 'radio',
+        checked: this.getValue() == recordValue,
+        onClick: e => {
+          if (this.getValue() == recordValue) {
+            this.setValue(null);
+            e.target.checked = false;
+          } else {
+            this.setValue(recordValue);
+          }
+        }
+      }), record[labelName]);
+    }));
+  }
+}
+
+class JRCheckbox extends JROptions {
+  renderer() {
+    const {
+      valueName = 'value',
+      labelName = 'label'
+    } = this.props;
+    const multiple = Array.isArray(this.getOptions() ?? []);
+    const options = multiple ? this.getOptions() : [this.getOptions()];
+    const value = multiple ? [...(this.getValue() ?? [])] : this.getValue();
+    const checked = multiple ? checkValue => {
+      return value.indexOf(checkValue) > -1;
+    } : checkValue => {
+      return checkValue == value;
+    };
+    return /*#__PURE__*/React__default.createElement(StyledPick, {
+      className: 'jr-checkbox'
+    }, options?.map((record, key) => {
+      const recordValue = record[valueName];
+      return /*#__PURE__*/React__default.createElement("label", {
+        key: key
+      }, /*#__PURE__*/React__default.createElement("input", {
+        type: 'checkbox',
+        multiple: multiple,
+        value: recordValue,
+        checked: checked(recordValue),
+        onChange: multiple ? e => {
+          if (e.target.checked) {
+            value.push(recordValue);
+          } else {
+            value.splice(value.indexOf(recordValue), 1);
+          }
+          this.setValue(value.length ? value : null);
+        } : e => {
+          this.setValue(e.target.checked ? recordValue : null);
+        }
+      }), record[labelName]);
+    }));
+  }
+}
+
+class JRText extends JRInput {
+  input() {
+    return /*#__PURE__*/React__default.createElement("input", {
+      value: this.props.value ?? '',
+      style: {
+        height: '24px',
+        width: '100%'
+      },
+      onChange: e => {
+        this.setValue(e.target.value);
+      }
+    });
+  }
+}
+
+export { JRAlert, JRButton, JRCheckbox, JRFields, JRFrame, JRRadio, JRSelect, JRSubmit, JRTable, JRTestReact, JRText, JRWindow };