amotify 0.0.64 → 0.0.66

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

@@ -1,383 +0,0 @@
-import {
-  React
-} from '@global'
-import {
-  Box,
-  Flex,
-  FAI
-} from '@atoms'
-import {
-  Input,
-  Buttons
-} from '@fn'
-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: React.FC<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: React.FC<amotify.fn.Input.List.OriginParams> = ( params ) => {
-  let {
-    type,
-    tone,
-    required,
-    componentID = '',
-    form,
-    override,
-
-    freeCSS,
-    icon,
-    iconType,
-
-    enableFormSubmit,
-    defaultActiveStyling,
-    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 ] = React.useState( Default_Status )
-  let [ val_validate,set_validate ] = React.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: React.FC<{
-  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
-        key={ 'List-' + JSON.stringify( value ) }
-        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
-        key={ 'ListTrigger-' + JSON.stringify( value ) }
-        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
-  >
-    <FAI.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 '@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/RichSelect/_.tsx

@@ -1,230 +0,0 @@
-import {
-  React,
-} from '@global'
-
-import {
-  Box
-} from '@atoms'
-import {
-  Column
-} from '@mols'
-import {
-  BoxWrapper,
-  SubmitForm,
-  ValidationCheck,
-  CommonEffects
-} from '../core'
-import {
-  Input,
-  Tooltips,
-  Buttons
-} from '@fn'
-
-
-import style from './style.module.scss'
-import coreStyle from '../style.module.scss'
-
-function DefaultValidation( props: {
-  value: any
-  params: any
-} ): amotify.fn.Input.Validation.Result {
-  let {
-    value,
-    params
-  } = props
-  let {
-    required,
-    options
-  } = params as amotify.fn.Input.RichSelect.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: '必須項目です' } )
-    }
-  }
-
-  return {
-    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
-    notice: notice
-  }
-}
-
-export const RichSelectInput: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
-  let {
-    value = null,
-    placeholder,
-    options = []
-  } = params
-
-  let SelectedExist = 0
-  let SelectedValue = JSON.stringify( value )
-  let DefaultOptions = options.map( ( option ) => {
-    let { type,value } = option
-    let Value = JSON.stringify( value )
-    let Selected = Value == SelectedValue
-    SelectedExist |= Number( Selected )
-
-    return {
-      ...option,
-      type: type || 'button',
-      value: Value
-    }
-  } )
-  if ( !SelectedExist ) value = null
-  let DefaultValue = JSON.stringify( value )
-
-  return <Core
-    { ...params }
-    value={ DefaultValue }
-    options={ DefaultOptions }
-  />
-}
-
-const Core: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
-  let {
-    tone,
-    required,
-    form,
-    className,
-
-    enableFormSubmit,
-    enableUnSelected,
-
-    checkValidationAtFirst,
-    onChange,onKeyDown,
-    onValidate,
-    onUpdateValue,
-    onUpdateValidValue,
-    value = '',
-    options,
-    placeholder,
-
-    leftIndicator,rightIndicator,leftIcon,rightIcon,
-    componentID,status_id,
-
-    cellStyles,
-    sheetStyles,
-
-    gravityPoint,
-    ...others
-  } = params
-
-  let Default_Status: amotify.fn.Input.Status.Plain = {
-    componentID: params.componentID || '',
-    dataValue: value,
-    eventType: 'init',
-    eventID: $.uuidGen()
-  }
-  let [ val_tipID ] = React.useState( $.uuid.gen() )
-  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 )
-
-  CommonEffects( {
-    type: 'richSelect',
-    params,
-    val_status,
-    set_status,
-    ExtraOverrideParams: {
-      dataValue: value,
-      formatValue: value,
-    },
-    val_validate,
-    set_validate,
-    DefaultValidation,
-    onUpdateValue,
-    onUpdateValidValue
-  } )
-
-  let SelectedElement: ReactElement = <Box fontColor='4.thin' textAlign='left'>{ placeholder || '選択' }</Box>
-  if ( val_status.dataValue ) {
-    let Selected = options.find( ( option ) => option.type == 'button' && option.value == val_status.dataValue )
-    if ( Selected ) {
-      SelectedElement = Selected.selectedLabel || Selected.label
-    }
-  }
-
-  return <BoxWrapper
-    val_status={ val_status }
-    set_status={ set_status }
-    val_validate={ val_validate }
-    params={ params }
-  >
-    <button
-      { ...others as any }
-      data-form={ form }
-      data-validation={ val_validate.ok }
-      data-component-id={ val_status.componentID }
-      data-value={ val_status.dataValue }
-      data-input-type={ 'richSelect' }
-      className={ [
-        className,
-        style.SelectLegend,
-        coreStyle.InputCover
-      ].join( ' ' ) }
-      onClick={ ( e ) => {
-        Tooltips.open( {
-          tipsID: val_tipID,
-          parent: e.currentTarget,
-          gravityPoint: gravityPoint || 13,
-          close_option: {
-            elementBlur: ''
-          },
-          content: () => {
-            let Options = options.map( ( option ) => {
-              let {
-                type,
-                value,
-                label
-              } = option
-
-              if ( type == 'button' ) {
-                return <Buttons.Button.Clear.R
-                  color='cloud'
-                  borderRadius={ 0 }
-                  fontColor='2.normal'
-                  textAlign='left'
-                  padding={ 0 }
-                  onClick={ () => {
-                    set_status( {
-                      ...val_status,
-                      dataValue: value,
-                      eventType: 'update',
-                      eventID: $.uuidGen()
-                    } )
-                    Tooltips.close( val_tipID )
-                  } }
-                  { ...cellStyles }
-                >
-                  { label }
-                </Buttons.Button.Clear.R>
-              } else {
-                return label
-              }
-            } )
-            return <Column
-              ssCardBox
-              padding={ [ 1,0 ] }
-              gap={ 0 }
-              // maxHeight={ 'viewHeight' }
-              overflow={ 'auto' }
-              { ...sheetStyles }
-              freeCSS={ {
-                minWidth: 12 * 20,
-                maxHeight: '90vh',
-                ...sheetStyles?.freeCSS
-              } }
-            >
-              { Options }
-            </Column>
-          }
-        } )
-      } }
-    >
-      { SelectedElement }
-    </button>
-  </BoxWrapper>
-}

package/src/functions/Input/RichSelect/style.module.scss

@@ -1,11 +0,0 @@
-@use '@props' as *;
-.Select {
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 0;
-}
-.SelectLegend {}