amotify 0.0.6 → 0.0.8

package/src/Functions/Input/core.tsx

@@ -0,0 +1,461 @@
+import {
+  useStore
+} from '~/Global/@export';
+const {
+  useEffect,
+  useState,
+  useRef
+} = React;
+
+import {
+  Box,
+  Flex,
+  FAIcon
+} from '~/Atoms/@export';
+import {
+  Column,
+  Row,
+  Text
+} from '~/Molecules/@export';
+import {
+  Buttons,
+  Tooltips
+} from '~/Functions/@export';
+
+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

@@ -0,0 +1,43 @@
+@use 'src/@styles/props' 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

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

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

@@ -0,0 +1,15 @@
+@use 'src/@styles/props' 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

@@ -0,0 +1,67 @@
+import {
+  StyleConverter
+} from '~/Global/@export';
+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

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

package/src/Functions/Layout/PageNotFound.tsx

@@ -0,0 +1,81 @@
+import {
+  Box,
+  Flex,
+  FAIcon,
+  Paragraph
+} from '~/Atoms/@export';
+import {
+  Column,
+  Row,
+  Text
+} from '~/Molecules/@export';
+import {
+  Buttons
+} from '~/Functions/@export';
+
+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> );
+}