amotify 0.0.59 → 0.0.60

package/src/functions/Table/Data/parts.tsx

@@ -1,34 +1,34 @@
 import {
   useStore,
   React
-} from '@global';
+} from '@global'
 import {
   Flex,
   Box,
   Span,
   FAI
-} from '@atoms';
+} from '@atoms'
 import {
   Column,
   Row,Text
-} from '@mols';
+} from '@mols'
 import {
   Buttons,
   Input,
   Sheet,
-} from '@fn';
+} from '@fn'
 
-import { faArrowUp } from '@fortawesome/free-solid-svg-icons/faArrowUp';
-import { faArrowDown } from '@fortawesome/free-solid-svg-icons/faArrowDown';
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
-import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
+import { faArrowUp } from '@fortawesome/free-solid-svg-icons/faArrowUp'
+import { faArrowDown } from '@fortawesome/free-solid-svg-icons/faArrowDown'
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight'
+import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter'
 
-import style from '../style.module.scss';
+import style from '../style.module.scss'
 
 import {
   Comps,
   DefaultCellSystemStyles,
-} from '../_';
+} from '../_'
 
 type DataTableOptionParams = {
   tableID: string
@@ -80,17 +80,17 @@ const Components = {
       val_status,
       set_status,
       KeywordFilterRows
-    } = { ...params };
+    } = { ...params }
 
     let {
       order,
       filter
-    } = val_status;
-    let [ orderIndex,orderDirection ] = order.current;
+    } = val_status
+    let [ orderIndex,orderDirection ] = order.current
 
-    let Cols = [];
+    let Cols = []
 
-    let HEAD = [ ...val_status.head ];
+    let HEAD = [ ...val_status.head ]
     if ( val_status.checker ) {
       Cols.push( <Comps.TH
         { ...val_status.cellStyles }
@@ -128,10 +128,10 @@ const Components = {
             label={ null }
             value={ false }
             onUpdateValidValue={ ( { value } ) => {
-              let newRows = val_status.rows;
+              let newRows = val_status.rows
               newRows.forEach( ( rows ) => {
-                rows.checked = value;
-              } );
+                rows.checked = value
+              } )
               set_status( {
                 ...val_status,
                 rows: newRows
@@ -139,17 +139,17 @@ const Components = {
             } }
           />
         </Box>
-      </Comps.TH> );
+      </Comps.TH> )
     }
 
     for ( let colIndex = 0; colIndex < val_status.colLength; colIndex++ ) {
-      let col = HEAD[ colIndex ];
-      if ( !col ) continue;
+      let col = HEAD[ colIndex ]
+      if ( !col ) continue
 
-      let DisplayLabel = col.children || col.data;
+      let DisplayLabel = col.children || col.data
 
-      let orderable = order.enabled && order.column[ colIndex ];
-      let filterable = filter.enabled && filter.column[ colIndex ];
+      let orderable = order.enabled && order.column[ colIndex ]
+      let filterable = filter.enabled && filter.column[ colIndex ]
 
       let OrderButton = orderable ? <FAI
         fontSize={ '1.mini' }
@@ -159,23 +159,23 @@ const Components = {
             ? faArrowDown
             : faArrowUp
           : faArrowRight }
-      /> : null;
+      /> : null
 
-      let FilterButton = <></>;
+      let FilterButton = <></>
       if ( filterable ) {
         let ColumnDatas = KeywordFilterRows.map( ( row ) => {
-          return row[ colIndex ]?.data;
-        } );
+          return row[ colIndex ]?.data
+        } )
         ColumnDatas = [ ... new Set( ColumnDatas ) ].order( {
           direction: 'ASC',
-        } );
-        let filterList: any = filter.current[ colIndex ];
+        } )
+        let filterList: any = filter.current[ colIndex ]
 
         if ( filterList ) {
-          let ValueList = ColumnDatas.filter( ( data ) => !filterList.includes( data ) );
-          let SelectList: amotify.fn.Input.List.OptionParams[] = [];
+          let ValueList = ColumnDatas.filter( ( data ) => !filterList.includes( data ) )
+          let SelectList: amotify.fn.Input.List.OptionParams[] = []
           ColumnDatas.forEach( ( data ) => {
-            if ( !data ) return;
+            if ( !data ) return
             SelectList.push( {
               value: data,
               label: <Box
@@ -183,11 +183,11 @@ const Components = {
               >
                 { data }
               </Box>
-            } );
-          } );
+            } )
+          } )
 
