jrs-react 1.0.3 → 1.0.4

package/src/components/JRTable/TBodies.jsx

@@ -0,0 +1,226 @@
+import React from "react"
+import { flexType, po } from "../JRUtils"
+import styled from "styled-components"
+
+const StyledSeparator=styled.tbody`
+    th{
+        height:4px;
+        background:#c6c6c6;
+    }
+`
+const Separator=({length,children})=>{
+    return <StyledSeparator className={'separator'}>
+        <tr>
+            <th colSpan={length}>{children}</th>
+        </tr>
+    </StyledSeparator>
+}
+
+////////////////////////////////////////////////////////////////////////////
+
+
+const Ths=({table,groupData,groupIndex,deep,rowColumn,rowIndex})=>{
+    return rowColumn?.map(({style:_style,align,type,render,...column},colIndex)=>{
+        const style=flexType(_style,table,{},{})
+        let content
+        if(type){
+            content='type'
+        }else if(render){
+
+            content=render?.bind(table)({groupData,groupIndex,ths:111})
+        }else{
+            content=column.label
+        }
+        // style.textAlign=align
+        return <th key={colIndex} 
+            
+            style={{textAlign:align,...style}}
+            colSpan={column.colSpan} 
+            rowSpan={column.isLeaf&&(deep>rowIndex)?deep-rowIndex+1:null} 
+        >
+            {content}
+        </th>
+    })
+}
+
+const GroupColumns=({table,columns:_columns,trClassName,groupData,tbodyIndex})=>{
+    const columns=Array.isArray(_columns?.[0])
+        ?_columns
+        :[_columns]
+    return columns?.map((rowColumn,rowIndex)=>{
+        return <tr className={trClassName} key={rowIndex}>
+            <Ths 
+                table={table} 
+                groupData={groupData}
+                groupIndex={tbodyIndex}
+                deep={columns.length-1} 
+                rowColumn={rowColumn} 
+                rowIndex={rowIndex}
+            />
+        </tr>
+    })
+}
+
+const GroupHeaderTr=styled.tr`
+    z-index: 1;
+    XXposition: sticky;
+    XXtop: 50px;
+    th{
+        text-align: left;
+        border:1px solid #222222;
+    }
+`
+const GroupHeader=(props)=>{
+    return <GroupColumns 
+        trClassName={'jr-group-header'}
+        {...props}
+    />
+}
+
+const GroupFooterTr=styled.tr`
+    th{
+        border:1px solid #222222;
+        text-align: left;
+    }
+`
+const GroupFooter=(props)=>{
+    return <GroupColumns 
+        trClassName={'jr-group-footer'}
+        {...props}
+    />
+}
+
+
+
+////////////////////////////////////////////////////////////////////////////
+const Td=({column:_column,record,tbodyIndex,trIndex,tdIndex,table})=>{
+    let content 
+    const {style:_style,align,vAlign='baseline',type,typeStyle:_typeStyle,render,setValue,getValue,onChange:_onChange,funcProps,...column}=_column
+    const onChange=(inputValue)=>{
+        const targetValue=inputValue?.target?.value ?? inputValue
+        setValue(record,targetValue)
+        table.setValue(table.getValue())
+    }
+
+    
+    const value=getValue(record)
+    let style=render?{}:flexType(_style,table,{value,record},{})
+    const setStyle=(_style)=>{
+        style=_style
+    }
+    setStyle.bind(this)
+    render?.bind(table)
+    if(type){
+        const typeStyle=flexType(_typeStyle,table,{record},{})
+        
+        content=React.createElement(type,{
+            onChange:_onChange
+                ?(e)=>{
+                    _onChange?.bind(this)(e,{value,onChange,me:content})
+                }
+                :onChange
+            ,value
+            ,style:typeStyle
+            ,render
+            ,...column
+            ,...funcProps?.bind(this)({value})
+
+        })
+    }else if(render){
+        content=render({index:trIndex,groupIndex:tbodyIndex,value,record,onChange,setStyle})
+    }else{
+        content=value
+    }
+    return <td 
+        colSpan={style.colSpan}
+        rowSpan={style.rowSpan}
+        style={{
+            textAlign:align
+            ,verticalAlign:vAlign
+            ,...style
+        }}
+        key={tdIndex}
+    >
+        {content}
+    </td>
+}
+const Tds=({leafColumns,record,table,tbodyIndex,trIndex})=>{
+    return leafColumns?.map((column,tdIndex)=>{
+        
+        return <Td
+            column={column} 
+            key={tdIndex} 
+            record={record} 
+            table={table} 
+            tbodyIndex={tbodyIndex}
+            trIndex={trIndex} 
+            tdIndex={tdIndex} 
+        />
+    })
+}
+////////////////////////////////////////////////////////////////////////////
+
+
+const TBody=({groupData,groupHeader,leafColumns,groupFooter,table,tbodyIndex})=>{
+
+    const neededProps={table,tbodyIndex}
+    return <>
+        <tbody key={`tbody${tbodyIndex}`}>
+            {(groupData?.length >0 ) && <GroupHeader 
+                groupData={groupData}
+                columns={groupHeader}
+                {...neededProps}
+            />}
+            {
+                groupData?.map((record,trIndex)=>{
+                    const onRowClick=table.props.onRowClick?.bind(table)
+                    return <tr key={trIndex}
+                        onClick={()=>{
+                            onRowClick?.({record,index:trIndex,groupIndex:tbodyIndex})
+                        }}
+                    >
+                        <Tds 
+                            record={record}
+                            trIndex={trIndex}
+
+                            {...neededProps}
+                            leafColumns={leafColumns} 
+                        />
+                    </tr>
+                })
+            }
+            {(groupData?.length > 0) && <GroupFooter 
+                groupData={groupData}
+                columns={groupFooter}
+                {...neededProps}
+            />}
+
+        </tbody>
+        {/* {(dataSource.length > (tbodyIndex+1)) && <Separator length={leafColumns.length} key={`sp-${tbodyIndex}`}></Separator>} */}
+    </>
+}
+
+export const TBodies=({groupHeader,leafColumns,groupFooter,dataSource:_dataSource,table})=>{
+    // po('--TBodies--')
+    const isGroupDataType=Array.isArray(_dataSource?.[0])
+
+    const dataSource=isGroupDataType
+        ?_dataSource
+        :[_dataSource]
+
+    // po('dataSource',dataSource)    
+    return dataSource?.map((groupData,tbodyIndex,c)=>{
+        return  <TBody 
+                key={`tbody${tbodyIndex}`} 
+                table={table}
+                // dataSource={dataSource}
+                // dataGroup={groupData} 
+                groupData={groupData}
+                tbodyIndex={tbodyIndex}
+                
+                groupHeader={groupHeader}
+                leafColumns={leafColumns} 
+                groupFooter={groupFooter}
+            /> 
+    })
+}

