amotify 0.0.64 → 0.0.66

package/src/functions/Input/Chips/Selector.tsx

@@ -1,445 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Box,
-  FAI,
-  Span
-} from '@atoms'
-import {
-  Column,
-  Row,
-  Text
-} from '@mols'
-import {
-  Input,
-  Buttons,
-  Loader,
-  Sheet
-} from '@fn'
-
-import style from './style.module.scss'
-
-const Selector = ( params: {
-  selectorID: string
-  bottomContent: ReactElement
-  options: amotify.fn.Input.Chips.OptionParams[]
-  limit?: number
-  selected: amotify.fn.Input.Chips.OptionParams[]
-  SelectorCellComponent: amotify.fn.Input.Chips.SelectorCellComponentInput
-  onUpdated( params: {
-    values: any[]
-  } ): void
-  onDynamicSearch?: amotify.fn.Input.Chips.onDynamicSearch
-} ) => {
-  type StatusTypes = 'show' | 'interlude'
-  let [ val_status,set_status ] = React.useState( 'show' as StatusTypes )
-  let [ val_keyword,set_keyword ] = React.useState( '' )
-  let [ val_componentID ] = React.useState( $.uuidGen() )
-
-  let [ val_options,set_options ] = React.useState( params.options )
-  let [ val_focus,set_focus ] = React.useState( val_options[ 0 ] || null )
-  let [ val_selected,set_selected ] = React.useState( params.selected )
-  let [ val_keyEvent,set_keyEvent ] = React.useState( 'init' )
-
-  React.useEffect( () => {
-    useStore.set( {
-      key: params.selectorID,
-      value: {
-        updateOptions: ( options: amotify.fn.Input.Chips.OptionParams[] ) => {
-          set_options( options )
-        },
-        updateSelected: ( selected: amotify.fn.Input.Chips.OptionParams[] ) => {
-          set_selected( selected )
-        }
-      }
-    } )
-  },[] )
-  const mountedOptions = React.useRef( false )
-  React.useEffect( () => {
-    if ( mountedOptions.current ) {
-      Sheet.reposition( params.selectorID )
-    } else {
-      mountedOptions.current = true
-    }
-  },[ val_options ] )
-  const mountedKeyword = React.useRef( false )
-  React.useEffect( () => {
-    if ( mountedKeyword.current ) {
-      set_status( 'interlude' )
-      set_focus( val_options[ 0 ] || null )
-
-      if ( params.onDynamicSearch ) {
-        $.interval.clear( val_componentID + '-dynamicSearch' )
-        $.interval.standBy(
-          val_componentID + '-dynamicSearch',
-          400,
-          async () => {
-            let {
-              options
-            } = await params.onDynamicSearch!( val_keyword )
-            set_options( options )
-            set_status( 'show' )
-          }
-        )
-      } else {
-        $.interval.clear( val_componentID + '-staticSearch' )
-        $.interval.standBy(
-          val_componentID + '-staticSearch',
-          400,
-          async () => {
-            let regExp = new RegExp( val_keyword,'ig' )
-            let newSelection: amotify.fn.Input.Chips.OptionParams[] = [];
-            [ ...params.options ].forEach( ( o ) => {
-              let match = Boolean( !val_keyword || ( String( o.label ) ?? String( o.value ) ).match( regExp ) )
-              if ( match ) newSelection.push( o )
-            } )
-
-            set_options( newSelection )
-            set_status( 'show' )
-          }
-        )
-      }
-    } else {
-      mountedKeyword.current = true
-    }
-  },[ val_keyword ] )
-  const mountedSelected = React.useRef( false )
-  React.useEffect( () => {
-    if ( mountedSelected.current ) {
-      params.onUpdated( {
-        values: val_selected
-      } )
-    } else {
-      mountedSelected.current = true
-    }
-  },[ val_selected ] )
-  React.useEffect( () => {
-    $.fnScope( () => {
-      if ( $.is.nullish( val_focus ) ) return
-      if ( val_keyEvent == 'MouseEvent' ) return
-
-      let Wrapper = $( '#' + val_componentID + '-Selector-Cell-Wrap' )
-      if ( !Wrapper[ 0 ] ) return
-
-      let focusCell = $( '[data-chips-selector-cell="' + val_componentID + '-' + JSON.stringify( val_focus?.value || '' ).replace( /\"/ig,'' ) + '"]' )
-      if ( !focusCell[ 0 ] ) return
-
-      let { top: pTop,height: pHeight } = Wrapper.position()
-      let { top: cTop,height: cHeight } = focusCell.position()
-      if ( pTop <= cTop && cTop + cHeight <= pTop + pHeight ) return
-
-      let scroll = Wrapper[ 0 ].scrollTop + ( cTop - pTop )
-      if ( val_keyEvent == 'ArrowDown' ) {
-        scroll -= ( pHeight - cHeight ) - 20
-      } else if ( val_keyEvent == 'ArrowUp' ) {
-        scroll -= 20
-      }
-
-      Wrapper[ 0 ].scrollTop = scroll
-    } )
-  },[ val_focus ] )
-
-  let List: ReactElement[] = []
-
-  if ( val_status == 'interlude' ) {
-    List = [ <Row.Center
-      padding={ 2 }
-      gap={ 0 }
-    >
-      <Loader.Theme.R
-        showInitial
-      />
-      <Box
-        padding={ [ 0,1 ] }
-        fontSize='1.mini'
-        fontColor='4.thin'
-      >
-        検索中...
-      </Box>
-    </Row.Center> ]
-  } else {
-    List = [
-      val_options.map( ( option,index ) => {
-        let {
-          value,label
-        } = option
-
-        let safeValue = String( JSON.stringify( value ) )
-
-        let findIndex = val_selected.findIndex( ( v ) => JSON.stringify( v.value ) == safeValue )
-
-        let isSelected = findIndex != -1
-        let isFocused = JSON.stringify( val_focus?.value || '' ) == safeValue
-
-        let styles: amotifyUniStyleParams = {}
-        if ( isSelected || isFocused ) {
-          styles = {
-            fontColor: 'theme',
-            isSemiBoldFont: true,
-          }
-        }
-        if ( isFocused ) {
-          styles = {
-            ...styles,
-            backgroundColor: 'cloud',
-            paddingLeft: '2/3'
-          }
-        }
-        if ( isSelected ) {
-          styles = {
-            ...styles,
-            backgroundColor: 'tcOpFew',
-          }
-        }
-
-        return <Buttons.Button.Clear.R
-          key={ index }
-          color='cloud'
-          padding={ '1/3' }
-          tabIndex={ -1 }
-          textAlign='left'
-          data-chips-selector-cell={ val_componentID + '-' + safeValue.replace( /\"/ig,'' ) }
-          isActive={ isSelected || isFocused }
-          isActiveStyles={ styles }
-          { ...styles }
-          onMouseOver={ () => {
-            set_keyEvent( 'MouseEvent' )
-            set_focus( option )
-          } }
-          onClick={ () => {
-            let newSelected = [ ...val_selected ]
-            if ( isSelected ) {
-              newSelected.splice( findIndex,1 )
-            } else {
-              newSelected = [
-                ...newSelected,
-                option
-              ]
-
-              if ( params.limit && newSelected.length > params.limit ) {
-                newSelected.shift()
-              }
-            }
-            set_selected( newSelected )
-          } }
-        >
-          <params.SelectorCellComponent
-            isSelected={ isSelected }
-            isFocused={ isFocused }
-            value={ value }
-            label={ label }
-          />
-        </Buttons.Button.Clear.R>
-      } )
-    ]
-  }
-
-  return <>
-    <Column
-      padding={ '2/3' }
-      gap={ '2/3' }
-      borderBottom
-    >
-      <Row.Separate>
-        <Input.Text.Normal
-          value={ val_keyword }
-          onUpdateValidValue={ ( { value } ) => {
-            set_keyword( value )
-          } }
-          id={ params.selectorID + '-KeywordInput' }
-          padding={ '2/3' }
-          placeholder='検索...'
-          leftIcon={ <Input.Comps.LeftIcon
-            right={ '2/3' }
-            fontSize={ '1.mini' }
-            fontColor='3.blur'
-          >
-            <FAI.Search />
-          </Input.Comps.LeftIcon> }
-          onKeyDown={ ( event ) => {
-            let {
-              key,
-              metaKey,ctrlKey
-            } = event
-            let auxKey = metaKey || ctrlKey
-
-            if ( [ 'ArrowDown','ArrowUp' ].includes( key ) ) {
-              let dir = Number( key == 'ArrowDown' ) * 2 - 1
-              if ( auxKey ) {
-                let next = val_options[ dir == 1 ? val_options.length - 1 : 0 ]
-                set_focus( next )
-              } else {
-                let nextIndex = val_options.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) ) + dir
-
-                if ( val_options[ nextIndex ] ) {
-                  set_focus( val_options[ nextIndex ] )
-                } else {
-                  set_focus( val_options[ dir == 1 ? 0 : val_options.length - 1 ] || null )
-                }
-              }
-            } else if ( key == 'Enter' ) {
-              let selectedIndex = val_selected.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) )
-              let isSelected = selectedIndex != -1
-              let newSelected = [ ...val_selected ]
-              if ( isSelected ) {
-                newSelected.splice( selectedIndex,1 )
-              } else {
-                let optionsIndex = val_options.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) )
-                if ( optionsIndex == -1 ) return
-                newSelected = [
-                  ...newSelected,
-                  val_options[ optionsIndex ],
-                ]
-
-                if ( params.limit && newSelected.length > params.limit ) {
-                  newSelected.shift()
-                }
-              }
-
-              set_selected( newSelected )
-            }
-            set_keyEvent( key )
-          } }
-        />
-        <Buttons.Button.Border.S
-          marginRight={ '1/3' }
-          ssSphere={ 2 }
-          backgroundColor='cloud'
-          borderRadius={ '2.tone.secondary' }
-          onClick={ () => {
-            Sheet.close( params.selectorID! )
-          } }
-        >
-          <FAI.Times />
-        </Buttons.Button.Border.S>
-      </Row.Separate>
-      <Row.Separate>
-        <Row.Left
-          gap={ '1/2' }
-          verticalAlign='baseline'
-        >
-          <Span
-            fontColor={ 'theme' }
-          >
-            { val_options.length }
-          </Span>
-          <Box
-            fontSize='1.mini'
-            fontColor='3.blur'
-          >
-            件のヒット
-          </Box>
-        </Row.Left>
-        <Row.Right>
-          { params.limit ? <Span
-            fontColor={ '3.blur' }
-            fontSize='1.mini'
-          >
-            <Span
-              fontSize='3.paragraph'
-              fontColor='theme'
-              isSemiBoldFont
-            >
-              { val_selected.length }
-            </Span> / { params.limit } 件
-          </Span> : null }
-        </Row.Right>
-      </Row.Separate>
-    </Column>
-    <Column
-      gap={ '1/4' }
-      padding={ '1/2' }
-      overflow={ 'auto' }
-      freeCSS={ {
-        maxHeight: 12 * 26,
-        maxWidth: 12 * 26
-      } }
-      id={ val_componentID + '-Selector-Cell-Wrap' }
-      className={ style.SelectorWrapper }
-    >
-      { List }
-    </Column>
-    { params.bottomContent }
-  </>
-}
-
-export const ChipsInputFNs: amotify.fn.Input.Chips.FNs = {
-  openSelector: ( params ) => {
-    let {
-      selectorID,
-      options,
-      selected,
-      limit,
-      bottomContent,
-      onDynamicSearch,
-      SelectorCellComponent,
-      onUpdated,
-      onClosed,
-      parent,
-      ...sheetarams
-    } = params
-    let sheetID = selectorID
-
-    SelectorCellComponent = SelectorCellComponent || ( ( params ) => {
-      return <Row.Left>
-        <FAI.CheckCircle
-          // isSolidIcon={ params.isSelected }
-          // isRegularIcon={ !params.isSelected }
-          fontColor={ params.isSelected ? 'theme' : '6.clear' }
-        />
-        { params.label }
-      </Row.Left>
-    } )
-
-    Sheet.open( {
-      parent,
-      sheetID,
-      type: 'custom',
-      gravityPoint: 22,
-      padding: [ 1,0 ],
-      hold_state: true,
-      close_option: {
-        aroundClick: true,
-        escapeKeyDown: true
-      },
-      ...sheetarams,
-      content: <Box
-        borderRadius={ '2.tone.secondary' }
-        backgroundColor={ '1.layer.base' }
-        border
-        boxShadow={ '1.normal' }
-        overflow='hidden'
-      >
-        <Selector
-          selectorID={ selectorID }
-          options={ options }
-          limit={ limit }
-          selected={ selected }
-          onUpdated={ onUpdated }
-          SelectorCellComponent={ SelectorCellComponent }
-          bottomContent={ bottomContent }
-          onDynamicSearch={ onDynamicSearch }
-        />
-      </Box>,
-      openAfter: () => {
-        $( '#' + params.selectorID + '-KeywordInput' ).focus()
-      },
-      closeAfter: () => {
-        onClosed()
-      }
-    } )
-  },
-  closeSelector: ( selectorID ) => {
-    Sheet.close( selectorID )
-  },
-  updateOptions: ( selectorID,options ) => {
-    let C = useStore.get( selectorID )
-    if ( C && C.updateOptions ) C.updateOptions( options )
-  },
-  updateSelected: ( selectorID,selected ) => {
-    let C = useStore.get( selectorID )
-    if ( C && C.updateSelected ) C.updateSelected( selected )
-  }
-}