-          let FilterModaButtonID = 'BUTTON-' + val_status.componentID + '-' + colIndex;
-          let FilterSheetID = val_status.componentID + '-' + colIndex;
+          let FilterModaButtonID = 'BUTTON-' + val_status.componentID + '-' + colIndex
+          let FilterSheetID = val_status.componentID + '-' + colIndex
 
           let SheetParams: amotify.fn.Sheet.Params = {
             sheetID: FilterSheetID,
@@ -228,11 +228,11 @@ const Components = {
                     padding: '2/3'
                   } }
                   onUpdateValidValue={ ( { value } ) => {
-                    let DropValues = ColumnDatas.filter( ( data ) => !value.includes( data ) );
+                    let DropValues = ColumnDatas.filter( ( data ) => !value.includes( data ) )
                     let newOptions = { ...val_status }
-                    newOptions.filter.current[ colIndex ] = DropValues as string[];
+                    newOptions.filter.current[ colIndex ] = DropValues as string[]
 
-                    set_status( newOptions );
+                    set_status( newOptions )
                   } }
                 />
               </Column>
@@ -244,7 +244,7 @@ const Components = {
                 <Buttons.Button.Border.S
                   isRounded
                   onClick={ () => {
-                    Sheet.close( FilterSheetID );
+                    Sheet.close( FilterSheetID )
                   } }
                 >
                   閉じる
@@ -254,13 +254,13 @@ const Components = {
                   isRounded
                   ssEffectsOnActive='shrink'
                   onClick={ () => {
-                    let newFilterList = [] as string[];
-                    if ( !filterList.length ) newFilterList = ColumnDatas as string[];
+                    let newFilterList = [] as string[]
+                    if ( !filterList.length ) newFilterList = ColumnDatas as string[]
 
                     let newOptions = { ...val_status }
-                    newOptions.filter.current[ colIndex ] = newFilterList;
+                    newOptions.filter.current[ colIndex ] = newFilterList
 
-                    set_status( newOptions );
+                    set_status( newOptions )
                   } }
                 >
                   全選択
@@ -269,7 +269,7 @@ const Components = {
             </Flex>
           }
 
-          Sheet.refresh( SheetParams,true );
+          Sheet.refresh( SheetParams,true )
 
           FilterButton = <Box className={ style.FilterRegion }>
             <Buttons.Button.Sub.S
@@ -278,8 +278,8 @@ const Components = {
               className={ style[ 'Filtering_' + !!filterList.length ] }
               id={ FilterModaButtonID }
               onClick={ ( event ) => {
-                event.stopPropagation();
-                Sheet.open( SheetParams );
+                event.stopPropagation()
+                Sheet.open( SheetParams )
               } }
             >
               <FAI icon={ faFilter } />
@@ -327,10 +327,10 @@ const Components = {
         onClick={ ( event ) => {
           if ( orderable ) {
             let newOptions = { ...val_status }
-            let orderObject: amotify.fn.Tables.Data.OrderParams = [ colIndex,orderIndex === colIndex && orderDirection == 'ASC' ? 'DESC' : 'ASC' ];
-            newOptions.order.current = orderObject;
-            set_status( newOptions );
-            val_status.onOrderChanged && val_status.onOrderChanged( orderObject );
+            let orderObject: amotify.fn.Tables.Data.OrderParams = [ colIndex,orderIndex === colIndex && orderDirection == 'ASC' ? 'DESC' : 'ASC' ]
+            newOptions.order.current = orderObject
+            set_status( newOptions )
+            val_status.onOrderChanged && val_status.onOrderChanged( orderObject )
           }
         } }
       >
@@ -354,13 +354,13 @@ const Components = {
             { DisplayLabel }
           </Flex>
         </Flex>
-      </Comps.TH> );
+      </Comps.TH> )
     }
 
     return <Comps.Row
       className={ [ style.Row,style.HeadRow ].join( ' ' ) }
       children={ Cols }
-    />;
+    />
   },
   Body: ( params: {
     val_status: DataTableOptionParams
@@ -370,12 +370,12 @@ const Components = {
     let {
       val_status,
       PageRows
-    } = params;
+    } = params
 
-    let BodyRows: ReactElement[] = [];
+    let BodyRows: ReactElement[] = []
     PageRows.forEach( ( row,rowIndex ) => {
-      let ROW = [ ...row ];
-      let Cols: ReactElement[] = [];
+      let ROW = [ ...row ]
+      let Cols: ReactElement[] = []
 
       if ( val_status.checker ) {
         Cols.push( <Comps.TH
@@ -410,24 +410,24 @@ const Components = {
               value={ row.checked }
               override='force'
               onUpdateValidValue={ ( { value } ) => {
-                let newRows = val_status.rows;
-                newRows[ rowIndex ].checked = value;
+                let newRows = val_status.rows
+                newRows[ rowIndex ].checked = value
                 params.set_status( {
                   ...val_status,
                   rows: newRows
-                } );
+                } )
               } }
             />
           </Box>
-        </Comps.TH> );
+        </Comps.TH> )
       }
 
       ROW.forEach( ( col,colIndex ) => {
-        if ( !col ) return;
+        if ( !col ) return
         let {
           type = 'td',
           ...Params
-        } = col;
+        } = col
 
         Params = {
           ...val_status.cellStyles,
@@ -455,22 +455,22 @@ const Components = {
           ].join( ' ' )
         }
 
-        let Cell = Comps[ type == 'td' ? 'TD' : 'TH' ];
+        let Cell = Comps[ type == 'td' ? 'TD' : 'TH' ]
         Cols.push( <Cell
           key={ colIndex }
-          { ...Params } /> );
-      } );
+          { ...Params } /> )
+      } )
 
       BodyRows.push( <Comps.Row
         key={ rowIndex }
         className={ [ style.Row,style.BodyRow ].join( ' ' ) }
         children={ Cols }
         onClick={ ( event ) => {
-          if ( !val_status.onRowClick ) return;
-          val_status.onRowClick( JSON.parse( row.rowID ) as any,event );
+          if ( !val_status.onRowClick ) return
+          val_status.onRowClick( JSON.parse( row.rowID ) as any,event )
         } }
-      /> );
-    } );
+      /> )
+    } )
 
     if ( !PageRows.length ) {
       let Content = <Box
@@ -481,11 +481,11 @@ const Components = {
         } }
         borderTop='1.thin'
         children={ 'テーブルがありません' }
