@rpcbase/client 0.227.0 → 0.231.0

package/ui/Search/SearchHistory/search-history.scss

@@ -1,9 +0,0 @@
-@import "helpers";
-
-.search-history-header {
-  // background: red;
-  color: $gray-500;
-  font-size: 0.875rem;
-
-  // text-transform: uppercase;
-}

package/ui/Search/SearchHistory/useSearchHistory.tsx

@@ -1,57 +0,0 @@
-/* @flow */
-import {useEffect, useState} from "react"
-
-import {useQuery} from "@rpcbase/client/rts"
-import {getUid} from "@rpcbase/client/auth/getUid"
-
-import stripDiacritics from "react-bootstrap-typeahead/cjs/utils/stripDiacritics"
-
-
-const HISTORY_MAX_RESULTS = 10
-
-export const useSearchHistory = () => {
-  const user_id = getUid()
-
-  const [history, setHistory] = useState([])
-  const historyQuery = useQuery("SearchHistory", {_owners: {$in: [user_id]}})
-
-  // Initial load history
-  useEffect(() => {
-    if (!historyQuery.data) return
-
-    // map sorted items
-    const sorted_items = historyQuery.data
-      .filter((item) => !!item.data)
-      .sort((a, b) => new Date(b._created_at) - new Date(a._created_at))
-      .map((item) => {
-        const query = item.data.query
-        return {
-          query,
-          query_key: stripDiacritics(query.toLowerCase()),
-          timestamp: new Date(item._created_at),
-        }
-      })
-
-    // add values and check for unicity
-    const results = []
-    for (let i = 0; i < sorted_items.length; i++) {
-      // stop if we have reached results limit
-      if (results.length > HISTORY_MAX_RESULTS) {
-        break
-      }
-
-      const item = sorted_items[i]
-
-      // before inserting into results, check if there is another occurrence in results
-      if (results.find((o) => o.query_key === item.query_key)) {
-        continue
-      }
-
-      results.push(item)
-    }
-
-    setHistory(results)
-  }, [historyQuery.data, setHistory])
-
-  return history
-}

package/ui/Search/SearchResults/index.tsx

@@ -1,90 +0,0 @@
-import _pick from "lodash/pick"
-import _snakeCase from "lodash/snakeCase"
-
-import {useHashState} from "../../../hashState"
-
-import {useActiveListItemIndex} from "../../helpers/useActiveListItemIndex"
-import {useScrollSelectorIntoView} from "../../helpers/useScrollSelectorIntoView"
-
-// import save_search from "rpc!server/search-indexer/save_search"
-
-export const SearchResults = ({
-  id =  "search-results",
-  query,
-  results,
-  searchContext,
-  onCompleteSearch,
-  children,
-  renderResultItem,
-}) => {
-  const {serializeHashState} = useHashState()
-
-  const getItemId = (i) => `${id}-result-${i}`
-
-  const getLink = (item) =>{
-    return `#${_snakeCase(item)}`
-  }
-
-  const onSelectItem = (selectedIndex) => {
-    // console.log("ON SELEC", selectedIndex)
-    serializeHashState({link: getLink(results[selectedIndex])})
-    // if (window)
-
-    onCompleteSearch()
-    // go to selected item
-    // const targetItem = items[selectedIndex]
-    // applyTargetItem(targetItem)
-  }
-
-  const {activeItemIndex} = useActiveListItemIndex({items: results, onSelectItem})
-
-  useScrollSelectorIntoView(`#${getItemId(activeItemIndex)}`)
-
-  return (
-    <div>
-      <div className="list-group list-group-flush">
-        {results.map((item: any, index: number) => {
-
-          const key = getItemId(index)
-
-          const onClick = () => {
-            onSelectItem(index)
-          }
-
-          return (
-            <a
-              id={key}
-              key={key}
-              className={cx(
-                "list-group-item list-group-item-action d-flex justify-content-between align-items-start",
-                {active: activeItemIndex === index},
-              )}
-              href={getLink(item)}
-              onClick={onClick}
-            >
-              <div className="ms-2 me-auto">
-                {renderResultItem(item, index)}
-                {/* {Object.keys(item.highlight).map((highlightKey, j) => (
-                  <div
-                    key={`highlight-${j}`}
-                    className="item-highlight"
-                    dangerouslySetInnerHTML={{__html: item.highlight[highlightKey][0]}}
-                  />
-                ))} */}
-                <small className="fst-italic">{"displaySub"}</small>
-              </div>
-              {/* <span className="badge text-bg-light rounded-pill">
-                {item.fuzzy_score?.toFixed(2)}
-              </span> */}
-              {/* <span className="badge bg-primary rounded-pill">{item._score.toFixed(2)}</span> */}
-            </a>
-          )
-
-        })}
-
-        {/* children can be components like search history, etc */}
-        {children}
-      </div>
-    </div>
-  )
-}

