amotify 0.0.44 → 0.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",

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

@@ -31,7 +31,7 @@ let YearOptions: {
   let maxYear = Number( params?.max ?? $.Time().addYear( 10 ).year );
 
   for ( let year = minYear; year <= maxYear; year++ ) {
-    Years.push( {
+    Years.unshift( {
       value: year,
       label: [ year,...$.transformer.wareki( year ).value ].join( ' - ' ),
       // displayLabel: year + '年'
@@ -60,6 +60,13 @@ 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>>
@@ -68,6 +75,7 @@ type SendParams<T> = amotify.fn.Input.Time.PickerParams & {
 export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) => {
   let {
     restrict,
+    era = 'year',
     defaultValue = ''
   } = params;
   params = { ...params }
@@ -123,6 +131,19 @@ export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) =
         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 {}
@@ -132,6 +153,7 @@ export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) =
     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;
@@ -156,8 +178,21 @@ export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) =
         } 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 );
+        params.onValueUpdate( sendValue,sendEra );
       }
     } else {
       mounted.current = true;
@@ -173,7 +208,7 @@ export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) =
   return <Box
     backgroundColor={ '1.layer.base' }
     borderRadius={ '2.tone.secondary' }
-    boxShadow={ 3 }
+    boxShadow={ 2 }
     border
     overflow='hidden'
   >
@@ -187,7 +222,7 @@ export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) =
               : restrict == 'year' ? <Comps.Year._ { ...Params } />
                 : restrict == 'dates' ? ''
                   : restrict == 'months' ? ''
-                    : restrict == 'dateWareki' ? ''
+                    : restrict == 'dateWareki' ? <Comps.DateWareki._ { ...Params } />
                       : <></> }
     />
   </Box>;
