amotify 0.0.59 → 0.0.62

package/src/functions/Input/_.tsx

@@ -2,59 +2,59 @@ import {
   StyleConverter,
   useStore,
   React
-} from '@global';
+} from '@global'
 import {
   Box,
   Flex,
   FAI,
   Span
-} from '@atoms';
+} from '@atoms'
 import {
   Row,
   Text,
   Column
-} from '@mols';
+} from '@mols'
 import {
   Buttons,
   Tooltips
-} from '@fn';
+} from '@fn'
 
 // as FontawesomeCore.IconProp
-import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
-import { faClock } from '@fortawesome/free-regular-svg-icons/faClock';
-import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons/faCalendarAlt';
-import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
-import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
+import { faEye } from '@fortawesome/free-solid-svg-icons/faEye'
+import { faClock } from '@fortawesome/free-regular-svg-icons/faClock'
+import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons/faCalendarAlt'
+import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp'
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
-import { HiddenInput } from './Hidden';
+import { HiddenInput } from './Hidden'
 import {
   TextInput,
   TextValidate
-} from './Text';
-import { TextAreaInput } from './TextArea';
-import { ContenteditableInput } from './Contenteditable';
-import { DigitCharactersInput } from './DigitCharacters';
+} from './Text'
+import { TextAreaInput } from './TextArea'
+import { ContenteditableInput } from './Contenteditable'
+import { DigitCharactersInput } from './DigitCharacters'
 import {
   TimeInput,
   TimeFNs
-} from './Time/_';
-import { SelectInput } from './Select/_';
-import { RichSelectInput } from './RichSelect/_';
-import { ListInput } from './List/_';
-import { ChipsInput } from './Chips/_';
-import { SwitchInput } from './Switch/_';
-import { FileInput } from './File/_';
-import { SliderInput } from './Slider/_';
-import { Segmented } from './Segmented/_';
+} from './Time/_'
+import { SelectInput } from './Select/_'
+import { RichSelectInput } from './RichSelect/_'
+import { ListInput } from './List/_'
+import { ChipsInput } from './Chips/_'
+import { SwitchInput } from './Switch/_'
+import { FileInput } from './File/_'
+import { SliderInput } from './Slider/_'
+import { Segmented } from './Segmented/_'
 
 const UniComponent: React.FC<{
   componentID?: string
   children: React.FC<any>
   params: any
 }> = ( props ) => {
-  let [ val_componentID ] = React.useState( props.componentID || $.uuidGen() );
+  let [ val_componentID ] = React.useState( props.componentID || $.uuidGen() )
 
   props = { ...props }
   props.params = {
@@ -71,23 +71,23 @@ const UniComponent: React.FC<{
 
   let {
     children: Children
-  } = props;
+  } = props
 
-  return <Children { ...props.params } />;
+  return <Children { ...props.params } />
 }
 
 const TextInputs: amotify.fn.Input.Text.Methods = {
   Validate: TextValidate,
   Normal: ( rawParams ) => {
     rawParams = { ...rawParams }
-    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
-    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
+    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3
+    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3
 
     return <UniComponent
       componentID={ rawParams.componentID }
       children={ TextInput }
       params={ DefaultStyles.Boxish( rawParams ) }
-    />;
+    />
   },
   Katakana: ( props ) => ( <TextInputs.Normal
     restrict='katakana'
@@ -115,19 +115,19 @@ const TextInputs: amotify.fn.Input.Text.Methods = {
     { ...props }
   /> ),
   Postal: ( params ) => {
-    let [ val_postalEventID ] = React.useState( $.uuidGen() );
+    let [ val_postalEventID ] = React.useState( $.uuidGen() )
     React.useEffect( () => {
       return () => {
-        useStore.delete( val_postalEventID );
+        useStore.delete( val_postalEventID )
       }
-    },[] );
+    },[] )
 
     return <TextInputs.Normal
       restrict='postal'
       placeholder='郵便番号'
       leftIndicator={ <Input.Comps.LeftIndicator children={ '〒' } /> }
       { ...params }
-    />;
+    />
   },
   Password: ( props ) => {
     return <TextInputs.Normal
@@ -152,7 +152,7 @@ const TextInputs: amotify.fn.Input.Text.Methods = {
                 content: <Tooltips.Comps.Body>
                   パスワードを表示
                 </Tooltips.Comps.Body>
-              } );
+              } )
             } }
             tabIndex={ -1 }
             onClick={ ( event ) => {
@@ -160,9 +160,9 @@ const TextInputs: amotify.fn.Input.Text.Methods = {
                 .parent().parent().parent()
                 .find( 'input' )
                 .callback( ( input ) => {
-                  let Input = input[ 0 ];
-                  Input.type = Input.type === 'password' ? 'text' : 'password';
-                } );
+                  let Input = input[ 0 ]
+                  Input.type = Input.type === 'password' ? 'text' : 'password'
+                } )
             } }
           >
             <FAI
