jrs-react 1.2.15 → 1.2.16

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,151 @@ 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 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]);
+    }));
+  }
+}
+
+export { JRAlert, JRButton, JRCheckbox, JRFields, JRFrame, JRSelect, JRSubmit, JRTable, JRTestReact, JRWindow };

package/build/index.js

@@ -3544,6 +3544,8 @@ class JRSubmit extends React__default["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);
     }
   }
@@ -3699,7 +3701,7 @@ class JRSubmit extends React__default["default"].Component {
   }
 }
 
-const FreeType$1 = ({
+const FreeType = ({
   tag: Tag,
   config,
   me,
@@ -3723,7 +3725,7 @@ const FreeType$1 = ({
     }, config);
   }
 };
-const StyledJRFrame$1 = styled__default["default"].div`
+const StyledJRFrame = styled__default["default"].div`
     display:flex;
     flex:1;
     overflow:hidden;
@@ -3766,36 +3768,36 @@ const StyledJRFrame$1 = styled__default["default"].div`
 `;
 class JRFrame extends JRSubmit {
   renderer() {
-    return /*#__PURE__*/React__default["default"].createElement(StyledJRFrame$1, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledJRFrame, {
       id: this.props.id,
       style: this.props.style,
       className: `${this.props.className} jr-frame`
-    }, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.start,
       me: this,
       className: 'start'
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "header",
       config: this.props.top,
       me: this
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.left,
       me: this,
       className: 'left'
     }), /*#__PURE__*/React__default["default"].createElement("main", {
       className: 'body'
-    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.right,
       me: this,
       className: 'right'
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "footer",
       config: this.props.bottom,
       me: this
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.end,
       me: this,
@@ -4070,7 +4072,7 @@ class TitleBar extends React__default["default"].Component {
         this.start(e);
       },
       onDoubleClick: this.adjustScreen
-    }, /*#__PURE__*/React__default["default"].createElement(FreeType$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.title ?? '',
       me: this.props.window,
@@ -6029,95 +6031,15 @@ class JRTable extends JRWindow {
 // export const FTable=JRFrameHOC(JRTable)
 // export const WTable=JRWindowHOC(JRTable)
 
-const StyledJRFrame = styled__default["default"].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__default["default"].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["default"].createElement(Tag, {
-      className: className,
-      style: style
-    }, content);
-  }
-};
 class JRTestReact extends JRSubmit {
   renderer() {
-    return /*#__PURE__*/React__default["default"].createElement(StyledJRFrame, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledJRTest, {
       style: this.props.style,
       className: `${this.props.className} jr-frame`
-    }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "div",
-      config: this.props.start,
-      me: this,
-      className: 'start'
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "header",
-      config: this.props.top,
-      me: this
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "div",
-      config: this.props.left,
-      me: this,
-      className: 'left'
-    }), this.renderMe(), /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "div",
-      config: this.props.right,
-      me: this,
-      className: 'right'
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "footer",
-      config: this.props.bottom,
-      me: this
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
-      tag: "div",
-      config: this.props.end,
-      me: this,
-      className: 'end'
-    }));
+    });
   }
   renderMe() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6197,10 +6119,159 @@ function JRAlert(props) {
   })));
 }
 
