amotify 0.0.2 → 0.0.4

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

@@ -0,0 +1,519 @@
+import {
+  useStore
+} from '@global';
+import {
+  Box,
+  Flex,
+} from '@atoms';
+import {
+  Input,
+  Buttons
+} from '@functions';
+
+import {
+  BoxWrapper,
+  SubmitForm,
+  CommonEffects
+} from '../core';
+import style from './style.module.scss';
+const {
+  useState,
+  useEffect
+} = React;
+
+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[] = [];
+
+  if ( required && !value ) {
+    notice.push( { type: 'invalid',label: '必須項目です' } );
+  }
+
+  return {
+    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
+    notice: notice
+  }
+}
+
+type DataLevelingResult = {
+  stepValue: number
+  stepIndex: number
+  positionLeft: string
+}
+const DataLeveling: {
+  ( props: {
+    value: number
+    val_status: amotify.fn.Input.Status.Slider
+  } ): DataLevelingResult
+} = ( props ) => {
+  let { value,val_status } = props;
+  let { min,max,step } = val_status;
+
+  value = Math.max( value,min );
+  value = Math.min( value,max );
+
+  let rawValue = value / max;
+  let stepValue = rawValue * max;
+
+  stepValue = Math.round( stepValue / step );
+
+  return {
+    stepValue: stepValue * step,
+    stepIndex: stepValue,
+    positionLeft: stepValue * step / max * 100 + '%'
+  };
+}
+
+export const SliderInput: FNC<amotify.fn.Input.Slider.PlainParams> = ( params ) => {
+  let {
+    color = 'theme',
+    required,
+    form = '',
+
+    legends: {
+      enable: showLegends = true,
+      custom: customLegends,
+      showAlways: showLegendsAlways = false
+    } = {},
+    min,max,step,
+
+    enableFormSubmit,
+
+    checkValidationAtFirst,
+    onChange,onKeyDown,
+    onValidate,
+    onUpdateValue,onUpdateValidValue,
+    value = '',
+    className,
+
+    ...others
+  } = params;
+
+  let Default_Status: amotify.fn.Input.Status.Slider = {
+    componentID: params.componentID || '',
+    dataValue: value,
+    min,max,step,
+    eventType: 'init',
+    eventID: $.uuidGen(),
+  }
+  let [ val_status,set_status ] = useState( Default_Status );
+  let [ val_validate,set_validate ] = useState( {
+    ok: false,
+    notice: []
+  } as amotify.fn.Input.Validation.Result );
+
+  CommonEffects( {
+    params,
+    val_status,
+    set_status,
+    val_validate,
+    set_validate,
+    onUpdateValue,onUpdateValidValue,
+    DefaultValidation,
+    ExtraOverrideParams: {
+      dataValue: value
+    },
+    ExtraStoreParams: {
+      prevValue: val_status.dataValue,
+      setValueByForeign: ( value: number ) => {
+        set_status( {
+          ...val_status,
+          dataValue: value,
+          eventType: 'update',
+          eventID: $.uuidGen(),
+        } );
+      }
+    }
+  } );
+
+  let DotData = DataLeveling( {
+    value: val_status.dataValue,
+    val_status
+  } );
+
+  return <BoxWrapper
+    val_status={ val_status }
+    set_status={ set_status }
+    val_validate={ val_validate }
+    params={ params }
+  >
+    <Input.Hidden
+      value={ DotData.stepValue }
+      form={ form }
+      data-value={ DotData.stepValue }
+      data-validation={ val_validate.ok }
+      data-input-type={ 'slider' }
+      { ...others }
+    />
+    <Box
+      flexSizing={ 'auto' }
+      className={ [
+        style.Wrap,
+        className,
+        style[ 'ShowLegendsAlways_' + showLegendsAlways ]
+      ].join( ' ' ) }
+    >
+      <Comps.Rail
+        color={ color }
+        val_status={ val_status }
+        set_status={ set_status }
+        DotData={ DotData }
+        form={ form }
+        enableFormSubmit={ enableFormSubmit! }
+      />
+      { showLegends ? <Comps.IndicatorLabels
+        componentID={ val_status.componentID }
+        min={ min }
+        max={ max }
+        step={ step }
+        customLegends={ customLegends }
+      /> : null }
+    </Box>
+  </BoxWrapper>;
+}
+
+const Comps = {
+  IndicatorLabels: ( props: {
+    componentID: string
+    min: number
+    max: number
+    step: number
+    customLegends?: amotify.fn.Input.Slider.LegendsCallback
+  } ) => {
+    let {
+      componentID,
+      min,
+      max,
+      step,
+      customLegends
+    } = props;
+    let Labels = [];
+
+    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 ) + '%';
+      Labels.push( <Box
+        key={ value }
+        className={ style.Label }
+        id={ 'Legend-' + componentID + '-' + index }
+        display={ index == minStep || index == maxStep ? 'flex' : 'none' }
+        position='absolute'
+        top={ 0 }
+        height={ 1 }
+        unitWidth={ 2 }
+        transition='middle'
+        fontColor={ '1.clear' }
+        freeCSS={ {
+          left: left,
+          whiteSpace: 'nowrap',
+          textAlign: 'center'
+        } }
+        verticalAlign='center'
+        horizontalAlign='center'
+        children={ customLegends ? customLegends( value ) : value.rank() }
+      /> );
+    }
+
+    useEffect( () => {
+      const LabelLeveling = () => {
+        let Labels = $( '#Labels-' + componentID );
+        let {
+          width
+        } = Labels.position();
+
+        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'
+          } );
+        }
+      }
+
+      $( window ).addEvent( {
+        eventID: 'SliderResizeCallback-' + componentID,
+        eventType: 'resize',
+        callback: () => {
+          LabelLeveling();
+        }
+      } );
+      LabelLeveling();
+
+      return () => {
+        $( window ).removeEvent( 'SliderResizeCallback-' + componentID );
+      }
+    },[] );
+
+    return ( <Flex
+      className={ style.Labels }
+      verticalAlign='center'
+      horizontalAlign='between'
+      unitHeight={ 2 }
+      fontSize={ '0.xs' }
+      position='relative'
+      id={ 'Labels-' + componentID }
+    >
+      <Box
+        position='absolute'
+        top={ 0 }
+        left={ 0 }
+        right={ 2 }
+        bottom={ 0 }
+        children={ Labels }
+      />
+    </Flex> );
+  },
+  Rail: ( props: {
+    color: amotify.fn.Input.Slider.ColorTypes
+    val_status: amotify.fn.Input.Status.Slider
+    set_status: React.Dispatch<React.SetStateAction<amotify.fn.Input.Status.Slider>>
+    DotData: DataLevelingResult
+    form: string
+    enableFormSubmit: boolean
+  } ) => {
+    let {
+      val_status,
+      set_status,
+      DotData,
+      form,
+      enableFormSubmit
+    } = props;
+    let {
+      componentID
+    } = val_status;
+
+    return ( <Flex
+      className={ style.Rail }
+      position='relative'
+      paddingLeft={ '1/2' }
+      unitHeight={ 2 }
+      verticalAlign='center'
+      freeCSS={ {
+        minWidth: '10rem',
+        zIndex: 1,
+        cursor: 'pointer'
+      } }
+      onMouseDown={ ( event ) => {
+        event.stopPropagation();
+        EffectStart( event,{
+          val_status,
+          set_status,
+          DotData
+        } );
+      } }
+      onTouchStart={ ( event ) => {
+        event.stopPropagation();
+        EffectStart( event,{
+          val_status,
+          set_status,
+          DotData
+        } );
+      } }
+    >
+      <Box
+        className={ style.Bar }
+        backgroundColor={ '4.layer.darken' }
+        position='relative'
+        borderRadius={ 'sphere' }
+        transition='middle'
+        flexSizing={ 'none' }
+        unitHeight={ '2/3' }
+        width={ 1 }
+        id={ componentID + '_Bar' }
+      >
+        <Box
+          className={ style.BarColor }
+          position='relative'
+          height={ 1 }
+          width={ 0 }
+          left={ 0 }
+          transition='long'
+          borderRadius={ 'inherit' }
+          backgroundColor={ props.color }
+          opacity='middle'
+          overflow='hidden'
+          freeCSS={ {
+            width: DotData.positionLeft
+          } }
+          id={ componentID + '_BarColor' }
+        />
+      </Box>
+      <Box
+        className={ style.BallWrap }
+        position='absolute'
+        top={ 0 }
+        left={ 0 }
+        right={ 2 }
+        bottom={ 0 }
+      >
+        <Buttons.Button.Plain
+          className={ style.Ball }
+          position='absolute'
+          backgroundColor={ props.color }
+          top={ 0 }
+          left={ 0 }
+          ssSphere={ 2 }
+          freeCSS={ {
+            zIndex: 2,
+            left: DotData.positionLeft
+          } }
+          data-form-name={ form }
+          id={ componentID + '_Ball' }
+          onKeyDown={ ( event ) => {
+            KeyDownEvent( {
+              event,
+              val_status,
+              set_status,
+              DotData
+            } );
+
+            if ( enableFormSubmit ) SubmitForm( event );
+          } }
+        />
+      </Box>
+    </Flex> );
+  }
+}
+
+const EffectStart = ( event: any,info: {
+  val_status: amotify.fn.Input.Status.Slider
+  set_status: React.Dispatch<React.SetStateAction<amotify.fn.Input.Status.Slider>>
+  DotData: DataLevelingResult
+} ) => {
+  $( document )
+    .addEvent( {
+      eventID: 'SliderMouseMove',
+      eventType: 'mousemove',
+      callback: ( event ) => { EffectMove( event,info ); },
+      option: { passive: false }
+    } )
+    .addEvent( {
+      eventID: 'SliderTouchMove',
+      eventType: 'touchmove',
+      callback: ( event ) => { EffectMove( event,info ); },
+      option: { passive: false }
+    } )
+    .addEvent( {
+      eventID: 'SliderMouseUp',
+      eventType: 'mouseup',
+      callback: () => { EffectEnd(); }
+    } )
+    .addEvent( {
+      eventID: 'SliderTouchEnd',
+      eventType: 'touchend',
+      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 {
+    val_status,
+    set_status,
+  } = info;
+  let {
+    componentID,
+    min,max
+  } = val_status;
+
+  let Ball = $( '#' + componentID + '_Ball' );
+  let Bar = $( '#' + componentID + '_Bar' );
+  let BarColor = $( '#' + componentID + '_BarColor' );
+
+  let { width: barWidth,left: barLeft } = Bar.position();
+
+  let Left = ( mouseX - barLeft ) / barWidth;
+  Left = Math.max( Left,0 );
+  Left = Math.min( Left,1 );
+
+  let LeftRawValue = Left * max;
+  let resultValues = DataLeveling( {
+    value: LeftRawValue,
+    val_status
+  } );
+  let left = resultValues.positionLeft;
+  let stepValue = resultValues.stepValue;
+
+  Ball.css( { left: left } );
+  BarColor.css( { width: left } );
+
+  let { prevValue } = useStore.get( componentID );
+  if ( stepValue != prevValue ) {
+    useStore.update( {
+      key: componentID,
+      value: {
+        prevValue: stepValue
+      }
+    } );
+    set_status( {
+      ...val_status,
+      dataValue: stepValue,
+      eventType: 'update',
+      eventID: $.uuidGen(),
+    } )
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  return false;
+}
+const EffectEnd = () => {
+  $( document ).removeEvent( [ 'SliderMouseMove','SliderTouchMove','SliderMouseUp','SliderTouchEnd' ] )
+}
+
+const KeyDownEvent = (
+  props: {
+    event: React.KeyboardEvent<HTMLButtonElement>
+    val_status: amotify.fn.Input.Status.Slider
+    set_status: React.Dispatch<React.SetStateAction<amotify.fn.Input.Status.Slider>>
+    DotData: DataLevelingResult
+  }
+) => {
+  let {
+    event,
+    val_status,
+    set_status
+  } = 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;
+
+  event.preventDefault();
+  if ( key.match( /Left|Up/ ) ) {
+    if ( auxKey ) nextValue = min;
+    else nextValue -= step;
+  } else if ( key.match( /Right|Down/ ) ) {
+    if ( auxKey ) nextValue = max;
+    else nextValue += step;
+  }
+  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(),
+  } );
+}

package/src/Functions/Input/Slider/style.module.scss

@@ -0,0 +1,67 @@
+@use '@uniVar' as *;
+@use'@styleSet' as *;
+.Label {
+  &:before {
+    content: "";
+    position: absolute;
+    top: calc(-1 * $unit1 / 6);
+    height: calc($unit1 / 2);
+    left: 50%;
+    width: 1px;
+    transform: translateX(-50%);
+    background-color: $font-color4;
+  }
+  &:not( :first-child):not( :last-child) {
+    opacity: 0;
+  }
+  &:first-child, &:last-child {
+    opacity: .6;
+  }
+}
+.Wrap {
+  &:hover {
+    .Rail {
+      .Bar {
+        background-color: $color-layer5;
+        .BarColor {
+          opacity: 1 !important;
+        }
+      }
+      + .Labels .Label {
+        opacity: .75;
+      }
+    }
+  }
+  &.ShowLegendsAlways_true {
+    .Label {
+      opacity: 1;
+    }
+  }
+  .Rail {
+    user-select: none;
+    -webkit-user-select: none;
+    * {
+      user-select: none;
+      -webkit-user-select: none;
+    }
+    .Ball {
+      transition: box-shadow $animation-time-middle, left .1s;
+      &:focus {
+        box-shadow: 0 0 0 $unit2_3 hsla(var(--color-layer5-hsl), .4);
+      }
+      &:before {
+        @include absoluteCovered();
+        border-radius: 100rem;
+        box-shadow: $shadow1;
+      }
+    }
+    &:active {
+      .Ball {
+        box-shadow: 0 0 0 $unit2_3 hsla(var(--color-layer5-hsl), .4);
+      }
+      + .Labels .Label {
+        opacity: 1;
+      }
+    }
+  }
+}