@@ -175,7 +175,7 @@ const TextInputs: amotify.fn.Input.Text.Methods = {
         </Input.Comps.RightIndicator>
       }
       { ...props }
-    />;
+    />
   },
   Money: {
     JPY: ( props ) => ( <TextInputs.DigitNumber
@@ -193,13 +193,13 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
 } = {
   Origin: ( rawParams ) => {
     rawParams = { ...rawParams }
-    let [ val_componentID ] = React.useState( rawParams.componentID || $.uuidGen() );
-    rawParams.componentID = val_componentID;
+    let [ val_componentID ] = React.useState( rawParams.componentID || $.uuidGen() )
+    rawParams.componentID = val_componentID
 
     if ( $.is.nullish( rawParams.rightIndicator ) ) {
       let icon = ( rawParams.restrict || '' ).match( /clock/ )
         ? faClock
-        : faCalendarAlt;
+        : faCalendarAlt
 
       rawParams.rightIndicator = <Input.Comps.RightIndicator
         padding={ 0 }
@@ -217,8 +217,8 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
           tabIndex={ -1 }
           id={ 'Picker-' + rawParams.componentID }
           onClick={ () => {
-            let component = useStore.get( rawParams.componentID! );
-            if ( component ) component.openPicker();
+            let component = useStore.get( rawParams.componentID! )
+            if ( component ) component.openPicker()
           } }
         >
           <FAI icon={ icon } />
@@ -230,7 +230,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
       componentID={ rawParams.componentID! }
       children={ TimeInput }
       params={ DefaultStyles.Boxish( rawParams ) }
-    />;
+    />
   },
   Clock: ( props ) => ( <TimeInputs.Origin restrict='clock' era='clock' { ...props } /> ),
   Date: ( props ) => ( <TimeInputs.Origin restrict='date' { ...props } /> ),
@@ -239,48 +239,48 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
   Year: ( props ) => ( <TimeInputs.Origin restrict='year' { ...props } /> ),
   DateWareki: ( params ) => {
     params = { ...params }
-    let [ val_componentID ] = React.useState( params.componentID || $.uuidGen() );
-    params.componentID = val_componentID;
+    let [ val_componentID ] = React.useState( params.componentID || $.uuidGen() )
+    params.componentID = val_componentID
     let {
       defaultEra = 'wareki',
-    } = params;
+    } = params
 
     let [ val_era,set_era ] = React.useState<amotify.fn.Input.Time.EraTypes>( ( () => {
-      let era: amotify.fn.Input.Time.EraTypes = 'year';
+      let era: amotify.fn.Input.Time.EraTypes = 'year'
       if ( defaultEra == 'wareki' ) {
-        era = 'reiwa';
+        era = 'reiwa'
         if ( params.value ) {
-          let [ year,month,date ] = params.value.split( /\D/ );
+          let [ year,month,date ] = params.value.split( /\D/ )
           if ( year && month && date ) {
-            let Year = Number( year );
+            let Year = Number( year )
             if ( Year >= 2019 ) {
-              Year -= 2019,era = 'reiwa';
+              Year -= 2019,era = 'reiwa'
             } else if ( Year >= 1989 ) {
-              Year -= 1989,era = 'heisei';
+              Year -= 1989,era = 'heisei'
             } else if ( Year >= 1926 ) {
-              Year -= 1926,era = 'shouwa';
+              Year -= 1926,era = 'shouwa'
             } else if ( Year >= 1912 ) {
-              Year -= 1912,era = 'taisho';
+              Year -= 1912,era = 'taisho'
             } else if ( Year >= 1868 ) {
-              Year -= 1868,era = 'meiji';
+              Year -= 1868,era = 'meiji'
             }
-            Year += 1;
+            Year += 1
           }
         }
       }
-      return era;
-    } )() as amotify.fn.Input.Time.EraTypes );
+      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 );
+            set_era( value )
           }
         }
