amotify 0.0.64 → 0.0.66

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

@@ -1,749 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Box
-} from '@atoms'
-import {
-  Input,
-  Buttons,
-  Tooltips
-} from '@fn'
-
-import {
-  BoxWrapper,
-  SubmitForm,
-  ValidationCheck,
-  CommonEffects
-} from '../core'
-import { Picker } from './Picker'
-
-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 ) {
-              if ( era == 'reiwa' ) Year -= ( 2019 - 1 )
-              else if ( era == 'heisei' ) Year = 31
-            } else if ( Year >= 1989 ) {
-              if ( era == 'heisei' ) Year -= ( 1989 - 1 )
-              else if ( era == 'shouwa' ) Year = 64
-            } else if ( Year >= 1926 ) {
-              if ( era == 'shouwa' ) Year -= ( 1926 - 1 )
-              else if ( era == 'taisho' ) Year = 15
-            } else if ( Year >= 1912 ) {
-              if ( era == 'taisho' ) Year -= ( 1912 - 1 )
-              else if ( era == 'meiji' ) Year = 45
-            } else if ( Year >= 1868 ) Year -= ( 1868 - 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: React.FC<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 ] = React.useState( era! )
-
-  let [ val_status,set_status ] = React.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 ] = React.useState( {
-    ok: false,
-    notice: []
-  } as amotify.fn.Input.Validation.Result )
-  let [ val_focus,set_focus ] = React.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 = React.useRef( false )
-  React.useEffect( () => {
-    if ( mounted.current ) {
-      set_status( {
-        ...val_status,
-        ...DataLeveling( {
-          restrict,
-          value: val_status.dataValue,
-          era: val_era
-        } )
-      } )
-
-      let ParentComponent = useStore.get( 'refreshEra_' + val_status.componentID )
-      ParentComponent && ParentComponent.refreshEra( 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,
-          era: val_era,
-          onValueUpdate: ( value,era ) => {
-            set_status( {
-              ...val_status,
-              ...DataLeveling( {
-                restrict,
-                value,
-                era
-              } ),
-              eventType: 'update',
-              eventID: $.uuidGen()
-            } )
-            set_era( era )
-          }
-        } )
-      },
-      resetEra: ( era: amotify.fn.Input.Time.EraTypes ) => {
-        set_era( era )
-        set_status( {
-          ...val_status,
-          ...DataLeveling( {
-            restrict,
-            value: '',
-            era: val_era!
-          } ),
-          eventType: 'update',
-          eventID: $.uuidGen()
-        } )
-      }
-    }
-  } )
-
-  React.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()
-        } }
-        onChange={ () => { } }
-        { ...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' ? ':' : '/' )
-          .replace( /(^\D|\D$)/,'' )
-      } )
-      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/2',
-        tipsID,
-        ...params,
-        close_option: {
-          aroundClick: true,
-          elementBlur: false,
-          ...params.close_option
-        },
-        content: <Picker
-          restrict={ params.restrict }
-          min={ params.min }
-          max={ params.max }
-          era={ params.era }
-          defaultValue={ params.defaultValue }
-          tipsID={ tipsID }
-          onValueUpdate={ ( value,era ) => {
-            params.onValueUpdate( value,era )
-          } }
-        />
-      } )
-    },
-    remove: ( tipsID ) => {
-      Tooltips.close( tipsID )
-    }
-  }
-}