jrs-react 1.0.3 → 1.0.4

package/package.json

@@ -1,18 +1,21 @@
 {
   "name": "jrs-react",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",
+    "antd": "^5.24.4",
     "axios": "^1.8.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -21,12 +24,26 @@
   "devDependencies": {
     "@babel/core": "^7.26.10",
     "@babel/preset-react": "^7.26.3",
+    "@chromatic-com/storybook": "^3.2.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
+    "@storybook/addon-essentials": "^8.6.6",
+    "@storybook/addon-onboarding": "^8.6.6",
+    "@storybook/blocks": "^8.6.6",
+    "@storybook/experimental-addon-test": "^8.6.6",
+    "@storybook/react": "^8.6.6",
+    "@storybook/react-vite": "^8.6.6",
+    "@storybook/test": "^8.6.6",
+    "@vitest/browser": "^3.0.8",
+    "@vitest/coverage-v8": "^3.0.8",
     "babel-loader": "^10.0.0",
+    "playwright": "^1.51.0",
+    "prop-types": "^15.8.1",
     "rollup": "^2.79.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^8.6.6",
+    "vitest": "^3.0.8"
   }
 }

package/rollup.config.js

@@ -0,0 +1,44 @@
+import babel from 'rollup-plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import external from 'rollup-plugin-peer-deps-external';
+import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
+import commonjs from '@rollup/plugin-commonjs';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import json from '@rollup/plugin-json';
+
+export default [
+    {
+      input: './src/index.js',
+      output: [
+        {
+          file: 'build/index.js',
+          format: 'cjs',
+        },
+        {
+          file: 'build/index.es.js',
+          format: 'es',
+          exports: 'named',
+        }
+      ],
+      plugins: [
+        postcss({
+          plugins: [],
+          minimize: true,
+        }),
+        nodeResolve({
+          extensions: ['.js', '.jsx']
+        }),
+        babel({
+          exclude: 'node_modules/**',
+          presets: ['@babel/preset-react'],
+          extensions: ['.js', '.jsx']
+        }),
+        commonjs(),
+        external(),
+        resolve(),
+        terser(),
+        json()
+      ]
+    }
+  ];

package/src/components/JRFrame/JRFrame.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import JRSubmit from "../JRSubmit";
+import { StyledJRFrame } from "./StyledJRFrame";
+
+const FreeType=({tag:Tag,config,me,className})=>{
+    if(typeof config==='function'){
+        let style
+        const setStyle=function(_style){
+            style=_style
+        }
+        const content=config.bind(me)({setStyle})
+        return <Tag className={className} style={style}>{content}</Tag>
+    }
+}
+
+export default class JRFrame extends JRSubmit {
+
+    renderer(){
+        return <StyledJRFrame style={this.props.style} className={`${this.props.className} jr-frame`} >
+            <FreeType tag='div' config={this.props.start} me={this} className={'start'}/>
+            <main>
+                <FreeType tag='header' config={this.props.top} me={this}/>
+                <main>
+                    <FreeType tag='div' config={this.props.left} me={this} className={'left'}/>
+                    {this.renderMe()}
+                    <FreeType tag='div' config={this.props.right} me={this} className={'right'}/>
+                </main>
+                <FreeType tag='footer' config={this.props.bottom} me={this}/>
+            </main>
+            <FreeType tag='div' config={this.props.end} me={this} className={'end'}/>
+        </StyledJRFrame>
+    }
+
+    renderMe(){
+        return <div style={{flex:1}}>Render me</div>
+    }
+
+}
+ 

package/src/components/JRFrame/StyledJRFrame.jsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+export const StyledJRFrame=styled.div`
+    display:flex;
+    flex:1;
+    overflow:hidden;
+
+    > *{
+        Xborder:1px solid gray;
+    }
+    >main{
+        display:flex;
+        flex:1;
+        overflow:overlay;
+        flex-direction: column;
+        > *{
+            XXborder:1px solid gray;
+            min-height:30px;
+        }
+
+        >header{
+            XXborder:1px solid  red;
+            XXoverflow: overlay;
+        }
+        >main{
+            display:flex;
+            flex:1;
+            overflow:hidden;
+        }
+        >footer{
+            XXborder:1px solid  blue;
+            overflow: overlay;
+        }
+
+    }
+
+`

