amotify 0.0.4 → 0.0.6

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

@@ -1,448 +0,0 @@
-import {
-  useStore
-} from '@global';
-import {
-  FAIcon
-} from '@atoms';
-import {
-  Buttons,
-  Tooltips,
-} from '@functions';
-const {
-  useState,
-  useEffect,
-} = React;
-
-import {
-  Comps,
-  DefaultCellSystemStyles
-} from '../_';
-
-import style from '../style.module.scss';
-
-const HeadRow: FNC<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: FNC<amotify.fn.Tables.Drag.Params> = ( props ) => {
-  let {
-    cellStyles = {},
-    cellClassName = '',
-    cellStylesCallback,
-    head,
-    rows,
-    colLength,
-    onOrderChanged
-  } = props;
-
-  let [ val_componentID ] = useState( $.uuidGen() );
-  let [ val_info,set_info ] = 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' }
-        { ...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,
-        } ) : {} }
-        padding={ 0 }
-        borderRight
-        className={ [
-          style.Cell,
-          style.Draggable,
-          cellClassName
-        ].join( ' ' ) }
-      >
-        <Buttons.Button.Clear.R
-          className={ style.DragableButton }
-          fontColor={ '5.translucent' }
-          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
-            } );
-          } }
-        >
-          <FAIcon
-            d='grip-dots-vertical'
-          />
-        </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( ' ' ) }
-    >
-      <FAIcon.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 }
-    /> )
-  }
-
-  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
-          } );
-        }
-      }
-    } )
-  } );
-  useEffect( () => {
-    return () => {
-      useStore.delete( val_componentID );
-    }
-  },[] );
-
-  return ( <>
-    { BodyRows }
-  </> );
-}
-
-
-export const DragTable: FNC<amotify.fn.Tables.Drag.Params> = ( params ) => {
-  params.colLength = params.colLength + 1;
-
-  if ( params.head ) {
-    params.head = [
-      {
-        children: <Buttons.Button.Plain
-          ssSphere={ 3 }
-          fontSize={ '3.paragraph' }
-          fontColor={ 'theme' }
-          onMouseOver={ ( event ) => {
-            Tooltips.open( {
-              parent: event.currentTarget,
-              padding: [ 0,1 ],
-              content: <Tooltips.Comps.Body>
-                <FAIcon
-                  d='grip-dots-vertical'
-                />
-                ボタンをドラッグして順序を変更
-              </Tooltips.Comps.Body>
-            } );
-          } }
-        >
-          <FAIcon.QuestionCircle />
-        </Buttons.Button.Plain>,
-        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,123 +0,0 @@
-import style from '../style.module.scss';
-
-import {
-  Comps,
-  DefaultCellSystemStyles
-} from '../_';
-
-const HeadRow: FNC<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: FNC<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: FNC<amotify.fn.Tables.Normal.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> );
-}