amotify 0.0.65 → 0.0.67

package/src/functions/Input/core.tsx

@@ -1,473 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Box,
-  Flex,
-  FAI
-} from '@atoms'
-import {
-  Column,
-  Row,
-  Text
-} from '@mols'
-import {
-  Buttons,
-  Tooltips
-} from '@fn'
-
-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: React.FC<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%'
-      className={ style.Wrapper }
-    >
-      { 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 )
-          } }
-        >
-          <FAI.Times />
-        </Buttons.Button.Normal.R> : rightIcon }
-      </Flex>
-      { params.rightIndicator }
-    </Flex>
-    <GenNotices
-      notice={ val_validate.notice }
-      val_status={ val_status }
-    />
-  </Box>
-}
-const GenNotices: React.FC<{
-  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
-
-    let ICON =
-      type == 'invalid' ? FAI.Times :
-        type == 'warn' ? FAI.Exclamation :
-          FAI.Check
-
-    return <Row.Left
-      gap={ 0 }
-      borderRadius={ '2.tone.secondary' }
-    >
-      <ICON
-        flexCenter
-        fontSize='3.paragraph'
-        fontColor={ {
-          'invalid': 'nega',
-          'warn': 'warn',
-          'valid': 'posi',
-        }[ type ] as 'theme' }
-      />
-      <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
-  params = { ...params }
-  let {
-    componentID
-  } = val_status
-
-  let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() )
-
-  React.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 = React.useRef( false )
-  React.useEffect( () => {
-    if ( mounted.current ) {
-      set_status( {
-        ...val_status,
-        eventType: 'refresh',
-        eventID: $.uuidGen()
-      } )
-    } else {
-      mounted.current = true
-    }
-  },[ val_refresh ] )
-  React.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.status_id != component.status_id
-    ) {
-      set_status( {
-        ...val_status,
-        dataValue: params.value,
-        ...ExtraOverrideParams,
-        eventType: 'override',
-        eventID: $.uuidGen()
-      } )
-    }
-    component.status_id = params.status_id
-  } )()
-
-  React.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 == 'richSelect' ) {
-      Value = JSON.parse( dataValue )
-    } else if ( type == 'file' ) {
-      useStore.update( {
-        key: componentID,
-        value: {
-          Files: val_status.dataValue
-        }
-      } )
-    }
-
-    if ( eventType == 'refresh' ) {
-      let comp = useStore.get( componentID )
-      if ( comp && comp.ResolveRefresh ) comp.ResolveRefresh( null )
-    }
-
-    if ( eventType == 'update' ) {
-      if ( onUpdateValue ) onUpdateValue( {
-        componentID,
-        value: Value,
-        storeData: useStore.get( componentID ),
-        eventType: eventType
-      } )
-
-      $.fnScope( () => {
-        if ( !val_validate.ok ) return
-        // if ( $.is.nullish( Value ) ) return
-        if ( !onUpdateValidValue ) return
-        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
-
-  $.fnScope( () => {
-    if ( gestures.includes( 'enter' ) ) {
-      if ( key != 'Enter' ) return
-
-      let isComposing = event.nativeEvent.isComposing
-      if ( isComposing ) return
-
-      if ( amotify.config.device.browserIs == 'safari' ) {
-        if ( event.keyCode == 229 ) return
-      }
-    }
-
-    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,102 +0,0 @@
-@use '@props' as *;
-.Wrapper {
-  textarea {
-    display: block;
-    width: 100%;
-    min-height: $unit4;
-    resize: vertical;
-    transition-property: border, box-shadow, background-color !important;
-  }
-  input, select, textarea {
-    display: inline-block;
-    &[ disabled] {
-      box-shadow: none !important;
-      background-color: $color-layer3 !important;
-      color: $font-color5 !important;
-      filter: grayscale(50%);
-      cursor: not-allowed !important;
-    }
-  }
-  input, textarea {
-    cursor: text;
-    &::placeholder {
-      font-family: inherit;
-      color: $font-color5;
-    }
-  }
-  input {
-    min-width: 0;
-    display: block;
-    &[ type="text"], &[ type="number"] {
-      width: 100%;
-    }
-    &[ type="number"] {
-      &::-webkit-inner-spin-button,
-      &::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-      }
-    }
-    &[ type="radio"], &[ type="checkbox"], &[ type="file"] {
-      opacity: 0;
-      width: 0;
-      height: 0;
-      overflow: hidden;
-      position: absolute;
-      appearance: none;
-    }
-    &:-webkit-autofill {
-      box-shadow: 0 0 0 100rem $color-layer3 inset !important;
-      -webkit-text-fill-color: $font-color3;
-    }
-  }
-}
-.Input {
-  outline: none !important;
-  &:focus, &:active {
-    z-index: 1;
-    background-color: $color-layer1;
-  }
-  &:focus {
-    border-color: $color-theme !important;
-    box-shadow: 0 0 0 transparent inset, 0 0 0 $unit1_3 $color-theme-opacity-low;
-  }
-  &:active {
-    box-shadow: 0 0 0 transparent inset, 0 0 0 transparent;
-    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 transparent inset, 0 0 0 $unit1_3 $color-theme-opacity-low;
-    }
-  }
-}
-@keyframes ShowCell {
-  0% {}
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-.IndicatorIcon {
-  transform: translateY(-50%);
-}
-.DigitCharacterCell {
-  &.Combined {
-    &:not(:first-child):not(:last-child) {
-      border-radius: 0 !important;
-    }
-    &:first-child {
-      border-top-right-radius: 0 !important;
-      border-bottom-right-radius: 0 !important;
-    }
-    &:last-child {
-      border-top-left-radius: 0 !important;
-      border-bottom-left-radius: 0 !important;
-    }
-  }
-}

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 '@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

@@ -1,53 +0,0 @@
-import React from 'react'
-import {
-  StyleConverter
-} from '@global'
-
-import style from './style.module.scss'
-
-import { TextInputs } from './types'
-
-let ToneStyles: {
-  common: amotifyBasicElement
-  border: amotifyBasicElement
-  cloud: amotifyBasicElement
-  bottomBorder: amotifyBasicElement
-  plain: amotifyBasicElement
-} = {
-  common: {
-    padding: '3/4',
-    borderRadius: '1.tone.primary',
-    transition: 'middle',
-    boxShadow: '0.thin',
-    className: style.Focus
-  },
-  border: {
-    border: true,
-  },
-  cloud: {
-    border: '1.thin',
-    backgroundColor: 'cloud'
-  },
-  bottomBorder: {
-    borderRadius: 0,
-    backgroundColor: 'cloud',
-    borderBottom: true,
-  },
-  plain: {},
-}
-
-export const TextInput = ( params: TextInputs.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,13 +0,0 @@
-namespace TextInputs {
-  type ToneTypes = 'normal' | 'cloud' | 'bottomBorder' | 'plain'
-
-  namespace Text {
-    type Params =
-      any &
-      React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>,HTMLInputElement> &
-      {
-        tone?: ToneTypes
-      }
-  }
-}
-export { TextInputs }