amotify 0.0.2 → 0.0.4

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

@@ -0,0 +1,451 @@
+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 );
+  }
+}