diff --git a/src/components/table/style.tsx b/src/components/table/style.tsx index 7bfe813..e56cf75 100644 --- a/src/components/table/style.tsx +++ b/src/components/table/style.tsx @@ -13,7 +13,7 @@ export const Table = styled.default.table` border-collapse: collapse; margin: 0; table-layout: fixed; - background-color: ${Theme.blackWithOpacity}; + background-color: ${Theme.colors.gray900}; `; export const Thead = styled.default.thead` diff --git a/src/drop-down/index.tsx b/src/drop-down/index.tsx deleted file mode 100644 index 42e3ce8..0000000 --- a/src/drop-down/index.tsx +++ /dev/null @@ -1,209 +0,0 @@ -/** - * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. - */ -import {useState, useEffect, useRef} from 'react'; - -import {IChannel} from 'interfaces'; -import {Label} from 'components/label'; - -import {DropdownContainer, DropdownInput, DropdownMenu, DropdownMenuItem} from './style'; - -const keys = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape']; - -interface IDropdown { - itemKey: string; - searchTerm?: string; - onSelect: (key: string) => void; - items: IChannel[]; - label: string; - name: string; - className?: string; -} -const maxNumOfItemsShown = 30; - -export const Dropdown = (props: IDropdown): JSX.Element => { - const {itemKey, searchTerm, onSelect, items, label, name, className} = props; - const [showDropdownMenu, setShowDropdownMenu] = useState(false); - const [input, setInput] = useState(searchTerm || ''); - const [filteredItems, setFilteredItems] = useState(items); - const [selectedIndex, setSelectedIndex] = useState(0); - const allItemsRef = useRef([]); - const parentElementRef = useRef(null); - const scrollSelectedItemInView = index => { - if (!parentElementRef.current) { - return; - } - - const dropdownMenu = parentElementRef.current; - const menuItems = allItemsRef.current; - - if (!menuItems) { - return; - } - - const menuItem = menuItems[index]; - - if (!menuItem) { - return; - } - - const isOutOfUpperView = menuItem.offsetTop < dropdownMenu.scrollTop; - const isOutOfLowerView = (menuItem.offsetTop + menuItem.clientHeight) > (dropdownMenu.scrollTop + dropdownMenu.clientHeight); - - if (isOutOfUpperView) { - dropdownMenu.scrollTop = menuItem.offsetTop; - } else if (isOutOfLowerView) { - dropdownMenu.scrollTop = (menuItem.offsetTop + menuItem.clientHeight) - dropdownMenu.clientHeight; - } - }; - - const setSelectInput = value => { - setInput(value); - onSelect(value); - }; - - const handleClickOutside = event => { - if (!parentElementRef.current || parentElementRef.current.contains(event.target)) { - return; - } - - if (!filteredItems.length) { - setSelectInput(''); - } - - setShowDropdownMenu(false); - onSelect(input); - }; - - useEffect(() => { - scrollSelectedItemInView(selectedIndex); - }, [selectedIndex]); - - useEffect(() => { - document.addEventListener('click', handleClickOutside, true); - - return () => { - document.removeEventListener('click', handleClickOutside, true); - }; - }); - - useEffect(() => { - const filteredItems = items.filter(item => { - if (item[itemKey].toLowerCase().indexOf(input.toLowerCase()) > -1) { - return true; - } - - return false; - }); - - if (filteredItems.length > 0) { - setSelectedIndex(0); - } - - setFilteredItems(filteredItems); - }, [input, items, itemKey]); - - const selectItemInFocusBy = offset => { - const lastIndex = filteredItems.length - 1; - const nextIndex = selectedIndex + offset; - - if (nextIndex > lastIndex) { - setSelectedIndex(0); - } else if (nextIndex < 0) { - setSelectedIndex(lastIndex); - } else { - setSelectedIndex(nextIndex); - } - }; - - const handleOnKeyDown = event => { - if (keys.indexOf(event.key) === -1) { - return; - } - - const [arrDown, arrUp, enter, escape] = keys; - const moves = { - [arrDown]: 1, - [arrUp]: -1 - }; - const move = moves[event.key]; - - if (move !== undefined) { - event.preventDefault(); - selectItemInFocusBy(move); - } - - if (event.key === enter) { - if (filteredItems[selectedIndex]) { - setSelectInput(filteredItems[selectedIndex][itemKey]); - setShowDropdownMenu(false); - } - } - - if (event.key === escape) { - event.preventDefault(); - setShowDropdownMenu(false); - } - }; - - const selectItem = (index: number) => { - setSelectInput(filteredItems[index][itemKey]); - setSelectedIndex(index); - setShowDropdownMenu(false); - }; - - const generateMenuOptions = () => { - return filteredItems.length - ? filteredItems.slice(0, maxNumOfItemsShown).map((item, index) => { - return ( - allItemsRef.current[index] = ref} - selected={selectedIndex === index} - key={`dropdown-menu-item-${index}`} - onClick={() => selectItem(index)} - > - {item[itemKey]} - - ); - }) - : ( - - No results found - - ); - }; - - const handleInput = ({target}) => { - setInput(target.value); - - if (!showDropdownMenu) { - setShowDropdownMenu(true); - } - }; - - const toggleDropdownMenu = () => setShowDropdownMenu(!showDropdownMenu); - - return ( - - - ); -}; \ No newline at end of file diff --git a/src/drop-down/style.ts b/src/drop-down/style.ts deleted file mode 100644 index 55c734b..0000000 --- a/src/drop-down/style.ts +++ /dev/null @@ -1,59 +0,0 @@ -/** - * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. - */ -import * as styled from 'styled-components'; -import Input from 'components/forms/Input'; -import Theme from 'theme'; - -const {spacing, colors, typography, primaryBorderRadius} = Theme; - -export const DropdownContainer = styled.default.div` - width: 100%; - position: relative; - margin: ${spacing.xSmall} 0; -`; - -export const DropdownInput = styled.default(Input)<{showMenu?: boolean}>` - ${({showMenu}) => showMenu && styled.css` - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - border-bottom-width: 0; - `} -`; - -export const DropdownMenu = styled.default.div` - width: 100%; - overflow-x: hidden; - overflow-y: auto; - top: calc(100% - 4px); - position: absolute; - height: auto; - max-height: 210px; - border: 1px solid ${colors.gray400}; - border-top-width: 0; - z-index: 4; - background-color: ${colors.white}; - border-bottom-left-radius: ${primaryBorderRadius}; - border-bottom-right-radius: ${primaryBorderRadius}; -`; - -export const DropdownMenuItem = styled.default.div<{ - active?: boolean; - disabled?: boolean; - selected?: boolean; -}>` - line-height: ${spacing.large}; - padding: ${spacing.xsmall} ${spacing.medium}; - font-size: ${typography.fontSizeS}; - word-wrap: break-word; - ${({active, selected, disabled}) => styled.css` - background-color: ${active || selected ? colors.gray300 : 'transparent'}; - font-weight: ${selected ? 'bold' : 'normal'}; - color: ${disabled ? colors.gray500 : colors.gray900} - - :hover{ - background-color: ${disabled ? colors.white : colors.gray300}; - cursor: ${disabled ? 'text' : 'pointer'}; - } - `} -`; \ No newline at end of file diff --git a/src/indicator-component/indicators/index.ts b/src/indicator-component/indicators/index.ts deleted file mode 100644 index d5c57e3..0000000 --- a/src/indicator-component/indicators/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -/** - * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. - */ -export * from './indicators'; diff --git a/src/indicator-component/indicators/indicators.tsx b/src/indicator-component/indicators/indicators.tsx deleted file mode 100644 index d86fb20..0000000 --- a/src/indicator-component/indicators/indicators.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. - */ -import React from 'react'; -import {LoadingWheel as Loader} from 'components'; -import {SingleStreamSymbol, OfflineSymbol, MultipleStreamSymbol, Indicator} from './style'; - -export const OfflineIndicator = (): React.JSX.Element => ( - - - -); -export const SingleStreamIndicator = (): React.JSX.Element => ( - - - -); -export const MultiStreamIndicator = (): React.JSX.Element => ( - - - -); -export const LoadingIndicator = (): React.JSX.Element => ( - - - -); diff --git a/src/indicator-component/indicators/style.ts b/src/indicator-component/indicators/style.ts deleted file mode 100644 index 8ebf6b5..0000000 --- a/src/indicator-component/indicators/style.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. - */ -import * as styled from 'styled-components'; - -export const Indicator = styled.default.div` - display: flex; - align-items: center; - justify-content: center; - - /* Target LoadingWheel component by class name */ - .loading-wheel { - flex: 0; - margin: 0; - - & span { - margin: 0; - } - } -`; - -export const IndicatorOutline = styled.default.div` - width: 20px; - height: 20px; - border-radius: 50%; -`; - -export const OfflineSymbol = styled.default(IndicatorOutline)` - border: 3px solid #707070; - background-color: transparent; -`; - -export const SingleStreamSymbol = styled.default(IndicatorOutline)` - background-color: #08BD0B; -`; - -export const MultipleStreamSymbol = styled.default(SingleStreamSymbol)` - width: 1rem; - height: 1rem; - margin-left: -2px; - box-shadow: 9px 0 0 0 #08BD0B; -`; diff --git a/src/indicator-component/publishing-state-indicator.tsx b/src/indicator-component/publishing-state-indicator.tsx deleted file mode 100644 index e1f6b41..0000000 --- a/src/indicator-component/publishing-state-indicator.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/** - * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. - */ -import {JSX} from 'react'; -import {useSelector} from 'react-redux'; -import {AppStore} from 'store'; -import {SingleStreamIndicator, OfflineIndicator, MultiStreamIndicator, LoadingIndicator} from './indicators'; - -interface IPublishingStateIndicator { - row: any; - publishingStateKey: string; - idKey: string; -} - -const PublishingStateIndicator = ({row, publishingStateKey, idKey}: IPublishingStateIndicator): JSX.Element => { - const id = row[idKey] as string; - const publishingState = useSelector((state: AppStore) => publishingStateKey && state[publishingStateKey as keyof AppStore]?.publishingState); - const rowPublishingState = publishingState.find((record: any) => record[idKey] === id); - - if (!publishingState) { - return ; - } - - if (!rowPublishingState) { - return ; - } - - if (!rowPublishingState.isOnline) { - return ; - } - - if (rowPublishingState.multipleStreams) { - return ; - } - - return ; -}; - -export default PublishingStateIndicator; diff --git a/src/utility/contexts.ts b/src/utility/contexts.ts deleted file mode 100644 index a0e117b..0000000 --- a/src/utility/contexts.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. - */ -import {createContext} from 'react'; - -export const ViewContext = createContext(''); diff --git a/src/utility/index.ts b/src/utility/index.ts index adb96ac..de12c73 100644 --- a/src/utility/index.ts +++ b/src/utility/index.ts @@ -1,7 +1,6 @@ /** * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved. */ -export * from './contexts'; export * from './date'; export * from './sort'; export * from './validators';