amotify 0.0.64 → 0.0.66

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

@@ -1,442 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  FAI
-} from '@atoms'
-import {
-  Buttons,
-  Tooltips,
-} from '@fn'
-
-import {
-  Comps,
-  DefaultCellSystemStyles
-} from '../_'
-
-import { faGripVertical } from '@fortawesome/free-solid-svg-icons/faGripVertical'
-
-import style from '../style.module.scss'
-
-const HeadRow: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
-  let {
-    cellStyles = {},
-    cellClassName = '',
-    cellStylesCallback,
-    colLength,
-    head,
-    rows
-  } = props
-
-  if ( !head ) return null
-
-  let Cols = []
-
-  for ( let colIndex = 0; colIndex < colLength; colIndex++ ) {
-    let col = head[ colIndex ]
-
-    let Cell = Comps[ col.type == 'th' ? 'TH' : 'TD' ]
-    Cols.push( <Cell
-      { ...cellStyles }
-      { ...DefaultCellSystemStyles( {
-        top: true,
-        bottom: !rows.length,
-        left: colIndex == 0,
-        right: colIndex == colLength - 1
-      } ) }
-      { ...cellStylesCallback ? cellStylesCallback( {
-        top: true,
-        bottom: !rows.length,
-        left: colIndex == 0,
-        right: colIndex == colLength - 1,
-        rowIndex: 0,
-        colIndex,
-        isBody: false,
-        isHeader: true,
-      } ) : {} }
-      className={ [
-        style.Cell,
-        cellClassName,
-        col.className,
-      ].join( ' ' ) }
-      { ...col }
-    /> )
-  }
-
-  return <Comps.Row
-    className={ [ style.Row,style.HeadRow ].join( ' ' ) }
-    children={ Cols }
-  />
-}
-const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
-  let {
-    cellStyles = {},
-    cellClassName = '',
-    cellStylesCallback,
-    head,
-    rows,
-    colLength,
-    onOrderChanged
-  } = props
-
-  let [ val_componentID ] = React.useState( $.uuidGen() )
-  let [ val_info,set_info ] = React.useState( {
-    rows: rows,
-    origin: 0,
-    to: NaN
-  } )
-
-  let BodyRows: ReactElement[] = []
-
-  val_info.rows.forEach( ( cols,rowIndex ) => {
-    let Cols: ReactElement[] = []
-    {
-      Cols.push( <Comps.TH
-        key={ 'DragOrigin' }
-        padding={ 0 }
-        borderRight
-        { ...cellStyles }
-        { ...DefaultCellSystemStyles( {
-          top: rowIndex == 0 && !head,
-          bottom: rowIndex == rows.length - 1,
-          left: true,
-          right: false
-        } ) }
-        { ...cellStylesCallback ? cellStylesCallback( {
-          top: rowIndex == 0 && !head,
-          bottom: rowIndex == rows.length - 1,
-          left: true,
-          right: false,
-          rowIndex,
-          colIndex: 0,
-          isBody: true,
-          isHeader: false,
-        } ) : {} }
-        className={ [
-          style.Cell,
-          style.Draggable,
-          cellClassName
-        ].join( ' ' ) }
-      >
-        <Buttons.Button.Clear.R
-          className={ style.DragableButton }
-          fontColor={ '4.thin' }
-          fontSize={ '3.paragraph' }
-          margin={ 'auto' }
-          tabIndex={ -1 }
-          ssSphere={ 3 }
-          onMouseDown={ ( event ) => {
-            EffectStart( event,{
-              id: val_componentID,
-              index: rowIndex,
-              rows: val_info.rows,
-              maxLength: rows.length
-            } )
-          } }
-          onTouchStart={ ( event ) => {
-            EffectStart( event,{
-              id: val_componentID,
-              index: rowIndex,
-              rows: val_info.rows,
-              maxLength: rows.length
-            } )
-          } }
-        >
-          <FAI icon={ faGripVertical } />
-        </Buttons.Button.Clear.R>
-      </Comps.TH> )
-    }
-
-    cols.forEach( ( col,colIndex ) => {
-      col = { ...col as any }
-
-      let Cell = Comps[ col.type == 'th' ? 'TH' : 'TD' ]
-      Cols.push( <Cell
-        { ...cellStyles }
-        { ...DefaultCellSystemStyles( {
-          top: !!head && !head.length,
-          bottom: rowIndex == rows.length - 1,
-          left: false,
-          right: colIndex == colLength - 2
-        } ) }
-        { ...cellStylesCallback ? cellStylesCallback( {
-          top: !!head && !head.length,
-          bottom: rowIndex == rows.length - 1,
-          left: false,
-          right: colIndex == colLength - 2,
-          rowIndex,
-          colIndex,
-          isBody: true,
-          isHeader: false,
-        } ) : {} }
-        className={ [
-          style.Cell,
-          cellClassName,
-          col.className,
-        ].join( ' ' ) }
-        { ...col }
-      /> )
-    } )
-
-    BodyRows.push( <Comps.Row
-      key={ rowIndex }
-      id={ 'TableRow-' + val_componentID + '-' + rowIndex }
-      data-rowId={ rowIndex }
-      className={ [ style.Row,style.BodyRow ].join( ' ' ) }
-      children={ Cols }
-    /> )
-  } )
-
-  if ( !isNaN( val_info.to ) ) {
-    let {
-      origin,
-      to
-    } = val_info
-    let Cols = []
-    Cols.push( <Comps.TH
-      key={ 'dragButton' }
-      backgroundColor='tcOpLow'
-      padding={ 0 }
-      borderRight={ '2.normal' }
-      className={ [
-        style.Cell,
-        style.Draggable,
-        cellClassName
-      ].join( ' ' ) }
-    >
-      <FAI.ArrowRight
-        fontColor='theme'
-      />
-    </Comps.TH> )
-
-    let cols = val_info.rows[ origin ]
-    cols.forEach( ( col,colIndex ) => {
-      col = { ...col as any }
-
-      let Cell = Comps[ col.type == 'th' ? 'TH' : 'TD' ]
-      Cols.push( <Cell
-        { ...cellStyles }
-        { ...DefaultCellSystemStyles( {
-          top: false,
-          bottom: false,
-          left: false,
-          right: false
-        } ) }
-        { ...cellStylesCallback ? cellStylesCallback( {
-          top: false,
-          bottom: false,
-          left: false,
-          right: false,
-          rowIndex: -1,
-          colIndex: -1,
-          isBody: true,
-          isHeader: false,
-        } ) : {} }
-        className={ [
-          style.Cell,
-          cellClassName,
-          col.className,
-        ].join( ' ' ) }
-        backgroundColor='tcOpLow'
-        { ...col }
-      /> )
-    } )
-
-    BodyRows.splice( to,0,<Comps.Row
-      key={ 'preSet' }
-      className={ [ style.Row,style.Pre ].join( ' ' ) }
-      children={ Cols }
-    /> )
-  }
-
-  React.useEffect( () => {
-    useStore.set( {
-      key: val_componentID,
-      value: {
-        swap: ( rowIndex: number,insertIndex: number ) => {
-          if ( insertIndex || insertIndex == 0 ) {
-            let targetRow = val_info.rows[ rowIndex ]
-
-            let newRows = [ ...val_info.rows ]
-            newRows.splice( rowIndex,1 )
-            newRows.splice( insertIndex - ( rowIndex < insertIndex ? 1 : 0 ),0,targetRow )
-
-            set_info( {
-              rows: newRows,
-              origin: 0,
-              to: NaN
-            } )
-
-            onOrderChanged( newRows.map( ( row ) => JSON.parse( row.rowID ) ) )
-          }
-        },
-        preSet: ( props: {
-          origin: number,
-          index: number
-        } ) => {
-          let {
-            origin,index
-          } = props
-
-          set_info( {
-            rows: val_info.rows,
-            origin: origin,
-            to: index
-          } )
-        }
-      }
-    } )
-  } )
-  React.useEffect( () => {
-    return () => {
-      useStore.delete( val_componentID )
-    }
-  },[] )
-
-  return <>
-    { BodyRows }
-  </>
-}
-
-export const DragTable: React.FC<amotify.fn.Tables.Drag.Params> = ( params ) => {
-  params = { ...params }
-  params.colLength = params.colLength + 1
-
-  if ( params.head ) {
-    params.head = [
-      {
-        children: <Buttons.Button.Clear.R
-          ssSphere={ 3 }
-          fontSize={ '3.paragraph' }
-          fontColor={ 'theme' }
-          onMouseOver={ ( event ) => {
-            Tooltips.open( {
-              parent: event.currentTarget,
-              content: <Tooltips.Comps.Body>
-                <FAI icon={ faGripVertical } />
-                ボタンをドラッグして順序を変更
-              </Tooltips.Comps.Body>
-            } )
-          } }
-        >
-          <FAI.QuestionCircle />
-        </Buttons.Button.Clear.R>,
-        padding: [ 0,1 ],
-        unitWidth: 4
-      },
-      ...params.head
-    ]
-  }
-  params.rows = params.rows.map( ( row,rowIndex ) => {
-    row.rowID = JSON.stringify( row.rowID || rowIndex )
-    return row
-  } )
-
-  return <Comps.Table className={ style.Table }>
-    <HeadRow { ...params } />
-    <BodyRows { ...params } />
-  </Comps.Table>
-}
-
-type InfoParams = {
-  id: string
-  index: number
-  maxLength: number
-  rows: amotify.fn.Tables.Drag.BodyRowParams[]
-  insertIndex?: number
-}
-
-const EffectStart = async function ( event: any,info: InfoParams ) {
-  event.stopPropagation()
-  event.preventDefault()
-
-  let {
-    id,
-    index,
-    rows,
-    maxLength
-  } = info
-
-  $( '#TableRow-' + id + '-' + index ).addClass( style.DraggerOrigin )
-
-  $( document )
-    .addEvent( {
-      eventID: 'DragMouseMove',
-      eventType: 'mousemove',
-      callback: ( event ) => { EffectMove( event,info ) },
-      option: { passive: false }
-    } )
-    .addEvent( {
-      eventID: 'DragTouchMove',
-      eventType: 'touchmove',
-      callback: ( event ) => { EffectMove( event,info ) },
-      option: { passive: false }
-    } )
-    .addEvent( {
-      eventID: 'DragMouseUp',
-      eventType: 'mouseup',
-      callback: ( event ) => { EffectEnd( event,info ) }
-    } )
-    .addEvent( {
-      eventID: 'DragTouchEnd',
-      eventType: 'touchend',
-      callback: ( event ) => { EffectEnd( event,info ) }
-    } )
-}
-const EffectMove = function ( event: any,info: InfoParams ) {
-  let {
-    id,
-    maxLength
-  } = info
-
-  let Y = $.getCursor( event ).y - $.getScreenSize().scrollY
-
-  for ( let rowIndex = 0; rowIndex < maxLength; rowIndex++ ) {
-    let Row = $( '#TableRow-' + id + '-' + rowIndex )
-    let {
-      top: rT,
-      bottom: rB,
-      height: rH
-    } = Row.position()
-
-    if ( rowIndex == 0 && Y < rT ) {
-      info.insertIndex = 0
-    } else if ( rowIndex === maxLength - 1 && rB <= Y ) {
-      info.insertIndex = maxLength
-    } else if ( Y >= rT && Y < rB ) {
-      info.insertIndex = rowIndex + 1
-    }
-  }
-
-  {
-    let {
-      index,
-      insertIndex
-    } = info
-
-    let component = useStore.get( id )
-    if ( component && component.preSet ) component.preSet( {
-      origin: index,
-      index: insertIndex
-    } )
-  }
-
-  event.stopPropagation()
-  event.preventDefault()
-  return false
-}
-const EffectEnd = function ( event: any,info: InfoParams ) {
-  let {
-    id,
-    index,
-    insertIndex
-  } = info
-
-  let component = useStore.get( id )
-  if ( component && component.swap ) component.swap( index,insertIndex )
-
-  $( '#TableRow-' + id + '-' + index ).removeClass( style.DraggerOrigin )
-
-  $( document ).removeEvent( [ 'DragMouseMove','DragTouchMove','DragMouseUp','DragTouchEnd' ] )
-}

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

