amotify 0.0.65 → 0.0.67

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

@@ -1,965 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Flex,
-  Box,
-  Span,
-  FAI
-} from '@atoms'
-import {
-  Column,
-  Row,Text
-} from '@mols'
-import {
-  Buttons,
-  Input,
-  Sheet,
-} 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 style from '../style.module.scss'
-
-import {
-  Comps,
-  DefaultCellSystemStyles,
-} from '../_'
-
-type DataTableOptionParams = {
-  tableID: string
-  componentID: string
-
-  colLength: number
-  checker: boolean
-
-  searchKeyword: string
-  filter: {
-    enabled: boolean
-    column: boolean[]
-    current: ( string[] )[]
-  }
-  order: {
-    enabled: boolean
-    column: boolean[]
-    current: amotify.fn.Tables.Data.OrderParams
-  }
-  paging: {
-    rowLength: number
-    pageLength: number
-    currentPageIndex: number
-  }
-  head: amotify.fn.Tables.Data.HeadRowParams
-  rows: amotify.fn.Tables.Data.BodyRowParams[]
-
-  noRecords: ReactElement
-  cellStyles?: amotifyUniStyleParams
-  cellClassName?: string
-  cellStylesCallback?: {
-    ( params: amotify.fn.Tables.StylesCallbackInput ): amotifyUniStyleParams
-  }
-  onRowClick?: amotify.fn.Tables.OnRowClick
-  onOrderChanged?: {
-    ( args: amotify.fn.Tables.Data.OrderParams ): void
-  }
-}
-
-const Components = {
-  __memoryID: $.uuidGen(),
-  Header: ( params: {
-    val_status: DataTableOptionParams
-    set_status: React.Dispatch<React.SetStateAction<DataTableOptionParams>>
-
-    KeywordFilterRows: amotify.fn.Tables.Data.BodyRowParams[]
-  } ) => {
-    let {
-      val_status,
-      set_status,
-      KeywordFilterRows
-    } = { ...params }
-
-    let {
-      order,
-      filter
-    } = val_status
-    let [ orderIndex,orderDirection ] = order.current
-
-    let Cols = []
-
-    let HEAD = [ ...val_status.head ]
-    if ( val_status.checker ) {
-      Cols.push( <Comps.TH
-        { ...val_status.cellStyles }
-        fontWeight='2.normal'
-        position='sticky'
-        top={ 0 }
-        unitWidth={ 4 }
-        padding={ 0 }
-        { ...DefaultCellSystemStyles( {
-          top: true,
-          bottom: !val_status.rows.length,
-          left: true,
-          right: !val_status.colLength
-        } ) }
-        { ...val_status.cellStylesCallback ? val_status.cellStylesCallback( {
-          top: true,
-          bottom: !val_status.rows.length,
-          left: true,
-          right: !val_status.colLength,
-          rowIndex: 0,
-          colIndex: 0,
-          isBody: false,
-          isHeader: true
-        } ) : {} }
-        className={ [
-          style.Cell,
-          val_status.cellClassName
-        ].join( ' ' ) }
-        freeCSS={ {
-          zIndex: 2
-        } }
-      >
-        <Box flexCenter>
-          <Input.Checker
-            label={ null }
-            value={ false }
-            onUpdateValidValue={ ( { value } ) => {
-              let newRows = val_status.rows
-              newRows.forEach( ( rows ) => {
-                rows.checked = value
-              } )
-              set_status( {
-                ...val_status,
-                rows: newRows
-              } )
-            } }
-          />
-        </Box>
-      </Comps.TH> )
-    }
-
-    for ( let colIndex = 0; colIndex < val_status.colLength; colIndex++ ) {
-      let col = HEAD[ colIndex ]
-      if ( !col ) continue
-
-      let DisplayLabel = col.children || col.data
-
-      let orderable = order.enabled && order.column[ colIndex ]
-      let filterable = filter.enabled && filter.column[ colIndex ]
-
-      let OrderButton = orderable ? <FAI
-        fontSize={ '1.mini' }
-        fontColor={ colIndex == orderIndex ? '1.clear' : '5.translucent' }
-        icon={ colIndex == orderIndex
-          ? orderDirection == 'DESC'
-            ? faArrowDown
-            : faArrowUp
-          : faArrowRight }
-      /> : null
-
-      let FilterButton = <></>
-      if ( filterable ) {
-        let ColumnDatas = KeywordFilterRows.map( ( row ) => {
-          return row[ colIndex ]?.data
-        } )
-        ColumnDatas = [ ... new Set( ColumnDatas ) ].order( {
-          direction: 'ASC',
-        } )
-        let filterList: any = filter.current[ colIndex ]
-
-        if ( filterList ) {
-          let ValueList = ColumnDatas.filter( ( data ) => !filterList.includes( data ) )
-          let SelectList: amotify.fn.Input.List.OptionParams[] = []
-          ColumnDatas.forEach( ( data ) => {
-            if ( !data ) return
-            SelectList.push( {
-              value: data,
-              label: <Box
-                flexSizing={ 'auto' }
-              >
-                { data }
-              </Box>
-            } )
-          } )
-
-          let FilterModaButtonID = 'BUTTON-' + val_status.componentID + '-' + colIndex
-          let FilterSheetID = val_status.componentID + '-' + colIndex
-
-          let SheetParams: amotify.fn.Sheet.Params = {
-            sheetID: FilterSheetID,
-            parent: '#' + FilterModaButtonID,
-            gravityPoint: 23,
-            type: 'custom',
-            content: <Flex
-              flexType='col'
-              border
-              boxShadow={ '3.remark' }
-              backgroundColor={ '1.layer.base' }
-              borderRadius={ 1 }
-              freeCSS={ {
-                minWidth: 12 * 20,
-                maxWidth: 12 * 30
-              } }
-            >
-              <Column
-                gap={ '1/3' }
-                overflow={ 'auto' }
-                padding={ '2/3' }
-                freeCSS={ {
-                  maxHeight: 12 * 30
-                } }
-              >
-                <Input.Checkbox
-                  tone='cloud'
-                  icon
-                  value={ ValueList }
-                  display='flex'
-                  gap={ '1/2' }
-                  override='force'
-                  options={ SelectList }
-                  hideInput
-                  name={ 'DTFilter-col-' + colIndex + '-table-' + val_status.componentID }
-                  cellStyles={ {
-                    flexSizing: 'auto',
-                    padding: '2/3'
-                  } }
-                  onUpdateValidValue={ ( { value } ) => {
-                    let DropValues = ColumnDatas.filter( ( data ) => !value.includes( data ) )
-                    let newOptions = { ...val_status }
-                    newOptions.filter.current[ colIndex ] = DropValues as string[]
-
-                    set_status( newOptions )
-                  } }
-                />
-              </Column>
-              <Row.Separate
-                gap={ '2/3' }
-                padding={ '2/3' }
-                horizontalAlign='right'
-              >
-                <Buttons.Button.Border.S
-                  isRounded
-                  onClick={ () => {
-                    Sheet.close( FilterSheetID )
-                  } }
-                >
-                  閉じる
-                </Buttons.Button.Border.S>
-                <Buttons.Button.Prime.S
-                  color='theme'
-                  isRounded
-                  ssEffectsOnActive='shrink'
-                  onClick={ () => {
-                    let newFilterList = [] as string[]
-                    if ( !filterList.length ) newFilterList = ColumnDatas as string[]
-
-                    let newOptions = { ...val_status }
-                    newOptions.filter.current[ colIndex ] = newFilterList
-
-                    set_status( newOptions )
-                  } }
-                >
-                  全選択
-                </Buttons.Button.Prime.S>
-              </Row.Separate>
-            </Flex>
-          }
-
-          Sheet.refresh( SheetParams,true )
-
-          FilterButton = <Box className={ style.FilterRegion }>
-            <Buttons.Button.Sub.S
-              ssSphere={ 2.5 }
-              fontSize={ '1.mini' }
-              className={ style[ 'Filtering_' + !!filterList.length ] }
-              id={ FilterModaButtonID }
-              onClick={ ( event ) => {
-                event.stopPropagation()
-                Sheet.open( SheetParams )
-              } }
-            >
-              <FAI icon={ faFilter } />
-            </Buttons.Button.Sub.S>
-          </Box>
-        }
-      }
-
-      col = {
-        ...val_status.cellStyles,
-        ...col,
-        ...DefaultCellSystemStyles( {
-          top: true,
-          bottom: !val_status.rows.length,
-          left: colIndex == Number( val_status.checker ),
-          right: colIndex == val_status.colLength - 1
-        } ),
-        ...val_status.cellStylesCallback ? val_status.cellStylesCallback( {
-          top: true,
-          bottom: !val_status.rows.length,
-          left: colIndex == Number( val_status.checker ),
-          right: colIndex == val_status.colLength - 1,
-          rowIndex: 0,
-          colIndex,
-          isBody: false,
-          isHeader: true
-        } ) : {},
-        ssPushable: orderable,
-        className: [
-          style.Cell,
-          val_status.cellClassName,
-          col.className
-        ].join( ' ' )
-      }
-
-      Cols.push( <Comps.TH
-        fontWeight='2.normal'
-        position='sticky'
-        top={ 0 }
-        { ...col }
-        freeCSS={ {
-          zIndex: 2,
-          ...col.freeCSS
-        } }
-        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 )
-          }
-        } }
-      >
-        <Flex
-          flexType='row-r'
-          flexWrap={ false }
-          height={ 1 }
-          borderRadius='inherit'
-          flexCenter
-        >
-          { FilterButton }
-          <Flex
-            flexSizing={ 0 }
-            position='relative'
-            borderRadius='inherit'
-            gap={ '1/3' }
-            flexWrap={ false }
-            horizontalAlign='center'
-          >
-            { OrderButton }
-            { DisplayLabel }
-          </Flex>
-        </Flex>
-      </Comps.TH> )
-    }
-
-    return <Comps.Row
-      className={ [ style.Row,style.HeadRow ].join( ' ' ) }
-      children={ Cols }
-    />
-  },
-  Body: ( params: {
-    val_status: DataTableOptionParams
-    set_status: React.Dispatch<React.SetStateAction<DataTableOptionParams>>
-    PageRows: amotify.fn.Tables.Data.BodyRowParams[]
-  } ) => {
-    let {
-      val_status,
-      PageRows
-    } = params
-
-    let BodyRows: ReactElement[] = []
-    PageRows.forEach( ( row,rowIndex ) => {
-      let ROW = [ ...row ]
-      let Cols: ReactElement[] = []
-
-      if ( val_status.checker ) {
-        Cols.push( <Comps.TH
-          unitWidth={ 4 }
-          padding={ 0 }
-          borderRight
-          { ...val_status.cellStyles }
-          { ...DefaultCellSystemStyles( {
-            top: rowIndex == 0 && !val_status.head,
-            bottom: rowIndex == PageRows.length - 1,
-            left: true,
-            right: !val_status.colLength
-          } ) }
-          { ...val_status.cellStylesCallback ? val_status.cellStylesCallback( {
-            top: rowIndex == 0 && !val_status.head,
-            bottom: rowIndex == PageRows.length - 1,
-            left: true,
-            right: !val_status.colLength,
-            rowIndex,
-            colIndex: 0,
-            isBody: true,
-            isHeader: false
-          } ) : {} }
-          className={ [
-            style.Cell,
-            val_status.cellClassName
-          ].join( ' ' ) }
-        >
-          <Box flexCenter>
-            <Input.Checker
-              label={ null }
-              value={ row.checked }
-              override='force'
-              onUpdateValidValue={ ( { value } ) => {
-                let newRows = val_status.rows
-                newRows[ rowIndex ].checked = value
-                params.set_status( {
-                  ...val_status,
-                  rows: newRows
-                } )
-              } }
-            />
-          </Box>
-        </Comps.TH> )
-      }
-
-      ROW.forEach( ( col,colIndex ) => {
-        if ( !col ) return
-        let {
-          type = 'td',
-          ...Params
-        } = col
-
-        Params = {
-          ...val_status.cellStyles,
-          ...Params,
-          ...DefaultCellSystemStyles( {
-            top: rowIndex == 0 && !val_status.head,
-            bottom: rowIndex == PageRows.length - 1,
-            left: val_status.checker ? false : colIndex == 0,
-            right: colIndex == val_status.colLength - 1
-          } ),
-          ...val_status.cellStylesCallback ? val_status.cellStylesCallback( {
-            top: rowIndex == 0 && !val_status.head,
-            bottom: rowIndex == PageRows.length - 1,
-            left: val_status.checker ? false : colIndex == 0,
-            right: colIndex == val_status.colLength - 1,
-            rowIndex,
-            colIndex,
-            isBody: true,
-            isHeader: false
-          } ) : {},
-          className: [
-            style.Cell,
-            val_status.cellClassName,
-            Params.className
-          ].join( ' ' )
-        }
-
-        let Cell = Comps[ type == 'td' ? 'TD' : 'TH' ]
-        Cols.push( <Cell
-          key={ colIndex }
-          { ...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 ( !PageRows.length ) {
-      let Content = <Box
-        padding={ 2 }
-        fontColor={ '4.thin' }
-        freeCSS={ {
-          textAlign: 'center'
-        } }
-        borderTop='1.thin'
-        children={ 'テーブルがありません' }
-      />
-      if ( val_status.noRecords ) {
-        Content = <>
-          { val_status.noRecords }
-        </>
-      }
-
-      BodyRows.push( <Comps.Row
-        key={ 'dataNotFound' }
-        className={ [
-          style.Row,
-          style.BodyRow,
-          style.DataNotFound
-        ].join( ' ' ) }
-      >
-        <Comps.TD
-          colSpan={ val_status.colLength }
-          className={ style.Cell }
-        >
-          { Content }
-        </Comps.TD>
-      </Comps.Row> )
-    }
-    return <>{ BodyRows }</>
-  },
-  Core: ( params: {
-    val_status: DataTableOptionParams
-    set_status: React.Dispatch<React.SetStateAction<DataTableOptionParams>>
-  } ) => {
-    let {
-      val_status,
-      set_status
-    } = params
-
-    let {
-      searchKeyword,
-      filter,
-      order,
-      paging
-    } = val_status
-
-    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 ( filter.enabled ) {
-      for ( let i = 0; i < val_status.colLength; 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 ]
-        }
-      }
-    }
-    if ( order.enabled ) {
-      FilterRows = FilterRows.order( {
-        direction: order.current[ 1 ],
-        keys: [
-          order.current[ 0 ],
-          'orderIndex'
-        ]
-      } )
-      PageRows = [ ...FilterRows ]
-    }
-
-    {
-      let {
-        currentPageIndex,
-        rowLength
-      } = paging
-      PageRows = [ ...PageRows ].splice( ( currentPageIndex - 1 ) * rowLength,rowLength )
-    }
-
-    let tableObjectID = Components.__memoryID + '_' + val_status.tableID
-
-    let useStatusOutput: amotify.fn.Tables.Data.useStatusOutput = {
-      tableComponentDidMount: true,
-      totalRows: MotherRows.length,
-      pageRows: PageRows.length,
-      filteredRows: FilterRows.length,
-
-      filter: val_status.filter,
-      order: val_status.order,
-      paging: val_status.paging,
-      searchKeyword: val_status.searchKeyword,
-    }
-    useStore.update( {
-      key: tableObjectID,
-      value: {
-        status: useStatusOutput,
-        updatePageIndex: ( index: number ) => {
-          let Index = Math.min( Math.max( 1,index ),val_status.paging.pageLength )
-          let newOptions = { ...val_status }
-          newOptions.paging.currentPageIndex = Index
-          set_status( newOptions )
-        },
-        updateRowLength: ( index: number ) => {
-          let newOptions = { ...val_status }
-          newOptions.paging = {
-            rowLength: index,
-            currentPageIndex: 1,
-            pageLength: Math.ceil( FilterRows.length / index )
-          }
-          set_status( newOptions )
-        },
-        updateKeyword: ( keyword: string ) => {
-          $.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( () => [] )
-
-            set_status( newOptions )
-          } )
-        },
-        getRowData: () => {
-          let ReturnRows = [ ...MotherRows ]
-
-          if ( order.enabled ) {
-            ReturnRows = ReturnRows.order( {
-              direction: order.current[ 1 ],
-              keys: [
-                order.current[ 0 ],
-                'orderIndex'
-              ]
-            } )
-          }
-
-          ReturnRows.forEach( ( row ) => {
-            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
-          } )
-          FilterRows.forEach( ( row ) => {
-            let { rowID } = row
-            ReturnRows.find( ( row ) => row.rowID == rowID )!.filtered = true
-          } )
-          return ReturnRows
-        }
-      }
-    } )
-
-    React.useEffect( () => {
-      let Propagations = Components.Propagations[ val_status.tableID ] || []
-      Object.keys( Propagations ).forEach( ( key ) => {
-        let propagationObject = useStore.get( key )
-        if ( !propagationObject?.refresh ) return
-        propagationObject.refresh()
-      } )
-    } )
-
-    return <Box
-      className={ style.TableBase }
-    >
-      <Comps.Table className={ style.Table }>
-        <Components.Header
-          val_status={ val_status }
-          set_status={ set_status }
-          KeywordFilterRows={ KeywordFilterRows }
-        />
-        <Components.Body
-          val_status={ val_status }
-          set_status={ set_status }
-          PageRows={ PageRows }
-        />
-      </Comps.Table>
-    </Box>
-  },
-  Propagations: {} as any,
-
-  DataLeveler: ( params: amotify.fn.Tables.Data.Params ) => {
-    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 as boolean[] )![ index ] ?? false
-    } )
-
-    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 as boolean[] )![ index ] ?? true
-    } )
-
-    params = {
-      checker: false,
-      searchKeyword: '',
-      filter: false,
-      order: true,
-      defaultOrder: [ 0,'ASC' ],
-      ...params
-    }
-    params.rows.forEach( ( row,rowIndex ) => {
-      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( '/' )
-    } )
-    return <Components.StateManager
-      eventID={ $.uuidGen() }
-      { ...params }
-    />
-  },
-  StateManager: ( params: amotify.fn.Tables.Data.Params ) => {
-    let {
-      colLength,
-      eventID,
-      checker = false,
-      searchKeyword = '',
-      filter,
-      order,
-      defaultOrder = [ 0,'ASC' ] as amotify.fn.Tables.Data.OrderParams,
-      pageRowLength = 30
-    } = params
-    let [ val_componentID ] = React.useState( $.uuidGen() )
-
-    let DefStatus: DataTableOptionParams = {
-      tableID: params.tableID || val_componentID,
-      componentID: val_componentID,
-      colLength,
-      checker,
-      searchKeyword: searchKeyword,
-      filter: {
-        enabled: filter !== false,
-        column: filter as boolean[],
-        current: Array.from( { length: colLength },() => [] )
-      },
-      order: {
-        enabled: order !== false,
-        column: order as boolean[],
-        current: defaultOrder
-      },
-      paging: {
-        rowLength: pageRowLength,
-        pageLength: Math.ceil( params.rows.length / pageRowLength ),
-        currentPageIndex: 1
-      },
-      head: params.head,
-      rows: params.rows,
-      noRecords: params.noRecords,
-      cellStyles: params.cellStyles || {},
-      cellClassName: params.cellClassName || '',
-      cellStylesCallback: params.cellStylesCallback,
-      onRowClick: params.onRowClick,
-      onOrderChanged: params.onOrderChanged
-    }
-    let [ val_status,set_status ] = React.useState( DefStatus )
-
-    let [ val_eventID,set_eventID ] = React.useState( params.eventID )
-    if ( val_eventID != params.eventID ) {
-      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 tableObjectID = Components.__memoryID + '_' + tableID
-    React.useEffect( () => {
-      Components.Propagations[ tableID ] = {
-        ...Components.Propagations[ tableID ],
-        [ val_statusID ]: 1
-      }
-      useStore.set( {
-        key: val_statusID,
-        value: {
-          refresh: () => {
-            set_refresh( $.uuidGen() )
-          }
-        }
-      } )
-
-      return () => {
-        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()
-  },
-  setPageIndex: ( tableID,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 )
-  },
-  setSearchKeyword: ( tableID,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
-
-    return <Input.Text.Normal
-      placeholder='検索...'
-      clearButton
-      padding={ '2/3' }
-      paddingRight={ 3 }
-      rightIcon={ <Input.Comps.RightIcon
-        fontColor={ '5.translucent' }
-        right={ '2/3' }
-      >
-        <FAI.Search />
-      </Input.Comps.RightIcon> }
-      override='force'
-      value={ status.searchKeyword }
-      onUpdateValidValue={ ( { 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
-
-    return <Flex
-      verticalAlign='baseline'
-      gap={ '1/2' }
-      fontSize='1.mini'
-      fontColor='3.blur'
-    >
-      <Span
-        fontSize='4.thirdTitle'
-        fontColor='theme'
-      >
-        { status.filteredRows.toLocaleString() }
-      </Span>
-      / { status.totalRows.toLocaleString() }件 ({ Ratio }%)
-    </Flex>
-  },
-  Paging: ( params ) => {
-    let status = DataFNs.useStatus( params.tableID )
-    if ( !status.tableComponentDidMount ) return null
-
-    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() } )
-    }
-
-    return <Row.Center>
-      <Row.Center
-        gap={ '1/2' }
-      >
-        ページ :
-        <Input.Select
-          enableUnSelected={ false }
-          padding={ [ '1/3','2/3' ] }
-          rightIcon={ false }
-          placeholder=''
-          override='force'
-          value={ status.paging.currentPageIndex }
-          options={ PageSelect }
-          onUpdateValidValue={ ( { value } ) => {
-            DataFNs.setPageIndex( params.tableID,value )
-          } }
-        />
-        / { status.paging.pageLength }
-      </Row.Center>
-      <Row.Right gap={ '1/2' }>
-        <Buttons.Button.Sub.R
-          ssSphere={ 3 }
-          onClick={ () => {
-            if ( status.paging.currentPageIndex == 1 ) {
-              DataFNs.setPageIndex( params.tableID,status.paging.pageLength )
-              return
-            }
-            DataFNs.setPageIndex( params.tableID,status.paging.currentPageIndex - 1 )
-          } }
-        >
-          <FAI.ChevronLeft />
-        </Buttons.Button.Sub.R>
-        <Buttons.Button.Sub.R
-          ssSphere={ 3 }
-          onClick={ () => {
-            if ( status.paging.currentPageIndex == status.paging.pageLength ) {
-              DataFNs.setPageIndex( params.tableID,1 )
-              return
-            }
-            DataFNs.setPageIndex( params.tableID,status.paging.currentPageIndex + 1 )
-          } }
-        >
-          <FAI.ChevronRight />
-        </Buttons.Button.Sub.R>
-      </Row.Right>
-    </Row.Center>
-  },
-  RowLength: ( params ) => {
-    let status = DataFNs.useStatus( params.tableID )
-    if ( !status.tableComponentDidMount ) return null
-
-    let currentLength = status.paging.rowLength
-    let ExistCurrentLength = 0
-    let LengthList: amotify.fn.Input.Select.OptionProps[] = params.lengthSelect.map( ( l ) => {
-      ExistCurrentLength |= Number( l == currentLength )
-
-      return { value: l,label: l.toString() }
-    } )
-    if ( !ExistCurrentLength ) {
-      LengthList.push( { value: currentLength,label: currentLength.toString() } )
-    }
-
-    LengthList = LengthList.order( {
-      direction: 'ASC',
-      keys: [ 'value' ],
-    } )
-
-    return <Row.Center
-      gap={ '1/2' }
-    >
-      件数 :
-      <Input.Select
-        enableUnSelected={ false }
-        rightIcon={ false }
-        placeholder='選択'
-        override='force'
-        padding={ [ '1/3','2/3' ] }
-        value={ status.paging.rowLength }
-        options={ LengthList }
-        onUpdateValidValue={ ( { value } ) => {
-          DataFNs.setRowLength( params.tableID,value )
-        } }
-      />
-    </Row.Center>
-  },
-}
-
-export const DataTable = ( params: amotify.fn.Tables.Data.Params ) => ( <Components.DataLeveler{ ...params } /> )