-      />;
+      />
       if ( val_status.noRecords ) {
         Content = <>
           { val_status.noRecords }
-        </>;
+        </>
       }
 
       BodyRows.push( <Comps.Row
@@ -502,9 +502,9 @@ const Components = {
         >
           { Content }
         </Comps.TD>
-      </Comps.Row> );
+      </Comps.Row> )
     }
-    return <>{ BodyRows }</>;
+    return <>{ BodyRows }</>
   },
   Core: ( params: {
     val_status: DataTableOptionParams
@@ -513,36 +513,36 @@ const Components = {
     let {
       val_status,
       set_status
-    } = params;
+    } = params
 
     let {
       searchKeyword,
       filter,
       order,
       paging
-    } = val_status;
+    } = val_status
 
-    let MotherRows = [ ...val_status.rows ];
-    let KeywordFilterRows = [ ...val_status.rows ];
-    let FilterRows = [ ...val_status.rows ];
-    let PageRows = [ ...val_status.rows ];
+    let MotherRows = [ ...val_status.rows ]
+    let KeywordFilterRows = [ ...val_status.rows ]
+    let FilterRows = [ ...val_status.rows ]
+    let PageRows = [ ...val_status.rows ]
 
     if ( searchKeyword ) {
       KeywordFilterRows = MotherRows.filter( ( row ) => {
-        if ( ( row.__sys4SearchKey || '' ).match( new RegExp( searchKeyword,'i' ) ) ) return 1;
-        return 0;
-      } );
-      FilterRows = [ ...KeywordFilterRows ];
-      PageRows = [ ...KeywordFilterRows ];
+        if ( ( row.__sys4SearchKey || '' ).match( new RegExp( searchKeyword,'i' ) ) ) return 1
+        return 0
+      } )
+      FilterRows = [ ...KeywordFilterRows ]
+      PageRows = [ ...KeywordFilterRows ]
     }
     if ( filter.enabled ) {
       for ( let i = 0; i < val_status.colLength; i++ ) {
-        let enabled = filter.column[ i ];
-        let current = filter.current[ i ];
+        let enabled = filter.column[ i ]
+        let current = filter.current[ i ]
 
         if ( enabled && current && current.length ) {
-          FilterRows = FilterRows.filter( ( row ) => !current.includes( row[ i ].data as string ) );
-          PageRows = [ ...FilterRows ];
+          FilterRows = FilterRows.filter( ( row ) => !current.includes( row[ i ].data as string ) )
+          PageRows = [ ...FilterRows ]
         }
       }
     }