package/ui/Search/index.tsx

@@ -1,298 +0,0 @@
-import assert from "assert"
-import {ReactNode, useEffect, useState, useRef, useCallback} from "react"
-import {Typeahead} from "react-bootstrap-typeahead"
-import Overlay from "react-bootstrap/Overlay"
-import _throttle from "lodash/throttle"
-
-import ActivityIndicator from "../ActivityIndicator"
-
-// import ItemContext from "helpers/ItemContext"
-// import {useEnvContext} from "helpers/EnvContext"
-
-import {SearchResults} from "./SearchResults"
-import {SearchHistory} from "./SearchHistory"
-
-// import search_anything from "rpc!server/search-indexer/search_anything"
-// import search_advanced from "rpc!server/search-indexer/advanced/search_advanced"
-// import get_item_info from "rpc!server/items/get_item_info"
-
-import "./search.scss"
-
-// import stripDiacritics from "react-bootstrap-typeahead/cjs/utils/stripDiacritics"
-// TODO: at this point we don't use any rbt features, it's best to remove it from here
-// and reimplement the token + input rendering ourselves
-
-const MIN_SEARCH_LENGTH = 2
-// TODO: i18n placeholder
-const PLACEHOLDER = "Search..."
-
-export const Search = ({
-  id = "search-input",
-  minLength = MIN_SEARCH_LENGTH,
-  onSearch,
-  renderResultItem,
-}: {
-  id?: string,
-  minLength?: number
-  onSearch: (queryStr: string) => Promise<Array<any>>
-  renderResultItem: (item: any, index: number) => ReactNode
-}) => {
-  // const envContext = useEnvContext()
-  // const itemContext = useContext(ItemContext)
-  const typeaheadRef = useRef()
-  const wrapperRef = useRef()
-
-  const [results, setResults] = useState<Array<any>>([])
-  const [isLoading, setIsLoading] = useState(false)
-  const [isFocused, setIsFocused] = useState(false)
-  const [showResults, setShowResults] = useState(false)
-  const [currentInputValue, setCurrentInputValue] = useState("")
-
-  const [selected, setSelected] = useState([{id: null, name: ""}])
-
-  const onShortcutToggle = () => {
-    if (!showResults) {
-      typeaheadRef.current?.focus()
-    }
-    if (showResults) {
-      setShowResults(false)
-    }
-  }
-
-  useEffect(() => {
-    // this event triggerred from hot keys in router as it must be a global listener
-    document.body.addEventListener("toggle-search-anything", onShortcutToggle)
-
-    return () => document.body.removeEventListener("toggle-search-anything", onShortcutToggle)
-  }, [])
-
-  useEffect(() => {
-    // TODO: do not load if name in cache?
-    // TODO: reapply selection when navigation changes
-    // if (itemContext.id && selected.length > 0 && itemContext.id !== selected[0]?.id) {
-    //   const load = async() => {
-    //     const res = await get_item_info({id: itemContext.id, col: itemContext.col})
-    //     assert(res.status === "ok")
-    //     setSelected([{id: itemContext.id, col: itemContext.col, name: res.name}])
-    //   }
-    //   load()
-    // }
-  // }, [itemContext, selected, setSelected])
-  }, [])
-
-  const onFocus = (e: SyntheticFocusEvent<HTMLElement>) => {
-    setShowResults(true)
-    setIsFocused(true)
-
-    // TODO: we should only select it when we are sure the user didn't lose focus
-    // by focusing out of the tab for instance
-    // Select the input text when focusing
-    typeaheadRef.current.getInput().select()
-    // if (e.type === "click") {
-    //   return
-    // }
-  }
-
-  const onBlur = () => {
-    console.log("onBlur: disabling menu")
-    // TODO: we should hide the menu in most blur cases
-    setIsFocused(false)
-  }
-
-  const onChange = (selection) => {
-    assert([0, 1].includes(selection.length), "unknown selection length")
-
-    console.log("selection change", selection)
-
-    if (selection.length === 0) {
-      console.log("apply selection change")
-      setSelected([])
-      return
-    }
-  }
-
-  const onSearchCallback = useRef(
-    _throttle(
-      async(queryStr: string) => {
-        // used to not set loader before 100ms delay (if search is too fast)
-        const tm = setTimeout(() => {
-          setIsLoading(true)
-        }, 100)
-
-        const searchResults = await onSearch(queryStr)
-
-        setResults(searchResults)
-        clearTimeout(tm)
-        setIsLoading(false)
-      },
-      200,
-      {leading: true, trailing: true},
-    ),
-  ).current
-
-  // const onSearchAdvanced = useRef(
-  //   _throttle(
-  //     async(str: string) => {
-  //       const search_context = selected[0]
-  //       let res
-  //       // TMP
-  //       try {
-  //         // res = await search_advanced({
-  //         //   group_id: envContext.groupId,
-  //         //   query: str,
-  //         //   search_context,
-  //         // })
-  //         console.log("TMP: search advanced is disabled", search_context, search_advanced)
-  //       } catch (err) {
-  //         console.log("advanced search got error", err)
-  //         return
-  //       }
-  //       console.log("onSearchAdvanced res", res)
-  //     },
-  //     1000,
-  //     {leading: false},
-  //   ),
-  // ).current
-
-  // perform search when input changes
-  useEffect(() => {
-    const val = currentInputValue
-    if (val.length >= minLength) {
-      onSearchCallback(val)
-    } else {
-      console.log("TODO: search input < minLength, clear results")
-    }
-  }, [currentInputValue])
-
-  const onInputChange = (v) => {
-    setCurrentInputValue(v)
-  }
-
-  const onHideResults = (e) => {
-    // console.log("hide results wow", e)
-    // when clicking on anything inside the input, we do not close menu
-    if (e instanceof MouseEvent) {
-      const {target} = e
-      if (wrapperRef.current?.contains(target)) {
-        return
-      }
-    }
-    // also blur the input when closing the menu
-    // typeaheadRef.current?.clear()
-    typeaheadRef.current?.blur()
-    setShowResults(false)
-  }
-
-  // clears the input (but preserves the token "scope" if there is one)
-  const getClearHandler = (onClear) => () => {
-    typeaheadRef.current?.clear()
-    typeaheadRef.current?.focus()
-
-    // requestAnimationFrame(() => {
-    //   // this.typeaheadRef.current?.focus()
-    // })
-  }
-
-  const setSearchInput = (v) => {
-    setCurrentInputValue(v)
-  }
-
-  const onCompleteSearch = useCallback(() => {
-    typeaheadRef.current?.blur()
-    typeaheadRef.current?.clear()
-    setCurrentInputValue("")
-    setShowResults(false)
-  }, [])
-
-  const showClearButton = () => !isLoading && currentInputValue !== ""
-
-  const hasAdvancedResults = false
-
-  return (
-    <>
-      <div
-        id={id}
-        ref={wrapperRef}
-        className="d-flex mx-auto w-100"
-        // style={{height: 32, position: "relative", maxWidth: 804}}
-        style={{height: 32, position: "relative"}}
-      >
-        <Typeahead
-          id={`${id}-typeahead`}
-          ref={typeaheadRef}
-          className={cx("search-typeahead w-100", {"is-focused": isFocused})}
-          placeholder={PLACEHOLDER}
-          inputProps={{
-            placeholder: PLACEHOLDER,
-          }}
-          labelKey={"name"}
-          renderMenu={() => null}
-          onInputChange={onInputChange}
-          multiple
-          allowNew={true} // is this prop doing anything in our case?
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onChange={onChange}
-          selected={selected}
-          options={selected}
-        >
-          {({onClear}) => (
-            <div className="rbt-aux">
-              {showClearButton() && (
-                <button
-                  className="btn btn-link link-secondary me-2"
-                  onClick={getClearHandler(onClear)}
-                  style={{display: "block", zIndex: 1, pointerEvents: "auto"}}
-                >
-                  clear
-                </button>
-              )}
-              {isLoading && <ActivityIndicator />}
-              {hasAdvancedResults && (
-                <div>
-                  <kbd>⌘+↵</kbd>
-                </div>
-              )}
-            </div>
-          )}
-        </Typeahead>
-      </div>
-
-      <Overlay
-        target={wrapperRef.current}
-        container={wrapperRef.current}
-        placement="bottom"
-        show={showResults}
-        transition={false}
-        onHide={onHideResults}
-        rootClose={true}
-        rootCloseEvent={"mousedown"}
-      >
-        {({style, ...overlayProps}) => (
-          <div
-            id={`${id}-overlay`}
-            {...overlayProps}
-            className="shadow-lg"
-            style={{
-              ...style,
-              top: 7,
-              left: -1,
-              right: -3,
-            }}
-          >
-            <SearchResults
-              id={id}
-              query={currentInputValue.trim()}
-              results={results}
-              onCompleteSearch={onCompleteSearch}
-              searchContext={selected[0]}
-              renderResultItem={renderResultItem}
-            >
-              <SearchHistory setSearchInput={setSearchInput} />
-            </SearchResults>
-          </div>
-        )}
-      </Overlay>
-    </>
-  )
-}

