amotify 0.0.4 → 0.0.5

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

@@ -1,451 +0,0 @@
-import {
-  useRecycle,
-  useStore,
-} from '@global';
-const {
-  useEffect,
-  useState
-} = React;
-import {
-  Box,
-  Flex,
-  FAIcon,
-  Span
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  Input,
-  Buttons,
-  Loader,
-  Sheet
-} from '@functions';
-
-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 ] = useState( 'show' as StatusTypes );
-  let [ val_keyword,set_keyword ] = useState( '' );
-  let [ val_componentID ] = useState( $.uuidGen() );
-
-  let [ val_options,set_options ] = useState( params.options );
-  let [ val_focus,set_focus ] = useState( val_options[ 0 ] || null );
-  let [ val_selected,set_selected ] = useState( params.selected );
-  let [ val_keyEvent,set_keyEvent ] = useState( 'init' );
-
-  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 );
-  useEffect( () => {
-    if ( mountedOptions.current ) {
-      Sheet.reposition( params.selectorID );
-    } else {
-      mountedOptions.current = true;
-    }
-  },[ val_options ] );
-  const mountedKeyword = React.useRef( false );
-  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 );
-  useEffect( () => {
-    if ( mountedSelected.current ) {
-      params.onUpdated( {
-        values: val_selected
-      } );
-    } else {
-      mountedSelected.current = true;
-    }
-  },[ val_selected ] );
-  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',
-            isBoldFont: true,
-          }
-        }
-        if ( isFocused ) {
-          styles = {
-            ...styles,
-            backgroundColor: 'cloud',
-            paddingLeft: '2/3'
-          }
-        }
-        if ( isSelected ) {
-          styles = {
-            ...styles,
-            backgroundColor: 'tcOpFew',
-          }
-        }
-
-        return <Buttons.Button.Clear.R
-          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'
-          >
-            <FAIcon.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! );
-          } }
-        >
-          <FAIcon
-            d='window-minimize'
-          />
-        </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'
-              isBoldFont
-            >
-              { 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>
-        <FAIcon.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 ],
-      holdState: true,
-      closeOption: {
-        aroundClick: true,
-        escapeKeyDown: true
-      },
-      ...sheetarams,
-      content: <Box
-        borderRadius={ '2.tone.secondary' }
-        backgroundColor={ '1.layer.base' }
-        border
-        boxShadow={ 'borderBox' }
-        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 );
-  }
-}