amotify 0.0.6 → 0.0.8

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

@@ -0,0 +1,383 @@
+import {
+  React
+} from '~/Global/@export';
+const {
+  useState
+} = React;
+
+import {
+  Box,
+  Flex,
+  FAIcon
+} from '~/Atoms/@export';
+import {
+  Input,
+  Buttons
+} from '~/Functions/@export';
+import {
+  BoxWrapper,
+  CommonEffects,
+  SubmitForm
+} 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 {
+    type,
+    required,
+    minSelect = 0
+  } = params as amotify.fn.Input.List.OriginParams;
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+
+  if ( required ) {
+    if ( !value.length ) {
+      if ( type == 'radio' ) {
+        notice.push( { type: 'invalid',label: '選択されていません' } );
+      }
+    }
+  }
+
+  if ( minSelect ) {
+    if ( value.length < minSelect ) {
+      notice.push( { type: 'invalid',label: `${ minSelect }個以上選択してください` } );
+    }
+  }
+
+  return {
+    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
+    notice: notice
+  }
+}
+
+export const ListInput: FNC<amotify.fn.Input.List.OriginParams> = ( props ) => {
+  let { value,options = [] } = props;
+  let Values = $.is.exist( value ) ? $.flatArray( value ) : [];
+  let DefaultOptions = options.map( ( option ) => {
+    let { value,label } = option;
+
+    return {
+      ...option,
+      value: JSON.stringify( value ),
+      label
+    }
+  } );
+  let DefaultValues: string[] = [];
+  Values.forEach( ( value ) => {
+    let Val = JSON.stringify( value );
+    let Index = DefaultOptions.findIndex( ( option ) => option.value == Val );
+    if ( Index == -1 ) return;
+    DefaultValues.push( Val );
+  } );
+
+  return <Core
+    { ...props }
+    value={ DefaultValues }
+    options={ DefaultOptions }
+  />;
+}
+
+const Core: FNC<amotify.fn.Input.List.OriginParams> = ( params ) => {
+  let {
+    type,
+    tone,
+    required,
+    componentID = '',
+    form,
+    override,
+    statusID,
+    freeCSS,
+
+    enableFormSubmit,
+
+    checkValidationAtFirst,
+    onValidate,
+    onUpdateValue,onUpdateValidValue,
+    value,
+    options,
+    leftIndicator,rightIndicator,
+
+    className,
+
+    cellStyles,cellClassName,
+    cellCheckedStyles,cellCheckedClassName,
+
+    ...others
+  } = params;
+
+  let Default_Status: amotify.fn.Input.Status.Plain = {
+    componentID,
+    dataValue: value,
+    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( {
+    type: 'list',
+    params,
+    val_status,
+    set_status,
+    val_validate,
+    set_validate,
+    onUpdateValue,onUpdateValidValue,
+    DefaultValidation
+  } );
+
+  return ( <BoxWrapper
+    val_status={ val_status }
+    set_status={ set_status }
+    val_validate={ val_validate }
+    params={ params }
+  >
+    <Input.Hidden
+      data-value={ JSON.stringify( val_status.dataValue ) }
+      form={ form }
+      data-input-type={ type }
+      data-validation={ val_validate.ok }
+      { ...others }
+      componentID={ val_status.componentID }
+    />
+    <CellList
+      params={ params }
+      val_status={ val_status }
+      set_status={ set_status }
+    />
+  </BoxWrapper> );
+}
+
+const CellList: FNC<{
+  params: amotify.fn.Input.List.OriginParams
+  val_status: amotify.fn.Input.Status.Plain
+  set_status: React.Dispatch<React.SetStateAction<amotify.fn.Input.Status.Plain>>
+}> = ( props ) => {
+  let {
+    params,
+    val_status,
+    set_status
+  } = props;
+
+  let {
+    componentID,
+    type,
+    tone,
+    icon = true,
+    options,
+    name,
+    form,
+    tabIndex,
+    hideInput,
+    disabled: DefaultDisabled,
+    className: ListClassName,
+
+    cellStyles: DefaultCellStyles,
+    cellClassName: DefaultCellClassName = '',
+    cellCheckedStyles: DefaultCellCheckedStyles,
+    cellCheckedClassName: DefaultCellCheckedClassName = '',
+
+    enableFormSubmit,
+    defaultActiveStyling = true
+  } = params;
+  let {
+    dataValue
+  } = val_status;
+
+  let IconBox = icon ? <Box
+    flexSizing={ 'none' }
+    children={ params.iconType == 'radio' ? <Comps.RadioIcon /> :
+      params.iconType == 'checkbox' ? <Comps.CheckboxIcon /> : null }
+  /> : null;
+
+  let Cells = options.map( ( option,index ) => {
+    let {
+      value,
+      label,
+      disabled = DefaultDisabled,
+      className = '',
+      checkedStyles,
+      checkedClassName = '',
+      ...styles
+    } = option;
+
+    let CellID = $.uuidGen();
+    let Checked = dataValue.findIndex( ( v: string ) => v === value ) != -1;
+
+    let Styles = {
+      ...DefaultCellStyles,
+      ...styles
+    } as amotifyUniStyleParams
+    let ClassName = [
+      style.Label,
+      style[ 'defaultActiveStyling_' + !!defaultActiveStyling ],
+      DefaultCellClassName,
+      className
+    ];
+
+    if ( Checked ) {
+      Styles = {
+        ...Styles,
+        ...DefaultCellCheckedStyles,
+        ...checkedStyles,
+        activeStyles: checkedStyles,
+        freeCSS: {
+          ...Styles.freeCSS,
+          ...DefaultCellCheckedStyles?.freeCSS,
+          ...checkedStyles?.freeCSS
+        }
+      }
+
+      ClassName = [
+        ...ClassName,
+        DefaultCellCheckedClassName,
+        checkedClassName
+      ];
+    }
+
+    return [
+      <input
+        type={ type == 'radio' ? 'radio' : 'checkbox' }
+        className={ [
+          style.Input,
+          style[ 'defaultActiveStyling_' + !!defaultActiveStyling ]
+        ].join( ' ' ) }
+        name={ 'RadioCheckbox-' + name }
+        data-list-index={ componentID + '-' + index }
+        id={ CellID }
+        value={ String( value ) }
+        data-form-name={ form }
+        disabled={ disabled }
+        checked={ Checked }
+        onFocus={ ( event ) => {
+          if ( disabled ) return;
+          if ( type != 'radio' ) return;
+          if ( val_status.dataValue.length ) return;
+          let { value,checked } = event.target;
+          let nextValue: any = [ value ];
+
+          set_status( {
+            ...val_status,
+            dataValue: nextValue,
+            eventType: 'update',
+            eventID: $.uuidGen()
+          } );
+        } }
+        onChange={ ( event ) => {
+          if ( disabled ) return;
+          let { value,checked } = event.target;
+          let nextValue = [];
+          if ( type == 'radio' ) {
+            nextValue = [ value ];
+          } else if ( type == 'checkbox' || type == 'checker' ) {
+            if ( checked ) {
+              nextValue = [ ...val_status.dataValue,value ];
+            } else {
+              let prevValue = [ ...val_status.dataValue ];
+              prevValue.splice( val_status.dataValue.findIndex( ( v: any ) => v == value ),1 );
+              nextValue = prevValue;
+            }
+          }
+
+          set_status( {
+            ...val_status,
+            dataValue: nextValue,
+            eventType: 'update',
+            eventID: $.uuidGen()
+          } );
+        } }
+        onKeyDown={ ( event ) => {
+          let { key,shiftKey } = event;
+          if ( type == 'checkbox' || type == 'checker' ) {
+            if ( key == 'Tab' ) {
+              if ( shiftKey ) { } else { }
+            } else if ( key.match( /Arrow/ ) ) {
+              event.preventDefault();
+
+              let dir = [ 'ArrowLeft','ArrowUp' ].includes( key ) ? -1 : 1;
+              let nextIndex = index + dir;
+
+              if ( nextIndex < 0 ) {
+                nextIndex = options.length - 1;
+              } else if ( nextIndex >= options.length ) {
+                nextIndex = 0;
+              }
+              $( `input[data-list-index="${ componentID }-${ nextIndex }"]` ).focus();
+            }
+          }
+
+          if ( enableFormSubmit ) SubmitForm( event );
+        } }
+        tabIndex={ tabIndex }
+      />,
+      <Buttons.Label.Plain
+        htmlFor={ CellID }
+        className={ ClassName.join( ' ' ) }
+        tabIndex={ -1 }
+        display='flex'
+        ssEffectsOnActive={ false }
+        verticalAlign='center'
+        gap={ '1/3' }
+        flexWrap={ false }
+        { ...Styles }
+      >
+        { IconBox }
+        { $.is.string( label ) ? <Box children={ label } /> : label }
+      </Buttons.Label.Plain>
+    ];
+  } );
+
+  return ( <Flex
+    flexSizing={ 'auto' }
+    freeCSS={ {
+      ...params.freeCSS
+    } }
+    className={ [
+      ListClassName,
+      style.CellBase,
+      style[ 'HideInput_' + hideInput ],
+      style[ 'IconIndicator_' + !!icon ],
+      style[ 'Tone_' + tone ]
+    ].join( ' ' ) }
+    children={ Cells }
+  /> );
+}
+
+const Comps = {
+  RadioIcon: () => ( <Box
+    className={ style.Icon }
+    backgroundColor={ '1.layer.base' }
+    border
+    transition='middle'
+    position='relative'
+    borderRadius={ 'sphere' }
+    flexCenter
+  /> ),
+  CheckboxIcon: () => ( <Box
+    className={ [
+      style.Icon,
+      style.CheckboxIcon
+    ].join( ' ' ) }
+    borderRadius={ '3.tone.tertiary' }
+    backgroundColor={ '1.layer.base' }
+    border
+    transition='middle'
+    fontColor={ 'white' }
+    position='relative'
+    flexCenter
+  >
+    <FAIcon.Check
+      className={ style.I }
+      transition='middle'
+      opacity='trans'
+      freeCSS={ {
+        zIndex: 8
+      } }
+    />
+  </Box> )
+}

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

@@ -0,0 +1,84 @@
+@use 'src/@styles/props' as *;
+.CellBase {
+  &.HideInput_true .Input {
+    display: none;
+  }
+}
+.Input {
+  &:checked + .Label .Icon {
+    border-color: transparent;
+    &:after, > * {
+      transform: scale(1) !important;
+      opacity: 1 !important;
+    }
+  }
+  &.defaultActiveStyling_true {
+    &:checked {
+      &:focus + .Label {
+        opacity: 1 !important;
+        box-shadow:
+          0 0 0 transparent inset,
+          0 0 0 1px $color-theme-opacity-middle,
+          0 0 0 $unit1_3 $color-theme-opacity-low !important;
+      }
+    }
+    &:focus + .Label {
+      box-shadow:
+        0 0 0 transparent inset,
+        0 0 0 $unit1_3 $color-layer3 !important;
+    }
+    &:active + .Label {
+      opacity: 1 !important;
+    }
+  }
+}
+.Label {
+  -webkit-user-select: none;
+  user-select: none;
+  * {
+    pointer-events: none;
+  }
+  &.defaultActiveStyling_true {
+    &:hover {
+      opacity: .6;
+    }
+  }
+}
+.Icon {
+  width: 20px;
+  height: 20px;
+  &.CheckboxIcon {
+    &:after {
+      background-color: $color-theme;
+    }
+    .I {
+      transform: scale(.3);
+    }
+  }
+  &:before, &:after {
+    content: "";
+    position: absolute;
+    opacity: 0;
+    transition: $animation-time-middle;
+  }
+  &:before {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    opacity: 1;
+    transition: 0s;
+    transition-timing-function: $animation-style1;
+  }
+  &:after {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: scale(0.3);
+    border-radius: inherit;
+    background-color: $color-layer1;
+    border: 5.5px solid $color-theme;
+    box-shadow: 0 0 0 transparent inset, $shadow1;
+    background-color: white;
+  }
+}

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

@@ -0,0 +1,238 @@
+import {
+  React
+} from '~/Global/@export';
+
+import { ListInputs } from '../_';
+
+import style from './style.module.scss';
+
+export const Segmented: amotify.fn.Input.Segmented.Types = {
+  Auto: ( params ) => {
+    params = {
+      padding: '1/3',
+      gap: '1/3',
+      ssCardBox: true,
+      ...params,
+      cellStyles: {
+        borderRadius: 'inherit',
+        position: 'relative',
+        ...params.cellStyles
+      },
+      cellCheckedStyles: {
+        backgroundColor: 'theme',
+        fontColor: 'white',
+        ...params.cellCheckedStyles
+      },
+    }
+
+    return ( <Core appearance={ ( params as any ).tone || 'Auto' } { ...params } /> );
+  },
+  Normal: ( params ) => {
+    params = {
+      border: true,
+      borderColor: 'theme',
+      overflow: 'hidden',
+      gap: 0,
+      ssLastChildLossBorder: 'right',
+      fontColor: '3.blur',
+      ...params,
+      cellStyles: {
+        borderRadius: 0,
+        borderRight: true,
+        borderColor: 'theme',
+        ...params.cellStyles
+      },
+      cellCheckedStyles: {
+        backgroundColor: 'theme',
+        fontColor: 'white',
+        ...params.cellCheckedStyles
+      }
+    };
+    ( params as any ).tone = 'ThemeBorder';
+
+    return ( <Core appearance={ 'Border' } { ...params } /> );
+  },
+  Cloud: ( params ) => {
+    params = {
+      padding: '1/3',
+      gap: '1/3',
+      backgroundColor: 'cloud',
+      ...params,
+      cellStyles: {
+        borderRadius: 'inherit',
+        position: 'relative',
+        ...params.cellStyles
+      },
+      cellCheckedStyles: {
+        backgroundColor: 'theme',
+        fontColor: 'white',
+        ...params.cellCheckedStyles
+      },
+    }
+
+    return ( <Core appearance={ ( params as any ).tone || 'Cloud' } { ...params } /> );
+  },
+  Cloud2: ( params ) => {
+    ( params as any ).tone = 'WhiteCloud';
+    return ( <Segmented.Cloud
+      fontColor='3.blur'
+      { ...params }
+      cellCheckedStyles={ {
+        fontColor: '1.clear',
+        ...params.cellCheckedStyles
+      } }
+    /> );
+  },
+  Cloud3: ( params ) => {
+    ( params as any ).tone = 'ThemeCloud';
+    return ( <Segmented.Cloud
+      backgroundColor='tcOpFew'
+      fontColor='theme'
+      { ...params }
+      cellStyles={ {
+        ...params.cellStyles
+      } }
+    /> );
+  },
+  Border: ( params ) => {
+    params = {
+      backgroundColor: '1.layer.base',
+      border: '2.normal',
+      overflow: 'hidden',
+      gap: 0,
+      ssLastChildLossBorder: 'right',
+      boxShadow: 0,
+      ...params,
+      cellStyles: {
+        borderRadius: 0,
+        borderRight: '2.normal',
+        ...params.cellStyles
+      },
+      cellCheckedStyles: {
+        backgroundColor: 'tcOpFew',
+        fontColor: 'theme',
+        ...params.cellCheckedStyles
+      },
+    }
+
+    return ( <Core appearance={ ( params as any ).tone || 'Border' } { ...params } /> );
+  },
+  Border2: ( params ) => {
+    params = {
+      border: true,
+      borderColor: 'theme',
+      overflow: 'hidden',
+      gap: 0,
+      ssLastChildLossBorder: 'right',
+      boxShadow: 0,
+      fontColor: '3.blur',
+      ...params,
+      cellStyles: {
+        borderRadius: 0,
+        borderRight: true,
+        borderColor: 'theme',
+        ...params.cellStyles
+      },
+      cellCheckedStyles: {
+        backgroundColor: 'theme',
+        fontColor: 'white',
+        ...params.cellCheckedStyles
+      }
+    };
+    ( params as any ).tone = 'ThemeBorder';
+
+    return ( <Core appearance={ 'Border' } { ...params } /> );
+  },
+  BottomLine: ( params ) => {
+    params = {
+      gap: 0,
+      fontColor: '3.blur',
+      ...params,
+      cellStyles: {
+        ssEffectsOnActive: 'ripple.theme',
+        borderRadius: 0,
+        padding: 1,
+        ...params.cellStyles
+      },
+      cellCheckedStyles: {
+        fontColor: 'theme',
+        ...params.cellCheckedStyles
+      }
+    }
+
+    return ( <Core appearance={ 'BottomLine' } { ...params } /> );
+  },
+}
+
+type CoreParams = amotify.fn.Input.Segmented.Params & {
+  appearance: amotify.fn.Input.Segmented.Tones
+}
+
+const Core: FNC<CoreParams> = ( params ) => {
+  let {
+    tone,
+    appearance,
+    value,
+    options,
+    onUpdateValue,onUpdateValidValue,
+    freeCSS,
+    cellStyles,
+    cellClassName,
+    cellCheckedClassName,
+    cellCheckedStyles,
+    ...others
+  } = params;
+
+  let [ val_componentID ] = React.useState( $.uuidGen() );
+
+  let [ val_defValue,set_defValue ] = React.useState( value );
+  let [ val_value,set_value ] = React.useState( val_defValue );
+  if ( val_defValue != value ) {
+    set_defValue( value );
+    set_value( value );
+  }
+
+  return ( <ListInputs.Radio
+    // hideInput
+    defaultActiveStyling={ false }
+    flexWrap={ false }
+    borderRadius={ '2.tone.secondary' }
+    position='relative'
+    options={ options }
+    value={ val_value }
+    componentID={ val_componentID }
+    icon={ false }
+    { ...others }
+    freeCSS={ {
+      whiteSpace: 'nowrap',
+      ...freeCSS
+    } }
+    cellStyles={ {
+      flexCenter: true,
+      ssPushable: true,
+      boxShadow: 'none',
+      ...cellStyles
+    } }
+    cellClassName={ [
+      cellClassName,
+      style.Label,
+      style[ 'Tone_' + appearance ]
+    ].join( ' ' ) }
+    cellCheckedStyles={ {
+      isBoldFont: true,
+      ...cellCheckedStyles,
+    } }
+    cellCheckedClassName={ [
+      cellCheckedClassName,
+      style.Checked
+    ].join( ' ' ) }
+    tone={ 'custom' as any }
+    onUpdateValue={ onUpdateValue }
+    onUpdateValidValue={ ( args ) => {
+      if ( onUpdateValidValue ) onUpdateValidValue( args );
+      if ( appearance == 'BottomLine' ) {
+        set_value( args.value[ 0 ] );
+      }
+    } }
+  /> );
+}