jrs-react 1.2.12 → 1.2.14

package/src/components/JRTable/JRTable.jsx

@@ -5,6 +5,9 @@ import { StyledJRTable } from "./StyledJRTable";
 import JRFrame from "../JRFrame/JRFrame";
 import React from "react";
 import JRWindow from "../JRWindow/JRWindow";
+import JRSubmit from "../JRSubmit";
+import { JRFrameHOC } from "../JRFrame/JRFrameHOC";
+import { JRWindowHOC } from "../JRWindow/JRWindowHOC";
 
 
 const getMapObject=(map,names)=>{
@@ -38,9 +41,6 @@ export default class JRTable extends JRWindow {
     }
 
     //------------------------------------------------------------------------------------
-    getChecked(){
-        return [1,2,3,4]
-    }
     checkableColumn(props){
         return {//方法1
             render({value,onChange}){
@@ -195,8 +195,7 @@ export default class JRTable extends JRWindow {
             }
             this.setValue(this.getValue())
         }else{
-            //未完成. 沒有資料的時候, 要考慮有或沒有dataSourceName的不同處理
-            this.setValue({[this.props.dataSourceName]:[record]})
+            this.setValue(this.props.dataSourceName?{[this.props.dataSourceName]:[record]}:[record])
         }
     }
 
@@ -230,7 +229,11 @@ export default class JRTable extends JRWindow {
                     table={this}
                 />
             </table>
-            <div className={'empty'}>{this.noData() && '無資料'}</div>
+            {this.noData() && <div className={'empty'}></div>}
+           
         </StyledJRTable>
     }
-}
+}
+
+// export const FTable=JRFrameHOC(JRTable)
+// export const WTable=JRWindowHOC(JRTable)

package/src/components/JRTable/StyledJRTable.jsx

@@ -130,5 +130,13 @@ export const StyledJRTable=styled.div`
         display:flex;
         justify-content: center;
         align-items: center;
+
+        
     }    
+
+    > .empty::after{
+        content:'無資料';
+        position: block;
+    }
+
 `

package/src/components/JRTable/THead.jsx

