amotify 0.0.64 → 0.0.66

package/src/functions/Input/Chips/_.tsx

@@ -1,289 +0,0 @@
-import {
-  React
-} from '@global'
-import {
-  FAI
-} from '@atoms'
-import {
-  Column,
-  Row,
-  Text
-} from '@mols'
-import {
-  Input,
-  Buttons,
-  Loader,
-  Sheet
-} from '@fn'
-
-import {
-  BoxWrapper,
-  SubmitForm,
-  ValidationCheck,
-  CommonEffects
-} from '../core'
-
-import {
-  ChipsInputFNs
-} from './Selector'
-
-import coreStyle from '../style.module.scss'
-
-function DefaultValidation( props: {
-  value: any
-  params: any
-} ): amotify.fn.Input.Validation.Result {
-  let {
-    value,
-    params
-  } = props
-  let {
-    required
-  } = params as amotify.fn.Input.Chips.PlainParams
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
-
-  if ( required && !value.length ) {
-    notice.push( { type: 'invalid',label: '一つ以上選択してください' } )
-  }
-
-  return {
-    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
-    notice: notice
-  }
-}
-
-const DataWrapping: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
-  let DefaultValues = [ ...( params.value || [] ) ]
-  let Values = DefaultValues.splice( 0,params.limit || 65535 )
-
-  return <Core
-    SelectedCellComponent={ ( params ) => {
-      let {
-        value,
-        label,
-        removeCallback
-      } = params
-
-      return <Row.Left
-        ssCardBox
-        padding={ '1/2' }
-        gap={ '1/2' }
-        isRounded
-        textAlign='left'
-      >
-        { label }
-        { params.defaultRemoveButton }
-      </Row.Left>
-    } }
-    AddButtonComponent={ ( props ) => {
-      if ( params.limit && params.limit <= props.selected.length ) return null
-
-      return <Buttons.Button.Sub.R
-        color='cloud'
-        padding={ '1/2' }
-        onClick={ () => {
-          props.openCallback()
-        } }
-      >
-        <FAI.Plus />
-        追加する
-      </Buttons.Button.Sub.R>
-    } }
-    { ...params }
-    value={ Values }
-  />
-}
-
-const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
-  let {
-    required,
-    form,
-    name,
-
-    checkValidationAtFirst,
-    onValidate,
-    onUpdateValue,onUpdateValidValue,
-    value = [],
-    limit,
-
-    leftIndicator,rightIndicator,leftIcon,rightIcon,
-
-    SelectedCellComponent,
-    AddButtonComponent,
-
-    componentID,
-    defaultOptions,
-    enableFormSubmit,
-
-    ...others
-  } = params
-  AddButtonComponent = AddButtonComponent!
-
-  let [ val_selectorID ] = React.useState( $.uuidGen() )
-  let [ val_status,set_status ] = React.useState( {
-    componentID: params.componentID || '',
-    dataValue: value.map( ( val: any ) => val ),
-    eventID: $.uuidGen(),
-    eventType: 'init'
-  } as amotify.fn.Input.Status.Plain )
-  let [ val_validate,set_validate ] = React.useState( {
-    ok: false,
-    notice: []
-  } as amotify.fn.Input.Validation.Result )
-
-  let [ val_selected,set_selected ] = React.useState( [ ...value ] )
-
-  CommonEffects( {
-    params,
-    val_status,set_status,
-    val_validate,set_validate,
-    DefaultValidation,
-    onUpdateValue,onUpdateValidValue,
-    ExtraOverrideParams: {
-      formatValue: val_selected,
-      dataValue: val_selected.map( ( val: any ) => val )
-    },
-    ExtraStoreParams: {
-      searchTimer: null
-    }
-  } )
-
-  const UpdateValue = ( values: amotify.fn.Input.Chips.OptionParams[] ) => {
-    set_selected( values )
-    set_status( {
-      ...val_status,
-      dataValue: values.map( ( val: any ) => val ),
-      eventID: $.uuidGen(),
-      eventType: 'update'
-    } as amotify.fn.Input.Status.Plain )
-  }
-  const OpenSelector = () => {
-    ChipsInputFNs.openSelector( {
-      parent: DefaultParentQuerySelector,
-      gravityPoint: params.selectorGravityPoint,
-      SelectorCellComponent: params.SelectorCellComponent,
-      selectorID: val_selectorID,
-      options: params.defaultOptions || [],
-      selected: val_selected,
-      limit: params.limit,
-      onDynamicSearch: params.onDynamicSearch,
-      onUpdated: ( args ) => {
-        UpdateValue( args.values )
-      },
-      onClosed: () => {
-        $( DefaultParentQuerySelector ).focus()
-      }
-    } )
-  }
-
-  let DefaultParentQuerySelector = `[data-chips-input-wrapper="${ val_selectorID }"]`
-  let isFully = limit && limit <= val_selected.length
-
-  const mounted = React.useRef( false )
-  React.useEffect( () => {
-    if ( mounted.current ) {
-      if ( isFully ) {
-        Sheet.close( val_selectorID )
-        $( DefaultParentQuerySelector ).focus()
-      }
-    } else {
-      mounted.current = true
-    }
-  },[ val_selected ] )
-
-  let Selected = val_selected.map( ( s ) => {
-    let { value,label } = s
-    SelectedCellComponent = SelectedCellComponent!
-
-    const removeCallback = () => {
-      let findIndex = val_selected.findIndex( ( v ) => v.value == value )
-      if ( findIndex == -1 ) return
-      let newSelected = [ ...val_selected ]
-      newSelected.splice( findIndex,1 )
-      UpdateValue( newSelected )
-      if ( !newSelected.length ) {
-        setTimeout( () => {
-          $( DefaultParentQuerySelector ).focus()
-        },200 )
-      }
-    }
-    return <SelectedCellComponent
-      key={ JSON.stringify( value ) }
-      value={ value }
-      label={ label }
-      removeCallback={ removeCallback }
-      defaultRemoveButton={ <Buttons.Button.Sub.S
-        padding={ '2/3' }
-        flexSizing={ 'none' }
-        color='cloud'
-        backgroundColor='cloud'
-        isRounded
-        onClick={ () => {
-          removeCallback()
-        } }
-      >
-        <FAI.Times />
-      </Buttons.Button.Sub.S> }
-      openCallback={ () => {
-        OpenSelector()
-      } }
-    />
-  } )
-
-  return <BoxWrapper
-    val_status={ val_status }
-    set_status={ set_status }
-    val_validate={ val_validate }
-    params={ params }
-  >
-    <Input.Hidden
-      data-value={ JSON.stringify( val_status.dataValue.map( ( v: any ) => v.value ) ) }
-      name={ name }
-      form={ form }
-      data-input-type={ 'chips-' + [ 'single','multi' ][ Number( params.limit != 1 ) ] }
-      data-validation={ val_validate.ok }
-      componentID={ val_status.componentID }
-      data-focusor={ val_selectorID }
-    />
-    <button
-      data-chips-input-wrapper={ val_selectorID }
-      onKeyDown={ ( e ) => {
-        let { key,ctrlKey,metaKey,keyCode } = e
-        let auxKey = ctrlKey || metaKey
-        let isString = ( keyCode >= 48 && keyCode <= 57 ) || ( keyCode >= 65 && keyCode <= 90 ) || ( keyCode >= 96 && keyCode <= 105 )
-
-        if ( isString ) {
-          if ( isFully ) return
-          OpenSelector()
-        } else if ( key == 'Tab' ) {
-
-        } else if ( key == 'Backspace' ) {
-          if ( !val_selected.length ) return
-          if ( auxKey ) {
-            UpdateValue( [] )
-          } else {
-            let newSelected = [ ...val_selected ]
-            newSelected.pop()
-            UpdateValue( newSelected )
-          }
-        }
-      } }
-      onClick={ () => {
-        if ( isFully ) return
-        // if ( val_selected.length ) return
-        OpenSelector()
-      } }
-      { ...others }
-    >
-      { !isFully ? <AddButtonComponent
-        selected={ val_selected }
-        openCallback={ OpenSelector }
-      /> : null }
-      { Selected }
-    </button>
-  </BoxWrapper>
-}
-
-const ChipsInput: amotify.fn.Input.Chips.Methods = DataWrapping as any
-ChipsInput.fn = ChipsInputFNs
-export { ChipsInput }

