amotify 0.0.4 → 0.0.6

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

@@ -1,736 +0,0 @@
-import {
-  useStore
-} from '@global';
-import {
-  Box
-} from '@atoms'
-import {
-  Input,
-  Buttons,
-  Tooltips
-} from '@functions';
-
-import {
-  BoxWrapper,
-  SubmitForm,
-  ValidationCheck,
-  CommonEffects
-} from '../core';
-import { Picker } from './Picker';
-const {
-  useEffect,
-  useState,
-  useRef
-} = React;
-
-const PeriodMargin = ' ~ ';
-
-const TimeFormatDatas: {
-  [ key: string ]: {
-    defaultValue: string
-    format: RegExp
-    ranges: amotify.fn.Input.Time.RangeProps[]
-    sets: number
-  }
-} = {
-  clock: {
-    defaultValue: '--:--',format: /^\d{2}\D\d{2}$/,ranges: [
-      { type: 'hour',from: 0,length: 2 },
-      { type: 'minute',from: 3,length: 2 }
-    ],sets: 1
-  },
-  date: {
-    defaultValue: '----/--/--',format: /^\d{4}\D\d{2}\D\d{2}$/,ranges: [
-      { type: 'year',from: 0,length: 4 },
-      { type: 'month',from: 5,length: 2 },
-      { type: 'date',from: 8,length: 2 }
-    ],sets: 1
-  },
-  week: {
-    defaultValue: '----年第--週',format: /^\d{4}\D\d{2}$/,ranges: [
-      { type: 'year',from: 0,length: 4,region: 6 },
-      { type: 'week',from: 6,length: 2,region: 3 }
-    ],sets: 1
-  },
-  month: {
-    defaultValue: '----年--月',format: /^\d{4}\D\d{2}$/,ranges: [
-      { type: 'year',from: 0,length: 4 },
-      { type: 'month',from: 5,length: 2,region: 3 }
-    ],sets: 1
-  },
-  year: {
-    defaultValue: '----年',format: /^\d{4}$/,ranges: [
-      { type: 'year',from: 0,length: 4,region: 5 }
-    ],sets: 1
-  },
-  dates: {
-    defaultValue: '----/--/--',format: /^\d{4}\D\d{2}\D\d{2}$/,ranges: [
-      { type: 'year',from: 0,length: 4 },
-      { type: 'month',from: 5,length: 2 },
-      { type: 'date',from: 8,length: 2,region: 5 },
-      { type: 'year',from: 10 + PeriodMargin.length,length: 4 },
-      { type: 'month',from: 15 + PeriodMargin.length,length: 2 },
-      { type: 'date',from: 18 + PeriodMargin.length,length: 2 }
-    ],sets: 2
-  },
-  months: {
-    defaultValue: '----年--月',format: /^\d{4}\D\d{2}$/,ranges: [
-      { type: 'year',from: 0,length: 4 },
-      { type: 'month',from: 5,length: 2,region: 6 },
-      { type: 'year',from: 8 + PeriodMargin.length,length: 4 },
-      { type: 'month',from: 13 + PeriodMargin.length,length: 2,region: 3 }
-    ],sets: 2
-  },
-  dateWareki: {
-    defaultValue: '----年--月--日',format: /^\d{4}\D\d{2}\D\d{2}$/,ranges: [
-      { type: 'dateWareki',from: 0,length: 4,region: 5 },
-      { type: 'month',from: 5,length: 2,region: 3 },
-      { type: 'date',from: 8,length: 2,region: 3 }
-    ],sets: 1
-  }
-}
-
-const DataLeveling = ( params: {
-  restrict: amotify.fn.Input.Time.RestrictTypes
-  value: any
-  era: amotify.fn.Input.Time.EraTypes
-} ) => {
-  let {
-    restrict,
-    value,
-    era
-  } = params;
-
-  let dataValue = $.flatArray( value || '' );
-
-  let {
-    defaultValue,
-    format,
-    ranges,
-    sets
-  } = TimeFormatDatas[ restrict ];
-  let formatValues: string[] = [];
-
-  let separateStr = restrict == 'clock' ? ':' : '/';
-  for ( let index = 0; index < dataValue.length; index++ ) {
-    dataValue[ index ] = String( dataValue[ index ] ).replace( /\D/ig,separateStr );
-  }
-  for ( let index = 0; index < sets; index++ ) {
-    let val = dataValue[ index ] || '';
-    if ( !val.match( format ) ) {
-      dataValue[ index ] = '';
-      formatValues.push( defaultValue );
-    } else {
-      let _value = defaultValue;
-      val.split( /\D/ ).forEach( ( v: string,i: number ) => {
-        if ( i == 0 && restrict == 'dateWareki' ) {
-          let Year = Number( v );
-          if ( era != 'year' ) {
-            if ( Year >= 2019 ) Year -= 2019;
-            else if ( Year >= 1989 ) Year -= 1989;
-            else if ( Year >= 1926 ) Year -= 1926;
-            else if ( Year >= 1912 ) Year -= 1912;
-            else if ( Year >= 1868 ) Year -= 1868;
-            Year += 1;
-          }
-          v = Year.zeroEmbed( 4 );
-        }
-        _value = _value.replace( new RegExp( '------------------'.slice( 0,v.length ) ),v );
-      } );
-      formatValues.push( _value );
-    }
-  }
-
-  return {
-    formatValue: formatValues.join( PeriodMargin ),
-    dataValue: [ 'dates','months' ].includes( restrict ) ? dataValue : dataValue[ 0 ],
-    ranges
-  };
-}
-
-function DefaultValidation( props: {
-  value: any
-  params: any
-} ): amotify.fn.Input.Validation.Result {
-  let {
-    params
-  } = props;
-  let {
-    restrict,
-    min,max,
-    required
-  } = params as amotify.fn.Input.Time.OriginParams
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
-  let values: string[] = $.flatArray( props.value );
-
-  let validate = {
-    empty: false,
-    escalated: 1,
-    filled: true,
-    correct: true,
-    prohibited: false
-  };
-
-  ( () => {
-    let separateStr = restrict == 'clock' ? ':' : '/';
-    for ( let index = 0; index < values.length; index++ ) {
-      values[ index ] = String( values[ index ] ).replace( /\D/ig,separateStr );
-    }
-    for ( let index = 0; index < values.length; index++ ) {
-      let value = values[ index ];
-      let prevValue = values[ index - 1 ];
-      if ( !value.removeLetters() ) validate.empty = true;
-      if ( index > 0 ) validate.escalated &= Number( value >= prevValue );
-    }
-    if ( !validate.escalated ) return;
-    if ( validate.empty ) return;
-
-    if ( restrict.match( /clock/ ) ) {
-      values.forEach( value => {
-        let [ hour,minute ] = value.split( /\D+/ );
-
-        if ( !hour || !minute ) {
-          validate.filled = false;
-        } else if ( Number( hour ) > 23 || Number( minute ) > 59 ) {
-          validate.correct = false;
-        }
-      } );
-    } else if ( restrict.match( /date/ ) ) {
-      values.forEach( value => {
-        let [ year,month,day ] = value.split( /\D+/ );
-        if ( !year || !month || !day ) {
-          validate.filled = false;
-        } else {
-          let Time = $.Time( value );
-          if ( !Time.validate || value != Time.toFormatYMD() ) {
-            validate.correct = false;
-          }
-        }
-      } );
-    } else if ( restrict.match( /week/ ) ) {
-      values.forEach( value => {
-        let [ year,week ] = value.split( /\D+/ );
-        if ( !year || !week ) {
-          validate.filled = false;
-        } else {
-          let yearFirstDay = $.Time( year + '/01/01' ).weekday;
-          let yearFirstWeek0Day = $.Time( year + '/01/0' + ( 7 - yearFirstDay + 1 ) );
-          let yearValueWeek0Day = yearFirstWeek0Day.addWeek( Number( week ) - 1 );
-          if ( year != String( yearValueWeek0Day.year ) ) {
-            validate.correct = false;
-          }
-        }
-      } );
-    } else if ( restrict.match( /month/ ) ) {
-      values.forEach( value => {
-        let [ year,month ] = value.split( /\D+/ );
-        if ( !year || !month ) {
-          validate.filled = false;
-        } else {
-          let date = $.Time( [ year,month,'01' ].join( '/' ) );
-          if ( !date.validate ) validate.correct = false;
-        }
-      } )
-    } else if ( restrict.match( /year/ ) ) {
-
-    }
-
-    if ( validate.filled && validate.correct ) {
-      values.forEach( value => {
-        {
-          let VAL = Number( String( value ).replace( /\D/ig,'' ) );
-          if ( min ) {
-            let MIN = Number( String( min ).replace( /\D/ig,'' ) );
-            if ( MIN > VAL ) validate.prohibited = true;
-          }
-          if ( max ) {
-            let MAX = Number( String( max ).replace( /\D/ig,'' ) );
-            if ( VAL > MAX ) validate.prohibited = true;
-          }
-        }
-      } )
-    }
-  } )();
-
-  {
-    let {
-      empty,
-      escalated,
-      filled,
-      correct,
-      prohibited
-    } = validate;
-    if ( empty && required ) {
-      notice = [
-        { type: 'invalid',label: '必須項目です' }
-      ];
-    }
-    if ( !escalated ) {
-      notice.push( { type: 'invalid',label: '時系列を正しく入力してください' } );
-    }
-    if ( !correct ) {
-      notice.push( { type: 'invalid',label: '無効な値が入力されています' } );
-    }
-    if ( !filled ) {
-      notice.push( { type: 'invalid',label: '最後まで値を埋めてください' } );
-    }
-    if ( prohibited ) {
-      notice.push( {
-        type: 'invalid',label: <>
-          <Box>
-            入力範囲が制限されています
-          </Box>
-          [{ min || '下限無し' }] ~ [{ max || '上限無し' }]
-        </>
-      } );
-    }
-  }
-
-  return {
-    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
-    notice: notice
-  }
-}
-
-type FocusProps = {
-  active: boolean
-  index: number
-  prevIndex: number
-}
-
-export const TimeInput: FNC<amotify.fn.Input.Time.OriginParams> = ( params ) => {
-  let {
-    tone,
-    required,
-    restrict = 'clock',
-    componentID,
-    era,
-    form,
-    name,
-    min,max,
-    className,
-
-    enableFormSubmit,
-
-    checkValidationAtFirst,
-    onKeyDown,
-    onValidate,
-    onUpdateValue,
-    onUpdateValidValue,
-    value = '',
-    leftIndicator,rightIndicator,
-
-    ...others
-  } = params;
-
-  let [ val_era,set_era ] = useState( era! );
-
-  let [ val_status,set_status ] = useState( {
-    componentID: params.componentID || '',
-    ...DataLeveling( {
-      restrict,
-      value,
-      era: val_era
-    } ),
-    eventType: 'init',
-    eventID: $.uuidGen(),
-  } as amotify.fn.Input.Status.Time );
-
-  let [ val_validate,set_validate ] = useState( {
-    ok: false,
-    notice: []
-  } as amotify.fn.Input.Validation.Result );
-  let [ val_focus,set_focus ] = useState( {
-    active: false,
-    index: 0,
-    prevIndex: -1
-  } as FocusProps );
-
-  CommonEffects( {
-    type: 'time',
-    params,
-    val_status,
-    set_status,
-    val_validate,
-    set_validate,
-    DefaultValidation,
-    onUpdateValue,
-    onUpdateValidValue,
-    ExtraOverrideParams: {
-      ...DataLeveling( {
-        restrict,
-        value,
-        era: val_era!
-      } )
-    }
-  } );
-
-  const mounted = useRef( false );
-  useEffect( () => {
-    if ( mounted.current ) {
-      set_status( {
-        ...val_status,
-        ...DataLeveling( {
-          restrict,
-          value: val_status.dataValue,
-          era: val_era
-        } )
-      } );
-    } else {
-      mounted.current = true;
-    }
-  },[ val_era ] );
-
-  useStore.update( {
-    key: val_status.componentID,
-    value: {
-      openPicker: () => {
-        if ( params.disabled ) return;
-
-        TimeFNs.picker.launch( {
-          parent: '#Picker-' + val_status.componentID,
-          tipsID: 'PickerTips-' + val_status.componentID,
-          restrict,
-          min,max,
-          defaultValue: val_status.dataValue,
-          onValueUpdate: ( value ) => {
-            set_status( {
-              ...val_status,
-              ...DataLeveling( {
-                restrict,
-                value: value,
-                era: val_era!
-              } ),
-              eventType: 'update',
-              eventID: $.uuidGen()
-            } );
-          }
-        } );
-      },
-      resetEra: ( era: amotify.fn.Input.Time.EraTypes ) => {
-        set_era( era );
-        set_status( {
-          ...val_status,
-          ...DataLeveling( {
-            restrict,
-            value: '',
-            era: val_era!
-          } ),
-          eventType: 'update',
-          eventID: $.uuidGen()
-        } );
-      }
-    }
-  } );
-
-  useEffect( () => {
-    let { index,active } = val_focus;
-    if ( active ) {
-      index = Math.max( index,0 );
-      index = Math.min( index,val_status.ranges.length - 1 );
-
-      let { from,length } = val_status.ranges[ index ];
-      let input = $( '#' + params.id )[ 0 ] as HTMLInputElement;
-      if ( input ) input.setSelectionRange( from,( from + length ) );
-    }
-  },[ val_focus ] );
-
-  return (
-    <BoxWrapper
-      val_status={ val_status }
-      set_status={ set_status }
-      val_validate={ val_validate }
-      params={ params }
-    >
-      <Input.Hidden
-        name={ name }
-        data-input-type={ 'time' }
-        data-form={ form }
-        data-validation={ val_validate.ok }
-        componentID={ val_status.componentID }
-        data-value={ JSON.stringify(
-          [ 'dates','months' ].includes( restrict ) ?
-            !val_status.dataValue[ 0 ] || !val_status.dataValue[ 1 ] ? null
-              : val_status.dataValue
-            : ( val_status.dataValue || null )
-        ) }
-      />
-      { amotify.config.device.isTouchDevice ?
-        <Buttons.Button.Plain
-          className={ className }
-          freeCSS={ {
-            textAlign: 'left'
-          } }
-          children={ val_status.formatValue }
-          onClick={ ( event ) => {
-            let component = useStore.get( val_status.componentID );
-            if ( component ) component.openPicker();
-            event.stopPropagation();
-          } }
-        /> : <input
-          type={ 'text' }
-          inputMode={ 'numeric' }
-          data-input-type={ 'time' }
-          data-form-name={ form }
-          value={ val_status.formatValue }
-          className={ className }
-          tabIndex={ amotify.config.device.isTouchDevice ? -1 : 0 }
-          onKeyDown={ ( event ) => {
-            KeyDownEvent( {
-              restrict,
-              event,
-              val_era,
-              val_status,set_status,
-              val_focus,set_focus
-            } );
-
-            if ( onKeyDown ) onKeyDown( event );
-            if ( enableFormSubmit ) SubmitForm( event );
-          } }
-          onKeyUp={ ( event ) => {
-            if ( event.key == 'Tab' ) set_focus( {
-              ...val_focus,
-              active: true
-            } );
-          } }
-          onClick={ ( event ) => {
-            let caretTo = ( event.target as HTMLInputElement ).selectionEnd as number;
-            let Index = 0;
-
-            val_status.ranges.forEach( ( range,index ) => {
-              let { from,length,region } = range;
-              if ( from <= caretTo && caretTo <= ( from + ( region || length ) ) ) {
-                Index = index;
-              }
-            } );
-            set_focus( {
-              ...val_focus,
-              active: true,
-              index: Index
-            } );
-            event.preventDefault();
-          } }
-          { ...others }
-        /> }
-    </BoxWrapper>
-  );
-}
-
-const KeyDownEvent = ( props: {
-  restrict: amotify.fn.Input.Time.RestrictTypes
-  event: React.KeyboardEvent<HTMLInputElement>
-  val_era: amotify.fn.Input.Time.EraTypes
-  val_status: amotify.fn.Input.Status.Time
-  set_status: React.Dispatch<React.SetStateAction<amotify.fn.Input.Status.Time>>
-  val_focus: FocusProps
-  set_focus: React.Dispatch<React.SetStateAction<FocusProps>>
-} ) => {
-  let {
-    val_era,
-    restrict,
-    event,
-    val_status,set_status,
-    val_focus,set_focus
-  } = props;
-
-  let { key,shiftKey,ctrlKey,metaKey } = event;
-  let auxKey = ctrlKey || metaKey;
-  let {
-    selectionStart: caretFrom,
-    selectionEnd: caretTo
-  } = event.target as HTMLInputElement;
-
-  let {
-    index: currentFocusIndex,
-    prevIndex: prevFocusIndex
-  } = val_focus;
-  let {
-    ranges,
-    formatValue
-  } = val_status;
-  let maxFocusIndex = ranges.length - 1;
-
-  if ( [ 'Tab','ArrowLeft','ArrowRight' ].includes( key ) ) {
-    let nextFocusIndex = 0;
-    if ( key == 'Tab' ) {
-      let direction = Number( !shiftKey ) * 2 - 1;
-      nextFocusIndex = val_focus.index + direction;
-      if ( nextFocusIndex < 0 || nextFocusIndex > maxFocusIndex ) return;
-    } else {
-      let direction = key == 'ArrowLeft' ? -1 : key == 'ArrowRight' ? 1 : 0;
-
-      if ( auxKey ) {
-        nextFocusIndex = direction == 1 ? maxFocusIndex : 0;
-      } else {
-        if ( caretFrom == 0 && caretTo == String( val_status.formatValue ).length ) {
-          nextFocusIndex = direction == 1 ? maxFocusIndex : 0;
-        } else {
-          nextFocusIndex = Math.max( 0,Math.min( currentFocusIndex + direction,maxFocusIndex ) );
-        }
-      }
-    }
-    set_focus( {
-      ...val_focus,
-      index: nextFocusIndex,
-      prevIndex: currentFocusIndex
-    } );
-    event.preventDefault();
-  }
-
-  if ( [ 'Backspace','ArrowUp','ArrowDown','0','1','2','3','4','5','6','7','8','9' ].includes( key ) ) {
-    event.preventDefault();
-
-    let nextFocusIndex = currentFocusIndex;
-    nextFocusIndex = Math.max( nextFocusIndex,0 );
-    nextFocusIndex = Math.min( nextFocusIndex,maxFocusIndex );
-    let {
-      type,
-      from,
-      length
-    } = ranges[ nextFocusIndex ];
-
-    let prevValue: any = formatValue.slice( from,( from + length ) );
-    let partsValue: any;
-
-    if ( key == 'Backspace' ) {
-      partsValue = '------'.slice( 0,length );
-    } else if ( [ 'ArrowUp','ArrowDown' ].includes( key ) ) {
-      let direction = key == 'ArrowUp' ? 1 : -1;
-
-      prevValue = prevValue | 0;
-      partsValue = prevValue + direction;
-
-      let [ min,max,range ] =
-        type == 'dateWareki' ?
-          val_era == 'year' ? [ 0,2999,4 ]
-            : val_era == 'reiwa' ? [ 1,2999,4 ]
-              : val_era == 'heisei' ? [ 1,31,4 ]
-                : val_era == 'shouwa' ? [ 1,64,4 ]
-                  : val_era == 'taisho' ? [ 1,15,4 ]
-                    : val_era == 'meiji' ? [ 1,45,4 ] : [ 0,0,0 ]
-          : type == 'minute' ? [ 0,59,2 ]
-            : type == 'hour' ? [ 0,23,2 ]
-              : type == 'date' ? [ 1,31,2 ]
-                : type == 'week' ? [ 1,53,2 ]
-                  : type == 'month' ? [ 1,12,2 ]
-                    : type == 'year' ? [ 0,2999,4 ] : [ 0,0,0 ];
-
-      if ( partsValue > max ) partsValue = min;
-      else if ( partsValue < min ) partsValue = max;
-      partsValue = ( Number( partsValue ) ).zeroEmbed( range );
-    } else if ( [ '0','1','2','3','4','5','6','7','8','9' ].includes( key ) ) {
-      let prev = prevValue | 0;
-      let add = key;
-      let compound: any = `${ prev }${ add }`;
-
-      if ( prevFocusIndex != currentFocusIndex && prevFocusIndex >= 0 ) {
-        prev = 0,compound = '0' + add;
-      }
-
-      if ( type == 'year' || ( type == 'dateWareki' && val_era == 'year' ) ) {
-        if ( Number( compound ) > 10000 ) partsValue = add;
-        else partsValue = compound;
-
-        if ( ( partsValue | 0 ) > 1000 ) nextFocusIndex++;
-      } else if (
-        [ 'hour','minute','date','week','month' ].includes( type ) ||
-        ( type == 'dateWareki' && val_era != 'year' )
-      ) {
-        let base =
-          type == 'dateWareki' ?
-            val_era == 'reiwa' ? 100
-              : val_era == 'heisei' ? 31
-                : val_era == 'shouwa' ? 64
-                  : val_era == 'taisho' ? 15
-                    : val_era == 'meiji' ? 45 : 0
-            : type == 'minute' ? 59
-              : type == 'hour' ? 23
-                : type == 'date' ? 31
-                  : type == 'week' ? 53
-                    : type == 'month' ? 12 : 0;
-
-        partsValue = ( compound | 0 ) > base ? add : compound;
-
-        if ( Number( add ) > Number( String( base )[ 0 ] ) ||
-          (
-            prevValue == '0000'.slice( 0,String( base ).length ) && (
-              compound != '0000'.slice( 0,String( base ).length ) ||
-              ( [ 'minute','hour' ].includes( type ) && prevFocusIndex == currentFocusIndex )
-            )
-          ) || ( compound | 0 ) >= ( 10 ** ( String( base ).length - 1 ) )
-        ) nextFocusIndex++;
-      }
-
-      if ( type == 'year' || type == 'dateWareki' ) partsValue = ( partsValue | 0 ).zeroEmbed( 4 );
-      else partsValue = ( partsValue | 0 ).zeroEmbed( 2 );
-    }
-
-    {
-      let nextFormatValue = String( formatValue ).partReplace( from,String( partsValue ) );
-      let nextDataValue = nextFormatValue.split( PeriodMargin ).map( ( value ) => {
-        return value.replace( /(^\D|\D$)/,'' ).split( /\D+/ ).join( restrict == 'clock' ? ':' : '/' );
-      } );
-      if ( restrict == 'dateWareki' ) {
-        let v = nextDataValue[ 0 ].split( /\D/ );
-        let [ year,month,day ] = v;
-        if ( v.length == 3 && year ) {
-          let yearYear: any = Number( year ) - 1 + Number(
-            {
-              year: 1,reiwa: 2019,heisei: 1989,shouwa: 1926,taisho: 1912,meiji: 1868
-            }[ val_era as string ]
-          );
-          nextDataValue = [ [ yearYear,month,day ].join( '/' ) ];
-        }
-      }
-
-      nextFocusIndex = Math.max( nextFocusIndex,0 );
-      nextFocusIndex = Math.min( nextFocusIndex,maxFocusIndex );
-
-      set_status( {
-        ...val_status,
-        dataValue: [ 'dates','months' ].includes( restrict ) ? nextDataValue : nextDataValue[ 0 ],
-        formatValue: nextFormatValue,
-        eventType: 'update',
-        eventID: $.uuidGen(),
-      } );
-      set_focus( {
-        ...val_focus,
-        index: nextFocusIndex,
-        prevIndex: val_focus.index
-      } );
-    }
-  }
-}
-
-
-export const TimeFNs: amotify.fn.Input.Time.FNTypes = {
-  picker: {
-    launch: ( params ) => {
-      let tipsID = params.tipsID || $.uuidGen();
-      Tooltips.open( {
-        gravityPoint: params.gravityPoint || 24,
-        padding: [ 1,0 ],
-        tipsID,
-        ...params,
-        closeOption: {
-          aroundClick: true,
-          elementBlur: false,
-          ...params.closeOption
-        },
-        content: <Picker
-          restrict={ params.restrict }
-          min={ params.min }
-          max={ params.max }
-          defaultValue={ params.defaultValue }
-          tipsID={ tipsID }
-          onValueUpdate={ ( value ) => {
-            params.onValueUpdate( value );
-          } }
-        />
-      } )
-    },
-    remove: ( tipsID ) => {
-      Tooltips.close( tipsID );
-    }
-  }
-}