@@ -29,7 +29,7 @@ const Ths=({deep,rowColumn,rowIndex,table})=>{
             {/* [s={column.colSpan??0}]
             [c={column.columnNo??0}] */}
             {
-                table.props.resizableColumns===true 
+                (table.props.resizableColumns===undefined || table.props.resizableColumns)
                 && <Slider table={table} thRef={thRef} column={column}/>
             }
         </th>

package/src/components/JRWindow/JRWindow.jsx

@@ -5,22 +5,27 @@ import TitleBar from "./TitleBar";
 import { po } from "../JRUtils";
 import Slider from "./Slider";
 import Sliders from "./Slider";
+import Fields from "../JRFields/JRFields";
+import JRText from "../JRInput/JRText";
+import style from './Style.module.css'
 
 
 const StyledJRWindow=styled.div`
     --jr-window-radius:3px;
     --padding-child:8px;
-    --transition-x-y:height .1s ease-in, width .1s ease-in;
+    --transition-x-y:height .05s ease-in, width .05s ease-in;
     xborder:1px solid gray;
     position: fixed;
     padding: ${({$thick})=>$thick}px;
     border-radius: var(--jr-window-radius);
+user-select: text;
 
     top: ${({$y})=>$y}px;
     left: ${({$x})=>$x}px;
     width: ${({$width=300})=>`${$width}px`};
     height: ${({$height=300})=>`${$height}px`};
     overflow: hidden;
+    z-index: 2;
 
     display: flex;
     flex-direction: column;
@@ -29,19 +34,19 @@ const StyledJRWindow=styled.div`
     > main{
         border-radius: var(--jr-window-radius);
         box-shadow: 0px 0px 5px 1px gray;
-        Xbackground: white;
         display: flex;
         flex-direction: column;
         overflow: hidden;
         flex:1;
         > main {
-            background: white;
             Xpadding:var(--padding-child);
             overflow: overlay;
             flex:1;
             display: flex;
+            min-height:32px;
         }
     }
+
 `
 export default class JRWindow extends JRFrame {
     x=0
@@ -57,9 +62,67 @@ export default class JRWindow extends JRFrame {
         this.titleBarRef=React.createRef()
         this.init()
     }
-    componentWillUpdate(prevProps, prevState, snapshot){
-        if(this.props.popup===true && this.props.open===true && prevProps.open===false){
-            this.props.onOpen?.bind(this)()
+
+    addMaskToTarget=(target)=>{
+        this.mask=document.createElement('div')
+        this.mask.style.background='#868686cc'
+        this.mask.style.position='absolute'
+        this.mask.style.top='0'
+        this.mask.style.left='0'
+        this.mask.style.right='0'
+        this.mask.style.bottom='0'
+        this.mask.style.borderRadius='inherit'
+        this.mask.style.height='10000px'
+        this.mask.style.width='10000px'
+        target.appendChild(this.mask)
+        po('style.mask',style.mask)
+        po('addMask+++++++++++++++++++++++++++')
+    }
+    removeMaskFromTarget=()=>{
+        po('removeMask-----------------------')
+        this.mask.remove()
+    }
+
+    maskOnTarget(on){
+        po('typeof this.props.maskOn',typeof this.props.maskOn)
+        const target=(typeof this.props.maskOn)==='object'
+            ?this.props.maskOn
+            :typeof this.props.maskOn ==='string'
+                ?document.getElementById(this.props.maskOn)
+                :document.body
+
+        // this[on?'addMaskToTarget':'removeMaskFromTarget'](target)
+        target?.classList[on?'add':'remove']('withMask')
+    }
+
+    componentDidMount(){
+        super.componentDidMount()
+        if(this.props.maskOn && this.props.open){
+            this.maskOnTarget(this.props.open)
+        }
+
+        if(this.props.open){
+            this.open()
+        }
+    }
+
+    open(){
+        this.props.onOpen?.bind(this)()
+    }
+    close(){
+        this.props.onClose?.bind(this)()
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot){
+        if(this.props.popup===true){
+            if(this.props.open && prevProps.open===false){
+                this.open()
+            }else if(this.props.open===false  && prevProps.open){
+                this.close()
+            }
+            if(this.props.maskOn && this.props.open!=prevProps.open){
+                this.maskOnTarget(this.props.open)
+            }
         }
     }
     init(){
@@ -68,10 +131,10 @@ export default class JRWindow extends JRFrame {
         this.x=this.props.x??((window.innerWidth-(this.width??300))/2)
         this.y=this.props.y??(window.innerHeight-(this.height??300))/2
     }
+
     renderer(){
-        
         return this.props.popup===true
-            ?this.props.open===true
+            ?this.props.open
                 ?<StyledJRWindow
                     ref={this.ref}
                     className={`jr-window ${this.props.className??''}`}
@@ -88,7 +151,7 @@ export default class JRWindow extends JRFrame {
                             window={this}
                             title={this.props.title}
                             thick={this.thick} 
-                            />
+                        />
                         <main>
                             {super.renderer()}
                         </main>
@@ -103,4 +166,5 @@ export default class JRWindow extends JRFrame {
                 :''
             :super.renderer()
     }
-}
+}
+

package/src/components/JRWindow/JRWindowHOC.jsx

@@ -0,0 +1,114 @@
+import React from "react";
+import JRFields from "../JRFields/JRFields";
+import styled from "styled-components";
+import Sliders from "./Slider";
+import TitleBar from "./TitleBar";
+
+
+const StyledJRWindow=styled.div`
+    --jr-window-radius:3px;
+    --padding-child:8px;
+    --transition-x-y:height .05s ease-in, width .05s ease-in;
+    xborder:1px solid gray;
+    position: fixed;
+    padding: ${({$thick})=>$thick}px;
+    border-radius: var(--jr-window-radius);
+
+    top: ${({$y})=>$y}px;
+    left: ${({$x})=>$x}px;
+    width: ${({$width=300})=>`${$width}px`};
+    height: ${({$height=300})=>`${$height}px`};
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    
+    > main{
+        border-radius: var(--jr-window-radius);
+        box-shadow: 0px 0px 5px 1px gray;
+        Xbackground: white;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        flex:1;
+        > main {
+            background: white;
+            Xpadding:var(--padding-child);
+            overflow: overlay;
+            flex:1;
+            display: flex;
+        }
+    }
+
+    @container (min-width: 700px) {
+        &{
+            border: 1px solid red;
+            }
+    }
+`
+
+export const  JRWindowHOC = (WrappedComponent) => {
+    return class extends React.Component {
+        x=0
+        y=0
+        width=300
+        height=300
+        padding=1
+        thick=5
+        
+        constructor(props){
+            super(props)
+            this.ref=React.createRef()
+            this.titleBarRef=React.createRef()
+            this.init()
+        }
+        componentWillUpdate(prevProps, prevState, snapshot){
+            if(this.props.popup===true && this.props.open===true && prevProps.open===false){
+                this.props.onOpen?.bind(this)()
+            }
+        }
+        init(){
+            this.height=window.innerHeight>=(this.props.height??this.height)?(this.props.height??this.height):window.innerHeight
+            this.width=window.innerWidth>=(this.props.width??this.width)?(this.props.width??this.width):window.innerWidth
+            this.x=this.props.x??((window.innerWidth-(this.width??300))/2)
+            this.y=this.props.y??(window.innerHeight-(this.height??300))/2
+        }
+        
+        render() {
+            return this.props.popup===true
+                ?this.props.open===true
+                    ?<StyledJRWindow
+                        ref={this.ref}
+                        className={`jr-window ${this.props.className??''}`}
+                        $x={this.x}
+                        $y={this.y}
+                        $width={this.width}
+                        $height={this.height}
+                        $thick={this.thick}
+                    >
+                        <main>
+                            <TitleBar 
+                                titleBarRef={this.titleBarRef}
+                                windowRef={this.ref} 
+                                window={this}
+                                title={this.props.title}
+                                thick={this.thick} 
+                                />
+                            <main>
+                                <WrappedComponent {...this.props}   />
+                            </main>
+                        </main>
+                        <Sliders 
+                            thick={this.thick} 
+                            windowRef={this.ref} 
+                            window={this} 
+                            titleBarRef={this.titleBarRef}
+                        />
+                    </StyledJRWindow>
+                    :''
+                :<WrappedComponent {...this.props} />
+        }
+    }
+};
+

package/src/components/JRWindow/Slider.jsx

@@ -2,7 +2,6 @@ import React from "react"
 import styled from "styled-components"
 import { po } from "../JRUtils"
 
-const borderWidth='px'
 const directions=['n','e','s','w','nww','nnw','nne','nee','sse','see','sww','ssw']
 export default class Sliders extends React.Component {
     render(){
@@ -39,7 +38,7 @@ const StyledSlider=styled.div`
 class Slider extends React.Component {
     width='3px'
     borderWidth='px'
-    borderLong=30
+    borderLong=5
 
     constructor(props){
         super(props);
@@ -201,15 +200,12 @@ class Slider extends React.Component {
         let y=cursorY-(this.props.thick)
         if(y<0)y=0
         let height=startHeight+(startY-y)
-
         if(height<titleBarHeight+(this.props.thick*2)){
             height=titleBarHeight+(this.props.thick*2)
             y=startY + startHeight - titleBarHeight - (this.props.thick*2)
         }
-
         window.style.top=`${y}px`
         window.style.height=`${height}px`
-
     }
     resizeE=({window,clientX,left,titleBarHeight})=>{
         let width=clientX-left-this.props.thick
@@ -248,14 +244,16 @@ class Slider extends React.Component {
         if(x>window.innerWidth)this.props.windowRef.current.style.left = `${window.innerWidth-width}px`
         document.body.style.cursor='default'
         window.removeEventListener('mousemove',this.move)
+        window.removeEventListener('mousemove',this.preMove)
         window.removeEventListener('mouseup',this.stop)
     }
     move=(e)=>{
         e.preventDefault()
+        this.props.windowRef.current.style.transition='unset'
         const {clientX,clientY,x:cursorX,y:cursorY}=e
         const window=this.props.windowRef.current
         const {left,top}=window.getBoundingClientRect()
-        const {x:startX,width:startWidth,y:startY,height:startHeight,titleBarHeight}=this.data
+        let {x:startX,width:startWidth,y:startY,height:startHeight,titleBarHeight}=this.data
         
         this.directions[this.props.direction].resize({
             window,titleBarHeight
@@ -263,20 +261,25 @@ class Slider extends React.Component {
             ,clientY,cursorY,startY,startHeight,top
         })
     }
+    preMove=()=>{
+        if(this.props.direction.indexOf('n')>-1){
+            this.props.windowRef.current.style.height=`${this.props.window.orgHeight}px`
+            this.data.height=this.props.window.orgHeight
+            this.props.window.orgHeight=null
+        }
+        window.removeEventListener('mousemove',this.preMove)
+        setTimeout(()=>{
+            window.addEventListener('mousemove',this.move)
+        },100)
+    }
     start=(e,direction)=>{
         e.preventDefault()
         const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
         let {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
 
-        if(direction.indexOf('n')>-1){
-            if(this.props.window.orgHeight){
-                height=this.props.window.orgHeight
-                this.props.window.orgHeight=null
-            }
-        }else if(direction.indexOf('s')>-1){
+        if(this.props.direction.indexOf('s')>-1){
             this.props.window.orgHeight=null
         }
-
         this.data={
             x,y
             ,width
@@ -284,9 +287,12 @@ class Slider extends React.Component {
             ,titleBarHeight
             ,direction
         }
-        this.props.windowRef.current.style.transition='unset'
         document.body.style.cursor=this.directions[this.props.direction].cursor
-        window.addEventListener('mousemove',this.move)
+        if(this.props.window.orgHeight){
+            window.addEventListener('mousemove',this.preMove)
+        }else{
+            window.addEventListener('mousemove',this.move)
+        }
         window.addEventListener('mouseup',this.stop)
     }
 

package/src/components/JRWindow/Style.module.css

@@ -0,0 +1,35 @@
+.test {
+    color: red;
+    border: 1px solid red;
+}
+
+.withMask{
+    position: relative;
+    overflow: hidden !important;
+    user-select: none;
+    &::after{
+        content:'' ;
+        background : #868686cc; 
+        a:#868686cc;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: inherit;
+        height: 10000px;
+        width: 10000px;
+    }
+}
+
+mask{
+    background : #868686cc; 
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    height: 10000px;
+    width: 10000px;
+}