amotify 0.0.64 → 0.0.66

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

@@ -1,1361 +0,0 @@
-import {
-  React
-} from '@global'
-import {
-  Grid,
-  Box,
-  Flex,
-  FAI
-} from '@atoms'
-import {
-  Column,
-  Row,
-  Text
-} from '@mols'
-import {
-  Buttons,
-  Input,
-  Tooltips
-} from '@fn'
-
-import style from './style.module.scss'
-
-let YearOptions: {
-  ( params?: {
-    min?: string
-    max?: string
-  } ): amotify.fn.Input.Select.OptionProps[]
-} = ( params ) => {
-  let Years: amotify.fn.Input.Select.OptionProps[] = []
-  let minYear = Number( params?.min ?? 1900 )
-  let maxYear = Number( params?.max ?? $.Time().addYear( 10 ).year )
-
-  for ( let year = minYear; year <= maxYear; year++ ) {
-    Years.unshift( {
-      value: year,
-      label: [ year,...$.transformer.wareki( year ).value ].join( ' - ' ),
-      // displayLabel: year + '年'
-    } )
-  }
-  return Years
-}
-
-type ClockValueTypes = {
-  modifiedType: 'init' | 'override' | 'update'
-  hour: number
-  minutes: number
-}
-type DateValueTypes = {
-  modifiedType: 'init' | 'override' | 'update'
-  year: number
-  month: number
-  date: number
-}
-type MonthValueTypes = {
-  modifiedType: 'init' | 'override' | 'update'
-  year: number
-  month: number
-}
-type YearValueTypes = {
-  modifiedType: 'init' | 'override' | 'update'
-  year: number
-}
-type DateWarekiValueTypes = {
-  modifiedType: 'init' | 'override' | 'update'
-  era: amotify.fn.Input.Time.EraTypes
-  year: number
-  month: number
-  date: number
-}
-type SendParams<T> = amotify.fn.Input.Time.PickerParams & {
-  val_value: T
-  set_value: React.Dispatch<React.SetStateAction<T>>
-}
-
-export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) => {
-  let {
-    restrict,
-    era = 'year',
-    defaultValue = ''
-  } = params
-  params = { ...params }
-  params.tipsID = params.tipsID || $.uuidGen()
-
-  const mounted = React.useRef( false )
-
-  let [ val_value,set_value ] = React.useState( ( () => {
-    if ( restrict == 'clock' ) {
-      let partValues: any = String( defaultValue ).split( /[^\d]/ )
-
-      if ( !partValues[ 0 ] ) partValues = [ 0,0 ]
-
-      let hour = Number( partValues[ 0 ] )
-      let minutes = Number( partValues[ 1 ] )
-
-      return {
-        modifiedType: 'init',
-        hour: hour,
-        minutes: minutes
-      } as ClockValueTypes
-    } else if ( restrict == 'date' ) {
-      let [ year,month,date ] = String( defaultValue )?.split( /\D/ )
-      if ( $.is.nullish( year ) || $.is.nullish( month ) || $.is.nullish( date ) ) {
-        [ year,month,date ] = $.Time().toFormat( '%Y-%M-%D' ).split( '-' )
-      }
-
-      return {
-        modifiedType: 'init',
-        year: Number( year ),
-        month: Number( month ),
-        date: Number( date )
-      } as DateValueTypes
-    } else if ( restrict == 'week' ) {
-    } else if ( restrict == 'month' ) {
-      let [ year,month ] = String( defaultValue ).split( /\D/ )
-      if ( $.is.nullish( year ) || $.is.nullish( month ) ) {
-        [ year,month ] = $.Time().toFormat( '%Y-%M' ).split( '-' )
-      }
-
-      return {
-        modifiedType: 'init',
-        year: Number( year ),
-        month: Number( month )
-      } as MonthValueTypes
-    } else if ( restrict == 'year' ) {
-      let [ year ] = String( defaultValue ).split( /\D/ )
-      if ( $.is.nullish( year ) ) {
-        [ year ] = $.Time().toFormat( '%Y' ).split( '-' )
-      }
-
-      return {
-        modifiedType: 'init',
-        year: Number( year )
-      } as YearValueTypes
-    } else if ( restrict == 'dateWareki' ) {
-      let [ year,month,date ] = String( defaultValue )?.split( /\D/ )
-      if ( $.is.nullish( year ) || $.is.nullish( month ) || $.is.nullish( date ) ) {
-        [ year,month,date ] = $.Time().toFormat( '%Y-%M-%D' ).split( '-' )
-      }
-
-      return {
-        modifiedType: 'init',
-        era: era || 'year',
-        year: Number( year ),
-        month: Number( month ),
-        date: Number( date )
-      } as DateWarekiValueTypes
-    }
-
-    return {}
-  } )() as any )
-
-  React.useEffect( () => {
-    if ( mounted.current ) {
-      if ( val_value.modifiedType == 'update' ) {
-        let sendValue = ''
-        let sendEra: amotify.fn.Input.Time.EraTypes = era || 'year'
-
-        if ( restrict == 'clock' ) {
-          let { hour,minutes } = val_value as ClockValueTypes
-          sendValue = [
-            hour.zeroEmbed( 2 ),
-            minutes.zeroEmbed( 2 )
-          ].join( '/' )
-        } else if ( restrict == 'date' ) {
-          let { year,month,date } = val_value as DateValueTypes
-          sendValue = [
-            year,
-            month.zeroEmbed( 2 ),
-            date.zeroEmbed( 2 )
-          ].join( '/' )
-        } else if ( restrict == 'week' ) {
-        } else if ( restrict == 'month' ) {
-          let { year,month } = val_value as MonthValueTypes
-          sendValue = [
-            year,
-            month.zeroEmbed( 2 )
-          ].join( '/' )
-        } else if ( restrict == 'year' ) {
-          let { year } = val_value as YearValueTypes
-          sendValue = String( year )
-        } else if ( restrict == 'dateWareki' ) {
-          let {
-            year,
-            month,
-            date,
-            era
-          } = val_value as DateWarekiValueTypes
-          sendEra = era
-          sendValue = [
-            year,
-            month.zeroEmbed( 2 ),
-            date.zeroEmbed( 2 )
-          ].join( '/' )
-        }
-        params.onValueUpdate( sendValue,sendEra )
-      }
-    } else {
-      mounted.current = true
-    }
-  },[ val_value ] )
-
-  let Params = {
-    ...params,
-    val_value,
-    set_value
-  }
-
-  return <Box
-    backgroundColor={ '1.layer.base' }
-    borderRadius={ '2.tone.secondary' }
-    boxShadow={ '1.remark' }
-    border
-    overflow='hidden'
-  >
-    <Box
-      overflow={ 'auto' }
-      className={ style[ restrict.toCapital() + 'Base' ] }
-      children={ restrict == 'clock' ? <Comps.Clock._ { ...Params } />
-        : restrict == 'date' ? <Comps.Date._ { ...Params } />
-          : restrict == 'week' ? ''
-            : restrict == 'month' ? <Comps.Month._ { ...Params } />
-              : restrict == 'year' ? <Comps.Year._ { ...Params } />
-                : restrict == 'dates' ? ''
-                  : restrict == 'months' ? ''
-                    : restrict == 'dateWareki' ? <Comps.DateWareki._ { ...Params } />
-                      : <></> }
-    />
-  </Box>
-}
-
-const Comps = {
-  Clock: {
-    _: ( params: SendParams<ClockValueTypes> ) => {
-      let {
-        min,max,
-        onValueUpdate,
-        tipsID,
-        val_value,
-        set_value
-      } = params
-
-      let [ val_ampm,set_ampm ] = React.useState( val_value.hour > 12 ? 2 : 1 )
-      let [ val_unit,set_unit ] = React.useState( Number( localStorage.getItem( 'timePickerUnit' ) || 5 ) )
-
-      React.useEffect( () => {
-        localStorage.setItem( 'timePickerUnit',String( val_unit ) )
-      },[ val_unit ] )
-
-      let { hour,minutes } = val_value
-
-      return <Column
-        padding={ 1 }
-      >
-        <Flex
-          flexType='row'
-          flexWrap={ false }
-          gap={ 1 }
-          className={ style.Body }
-        >
-          <Column
-            className={ style.DesignSide }
-            flexSizing={ 0 }
-          >
-            <Box
-              className={ style.ClockUiBase }
-              padding={ [ 1,'2/3' ] }
-              flexCenter
-            >
-              <Box
-                className={ style.ClockUi }
-                backgroundColor={ 'tcOpLow' }
-                isRounded
-                position='relative'
-              >
-                <Box
-                  position='absolute'
-                  backgroundColor='theme'
-                  unitWidth={ '1/12' }
-                  className={ [
-                    style.Needle,
-                    style.hour
-                  ].join( ' ' ) }
-                  freeCSS={ {
-                    transform: `rotate(${ hour * 30 + minutes / 2 }deg)`
-                  } }
-                />
-                <Box
-                  position='absolute'
-                  backgroundColor='theme'
-                  unitWidth={ '1/12' }
-                  className={ [
-                    style.Needle,
-                    style.minute
-                  ].join( ' ' ) }
-                  freeCSS={ {
-                    transform: `rotate(${ minutes * 6 }deg)`
-                  } }
-                />
-              </Box>
-            </Box>
-
-            <Input.Radio
-              tone='plain'
-              icon
-              value={ [ val_ampm ] }
-              options={ [
-                { value: 1,label: 'AM' },
-                { value: 2,label: 'PM' }
-              ] }
-              flexType={ 'col' }
-              gap={ 0 }
-              cellStyles={ {
-                padding: '1/2',
-                horizontalAlign: 'between',
-                gap: '1/3'
-              } }
-              tabIndex={ -1 }
-              onUpdateValidValue={ ( { value } ) => {
-                let prevHour = val_value.hour % 12
-                let Hour = prevHour + ( value == 2 ? 12 : 0 )
-
-                set_ampm( value )
-                set_value( {
-                  modifiedType: 'update',
-                  hour: Hour,
-                  minutes: val_value.minutes
-                } )
-              } }
-            />
-
-            <Box borderTop margin={ [ 0,1 ] } />
-            <Input.Radio
-              tone='plain'
-              icon
-              value={ [ val_unit ] }
-              options={ [
-                { value: 1,label: '/ 1分' },
-                { value: 2,label: '/ 2分' },
-                { value: 5,label: '/ 5分' }
-              ] }
-              flexType={ 'col' }
-              gap={ 0 }
-              cellStyles={ {
-                padding: '1/2',
-                horizontalAlign: 'between',
-                gap: '1/3'
-              } }
-              tabIndex={ -1 }
-              onUpdateValidValue={ ( { value } ) => {
-                set_unit( value )
-              } }
-            />
-          </Column>
-          <Column>
-            <Box
-              flexCenter
-              fontSize='3.paragraph'
-              isSemiBoldFont
-            >
-              { val_value.hour.zeroEmbed( 2 ) } : { val_value.minutes.zeroEmbed( 2 ) }
-            </Box>
-            <Flex
-              flexWrap={ false }
-              borderRadius={ '1.tone.primary' }
-              boxShadow={ '0.remark.inset' }
-              flexChilds='even'
-              freeCSS={ {
-                minWidth: 12 * 12
-              } }
-              padding={ [ '1/3',0 ] }
-            >
-              <Column
-                gap={ 0 }
-                overflow={ 'auto' }
-                padding={ '2/3' }
-                borderRight
-                freeCSS={ {
-                  maxHeight: 12 * 22
-                } }
-                children={ Comps.Clock.Hours( {
-                  onClick: ( index ) => {
-                    let Hour = index + ( val_ampm == 2 ? 12 : 0 )
-                    set_value( {
-                      modifiedType: 'update',
-                      hour: Hour,
-                      minutes: val_value.minutes
-                    } )
-                  },
-                  min,max,
-                  ampm: val_ampm
-                } ) }
-              />
-              <Column
-                gap={ 0 }
-                overflow={ 'auto' }
-                padding={ '2/3' }
-                freeCSS={ {
-                  maxHeight: 12 * 22
-                } }
-                children={ Comps.Clock.Minutes( {
-                  onClick: ( index ) => {
-                    set_value( {
-                      modifiedType: 'update',
-                      hour: val_value.hour,
-                      minutes: index
-                    } )
-                  },
-                  min,max,
-                  unit: val_unit
-                } ) }
-              />
-            </Flex>
-          </Column>
-        </Flex>
-        <Comps.Variables.Footer
-          tipsID={ tipsID! }
-          onValueUpdate={ onValueUpdate }
-        />
-      </Column>
-    },
-    Hours: ( params: {
-      min?: string
-      max?: string
-      ampm: number
-      onClick( index: number ): void
-    } ) => {
-      let list: ReactElement[] = []
-
-      for ( let index = 0; index < 12; index++ ) {
-        let labelIndex = params.ampm == 2 ? index + 12 : index
-        let Disabled = false
-
-        {
-          let VAL = Number( String( labelIndex * 100 ).replace( /\D/ig,'' ) )
-          if ( params.min ) {
-            let MIN = Number( String( params.min ).replace( /\D/ig,'' ) )
-            if ( MIN > VAL ) Disabled = true
-          }
-          if ( params.max ) {
-            let MAX = Number( String( params.max ).replace( /\D/ig,'' ) )
-            if ( VAL > MAX ) Disabled = true
-          }
-        }
-
-        list.push( <Buttons.Button.Normal.R
-          key={ index }
-          isLocked={ Disabled }
-          borderBottom borderRadius={ 0 }
-          padding={ [ '1/2',1 ] }
-          freeCSS={ { whiteSpace: 'nowrap' } }
-          tabIndex={ -1 }
-          onClick={ () => {
-            params.onClick( index )
-          } }
-          children={ labelIndex.zeroEmbed( 2 ) }
-        /> )
-      }
-      return list
-    },
-    Minutes: ( params: {
-      min?: string
-      max?: string
-      unit: number
-      onClick( index: number ): void
-    } ) => {
-      let list: ReactElement[] = []
-
-      for ( let index = 0; index < 60 / params.unit; index++ ) {
-        let Value = index * params.unit
-
-        list.push( <Buttons.Button.Normal.R
-          key={ Value }
-          borderBottom borderRadius={ 0 }
-          padding={ [ '1/2',1 ] }
-          freeCSS={ { whiteSpace: 'nowrap' } }
-          tabIndex={ -1 }
-          onClick={ () => {
-            params.onClick( Value )
-          } }
-          children={ Value.zeroEmbed( 2 ) }
-        /> )
-      }
-      return list
-    }
-  },
-  Date: {
-    _: ( params: SendParams<DateValueTypes> ) => {
-      let {
-        min,max,
-        onValueUpdate,
-        tipsID,
-        val_value,
-        set_value
-      } = params
-
-      let { year,month,date } = val_value
-
-      return <Column
-        padding={ 1 }
-      >
-        <Flex
-          horizontalAlign='between'
-          verticalAlign='center'
-          flexWrap={ false }
-        >
-          <Flex
-            verticalAlign='bottom'
-            horizontalAlign='left'
-            gap={ '2/3' }
-            flexWrap={ false }
-          >
-            <Input.Select
-              override='force'
-              enableUnSelected={ false }
-              value={ year }
-              options={ YearOptions() }
-
-              border='1.thin'
-              padding={ [ '1/3','2/3' ] }
-              paddingRight={ 2 }
-
-              rightIconStyles={ {
-                right: '1/3'
-              } }
-              onUpdateValidValue={ ( { value } ) => {
-                set_value( {
-                  modifiedType: 'update',
-                  year: Number( value ),
-                  month: month,
-                  date: date
-                } )
-              } }
-            />
-            <Input.Select
-              override='force'
-              enableUnSelected={ false }
-              value={ month }
-              options={ ( () => {
-                let options = []
-                for ( let i = 1; i <= 12; i++ ) {
-                  options.push( {
-                    value: i,
-                    label: String( i ),
-                    displayLabel: String( i ) + '月'
-                  } )
-                }
-                return options
-              } )() }
-              placeholder=''
-
-              border='1.thin'
-              padding={ [ '1/3','2/3' ] }
-              paddingRight={ 2 }
-
-              rightIconStyles={ {
-                right: '1/3'
-              } }
-              onUpdateValidValue={ ( { value } ) => {
-                set_value( {
-                  modifiedType: 'update',
-                  year: year,
-                  month: Number( value ),
-                  date: date
-                } )
-              } }
-            />
-          </Flex>
-          <Comps.Variables.ShiftButtons
-            callback={ ( dir ) => {
-              let newMonth = month + dir
-              let newYear = year
-
-              if ( dir == -1 ) {
-                if ( newMonth <= 0 ) newYear--
-                newMonth = newMonth || 12
-              } else {
-                if ( month == 12 ) newYear++
-              }
-
-              set_value( {
-                modifiedType: 'update',
-                year: newYear,
-                month: newMonth,
-                date: val_value.date
-              } )
-            } }
-          />
-        </Flex>
-        <Box borderTop />
-        <Box
-          children={ Comps.Date.MonthCalendar( {
-            min,max,
-            year: val_value.year,
-            month: val_value.month,
-            current: [ val_value.year,val_value.month,val_value.date ],
-            callback: ( ( val: [ number,number,number ] ) => {
-              let [ year,month,date ] = val
-              set_value( {
-                modifiedType: 'update',
-                year: year,
-                month: month,
-                date: date
-              } )
-            } )
-          } ) }
-        />
-        <Comps.Variables.Footer
-          tipsID={ tipsID! }
-          onValueUpdate={ onValueUpdate }
-        />
-      </Column>
-    },
-    MonthCalendar: ( params: {
-      min?: string
-      max?: string
-      year: number
-      month: number
-      current: [ number,number,number ]
-      callback: any
-    } ) => {
-      let {
-        min,max,
-        year,
-        month,
-        current,
-        callback
-      } = params
-      let today = $.Time()
-
-      let firstDate = $.Time( [ year,month.zeroEmbed( 2 ),'01' ].join( '/' ) )
-      let lastDate = firstDate.getLastDayOfTheMonth()
-      let lastMonthLastDay = $.Time( firstDate ).addMonth( -1 ).getLastDayOfTheMonth().date
-
-      let legends = [],
-        lastMonthLastishDates = [],
-        thisMonthDates = [],
-        nextMonthFirstishDates = []
-
-      let commonStyle: amotifyUniStyleParams = {
-        padding: 0,
-        unitWidth: 3,
-        unitHeight: 3,
-        flexCenter: true,
-        borderRadius: '3.tone.tertiary'
-      }
-
-      for ( var i = 0; i < 7; i++ ) {
-        legends.push( <Box
-          className={ [
-            style.CalendarDay,
-            style.Legend
-          ].join( ' ' ) }
-          { ...commonStyle }
-          key={ i }
-        >
-          { [ '日','月','火','水','木','金','土' ][ i ] }
-        </Box> )
-      }
-
-      for ( var i = 0; i < firstDate.weekday; i++ ) {
-        lastMonthLastishDates.unshift( <Box
-          className={ [
-            style.CalendarDay,
-            style.Dummy
-          ].join( ' ' ) }
-          fontColor='4.thin'
-          { ...commonStyle }
-          key={ i }
-        >
-          { lastMonthLastDay - i }
-        </Box> )
-      }
-      for ( var i = 1; i <= lastDate.date; i++ ) {
-        let idx = i
-        let isToday = year == today.year && month == today.month && i == today.date
-
-        let isLocked = false
-
-        {
-          let VAL = Number( String( [ year,month.zeroEmbed( 2 ),i.zeroEmbed( 2 ) ].join( '/' ) ).replace( /\D/ig,'' ) )
-          if ( params.min ) {
-            let MIN = Number( String( params.min ).replace( /\D/ig,'' ) )
-            if ( MIN > VAL ) isLocked = true
-          }
-          if ( params.max ) {
-            let MAX = Number( String( params.max ).replace( /\D/ig,'' ) )
-            if ( VAL > MAX ) isLocked = true
-          }
-        }
-
-        thisMonthDates.push( <Buttons.Button.Clear.R
-          className={ [
-            style.CalendarDay,
-            style[ 'isToday_' + isToday ]
-          ].join( ' ' ) }
-          { ...commonStyle }
-          onClick={ () => {
-            callback( [ year,month,idx ] )
-          } }
-          tabIndex={ -1 }
-          key={ idx }
-          isLocked={ isLocked }
-
-          fontColor={ '1.clear' }
-          ssEffectsOnActive={ 'shrink' }
-          padding={ 0 }
-          flexCenter
-          borderRadius={ 'sphere' }
-          children={ i }
-        /> )
-      }
-      for ( var i = 1; i < 7 - lastDate.weekday; i++ ) {
-        nextMonthFirstishDates.push( <Box
-          className={ [
-            style.CalendarDay,
-            style.Dummy
-          ].join( ' ' ) }
-          fontColor='4.thin'
-          { ...commonStyle } key={ i }
-        >
-          { i }
-        </Box> )
-      }
-
-      return <Grid gridCols={ 7 }
-        gap={ '1/3' }
-      >
-        { legends }
-        { lastMonthLastishDates }
-        { thisMonthDates }
-        { nextMonthFirstishDates }
-      </Grid>
-    }
-  },
-  Month: {
-    _: ( params: SendParams<MonthValueTypes> ) => {
-      let {
-        min,max,
-        onValueUpdate,
-        tipsID,
-        val_value,
-        set_value
-      } = params
-
-      let { year,month } = val_value
-
-      return <Column
-        padding={ 1 }
-      >
-        <Row.Separate gap={ 0 }>
-          <Row.Center
-            verticalAlign='bottom'
-            gap={ '2/3' }
-          >
-            <Input.Select
-              enableUnSelected={ false }
-              value={ year }
-              options={ YearOptions() }
-              override='force'
-
-              border='1.thin'
-              padding={ [ '1/3','2/3' ] }
-              paddingRight={ 2 }
-
-              rightIconStyles={ {
-                right: '1/3'
-              } }
-              onUpdateValidValue={ ( { value } ) => {
-                set_value( {
-                  modifiedType: 'update',
-                  year: Number( value ),
-                  month: month
-                } )
-              } }
-            />
-          </Row.Center>
-
-          <Comps.Variables.ShiftButtons
-            callback={ ( dir ) => {
-              let newYear = Math.min( Math.max( year + dir,1900 ),2100 )
-              set_value( {
-                modifiedType: 'update',
-                year: newYear,
-                month: month
-              } )
-            } }
-          />
-        </Row.Separate>
-        <Box borderTop />
-        { Comps.Month.Months( {
-          min,max,
-          year: val_value.year,
-          callback: ( ( val: [ number,number,number ] ) => {
-            let [ year,month ] = val
-            set_value( {
-              modifiedType: 'update',
-              year: year,
-              month: month
-            } )
-          } )
-        } ) }
-        <Comps.Variables.Footer
-          tipsID={ tipsID! }
-          onValueUpdate={ onValueUpdate }
-        />
-      </Column>
-    },
-    Months: ( params: {
-      min?: string
-      max?: string
-      year: number
-      callback: any
-    } ) => {
-      let {
-        year,
-        callback
-      } = params
-      let Today = $.Time()
-
-      let Months = []
-
-      for ( let index = 1; index <= 12; index++ ) {
-        let isThisMonth = year == Today.year && index == Today.month
-        let isLocked = false
-
-        {
-          let VAL = Number( String( [ year,index.zeroEmbed( 2 ) ].join( '/' ) ).replace( /\D/ig,'' ) )
-          if ( params.min ) {
-            let MIN = Number( String( params.min ).replace( /\D/ig,'' ) )
-            if ( MIN > VAL ) isLocked = true
-          }
-          if ( params.max ) {
-            let MAX = Number( String( params.max ).replace( /\D/ig,'' ) )
-            if ( VAL > MAX ) isLocked = true
-          }
-        }
-
-        let ClassName = [
-          style.Cell,
-          isThisMonth ? style.isThisMonth : ''
-        ].join( ' ' )
-
-        Months.push( <Buttons.Button.Clear.R
-          key={ year + '-' + index }
-          className={ ClassName }
-          isLocked={ isLocked }
-          fontColor={ '2.normal' }
-          padding={ [ '2/3',1 ] }
-          ssEffectsOnActive={ 'shrink' }
-          onClick={ () => {
-            callback( [ year,index ] )
-          } }
-        >
-          { index } 月
-        </Buttons.Button.Clear.R> )
-      }
-
-      return <Grid
-        gridCols={ 4 }
-        gap={ '2/3' }
-        children={ Months }
-      />
-    }
-  },
-  Year: {
-    _: ( params: SendParams<YearValueTypes> ) => {
-      let {
-        min,max,
-        onValueUpdate,
-        tipsID,
-        val_value,
-        set_value
-      } = params
-
-      let { year } = val_value
-
-      return <Column
-        padding={ 1 }
-      >
-        <Input.Select
-          enableUnSelected={ false }
-          value={ year || $.Time().year }
-          override='force'
-          options={ YearOptions( { min,max } ) }
-          onUpdateValidValue={ ( { value } ) => {
-            set_value( {
-              modifiedType: 'update',
-              year: Number( value )
-            } )
-          } }
-        />
-        <Comps.Variables.Footer
-          tipsID={ tipsID! }
-          onValueUpdate={ onValueUpdate }
-          onSubmit={ () => {
-            set_value( {
-              modifiedType: 'update',
-              year: Number( year || $.Time().year )
-            } )
-          } }
-        />
-      </Column>
-    }
-  },
-  DateWareki: {
-    _: ( params: SendParams<DateWarekiValueTypes> ) => {
-      let {
-        min,max,
-        onValueUpdate,
-        tipsID,
-        val_value,
-        set_value
-      } = params
-
-      let {
-        era,
-        year,
-        month,
-        date
-      } = val_value
-
-      let Params = {
-        val_value,
-        set_value
-      }
-
-      return <Box>
-        <Row.Left
-          verticalAlign='unset'
-          borderBottom
-          gap={ 0 }
-        >
-          <Comps.DateWareki.EraSelect { ...Params } />
-          <Box borderRight />
-          <Comps.DateWareki.Calendar { ...Params } />
-        </Row.Left>
-        <Box
-          padding={ 1 }
-        >
-          <Comps.Variables.Footer
-            tipsID={ tipsID! }
-            onValueUpdate={ onValueUpdate }
-          />
-        </Box>
-      </Box>
-    },
-    EraSelect: ( params: {
-      val_value: DateWarekiValueTypes
-      set_value: React.Dispatch<React.SetStateAction<DateWarekiValueTypes>>
-    } ) => {
-      let {
-        val_value,
-        set_value
-      } = params
-
-      let styles: amotifyUniStyleParams = {
-        padding: [ '1/2',1.5 ],
-        fontColor: '3.blur'
-      }
-      let isActiveStyles: amotifyUniStyleParams = {
-        backgroundColor: 'cloud',
-        fontColor: '2.normal',
-        isSemiBoldFont: true
-      }
-
-      return <Column
-        gap={ 0 }
-        padding={ 1 }
-      >
-        <Buttons.Button.Clear.R
-          color='cloud'
-          { ...styles }
-          isActiveStyles={ isActiveStyles }
-          isActive={ val_value.era == 'year' }
-          onClick={ () => {
-            let today = $.Time()
-            set_value( {
-              modifiedType: 'update',
-              era: 'year',
-              year: today.year,month: today.month,date: today.date
-            } )
-          } }
-        >
-          西暦
-        </Buttons.Button.Clear.R>
-        <Buttons.Button.Clear.R
-          color='cloud'
-          { ...styles }
-          isActiveStyles={ isActiveStyles }
-          isActive={ val_value.era == 'reiwa' }
-          onClick={ () => {
-            let today = $.Time()
-            set_value( {
-              modifiedType: 'update',
-              era: 'reiwa',
-              year: today.year,month: today.month,date: today.date
-            } )
-          } }
-        >
-          令和
-        </Buttons.Button.Clear.R>
-        <Buttons.Button.Clear.R
-          color='cloud'
-          { ...styles }
-          isActiveStyles={ isActiveStyles }
-          isActive={ val_value.era == 'heisei' }
-          onClick={ () => {
-            set_value( {
-              modifiedType: 'update',
-              era: 'heisei',
-              year: 2019,month: 1,date: 1
-            } )
-          } }
-        >
-          平成
-        </Buttons.Button.Clear.R>
-        <Buttons.Button.Clear.R
-          color='cloud'
-          { ...styles }
-          isActiveStyles={ isActiveStyles }
-          isActive={ val_value.era == 'shouwa' }
-          onClick={ () => {
-            set_value( {
-              modifiedType: 'update',
-              era: 'shouwa',
-              year: 1989,month: 1,date: 1
-            } )
-          } }
-        >
-          昭和
-        </Buttons.Button.Clear.R>
-        <Buttons.Button.Clear.R
-          color='cloud'
-          { ...styles }
-          isActiveStyles={ isActiveStyles }
-          isActive={ val_value.era == 'taisho' }
-          onClick={ () => {
-            set_value( {
-              modifiedType: 'update',
-              era: 'taisho',
-              year: 1926,month: 1,date: 1
-            } )
-          } }
-        >
-          大正
-        </Buttons.Button.Clear.R>
-        <Buttons.Button.Clear.R
-          color='cloud'
-          { ...styles }
-          isActiveStyles={ isActiveStyles }
-          isActive={ val_value.era == 'meiji' }
-          onClick={ () => {
-            set_value( {
-              modifiedType: 'update',
-              era: 'meiji',
-              year: 1912,month: 1,date: 1
-            } )
-          } }
-        >
-          明治
-        </Buttons.Button.Clear.R>
-      </Column>
-    },
-    Calendar: ( params: {
-      val_value: DateWarekiValueTypes
-      set_value: React.Dispatch<React.SetStateAction<DateWarekiValueTypes>>
-    } ) => {
-      let {
-        val_value,
-        set_value
-      } = params
-
-      let yearOptions: amotify.fn.Input.Select.OptionProps[] = []
-      if ( val_value.era == 'year' ) {
-        for ( let i = 1900; i < 2100; i++ ) yearOptions.unshift( { value: i,label: i + '年' } )
-      } else if ( val_value.era == 'reiwa' ) {
-        let thisReiwaYear = $.Time().year - 2018
-        for ( let i = 1; i <= thisReiwaYear + 10; i++ ) yearOptions.unshift( { value: 2019 + i - 1,label: '令和' + ( i == 1 ? '元' : i ) + '年' } )
-      } else if ( val_value.era == 'heisei' ) {
-        for ( let i = 1; i <= 31; i++ ) yearOptions.unshift( { value: 1989 + i - 1,label: '平成' + ( i == 1 ? '元' : i ) + '年' } )
-      } else if ( val_value.era == 'shouwa' ) {
-        for ( let i = 1; i <= 64; i++ ) yearOptions.unshift( { value: 1926 + i - 1,label: '昭和' + ( i == 1 ? '元' : i ) + '年' } )
-      } else if ( val_value.era == 'taisho' ) {
-        for ( let i = 1; i <= 15; i++ ) yearOptions.unshift( { value: 1912 + i - 1,label: '大正' + ( i == 1 ? '元' : i ) + '年' } )
-      } else if ( val_value.era == 'meiji' ) {
-        for ( let i = 1; i <= 45; i++ ) yearOptions.unshift( { value: 1868 + i - 1,label: '明治' + ( i == 1 ? '元' : i ) + '年' } )
-      }
-
-      return <Column
-        padding={ 1 }
-        key={ val_value.era }
-      >
-        <Row.Separate>
-          <Input.Select
-            tone='cloud'
-            enableUnSelected={ false }
-            override='force'
-            border='1.thin'
-            padding={ [ '1/3','2/3' ] }
-            paddingRight={ 2 }
-            rightIconStyles={ { right: '1/3' } }
-            options={ yearOptions }
-            value={ val_value.year }
-            onUpdateValidValue={ ( { value } ) => {
-              set_value( {
-                ...val_value,
-                modifiedType: 'update',
-                year: Number( value )
-              } )
-            } }
-          />
-          <Row.Center
-            gap={ '1/3' }
-          >
-            <Buttons.Button.Clear.S
-              ssSphere={ 2 }
-              onClick={ () => {
-                let nextMonth = val_value.month - 1
-                set_value( {
-                  modifiedType: 'update',
-                  era: val_value.era,
-                  year: nextMonth == 0 ? val_value.year - 1 : val_value.year,
-                  month: nextMonth == 0 ? 12 : nextMonth,
-                  date: 1
-                } )
-              } }
-            >
-              <FAI.ChevronLeft />
-            </Buttons.Button.Clear.S>
-            <Input.Select
-              tone='cloud'
-              enableUnSelected={ false }
-              override='force'
-              border='1.thin'
-              padding={ [ '1/3','2/3' ] }
-              paddingRight={ 2 }
-              rightIconStyles={ { right: '1/3' } }
-              options={ [
-                { value: 1,label: '1月' },
-                { value: 2,label: '2月' },
-                { value: 3,label: '3月' },
-                { value: 4,label: '4月' },
-                { value: 5,label: '5月' },
-                { value: 6,label: '6月' },
-                { value: 7,label: '7月' },
-                { value: 8,label: '8月' },
-                { value: 9,label: '9月' },
-                { value: 10,label: '10月' },
-                { value: 11,label: '11月' },
-                { value: 12,label: '12月' }
-              ] }
-              value={ val_value.month }
-              onUpdateValidValue={ ( { value } ) => {
-                set_value( {
-                  modifiedType: 'update',
-                  era: val_value.era,
-                  year: val_value.year,
-                  month: Number( value ),
-                  date: 1
-                } )
-              } }
-            />
-            <Buttons.Button.Clear.S
-              ssSphere={ 2 }
-              onClick={ () => {
-                let nextMonth = val_value.month + 1
-                set_value( {
-                  modifiedType: 'update',
-                  era: val_value.era,
-                  year: nextMonth == 13 ? val_value.year + 1 : val_value.year,
-                  month: nextMonth == 13 ? 1 : nextMonth,
-                  date: 1
-                } )
-              } }
-            >
-              <FAI.ChevronRight />
-            </Buttons.Button.Clear.S>
-          </Row.Center>
-        </Row.Separate>
-        <Comps.DateWareki.MonthCell { ...params } />
-      </Column>
-    },
-    MonthCell: ( params: {
-      val_value: DateWarekiValueTypes
-      set_value: React.Dispatch<React.SetStateAction<DateWarekiValueTypes>>
-    } ) => {
-      let {
-        val_value,
-        set_value
-      } = params
-      let targetDate = $.Time( [
-        val_value.year.zeroEmbed( 4 ),
-        val_value.month.zeroEmbed( 2 ),
-        val_value.date.zeroEmbed( 2 )
-      ].join( '/' ) )
-
-      if ( !targetDate.validate ) return
-
-      let weekdayOfFirstDay = targetDate.getFirstDayOfTheMonth().weekday
-      let lastDayOfTheMonth = targetDate.getLastDayOfTheMonth()
-
-      let Cells: ReactElement[] = []
-      for ( let i = 0; i < 7; i++ ) {
-        Cells.push( <Text.Supplement
-          flexCenter
-          fontColor={ i == 0 ? 'googleRed' : i == 6 ? 'googleBlue' : '3.blur' }
-        >
-          { $.transformer.weekday.shortJP( i ) }
-        </Text.Supplement> )
-      }
-
-      for ( let i = 0; i < weekdayOfFirstDay; i++ ) {
-        let date = $.Time( targetDate ).getFirstDayOfTheMonth().addDate( i - weekdayOfFirstDay )
-        Cells.push( <Buttons.Button.Sub.R
-          color='cloud'
-          border='1.thin'
-          ssSquare={ 3 }
-          opacity='middle'
-          onClick={ ( e ) => {
-            e.preventDefault()
-            e.stopPropagation()
-
-            set_value( {
-              modifiedType: 'update',
-              era: val_value.era,
-              year: date.year,
-              month: date.month,
-              date: date.date
-            } )
-          } }
-        >
-          { date.date }
-        </Buttons.Button.Sub.R> )
-      }
-      for ( let i = 1; i <= lastDayOfTheMonth.date; i++ ) {
-        let date = $.Time( targetDate ).setDate( i )
-        Cells.push( <Buttons.Button.Border.R
-          ssSquare={ 3 }
-          onClick={ () => {
-            set_value( {
-              modifiedType: 'update',
-              era: val_value.era,
-              year: date.year,
-              month: date.month,
-              date: date.date
-            } )
-          } }
-        >
-          { date.date }
-        </Buttons.Button.Border.R> )
-      }
-      for ( let i = 0; i < 7 - lastDayOfTheMonth.weekday - 1; i++ ) {
-        let date = $.Time( targetDate ).addMonth( 1 ).setDate( 1 ).addDate( i )
-        Cells.push( <Buttons.Button.Sub.R
-          color='cloud'
-          border='1.thin'
-          ssSquare={ 3 }
-          opacity='middle'
-          onClick={ ( e ) => {
-            e.preventDefault()
-            e.stopPropagation()
-            set_value( {
-              modifiedType: 'update',
-              era: val_value.era,
-              year: date.year,
-              month: date.month,
-              date: date.date
-            } )
-          } }
-        >
-          { date.date }
-        </Buttons.Button.Sub.R> )
-      }
-
-      return <Grid
-        gridCols={ 7 }
-        gap={ '1/4' }
-      >
-        { Cells }
-      </Grid>
-    }
-  },
-  Variables: {
-    Footer: ( params: {
-      tipsID: string
-      onValueUpdate: any
-      onSubmit?: {
-        (): void
-      }
-    } ) => {
-      return <Flex
-        flexWrap={ false }
-        gap={ 1 }
-        flexChilds='even'
-        freeCSS={ {
-          whiteSpace: 'nowrap'
-        } }
-      >
-        <Buttons.Button.Border.R
-          onClick={ () => {
-            params.onValueUpdate( '' )
-          } }
-          tabIndex={ -1 }
-          flexSizing={ 'none' }
-          padding={ [ '2/3',1 ] }
-        >
-          <FAI.Times /> 削除
-        </Buttons.Button.Border.R>
-        <Buttons.Button.Prime.R
-          flexSizing={ 'auto' }
-          onClick={ () => {
-            params.onSubmit && params.onSubmit()
-            Tooltips.close( params.tipsID )
-          } }
-          tabIndex={ -1 }
-          children={ '決定' }
-          padding={ [ '2/3',1 ] }
-        />
-      </Flex>
-    },
-    ShiftButtons: ( params: {
-      callback( dir: -1 | 1 ): void
-    } ) => {
-      return <Flex
-        flexWrap={ false }
-        gap={ '1/3' }
-      >
-        <Buttons.Button.Clear.R
-          className={ style.LeftButton }
-          tabIndex={ -1 }
-          right={ 0 }
-          { ...Comps.Variables.ShiftButtonStyles }
-          onClick={ () => {
-            params.callback( -1 )
-          } }
-        >
-          <FAI.ChevronLeft />
-        </Buttons.Button.Clear.R>
-        <Buttons.Button.Clear.R
-          className={ style.RightButton }
-          tabIndex={ -1 }
-          left={ 0 }
-          { ...Comps.Variables.ShiftButtonStyles }
-          onClick={ () => {
-            params.callback( 1 )
-          } }
-        >
-          <FAI.ChevronRight />
-        </Buttons.Button.Clear.R>
-      </Flex >
-    },
-    ShiftButtonStyles: {
-      flexCenter: true,
-      padding: 0,
-      unitWidth: 3,
-      unitHeight: 3,
-      borderRadius: 'sphere',
-      position: 'relative'
-    } as amotifyUniStyleParams
-  }
-}