amotify 0.0.4 → 0.0.6

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

@@ -1,519 +0,0 @@
-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

@@ -1,67 +0,0 @@
-@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;
-      }
-    }
-  }
-}