amotify 0.0.13 → 0.0.14

package/src/functions/Input/DigitCharacters.tsx

@@ -77,7 +77,7 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
     className = '',
     digits,
     numericOnly = false,
-    enable_form_submit,
+    enableFormSubmit,
 
     checkValidationAtFirst,
     onChange,onKeyDown,
@@ -87,7 +87,7 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
     value = '',
 
     override,
-    statusID,
+
     componentID,
     listStyles,
     ...others
@@ -127,27 +127,24 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
 
     let Styles: React.CSSProperties = {}
 
+    let ClassName = className;
+
     if ( params.combineInput ) {
-      if ( index == 0 ) {
-        Styles = {
-          borderTopLeftRadius: 'inherit',
-          borderBottomLeftRadius: 'inherit'
-        }
-      } else if ( index == digits - 1 ) {
-        Styles = {
-          borderTopRightRadius: 'inherit',
-          borderBottomRightRadius: 'inherit'
-        }
-      }
+      ClassName = [
+        className,
+        style.DigitCharacterCell,
+        style.Combined
+      ].join( ' ' );
     }
 
     Digits.push( <input
+      key={ index }
       type={ 'text' }
       inputMode={ params.inputMode || 'text' }
       value={ Character }
       data-form-name={ form }
       id={ 'Digit-' + index + '-' + val_status.componentID }
-      className={ className }
+      className={ ClassName }
       style={ {
         ...params.style,
         ...Styles
@@ -177,7 +174,7 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
           let dir = Number( key == 'ArrowRight' ) * 2 - 1;
           nextFocusIndex = index + dir;
         } else {
-          if ( enable_form_submit ) SubmitForm( event );
+          if ( enableFormSubmit ) SubmitForm( event );
 
           ( () => {
             let regExp = code.match( /^(Key(.)|Digit(\d)|Numpad(\d))/ );
@@ -206,6 +203,7 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
           $( '#Digit-' + nextFocusIndex + '-' + val_status.componentID ).focus();
         }
       } }
+      onChange={ () => { } }
     /> );
   }
 

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

