amotify 0.0.13 → 0.0.15

package/src/functions/Input/Hidden.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 export const HiddenInput: React.FC<amotify.fn.Input.Hidden.PlainParams> = ( params ) => {
   let {
     componentID = '',
+    enableFormSubmit,
+ 
     form,
     value = '',
     ...others
-  } = params;
+  } = params;  
 
   return <input
     value={ JSON.stringify( value ) }

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

@@ -4,7 +4,7 @@ import {
 import {
   Box,
   Flex,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Input,
@@ -84,12 +84,12 @@ const Core: React.FC<amotify.fn.Input.List.OriginParams> = ( params ) => {
     componentID = '',
     form,
     override,
-    statusID,
+
     freeCSS,
     icon,
     iconType,
 
-    enable_form_submit,
+    enableFormSubmit,
     defaultActiveStyling,
     checkValidationAtFirst,
     onValidate,
@@ -180,7 +180,7 @@ const CellList: React.FC<{
     cellCheckedStyles: DefaultCellCheckedStyles,
     cellCheckedClassName: DefaultCellCheckedClassName = '',
 
-    enable_form_submit,
+    enableFormSubmit,
     defaultActiveStyling = true
   } = params;
   let {
@@ -240,6 +240,7 @@ const CellList: React.FC<{
 
     return [
       <input
+        key={ 'List-' + JSON.stringify( value ) }
         type={ type == 'radio' ? 'radio' : 'checkbox' }
         className={ [
           style.Input,
@@ -247,7 +248,6 @@ const CellList: React.FC<{
         ].join( ' ' ) }
         name={ 'RadioCheckbox-' + name }
         data-list-index={ componentID + '-' + index }
-        key={ CellID }
         id={ CellID }
         value={ String( value ) }
         data-form-name={ form }
@@ -310,12 +310,12 @@ const CellList: React.FC<{
             }
           }
 
-          if ( enable_form_submit ) SubmitForm( event );
+          if ( enableFormSubmit ) SubmitForm( event );
         } }
         tabIndex={ tabIndex }
       />,
       <Buttons.Label.Plain
-        key={ 'Button-' + CellID }
+        key={ 'ListTrigger-' + JSON.stringify( value ) }
         htmlFor={ CellID }
         className={ ClassName.join( ' ' ) }
         tabIndex={ -1 }
@@ -371,7 +371,7 @@ const Comps = {
     position='relative'
     flexCenter
   >
-    <FAIcon.Check
+    <FAI.Check
       className={ style.I }
       transition='middle'
       opacity='trans'

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

@@ -84,7 +84,7 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
     form,
     className,
 
-    enable_form_submit,
+    enableFormSubmit,
     enableUnSelected,
 
     checkValidationAtFirst,
@@ -96,7 +96,8 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
     options,
     placeholder,
 
-    leftIndicator,rightIndicator,rightIcon,
+    leftIndicator,rightIndicator,leftIcon,rightIcon,
+    componentID,status_id,
 
     ...others
   } = params;
@@ -158,7 +159,7 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
         value={ val_status.dataValue }
         onKeyDown={ ( event ) => {
           if ( onKeyDown ) onKeyDown( event );
-          if ( enable_form_submit ) SubmitForm( event );
+          if ( enableFormSubmit ) SubmitForm( event );
         } }
         onChange={ ( event ) => {
           let {
@@ -199,19 +200,19 @@ const Options: React.FC<{ params: amotify.fn.Input.Select.PlainParams }> = ( pro
       label,
     } = option;
     let Value = String( value );
-    return ( <option
+    return <option
       value={ Value }
       key={ Value }
-      selected={ Value == SelectedValue }
+      // selected={ Value == SelectedValue }
       children={ label }
-    /> );
+    />;
   } );
 
   if ( enableUnSelected ) {
     Options.unshift( <option
       key={ 0 }
       value={ JSON.stringify( null ) }
-      selected={ SelectedValue == 'null' }
+      // selected={ SelectedValue == 'null' }
       children={ placeholder }
     /> );
   }

package/src/functions/Input/Select/style.module.scss

@@ -1,5 +1,6 @@
 @use '@props' as *;
 .Select {
+  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;

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

@@ -78,7 +78,7 @@ export const SliderInput: React.FC<amotify.fn.Input.Slider.PlainParams> = ( para
     } = {},
     min,max,step,
 
-    enable_form_submit,
+    enableFormSubmit,
 
     checkValidationAtFirst,
     onChange,onKeyDown,
@@ -160,7 +160,7 @@ export const SliderInput: React.FC<amotify.fn.Input.Slider.PlainParams> = ( para
         set_status={ set_status }
         DotData={ DotData }
         form={ form }
-        enable_form_submit={ enable_form_submit! }
+        enableFormSubmit={ enableFormSubmit! }
       />
       { showLegends ? <Comps.IndicatorLabels
         componentID={ val_status.componentID }
@@ -277,14 +277,14 @@ const Comps = {
     set_status: React.Dispatch<React.SetStateAction<amotify.fn.Input.Status.Slider>>
     DotData: DataLevelingResult
     form: string
-    enable_form_submit: boolean
+    enableFormSubmit: boolean
   } ) => {
     let {
       val_status,
       set_status,
       DotData,
       form,
-      enable_form_submit
+      enableFormSubmit
     } = props;
     let {
       componentID
@@ -375,7 +375,7 @@ const Comps = {
               DotData
             } );
 
-            if ( enable_form_submit ) SubmitForm( event );
+            if ( enableFormSubmit ) SubmitForm( event );
           } }
         />
       </Box>

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

@@ -3,7 +3,7 @@ import {
 } from '@global';
 import {
   Box,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Row
@@ -45,7 +45,7 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
     form,
     id,
 
-    enable_form_submit,
+    enableFormSubmit,
 
     checkValidationAtFirst,
     onChange,onKeyDown,
@@ -85,7 +85,7 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
     },
   } );
 
-  return ( <BoxWrapper
+  return <BoxWrapper
     val_status={ val_status }
     set_status={ set_status }
     val_validate={ val_validate }
@@ -103,7 +103,7 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
       id={ id }
       onKeyDown={ ( event ) => {
         if ( onKeyDown ) onKeyDown( event );
-        if ( enable_form_submit ) SubmitForm( event );
+        if ( enableFormSubmit ) SubmitForm( event );
       } }
       onChange={ ( event ) => {
         if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
@@ -160,14 +160,17 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
             boxShadow={ 2 }
             className={ style.Dot }
           >
-            { icon ? <FAIcon
+            { icon ? <Box
               transition='middle'
+              ssSquare={ 2 }
+              flexCenter
               fontColor={ appearance == 'applely' && isChecked ? color : 'white' }
-              d={ icon }
-            /> : null }
+            >
+              { icon }
+            </Box> : null }
           </Box>
         </Row.Center>
       </Box>
     </Buttons.Label.Plain>
-  </BoxWrapper> );
+  </BoxWrapper>;
 }

package/src/functions/Input/Text.tsx

@@ -256,7 +256,7 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
     autoComplete = 'off',
     autoCapitalize = 'off',
 
-    enable_form_submit,
+    enableFormSubmit,
     clearButton = false,
 
     checkValidationAtFirst,
@@ -265,11 +265,10 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
     onUpdateValue,
     onUpdateValidValue,
     value = '',
-    leftIndicator,rightIndicator,rightIcon,
+    leftIndicator,rightIndicator,leftIcon,rightIcon,
     maxLength,
     min,
     max,
-
     ...others
   } = params;
 
@@ -396,7 +395,7 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
           }
 
           if ( onKeyDown ) onKeyDown( event );
-          if ( enable_form_submit ) SubmitForm( event );
+          if ( enableFormSubmit ) SubmitForm( event );
         } }
         onChange={ ( event ) => {
           let {

package/src/functions/Input/TextArea.tsx

@@ -35,7 +35,7 @@ export const TextAreaInput: React.FC<amotify.fn.Input.TextArea.PlainParams> = (
     required,
     form,
 
-    enable_form_submit,
+    enableFormSubmit,
 
     checkValidationAtFirst,
     onChange,onKeyDown,
@@ -43,7 +43,7 @@ export const TextAreaInput: React.FC<amotify.fn.Input.TextArea.PlainParams> = (
     onUpdateValue,
     onUpdateValidValue,
     value = '',
-    leftIndicator,rightIndicator,
+    leftIndicator,rightIndicator,leftIcon,rightIcon,
 
     ...others
   } = params;
@@ -87,7 +87,7 @@ export const TextAreaInput: React.FC<amotify.fn.Input.TextArea.PlainParams> = (
         value={ val_status.dataValue }
         onKeyDown={ ( event ) => {
           if ( onKeyDown ) onKeyDown( event );
-          if ( enable_form_submit ) SubmitForm( event );
+          if ( enableFormSubmit ) SubmitForm( event );
         } }
         onChange={ ( event ) => {
           let {

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

@@ -5,7 +5,7 @@ import {
   Grid,
   Box,
   Flex,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -213,7 +213,7 @@ const Comps = {
 
       let { hour,minutes } = val_value;
 
-      return ( <Column
+      return <Column
         padding={ 1 }
       >
         <Flex
@@ -381,8 +381,7 @@ const Comps = {
           tipsID={ tipsID! }
           onValueUpdate={ onValueUpdate }
         />
-      </Column>
-      )
+      </Column>;
     },
     Hours: ( params: {
       min?: string
@@ -657,6 +656,7 @@ const Comps = {
         thisMonthDates.push( <Buttons.Button.Clear.R
           className={ [
             style.CalendarDay,
+            style[ 'isToday_' + isToday ]
           ].join( ' ' ) }
           { ...commonStyle }
           onClick={ () => {
@@ -671,10 +671,6 @@ const Comps = {
           padding={ 0 }
           flexCenter
           borderRadius={ 'sphere' }
-          { ...isToday ? {
-            backgroundColor: 'warn',
-            fontColor: 'white'
-          } : null }
           children={ i }
         /> );
       }
@@ -759,7 +755,6 @@ const Comps = {
         { 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( {
@@ -779,20 +774,18 @@ const Comps = {
       min?: string
       max?: string
       year: number
-      current: [ number,number ]
       callback: any
     } ) => {
       let {
         year,
-        current,
         callback
       } = params;
-      let [ currentYear,currentMonth ] = current;
+      let Today = $.Time();
 
       let Months = [];
 
       for ( let index = 1; index <= 12; index++ ) {
-        let Checked = year == currentYear && index == currentMonth;
+        let isThisMonth = year == Today.year && index == Today.month;
         let isLocked = false;
 
         {
@@ -809,7 +802,7 @@ const Comps = {
 
         let ClassName = [
           style.Cell,
-          Checked ? style.Checked : ''
+          isThisMonth ? style.isThisMonth : ''
         ].join( ' ' );
 
         Months.push( <Buttons.Button.Clear.R
@@ -889,7 +882,7 @@ const Comps = {
           flexSizing={ 'none' }
           padding={ [ '2/3',1 ] }
         >
-          <FAIcon.Times /> 削除
+          <FAI.Times /> 削除
         </Buttons.Button.Border.R>
         <Buttons.Button.Prime.R
           flexSizing={ 'auto' }
@@ -918,7 +911,7 @@ const Comps = {
             params.callback( -1 );
           } }
         >
-          <FAIcon.ChevronLeft />
+          <FAI.ChevronLeft />
         </Buttons.Button.Clear.R>
         <Buttons.Button.Clear.R
           className={ style.RightButton }
@@ -929,7 +922,7 @@ const Comps = {
             params.callback( 1 );
           } }
         >
-          <FAIcon.ChevronRight />
+          <FAI.ChevronRight />
         </Buttons.Button.Clear.R>
       </Flex >;
     },

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

@@ -306,7 +306,7 @@ export const TimeInput: React.FC<amotify.fn.Input.Time.OriginParams> = ( params
     min,max,
     className,
 
-    enable_form_submit,
+    enableFormSubmit,
 
     checkValidationAtFirst,
     onKeyDown,
@@ -481,7 +481,7 @@ export const TimeInput: React.FC<amotify.fn.Input.Time.OriginParams> = ( params
             } );
 
             if ( onKeyDown ) onKeyDown( event );
-            if ( enable_form_submit ) SubmitForm( event );
+            if ( enableFormSubmit ) SubmitForm( event );
           } }
           onKeyUp={ ( event ) => {
             if ( event.key == 'Tab' ) set_focus( {
@@ -506,6 +506,7 @@ export const TimeInput: React.FC<amotify.fn.Input.Time.OriginParams> = ( params
             } );
             event.preventDefault();
           } }
+          onChange={ () => { } }
           { ...others }
         /> }
     </BoxWrapper>

package/src/functions/Input/Time/style.module.scss

@@ -60,13 +60,20 @@
   .RightButton:active {
     left: $unit1_3 !important;
   }
-  .Cell.Checked {
+  .Cell.isThisMonth {
     color: #fff !important;
-    background-color: $color-theme !important;
+    background-color: $color-warning !important;
     box-shadow: $shadow2;
   }
 }
 .miniYearInput {
   width: 4em !important;
   text-align: center;
+}
+.CalendarDay {
+  &.isToday_true {
+    color: white !important;
+    background-color: $color-warning !important;
+    font-weight: bold;
+  }
 }