@@ -553,19 +553,19 @@ const Components = {
           order.current[ 0 ],
           'orderIndex'
         ]
-      } );
-      PageRows = [ ...FilterRows ];
+      } )
+      PageRows = [ ...FilterRows ]
     }
 
     {
       let {
         currentPageIndex,
         rowLength
-      } = paging;
-      PageRows = [ ...PageRows ].splice( ( currentPageIndex - 1 ) * rowLength,rowLength );
+      } = paging
+      PageRows = [ ...PageRows ].splice( ( currentPageIndex - 1 ) * rowLength,rowLength )
     }
 
-    let tableObjectID = Components.__memoryID + '_' + val_status.tableID;
+    let tableObjectID = Components.__memoryID + '_' + val_status.tableID
 
     let useStatusOutput: amotify.fn.Tables.Data.useStatusOutput = {
       tableComponentDidMount: true,
@@ -583,10 +583,10 @@ const Components = {
       value: {
         status: useStatusOutput,
         updatePageIndex: ( index: number ) => {
-          let Index = Math.min( Math.max( 1,index ),val_status.paging.pageLength );
+          let Index = Math.min( Math.max( 1,index ),val_status.paging.pageLength )
           let newOptions = { ...val_status }
-          newOptions.paging.currentPageIndex = Index;
-          set_status( newOptions );
+          newOptions.paging.currentPageIndex = Index
+          set_status( newOptions )
         },
         updateRowLength: ( index: number ) => {
           let newOptions = { ...val_status }
@@ -595,22 +595,22 @@ const Components = {
             currentPageIndex: 1,
             pageLength: Math.ceil( FilterRows.length / index )
           }
-          set_status( newOptions );
+          set_status( newOptions )
         },
         updateKeyword: ( keyword: string ) => {
-          $.interval.clear( 'InputSearchTime' );
+          $.interval.clear( 'InputSearchTime' )
           $.interval.standBy( 'InputSearchTime',200,() => {
             let newOptions = { ...val_status }
 
-            newOptions.searchKeyword = keyword;
-            newOptions.paging.currentPageIndex = 1;
-            newOptions.filter.current = newOptions.filter.current.map( () => [] );
+            newOptions.searchKeyword = keyword
+            newOptions.paging.currentPageIndex = 1
+            newOptions.filter.current = newOptions.filter.current.map( () => [] )
 
-            set_status( newOptions );
-          } );
+            set_status( newOptions )
+          } )
         },
         getRowData: () => {
-          let ReturnRows = [ ...MotherRows ];
+          let ReturnRows = [ ...MotherRows ]
 
           if ( order.enabled ) {
             ReturnRows = ReturnRows.order( {
@@ -619,35 +619,35 @@ const Components = {
                 order.current[ 0 ],
                 'orderIndex'
               ]
-            } );
+            } )
           }
 
           ReturnRows.forEach( ( row ) => {
-            row.currentPage = false;
-            row.filtered = false;
-            // row.checked = val_checked[ row.rowID! ];
+            row.currentPage = false
+            row.filtered = false
+            // row.checked = val_checked[ row.rowID! ]
           } )
           PageRows.forEach( ( row ) => {
-            let { rowID } = row;
-            ReturnRows.find( ( row ) => row.rowID == rowID )!.currentPage = true;
-          } );
+            let { rowID } = row
+            ReturnRows.find( ( row ) => row.rowID == rowID )!.currentPage = true
+          } )
           FilterRows.forEach( ( row ) => {
-            let { rowID } = row;
-            ReturnRows.find( ( row ) => row.rowID == rowID )!.filtered = true;
-          } );
-          return ReturnRows;
+            let { rowID } = row
+            ReturnRows.find( ( row ) => row.rowID == rowID )!.filtered = true
+          } )
+          return ReturnRows
         }
       }
