amotify 0.0.17 → 0.0.19

package/src/functions/Input/Text.tsx

@@ -316,116 +316,114 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
     setSelection( { id: params.id,restrict,val_status } );
   },[ val_status ] );
 
-  return (
-    <BoxWrapper
-      val_status={ val_status }
-      set_status={ set_status }
-      val_validate={ val_validate }
-      params={ params }
-    >
-      <input
-        type={ inputType }
-        inputMode={ inputMode }
-        data-form={ form }
-        data-input-type={ 'text' }
-        data-validation={ val_validate.ok }
-        data-value={ val_status.dataValue }
-        data-component-id={ val_status.componentID }
-        value={ val_status.formatValue }
-        autoComplete={ autoComplete }
-        autoCapitalize={ autoCapitalize }
-        onKeyDown={ ( event ) => {
-          let { key,target } = event;
-          {
-            let input = target as HTMLInputElement;
-            let { selectionStart,selectionEnd } = input;
-            let caretFrom = Number( selectionStart );
-            let caretTo = Number( selectionEnd )
-
-            let _v = val_status.formatValue[ Number( caretFrom ) ];
-            let v_ = val_status.formatValue[ Number( caretFrom ) - 1 ];
-            if ( key == 'Delete' && (
-              ( restrict == 'creditCard' && _v == ' ' ) ||
-              ( restrict == 'postal' && _v == '-' ) ||
-              ( restrict == 'digitNumber' && _v == ',' )
-            ) ) {
-              input.setSelectionRange( caretFrom + 1,caretTo + 1 );
-              event.preventDefault();
-            }
-            if ( key == 'Backspace' && (
-              ( restrict == 'creditCard' && v_ == ' ' ) ||
-              ( restrict == 'postal' && v_ == '-' ) ||
-              ( restrict == 'digitNumber' && v_ == ',' )
-            ) ) {
-              input.setSelectionRange( caretFrom - 1,caretTo - 1 );
-              event.preventDefault();
-            }
+  return <BoxWrapper
+    val_status={ val_status }
+    set_status={ set_status }
+    val_validate={ val_validate }
+    params={ params }
+  >
+    <input
+      type={ inputType }
+      inputMode={ inputMode }
+      data-form={ form }
+      data-input-type={ 'text' }
+      data-validation={ val_validate.ok }
+      data-value={ val_status.dataValue }
+      data-component-id={ val_status.componentID }
+      value={ val_status.formatValue }
+      autoComplete={ autoComplete }
+      autoCapitalize={ autoCapitalize }
+      onKeyDown={ ( event ) => {
+        let { key,target } = event;
+        {
+          let input = target as HTMLInputElement;
+          let { selectionStart,selectionEnd } = input;
+          let caretFrom = Number( selectionStart );
+          let caretTo = Number( selectionEnd )
+
+          let _v = val_status.formatValue[ Number( caretFrom ) ];
+          let v_ = val_status.formatValue[ Number( caretFrom ) - 1 ];
+          if ( key == 'Delete' && (
+            ( restrict == 'creditCard' && _v == ' ' ) ||
+            ( restrict == 'postal' && _v == '-' ) ||
+            ( restrict == 'digitNumber' && _v == ',' )
+          ) ) {
+            input.setSelectionRange( caretFrom + 1,caretTo + 1 );
+            event.preventDefault();
           }
+          if ( key == 'Backspace' && (
+            ( restrict == 'creditCard' && v_ == ' ' ) ||
+            ( restrict == 'postal' && v_ == '-' ) ||
+            ( restrict == 'digitNumber' && v_ == ',' )
+          ) ) {
+            input.setSelectionRange( caretFrom - 1,caretTo - 1 );
+            event.preventDefault();
+          }
+        }
 
-          if ( [ 'number','digitNumber','creditCard' ].includes( restrict ) ) {
-            if ( key == 'Clear' ) {
-              set_status( {
-                ...val_status,
-                dataValue: '',
-                formatValue: '',
-                eventType: 'update',
-                eventID: $.uuidGen(),
-              } )
-            }
+        if ( [ 'number','digitNumber','creditCard' ].includes( restrict ) ) {
+          if ( key == 'Clear' ) {
+            set_status( {
+              ...val_status,
+              dataValue: '',
+              formatValue: '',
+              eventType: 'update',
+              eventID: $.uuidGen(),
+            } )
           }
-          if ( [ 'number','digitNumber' ].includes( restrict ) ) {
-            if ( [ 'ArrowUp','ArrowDown' ].includes( key ) ) {
-              let direction = Number( key == 'ArrowUp' ) * 2 - 1;
-              let Value = String( Number( val_status.dataValue ) + direction );
-              if ( val_validate.ok ) {
-                set_validate( { ok: false,notice: [] } );
-              }
-              set_status( {
-                ...val_status,
-                ...DataLeveling( {
-                  min,max,
-                  restrict,
-                  value: Value
-                } ),
-                eventType: 'update',
-                eventID: $.uuidGen(),
-              } );
-              event.preventDefault();
+        }
+        if ( [ 'number','digitNumber' ].includes( restrict ) ) {
+          if ( [ 'ArrowUp','ArrowDown' ].includes( key ) ) {
+            let direction = Number( key == 'ArrowUp' ) * 2 - 1;
+            let Value = String( Number( val_status.dataValue ) + direction );
+            if ( val_validate.ok ) {
+              set_validate( { ok: false,notice: [] } );
             }
+            set_status( {
+              ...val_status,
+              ...DataLeveling( {
+                min,max,
+                restrict,
+                value: Value
+              } ),
+              eventType: 'update',
+              eventID: $.uuidGen(),
+            } );
+            event.preventDefault();
           }
+        }
 
-          if ( onKeyDown ) onKeyDown( event );
-          if ( enableFormSubmit ) SubmitForm( event );
-        } }
-        onChange={ ( event ) => {
-          let {
-            value: rawValue,
-            selectionStart,
-            selectionEnd
-          } = event.target;
-
-          let value = DataLeveling( {
-            min,max,
-            restrict,
-            value: rawValue
-          } );
-          if ( value.formatValue == val_status.formatValue ) return;
-
-          if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
-          set_status( {
-            ...val_status,
-            ...value,
-            prevValue: val_status.formatValue,
-            eventType: 'update',
-            eventID: $.uuidGen(),
-            caretFrom: Number( selectionStart ),
-            caretTo: Number( selectionEnd )
-          } );
-
-          if ( onChange ) onChange( event );
-        } }
-        { ...others }
-      />
-    </BoxWrapper>
-  );
+        if ( onKeyDown ) onKeyDown( event );
+        if ( enableFormSubmit ) SubmitForm( event );
+      } }
+      onChange={ ( event ) => {
+        let {
+          value: rawValue,
+          selectionStart,
+          selectionEnd
+        } = event.target;
+
+        let value = DataLeveling( {
+          min,max,
+          restrict,
+          value: rawValue
+        } );
+        if ( value.formatValue == val_status.formatValue ) return;
+
+        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+        set_status( {
+          ...val_status,
+          ...value,
+          prevValue: val_status.formatValue,
+          eventType: 'update',
+          eventID: $.uuidGen(),
+          caretFrom: Number( selectionStart ),
+          caretTo: Number( selectionEnd )
+        } );
+
+        if ( onChange ) onChange( event );
+      } }
+      { ...others }
+    />
+  </BoxWrapper>;
 }

package/src/functions/Input/TextArea.tsx

@@ -71,41 +71,39 @@ export const TextAreaInput: React.FC<amotify.fn.Input.TextArea.PlainParams> = (
     DefaultValidation
   } );
 
-  return (
-    <BoxWrapper
-      val_status={ val_status }
-      set_status={ set_status }
-      val_validate={ val_validate }
-      params={ params }
-    >
-      <textarea
-        data-form={ form }
-        data-input-type={ 'textarea' }
-        data-validation={ val_validate.ok }
-        data-value={ val_status.dataValue }
-        data-component-id={ val_status.componentID }
-        value={ val_status.dataValue }
-        onKeyDown={ ( event ) => {
-          if ( onKeyDown ) onKeyDown( event );
-          if ( enableFormSubmit ) SubmitForm( event );
-        } }
-        onChange={ ( event ) => {
-          let {
-            value
-          } = event.target;
+  return <BoxWrapper
+    val_status={ val_status }
+    set_status={ set_status }
+    val_validate={ val_validate }
+    params={ params }
+  >
+    <textarea
+      data-form={ form }
+      data-input-type={ 'textarea' }
+      data-validation={ val_validate.ok }
+      data-value={ val_status.dataValue }
+      data-component-id={ val_status.componentID }
+      value={ val_status.dataValue }
+      onKeyDown={ ( event ) => {
+        if ( onKeyDown ) onKeyDown( event );
+        if ( enableFormSubmit ) SubmitForm( event );
+      } }
+      onChange={ ( event ) => {
+        let {
+          value
+        } = event.target;
 
-          if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
-          set_status( {
-            ...val_status,
-            dataValue: value,
-            eventType: 'update',
-            eventID: $.uuidGen(),
-          } );
+        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+        set_status( {
+          ...val_status,
+          dataValue: value,
+          eventType: 'update',
+          eventID: $.uuidGen(),
+        } );
 
-          if ( onChange ) onChange( event );
-        } }
-        { ...others }
-      />
-    </BoxWrapper>
-  );
+        if ( onChange ) onChange( event );
+      } }
+      { ...others }
+    />
+  </BoxWrapper>;
 }

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

@@ -170,7 +170,7 @@ export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) =
     set_value
   }
 
