amotify 0.0.4 → 0.0.5

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

@@ -1,286 +0,0 @@
-import {
-  useRecycle,
-  useStore
-} from '@global';
-const {
-  useEffect,
-  useState
-} = React;
-import {
-  FAIcon
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  Input,
-  Buttons,
-  Loader,
-  Sheet
-} from '@functions';
-
-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: FNC<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();
-        } }
-      >
-        <FAIcon.Plus />
-        追加する
-      </Buttons.Button.Sub.R>;
-    } }
-    { ...params }
-    value={ Values }
-  /> );
-}
-
-const Core: FNC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
-  let {
-    required,
-    form,
-    name,
-
-    checkValidationAtFirst,
-    onValidate,
-    onUpdateValue,onUpdateValidValue,
-    value = [],
-    limit,
-
-    SelectedCellComponent,
-    AddButtonComponent,
-
-    ...others
-  } = params;
-  AddButtonComponent = AddButtonComponent!;
-
-  let [ val_selectorID ] = useState( $.uuidGen() );
-  let [ val_status,set_status ] = 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 ] = useState( {
-    ok: false,
-    notice: []
-  } as amotify.fn.Input.Validation.Result );
-
-  let [ val_selected,set_selected ] = 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 );
-  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
-      value={ value }
-      label={ label }
-      removeCallback={ removeCallback }
-      defaultRemoveButton={ <Buttons.Button.Sub.S
-        flexSizing={ 'none' }
-        color='cloud'
-        backgroundColor='cloud'
-        isRounded
-        onClick={ () => {
-          removeCallback();
-        } }
-      >
-        <FAIcon.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 '@uniVar' as *;
-@use'@styleSet' as *;
-
-.SelectorWrapper {
-  @include OriginScrollBar();
-}

package/src/Functions/Input/DigitCharacters.tsx

@@ -1,241 +0,0 @@
-import {
-  React
-} from '@global';
-const {
-  useState
-} = React;
-
-import {
-  Flex
-} from '@atoms';
-import {
-  Input
-} from '@functions';
-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: FNC<amotify.fn.Input.DigitCharacters.PlainParams> = ( params ) => {
-  let {
-    tone,
-    required,
-    form,
-    name,
-
-    className = '',
-    digits,
-    numericOnly = false,
-    enableFormSubmit,
-
-    checkValidationAtFirst,
-    onChange,onKeyDown,
-    onValidate,
-    onUpdateValue,
-    onUpdateValidValue,
-    value = '',
-
-    override,
-    statusID,
-    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 ] = useState( Default_Status );
-  let [ val_validate,set_validate ] = 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 = {}
-
-    if ( params.combineInput ) {
-      if ( index == 0 ) {
-        Styles = {
-          borderTopLeftRadius: 'inherit',
-          borderBottomLeftRadius: 'inherit'
-        }
-      } else if ( index == digits - 1 ) {
-        Styles = {
-          borderTopRightRadius: 'inherit',
-          borderBottomRightRadius: 'inherit'
-        }
-      }
-    }
-
-    Digits.push( <input
-      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();
-        }
-      } }
-    /> );
-  }
-
-  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> );
-}