-    } );
+    } )
 
     React.useEffect( () => {
-      let Propagations = Components.Propagations[ val_status.tableID ] || [];
+      let Propagations = Components.Propagations[ val_status.tableID ] || []
       Object.keys( Propagations ).forEach( ( key ) => {
-        let propagationObject = useStore.get( key );
-        if ( !propagationObject?.refresh ) return;
-        propagationObject.refresh();
-      } );
-    } );
+        let propagationObject = useStore.get( key )
+        if ( !propagationObject?.refresh ) return
+        propagationObject.refresh()
+      } )
+    } )
 
     return <Box
       className={ style.TableBase }
@@ -664,27 +664,27 @@ const Components = {
           PageRows={ PageRows }
         />
       </Comps.Table>
-    </Box>;
+    </Box>
   },
   Propagations: {} as any,
 
   DataLeveler: ( params: amotify.fn.Tables.Data.Params ) => {
-    params = { ...params };
-    params.filter = params.filter ?? false;
+    params = { ...params }
+    params.filter = params.filter ?? false
     params.filter = Array.from( { length: params.colLength } ).map( ( a,index ) => {
       if ( $.is.boolean( params.filter ) ) {
-        return params.filter;
+        return params.filter
       }
-      return ( params.filter as boolean[] )![ index ] ?? false;
-    } );
+      return ( params.filter as boolean[] )![ index ] ?? false
+    } )
 
-    params.order = params.order ?? true;
+    params.order = params.order ?? true
     params.order = Array.from( { length: params.colLength } ).map( ( a,index ) => {
       if ( $.is.boolean( params.order ) ) {
-        return params.order;
+        return params.order
       }
-      return ( params.order as boolean[] )![ index ] ?? true;
-    } );
+      return ( params.order as boolean[] )![ index ] ?? true
+    } )
 
     params = {
       checker: false,
@@ -695,24 +695,24 @@ const Components = {
       ...params
     }
     params.rows.forEach( ( row,rowIndex ) => {
-      row.rowID = JSON.stringify( row.rowID || rowIndex );
-      let __sys4SearchKey: string[] = [];
+      row.rowID = JSON.stringify( row.rowID || rowIndex )
+      let __sys4SearchKey: string[] = []
       row.forEach( ( col,colIndex ) => {
         let {
           data,
           children,
           orderIndex
-        } = col;
-        col.orderIndex = $.is.exist( orderIndex ) ? String( orderIndex ) : String( data );
-        col.children = children || String( data );
-        __sys4SearchKey.push( String( col.data ) );
-      } );
-      row.__sys4SearchKey = __sys4SearchKey.join( '/;' );
-    } );
+        } = col
+        col.orderIndex = $.is.exist( orderIndex ) ? String( orderIndex ) : String( data )
+        col.children = children || String( data )
+        __sys4SearchKey.push( String( col.data ) )
+      } )
+      row.__sys4SearchKey = __sys4SearchKey.join( '/' )
+    } )
     return <Components.StateManager
       eventID={ $.uuidGen() }
       { ...params }
-    />;
+    />
   },
   StateManager: ( params: amotify.fn.Tables.Data.Params ) => {
     let {
@@ -724,8 +724,8 @@ const Components = {
       order,
       defaultOrder = [ 0,'ASC' ] as amotify.fn.Tables.Data.OrderParams,
       pageRowLength = 30
-    } = params;
-    let [ val_componentID ] = React.useState( $.uuidGen() );
+    } = params
+    let [ val_componentID ] = React.useState( $.uuidGen() )
 
     let DefStatus: DataTableOptionParams = {
       tableID: params.tableID || val_componentID,
@@ -757,28 +757,28 @@ const Components = {
       onRowClick: params.onRowClick,
       onOrderChanged: params.onOrderChanged
     }
-    let [ val_status,set_status ] = React.useState( DefStatus );
+    let [ val_status,set_status ] = React.useState( DefStatus )
 
-    let [ val_eventID,set_eventID ] = React.useState( params.eventID );
+    let [ val_eventID,set_eventID ] = React.useState( params.eventID )
     if ( val_eventID != params.eventID ) {
-      set_eventID( params.eventID );
-      set_status( DefStatus );
+      set_eventID( params.eventID )
+      set_status( DefStatus )
     }
 
     return <Components.Core
       val_status={ val_status }
       set_status={ set_status }
-    />;
+    />
   }
 }
 
 export const DataFNs: amotify.fn.Tables.Data.FNs = {
   __memoryID: Components.__memoryID,
   useStatus: ( tableID ) => {
-    let [ val_statusID ] = React.useState( $.uuidGen() );
-    let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() );
+    let [ val_statusID ] = React.useState( $.uuidGen() )
+    let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() )
 
