amotify 0.0.59 → 0.0.62

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

@@ -1,23 +1,23 @@
 import {
   React,
-} from '@global';
+} from '@global'
 
 import {
   Box
-} from '@atoms';
+} from '@atoms'
 import {
   BoxWrapper,
   SubmitForm,
   ValidationCheck,
   CommonEffects
-} from '../core';
+} from '../core'
 import {
   Buttons
-} from '@fn';
+} from '@fn'
 
 
-import style from './style.module.scss';
-import coreStyle from '../style.module.scss';
+import style from './style.module.scss'
+import coreStyle from '../style.module.scss'
 
 function DefaultValidation( props: {
   value: any
@@ -26,16 +26,16 @@ function DefaultValidation( props: {
   let {
     value,
     params
-  } = props;
+  } = props
   let {
     required,
     options
-  } = params as amotify.fn.Input.Select.PlainParams;
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  } = params as amotify.fn.Input.Select.PlainParams
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
 
   if ( required ) {
     if ( !options.length || ( options.length && $.is.nullish( JSON.parse( value ) ) ) ) {
-      notice.push( { type: 'invalid',label: '必須項目です' } );
+      notice.push( { type: 'invalid',label: '必須項目です' } )
     }
   }
 
@@ -50,30 +50,30 @@ export const SelectInput: React.FC<amotify.fn.Input.Select.PlainParams> = ( para
     value = null,
     placeholder,
     options = []
-  } = params;
+  } = params
 
-  let SelectedExist = 0;
-  let SelectedValue = JSON.stringify( value );
+  let SelectedExist = 0
+  let SelectedValue = JSON.stringify( value )
   let DefaultOptions = options.map( ( option ) => {
-    let { value,label } = option;
-    let Value = JSON.stringify( value );
-    let Selected = Value == SelectedValue;
-    SelectedExist |= Number( Selected );
+    let { value,label } = option
+    let Value = JSON.stringify( value )
+    let Selected = Value == SelectedValue
+    SelectedExist |= Number( Selected )
 
     return {
       ...option,
       value: Value,
       label
     }
-  } );
-  if ( !SelectedExist ) value = null;
-  let DefaultValue = JSON.stringify( value );
+  } )
+  if ( !SelectedExist ) value = null
+  let DefaultValue = JSON.stringify( value )
 
   return <Core
     { ...params }
     value={ DefaultValue }
     options={ DefaultOptions }
-  />;
+  />
 }
 
 const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
@@ -99,7 +99,7 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
     componentID,status_id,
 
     ...others
-  } = params;
+  } = params
 
   let Default_Status: amotify.fn.Input.Status.Plain = {
     componentID: params.componentID || '',
@@ -107,11 +107,11 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
     eventType: 'init',
     eventID: $.uuidGen()
   }
-  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_status,set_status ] = React.useState( Default_Status )
   let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
-  } as amotify.fn.Input.Validation.Result );
+  } as amotify.fn.Input.Validation.Result )
 
   CommonEffects( {
     type: 'select',
@@ -127,12 +127,12 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
     DefaultValidation,
     onUpdateValue,
     onUpdateValidValue
-  } );
+  } )
 
-  let SelectedElement: ReactElement = <Box fontColor='4.thin' textAlign='left'>{ placeholder || '選択' }</Box>;
+  let SelectedElement: ReactElement = <Box fontColor='4.thin' textAlign='left'>{ placeholder || '選択' }</Box>
   if ( val_status.dataValue ) {
-    let Selected = options.find( ( option ) => option.value == val_status.dataValue );
-    if ( Selected ) SelectedElement = Selected.displayLabel ?? Selected.label;
+    let Selected = options.find( ( option ) => option.value == val_status.dataValue )
+    if ( Selected ) SelectedElement = Selected.displayLabel ?? Selected.label
   }
 
   return <BoxWrapper
@@ -157,23 +157,23 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
         data-value={ val_status.dataValue }
         value={ val_status.dataValue }
         onKeyDown={ ( event ) => {
-          if ( onKeyDown ) onKeyDown( event );
-          if ( enableFormSubmit ) SubmitForm( event );
+          if ( onKeyDown ) onKeyDown( event )
+          if ( enableFormSubmit ) SubmitForm( event )
         } }
         onChange={ ( event ) => {
           let {
             value: rawValue
-          } = event.target;
+          } = event.target
 
-          if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+          if ( val_validate.ok ) set_validate( { ok: false,notice: [] } )
           set_status( {
             ...val_status,
             dataValue: rawValue,
             eventType: 'update',
             eventID: $.uuidGen(),
-          } );
+          } )
 