+const StyledInput = styled__default["default"].div`
+    display:flex;
+    input:focus{
+        outline: none; 
+    }
+`;
+class JRInput extends React__default["default"].Component {
+  setValue(value) {
+    this.props?.onChange?.(value);
+  }
+  render() {
+    return /*#__PURE__*/React__default["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__default["default"].option`
+`;
+const StyledSelect = styled__default["default"].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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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["default"].createElement(StyledOption, props, record[labelName]);
+    })));
+  }
+}
+
+const StyledPick = styled__default["default"].div`
+    >label{
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        height: 30px;
+        padding-right: 12px;
+    }
+`;
+
+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["default"].createElement(StyledPick, {
+      className: 'jr-checkbox'
+    }, options?.map((record, key) => {
+      const recordValue = record[valueName];
+      return /*#__PURE__*/React__default["default"].createElement("label", {
+        key: key
+      }, /*#__PURE__*/React__default["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]);
+    }));
+  }
+}
+
 exports.JRAlert = JRAlert;
 exports.JRButton = JRButton;
+exports.JRCheckbox = JRCheckbox;
 exports.JRFields = JRFields;
 exports.JRFrame = JRFrame;
+exports.JRSelect = JRSelect;
 exports.JRSubmit = JRSubmit;
 exports.JRTable = JRTable;
 exports.JRTestReact = JRTestReact;

package/package.json

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

package/public/data.json

@@ -16,4 +16,14 @@
     }
     ,"father":"Lai"
     ,"mother":"Wong"
+
+    ,"checkbox": [
+        1,
+        3,
+        5
+    ],
+    "select": [
+        2
+    ]
+    ,"radio":1
 }

package/public/list.json

@@ -1,6 +1,7 @@
 [
     {
         "name":"Joren"
+        ,"id":1
         ,"phone":"097459999"
         ,"address":{
             "no":"23"
@@ -10,6 +11,7 @@
     }
     ,{
         "name":"John"
+        ,"id":2
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -18,7 +20,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Oliver"
+        ,"id":3
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -27,7 +30,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Harry"
+        ,"id":4
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -36,7 +40,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Jacob"
+        ,"id":5
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -45,7 +50,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Charlie"
+        ,"id":6
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -54,7 +60,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Thomas"
+        ,"id":7
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -63,7 +70,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"George"
+        ,"id":8
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -72,7 +80,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Oscar"
+        ,"id":9
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -81,7 +90,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"James"
+        ,"id":10
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -90,7 +100,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"William"
+        ,"id":11
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -99,7 +110,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Emily"
+        ,"id":12
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -108,7 +120,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Isla"
+        ,"id":13
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"

package/src/app/App.jsx

@@ -7,10 +7,11 @@ import AxiosApp from './axios/AxiosApp'
 import AlertApp from './alert/AlertApp'
 import { po } from '../components/JRUtils'
 import TestApp from './test'
+import InputApp from './input/InputApp'
 
 function App() {
 	const apps={
-		TableApp,FieldsApp,WindowApp,AxiosApp,AlertApp,TestApp
+		TableApp,FieldsApp,WindowApp,AxiosApp,AlertApp,InputApp,TestApp
 	}
 	return <BrowserRouter>
 		{
@@ -24,14 +25,8 @@ function App() {
 					return <Route path={`/${key}`} element={<App/>} key={key}/>
 				})
 			}
-
-			<Route path="/table" element={<TableApp/>}/>
-			<Route path="/fields" element={<FieldsApp/>}/>
-			<Route path="/window" element={<WindowApp/>}/>
-			<Route path="/axios" element={<AxiosApp/>}/>
-			<Route path="/alert" element={<AlertApp/>}/>
 		</Routes>
-		<div id='play' style={{width:'500px',height:'500px',border:'1px solid gray'}}> </div>
+		{/* <div id='play' style={{width:'500px',height:'500px',border:'1px solid gray'}}> </div> */}
 	</BrowserRouter>
 }
 

package/src/app/fields/FieldsApp.jsx

@@ -16,12 +16,16 @@ const StyledJRFields=styled(JRFields)`
 export default function FieldsApp() {
 	return <>
         <JRFields
+            initValue={{
+                checkbox:[1,3,5]
+                ,select:[2]
+            }}
             {...devFields}
             {...withSomeButton}
             open={true}
-            popup={true}
+            popup={false}
             width={900}
-            height={800}
+            // height={800}
             title={'Fields'}
         />
     </>

package/src/app/fields/fieldsConfig.jsx

@@ -5,6 +5,8 @@ import JRText from "../../components/JRInput/JRText";
 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";
 
 export const fieldsConfig={
         popup:true
@@ -208,11 +210,45 @@ export const normalFields={
                 }
             ]
         }
+        ,{
+            name:'select'
+            ,label:'Select'
+            ,type:JRSelect
+            ,valueName:'id'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,multiple:true
+            ,required:true
+        }
+        ,{}
+        ,{
+            name:'isMember'
+            ,label:'Is member'
+            ,type:JRCheckbox
+            ,option:{
+                value:1
+                ,label:'yes'
+            }
+        }
+        ,{
+            name:'checkbox'
+            ,label:'Checkbox'
+            ,type:JRCheckbox
+            ,valueName:'id'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,required:true
+        }
     ]
     ,cols:2
     ,style:{
         border:'1px solid gray'
     }
+    
 }
 ////////////////////////////////////////////////////////////
 const StyledDiv=styled.div`
@@ -251,7 +287,7 @@ export const withSomeButton={
                 onClick={()=>{
                     this.validate()
                         .then(()=>{
-
+                            alert('is valid')
                         })
                         .catch(()=>{
 
@@ -305,7 +341,7 @@ export const labelLayout={
 export const devFields={
     get:{
         url:'data.json'
-        ,autoRun:true
+        // ,autoRun:true
         ,callback(success,res){
             po('success,data',success,res)
             // setTimeout(()=>{
@@ -357,7 +393,68 @@ export const devFields={
                 ,border:'1px solid black'
                 ,borderRadius: '3px'
             }
+            ,colSpan:2
+        }
+        ,{
+            name:'isMember'
+            ,label:'Is member'
+            ,type:JRCheckbox
+            ,options:{
+                value:1
+                ,label:'yes'
+            }
+            ,required:true
+        }
+        ,{
+            name:'selectSingle'
+            ,label:'Select'
+            ,type:JRSelect
+            ,valueName:'id'
+            ,labelName:'name'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,required:true
+        }
+        ,{
+            name:'checkbox'
+            ,label:'Checkbox'
+            ,type:JRCheckbox
+            ,valueName:'id'
+            ,labelName:'name'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,required:true
+        }
+        ,{
+            name:'select'
+            ,label:'Select'
+            ,type:JRSelect
+            ,valueName:'id'
+            ,labelName:'name'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,multiple:true
+            ,required:true
+        }
+        ,{
+            name:'radio'
+            ,label:'Radio'
+            ,type:JRRadio
+            ,valueName:'id'
+            ,labelName:'name'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,multiple:true
+            ,required:true
         }
     ]
-    ,cols:1
+    ,cols:2
 }

package/src/app/input/InputApp.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import JRFields from "../../components/JRFields/JRFields";
+import { required } from "../../components/JRFields/Validators";
+import JRSelect from "../../components/JRInput/JRSelect";
+export default function InputApp() {
+    const [selectedValue,setSelectedValue]=useState()
+    return <div>
+        <JRSelect
+            get={{
+                url:'list.json'
+                ,autoRun:true
+            }}
+            value={selectedValue}
+            onChange={(value)=>{
+                setSelectedValue(value)
+            }}
+            size={6}
+            multiple={true}
+            valueName={'name'}
+        />
+        [{selectedValue}]
+        <JRFields
+            valueName={'phone'}
+            columns={[
+                {name:'name',label:'Name'
+                    ,type:JRSelect
+                    ,get:{
+                        url:'list.json'
+                        ,autoRun:true
+                    }
+                    ,showBlank:true
+                    ,multiple:true
+                    ,valueName:'name'
+                    // ,size:5
+                    ,required:true
+                }
+            ]}
+            bottom={function(){
+                return JSON.stringify(this.getValue())
+            }}
+        />
+    </div>
+}

package/src/components/JRInput/JRCheckbox.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import JROptions from "../JROptions";
+import styled from "styled-components";
+import { StyledPick } from "./JRRadio";
+
+
+export default  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 <StyledPick className={'jr-checkbox'}>
+            {
+                options?.map((record,key)=>{
+                    const recordValue=record[valueName]
+                    return <label key={key}>
+                        <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]}
+                    </label>
+                })
+            }
+        </StyledPick>
+    }
+}

package/src/components/JRInput/JRRadio.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import JROptions from "../JROptions";
+import styled from "styled-components";
+
+
+export const StyledPick=styled.div`
+    >label{
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        height: 30px;
+        padding-right: 12px;
+    }
+`
+export class JRRadio extends JROptions{
+    renderer(){
+        const {valueName='value',labelName='label',onChange,...props}=this.props
+        const options=this.getOptions()
+        return <StyledPick className={'jr-radio'}>
+            {
+                options?.map((record,key)=>{
+                    const recordValue=record[valueName]
+                    return <label key={key}>
+                        <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]}
+                    </label>
+                })
+            }
+        </StyledPick>
+    }
+}

package/src/components/JRInput/JRSelect.jsx

@@ -1,19 +1,64 @@
 import React from "react";
 import { po } from "../JRUtils";
 import JRInput from "./JRInput";
+import JROptions from "../JROptions";
+import styled from "styled-components";
 
-export default class JRSelect extends JRInput{
-    input(){
-        return <select value={this.props.value}
-            style={{
-                height: '30px'
-                ,width: '100%'
-            }}
+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;
+    }
+`
+export default 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 <>
+        <StyledSelect 
+            value={this.getValue()??(multiple?[]:'')}
+            className={'jr-select'}
             onChange={(e)=>{
-                this.setValue(e.target.value)
+                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}
         >
-            <option value={1}>A</option>
-        </select>
+            {
+                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 <StyledOption {...props}>
+                        {record[labelName]}
+                    </StyledOption>
+                })
+            }
+        </StyledSelect>
+        </>
     }
 }