-  return ( <Box
+  return <Box
     backgroundColor={ '1.layer.base' }
     borderRadius={ '2.tone.secondary' }
     boxShadow={ 3 }
@@ -190,7 +190,7 @@ export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) =
                     : restrict == 'dateWareki' ? ''
                       : <></> }
     />
-  </Box> );
+  </Box>;
 }
 
 const Comps = {
@@ -460,7 +460,7 @@ const Comps = {
 
       let { year,month,date } = val_value;
 
-      return ( <Column
+      return <Column
         padding={ 1 }
       >
         <Flex
@@ -573,7 +573,7 @@ const Comps = {
           tipsID={ tipsID! }
           onValueUpdate={ onValueUpdate }
         />
-      </Column> );
+      </Column>;
     },
     MonthCalendar: ( params: {
       min?: string
@@ -687,14 +687,14 @@ const Comps = {
         </Box> );
       }
 
-      return ( <Grid gridCols={ 7 }
+      return <Grid gridCols={ 7 }
         gap={ '1/3' }
       >
         { legends }
         { lastMonthLastishDates }
         { thisMonthDates }
         { nextMonthFirstishDates }
-      </Grid> );
+      </Grid>;
     }
   },
   Month: {
@@ -709,7 +709,7 @@ const Comps = {
 
       let { year,month } = val_value;
 
-      return ( <Column
+      return <Column
         padding={ 1 }
       >
         <Row.Separate gap={ 0 }>
@@ -768,7 +768,7 @@ const Comps = {
           tipsID={ tipsID! }
           onValueUpdate={ onValueUpdate }
         />
-      </Column> );
+      </Column>;
     },
     Months: ( params: {
       min?: string
@@ -820,11 +820,11 @@ const Comps = {
         </Buttons.Button.Clear.R> );
       }
 
-      return ( <Grid
+      return <Grid
         gridCols={ 4 }
         gap={ '2/3' }
         children={ Months }
-      /> );
+      />;
     }
   },
   Year: {
@@ -839,7 +839,7 @@ const Comps = {
 
       let { year } = val_value;
 
-      return ( <Column
+      return <Column
         padding={ 1 }
       >
         <Input.Select
@@ -858,7 +858,7 @@ const Comps = {
           tipsID={ tipsID! }
           onValueUpdate={ onValueUpdate }
         />
-      </Column> );
+      </Column>;
     }
   },
   Variables: {
@@ -866,7 +866,7 @@ const Comps = {
       tipsID: string
       onValueUpdate: any
     } ) => {
-      return ( <Flex
+      return <Flex
         flexWrap={ false }
         gap={ 1 }
         flexChilds='even'
@@ -893,7 +893,7 @@ const Comps = {
           children={ '決定' }
           padding={ [ '2/3',1 ] }
         />
-      </Flex> );
+      </Flex>;
     },
     ShiftButtons: ( params: {
       callback( dir: -1 | 1 ): void

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

@@ -431,86 +431,84 @@ export const TimeInput: React.FC<amotify.fn.Input.Time.OriginParams> = ( params
     }
   },[ val_focus ] );
 
-  return (
-    <BoxWrapper
-      val_status={ val_status }
-      set_status={ set_status }
-      val_validate={ val_validate }
-      params={ params }
-    >
-      <Input.Hidden
-        name={ name }
+  return <BoxWrapper
+    val_status={ val_status }
+    set_status={ set_status }
+    val_validate={ val_validate }
+    params={ params }
+  >
+    <Input.Hidden
+      name={ name }
+      data-input-type={ 'time' }
+      data-form={ form }
+      data-validation={ val_validate.ok }
+      componentID={ val_status.componentID }
+      data-value={ JSON.stringify(
+        [ 'dates','months' ].includes( restrict ) ?
+          !val_status.dataValue[ 0 ] || !val_status.dataValue[ 1 ] ? null
+            : val_status.dataValue
+          : ( val_status.dataValue || null )
+      ) }
+    />
+    { amotify.config.device.isTouchDevice ?
+      <Buttons.Button.Plain
+        className={ className }
+        freeCSS={ {
+          textAlign: 'left'
+        } }
+        children={ val_status.formatValue }
+        onClick={ ( event ) => {
+          let component = useStore.get( val_status.componentID );
+          if ( component ) component.openPicker();
+          event.stopPropagation();
+        } }
+      /> : <input
+        type={ 'text' }
+        inputMode={ 'numeric' }
         data-input-type={ 'time' }
-        data-form={ form }
-        data-validation={ val_validate.ok }
-        componentID={ val_status.componentID }
-        data-value={ JSON.stringify(
-          [ 'dates','months' ].includes( restrict ) ?
-            !val_status.dataValue[ 0 ] || !val_status.dataValue[ 1 ] ? null
-              : val_status.dataValue
-            : ( val_status.dataValue || null )
-        ) }
-      />
-      { amotify.config.device.isTouchDevice ?
-        <Buttons.Button.Plain
-          className={ className }
-          freeCSS={ {
-            textAlign: 'left'
-          } }
-          children={ val_status.formatValue }
-          onClick={ ( event ) => {
-            let component = useStore.get( val_status.componentID );
-            if ( component ) component.openPicker();
-            event.stopPropagation();
-          } }
-        /> : <input
-          type={ 'text' }
-          inputMode={ 'numeric' }
-          data-input-type={ 'time' }
-          data-form-name={ form }
-          value={ val_status.formatValue }
-          className={ className }
-          tabIndex={ amotify.config.device.isTouchDevice ? -1 : 0 }
-          onKeyDown={ ( event ) => {
-            KeyDownEvent( {
-              restrict,
-              event,
-              val_era,
-              val_status,set_status,
-              val_focus,set_focus
-            } );
-
-            if ( onKeyDown ) onKeyDown( event );
-            if ( enableFormSubmit ) SubmitForm( event );
-          } }
-          onKeyUp={ ( event ) => {
-            if ( event.key == 'Tab' ) set_focus( {
-              ...val_focus,
-              active: true
-            } );
-          } }
-          onClick={ ( event ) => {
-            let caretTo = ( event.target as HTMLInputElement ).selectionEnd as number;
-            let Index = 0;
-
-            val_status.ranges.forEach( ( range,index ) => {
-              let { from,length,region } = range;
-              if ( from <= caretTo && caretTo <= ( from + ( region || length ) ) ) {
-                Index = index;
-              }
-            } );
-            set_focus( {
-              ...val_focus,
-              active: true,
-              index: Index
-            } );
-            event.preventDefault();
-          } }
-          onChange={ () => { } }
-          { ...others }
-        /> }
-    </BoxWrapper>
-  );
+        data-form-name={ form }
+        value={ val_status.formatValue }
+        className={ className }
+        tabIndex={ amotify.config.device.isTouchDevice ? -1 : 0 }
+        onKeyDown={ ( event ) => {
+          KeyDownEvent( {
+            restrict,
+            event,
+            val_era,
+            val_status,set_status,
+            val_focus,set_focus
+          } );
+
+          if ( onKeyDown ) onKeyDown( event );
+          if ( enableFormSubmit ) SubmitForm( event );
+        } }
+        onKeyUp={ ( event ) => {
+          if ( event.key == 'Tab' ) set_focus( {
+            ...val_focus,
+            active: true
+          } );
+        } }
+        onClick={ ( event ) => {
+          let caretTo = ( event.target as HTMLInputElement ).selectionEnd as number;
+          let Index = 0;
+
+          val_status.ranges.forEach( ( range,index ) => {
+            let { from,length,region } = range;
+            if ( from <= caretTo && caretTo <= ( from + ( region || length ) ) ) {
+              Index = index;
+            }
+          } );
+          set_focus( {
+            ...val_focus,
+            active: true,
+            index: Index
+          } );
+          event.preventDefault();
+        } }
+        onChange={ () => { } }
+        { ...others }
+      /> }
+  </BoxWrapper>;
 }
 
 const KeyDownEvent = ( props: {