jrs-react 1.2.47 → 1.2.48

package/src/components/JRSubmit.jsx

@@ -5,306 +5,307 @@ 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']
+  #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))
-                }
-            }
+  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)
-    }
+  }
+  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)
+  }
 
-    put(config = {}) {
-        config = Object.assign(
-            {
-                method:'put'
-                ,updateValue:false
-            }
-            ,this.props['put']
-            ,config
-        )
-        this.submit(config)
-    }
+  post(config = {}) {
+    config = Object.assign(
+      {
+        method: 'post'
+        , updateValue: false
+      }
+      , this.props['post']
+      , config
+    )
+    this.submit(config)
+  }
 
-    delete(config = {}) {
-        config = Object.assign(
-            {
-                method:'delete'
-                ,updateValue:false
-            }
-            ,this.props['delete']
-            ,config
-        )
-        this.submit(config)
-    }
+  put(config = {}) {
+    config = Object.assign(
+      {
+        method: 'put'
+        , updateValue: false
+      }
+      , this.props['put']
+      , config
+    )
+    this.submit(config)
+  }
 
-    get from(){
-        return this.props.value===undefined?'state':'props'
-    }
-    
-    get isDirty(){
-        return this.state?.isDirty
+  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 })
     }
-    set isDirty(isDirty){
-        this.setState({isDirty})
+
+    if (reset) {
+      this.setRawValue(value)
     }
-    get rawValue(){
-        return this.state?.rawValue
+    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)
     }
-    setRawValue(rawValue){
-        this.setState({rawValue:rawValue!=null?JSON.parse(JSON.stringify(rawValue)):null})
+  }
+  #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])
     }
-    reset(){
-        this.setValue(this.rawValue,true)
+  }
+
+  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)
     }
-    setValue(value,reset=false){
-        if(this.props.onChange){
-            this.props.onChange(value)
-        }else{
-            this.setState({value})
-        }
+  }
 
-        if(reset){
-            this.setRawValue(value)
-        }
-        this.isDirty=!reset
+  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
+      }
+
+    if (transformValue) {
+      payload = transformValue.bind(this)(payload)
     }
-    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)
-        }  
+    const headers = {
+      authorization: `Bearer ${localStorage.getItem("accessToken")}`
     }
-    #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])
-        }
+    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
     }
-
-    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)
-        }
+    return {
+      url: colonValueString(url, payload)
+      , method
+      , params1
+      , params2
+      , payload
     }
+  }
 
-    getSubmitValue(){
-        return this.getValue()
+  reload() {
+    po('reload 還沒有做 ')
+  }
+
+  submit(config) {
+    if (config.mask) {
+      config.removeMaskFunction = showMask(config.mask, this.maskId ?? 'jr-mask')
     }
 
-    getAxiosParams({url,method,value,extraValue,sendValue,transformValue,...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
-        }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
+    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)
         }
-        return {
-            url:colonValueString(url,payload)
-            ,method
-            ,params1
-            ,params2
-            ,payload
+      })()
+        .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]
         }
+        return re
+      })
+    } else {
+      response.payload = payload
     }
 
-    reload(){
-        po('reload 還沒有做 ')
-    }
+    response = config?.response?.bind(this)(response, payload) ?? response
+    const isSuccess = response.status >= 200 && response.status <= 299
 
-    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?.()
-            // })
-    }
+    this.setRes(isSuccess, response, config)
 
-    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?.()
+    }
 
-        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?.()
-        }
 
+  }
 
+  showMessage(success, message) {
+    if (message) {
+      po('success', success)
+      po('message', message)
     }
+  }
 
-    showMessage(success,message){
-        if(message){
-            po('success',success)
-            po('message',message)
-        }
-    }
-    
-    renderer(){
-        return
-    }
-    
-    render() {
-        return this.renderer()
-    }
+  renderer() {
+    return
+  }
+
+  render() {
+    return this.renderer()
+  }
 }