@@ -1,124 +0,0 @@
-import React from 'react'
-import {
-  Comps,
-  DefaultCellSystemStyles
-} from '../_'
-import style from '../style.module.scss'
-
-const HeadRow: React.FC<amotify.fn.Tables.Normal.Params> = ( params ) => {
-  let {
-    cellStyles = {},
-    cellClassName = '',
-    cellStylesCallback,
-    colLength,
-    head,
-    rows
-  } = params
-
-  if ( !head ) return null
-
-  let Cols: ReactElement[] = []
-  head.forEach( ( col,colIndex ) => {
-    let Cell = Comps[ col.type == 'th' ? 'TH' : 'TD' ]
-    Cols.push( <Cell
-      { ...cellStyles }
-      { ...DefaultCellSystemStyles( {
-        top: true,
-        bottom: !rows.length,
-        left: colIndex == 0,
-        right: colIndex == colLength - 1
-      } ) }
-      { ...cellStylesCallback ? cellStylesCallback( {
-        top: true,
-        bottom: !rows.length,
-        left: colIndex == 0,
-        right: colIndex == colLength - 1,
-        rowIndex: 0,
-        colIndex,
-        isBody: false,
-        isHeader: true,
-      } ) : {} }
-      className={ [
-        style.Cell,
-        cellClassName,
-        col.className,
-      ].join( ' ' ) }
-      { ...col }
-    /> )
-  } )
-
-  return <Comps.Row
-    className={ [ style.Row,style.HeadRow ].join( ' ' ) }
-    children={ Cols }
-  />
-}
-const BodyRows: React.FC<amotify.fn.Tables.Normal.Params> = ( params ) => {
-  let {
-    cellStyles = {},
-    cellClassName = '',
-    cellStylesCallback,
-    head,
-    rows,
-    colLength,
-    onRowClick,
-  } = params
-
-  let BodyRows: ReactElement[] = []
-  rows.forEach( ( cols,rowIndex ) => {
-    let Cols: ReactElement[] = []
-    cols.forEach( ( col,colIndex ) => {
-      let Cell = Comps[ col.type == 'th' ? 'TH' : 'TD' ]
-      Cols.push( <Cell
-        { ...cellStyles }
-        { ...DefaultCellSystemStyles( {
-          top: rowIndex == 0 && !head,
-          bottom: rowIndex == rows.length - 1,
-          left: colIndex == 0,
-          right: colIndex == colLength - 1
-        } ) }
-        { ...cellStylesCallback ? cellStylesCallback( {
-          top: rowIndex == 0 && !head,
-          bottom: rowIndex == rows.length - 1,
-          left: colIndex == 0,
-          right: colIndex == colLength - 1,
-          rowIndex,
-          colIndex,
-          isBody: true,
-          isHeader: false,
-        } ) : {} }
-        className={ [
-          style.Cell,
-          cellClassName,
-          col.className,
-        ].join( ' ' ) }
-        { ...col }
-      /> )
-    } )
-
-    BodyRows.push( <Comps.Row
-      key={ rowIndex }
-      className={ [ style.Row,style.BodyRow ].join( ' ' ) }
-      children={ Cols }
-      onClick={ ( event ) => {
-        if ( onRowClick ) onRowClick( cols.rowID as any,event )
-      } }
-    /> )
-  } )
-
-  return <>
-    { BodyRows }
-  </>
-}
-
-export const NormalTable: React.FC<amotify.fn.Tables.Normal.Params> = ( params ) => {
-  params = { ...params }
-  params.rows = params.rows.map( ( row,rowIndex ) => {
-    row.rowID = row.rowID || rowIndex
-    return row
-  } )
-
-  return <Comps.Table className={ style.Table }>
-    <HeadRow { ...params } />
-    <BodyRows { ...params } />
-  </Comps.Table>
-}