package/ui/SelectPills/index.tsx

@@ -1,96 +0,0 @@
-import "./select-pills.scss"
-
-
-type Props = {
-  direction?: "row" | "col";
-  size?: "md" | "sm";
-  items: Array<{ key: string; icon?: string; name: string; description?: string }>;
-  onChange: (key: string) => void;
-  activeKey?: string;
-};
-
-export const SelectPills= ({
-  direction = "row",
-  size = "md",
-  items,
-  onChange,
-  activeKey,
-}: Props) => {
-  const handleSelectType = (type: string) => () => {
-    onChange(type)
-  }
-
-  const renderRow = () => {
-    const iconSize = size === "sm" ? "24px" : "32px"
-
-    return (
-      <div className={`select-pills mb-3 card-group direction-row`}>
-        {items.map((item, index) => (
-          <div
-            key={`pill-${index}`}
-            id={`select-pill-${item.key}`}
-            className={`card select-pill ${activeKey === item.key ? "active" : ""}`}
-            onClick={handleSelectType(item.key)}
-          >
-            <div className={`card-body d-flex p-2 ${item.description ? "flex-row" : "flex-column"}`}>
-              {item.icon && (
-                <img
-                  className="d-flex mx-auto align-self-center"
-                  width={iconSize}
-                  height={iconSize}
-                  src={item.icon}
-                />
-              )}
-              <div className={`flex-column ${item.description ? "ms-3" : "text-center mt-2"}`}>
-                <h6 className="card-title mb-1 fw-bold">{item.name}</h6>
-                {item.description && (<p className="card-text">{item.description}</p>)}
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    )
-  }
-
-  const renderCol = () => {
-    const iconSize = size === "sm" ? "24px" : "32px"
-
-    return (
-      <div className="select-pills">
-        {items.map((item, index) => (
-          <div
-            key={`pill-${index}`}
-            id={`select-pill-${item.key}`}
-            className={`card select-pill direction-col ${activeKey === item.key ? "active" : ""}`}
-            onClick={handleSelectType(item.key)}
-          >
-            <div className="card-body d-flex flex-row px-2 py-3">
-              {item.icon && (
-                <img
-                  className="d-flex align-self-center me-2"
-                  style={{width: iconSize, height: iconSize}}
-                  src={item.icon}
-                />
-              )}
-
-              {size === "md" && (
-                <div className="flex-column">
-                  <h6 className="card-title mb-1 fw-bold">{item.name}</h6>
-                  <p className="card-text">{item.description}</p>
-                </div>
-              )}
-              {size === "sm" && (
-                <div className="">
-                  <h6 className="card-title my-0 d-inline-block me-1 fw-bold">{item.name}</h6>
-                  <span className="card-text">{item.description}</span>
-                </div>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-    )
-  }
-
-  return direction === "row" ? renderRow() : renderCol()
-}

package/ui/SelectPills/select-pills.scss

@@ -1,66 +0,0 @@
-@import "helpers";
-
-.select-pills {
-  .card.select-pill {
-    cursor: pointer;
-    user-select: none;
-
-    &:hover {
-      background: $light;
-    }
-
-    &:active {
-      background: $gray-300;
-    }
-
-    &.active {
-      background: $blue-300;
-      color: $white;
-    }
-  }
-
-  .select-pill {
-    .card-text {
-      color: $gray-600;
-    }
-
-    &.active,
-    &:active {
-      .card-text {
-        color: $gray-200;
-      }
-    }
-  }
-
-  .card.select-pill.direction-col {
-    cursor: pointer;
-    user-select: none;
-    border-radius: 0;
-    border-bottom: none;
-
-    &:first-child {
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
-    }
-
-    &:last-child {
-      border-bottom-left-radius: 3px;
-      border-bottom-right-radius: 3px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-    }
-
-    &:hover {
-      background: $light;
-    }
-
-    &:active {
-      background: $gray-300;
-    }
-
-    &.active {
-      background: $primary;
-      border-color: darken($primary, 15%);
-      color: $white;
-    }
-  }
-}