amotify 0.0.2 → 0.0.4

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

@@ -0,0 +1,286 @@
+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

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

package/src/Functions/Input/DigitCharacters.tsx

@@ -0,0 +1,241 @@
+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> );
+}