@@ -5,7 +5,7 @@ import {
 import {
   Box,
   Flex,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -26,6 +26,8 @@ import {
 } from '../core';
 import style from './style.module.scss';
 
+import { faCloudArrowUp } from '@fortawesome/pro-solid-svg-icons/faCloudArrowUp';
+
 function DefaultValidation( props: {
   value: any
   params: any
@@ -64,6 +66,9 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
 
     cellStyles,cellClassName,
 
+    componentID,status_id,
+    enableFormSubmit,
+
     ...others
   } = params;
 
@@ -250,8 +255,8 @@ const FileList: React.FC<{
             isRounded
             className={ style.AddIcon }
           >
-            <FAIcon
-              d={ 'cloud-arrow-up' }
+            <FAI
+              icon={ faCloudArrowUp }
               className={ style.Icon }
               fontColor={ 'theme' }
               backgroundColor={ 'tcOpLow' }
@@ -316,70 +321,31 @@ const FileCell: React.FC<{
     .replace( /\s/,'' )
     .replace( /(.*)\.(.*)$/,'$1 $2' ).split( ' ' );
 
-  let FileType = {
-    name: '不明',
-    icon: 'fal file'
-  }
+  let FileName = 'ファイル';
   if ( type.match( /image/ ) ) {
-    FileType = {
-      name: type.replace( /image\//,'' ),
-      icon: 'image'
-    }
+    FileName = type.replace( /image\//,'' );
   } else if ( type.match( /pdf/ ) ) {
-    FileType = {
-      name: 'PDF',
-      icon: 'file-pdf'
-    }
+    FileName = 'PDF';
   } else if ( type.match( /csv/ ) ) {
-    FileType = {
-      name: 'CSV',
-      icon: 'file-csv'
-    }
+    FileName = 'CSV';
   } else if ( type.match( /spreadsheet/ ) ) {
-    FileType = {
-      name: 'SpreadSheet',
-      icon: 'file-excel'
-    }
+    FileName = 'SpreadSheet';
   } else if ( type.match( /presentation/ ) ) {
-    FileType = {
-      name: 'PowerPoint',
-      icon: 'file-powerpoint'
-    }
+    FileName = 'PowerPoint';
   } else if ( type.match( /word/ ) ) {
-    FileType = {
-      name: 'Word',
-      icon: 'file-word'
-    }
+    FileName = 'Word';
   } else if ( type.match( /zip/ ) ) {
-    FileType = {
-      name: 'Zip',
-      icon: 'file-zipper'
-    }
+    FileName = 'Zip';
   } else if ( type.match( /powerpoint/ ) ) {
-    FileType = {
-      name: 'PowerPoint',
-      icon: 'file-powerpoint'
-    }
+    FileName = 'PowerPoint';
   } else if ( type.match( /html/ ) ) {
-    FileType = {
-      name: 'HTML',
-      icon: 'fab html5'
-    }
+    FileName = 'HTML';
   } else if ( type.match( /js/ ) ) {
-    FileType = {
-      name: 'JS',
-      icon: 'fab js-square'
-    }
+    FileName = 'JavaScript';
   } else if ( type.match( /css/ ) ) {
-    FileType = {
-      name: 'CSS',
-      icon: 'fab css3-alt'
-    }
+    FileName = 'CSS';
   } else if ( type.match( /text\/plain/ ) ) {
-    FileType = {
-      name: 'テキスト',
-      icon: 'file-lines'
-    }
+    FileName = 'テキスト';
   }
 
   React.useEffect( () => {
@@ -397,10 +363,9 @@ const FileCell: React.FC<{
       gap={ 1 }
       className={ className }
     >
-      <FAIcon
+      <FAI.File
         fontSize={ '4.thirdTitle' }
-        fontColor={ 'theme' }
-        d={ FileType.icon }
+        fontColor={ '4.thin' }
       />
       <Box flexSizing={ 0 }>
         <Box>
@@ -413,13 +378,18 @@ const FileCell: React.FC<{
               { fileName }
               { fileNameEdit ?
                 <Buttons.Button.Clear.R
+                  ssSphere={ 2.5 }
+                  flexSizing={ 'none' }
+                  color='cloud'
+                  fontColor='4.thin'
                   padding={ '1/3' }
                   ssEffectsOnActive={ 'expand' }
-                  children={ <FAIcon d='pen' /> }
                   onClick={ () => {
                     set_edit( true );
                   } }
-                /> : null
+                >
+                  <FAI.Pen />
+                </Buttons.Button.Clear.R> : null
               }
             </> : <>
               <Column
@@ -440,7 +410,7 @@ const FileCell: React.FC<{
                     required
                     id={ FileID }
                     form={ 'form-' + FileID }
-                    enable_form_submit
+                    enableFormSubmit
                     value={ name }
                     onKeyDown={ ( event ) => {
                       let { key } = event;
@@ -509,11 +479,13 @@ const FileCell: React.FC<{
             fontSize={ '1.mini' }
             fontColor={ '4.thin' }
             flexSizing={ 0 }
-            children={ FileType.name + 'ファイル / ' + Size + 'B' }
+            children={ FileName + 'ファイル / ' + Size + 'B' }
           />
         </> : null }
       </Box>
       <Buttons.Button.Sub.R
+        color='cloud'
+        fontColor='4.thin'
         ssSphere={ 3 }
         onClick={ () => {
           let nextFiles = [ ...val_status.dataValue ];
@@ -529,7 +501,7 @@ const FileCell: React.FC<{
           } )
         } }
       >
-        <FAIcon.Times />
+        <FAI.Times />
       </Buttons.Button.Sub.R>
     </Flex>
   );

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/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,15 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
             boxShadow={ 2 }
             className={ style.Dot }
           >
-            { icon ? <FAIcon
+            { icon ? <Box
               transition='middle'
               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>