amotify 0.0.6 → 0.0.8

package/src/Functions/Table/_.tsx

@@ -0,0 +1,170 @@
+import {
+  StyleConverter,
+  useStore
+} from '~/Global/@export';
+
+import {
+  Box,
+  FAIcon
+} from '~/Atoms/@export';
+
+export const Comps: amotify.fn.Tables.CompsMethods = {
+  Table: ( params ) => ( <table { ...StyleConverter.ToClassName( params ) } /> ),
+  Head: ( params ) => ( <thead { ...StyleConverter.ToClassName( params ) } /> ),
+  Body: ( params ) => ( <tbody { ...StyleConverter.ToClassName( params ) } /> ),
+  Row: ( params ) => ( <tr { ...StyleConverter.ToClassName( params ) } /> ),
+
+  TH: ( params ) => ( <th { ...StyleConverter.ToClassName( params ) } /> ),
+  TD: ( params ) => ( <td { ...StyleConverter.ToClassName( params ) } /> ),
+
+  RightIndicator: {
+    type: 'td',
+    unitWidth: 4,
+    // data: '',
+    children: <FAIcon.AngleRight
+      fontColor={ 'theme' }
+      fontSize={ '4.thirdTitle' }
+    />
+  }
+}
+
+import { NormalTable } from './Normal/parts';
+import {
+  DataTable,
+  DataFNs,
+  DataComps
+} from './Data/parts';
+import { DragTable } from './Drag/parts';
+
+import style from './style.module.scss';
+
+const Wrapper: FNC<amotify.fn.Tables.Uni.Params & {
+  type: amotify.fn.Tables.Types
+}> = ( params ) => {
+  let {
+    tone,
+    type,
+  } = params;
+  params.tableID = params.tableID || $.uuidGen();
+  tone = tone || 'auto';
+
+  if ( tone == 'auto' ) {
+    if ( type == 'drag' ) {
+      tone = 'rowBorder';
+    } else {
+      tone = 'border';
+    }
+  }
+
+  let Params = {
+    ...tone != 'plain' ? {
+      backgroundColor: '1.layer.base',
+      borderRadius: '1.tone.primary',
+    } as amotifyUniStyleParams : {},
+    ...params,
+    cellStyles: {
+      padding: '3/4',
+      backgroundColor: '1.layer.base',
+      transition: 'short',
+      textAlign: 'center',
+      ...DefaultCellStyles( type,tone! ),
+      ...params.cellStyles
+    },
+    tone
+  }
+
+  let {
+    className,
+    style: freeCSS,
+    ...others
+  } = StyleConverter.ToClassName( Params as any );
+
+  let ClassName = [
+    className,
+    style.Wrap,
+    style[ 'TableType_' + type ],
+    style[ 'RowClickable_' + !!( params as any ).onRowClick ]
+  ].join( ' ' );
+
+  let TableComponent = {
+    'normal': NormalTable,
+    'data': DataTable,
+    'drag': DragTable,
+    'spread': ''
+  }[ type ];
+
+  return ( <Box
+    className={ ClassName }
+    style={ freeCSS }
+  >
+    <TableComponent { ...others as any } />
+  </Box> );
+}
+
+let DataComponent: any = ( props: any ) => ( <Wrapper type='data' { ...props } /> );
+Object.entries( DataFNs ).forEach( ( [ key,value ] ) => {
+  DataComponent[ key ] = value;
+} );
+Object.entries( DataComps ).forEach( ( [ key,value ] ) => {
+  DataComponent[ key ] = value;
+} );
+
+export const Table: amotify.fn.Tables.Methods = {
+  Normal: ( props ) => ( <Wrapper type='normal' { ...props } /> ),
+  Data: DataComponent as amotify.fn.Tables.Data.Methods,
+  Drag: ( props ) => ( <Wrapper type='drag' { ...props } /> ),
+  Spread: () => ( <>Table.Spread ( in Progress )</> ),
+
+  Comps
+}
+
+export const DefaultCellStyles = ( type: amotify.fn.Tables.Types,tone: amotify.fn.Tables.Tones ) => {
+  if ( tone == 'plain' ) return {}
+
+  let Styles: amotifyUniStyleParams = {}
+  if ( type == 'drag' ) {
+    Styles.padding = 1;
+  }
+
+  if ( [ 'border','rowBorder','cellBorder' ].includes( tone ) ) {
+    Styles.borderBottom = '2.normal';
+  }
+
+  if ( [ 'border','cellBorder' ].includes( tone ) ) {
+    Styles.borderRight = '2.normal';
+  }
+
+  return Styles;
+}
+
+export const DefaultCellSystemStyles = ( args: {
+  top: boolean
+  bottom: boolean
+  left: boolean
+  right: boolean
+} ) => {
+  let Styles: amotifyUniStyleParams = {}
+  if ( args.right ) {
+    Styles.borderRight = 'unset';
+  }
+
+  if ( args.top ) {
+    if ( args.left ) {
+      Styles.borderTopLeftRadius = 'inherit';
+    }
+    if ( args.right ) {
+      Styles.borderTopRightRadius = 'inherit';
+    }
+  }
+  if ( args.bottom ) {
+    Styles.borderBottom = 'unset';
+    if ( args.left ) {
+      Styles.borderBottomLeftRadius = 'inherit';
+    }
+    if ( args.right ) {
+      Styles.borderBottomRightRadius = 'inherit';
+    }
+  }
+
+  return Styles;
+}