-          if ( onChange ) onChange( event );
+          if ( onChange ) onChange( event )
         } }
         { ...others as any }
         className={ style.Select }
@@ -181,7 +181,7 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
         <Options params={ params } />
       </select>
     </Box>
-  </BoxWrapper>;
+  </BoxWrapper>
 }
 
 const Options: React.FC<{ params: amotify.fn.Input.Select.PlainParams }> = ( props ) => {
@@ -189,30 +189,30 @@ const Options: React.FC<{ params: amotify.fn.Input.Select.PlainParams }> = ( pro
     options = [],
     placeholder = '選択してください',
     enableUnSelected = true
-  } = props.params;
+  } = props.params
 
   let Options = options.map( ( option: amotify.fn.Input.Select.OptionProps ) => {
     let {
       value,
       label,
-    } = option;
-    let Value = String( value );
+    } = option
+    let Value = String( value )
     return <option
       value={ Value }
       key={ Value }
       children={ label }
-    />;
-  } );
+    />
+  } )
 
   if ( enableUnSelected ) {
     Options.unshift( <option
       key={ 0 }
       value={ JSON.stringify( null ) }
       children={ placeholder }
-    /> );
+    /> )
   }
 
   return <>
     { Options }
-  </>;
+  </>
 }

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

@@ -1,33 +1,33 @@
 import {
   useStore,
   React
-} from '@global';
+} from '@global'
 import {
   Box,
   Flex,
-} from '@atoms';
+} from '@atoms'
 import {
   Input,
   Buttons
-} from '@fn';
+} from '@fn'
 
 import {
   BoxWrapper,
   SubmitForm,
   CommonEffects
-} from '../core';
-import style from './style.module.scss';
+} from '../core'
+import style from './style.module.scss'
 
 function DefaultValidation( props: {
   value: any
   params: any
 } ): amotify.fn.Input.Validation.Result {
-  let { value,params } = props;
-  let { required } = params as amotify.fn.Input.TextArea.PlainParams;
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  let { value,params } = props
+  let { required } = params as amotify.fn.Input.TextArea.PlainParams
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
 
   if ( required && !value ) {
-    notice.push( { type: 'invalid',label: '必須項目です' } );
+    notice.push( { type: 'invalid',label: '必須項目です' } )
   }
 
   return {
@@ -47,22 +47,22 @@ const DataLeveling: {
     val_status: amotify.fn.Input.Status.Slider
   } ): DataLevelingResult
 } = ( props ) => {
-  let { value,val_status } = props;
-  let { min,max,step } = val_status;
+  let { value,val_status } = props
+  let { min,max,step } = val_status
 
-  value = Math.max( value,min );
-  value = Math.min( value,max );
+  value = Math.max( value,min )
+  value = Math.min( value,max )
 
-  let rawValue = value / max;
-  let stepValue = rawValue * max;
+  let rawValue = value / max
+  let stepValue = rawValue * max
 
-  stepValue = Math.round( stepValue / step );
+  stepValue = Math.round( stepValue / step )
 
   return {
     stepValue: stepValue * step,
     stepIndex: stepValue,
     positionLeft: stepValue * step / max * 100 + '%'
-  };
+  }
 }
 
 export const SliderInput: React.FC<amotify.fn.Input.Slider.PlainParams> = ( params ) => {
@@ -88,7 +88,7 @@ export const SliderInput: React.FC<amotify.fn.Input.Slider.PlainParams> = ( para
     className,
 
     ...others
-  } = params;
+  } = params
 
   let Default_Status: amotify.fn.Input.Status.Slider = {
     componentID: params.componentID || '',
@@ -97,11 +97,11 @@ export const SliderInput: React.FC<amotify.fn.Input.Slider.PlainParams> = ( para
     eventType: 'init',
     eventID: $.uuidGen(),
   }
-  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_status,set_status ] = React.useState( Default_Status )
   let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
-  } as amotify.fn.Input.Validation.Result );
+  } as amotify.fn.Input.Validation.Result )
 
   CommonEffects( {
     params,
@@ -122,15 +122,15 @@ export const SliderInput: React.FC<amotify.fn.Input.Slider.PlainParams> = ( para
           dataValue: value,
           eventType: 'update',
           eventID: $.uuidGen(),
-        } );
+        } )
       }
     }
-  } );
+  } )
 
   let DotData = DataLeveling( {
     value: val_status.dataValue,
     val_status
-  } );
+  } )
 
   return <BoxWrapper
     val_status={ val_status }
@@ -170,7 +170,7 @@ export const SliderInput: React.FC<amotify.fn.Input.Slider.PlainParams> = ( para
         customLegends={ customLegends }
       /> : null }
     </Box>