-    let tableObjectID = Components.__memoryID + '_' + tableID;
+    let tableObjectID = Components.__memoryID + '_' + tableID
     React.useEffect( () => {
       Components.Propagations[ tableID ] = {
         ...Components.Propagations[ tableID ],
@@ -788,45 +788,45 @@ export const DataFNs: amotify.fn.Tables.Data.FNs = {
         key: val_statusID,
         value: {
           refresh: () => {
-            set_refresh( $.uuidGen() );
+            set_refresh( $.uuidGen() )
           }
         }
-      } );
+      } )
 
       return () => {
-        delete Components.Propagations[ tableID ][ val_statusID ];
+        delete Components.Propagations[ tableID ][ val_statusID ]
       }
-    },[] );
+    },[] )
 
     return useStore.get( tableObjectID )?.status || {
       tableComponentDidMount: false
-    };
+    }
   },
   getRowData: ( tableID ) => {
-    let tableObject = useStore.get( Components.__memoryID + '_' + tableID );
-    if ( !tableObject?.getRowData ) return;
-    return tableObject.getRowData();
+    let tableObject = useStore.get( Components.__memoryID + '_' + tableID )
+    if ( !tableObject?.getRowData ) return
+    return tableObject.getRowData()
   },
   setPageIndex: ( tableID,pageIndex ) => {
-    let tableObject = useStore.get( Components.__memoryID + '_' + tableID );
-    if ( !tableObject?.updatePageIndex ) return;
-    tableObject.updatePageIndex( pageIndex );
+    let tableObject = useStore.get( Components.__memoryID + '_' + tableID )
+    if ( !tableObject?.updatePageIndex ) return
+    tableObject.updatePageIndex( pageIndex )
   },
   setRowLength: ( tableID,rowLength ) => {
-    let tableObject = useStore.get( Components.__memoryID + '_' + tableID );
-    if ( !tableObject?.updateRowLength ) return;
-    tableObject.updateRowLength( rowLength );
+    let tableObject = useStore.get( Components.__memoryID + '_' + tableID )
+    if ( !tableObject?.updateRowLength ) return
+    tableObject.updateRowLength( rowLength )
   },
   setSearchKeyword: ( tableID,keyword ) => {
-    let tableObject = useStore.get( Components.__memoryID + '_' + tableID );
-    if ( !tableObject?.updateKeyword ) return;
-    tableObject.updateKeyword( keyword );
+    let tableObject = useStore.get( Components.__memoryID + '_' + tableID )
+    if ( !tableObject?.updateKeyword ) return
+    tableObject.updateKeyword( keyword )
   },
 }
 export const DataComps: amotify.fn.Tables.Data.Comps = {
   SearchInput: ( params ) => {
-    let status = DataFNs.useStatus( params.tableID );
-    if ( !status.tableComponentDidMount ) return null;
+    let status = DataFNs.useStatus( params.tableID )
+    if ( !status.tableComponentDidMount ) return null
 
     return <Input.Text.Normal
       placeholder='検索...'
@@ -842,14 +842,14 @@ export const DataComps: amotify.fn.Tables.Data.Comps = {
       override='force'
       value={ status.searchKeyword }
       onUpdateValidValue={ ( { value } ) => {
-        DataFNs.setSearchKeyword( params.tableID,value );
+        DataFNs.setSearchKeyword( params.tableID,value )
       } }
-    />;
+    />
   },
   Info: ( params ) => {
-    let status = DataFNs.useStatus( params.tableID );
-    if ( !status.tableComponentDidMount ) return null;
-    let Ratio = status.filteredRows.ratio( status.totalRows ) || 0;
+    let status = DataFNs.useStatus( params.tableID )
+    if ( !status.tableComponentDidMount ) return null
+    let Ratio = status.filteredRows.ratio( status.totalRows ) || 0
 
     return <Flex
       verticalAlign='baseline'
@@ -864,15 +864,15 @@ export const DataComps: amotify.fn.Tables.Data.Comps = {
         { status.filteredRows.toLocaleString() }
       </Span>
       / { status.totalRows.toLocaleString() }件 ({ Ratio }%)
-    </Flex>;
+    </Flex>
   },
   Paging: ( params ) => {
-    let status = DataFNs.useStatus( params.tableID );
-    if ( !status.tableComponentDidMount ) return null;
+    let status = DataFNs.useStatus( params.tableID )
+    if ( !status.tableComponentDidMount ) return null
 
-    let PageSelect: amotify.fn.Input.Select.OptionProps[] = [];
+    let PageSelect: amotify.fn.Input.Select.OptionProps[] = []
     for ( let index = 0; index < status.paging.pageLength; index++ ) {
-      PageSelect.push( { value: index + 1,label: ( index + 1 ).toString() } );
+      PageSelect.push( { value: index + 1,label: ( index + 1 ).toString() } )
     }
 
     return <Row.Center>
@@ -889,7 +889,7 @@ export const DataComps: amotify.fn.Tables.Data.Comps = {
           value={ status.paging.currentPageIndex }
           options={ PageSelect }
           onUpdateValidValue={ ( { value } ) => {
-            DataFNs.setPageIndex( params.tableID,value );
+            DataFNs.setPageIndex( params.tableID,value )
           } }
         />
         / { status.paging.pageLength }
@@ -899,10 +899,10 @@ export const DataComps: amotify.fn.Tables.Data.Comps = {
           ssSphere={ 3 }
           onClick={ () => {
             if ( status.paging.currentPageIndex == 1 ) {
-              DataFNs.setPageIndex( params.tableID,status.paging.pageLength );
-              return;
+              DataFNs.setPageIndex( params.tableID,status.paging.pageLength )
+              return
             }
-            DataFNs.setPageIndex( params.tableID,status.paging.currentPageIndex - 1 );
+            DataFNs.setPageIndex( params.tableID,status.paging.currentPageIndex - 1 )
           } }
         >
           <FAI.ChevronLeft />
@@ -911,36 +911,36 @@ export const DataComps: amotify.fn.Tables.Data.Comps = {
           ssSphere={ 3 }
           onClick={ () => {
             if ( status.paging.currentPageIndex == status.paging.pageLength ) {
-              DataFNs.setPageIndex( params.tableID,1 );
-              return;
+              DataFNs.setPageIndex( params.tableID,1 )
+              return
             }
-            DataFNs.setPageIndex( params.tableID,status.paging.currentPageIndex + 1 );
+            DataFNs.setPageIndex( params.tableID,status.paging.currentPageIndex + 1 )
           } }
         >
           <FAI.ChevronRight />
         </Buttons.Button.Sub.R>
       </Row.Right>
-    </Row.Center>;
+    </Row.Center>
   },
   RowLength: ( params ) => {
-    let status = DataFNs.useStatus( params.tableID );
-    if ( !status.tableComponentDidMount ) return null;
+    let status = DataFNs.useStatus( params.tableID )
+    if ( !status.tableComponentDidMount ) return null
 
-    let currentLength = status.paging.rowLength;
-    let ExistCurrentLength = 0;
+    let currentLength = status.paging.rowLength
+    let ExistCurrentLength = 0
     let LengthList: amotify.fn.Input.Select.OptionProps[] = params.lengthSelect.map( ( l ) => {
-      ExistCurrentLength |= Number( l == currentLength );
+      ExistCurrentLength |= Number( l == currentLength )
 
       return { value: l,label: l.toString() }
-    } );
+    } )
     if ( !ExistCurrentLength ) {
-      LengthList.push( { value: currentLength,label: currentLength.toString() } );
+      LengthList.push( { value: currentLength,label: currentLength.toString() } )
     }
 
     LengthList = LengthList.order( {
       direction: 'ASC',
       keys: [ 'value' ],
-    } );
+    } )
 
     return <Row.Center
       gap={ '1/2' }
@@ -955,11 +955,11 @@ export const DataComps: amotify.fn.Tables.Data.Comps = {
         value={ status.paging.rowLength }
         options={ LengthList }
         onUpdateValidValue={ ( { value } ) => {
-          DataFNs.setRowLength( params.tableID,value );
+          DataFNs.setRowLength( params.tableID,value )
         } }
       />
-    </Row.Center>;
+    </Row.Center>
   },
 }
 
-export const DataTable = ( params: amotify.fn.Tables.Data.Params ) => ( <Components.DataLeveler{ ...params } /> );
+export const DataTable = ( params: amotify.fn.Tables.Data.Params ) => ( <Components.DataLeveler{ ...params } /> )