amotify 0.0.2 → 0.0.4

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

@@ -0,0 +1,950 @@
+import {
+  React
+} from '@global';
+import {
+  Grid,
+  Box,
+  Flex,
+  FAIcon
+} from '@atoms';
+import {
+  Column,
+  Row,
+  Text
+} from '@mols';
+import {
+  Buttons,
+  Input,
+  Tooltips
+} from '@functions';
+const {
+  useEffect,
+  useRef,
+  useState
+} = React;
+
+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.push( {
+      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 SendParams<T> = amotify.fn.Input.Time.PickerParams & {
+  val_value: T
+  set_value: React.Dispatch<React.SetStateAction<T>>
+}
+
+export const Picker: FNC<amotify.fn.Input.Time.PickerParams> = ( params ) => {
+  let {
+    restrict,
+    defaultValue = ''
+  } = params;
+
+  params.tipsID = params.tipsID || $.uuidGen();
+
+  const mounted = useRef( false );
+
+  let [ val_value,set_value ] = 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;
+    }
+
+    return {}
+  } )() as any );
+
+  useEffect( () => {
+    if ( mounted.current ) {
+      if ( val_value.modifiedType == 'update' ) {
+        let sendValue = '';
+
+        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 );
+        }
+        params.onValueUpdate( sendValue );
+      }
+    } else {
+      mounted.current = true;
+    }
+  },[ val_value ] );
+
+  let Params = {
+    ...params,
+    val_value,
+    set_value
+  }
+
+  return ( <Box
+    backgroundColor={ '1.layer.base' }
+    borderRadius={ '2.tone.secondary' }
+    boxShadow={ 3 }
+    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' ? ''
+                      : <></> }
+    />
+  </Box> );
+}
+
+const Comps = {
+  Clock: {
+    _: ( params: SendParams<ClockValueTypes> ) => {
+      let {
+        min,max,
+        onValueUpdate,
+        tipsID,
+        val_value,
+        set_value
+      } = params;
+
+      let [ val_ampm,set_ampm ] = useState( val_value.hour > 12 ? 2 : 1 );
+      let [ val_unit,set_unit ] = useState( Number( localStorage.getItem( 'timePickerUnit' ) || 5 ) );
+
+      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'
+              isBoldFont
+            >
+              { val_value.hour.zeroEmbed( 2 ) } : { val_value.minutes.zeroEmbed( 2 ) }
+            </Box>
+            <Flex
+              flexWrap={ false }
+              borderRadius={ '1.tone.primary' }
+              boxShadow={ -1 }
+              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,
+          ].join( ' ' ) }
+          { ...commonStyle }
+          onClick={ () => {
+            callback( [ year,month,idx ] );
+          } }
+          tabIndex={ -1 }
+          key={ idx }
+          isLocked={ isLocked }
+
+          fontColor={ '1.clear' }
+          ssEffectsOnActive={ 'shrink' }
+          padding={ 0 }
+          flexCenter
+          borderRadius={ 'sphere' }
+          { ...isToday ? {
+            backgroundColor: 'warn',
+            fontColor: 'white'
+          } : null }
+          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,
+          current: [ val_value.year,val_value.month ],
+          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
+      current: [ number,number ]
+      callback: any
+    } ) => {
+      let {
+        year,
+        current,
+        callback
+      } = params;
+      let [ currentYear,currentMonth ] = current;
+
+      let Months = [];
+
+      for ( let index = 1; index <= 12; index++ ) {
+        let Checked = year == currentYear && index == currentMonth;
+        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,
+          Checked ? style.Checked : ''
+        ].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 }
+          override='force'
+          options={ YearOptions( { min,max } ) }
+          onUpdateValidValue={ ( { value } ) => {
+            set_value( {
+              modifiedType: 'update',
+              year: Number( value )
+            } );
+          } }
+        />
+        <Comps.Variables.Footer
+          tipsID={ tipsID! }
+          onValueUpdate={ onValueUpdate }
+        />
+      </Column> );
+    }
+  },
+  Variables: {
+    Footer: ( params: {
+      tipsID: string
+      onValueUpdate: any
+    } ) => {
+      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 ] }
+        >
+          <FAIcon.Times /> 削除
+        </Buttons.Button.Border.R>
+        <Buttons.Button.Prime.R
+          flexSizing={ 'auto' }
+          onClick={ () => {
+            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 );
+          } }
+        >
+          <FAIcon.ChevronLeft />
+        </Buttons.Button.Clear.R>
+        <Buttons.Button.Clear.R
+          className={ style.RightButton }
+          tabIndex={ -1 }
+          left={ 0 }
+          { ...Comps.Variables.ShiftButtonStyles }
+          onClick={ () => {
+            params.callback( 1 );
+          } }
+        >
+          <FAIcon.ChevronRight />
+        </Buttons.Button.Clear.R>
+      </Flex >;
+    },
+    ShiftButtonStyles: {
+      flexCenter: true,
+      padding: 0,
+      unitWidth: 3,
+      unitHeight: 3,
+      borderRadius: 'sphere',
+      position: 'relative'
+    } as amotifyUniStyleParams
+  }
+}