-  </BoxWrapper>;
+  </BoxWrapper>
 }
 
 const Comps = {
@@ -187,18 +187,18 @@ const Comps = {
       max,
       step,
       customLegends
-    } = props;
-    let Labels = [];
+    } = props
+    let Labels = []
 
-    let minStep = Math.round( min / step );
-    let maxStep = Math.round( max / step );
-    let steps = maxStep - minStep + 1;
+    let minStep = Math.round( min / step )
+    let maxStep = Math.round( max / step )
+    let steps = maxStep - minStep + 1
 
     for ( var index = minStep; index <= maxStep; index++ ) {
-      let value = index * step;
-      value = Math.max( value,min );
-      value = Math.min( value,max );
-      let left = ( value / max * 100 ) + '%';
+      let value = index * step
+      value = Math.max( value,min )
+      value = Math.min( value,max )
+      let left = ( value / max * 100 ) + '%'
       Labels.push( <Box
         key={ value }
         className={ style.Label }
@@ -218,23 +218,23 @@ const Comps = {
         verticalAlign='center'
         horizontalAlign='center'
         children={ customLegends ? customLegends( value ) : value.rank() }
-      /> );
+      /> )
     }
 
     React.useEffect( () => {
       const LabelLeveling = () => {
-        let Labels = $( '#Labels-' + componentID );
+        let Labels = $( '#Labels-' + componentID )
         let {
           width
-        } = Labels.position();
+        } = Labels.position()
 
-        let maxLabelCount = Math.round( width / 50 ) - 1;
-        let labelStep = Math.round( steps / maxLabelCount );
+        let maxLabelCount = Math.round( width / 50 ) - 1
+        let labelStep = Math.round( steps / maxLabelCount )
 
         for ( let index = minStep + 1; index < maxStep; index++ ) {
           $( '#Legend-' + componentID + '-' + index ).css( {
             display: index % labelStep == 0 ? 'flex' : 'none'
-          } );
+          } )
         }
       }
 
@@ -242,15 +242,15 @@ const Comps = {
         eventID: 'SliderResizeCallback-' + componentID,
         eventType: 'resize',
         callback: () => {
-          LabelLeveling();
+          LabelLeveling()
         }
-      } );
-      LabelLeveling();
+      } )
+      LabelLeveling()
 
       return () => {
-        $( window ).removeEvent( 'SliderResizeCallback-' + componentID );
+        $( window ).removeEvent( 'SliderResizeCallback-' + componentID )
       }
-    },[] );
+    },[] )
 
     return <Flex
       className={ style.Labels }
@@ -269,7 +269,7 @@ const Comps = {
         bottom={ 0 }
         children={ Labels }
       />
-    </Flex>;
+    </Flex>
   },
   Rail: ( props: {
     color: amotify.fn.Input.Slider.ColorTypes
@@ -285,10 +285,10 @@ const Comps = {
       DotData,
       form,
       enableFormSubmit
-    } = props;
+    } = props
     let {
       componentID
-    } = val_status;
+    } = val_status
 
     return <Flex
       className={ style.Rail }
@@ -302,20 +302,20 @@ const Comps = {
         cursor: 'pointer'
       } }
       onMouseDown={ ( event ) => {
-        event.stopPropagation();
+        event.stopPropagation()
         EffectStart( event,{
           val_status,
           set_status,
           DotData
-        } );
+        } )
       } }
       onTouchStart={ ( event ) => {
-        event.stopPropagation();
+        event.stopPropagation()
         EffectStart( event,{
           val_status,
           set_status,
           DotData
-        } );
+        } )
       } }
     >
       <Box
@@ -373,13 +373,13 @@ const Comps = {
               val_status,
               set_status,
               DotData
-            } );
+            } )
 
-            if ( enableFormSubmit ) SubmitForm( event );
+            if ( enableFormSubmit ) SubmitForm( event )
           } }
         />
       </Box>
-    </Flex>;
+    </Flex>
   }
 }
 
