amotify 0.0.4 → 0.0.5

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

@@ -1,955 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global';
-import {
-  Flex,
-  Box,
-  Span,
-  FAIcon
-} from '@atoms';
-import {
-  Column,
-  Row,Text
-} from '@mols';
-import {
-  Buttons,
-  Input,
-  Sheet,
-} from '@functions';
-
-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
-}
-
-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 ? <FAIcon
-        fontSize={ '1.mini' }
-        fontColor={ colIndex == orderIndex ? '1.clear' : '5.translucent' }
-        d={ colIndex == orderIndex
-          ? 'arrow-' + [ 'up','down' ][ Number( orderDirection == 'DESC' ) ]
-          : 'arrow-down-arrow-up' }
-      /> : 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 }
-              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 }
-              children={ <FAIcon
-                d='bars-filter'
-              /> }
-              onClick={ ( event ) => {
-                event.stopPropagation();
-                Sheet.open( SheetParams );
-              } }
-            />
-          </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 }
-            newOptions.order.current = [ colIndex,orderIndex === colIndex && orderDirection == 'ASC' ? 'DESC' : 'ASC' ];
-            set_status( newOptions );
-          }
-        } }
-      >
-        <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'
-          >
-            { DisplayLabel }
-            { OrderButton }
-          </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.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,
-    }
-    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' }
-      >
-        <FAIcon.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 );
-          } }
-        >
-          <FAIcon.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 );
-          } }
-        >
-          <FAIcon.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 } /> );