amotify 0.0.6 → 0.0.8

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

@@ -0,0 +1,736 @@
+import {
+  useStore
+} from '~/Global/@export';
+import {
+  Box
+} from '~/Atoms/@export';
+import {
+  Input,
+  Buttons,
+  Tooltips
+} from '~/Functions/@export';
+
+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 );
+    }
+  }
+}