jrs-react 1.2.5 → 1.2.7

package/src/components/JRSubmit.jsx

@@ -4,7 +4,6 @@ import { colonValueString, flexType, po } from './JRUtils'
 import { displaySpinner } from './LoadingBar'
 import styled from 'styled-components'
 
-
 const axiosSubmit = axios.create({
     authorization: `Bearer ${localStorage.getItem("accessToken")}`
     ,timeout: 120000
@@ -110,6 +109,8 @@ export default class JRSubmit extends React.Component {
     }
     setValue(value,reset=false){
         if(this.props.onChange){
+            po('name',this.props.name)
+            po('onChange',value)
             this.props.onChange(value)
         }else{
             this.setState({value})
@@ -278,8 +279,8 @@ export default class JRSubmit extends React.Component {
     }
 
     showMessage(success,message){
-        po('success',success)
-        po('message',message)
+        // po('success',success)
+        // po('message',message)
     }
     
     renderer(){

package/src/components/JRTable/JRTable.jsx

@@ -4,6 +4,7 @@ import { TBodies } from "./TBodies";
 import { StyledJRTable } from "./StyledJRTable";
 import JRFrame from "../JRFrame/JRFrame";
 import React from "react";
+import JRWindow from "../JRWindow/JRWindow";
 
 
 const getMapObject=(map,names)=>{
@@ -26,14 +27,14 @@ const setMapObject=(map,names,value)=>{
     }
 }
 
-export default class JRTable extends JRFrame {
+export default class JRTable extends JRWindow {
     constructor(props) {
         super(props)
         this.colGroupRef = React.createRef()
     }
 
     UNSAFE_componentWillMount(){
-        this.setColumns(this.props.columns)
+        this.setColumns(this.props.columns??[])
     }
 
     //------------------------------------------------------------------------------------

package/src/components/JRTable/Slider.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import styled from "styled-components"
 
-export const StyledSlider=styled.div`
+const StyledSlider=styled.div`
     position: absolute;
     top: 0;
     right: 0;

package/src/components/JRTable/StyledJRTable.jsx

@@ -44,8 +44,7 @@ export const StyledJRTable=styled.div`
 
             th{
                 position: relative;
-                height:24px;
-                padding: 4px;
+                padding: 2px 6px;
                 background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
                 box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
                 color: #525252;

package/src/components/JRTable/TBodies.jsx

@@ -172,7 +172,7 @@ const TBody=({groupData,groupHeader,leafColumns,groupFooter,table,tbodyIndex})=>
                 {...neededProps}
             />}
             {
-                groupData?.map((record,trIndex)=>{
+                groupData?.map?.((record,trIndex)=>{
                     const onRowClick=table.props.onRowClick?.bind(table)
                     return <tr key={trIndex}
                         onClick={()=>{

package/src/components/JRWindow/JRWindow.jsx

@@ -0,0 +1,110 @@
+import React from "react";
+import JRFrame from "../JRFrame/JRFrame";
+import styled from "styled-components";
+import TitleBar from "./TitleBar";
+import { po } from "../JRUtils";
+import Slider from "./Slider";
+
+const StyledJRWindow=styled.div`
+    --padding-child:8px;
+    xborder:1px solid gray;
+    position: absolute;
+    padding: ${({$thick})=>$thick}px;
+
+    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{
+        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;
+        }
+    }
+`
+export default class JRWindow extends JRFrame {
+    x=0
+    y=0
+    width=300
+    height=300
+    padding=5
+    thick=3
+    
+    constructor(props){
+        super(props)
+        this.ref=React.createRef()
+        this.titleBarRef=React.createRef()
+        if(this.props.popup===true)this.renderer=this.renderWindow
+        this.init()
+    }
+    init(){
+        this.height=window.innerHeight>=this.props.height?this.props.height:window.innerHeight
+        this.width=window.innerWidth>=this.props.width?this.props.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
+    }
+    componentWillMount(){
+     }
+    // renderer(){
+    //     return this.props.popup===true
+    //         ?<StyledJRWindow>
+    //             {super.renderer()}
+    //         </StyledJRWindow>
+    //         :super.renderer()
+    // }
+    renderWindow(){
+        return <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}
+            // onMouseDown={()=>{
+            //     po('onFocus')
+            //     this.ref.current.style.zIndex=100
+            // }}
+        >
+            <main>
+                <TitleBar 
+                    titleBarRef={this.titleBarRef}
+                    windowRef={this.ref} 
+                    window={this}
+                    title={this.props.title}
+                />
+                <main>
+                    {super.renderer()}
+                </main>
+            </main>
+            <Slider direction={'n'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+            <Slider direction={'e'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+            <Slider direction={'s'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+            <Slider direction={'w'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+
+            <Slider direction={'nww'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+            <Slider direction={'nnw'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+            <Slider direction={'nne'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+            <Slider direction={'nee'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+            <Slider direction={'sse'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+            <Slider direction={'see'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+            <Slider direction={'sww'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+            <Slider direction={'ssw'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
+        </StyledJRWindow>
+    }
+}

package/src/components/JRWindow/Slider.jsx

@@ -0,0 +1,251 @@
+import React from "react"
+import styled from "styled-components"
+import { po } from "../JRUtils"
+
+const borderWidth='px'
+
+const StyledSlider=styled.div`
+    Xborder:1px solid ${({$direction:{color}})=>color}; 
+    xbackground:${({$direction:{color}})=>color};
+    position: absolute;
+    top: ${({$direction:{top}})=>top};
+    bottom: ${({$direction:{bottom}})=>bottom};
+    right: ${({$direction:{right}})=>right};
+    left: ${({$direction:{left}})=>left};
+    height: ${({$direction:{height}})=>height};
+    width: ${({$direction:{width}})=>width};
+    cursor: ${({$direction:{cursor}})=>cursor};
+
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+
+`
+export default class Slider extends React.Component {
+    width='3px'
+    borderWidth='px'
+    borderLong='10px'
+
+    constructor(props){
+        super(props);
+        this.sliderRef=React.createRef()
+    }
+    directions={
+        n:{
+            top:0
+            ,color:'red'
+            ,width:'100%'
+            ,height:`${this.props.thick}px`
+            ,cursor: 'n-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+            }
+
+        }
+        ,e:{
+            color:'yellow'
+            ,right:0
+            ,width:`${this.props.thick}px`
+            ,height:'100%'
+            ,cursor: 'e-resize'
+            ,resize:(props)=>{
+                this.resizeE(props)
+            }
+        }
+        ,s:{
+            color:'blue'
+            ,bottom:0
+            ,width:'100%'
+            ,height:`${this.props.thick}px`
+            ,cursor: 's-resize'
+            ,resize:(props)=>{
+                this.resizeS(props)
+            }
+        }
+        ,w:{
+            color:'green'
+            ,left:0
+            ,width:`${this.props.thick}px`
+            ,height:'100%'
+            ,cursor: 'w-resize'
+            ,resize:(props)=>{
+                this.resizeW(props)
+            }
+        }
+        ,nww:{
+            top:0
+            ,left:0
+            ,color:'blue'
+            ,width:`${this.props.thick}px`
+            ,height:this.borderLong
+            ,cursor: 'nw-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+                this.resizeW(props)
+            }
+        }
+        ,nnw:{
+            top:0
+            ,left:0
+            ,color:'blue'
+            ,width:this.borderLong
+            ,height:`${this.props.thick}px`
+            ,cursor: 'nw-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+                this.resizeW(props)
+            }
+        }
+        ,nne:{
+            top:0
+            ,right:0
+            ,color:'green'
+            ,width:this.borderLong
+            ,height:`${this.props.thick}px`
+            ,cursor: 'ne-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+                this.resizeE(props)
+            }
+        }
+        ,nee:{
+            top:0
+            ,right:0
+            ,color:'green'
+            ,width:`${this.props.thick}px`
+            ,height:this.borderLong
+            ,cursor: 'ne-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+                this.resizeE(props)
+            }
+        }
+        ,sse:{
+            color:'red'
+            ,right:0
+            ,bottom:0
+            ,width:this.borderLong
+            ,height:`${this.props.thick}px`
+            ,cursor: 'se-resize'
+            ,resize:(props)=>{
+                this.resizeS(props)
+                this.resizeE(props)
+            }
+        }
+        ,see:{
+            color:'red'
+            ,right:0
+            ,bottom:0
+            ,width:`${this.props.thick}px`
+            ,height:this.borderLong
+            ,cursor: 'se-resize'
+            ,resize:(props)=>{
+                this.resizeS(props)
+                this.resizeE(props)
+            }
+        }
+        ,ssw:{
+            color:'yellow'
+            ,bottom:0
+            ,left:0
+            ,width:this.borderLong
+            ,height:`${this.props.thick}px`
+            ,cursor: 'sw-resize'
+            ,resize:(props)=>{
+                this.resizeS(props)
+                this.resizeW(props)
+            }
+        }
+        ,sww:{
+            color:'yellow'
+            ,bottom:0
+            ,left:0
+            ,width:`${this.props.thick}px`
+            ,height:this.borderLong
+            ,cursor: 'sw-resize'
+            ,resize:(props)=>{
+                this.resizeS(props)
+                this.resizeW(props)
+            }
+        }
+    }
+
+    stop=(e)=>{
+        document.body.style.cursor='default'
+        window.removeEventListener('mousemove',this.move)
+        window.removeEventListener('mouseup',this.stop)
+    }
+
+    resizeN=({window,cursorY,startY,startHeight,titleBarHeight})=>{
+        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
+        if(width<titleBarHeight)width=titleBarHeight
+        window.style.width=`${width+(this.props.thick*2)}px`
+    }
+    resizeS=({window,clientY,top,titleBarHeight})=>{
+        let height=clientY-top-this.props.thick
+        if(height<titleBarHeight)height=titleBarHeight
+        window.style.height=`${height+(this.props.thick*2)}px`
+    }
+    resizeW=({window,cursorX,startX,startWidth,titleBarHeight})=>{
+        let x=cursorX
+        if(x<=1)x=1
+        let width=startWidth+(startX-x)
+        if(width<titleBarHeight+ (this.props.thick*2)){
+            width=titleBarHeight+ (this.props.thick*2)
+            x=startX+startWidth -titleBarHeight - (this.props.thick*2)
+        }
+        window.style.left=`${x}px`
+        window.style.width=`${width}px`
+    }
+    move=(e)=>{
+        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
+        
+        this.directions[this.props.direction].resize({
+            window,titleBarHeight
+            ,clientX,cursorX,startX,startWidth,left
+            ,clientY,cursorY,startY,startHeight,top
+        })
+        /////////////////////////////////////////////////////////////
+
+
+
+
+        /////////////////////////////////////////////////////////////
+        
+  
+
+    }
+    start=()=>{
+        const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
+        const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
+        this.data={x,y,width,height,titleBarHeight}
+        document.body.style.cursor=this.directions[this.props.direction].cursor
+        window.addEventListener('mousemove',this.move)
+        window.addEventListener('mouseup',this.stop)
+    }
+
+    render(){
+        return <StyledSlider 
+            $direction={this.directions[this.props.direction]}
+            $padding={this.props.padding}
+            onMouseDown={this.start}
+        />
+    }
+}

package/src/components/JRWindow/TitleBar.jsx

@@ -0,0 +1,84 @@
+import styled from "styled-components";
+import { po } from "../JRUtils";
+import React from "react";
+import { FreeType } from "../JRFrame/JRFrame";
+
+const StyledTitle=styled.div`
+    overflow: hidden;
+    display: flex;
+    padding:2px 8px;
+    border:1px solid black;
+    background:rgb(214, 214, 214);
+    color: black;
+    &:active:hover{
+        cursor: grabbing;
+    }
+    
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+
+    > .title{
+            flex: 1;
+    }
+`
+
+
+
+
+export default class TitleBar extends React.Component{
+    pos1 = 0
+    pos2 = 0 
+    pos3 = 0 
+    pos4 = 0
+    x=0
+    y=0
+
+    move=(e)=>{
+        e.preventDefault()
+        const {clientX,clientY}=e
+        this.pos1 = this.pos3 - e.clientX
+        this.pos2 = this.pos4 - e.clientY
+        this.pos3 = e.clientX
+        this.pos4 = e.clientY
+
+        const w= this.props.windowRef.current
+        this.x=w.offsetLeft - this.pos1
+        this.y=w.offsetTop - this.pos2
+        w.style.top = this.y + 'px'
+        w.style.left = this.x + 'px'
+    }
+    stop=(e)=>{
+        // const w= this.props.windowRef.current
+        // if(this.y<1)this.props.windowRef.current.style.top = '1px'
+        // if(this.y>window.innerHeight)this.props.windowRef.current.style.top = `${window.innerHeight-32}px`
+        // if(this.x<1)this.props.windowRef.current.style.left = '1px'
+        // if(this.x>window.innerWidth)this.props.windowRef.current.style.left = `${window.innerWidth-100}px`
+        document.body.style.cursor='default'
+        window.removeEventListener('mousemove',this.move)
+        window.removeEventListener('mouseup',this.stop)
+    }
+    start(e){
+        e.preventDefault()
+        this.pos3 = e.clientX
+        this.pos4 = e.clientY
+
+        document.body.style.cursor='grabbing'
+        window.addEventListener('mousemove',this.move)
+        window.addEventListener('mouseup',this.stop)
+    }
+    render(){
+        return <StyledTitle
+            ref={this.props.titleBarRef}
+            draggable="false"
+            onMouseDown={(e)=>{
+                this.start(e)
+            }}
+        >
+            <FreeType tag='div' config={this.props.title??''} me={this.props.window} className={'title'}/>
+            <nav><button>X</button></nav>
+        </StyledTitle>
+    }
+}

package/src/main.jsx

@@ -0,0 +1,6 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './app/index.css'
+import App from './app/App.jsx'
+
+createRoot(document.getElementById('root')).render(<App/>)

package/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})