package/src/components/JRTable/JRTable.jsx

@@ -1,7 +1,236 @@
-import JRSubmit from "../JRSubmit";
+import { po } from "../JRUtils";
+import { TFoot, THead } from "./THead";
+import { TBodies } from "./TBodies";
+import { StyledJRTable } from "./StyledJRTable";
+import JRFrame from "../JRFrame/JRFrame";
+import { Button, Checkbox } from "antd";
+import React from "react";
 
-export default class JRTable extends JRSubmit {
-    render(){
-        return 'JRTable'
+
+const getMapObject=(map,names)=>{
+    const name=names.shift(names)
+    if(names.length){
+        return getMapObject(map?.[name],names)
+    }else{
+        return map
+    }
+}
+const setMapObject=(map,names,value)=>{
+    const name=names.shift(names)
+    if(names?.length){
+        if(typeof map[name] != 'object'){
+            map[name]={}
+        }
+        setMapObject(map[name],names,value)
+    }else{
+        map[name]=value
+    }
+}
+
+export default class JRTable extends JRFrame {
+    constructor(props) {
+        super(props)
+        this.colGroupRef = React.createRef()
+    }
+
+    UNSAFE_componentWillMount(){
+        this.setColumns(this.props.columns)
+    }
+
+    //------------------------------------------------------------------------------------
+    getChecked(){
+        return [1,2,3,4]
+    }
+    checkableColumn(props){
+        return {//方法1
+            render({value,onChange}){
+                return <Checkbox checked={value} onChange={(e)=>{onChange(e.target.checked)}}/>
+            }
+            ,align:'center'
+            ,name:'checked'
+            ,...props
+        }
+        // return {//方法2
+        //     type:Checkbox
+        //     ,funcProps({value}){
+        //         po('fffffffffffff',value)
+        //         return {
+        //             align:'center'
+        //             ,checked:value
+        //         }
+        //     }
+        //     // ,label:'A'
+        //     ,onChange(e,{value,onChange,me}){
+        //         onChange(e.target.checked)
+        //     }
+        //     ,...props
+        // }
+    }
+    deletableColumn({name='deletable',sendValue,sendName,valueName,...props}){
+        return {
+            render({value,onChange}){
+                return <Checkbox checked={value} onChange={(e)=>{onChange(e.target.checked)}}/>
+            }
+            ,align:'center'
+            ,name
+            ,label(){
+                return <Button
+                    onClick={()=>{
+                        const value=this.props.delete.value 
+                            ?? this.getDataSource()?.filter(record=>record[name]).map(record=>sendValue?record[sendValue]:record)
+                        const callback=this.props.delete.callback 
+                            ?? function(a,b,c){
+                                this.reload()
+                            }
+                        this.delete({
+                            value:sendName?{[sendName]:value}:value  
+                            ,callback
+                            ,...props
+                        })
+                    }}
+                >刪除</Button>
+            }
+            ,...props
+        }
+    }
+
+    initColumn(column,level,result,leafColumns,names,lastColSpan){
+        const isBranch=column.type===undefined&&column?.columns&&column?.columns.length
+        const _names=column.name
+            ?[...names,column.name]
+            :names
+        if(isBranch){
+            if(column.label!==null)result[level].push(column)
+                const c=this.initColumns(column.columns,level+(column.label!==null?1:0)+(column.rowSpan!=null?column.rowSpan-1:0),result,leafColumns,_names,lastColSpan)
+            column.colSpan=c.colSpan
+            column.columnNo=lastColSpan
+            return {
+                colSpan:column.colSpan
+            }
+        }else{
+            column.columnNo=lastColSpan
+            result[level].push({
+                ...column
+                ,isLeaf:true
+            })
+            leafColumns.push(column)
+            column.names=_names
+            
+
+            if(_names?.length>1){
+                column.setValue=function(record,value){
+                    try{
+                        getMapObject(record,[..._names])[column.name]=value
+                    }catch{
+                        setMapObject(record,[..._names],value)
+                    }
+                }
+                column.getValue=function(record){
+                    return _names.reduce((acc,name)=>{
+                        return acc?.[name]
+                    },record)
+                }
+            }else{
+                column.setValue=function(record,value){
+                    record[column.name]=value
+                }
+                column.getValue=function(record){
+                    return record[column.name]
+                }
+            }
+            return {
+                colSpan:1
+            }
+        }
+    }
+    initColumns(columns,level,result,leafColumns,names,lastColSpan){
+        for(let i=result.length;i<=level;i++){
+
+            if(!result[i]){
+                result.push([])
+            }
+        }
+        let _lastColSpan=lastColSpan
+        const childrenLength=columns?.reduce((acc,column)=>{
+            const c=this.initColumn(column,level,result,leafColumns,names,_lastColSpan)
+            acc.colSpan+=c.colSpan
+            _lastColSpan+=c.colSpan
+            return acc
+        },{
+            colSpan:0
+        })
+        return childrenLength
+    }
+
+    setColumns([..._columns]){
+        if(this.props.checkable) 
+            _columns.unshift(this.checkableColumn(this.props.checkable))
+        if(this.props.deletable){
+            _columns.unshift(this.deletableColumn(this.props.deletable))
+        }
+        const columns=[]
+        const leafColumns=[]
+        const initColumns=this.initColumns(_columns,0,columns,leafColumns,[],0)
+        // po('initColumns',initColumns)
+        this.setState({columns,leafColumns})
+    }
+    //------------------------------------------------------------------------------------
+    setDataSource(dataSource){
+
+    }
+    getDataSource(){
+        return this.props.dataSourceName
+            ? this.getValue()?.[this.props.dataSourceName]
+            : this.getValue()
+    }
+    
+    add(record,index=this.getDataSource()?.length??0,group){
+        //group 還沒有考慮到
+
+        if(this.getDataSource()){
+            if(group===undefined){
+                this.getDataSource().splice(index,0,record)//.push(record)
+            }else{
+                this.getDataSource()[group].splice(index,0,record)//.push(record)
+            }
+            this.setValue(this.getValue())
+        }else{
+            //未完成. 沒有資料的時候, 要考慮有或沒有dataSourceName的不同處理
+            this.setValue({[this.props.dataSourceName]:[record]})
+        }
+    }
+
+    noData(){
+        const data=this.getDataSource()
+        return data==null || data.length==0
+    }
+    //------------------------------------------------------------------------------------
+    renderMe(){
+        
+        return<StyledJRTable
+            className={`${this.props.className??''} jr-table ${this.props.onRowClick?'row-highlightable':''}`}
+        >
+            <table className={'jr-table-table'}>
+                <TBodies 
+                    table={this}
+                    leafColumns={this.state.leafColumns} 
+                    groupHeader={this.props.groupHeader}
+                    groupFooter={this.props.groupFooter}
+
+                    dataSource={this.getDataSource()} 
+                    onRowClick={this.props.onRowClick}
+                />
+                <TFoot 
+                    columns={this.props.footColumns} 
+                    table={this}
+                />
+                <THead 
+                    columns={this.state.columns} 
+                    leafColumns={this.state.leafColumns}
+                    table={this}
+                />
+            </table>
+            <div className={'empty'}>{this.noData() && '無資料'}</div>
+        </StyledJRTable>
     }
 }

package/src/components/JRTable/Slider.jsx

@@ -0,0 +1,78 @@
+import React from "react"
+import styled from "styled-components"
+
+export const StyledSlider=styled.div`
+    position: absolute;
+    top: 0;
+    right: 0;
+    height:100%;
+    width:6px;
+    user-select: none;
+    &.resizing:hover,&.resizing{
+        border-right:1px dashed black;
+    }
+    &:hover{
+        cursor: col-resize;
+        border-right:1px dashed gray;
+    }
+`
+export default class Slider extends React.Component {
+    constructor(){
+        super();
+        this.sliderRef=React.createRef()
+    }
+
+    stop=(e)=>{
+        this.sliderRef.current.classList.remove('resizing');
+        document.body.style.cursor='default'
+        window.removeEventListener('mousemove',this.move)
+        window.removeEventListener('mouseup',this.stop)
+    }
+    move=({clientX})=>{
+        const {th,selectedCols,widthRates}=this.data
+        const {left}=th.getBoundingClientRect()
+
+        const min=left+10
+        const x=clientX>=min
+            ?clientX
+            :min
+        const width=x-left
+
+        selectedCols.forEach((col,index)=>{
+            const _width=Math.round((width/100)*widthRates[index])
+            col.style.width=_width+'px'
+        })
+    }
+    start(thPRef,column){
+        const selectedCols=[...this.props.table.colGroupRef.current.children].slice(column.columnNo,column.columnNo+(column.colSpan??1))
+        const totalWidth=selectedCols.reduce((aco,{offsetWidth})=>aco+offsetWidth,0)
+        const widthRates=selectedCols.map(({offsetWidth})=>{
+            return 100*(offsetWidth/totalWidth)
+        })
+
+        this.data={
+            selectedCols
+            ,th:thPRef.current
+            ,widthRates
+        }
+
+        this.sliderRef.current.classList.add('resizing');
+        document.body.style.cursor='col-resize'
+        window.addEventListener('mousemove',this.move)
+        window.addEventListener('mouseup',this.stop)
+            
+    }
+
+    render(){
+        const column=this.props.column
+        return <StyledSlider
+            ref={this.sliderRef}
+            onMouseDown={(e)=>{
+                this.start(
+                    this.props.thRef
+                    ,column
+                )
+            }}
+        />
+    }
+}

package/src/components/JRTable/StyledJRTable.jsx

@@ -0,0 +1,135 @@
+import styled from "styled-components";
+
+export const StyledJRTable=styled.div`
+    --column-bd-color:#cccccc;
+    --column-b-color:#eeeeee;
+    --column-b-hover-color:#ffffff;
+
+    position: relative;
+    background: var(--column-b-color);
+    border:1px solid var(--column-bd-color);
+
+    display:flex;
+    flex-direction: column;
+    flex:1;
+    overflow: overlay;
+
+
+
+
+    &.row-highlightable{
+        tbody{
+            tr:not(.jr-group-header,.jr-group-footer):hover{
+                background:var(--column-b-hover-color);
+                cursor: pointer;
+                transition:  background-color .8s;
+                td{
+                    color:black;
+                    transition:color .8s;
+                }
+
+            }
+        }
+    }
+
+    table{
+        Xheight: 100%;
+        min-width:100%;
+        width: max-content;
+        border-spacing: 0;
+
+        thead{
+            position: sticky;
+            top: 0;
+
+            th{
+                position: relative;
+                height:32px;
+                padding: 4px;
+                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;
+                white-space: nowrap;
+            }
+        }
+
+        tfoot{
+            position: sticky;
+            bottom: -1px;
+
+            Xtr:nth-child(1){
+                th{
+                    Xborder-top:1px solid var(--column-bd-color);
+                }
+            }
+            Xth:nth-child(1){
+                Xborder-left:1px solid var(--column-bd-color);
+            }
+                
+            th{
+                height:32px;
+                padding: 4px;
+                background: #e4e4e4;
+                xbackground: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
+                xbox-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
+                color: #525252;
+                white-space: nowrap;
+
+                border-left:2px solid #f4f4f4;
+                border-top:2px solid #f4f4f4;
+                border-right:2px solid var(--column-bd-color);
+                border-bottom:2px solid var(--column-bd-color);
+            }
+        }
+
+        tbody{
+            tr{
+                transition: background .3s linear;
+                background:var(--column-b-color);
+                a:#ededed;
+                th{
+                    color:#444444;
+                }
+                td{
+                    border-bottom: 1px solid var(--column-bd-color);
+                    color:#2e2e2e;
+                    padding: 4px;
+                }
+            }
+            tr:hover{
+                background:var(--column-b-hover-color);
+                
+            }
+            
+            tr.jr-group-header
+            ,tr.jr-group-footer{
+                text-align:left;
+                background:#dddbdb;
+
+                th{
+                    border-bottom: 1px solid var(--column-bd-color);
+                    border-right: 1px solid var(--column-bd-color);
+                    padding: 4px 8px;
+                }
+            }
+        }
+        tbody.empty-tbody{
+            td{
+                border:10px solid red;
+            }
+        }
+    } 
+        
+    
+
+
+    > .empty{
+        user-select: none;
+        color:#848484;
+        height:100%;
+        flex:1;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }    
+`