package/src/components/JROptions.jsx

@@ -0,0 +1,24 @@
+import JRSubmit from "./JRSubmit"
+
+export default 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)
+        }  
+    }
+}

package/src/components/JRSubmit.jsx

@@ -142,6 +142,8 @@ export default class JRSubmit extends React.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)
         }
     }

package/src/components/JRTest.jsx

@@ -2,40 +2,8 @@ import React from 'react'
 import styled from "styled-components";
 import JRSubmit from './JRSubmit'
 
-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})=>{
@@ -51,19 +19,8 @@ const FreeType=({tag:Tag,config,me,className})=>{
 
 export default class JRTestReact extends JRSubmit {
     renderer(){
-        return <StyledJRFrame style={this.props.style} className={`${this.props.className} jr-frame`} >
-            <FreeType tag='div' config={this.props.start} me={this} className={'start'}/>
-            <main>
-                <FreeType tag='header' config={this.props.top} me={this}/>
-                <main>
-                    <FreeType tag='div' config={this.props.left} me={this} className={'left'}/>
-                    {this.renderMe()}
-                    <FreeType tag='div' config={this.props.right} me={this} className={'right'}/>
-                </main>
-                <FreeType tag='footer' config={this.props.bottom} me={this}/>
-            </main>
-            <FreeType tag='div' config={this.props.end} me={this} className={'end'}/>
-        </StyledJRFrame>
+        return <StyledJRTest style={this.props.style} className={`${this.props.className} jr-frame`} >
+        </StyledJRTest>
     }
     renderMe(){
         return <div style={{flex:1}}>Render me</div>

package/src/index.js

@@ -6,9 +6,13 @@ import JRFields from './components/JRFields/JRFields'
 import JRTestReact from './components/JRTest'
 import JRButton from './components/JRInput/JRButton'
 import JRAlert from './components/JRAlert'
+import JRSelect from './components/JRInput/JRSelect'
+import JRCheckbox from './components/JRInput/JRCheckbox'
 
 export {
     JRTestReact
     ,JRSubmit,JRFrame,JRWindow,JRTable,JRFields,JRAlert
     ,JRButton
+    ,JRSelect,JRCheckbox
+
 }