amotify 0.0.4 → 0.0.5

package/src/Functions/Input/core.tsx

@@ -1,461 +0,0 @@
-import {
-  useStore
-} from '@global';
-const {
-  useEffect,
-  useState,
-  useRef
-} = React;
-
-import {
-  Box,
-  Flex,
-  FAIcon
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  Buttons,
-  Tooltips
-} from '@functions';
-
-import style from './style.module.scss';
-
-type BoxWrapperParams = {
-  val_status: any
-  set_status: React.Dispatch<React.SetStateAction<any>>
-  val_validate: amotify.fn.Input.Validation.Result
-  params: any
-  children: ReactElement
-}
-
-export const BoxWrapper: FNC<BoxWrapperParams> = ( props ) => {
-  let {
-    children,
-    val_status,
-    set_status,
-    val_validate,
-    params
-  } = props;
-  let {
-    clearButton,
-    rightIcon,
-    leftIcon,
-    wrapStyles
-  } = params;
-
-  if ( val_status.eventType == 'init' && !params.checkValidationAtFirst ) val_validate.notice = [];
-
-  return (
-    <Box
-      position='relative'
-      { ...wrapStyles }
-      id={ 'BoxWrapper-' + val_status.componentID }
-    >
-      <Flex
-        flexWrap={ false }
-      // height='100%'
-      >
-        { params.leftIndicator }
-        <Flex
-          position='relative'
-          flexSizing={ 'auto' }
-        >
-          { leftIcon }
-          { children }
-          { clearButton && !!val_status.dataValue ? <Buttons.Button.Normal.R
-            ssSphere={ 2 }
-            flexCenter
-            fontColor={ '5.translucent' }
-            ssEffectsOnActive={ [ 'ripple.theme' ] }
-            position='absolute'
-            right={ 1 }
-            top={ '50%' }
-            freeCSS={ {
-              zIndex: 3
-            } }
-            className={ style.IndicatorIcon }
-            onClick={ () => {
-              set_status( {
-                ...val_status,
-                dataValue: '',
-                formatValue: '',
-                eventType: 'update',
-                eventID: $.uuidGen()
-              } as any );
-            } }
-          >
-            <FAIcon.Times />
-          </Buttons.Button.Normal.R> : rightIcon }
-        </Flex>
-        { params.rightIndicator }
-      </Flex>
-      <GenNotices
-        notice={ val_validate.notice }
-        val_status={ val_status }
-      />
-    </Box>
-  );
-}
-const GenNotices: FNC<{
-  notice: amotify.fn.Input.Validation.NoticeTypes[]
-  val_status: amotify.fn.Input.Status.Plain
-}> = ( params ) => {
-  let { notice,val_status } = params;
-  let {
-    componentID,
-    eventType
-  } = val_status;
-  $.interval.clear( 'NoticeTimer-' + componentID );
-  $.interval.clear( 'NoticeTimerClose-' + componentID );
-
-  let parentID = 'notice-' + params.val_status.componentID;
-  let tipsID = 'notice-tips-' + params.val_status.componentID;
-
-  if ( !notice.length ) {
-    Tooltips.close( tipsID );
-    return null;
-  }
-
-  let Notices = notice.map( ( cell ) => {
-    let { type,label } = cell;
-
-    return <Row.Left
-      gap={ 0 }
-      borderRadius={ '2.tone.secondary' }
-    >
-      <FAIcon
-        flexCenter
-        fontSize='3.paragraph'
-        fontColor={ {
-          'invalid': 'nega',
-          'warn': 'warn',
-          'valid': 'posi',
-        }[ type ] as 'theme' }
-        d={ {
-          'invalid': 'times',
-          'warn': 'exclamation',
-          'valid': 'check'
-        }[ type ] }
-      />
-      <Box
-        fontColor='white'
-      >
-        { label }
-      </Box>
-    </Row.Left>;
-  } );
-
-  $.interval.standBy(
-    'NoticeTimer-' + componentID,
-    350,
-    () => {
-      Tooltips.open( {
-        tipsID,
-        parent: '#' + parentID,
-        padding: [ '1/2',0 ],
-        content: <Tooltips.Comps.Body
-          padding={ [ '1/2','2/3' ] }
-          fontSize='1.mini'
-          position='relative'
-        >
-          <Box
-            position='absolute'
-            unitHeight={ 1 }
-            unitWidth={ 1 }
-            left={ 1 }
-            backgroundColor='dark'
-            freeCSS={ {
-              zIndex: 1,
-              transform: 'rotate(45deg)',
-              top: -6
-            } }
-          />
-          <Column
-            gap={ '1/3' }
-            position='relative'
-            freeCSS={ {
-              zIndex: 2
-            } }
-            backgroundColor='inherit'
-          >
-            { Notices }
-          </Column>
-        </Tooltips.Comps.Body>
-      } );
-
-      $.interval.standBy(
-        'NoticeTimerClose-' + componentID,
-        7500,
-        () => {
-          Tooltips.close( tipsID );
-        }
-      )
-    } );
-
-  return ( <Box
-    className={ style.Notices }
-    id={ parentID }
-  /> );
-}
-
-export const CommonEffects: {
-  ( props: {
-    type?: string
-    params: plainObject
-    val_status: amotify.fn.Input.Status.Plain
-    set_status: React.Dispatch<React.SetStateAction<any>>
-    val_validate: amotify.fn.Input.Validation.Result
-    set_validate: React.Dispatch<React.SetStateAction<amotify.fn.Input.Validation.Result>>
-    DefaultValidation: amotify.fn.Input.Validation.SystemCheck
-    onUpdateValue?: amotify.fn.Input.OnUpdateValue
-    onUpdateValidValue?: amotify.fn.Input.OnUpdateValue
-    ExtraOverrideParams?: plainObject
-    ExtraStoreParams?: plainObject
-  } ): void
-} = ( props ) => {
-  let {
-    type,
-    params,
-    val_status,
-    set_status,
-    ExtraOverrideParams,
-    ExtraStoreParams,
-    val_validate,
-    set_validate,
-    DefaultValidation,
-    onUpdateValue,
-    onUpdateValidValue
-  } = props;
-  let {
-    componentID
-  } = val_status;
-
-  let [ val_refresh,set_refresh ] = useState( $.uuidGen() );
-
-  useEffect( () => {
-    useStore.update( {
-      key: componentID,
-      value: {
-        ResolveRefresh: null,
-        Refresh: () => {
-          return new Promise( ( res,rej ) => {
-            useStore.get( componentID ).ResolveRefresh = res;
-            set_refresh( $.uuidGen() );
-          } );
-        },
-        GenNotice: ( props: { ok: boolean,notice: amotify.fn.Input.Validation.NoticeTypes[] } ) => {
-          let { ok,notice } = props;
-          set_validate( { ok,notice } );
-        },
-        ...ExtraStoreParams
-      }
-    } );
-    return () => {
-      useStore.delete( componentID );
-    }
-  },[] );
-
-  const mounted = useRef( false );
-  useEffect( () => {
-    if ( mounted.current ) {
-      set_status( {
-        ...val_status,
-        eventType: 'refresh',
-        eventID: $.uuidGen()
-      } );
-    } else {
-      mounted.current = true;
-    }
-  },[ val_refresh ] );
-  useEffect( () => {
-    params.value = val_status.dataValue;
-
-    $.interval.clear( 'ValidationTimer-' + componentID );
-
-    ValidationCheck( {
-      val_status,
-      set_validate,
-      DefaultValidation,
-      params
-    } );
-  },[ val_status.eventID ] );
-
-  ( () => {
-    let {
-      override
-    } = params;
-    if ( override == 'never' ) return;
-    if ( override == 'beforeModified' ) {
-      if ( ![ 'init','override' ].includes( val_status.eventType ) ) return;
-    }
-
-    let component = useStore.get( val_status.componentID );
-    if ( !component ) return;
-    if (
-      params.value != val_status.dataValue &&
-      params.statusID != component.statusID
-    ) {
-      set_status( {
-        ...val_status,
-        dataValue: params.value,
-        ...ExtraOverrideParams,
-        eventType: 'override',
-        eventID: $.uuidGen()
-      } );
-    }
-    component.statusID = params.statusID;
-  } )();
-
-  useEffect( () => {
-    let {
-      componentID,
-      eventType,
-      dataValue
-    } = val_status;
-    let Value = dataValue;
-    if ( type == 'list' ) {
-      Value = dataValue.map( ( value: any ) => JSON.parse( value ) )
-    } else if ( type == 'select' ) {
-      Value = JSON.parse( dataValue );
-    } else if ( type == 'file' ) {
-      useStore.update( {
-        key: componentID,
-        value: {
-          Files: val_status.dataValue
-        }
-      } );
-    }
-
-    if ( eventType == 'refresh' ) {
-      useStore.get( componentID ).ResolveRefresh( null );
-    }
-
-    if ( eventType == 'update' ) {
-      if ( onUpdateValue ) onUpdateValue( {
-        componentID,
-        value: Value,
-        storeData: useStore.get( componentID ),
-        eventType: eventType
-      } );
-
-      if ( val_validate.ok && $.is.exist( Value ) ) {
-        if ( onUpdateValidValue ) onUpdateValidValue( {
-          componentID,
-          value: Value,
-          storeData: useStore.get( componentID ),
-          eventType: eventType
-        } );
-      }
-    }
-  },[ val_validate ] );
-}
-
-export const ValidationCheck: {
-  ( props: {
-    val_status: amotify.fn.Input.Status.Plain
-    DefaultValidation: amotify.fn.Input.Validation.SystemCheck
-    params: any
-    set_validate: React.Dispatch<React.SetStateAction<amotify.fn.Input.Validation.Result>>
-  } ): void
-} = ( props ) => {
-  let {
-    val_status,
-    params,
-    set_validate,
-    DefaultValidation
-  } = props;
-
-  let result = DefaultValidation( {
-    value: val_status.dataValue,
-    params: params
-  } );
-
-  if ( !result.ok ) {
-    set_validate( result );
-    return;
-  }
-  let sysDefaultNotice = result.notice;
-
-  const FN = async () => {
-    if ( !params.onValidate ) return;
-
-    let result = await params.onValidate( {
-      value: val_status.dataValue,
-      eventType: val_status.eventType,
-      props: props
-    } );
-    if ( !result.ok ) {
-      set_validate( {
-        ok: false,
-        notice: [
-          ...sysDefaultNotice,
-          ...result.notice
-        ]
-      } );
-      return;
-    }
-    set_validate( {
-      ok: true,
-      notice: [
-        ...sysDefaultNotice,
-        ...result.notice
-      ]
-    } );
-  }
-
-  if ( params.onValidate ) {
-    if ( val_status.eventType == 'refresh' ) {
-      FN();
-    } else {
-      $.interval.standBy(
-        'ValidationTimer-' + val_status.componentID,
-        450,
-        FN
-      );
-    }
-  } else {
-    set_validate( {
-      ok: true,
-      notice: sysDefaultNotice
-    } )
-  }
-}
-
-
-export const SubmitForm = (
-  event: React.KeyboardEvent
-) => {
-  let input = event.target as HTMLInputElement;
-  let { form,formName } = input.dataset;
-  form = formName || form;
-  let complete = false;
-
-  let Button = $( `[data-form-submit-button="${ form }"]` )[ 0 ];
-  if ( !Button ) return complete;
-
-  let gestures = Button.dataset.sdfike || '';
-  let key = event.key;
-  let auxKey = event.ctrlKey || event.metaKey;
-
-  if (
-    (
-      key == 'Enter' && (
-        gestures.includes( 'enter' ) || (
-          gestures.includes( 'auxEnter' ) && auxKey
-        )
-      )
-    ) || (
-      key == ' ' && gestures.includes( 'space' )
-    )
-  ) {
-    Button.click();
-    event.preventDefault();
-
-    complete = true;
-  }
-  return complete;
-}

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