package/src/components/JRTable/THead.jsx

@@ -0,0 +1,102 @@
+import React, { useRef } from "react"
+import { flexType, po, whatType } from "../JRUtils"
+import Slider from "./Slider"
+
+
+const Colgroup=({leafColumns,colGroupRef})=>{
+    return <colgroup ref={colGroupRef}>
+    {
+        leafColumns?.map((_column,index)=>{
+            const {width,...column}=_column
+            const style={
+                width
+            }
+            return <col style={style} key={index}></col>
+        })
+    }
+    </colgroup>
+}
+
+const Ths=({deep,rowColumn,rowIndex,table})=>{
+    return rowColumn?.map((column,colIndex)=>{
+        const thRef=React.createRef()
+        return <th key={colIndex} 
+            ref={thRef}
+            colSpan={column.colSpan} 
+            rowSpan={column.rowSpan ?? (column.isLeaf&&(deep>rowIndex)?deep-rowIndex+1:null)} 
+        >
+            {flexType(column.label,table)} 
+            {/* [s={column.colSpan??0}]
+            [c={column.columnNo??0}] */}
+            {
+                table.props.resizableColumns===true 
+                && <Slider table={table} thRef={thRef} column={column}/>
+            }
+        </th>
+    })
+}
+
+export const HeadTrs=({columns:_columns,trClassName,table})=>{
+    const columns=Array.isArray(_columns?.[0])
+        ?_columns
+        :[_columns]
+    return columns?.map((rowColumn,rowIndex)=>{
+        return <tr className={trClassName} key={rowIndex}>
+            <Ths deep={columns.length-1} rowColumn={rowColumn} rowIndex={rowIndex} table={table}/>
+        </tr>
+    })
+}
+
+export const THead=({columns,leafColumns,table})=>{
+    return <>
+        <thead>
+            <HeadTrs columns={columns} table={table}/>
+        </thead>
+        <Colgroup leafColumns={leafColumns} colGroupRef={table.colGroupRef}/>
+    </>
+}
+
+
+
+
+
+
+
+const FootThs=({table,groupData,groupIndex,deep,columns,rowIndex})=>{
+    return columns?.map((column,colIndex)=>{
+        // let content
+        // if(type){
+        //     content='type'
+        // }else if(render){
+
+        //     content=render?.bind(table)({groupData,groupIndex,ths:111})
+        // }else{
+        //     content=column.label
+        // }
+        let style=flexType(column.style,table,{},{})
+        const content=whatType(column,table,column.label)
+        return <th 
+            style={style}
+            colSpan={column.colSpan} 
+            rowSpan={column.rowSpan} 
+        >
+            {content}
+        </th>
+    })
+}
+
+
+export const TFoot=({table,columns})=>{
+    const trs=columns?.map((rowColumn,rowIndex)=>{
+        return <tr key={rowIndex}>
+            <FootThs columns={rowColumn} table={table}/>
+            {/* <Ths deep={columns.length-1} rowColumn={rowColumn} rowIndex={rowIndex}/> */}
+        </tr>
+    })
+    return <>
+        <tfoot>
+            {trs}
+        </tfoot>
+    </>
+}
+

package/src/index.js

@@ -1,9 +1,6 @@
-import JRSubmit from './components/JRSubmit'
-import JRFields from './components/JRFields/JRFields'
-import JRTable from './components/JRTable/JRTable'
+function Test(){
+    return <div>Test</div>
+}
 export {
-    JRSubmit
-    ,JRFields
-    ,JRTable
-
+    Test
 }

package/src/components/JRFields/JRFields.jsx

@@ -1,7 +0,0 @@
-import JRSubmit from "../JRSubmit";
-
-export default class JRFields extends JRSubmit {
-    render(){
-        return 'JRFields'
-    }
-}

package/src/components/Test.js

@@ -1,14 +0,0 @@
-import React from "react";
-
-class Test extends React.Component {
-    render(){
-        return 'JRSubmit'
-    }
-}
-
- 
-//  function Test(){
-//     return <div>AAAAAAAAA</div>
-// }
-
-export { Test}