jrs-react 1.2.15 → 1.2.17

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,11 +6119,208 @@ 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 JRRadio extends JROptions {
+  renderer() {
+    const {
+      valueName = 'value',
+      labelName = 'label',
+      onChange,
+      ...props
+    } = this.props;
+    const options = this.getOptions();
+    return /*#__PURE__*/React__default["default"].createElement(StyledPick, {
+      className: 'jr-radio'
+    }, options?.map((record, key) => {
+      const recordValue = record[valueName];
+      return /*#__PURE__*/React__default["default"].createElement("label", {
+        key: key
+      }, /*#__PURE__*/React__default["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["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]);
+    }));
+  }
+}
+
+class JRText extends JRInput {
+  input() {
+    return /*#__PURE__*/React__default["default"].createElement("input", {
+      value: this.props.value ?? '',
+      style: {
+        height: '24px',
+        width: '100%'
+      },
+      onChange: e => {
+        this.setValue(e.target.value);
+      }
+    });
+  }
+}
+
 exports.JRAlert = JRAlert;
 exports.JRButton = JRButton;
+exports.JRCheckbox = JRCheckbox;
 exports.JRFields = JRFields;
 exports.JRFrame = JRFrame;
+exports.JRRadio = JRRadio;
+exports.JRSelect = JRSelect;
 exports.JRSubmit = JRSubmit;
 exports.JRTable = JRTable;
 exports.JRTestReact = JRTestReact;
+exports.JRText = JRText;
 exports.JRWindow = JRWindow;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.15",
+	"version": "1.2.17",
 	"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'}
         />
     </>