From b614604effda51ca7c76c8901be78ced62b642b2 Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Thu, 28 May 2020 16:17:13 +0200 Subject: Update TS migration to current dev, move to a common package, rename to frontend --- .../frontend/src/main/components/app/index.scss | 21 +++++++++ .../frontend/src/main/components/app/index.tsx | 50 ++++++++++++++++++++++ plugins/base/frontend/src/main/components/root.tsx | 43 +++++++++++++++++++ .../frontend/src/main/components/search/search.tsx | 45 +++++++++++++++++++ .../frontend/src/main/components/search/types.ts | 26 +++++++++++ 5 files changed, 185 insertions(+) create mode 100644 plugins/base/frontend/src/main/components/app/index.scss create mode 100644 plugins/base/frontend/src/main/components/app/index.tsx create mode 100644 plugins/base/frontend/src/main/components/root.tsx create mode 100644 plugins/base/frontend/src/main/components/search/search.tsx create mode 100644 plugins/base/frontend/src/main/components/search/types.ts (limited to 'plugins/base/frontend/src/main/components') diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss new file mode 100644 index 00000000..c267bc6e --- /dev/null +++ b/plugins/base/frontend/src/main/components/app/index.scss @@ -0,0 +1,21 @@ +@import "src/main/scss/index.scss"; + +html, +.app-root { + height: 100%; +} + +.search-root { + margin: 0; + padding: 0; + + background: var(--ring-content-background-color); + + font-family: var(--ring-font-family); + font-size: var(--ring-font-size); + line-height: var(--ring-line-height); +} + +.search-content { + padding: 24px 41px; +} diff --git a/plugins/base/frontend/src/main/components/app/index.tsx b/plugins/base/frontend/src/main/components/app/index.tsx new file mode 100644 index 00000000..1a51e699 --- /dev/null +++ b/plugins/base/frontend/src/main/components/app/index.tsx @@ -0,0 +1,50 @@ +import React, {useEffect, useRef, useState} from 'react'; +import {WithFuzzySearchFilter} from '../search/search'; +import './index.scss'; + +function useComponentVisible(initialIsVisible: boolean) { + const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible); + const ref = useRef(null); + + const handleHideDropdown = (event: KeyboardEvent) => { + if (event.key === "Escape") { + setIsComponentVisible(false); + } + }; + + const handleClickOutside = (event : MouseEvent)=> { + // @ts-ignore + if (ref.current && !ref.current.contains(event.target)) { + setIsComponentVisible(false); + } + }; + + useEffect(() => { + document.addEventListener("keydown", handleHideDropdown, false); + document.addEventListener("click", handleClickOutside, false); + return () => { + document.removeEventListener("keydown", handleHideDropdown, false); + document.removeEventListener("click", handleClickOutside, false); + }; + }); + + return { ref, isComponentVisible, setIsComponentVisible }; +} + +const App: React.FC = () => { + const { + ref, + isComponentVisible, + setIsComponentVisible + } = useComponentVisible(false); + + return
+ {isComponentVisible && ()} + {!isComponentVisible && ( + setIsComponentVisible(true)}> + + )} +
+} + +export default App diff --git a/plugins/base/frontend/src/main/components/root.tsx b/plugins/base/frontend/src/main/components/root.tsx new file mode 100644 index 00000000..70ed9550 --- /dev/null +++ b/plugins/base/frontend/src/main/components/root.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import {render} from 'react-dom'; +import RedBox from 'redbox-react'; + +import App from "./app"; +import './app/index.scss'; + +const appEl = document.getElementById('searchBar'); +const rootEl = document.createElement('div'); + +let renderApp = () => { + render( + , + rootEl + ); +}; + +// @ts-ignore +if (module.hot) { + const renderAppHot = renderApp; + const renderError = (error: Error) => { + render( + , + rootEl + ); + }; + + renderApp = () => { + try { + renderAppHot(); + } catch (error) { + renderError(error); + } + }; + + // @ts-ignore + module.hot.accept('./app', () => { + setTimeout(renderApp); + }); +} + +renderApp(); +appEl!.appendChild(rootEl); diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx new file mode 100644 index 00000000..f0df0c98 --- /dev/null +++ b/plugins/base/frontend/src/main/components/search/search.tsx @@ -0,0 +1,45 @@ +import React, {useCallback, useState} from 'react'; +import {Select} from '@jetbrains/ring-ui'; +import '@jetbrains/ring-ui/components/input-size/input-size.scss'; +import {IWindow, Option, Props, State} from "./types"; + +const WithFuzzySearchFilterComponent: React.FC = ({data}: Props) => { + const [selected, onSelected] = useState