@@ -1,43 +0,0 @@
-@use '@uniVar' as *;
-.Input {
-  &:focus, &:active {
-    z-index: 1;
-    background-color: $color-layer1;
-  }
-  &:focus {
-    border-color: $color-theme !important;
-    box-shadow: 0 0 0 $unit1_3 $color-theme-opacity-low;
-  }
-  &:active {
-    box-shadow: none;
-    transition: $animation-time-long;
-  }
-  &.InputCover {
-    &:focus-within {
-      z-index: 1;
-      background-color: $color-layer1;
-    }
-    &:focus-within {
-      border-color: $color-theme !important;
-      box-shadow: 0 0 0 $unit1_3 $color-theme-opacity-low;
-    } 
-  }
-}
-
-textarea {
-  transition-property: border, box-shadow, background-color !important;
-}
-@keyframes ShowCell {
-  0% {}
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-.IndicatorIcon {
-  transform: translateY(-50%);
-}
-
-textarea {
-  resize: vertical;
-}

package/src/Functions/Inputs/_.tsx

@@ -1,5 +0,0 @@
-import { TextInput } from './text';
-
-export const Inputs = {
-  TextInput
-}

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

@@ -1,15 +0,0 @@
-@use '@uniVar' as *;
-.Focus {
-  &:focus, &:active {
-    z-index: 1;
-    background-color: $color-layer1;
-  }
-  &:focus {
-    border-color: $color-theme !important;
-    box-shadow: 0 0 0 $unit1_3 $color-theme-opacity-low;
-  }
-  &:active {
-    box-shadow: none;
-    transition: $animation-time-long;
-  }
-}

package/src/Functions/Inputs/text.tsx

@@ -1,67 +0,0 @@
-import {
-  StyleConverter
-} from '@global';
-import style from './style.module.scss';
-
-
-declare global {
-  namespace Inputs {
-    type ToneTypes = 'normal' | 'cloud' | 'bottomBorder' | 'plain'
-  
-    namespace Text {
-      type Params =
-        any &
-        React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>,HTMLInputElement> &
-        {
-          tone?: ToneTypes
-        }
-    }
-  }
-}
-
-let ToneStyles: {
-  common: amotifyBasicElement
-  border: amotifyBasicElement
-  cloud: amotifyBasicElement
-  bottomBorder: amotifyBasicElement
-  plain: amotifyBasicElement
-} = {
-  common: {
-    padding: '3/4',
-    borderRadius: '1.tone.primary',
-    transition: 'middle',
-    boxShadow: 0,
-    className: style.Focus
-  },
-  border: {
-    border: true,
-  },
-  cloud: {
-    border: '1.thin',
-    backgroundColor: 'cloud'
-  },
-  bottomBorder: {
-    borderRadius: 0,
-    backgroundColor: 'cloud',
-    borderBottom: true,
-  },
-  plain: {},
-}
-
-export const TextInput = ( params: Inputs.Text.Params ) => {
-  params = {
-    ...ToneStyles.common,
-    ...ToneStyles.bottomBorder,
-    // ...ToneStyles.cloud,
-    ...params
-  }
-
-  return (
-    <input
-      type="text"
-      placeholder='fvdgsbsfgdvs'
-      // value={ 'AAAA' }
-      { ...StyleConverter.ToClassName( params ) }
-    />
-  );
-}

package/src/Functions/Inputs/types.d.ts

@@ -1 +0,0 @@
-export {}

package/src/Functions/Layout/PageNotFound.tsx

@@ -1,81 +0,0 @@
-import {
-  Box,
-  Flex,
-  FAIcon,
-  Paragraph
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  Buttons
-} from '@functions';
-
-export const PageNotFound: FNC<{}> = () => {
-
-  let { href } = location;
-
-  return ( <Row.Center
-    padding={ [ 4,1 ] }
-  >
-    <Column
-      ssCardBox
-      gap={ 2 }
-      padding={ [ 3,2 ] }
-      textAlign='center'
-      width={ 1 }
-      freeCSS={ {
-        maxWidth: 12 * 30
-      } }
-    >
-      <FAIcon.LinkSlash
-        fontColor={ 'theme' }
-        iconFamily='classic'
-        isDuotoneIcon
-        freeCSS={ {
-          fontSize: '3rem'
-        } }
-      />
-      <Box>
-        <Text.Paragraph>
-          このページはご利用いただけません。
-        </Text.Paragraph>
-        <Text.Supplement
-          fontColor='3.blur'
-        >
-          入力されたリンクのページは存在しませんでした。
-        </Text.Supplement>
-      </Box>
-
-      <Column>
-        <Text.Normal
-          textAlign='left'
-          ssCardBox='cloud'
-          isBoldFont
-          padding={ 1 }
-        >
-          ・リンクが正しいか
-          <Box margin={ [ '1/2',0 ] } borderBottom />
-          ・リンクの有効期限
-          <Box margin={ [ '1/2',0 ] } borderBottom />
-          ・アクセス権限等が正しいか
-        </Text.Normal>
-        などをもう一度確認してください。
-      </Column>
-
-      <Buttons.Anchor.Link
-        newTab
-        href={ href }
-      >
-        { href }
-      </Buttons.Anchor.Link>
-      <Buttons.Anchor.BorderToFill.R
-        href='/'
-        width={ 1 }
-        children={ 'ホームに戻る' }
-      />
-    </Column>
-  </Row.Center> );
-}