amotify 0.0.4 → 0.0.6

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

@@ -1,383 +0,0 @@
-import {
-  React
-} from '@global';
-const {
-  useState
-} = React;
-
-import {
-  Box,
-  Flex,
-  FAIcon
-} from '@atoms';
-import {
-  Input,
-  Buttons
-} from '@functions';
-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

@@ -1,84 +0,0 @@
-@use '@uniVar' 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

@@ -1,238 +0,0 @@
-import {
-  React
-} from '@global';
-
-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 ] );
-      }
-    } }
-  /> );
-}