@@ -392,69 +392,69 @@ const EffectStart = ( event: any,info: {
     .addEvent( {
       eventID: 'SliderMouseMove',
       eventType: 'mousemove',
-      callback: ( event ) => { EffectMove( event,info ); },
+      callback: ( event ) => { EffectMove( event,info ) },
       option: { passive: false }
     } )
     .addEvent( {
       eventID: 'SliderTouchMove',
       eventType: 'touchmove',
-      callback: ( event ) => { EffectMove( event,info ); },
+      callback: ( event ) => { EffectMove( event,info ) },
       option: { passive: false }
     } )
     .addEvent( {
       eventID: 'SliderMouseUp',
       eventType: 'mouseup',
-      callback: () => { EffectEnd(); }
+      callback: () => { EffectEnd() }
     } )
     .addEvent( {
       eventID: 'SliderTouchEnd',
       eventType: 'touchend',
-      callback: () => { EffectEnd(); }
+      callback: () => { EffectEnd() }
     } )
 }
 const EffectMove = ( event: any,info: {
   val_status: amotify.fn.Input.Status.Slider
   set_status: React.Dispatch<React.SetStateAction<amotify.fn.Input.Status.Slider>>
 } ) => {
-  let mouseX = $.getCursor( event ).x;
+  let mouseX = $.getCursor( event ).x
   let {
     val_status,
     set_status,
-  } = info;
+  } = info
   let {
     componentID,
     min,max
-  } = val_status;
+  } = val_status
 
-  let Ball = $( '#' + componentID + '_Ball' );
-  let Bar = $( '#' + componentID + '_Bar' );
-  let BarColor = $( '#' + componentID + '_BarColor' );
+  let Ball = $( '#' + componentID + '_Ball' )
+  let Bar = $( '#' + componentID + '_Bar' )
+  let BarColor = $( '#' + componentID + '_BarColor' )
 
-  let { width: barWidth,left: barLeft } = Bar.position();
+  let { width: barWidth,left: barLeft } = Bar.position()
 
-  let Left = ( mouseX - barLeft ) / barWidth;
-  Left = Math.max( Left,0 );
-  Left = Math.min( Left,1 );
+  let Left = ( mouseX - barLeft ) / barWidth
+  Left = Math.max( Left,0 )
+  Left = Math.min( Left,1 )
 
-  let LeftRawValue = Left * max;
+  let LeftRawValue = Left * max
   let resultValues = DataLeveling( {
     value: LeftRawValue,
     val_status
-  } );
-  let left = resultValues.positionLeft;
-  let stepValue = resultValues.stepValue;
+  } )
+  let left = resultValues.positionLeft
+  let stepValue = resultValues.stepValue
 
-  Ball.css( { left: left } );
-  BarColor.css( { width: left } );
+  Ball.css( { left: left } )
+  BarColor.css( { width: left } )
 
-  let { prevValue } = useStore.get( componentID );
+  let { prevValue } = useStore.get( componentID )
   if ( stepValue != prevValue ) {
     useStore.update( {
       key: componentID,
       value: {
         prevValue: stepValue
       }
-    } );
+    } )
     set_status( {
       ...val_status,
       dataValue: stepValue,
@@ -462,9 +462,9 @@ const EffectMove = ( event: any,info: {
       eventID: $.uuidGen(),
     } )
   }
-  event.preventDefault();
-  event.stopPropagation();
-  return false;
+  event.preventDefault()
+  event.stopPropagation()
+  return false
 }
 const EffectEnd = () => {
   $( document ).removeEvent( [ 'SliderMouseMove','SliderTouchMove','SliderMouseUp','SliderTouchEnd' ] )
@@ -482,35 +482,35 @@ const KeyDownEvent = (
     event,
     val_status,
     set_status
-  } = props;
-  let { min,max,step } = val_status;
-  let { key,metaKey,ctrlKey } = event;
-  let auxKey = ctrlKey || metaKey;
+  } = props
+  let { min,max,step } = val_status
+  let { key,metaKey,ctrlKey } = event
+  let auxKey = ctrlKey || metaKey
 
-  let nextValue = val_status.dataValue;
-  if ( !key.match( /Arrow/ ) ) return;
+  let nextValue = val_status.dataValue
+  if ( !key.match( /Arrow/ ) ) return
 
-  event.preventDefault();
+  event.preventDefault()
   if ( key.match( /Left|Up/ ) ) {
-    if ( auxKey ) nextValue = min;
-    else nextValue -= step;
+    if ( auxKey ) nextValue = min
+    else nextValue -= step
   } else if ( key.match( /Right|Down/ ) ) {
-    if ( auxKey ) nextValue = max;
-    else nextValue += step;
+    if ( auxKey ) nextValue = max
+    else nextValue += step
   }
-  nextValue = Math.max( Math.min( nextValue,max ),min );
+  nextValue = Math.max( Math.min( nextValue,max ),min )
 
   useStore.update( {
     key: val_status.componentID,
     value: {
       prevValue: nextValue
     }
-  } );
+  } )
 
   set_status( {
     ...val_status,
     dataValue: nextValue,
     eventType: 'update',
     eventID: $.uuidGen(),
-  } );
+  } )
 }