-      } );
-    },[] );
+      } )
+    },[] )
 
     return <TimeInputs.Origin
       restrict='dateWareki'
@@ -305,14 +305,14 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
           { value: 'meiji',label: '明治' }
         ] }
         onUpdateValidValue={ ( { value,eventType } ) => {
-          set_era( value );
-          let component = useStore.get( params.componentID! );
-          component && component.resetEra && component.resetEra( value );
+          set_era( value )
+          let component = useStore.get( params.componentID! )
+          component && component.resetEra && component.resetEra( value )
         } }
       /> }
       { ...params }
       era={ val_era }
-    />;
+    />
   },
   Periods: {
     Date: ( props ) => ( <TimeInputs.Origin restrict='dates' { ...props } /> ),
@@ -331,47 +331,47 @@ const ChipsInputs = ( rawParams: amotify.fn.Input.Chips.PlainParams ) => {
     flexWrap: true,
     ...rawParams
   }
-  let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Chips.PlainParams;
+  let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Chips.PlainParams
 
   return <UniComponent
     componentID={ rawParams.componentID }
     children={ ChipsInput }
     params={ params }
-  />;
-};
-ChipsInputs.fn = ChipsInput.fn;
+  />
+}
+ChipsInputs.fn = ChipsInput.fn
 
 const FileInputs = ( rawParams: amotify.fn.Input.Filer.PlainParams ) => {
   rawParams = { ...rawParams }
-  rawParams.override = 'force';
-  let params = StyleConverter.ToClassName( rawParams );
+  rawParams.override = 'force'
+  let params = StyleConverter.ToClassName( rawParams )
   params.cellClassName = [
     params.cellClassName,
     DefaultStyles.Boxish( {
       ...params.cellStyles,
       tone: params.tone
     } ).className,
-  ].join( ' ' );
+  ].join( ' ' )
 
   return <UniComponent
     componentID={ rawParams.componentID }
     children={ FileInput }
     params={ params }
-  />;
+  />
 }
