jrs-react 1.2.13 → 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,25 +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;
         }
     }
 
-    @container (min-width: 700px) {
-        &{
-            border: 1px solid red;
-            }
-    }
 `
 export default class JRWindow extends JRFrame {
     x=0
@@ -63,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(){
@@ -74,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??''}`}
@@ -94,7 +151,7 @@ export default class JRWindow extends JRFrame {
                             window={this}
                             title={this.props.title}
                             thick={this.thick} 
-                            />
+                        />
                         <main>
                             {super.renderer()}
                         </main>
@@ -109,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

@@ -262,9 +262,11 @@ class Slider extends React.Component {
         })
     }
     preMove=()=>{
-        this.props.windowRef.current.style.height=`${this.props.window.orgHeight}px`
-        this.data.height=this.props.window.orgHeight
-        this.props.window.orgHeight=null
+        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)
@@ -275,6 +277,9 @@ class Slider extends React.Component {
         const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
         let {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
 
+        if(this.props.direction.indexOf('s')>-1){
+            this.props.window.orgHeight=null
+        }
         this.data={
             x,y
             ,width

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;
+}

package/src/components/JRWindow/TitleBar.jsx

@@ -5,14 +5,18 @@ import { FreeType } from "../JRFrame/JRFrame";
 import { IconX,IconCard, IconSquare, IconMinus } from "../../assets/icon";
 import { background } from "storybook/internal/theming";
 import JRButton from "../JRInput/JRButton";
+import { browser } from "globals";
 
 const StyledTitle=styled.div`
     overflow: hidden;
     display: flex;
     border-radius: var(--jr-window-radius) var(--jr-window-radius) 0 0;
-    background:rgb(214, 214, 214);
-    color: black;
-    &:active:hover{
+    background:#464646;
+    color: white;
+    display: flex;
+    align-items: center;
+    min-height: min-content;
+    XX&:active{
         cursor: grabbing;
     }
     
@@ -36,6 +40,7 @@ const StyledTitle=styled.div`
 
 
         >button{
+            outline: unset;
             display:flex;
             align-items: center;
             justify-content: center;
@@ -52,10 +57,11 @@ const StyledTitle=styled.div`
                 color:white;
             }
             >svg{
-                color:black;
+                color:#bababa;
                 width:14px;
                 height:14px;
                 cursor: pointer;
+                stroke-width: 3;
             }
         }
         >button.danger:hover{
@@ -78,33 +84,78 @@ export default class TitleBar extends React.Component{
     x=0
     y=0
 
+    remember=(e)=>{
+        po('remember')
+        const {clientX,clientY}=e
+        const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
+        this.props.window.orgHeight=height
+        this.props.window.orgWidth=width
+        this.props.window.orgTop=y
+        this.props.window.orgLeft=x
+        this.props.window.orgXd=clientX-x
+        this.props.window.orgBodyOverflow=document.body.style.overflow
+    }
+    adjustScreen=(e)=>{
+        po('double click adjustScreen')
+        e.preventDefault()
+        const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
+        if(y>1-this.props.thick){
+            this.remember(e)
+            this.fullScreen(e)
+        }else{
+            this.floatScreen(e)
+        }
+    }
+    floatScreen=(e)=>{
+        po('floatScreen')
+        const w=this.props.windowRef.current
+        const {clientX,clientY}=e
+
+        this.props.windowRef.current.style.transition='var(--transition-x-y), left .05s ease-in'
+        this.props.windowRef.current.style.left=`${this.props.window.orgLeft}px`
+        this.props.windowRef.current.style.top=`${this.props.window.orgTop}px`
+        this.props.windowRef.current.style.width=`${this.props.window.orgWidth}px`
+        this.props.windowRef.current.style.height=`${this.props.window.orgHeight}px`
+        document.body.style.overflow=this.props.window.orgBodyOverflow
+    }
+    fullScreen=(e)=>{
+        po('fullScreen',this.props.thick)
+
+        this.props.windowRef.current.style.transition='var(--transition-x-y), left .05s ease-in'
+        this.props.windowRef.current.style.left=`${-this.props.thick}px`
+        this.props.windowRef.current.style.top=`${-this.props.thick}px`
+        this.props.windowRef.current.style.width=`calc(100vw + ${this.props.thick*2}px)`//`${window.innerWidth+(this.props.thick*2)}px`
+        this.props.windowRef.current.style.height=`calc(100vh + ${this.props.thick*2}px)`//`${window.innerHeight+(this.props.thick*2)}px`
+        
+        setTimeout(()=>{
+            document.body.style.overflow='hidden'
+            this.props.windowRef.current.style.transition='unset'
+        },50)
+
+    }
     stop=(e)=>{
+        po('stop')
         e.preventDefault()
         if(this.moved){
             const {clientX,clientY}=e
             const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
             const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
-            if(y<1){
-                this.props.windowRef.current.style.transition='var(--transition-x-y), left .1s ease-in'
-                this.props.windowRef.current.style.left=`${-this.props.thick}px`
-                this.props.windowRef.current.style.width=`calc(100vw + ${this.props.thick*2}px)`//`${window.innerWidth+(this.props.thick*2)}px`
-                this.props.windowRef.current.style.height=`calc(100vh + ${this.props.thick*2}px)`//`${window.innerHeight+(this.props.thick*2)}px`
-
-                this.props.window.orgHeight=height
-                this.props.window.orgWidth=width
-                this.props.window.orgXd=clientX-x
 
-            }
-            if(y>window.innerHeight)this.props.windowRef.current.style.top = `${window.innerHeight-titleBarHeight}px`
+            if(y<1-this.props.thick)this.fullScreen(e)
+            if(y>window.innerHeight-titleBarHeight)this.props.windowRef.current.style.top = `${window.innerHeight-titleBarHeight}px`
             if(x+width-this.props.thick<0)this.props.windowRef.current.style.left = 0
             if(x>window.innerWidth)this.props.windowRef.current.style.left = `${window.innerWidth-width}px`
-            document.body.style.cursor='default'
+            
         }
+        document.body.style.cursor='default'
         window.removeEventListener('mousemove',this.move)
         window.removeEventListener('mouseup',this.stop)
         window.removeEventListener('mousemove',this.preMove)
+
+
     }
     move=(e)=>{
+        po('move')
         e.preventDefault()
         this.moved=true
         const {clientX,clientY}=e
@@ -118,13 +169,10 @@ export default class TitleBar extends React.Component{
         this.y=w.offsetTop - this.pos2
         this.x=w.offsetLeft - this.pos1
 
-        if(this.props.window.orgWidth){
-            if(clientX>this.props.window.orgWidth){
-                this.x=clientX-(this.props.window.orgWidth/2)
-            }
-            w.style.width=`${this.props.window.orgWidth}px`
-            this.props.window.orgWidth=null
-        }
+        // if(this.props.window.orgWidth){
+        //     w.style.width=`${this.props.window.orgWidth}px`
+        //     this.props.window.orgWidth=null
+        // }
 
         this.y=this.y<-this.props.thick?-this.props.thick:this.y
         w.style.transition='unset'
@@ -132,40 +180,68 @@ export default class TitleBar extends React.Component{
         w.style.left = `${this.x}px`
     }
     preMove=(e)=>{
+        console.clear()
+        po('preMove')
+        
         const w=this.props.windowRef.current
-        const {clientX,clientY}=e
-        if(this.props.window.orgXd){
-            w.style.left=`${clientX-this.props.window.orgXd}px`
-            this.props.window.orgXd=null
+        const {clientX,clientY,...oe}=e
+        po('e',e)
+
+        const {x,y,width,height}=w.getBoundingClientRect()
+        po('width',width)
+
+        if(y<=-this.props.thick){
+
+
         }
-        if(this.props.window.orgHeight){
+w.style.transition='left .05s ease-in, height .05s ease-in'
+        if(y<=0){
+            // contt browserWidth=
+            const w1=window.innerWidth-(this.props.thick*2)
+            const x1=clientX
+            const w2=this.props.window.orgWidth-32
+            const x2=x1/w1 * w2
+            // po('xp'   , x2)
+            w.style.left=`${clientX-x2}px`
+
+            w.style.width=`${this.props.window.orgWidth}px`
             w.style.height=`${this.props.window.orgHeight}px`
-            this.props.window.orgHeight=null
+        }else{
+            this.remember(e)
         }
 
-        w.style.transition='left .1s ease-in, height .1s ease-in'
+        document.body.style.cursor='grabbing'
+        document.body.style.overflow=this.props.window.orgBodyOverflow
+
+        
         setTimeout(()=>{
             window.addEventListener('mousemove',this.move)
-        },100)
+        },50)
         window.removeEventListener('mousemove',this.preMove)
     }
     start(e){
+        po('start')
         e.preventDefault()
         this.moved=false
         this.pos3 = e.clientX
         this.pos4 = e.clientY
+        
         this.props.windowRef.current.style.transition='var(--transition-x-y)'
-        document.body.style.cursor='grabbing'
         window.addEventListener('mousemove',this.preMove)
         window.addEventListener('mouseup',this.stop)
     }
+    onDoubleClick(){
+        po('onDoubleClick')
+    }
     render(){
+
         return <StyledTitle
             ref={this.props.titleBarRef}
             draggable="false"
             onMouseDown={(e)=>{
                 this.start(e)
             }}
+            onDoubleClick={this.adjustScreen}
         >
             <FreeType tag='div' config={this.props.title??''} me={this.props.window} className={'title'}/>
             <nav>
@@ -175,9 +251,16 @@ export default class TitleBar extends React.Component{
                     this.props.window.props.setOpen
                         ?<JRButton icon={<IconX />} 
                             className={'danger'}
-                            onClick={()=>{
+                            onClick={(e)=>{
+                                e.stopPropagation()
+                                if(this.props.window.orgBodyOverflow!=null){
+                                    document.body.style.overflow=this.props.window.orgBodyOverflow
+                                }
                                 this.props.window.props.setOpen(false)
                             }}
+                            onMouseDown={(e)=>{
+                                e.stopPropagation()
+                            }}
                         />
                         :null
                 }

package/src/main.jsx

@@ -3,4 +3,5 @@ import { createRoot } from 'react-dom/client'
 import './app/index.css'
 import App from './app/App.jsx'
 
-createRoot(document.getElementById('root')).render(<App/>)
+const root = createRoot(document.getElementById('root'))
+root.render(<App/>)

package/src/components/JRUtil.jsx

@@ -1 +0,0 @@
-export const po=console.debug