package/src/functions/Input/Chips/style.module.scss

@@ -1,6 +0,0 @@
-@use '@props' as *;
-@use'@styleSet' as *;
-
-.SelectorWrapper {
-  @include OriginScrollBar();
-}

package/src/functions/Input/Contenteditable.tsx

@@ -1,114 +0,0 @@
-import {
-  React,
-} from '@global'
-import {
-  BoxWrapper,
-  SubmitForm,
-  ValidationCheck,
-  CommonEffects
-} from './core'
-
-import style from './style.module.scss'
-
-function DefaultValidation( props: {
-  value: any
-  params: any
-} ): amotify.fn.Input.Validation.Result {
-  let { value,params } = props
-  let { required } = params as amotify.fn.Input.Contenteditable.PlainParams
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
-
-  if ( required && !value ) {
-    notice.push( { type: 'invalid',label: '必須項目です' } )
-  }
-
-  return {
-    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
-    notice: notice
-  }
-}
-
-export const ContenteditableInput: React.FC<amotify.fn.Input.Contenteditable.PlainParams> = ( params ) => {
-  let {
-    componentID,
-    tone,
-    required,
-    form,
-
-    enableFormSubmit,
-
-    checkValidationAtFirst,
-    onInput,onKeyDown,
-    onValidate,
-    onUpdateValue,
-    onUpdateValidValue,
-    children = '',
-    leftIndicator,rightIndicator,leftIcon,rightIcon,
-
-    ...others
-  } = params
-
-  let Default_Status: amotify.fn.Input.Status.Plain = {
-    componentID: componentID!,
-    dataValue: children,
-    eventType: 'init',
-    eventID: $.uuidGen()
-  }
-  let [ val_status,set_status ] = React.useState( Default_Status )
-  let [ val_validate,set_validate ] = React.useState( {
-    ok: false,
-    notice: []
-  } as amotify.fn.Input.Validation.Result )
-
-  CommonEffects( {
-    params,
-    val_status,
-    set_status,
-    val_validate,
-    set_validate,
-    onUpdateValue,
-    onUpdateValidValue,
-    DefaultValidation
-  } )
-
-  return <BoxWrapper
-    val_status={ val_status }
-    set_status={ set_status }
-    val_validate={ val_validate }
-    params={ params }
-  >
-    <div
-      contentEditable
-      data-form={ form }
-      data-name={ params.name }
-      data-input-type={ 'contenteditable' }
-      data-validation={ val_validate.ok }
-      data-value={ val_status.dataValue }
-      data-component-id={ val_status.componentID }
-      onKeyDown={ ( event ) => {
-        !!onKeyDown && onKeyDown( event )
-        !!enableFormSubmit && SubmitForm( event )
-      } }
-      onInput={ ( event ) => {
-        let contentEditor = event.currentTarget as HTMLDivElement
-        let {
-          innerHTML,
-          innerText
-        } = contentEditor
-
-        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } )
-        set_status( {
-          ...val_status,
-          dataValue: innerText,
-          eventType: 'update',
-          eventID: $.uuidGen(),
-        } )
-
-        onInput && onInput( event )
-      } }
-      { ...others }
-    >
-      { children }
-    </div>
-  </BoxWrapper>
-}

