amotify 0.0.2 → 0.0.4

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

@@ -0,0 +1,448 @@
+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

@@ -0,0 +1,123 @@
+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> );
+}