jrs-react 1.2.48 → 1.2.50

package/src/components/JRSubmit.jsx

@@ -5,307 +5,308 @@ import styled from 'styled-components'
 import { showMask } from './JRMask/JRMask'
 
 const axiosSubmit = axios.create({
-  authorization: `Bearer ${localStorage.getItem("accessToken")}`
-  , timeout: 120000
-  , maxBodyLength: 104857600 //100mb 104857600
-  , maxContentLength: 104857600 //100mb
+    authorization: `Bearer ${localStorage.getItem("accessToken")}`
+    ,timeout: 120000
+    ,maxBodyLength: 104857600 //100mb 104857600
+    ,maxContentLength: 104857600 //100mb
 })
 
-const StyledCover = styled.div`
+const StyledCover=styled.div`
     border:2px solid red;
 `
-const Cover = ({ children }) => {
-  return <StyledCover>{children}</StyledCover>
+const Cover=({children})=>{
+    return <StyledCover>{children}</StyledCover>
 }
 
 export default class JRSubmit extends React.Component {
-  #methods = ['get', 'post', 'put', 'patch', 'delete', 'download']
-
-  constructor(props) {
-    super(props)
-    if (this.props.value === undefined && this.props.initValue !== undefined) {
-      if (this.props.onChange === undefined) {
-        this.state = {
-          value: props.initValue
-          , rawValue: JSON.parse(JSON.stringify(props.initValue))
+    #methods = ['get', 'post', 'put','patch','delete','download']
+    constructor(props) {
+        super(props)
+        if(this.props.value===undefined && this.props.initValue!==undefined ){
+            if(this.props.onChange===undefined){
+                this.state={
+                    value:props.initValue
+                    ,rawValue:JSON.parse(JSON.stringify(props.initValue))
+                }
+            }
         }
-      }
     }
-  }
-  componentDidMount() {
-    this.#methods
-      .filter((method) => this[method] && this.props[method] && this.props[method].autoRun)
-      .forEach((method) => {
-        if (this.props[method].autoRun === true) {
-          this[method]()
-        } else if (this.props[method].autoRun > -1) {
-          setTimeout(() => {
-            this[method]()
-          }, this.props[method].autoRun)
-        }
-      })
-  }
-  get(_config = {}) {
-    const config = Object.assign(
-      {
-        method: 'get'
-        , updateValue: true
-        // ,updateRawValue:true
-      }
-      , this.props['get']
-      , _config
-    )
-    this.submit(config)
-  }
-
-  post(config = {}) {
-    config = Object.assign(
-      {
-        method: 'post'
-        , updateValue: false
-      }
-      , this.props['post']
-      , config
-    )
-    this.submit(config)
-  }
-
-  put(config = {}) {
-    config = Object.assign(
-      {
-        method: 'put'
-        , updateValue: false
-      }
-      , this.props['put']
-      , config
-    )
-    this.submit(config)
-  }
-
-  delete(config = {}) {
-    config = Object.assign(
-      {
-        method: 'delete'
-        , updateValue: false
-      }
-      , this.props['delete']
-      , config
-    )
-    this.submit(config)
-  }
-
-  get from() {
-    return this.props.value === undefined ? 'state' : 'props'
-  }
-
-  get isDirty() {
-    return this.state?.isDirty
-  }
-  set isDirty(isDirty) {
-    this.setState({ isDirty })
-  }
-  get rawValue() {
-    return this.state?.rawValue
-  }
-  setRawValue(rawValue) {
-    this.setState({ rawValue: rawValue != null ? JSON.parse(JSON.stringify(rawValue)) : null })
-  }
-  reset() {
-    this.setValue(this.rawValue, true)
-  }
-  setValue(value, reset = false) {
-    if (this.props.onChange) {
-      this.props.onChange(value)
-    } else {
-      this.setState({ value })
-    }
-
-    if (reset) {
-      this.setRawValue(value)
+    componentDidMount(){
+        this.#methods
+        .filter((method) => this[method] && this.props[method] && this.props[method].autoRun)
+        .forEach((method) => {
+            if(this.props[method].autoRun===true){
+                this[method]()
+            } else if(this.props[method].autoRun>-1){
+                setTimeout(()=>{
+                    this[method]()
+                },this.props[method].autoRun)
+            }
+        })
     }
-    this.isDirty = !reset
-  }
-  setRes(isSuccess, response, config) {
-    if (isSuccess && config.updateValue) {
-      const value = config.formatValue?.bind(this)(response.data) ?? response.data
-      response.data = value
-      this.setValue(value, true)
-    } else if (config.updateValue) {
-      this.setValue(null, true)
+    get(_config = {}) {
+        const config = Object.assign(
+            {
+                method:'get'
+                ,updateValue:true
+                // ,updateRawValue:true
+            }
+            ,this.props['get']
+            ,_config
+        )
+        this.submit(config)
     }
-  }
-  #getValueByName(fullnamList, record) {
-    const name = fullnamList.shift()
-    if (fullnamList.length == 0) {
-      return record?.[name]
-    } else if (record?.[name] != null) {
-      return this.#getValueByName(fullnamList, record[name])
+    
+    post(config = {}) {
+        config = Object.assign(
+            {
+                method:'post'
+                ,updateValue:false
+            }
+            ,this.props['post']
+            ,config
+        )
+        this.submit(config)
     }
-  }
 
-  getValue(fullname) {
-    if (fullname) {
-      const fullnamList = fullname.split('.')
-      return this.#getValueByName(fullnamList, this[this.from]?.value)
-    } else {
-      // 忘記為甚麼這樣寫了 XDD
-      return flexType(this[this.from]?.value, this, null, null)
+    put(config = {}) {
+        config = Object.assign(
+            {
+                method:'put'
+                ,updateValue:false
+            }
+            ,this.props['put']
+            ,config
+        )
+        this.submit(config)
     }
-  }
-
-  getSubmitValue() {
-    return this.getValue()
-  }
 
-  getAxiosParams({ url, method, value, extraValue, sendValue, transformValue, responseType = 'json', ...params }) {
-
-    const _extraValue = extraValue?.bind?.(this)() ?? extraValue
-    // let payload=typeof value === 'function'
-    //     ?value.bind(this)({
-    //         ...this.getSubmitValue()
-    //         ,..._extraValue
-    //     })
-    //     :value==null
-    //         ?{
-    //             ...this.getSubmitValue()
-    //             ,..._extraValue
-    //         }
-    //         :{
-    //             ...value
-    //             ,..._extraValue
-    //         }
-    let payload = value?.bind?.(this)({
-      ...this.getSubmitValue()
-      , ..._extraValue
-    })
-      ?? value == null
-      ? {
-        ...this.getSubmitValue()
-        , ..._extraValue
-      }
-      : {
-        ...value
-        , ..._extraValue
-      }
+    delete(config = {}) {
+        config = Object.assign(
+            {
+                method:'delete'
+                ,updateValue:false
+            }
+            ,this.props['delete']
+            ,config
+        )
+        this.submit(config)
+    }
 
-    if (transformValue) {
-      payload = transformValue.bind(this)(payload)
+    get from(){
+        return this.props.value===undefined?'state':'props'
     }
-    const headers = {
-      authorization: `Bearer ${localStorage.getItem("accessToken")}`
+    
+    get isDirty(){
+        return this.state?.isDirty
     }
-    let params1 = { responseType }
-    const params2 = {}
-    if (method == 'get') {
-      if (sendValue == null || sendValue) params1.params = payload
-      params1.headers = headers
-    } else if (method == 'delete') {
-      if (sendValue == null || sendValue) params1.data = payload
-      params1.headers = headers
-    } else {
-      if (sendValue == null || sendValue) {
-        params1 = payload
-      } else {
-        params1 = null
-      }
-      params2.headers = headers
+    set isDirty(isDirty){
+        this.setState({isDirty})
     }
-    return {
-      url: colonValueString(url, payload)
-      , method
-      , params1
-      , params2
-      , payload
+    get rawValue(){
+        return this.state?.rawValue
     }
-  }
-
-  reload() {
-    po('reload 還沒有做 ')
-  }
-
-  submit(config) {
-    if (config.mask) {
-      config.removeMaskFunction = showMask(config.mask, this.maskId ?? 'jr-mask')
+    setRawValue(rawValue){
+        this.setState({rawValue:rawValue!=null?JSON.parse(JSON.stringify(rawValue)):null})
     }
-
-    let _payload
-      ; (() => {
-        if (Array.isArray(config.url)) {
-          _payload = []
-          return Promise.allSettled(
-            config.url.map((_url) => {
-              const urlParams = typeof _url === 'object'
-                ? _url
-                : { url: _url }
-              const finalConfig = Object.assign(config, urlParams)
-              const { url, method, params1, params2, payload } = this.getAxiosParams(finalConfig)
-              _payload.push(payload)
-              return axiosSubmit[method](url, params1, params2)
-            })
-          )
-        } else {
-          const { url, method, params1, params2, payload } = this.getAxiosParams(config)
-          _payload = payload
-          return axiosSubmit[method](url, params1, params2)
+    reset(){
+        this.setValue(this.rawValue,true)
+    }
+    setValue(value,reset=false){
+        if(this.props.onChange){
+            this.props.onChange(value)
+        }else{
+            this.setState({value})
         }
-      })()
-        .then((res) => {
-          this.handleResponse(res, _payload, config)
-        })
-        .catch((res) => {
-          this.handleResponse(res, _payload, config)
-        })
-    // .finally(()=> {
-    // config.removeMaskFunction?.()
-    // })
-  }
 
-  handleResponse = (response, payload, config) => {
-    if (Array.isArray(response)) {
-      response = response.map((re, index) => {
-        if (re.value) {
-          re.value.payload = payload[index]
-        } else if (re.reason) {
-          re.reason.payload = payload[index]
+        if(reset){
+            this.setRawValue(value)
+        }
+        this.isDirty=!reset
+    }
+    setRes(isSuccess,response,config){
+        if (isSuccess && config.updateValue) {
+            const value=config.formatValue?.bind(this)(response.data)??response.data
+            response.data=value
+            this.setValue(value,true)
+        } else if(config.updateValue){
+            this.setValue(null,true)
+        }  
+    }
+    #getValueByName(fullnamList,record){
+        const name=fullnamList.shift()
+        if(fullnamList.length==0){
+            return record?.[name]
+        }else if(record?.[name]!=null){
+            return this.#getValueByName(fullnamList,record[name])
         }
-        return re
-      })
-    } else {
-      response.payload = payload
     }
 
-    response = config?.response?.bind(this)(response, payload) ?? response
-    const isSuccess = response.status >= 200 && response.status <= 299
-
-    this.setRes(isSuccess, response, config)
+    getValue(fullname){
+        if(fullname){
+            const fullnamList=fullname.split('.')
+            return this.#getValueByName(fullnamList,this[this.from]?.value)
+        }else{
+            // 忘記為甚麼這樣寫了 XDD
+            return flexType(this[this.from]?.value,this,null,null)
+        }
+    }
 
-    if (config.delay != null) {
-      setTimeout(() => {
-        this.showMessage(isSuccess, isSuccess ? config.successMessage : config.failedMessage)
-        config.callback?.bind(this)(isSuccess, response, payload)
-        config.removeMaskFunction?.()
-      }, config.delay)
-    } else {
-      this.showMessage(isSuccess, isSuccess ? config.successMessage : config.failedMessage)
-      config.callback?.bind(this)(isSuccess, response, payload)
-      config.removeMaskFunction?.()
+    getSubmitValue(){
+        return this.getValue()
     }
 
+    getAxiosParams({url,method,value,extraValue,sendValue,transformValue,paramsSerializer
+        ,...params
+    }){
+        po('params',params)
+        const _extraValue=extraValue?.bind?.(this)() ?? extraValue
+        // let payload=typeof value === 'function'
+        //     ?value.bind(this)({
+        //         ...this.getSubmitValue()
+        //         ,..._extraValue
+        //     })
+        //     :value==null
+        //         ?{
+        //             ...this.getSubmitValue()
+        //             ,..._extraValue
+        //         }
+        //         :{
+        //             ...value
+        //             ,..._extraValue
+        //         }
+        let payload=value?.bind?.(this)({
+                ...this.getSubmitValue()
+                ,..._extraValue
+            }) 
+            ?? value==null
+                ?{
+                    ...this.getSubmitValue()
+                    ,..._extraValue
+                }
+                :{
+                    ...value
+                    ,..._extraValue
+                }
+            
+        if(transformValue){
+            payload=transformValue.bind(this)(payload)
+        }
+        const headers={
+           authorization: `Bearer ${localStorage.getItem("accessToken")}`
+        }    
+        let params1={}
+        const params2={}
+        if(method=='get'){
+            if(sendValue==null || sendValue) params1.params=payload
+            params1.headers=headers
+            params1.paramsSerializer={
+                indexes: null
+                ,...paramsSerializer
+            }
+        }else if(method=='delete'){
+            if(sendValue==null || sendValue) params1.data=payload
+            params1.headers=headers
+        }else{
+            if(sendValue==null || sendValue){
+                params1=payload
+            }else{
+                params1=null
+            }
+            params2.headers=headers
+        }
+        return {
+            url:colonValueString(url,payload)
+            ,method
+            ,params1
+            ,params2
+            ,payload
+        }
+    }
 
-  }
+    reload(){
+        po('reload 還沒有做 ')
+    }
 
-  showMessage(success, message) {
-    if (message) {
-      po('success', success)
-      po('message', message)
+    submit(config){
+        if(config.mask) {
+            config.removeMaskFunction=showMask(config.mask,this.maskId??'jr-mask')
+        }
+            
+        let _payload
+        ;(()=>{
+            if (Array.isArray(config.url)) {
+                _payload=[]
+                return Promise.allSettled(
+                    config.url.map((_url) => {
+                        const urlParams=typeof _url === 'object'
+                            ?_url
+                            :{url: _url}
+                        const finalConfig=Object.assign(config,urlParams)
+                        const {url,method,params1,params2,payload}=this.getAxiosParams(finalConfig)
+                        _payload.push(payload)
+                        return axiosSubmit[method](url,params1,params2)
+                    })
+                )
+            }else{
+                const {url,method,params1,params2,payload}=this.getAxiosParams(config)
+                _payload=payload
+                return axiosSubmit[method](url,params1,params2)
+            }
+        })()
+            .then((res)=>{
+                this.handleResponse(res,_payload,config)
+            })
+            .catch((res)=>{
+                this.handleResponse(res,_payload,config)
+            })
+            // .finally(()=> {
+                // config.removeMaskFunction?.()
+            // })
     }
-  }
 
-  renderer() {
-    return
-  }
+    handleResponse=(response,payload,config)=>{
+        if(Array.isArray(response)){
+            response=response.map((re,index)=>{
+                if(re.value){
+                    re.value.payload=payload[index]
+                }else if(re.reason){
+                    re.reason.payload=payload[index]
+                }
+                return re
+            })
+        }else{
+            response.payload=payload
+        }
+            
+        response = config?.response?.bind(this)(response,payload) ?? response
+        const isSuccess = response.status >= 200 && response.status <= 299
+        this.setRes(isSuccess,response,config)
+        if(config.delay!=null){
+            setTimeout(()=>{
+                this.showMessage(isSuccess,isSuccess?config.successMessage:config.failedMessage)
+                config.callback?.bind(this)(isSuccess,response,payload)
+                config.removeMaskFunction?.()
+            },config.delay)
+        }else{
+            this.showMessage(isSuccess,isSuccess?config.successMessage:config.failedMessage)
+            config.callback?.bind(this)(isSuccess,response,payload)
+            config.removeMaskFunction?.()
+        }
+    }
 
-  render() {
-    return this.renderer()
-  }
+    showMessage(success,message){
+        if(message){
+            po('success',success)
+            po('message',message)
+        }
+    }
+    
+    renderer(){
+        return
+    }
+    
+    render() {
+        return this.renderer()
+    }
 }

package/src/components/JRWindow/JRWindow.jsx

@@ -74,13 +74,16 @@ class Backdrop extends JRHTML{
         Object.assign(this.backdropConfig.style,params.backdropStyle)
 	}
 
-
     show(){
         this.backdrop=this.agregarHijo(this.backdropConfig)
+        this.on=true
     }
     hide(){
-        this.yo.removeChild(this.yo.children[this.yo.children.length-1])
-        this.hijos=[]
+        if(this.on){
+            this.yo.removeChild(this.yo.children[this.yo.children.length-1])
+            this.hijos=[]
+            this.on=false
+        }
     }
 }
 
@@ -147,6 +150,10 @@ export default class JRWindow extends JRFrame {
         }
     }
 
+    componentWillUnmount(){
+        this.backdropTarget?.hide()
+    }
+
     open(){
         this.backdropTarget?.show()
         this.props.onOpen?.bind(this)()

package/src/main.jsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './app/index.css'
-import App from './app/App.jsx'
-import JRFields from './components/JRFields/JRFields.jsx'
-import JRText from './components/JRInput/JRText.jsx'
-
-const root = createRoot(document.getElementById('root'))
-root.render(<App/>)
-
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './app/index.css'
+import App from './app/App.jsx'
+import JRFields from './components/JRFields/JRFields.jsx'
+import JRText from './components/JRInput/JRText.jsx'
+
+const root = createRoot(document.getElementById('root'))
+root.render(<App/>)
+