package/src/functions/Input/DigitCharacters.tsx

@@ -1,235 +0,0 @@
-import {
-  React
-} from '@global'
-import {
-  Flex
-} from '@atoms'
-import {
-  Input
-} from '@fn'
-import {
-  BoxWrapper,
-  SubmitForm,
-  CommonEffects
-} from './core'
-
-import style from './style.module.scss'
-
-function DefaultValidation( props: {
-  value: any
-  params: any
-} ): amotify.fn.Input.Validation.Result {
-  let { value,params } = props
-  let {
-    required,
-    numericOnly = false,
-    digits
-  } = params as amotify.fn.Input.DigitCharacters.PlainParams
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
-
-  if ( required && !value ) {
-    notice.push( { type: 'invalid',label: '必須項目です' } )
-  }
-  if ( value ) {
-    if ( numericOnly && value.match( /\D/ ) ) {
-      notice.push( { type: 'invalid',label: '数字のみで入力してください' } )
-    }
-    if ( value.length != digits ) {
-      notice.push( { type: 'warn',label: '最後まで入力してください' } )
-    }
-  }
-
-  return {
-    ok: !notice.filter( ( { type } ) => type == 'invalid' || type == 'warn' ).length,
-    notice: notice
-  }
-}
-
-
-const dataToFormat = ( digits: number,value: any = '' ) => {
-  let dataValue = String( value )
-  let formatValue: any = []
-  for ( let index = 0; index < digits; index++ ) {
-    formatValue[ index ] = dataValue[ index ] || ''
-  }
-  return {
-    formatValue,
-    dataValue
-  }
-}
-const formatToData = ( value: any = '' ) => {
-  let formatValue = value
-  let dataValue = formatValue.join( '' )
-  return {
-    formatValue,
-    dataValue
-  }
-}
-
-
-export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.PlainParams> = ( params ) => {
-  let {
-    tone,
-    required,
-    form,
-    name,
-
-    className = '',
-    digits,
-    numericOnly = false,
-    enableFormSubmit,
-
-    checkValidationAtFirst,
-    onChange,onKeyDown,
-    onValidate,
-    onUpdateValue,
-    onUpdateValidValue,
-    value = '',
-
-    override,
-
-    componentID,
-    listStyles,
-    ...others
-  } = params
-
-  if ( numericOnly ) {
-    params.inputMode = params.inputMode || 'numeric'
-  }
-
-  let Default_Status: amotify.fn.Input.Status.DigitCharacters = {
-    componentID: params.componentID || '',
-    ...dataToFormat( digits,value ),
-    eventType: 'init',
-    eventID: $.uuidGen()
-  }
-
-  let [ val_status,set_status ] = React.useState( Default_Status )
-  let [ val_validate,set_validate ] = React.useState( {
-    ok: false,
-    notice: []
-  } as amotify.fn.Input.Validation.Result )
-
-  CommonEffects( {
-    params,
-    val_status,
-    set_status,
-    val_validate,
-    set_validate,
-    onUpdateValue,
-    onUpdateValidValue,
-    DefaultValidation
-  } )
-
-  let Digits = []
-  for ( let index = 0; index < digits; index++ ) {
-    let Character = val_status.formatValue[ index ]
-
-    let Styles: React.CSSProperties = {}
-
-    let ClassName = className
-
-    if ( params.combineInput ) {
-      ClassName = [
-        className,
-        style.DigitCharacterCell,
-        style.Combined
-      ].join( ' ' )
-    }
-
-    Digits.push( <input
-      key={ index }
-      type={ 'text' }
-      inputMode={ params.inputMode || 'text' }
-      value={ Character }
-      data-form-name={ form }
-      id={ 'Digit-' + index + '-' + val_status.componentID }
-      className={ ClassName }
-      style={ {
-        ...params.style,
-        ...Styles
-      } }
-      onKeyDown={ ( event ) => {
-        let {
-          key,
-          code
-        } = event
-
-        if ( key == 'Tab' ) return
-        event.preventDefault()
-        let nextFocusIndex = null
-
-        if ( key == 'Backspace' ) {
-          let newFormatValue = val_status.formatValue
-          newFormatValue[ index ] = ''
-
-          set_status( {
-            ...val_status,
-            ...formatToData( newFormatValue ),
-            eventType: 'update',
-            eventID: $.uuidGen()
-          } )
-          nextFocusIndex = index - 1
-        } else if ( [ 'ArrowLeft','ArrowRight' ].includes( key ) ) {
-          let dir = Number( key == 'ArrowRight' ) * 2 - 1
-          nextFocusIndex = index + dir
-        } else {
-          if ( enableFormSubmit ) SubmitForm( event );
-
-          ( () => {
-            let regExp = code.match( /^(Key(.)|Digit(\d)|Numpad(\d))/ )
-            if ( !regExp ) return
-
-            let newCharacter: string = regExp[ 2 ] || regExp[ 3 ] || regExp[ 4 ]
-            if ( numericOnly ) {
-              if ( !newCharacter.match( /\d/ ) ) return
-            }
-            if ( !newCharacter ) return
-
-            let newFormatValue = val_status.formatValue
-            newFormatValue[ index ] = newCharacter
-
-            set_status( {
-              ...val_status,
-              ...formatToData( newFormatValue ),
-              eventType: 'update',
-              eventID: $.uuidGen()
-            } )
-            nextFocusIndex = index + 1
-          } )()
-        }
-
-        if ( $.is.exist( nextFocusIndex ) ) {
-          $( '#Digit-' + nextFocusIndex + '-' + val_status.componentID ).focus()
-        }
-      } }
-      onChange={ () => { } }
-    /> )
-  }
-
-  return <BoxWrapper
-    val_status={ val_status }
-    set_status={ set_status }
-    val_validate={ val_validate }
-    params={ params }
-  >
-    <Input.Hidden
-      name={ name }
-      data-input-type={ 'digitCharacters' }
-      data-form={ form }
-      data-validation={ val_validate.ok }
-      componentID={ val_status.componentID }
-      data-value={ val_status.dataValue }
-      { ...others }
-    />
-    <Flex
-      gap={ '1/2' }
-      flexChilds='even'
-      flexWrap={ false }
-      flexSizing='auto'
-      { ...listStyles }
-    >
-      { Digits }
-    </Flex>
-  </BoxWrapper>
-}