@@ -844,7 +879,7 @@ const Comps = {
       >
         <Input.Select
           enableUnSelected={ false }
-          value={ year }
+          value={ year || $.Time().year }
           override='force'
           options={ YearOptions( { min,max } ) }
           onUpdateValidValue={ ( { value } ) => {
@@ -857,14 +892,401 @@ const Comps = {
         <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',
+        isBoldFont: 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 }
@@ -887,6 +1309,7 @@ const Comps = {
         <Buttons.Button.Prime.R
           flexSizing={ 'auto' }
           onClick={ () => {
+            params.onSubmit && params.onSubmit();
             Tooltips.close( params.tipsID );
           } }
           tabIndex={ -1 }

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

@@ -122,12 +122,19 @@ const DataLeveling = ( params: {
         if ( i == 0 && restrict == 'dateWareki' ) {
           let Year = Number( v );
           if ( era != 'year' ) {
-            if ( Year >= 2019 ) Year -= 2019;
-            else if ( Year >= 1989 ) Year -= 1989;
-            else if ( Year >= 1926 ) Year -= 1926;
-            else if ( Year >= 1912 ) Year -= 1912;
-            else if ( Year >= 1868 ) Year -= 1868;
-            Year += 1;
+            if ( Year >= 2019 ) {
+              if ( era == 'reiwa' ) Year -= ( 2019 - 1 );
+              else if ( era == 'heisei' ) Year = 31;
+            } else if ( Year >= 1989 ) {
+              if ( era == 'heisei' ) Year -= ( 1989 - 1 );
+              else if ( era == 'shouwa' ) Year = 64;
+            } else if ( Year >= 1926 ) {
+              if ( era == 'shouwa' ) Year -= ( 1926 - 1 );
+              else if ( era == 'taisho' ) Year = 15;
+            } else if ( Year >= 1912 ) {
+              if ( era == 'taisho' ) Year -= ( 1912 - 1 );
+              else if ( era == 'meiji' ) Year = 45;
+            } else if ( Year >= 1868 ) Year -= ( 1868 - 1 );
           }
           v = Year.zeroEmbed( 4 );
         }
@@ -372,6 +379,9 @@ export const TimeInput: React.FC<amotify.fn.Input.Time.OriginParams> = ( params
           era: val_era
         } )
       } );
+
+      let ParentComponent = useStore.get( 'refreshEra_' + val_status.componentID );
+      ParentComponent && ParentComponent.refreshEra( val_era );
     } else {
       mounted.current = true;
     }
@@ -389,17 +399,19 @@ export const TimeInput: React.FC<amotify.fn.Input.Time.OriginParams> = ( params
           restrict,
           min,max,
           defaultValue: val_status.dataValue,
-          onValueUpdate: ( value ) => {
+          era: val_era,
+          onValueUpdate: ( value,era ) => {
             set_status( {
               ...val_status,
               ...DataLeveling( {
                 restrict,
-                value: value,
-                era: val_era!
+                value,
+                era
               } ),
               eventType: 'update',
               eventID: $.uuidGen()
             } );
+            set_era( era );
           }
         } );
       },
@@ -702,9 +714,10 @@ export const TimeFNs: amotify.fn.Input.Time.FNTypes = {
   picker: {
     launch: ( params ) => {
       let tipsID = params.tipsID || $.uuidGen();
+
       Tooltips.open( {
         gravityPoint: params.gravityPoint || 24,
-        padding: [ 1,0 ],
+        padding: '1/2',
         tipsID,
         ...params,
         close_option: {
@@ -716,10 +729,11 @@ export const TimeFNs: amotify.fn.Input.Time.FNTypes = {
           restrict={ params.restrict }
           min={ params.min }
           max={ params.max }
+          era={ params.era }
           defaultValue={ params.defaultValue }
           tipsID={ tipsID }
-          onValueUpdate={ ( value ) => {
-            params.onValueUpdate( value );
+          onValueUpdate={ ( value,era ) => {
+            params.onValueUpdate( value,era );
           } }
         />
       } )

package/src/functions/Input/_.tsx

@@ -236,36 +236,50 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
       defaultEra = 'wareki',
     } = params;
 
-    let era = 'year' as amotify.fn.Input.Time.EraTypes;
-
-    if ( defaultEra == 'wareki' ) {
-      era = 'reiwa';
-      if ( params.value ) {
-        let [ year,month,date ] = params.value.split( /\D/ );
-        if ( year && month && date ) {
-          let Year = Number( year );
-          if ( Year >= 2019 ) {
-            Year -= 2019,era = 'reiwa';
-          } else if ( Year >= 1989 ) {
-            Year -= 1989,era = 'heisei';
-          } else if ( Year >= 1926 ) {
-            Year -= 1926,era = 'shouwa';
-          } else if ( Year >= 1912 ) {
-            Year -= 1912,era = 'taisho';
-          } else if ( Year >= 1868 ) {
-            Year -= 1868,era = 'meiji';
+    let [ val_era,set_era ] = React.useState<amotify.fn.Input.Time.EraTypes>( ( () => {
+      let era: amotify.fn.Input.Time.EraTypes = 'year';
+      if ( defaultEra == 'wareki' ) {
+        era = 'reiwa';
+        if ( params.value ) {
+          let [ year,month,date ] = params.value.split( /\D/ );
+          if ( year && month && date ) {
+            let Year = Number( year );
+            if ( Year >= 2019 ) {
+              Year -= 2019,era = 'reiwa';
+            } else if ( Year >= 1989 ) {
+              Year -= 1989,era = 'heisei';
+            } else if ( Year >= 1926 ) {
+              Year -= 1926,era = 'shouwa';
+            } else if ( Year >= 1912 ) {
+              Year -= 1912,era = 'taisho';
+            } else if ( Year >= 1868 ) {
+              Year -= 1868,era = 'meiji';
+            }
+            Year += 1;
           }
-          Year += 1;
         }
       }
-    }
+      return era;
+    } )() as amotify.fn.Input.Time.EraTypes );
+
+    React.useEffect( () => {
+      useStore.set( {
+        key: 'refreshEra_' + val_componentID,
+        value: {
+          refreshEra: ( value: amotify.fn.Input.Time.EraTypes ) => {
+            set_era( value );
+          }
+        }
+      } );
+    },[] );
 
     return <TimeInputs.Origin
       restrict='dateWareki'
       leftIndicator={ <Input.Select
         enableUnSelected={ false }
-        value={ era }
+        value={ val_era }
         tone={ params.tone }
+        override='force'
         flexCenter
         borderTopRightRadius={ '2/3' }
         borderBottomRightRadius={ '2/3' }
@@ -282,14 +296,13 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
           { value: 'meiji',label: '明治' }
         ] }
         onUpdateValidValue={ ( { value,eventType } ) => {
+          set_era( value );
           let component = useStore.get( params.componentID! );
-
-          if ( component && component.resetEra ) component.resetEra( value );
+          component && component.resetEra && component.resetEra( value );
         } }
-      // rightIcon={ false }
       /> }
       { ...params }
-      era={ era }
+      era={ val_era }
     />;
   },
   Periods: {