-FileInputs.fn = FileInput.fn;
+FileInputs.fn = FileInput.fn
 
 export const ListInputs: amotify.fn.Input.List.Methods & {
   Origin: ( props: amotify.fn.Input.List.OriginParams ) => JSX.Element
 } = {
   Origin: ( rawParams ) => {
     rawParams = { ...rawParams }
-    let params = DefaultStyles.ListCell( rawParams );
+    let params = DefaultStyles.ListCell( rawParams )
     return <UniComponent
       componentID={ rawParams.componentID }
       children={ ListInput }
       params={ params }
-    />;
+    />
   },
   Radio: ( params ) => ( <ListInputs.Origin
     iconType='radio'
@@ -393,26 +393,26 @@ export const Input: amotify.fn.Input.Methods = {
       componentID={ rawParams.componentID }
       children={ HiddenInput }
       params={ rawParams }
-    />;
+    />
   },
   Text: TextInputs,
   TextArea: ( rawParams ) => {
     rawParams = { ...rawParams }
-    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
-    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
+    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3
+    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3
 
-    let params = DefaultStyles.Boxish( rawParams );
-    params.rows = params.rows || 5;
+    let params = DefaultStyles.Boxish( rawParams )
+    params.rows = params.rows || 5
     return <UniComponent
       componentID={ rawParams.componentID }
       children={ TextAreaInput }
       params={ params }
-    />;
+    />
   },
   Contenteditable: ( rawParams ) => {
     rawParams = { ...rawParams }
-    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
-    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
+    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3
+    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3
     rawParams = {
       ...rawParams,
       freeCSS: {
@@ -421,13 +421,13 @@ export const Input: amotify.fn.Input.Methods = {
       },
     }
 
-    let params = DefaultStyles.Boxish( rawParams );
-    params.rows = params.rows || 5;
+    let params = DefaultStyles.Boxish( rawParams )
+    params.rows = params.rows || 5
     return <UniComponent
       componentID={ rawParams.componentID }
       children={ ContenteditableInput }
       params={ params }
-    />;
+    />
   },
   DigitCharacters: ( rawParams ) => {
     rawParams = { ...rawParams }
@@ -454,13 +454,13 @@ export const Input: amotify.fn.Input.Methods = {
         },
       }
     }
-    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.DigitCharacters.PlainParams;
+    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.DigitCharacters.PlainParams
 
     return <UniComponent
       componentID={ rawParams.componentID }
       children={ DigitCharactersInput }
       params={ params }
-    />;
+    />
   },
   Time: TimeInputs,
   Select: ( rawParams ) => {
@@ -474,16 +474,16 @@ export const Input: amotify.fn.Input.Methods = {
         <FAI.AngleDown />
       </Input.Comps.RightIcon>
     }
-    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
-    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
+    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3
+    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3
 
-    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Select.PlainParams;
-    delete params.rightIconStyles;
+    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Select.PlainParams
+    delete params.rightIconStyles
     return <UniComponent
       componentID={ rawParams.componentID }
       children={ SelectInput }
       params={ params }
-    />;
+    />
   },
   RichSelect: ( rawParams ) => {
     rawParams = { ...rawParams }
@@ -496,16 +496,16 @@ export const Input: amotify.fn.Input.Methods = {
         <FAI.AngleDown />
       </Input.Comps.RightIcon>
     }
-    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
-    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
+    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3
+    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3
 
-    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Select.PlainParams;
-    delete params.rightIconStyles;
+    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Select.PlainParams
+    delete params.rightIconStyles
     return <UniComponent
       componentID={ rawParams.componentID }
       children={ RichSelectInput }
       params={ params }
-    />;
+    />
   },
   Radio: ListInputs.Radio,
   Checkbox: ListInputs.Checkbox,
@@ -513,7 +513,7 @@ export const Input: amotify.fn.Input.Methods = {
   Search: ( params: amotify.fn.Input.Search.PlainParams ) => {
     return <ChipsInputs
       AddButtonComponent={ ( props ) => {
-        if ( props.selected.length ) return null;
+        if ( props.selected.length ) return null
         return <Box>
           選択してください
         </Box>
@@ -527,7 +527,7 @@ export const Input: amotify.fn.Input.Methods = {
             { props.label }
             { props.defaultRemoveButton }
           </Row.Separate>
-        </Box>;
+        </Box>
       } }
       paddingLeft={ 3 }
       rightIcon={ <Input.Comps.LeftIcon>
@@ -545,12 +545,12 @@ export const Input: amotify.fn.Input.Methods = {
   File: FileInputs,
   Switch: ( rawParams ) => {
     rawParams = { ...rawParams }
-    rawParams.color = rawParams.color || 'theme';
+    rawParams.color = rawParams.color || 'theme'
     return <UniComponent
       componentID={ rawParams.componentID }
       children={ SwitchInput }
       params={ rawParams }
-    />;
+    />
   },
   Slider: ( rawParams ) => {
     rawParams = { ...rawParams }
@@ -558,7 +558,7 @@ export const Input: amotify.fn.Input.Methods = {
       componentID={ rawParams.componentID }
       children={ SliderInput }
       params={ StyleConverter.ToClassName( rawParams ) }
-    />;
+    />
   },
   Checker: ( rawParams ) => {
     rawParams = { ...rawParams }
@@ -577,14 +577,14 @@ export const Input: amotify.fn.Input.Methods = {
         { value: true,label: rawParams.label }
       ] }
       onUpdateValidValue={ ( args ) => {
-        let Value = !!args.value[ 0 ];
+        let Value = !!args.value[ 0 ]
         if ( rawParams.onUpdateValidValue )
           rawParams.onUpdateValidValue( {
             ...args,
             value: Value
-          } );
+          } )
       } }
-    />;
+    />
   },
 
   Segmented: Segmented,
@@ -599,7 +599,7 @@ export const Input: amotify.fn.Input.Methods = {
         borderRadius={ '3.tone.tertiary' }
         children={ '必須' }
         { ...params }
-      />;
+      />
     },
     RequiredShortSign: ( params ) => {
       return <Span
@@ -608,7 +608,7 @@ export const Input: amotify.fn.Input.Methods = {
         borderRadius={ '3.tone.tertiary' }
         children={ '*' }
         { ...params }
-      />;
+      />
     },
     OmitSign: ( params ) => {
       return <Span
@@ -619,39 +619,39 @@ export const Input: amotify.fn.Input.Methods = {
         backgroundColor='6.layer.darkest'
         children={ '省略可' }
         { ...params }
-      />;
+      />
     },
     LeftIndicator: ( params ) => {
       let {
         tone,
         ...others
-      } = params;
+      } = params
 
       return <Box
         { ...DefaultStyles.Indicator( tone! ) }
         borderTopRightRadius={ '2/3' }
         borderBottomRightRadius={ '2/3' }
         { ...others }
-      />;
+      />
     },
     RightIndicator: ( params ) => {
       let {
         tone,
         ...others
-      } = params;
+      } = params
 
       return <Box
         { ...DefaultStyles.Indicator( tone! ) }
         borderTopLeftRadius={ '2/3' }
         borderBottomLeftRadius={ '2/3' }
         { ...others }
-      />;
+      />
     },
     RightIcon: ( params ) => {
       let {
         tone = 'border',
         ...others
-      } = params;
+      } = params
 
       return <Box
         { ...DefaultStyles.IndicatorIcon }
@@ -663,13 +663,13 @@ export const Input: amotify.fn.Input.Methods = {
           pointerEvents: 'none',
           ...others.freeCSS
         } }
-      />;
+      />
     },
     LeftIcon: ( params ) => {
       let {
         tone = 'border',
         ...others
-      } = params;
+      } = params
 
       return <Box
         { ...DefaultStyles.IndicatorIcon }
@@ -681,14 +681,14 @@ export const Input: amotify.fn.Input.Methods = {
           pointerEvents: 'none',
           ...others.freeCSS
         } }
-      />;
+      />
     },
   }
 }
 
 const DefaultStyles = {
   Input: ( type: amotify.fn.Input.BoxToneTypes ) => {
-    if ( type == 'plain' ) return {};
+    if ( type == 'plain' ) return {}
     let Styles: amotifyUniStyleParams = {
       padding: '3/4',
       transition: 'middle',
@@ -718,17 +718,17 @@ const DefaultStyles = {
         backgroundColor: 'cloud'
       }
     }
-    return Styles;
+    return Styles
   },
   ListCell: ( params: amotify.fn.Input.List.OriginParams ) => {
     params = { ...params }
     if ( !params.tone ) {
-      params.tone = 'border';
+      params.tone = 'border'
 
-      if ( amotify.config.tone == 'flat' ) params.tone = 'cloud';
+      if ( amotify.config.tone == 'flat' ) params.tone = 'cloud'
     }
 
-    let { tone } = params;
+    let { tone } = params
 
     if ( tone == 'plain' ) {
 
@@ -803,14 +803,14 @@ const DefaultStyles = {
         }
       }
     }
-    return StyleConverter.ToClassName( params );
+    return StyleConverter.ToClassName( params )
   },
   Boxish: ( params: any ) => {
     params = { ...params }
     if ( !params.tone ) {
-      params.tone = 'border';
-      if ( amotify.config.tone == 'sharp' ) params.tone = 'bottomBorder';
-      else if ( amotify.config.tone == 'flat' ) params.tone = 'cloud';
+      params.tone = 'border'
+      if ( amotify.config.tone == 'sharp' ) params.tone = 'bottomBorder'
+      else if ( amotify.config.tone == 'flat' ) params.tone = 'cloud'
     }
 
     let Styles: amotifyUniStyleParams = {
@@ -833,14 +833,14 @@ const DefaultStyles = {
       ].join( ' ' ),
     }
 
-    return StyleConverter.ToClassName( Styles ) as any;
+    return StyleConverter.ToClassName( Styles ) as any
   },
   Indicator: ( type: amotify.fn.Input.BoxToneTypes ) => {
     if ( !type ) {
-      type = 'border';
-      if ( amotify.config.tone == 'sharp' ) type = 'bottomBorder';
+      type = 'border'
+      if ( amotify.config.tone == 'sharp' ) type = 'bottomBorder'
     }
-    if ( type == 'plain' ) return {};
+    if ( type == 'plain' ) return {}
     let styles: amotifyUniStyleParams = {
       flexSizing: 'none',
       flexCenter: true,
@@ -866,7 +866,7 @@ const DefaultStyles = {
         borderBottom: true
       }
     }
-    return styles;
+    return styles
   },
   IndicatorIcon: {
     position: 'absolute',
@@ -878,4 +878,4 @@ const DefaultStyles = {
     fontSize: '1.mini',
     backgroundColor: 'inherit',
   } as amotifyUniStyleParams
-};
+}