package/src/Functions/Table/style.module.scss

@@ -0,0 +1,92 @@
+@use 'src/@styles/props' as *;
+@use'src/@styles/styleSet' as *;
+.Wrap {
+  &.RowClickable_true {
+    .Row {
+      &.BodyRow:not(.DataNotFound) {
+        cursor: pointer;
+        &:hover .Cell {
+          background-color: $color-layer2;
+        }
+        &:active .Cell {
+          background-color: $color-layer3;
+        }
+      }
+    }
+  }
+  .Table {
+    @include pureTable();
+    height: 100%;
+    border-radius: inherit;
+    .Row {
+      border-radius: inherit;
+    }
+  }
+}
+.TableType_ {
+  &drag {
+    * {
+      @include DisableduserSelect();
+    }
+    .DraggerOrigin {
+      .Cell {
+        transition: $animation-time-middle;
+        background-color: $color-layer4;
+        opacity: .8;
+        pointer-events: none;
+      }
+    }
+    .DragableButton {
+      cursor: grab;
+      &:hover {
+        color: $color-theme;
+      }
+      &:active {
+        color: $color-theme;
+      }
+    }
+  }
+  &data {
+    .Console {
+      width: 100%;
+      border-bottom: $border-normal;
+      position: relative;
+      z-index: 2;
+      flex: none;
+      + .TableBase {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+    .TableBase {
+      border-radius: inherit;
+      .Table {
+        border-radius: inherit;
+        .HeadRow {
+          border-radius: inherit;
+          position: relative;
+          z-index: 2 !important;
+          min-width: 100%;
+          .Cell {
+            .FilterRegion {
+              font-size: inherit;
+              .Filtering_true {
+                border: none;
+                background-color: $color-theme !important;
+                color: #fff !important;
+                box-shadow: $shadow2;
+              }
+            }
+          }
+        }
+        .BodyRow {
+          position: relative;
+          z-index: 1;
+        }
+      }
+    }
+  }
+}
+.Cell {
+  font-weight: normal;
+}

package/src/Functions/Tooltips/parts.tsx

@@ -0,0 +1,52 @@
+import {
+  Box
+} from '~/Atoms/@export';
+import {
+  Sheet
+} from '~/Functions/@export';
+
+const Tooltips: amotify.fn.Tooltips.Methods = {
+  __memoryID: $.uuidGen(),
+  open: ( params ) => {
+    let {
+      tipsID = $.uuidGen(),
+      tipsGroups = [],
+      ...sheetParams
+    } = params;
+
+    Sheet.open( {
+      sheetID: tipsID!,
+      sheetGroups: [
+        'tooltips',
+        ...tipsGroups,
+      ],
+      closeOption: {
+        aroundClick: true,
+        elementBlur: params.parent,
+        escapeKeyDown: true,
+        pageTransit: true,
+        ...params.closeOption,
+      },
+      type: 'custom',
+      ...sheetParams
+    } );
+  },
+  close: ( tipsID ) => {
+    Sheet.close( tipsID );
+  },
+  closeALL: () => {
+    Sheet.closeGroup( 'tooltips' );
+  },
+  Comps: {
+    Body: ( params ) => ( <Box
+      padding={ [ '1/3','2/3' ] }
+      backgroundColor='dark'
+      borderRadius={ '2.tone.secondary' }
+      fontColor='white'
+      boxShadow={ 2 }
+      { ...params }
+    /> )
+  }
+}
+
+export { Tooltips }

package/src/Global/@export.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import * as ReactDom from 'react-dom';
+import * as ReactRouterDom from 'react-router-dom';
+
+import { LaunchReactApplication } from './LaunchReactApplication';
+
+const Inmemory: {
+  [ key: string ]: {
+    privateKey?: string
+    value: any
+  }
+} = {}
+const useStore: amotify.glob.useStoreParams = {
+  set: ( params ) => {
+    let {
+      key,
+      value,
+      privateKey
+    } = params;
+    let Prev = Inmemory[ key ] || {}
+    if ( Prev && Prev.privateKey && Prev.privateKey != privateKey ) return false;
+
+    Inmemory[ key ] = {
+      privateKey,
+      value
+    }
+    return true;
+  },
+  update: ( params ) => {
+    let {
+      key,
+      value,
+      privateKey
+    } = params;
+
+    let Prev = Inmemory[ key ] || {}
+    if ( Prev && Prev.privateKey && Prev.privateKey != privateKey ) return false;
+
+    Inmemory[ key ] = {
+      ...Inmemory[ key ],
+      value: {
+        ...Inmemory[ key ]?.value,
+        ...value
+      }
+    }
+    return true;
+  },
+  get: ( key,privateKey ) => {
+    let Data = Inmemory[ key ];
+    if ( Data && Data.privateKey && Data.privateKey != privateKey ) return void 0;
+    return Data?.value;
+  },
+  delete: ( key,privateKey ) => {
+    let Data = Inmemory[ key ];
+    if ( Data && Data.privateKey && Data.privateKey != privateKey ) return false;
+    delete Inmemory[ key ];
+    return true;
+  }
+}
+const useRecycle: amotify.glob.useRecycleParams = {
+  set: ( key ) => {
+    let [ val_recycleID ] = React.useState( $.uuidGen() );
+    let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() );
+
+    useStore.set( {
+      key: 'RecycleKey_' + val_recycleID,
+      value: () => {
+        set_refresh( $.uuidGen() );
+      }
+    } )
+    useStore.update( {
+      key: 'RecycleKeys_' + key,
+      value: {
+        keys: [
+          ...useStore.get( 'RecycleKeys_' + key )?.keys || [],
+          val_recycleID
+        ]
+      }
+    } )
+    return val_refresh;
+  },
+  do: ( key ) => {
+    let Keys = useStore.get( 'RecycleKeys_' + key )?.keys || [];
+
+    if ( !Keys.length ) return;
+    for ( let key of Keys ) {
+      let receiver = useStore.get( 'RecycleKey_' + key );
+      if ( receiver ) receiver();
+    }
+  }
+}
+
+const pageTransit: amotify.glob.PageTransitParams = {
+  open: ( url ) => {
+    window.open( url );
+  },
+  pushSync: ( url ) => {
+    window.location.href = url;
+  },
+  pushAsync: ( url ) => {
+    if ( url.match( /https?:\/\// ) ) {
+      pageTransit.pushSync( url );
+      return;
+    }
+    useStore.get( 'history' ).push( url );
+  },
+  push: ( url,newTab ) => {
+    if ( newTab ) {
+      pageTransit.open( url );
+      return;
+    }
+    pageTransit.pushAsync( url );
+  },
+  back: () => {
+    useStore.get( 'history' ).goBack();
+  },
+}
+
+import {
+  ReadStyleSet,
+  ToClassName
+} from './styleConverter';
+
+const StyleConverter = {
+  ReadStyleSet,
+  ToClassName
+}
+
+export {
+  React,
+  ReactDom,
+  ReactRouterDom,
+  pageTransit,
+  useStore,
+  useRecycle,
+  StyleConverter,
+  LaunchReactApplication
+}

package/src/Global/LaunchReactApplication.tsx

@@ -0,0 +1,30 @@
+import * as ReactDom from 'react-dom';
+import * as ReactRouterDom from 'react-router-dom';
+
+export const LaunchReactApplication: amotify.glob.LaunchReactApplicationParams = ( props ) => {
+  let {
+    baseElement = '#ROOT',
+    reactElement,
+    nonRouter = false,
+    appearances
+  } = props;
+  let Base = $( baseElement )[ 0 ];
+
+  if ( !Base || !reactElement ) return;
+  if ( appearances ) {
+    let {
+      roundness,
+      tone,
+      themeColor,
+      darkMode
+    } = appearances;
+
+    if ( $.is.exist( roundness ) ) amotify.config.update.roundness( roundness! );
+    if ( $.is.exist( tone ) ) amotify.config.update.tone( tone! );
+    if ( $.is.exist( themeColor ) ) amotify.config.update.themeColor( themeColor! );
+    if ( $.is.exist( darkMode ) ) amotify.config.update.darkMode( darkMode! );
+  }
+  let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />;
+
+  ReactDom.createRoot( Base ).render( <React.StrictMode children={ reactDom } /> );
+}