amotify 0.0.4 → 0.0.5

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

@@ -1,950 +0,0 @@
-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
-  }
-}