From 4feff622cb933e9c65b544b01437f28f197693d2 Mon Sep 17 00:00:00 2001 From: hidden4003 Date: Sat, 20 Aug 2022 21:32:26 +0300 Subject: [PATCH] Custom select (#394) * Revert "add @material/tailwind (#392)" This reverts commit 9dcb46ad7c6808975fa5b8dd09b2b851d14eff50. * make custom select --- package.json | 1 - src/components/Input/ComboBox.tsx | 72 +++++ src/components/Input/Select.tsx | 10 +- src/core/app-hmr.tsx | 6 +- src/core/app.tsx | 6 +- .../Components/EpisodeLinkPanel.tsx | 15 +- tailwind.config.js | 6 +- yarn.lock | 279 +----------------- 8 files changed, 89 insertions(+), 306 deletions(-) create mode 100644 src/components/Input/ComboBox.tsx diff --git a/package.json b/package.json index 466fb4116..0f17bc1b8 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "@fontsource/open-sans": "^4.5.10", "@headlessui/react": "^1.6.6", "@lagunovsky/redux-react-router": "^4.0.0", - "@material-tailwind/react": "^1.2.3", "@mdi/js": "^7.0.96", "@mdi/react": "^1.6.1", "@microsoft/signalr": "^6.0.7", diff --git a/src/components/Input/ComboBox.tsx b/src/components/Input/ComboBox.tsx new file mode 100644 index 000000000..e30290eca --- /dev/null +++ b/src/components/Input/ComboBox.tsx @@ -0,0 +1,72 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { find } from 'lodash'; +import { Icon } from '@mdi/react'; +import { mdiChevronUp, mdiChevronDown } from '@mdi/js'; +import cx from 'classnames'; + +type Props = { + options: Array<{ label: string; value: string; }>; + value: string; + onChange: (optionValue: string, label: string) => void; + className?: string; +}; + +const SelectInput = ({ value, onClick, open }) => ( + +); + +const SelectOption = ({ label, value, onClick }) => ( +
  • { onClick(value, label); }} key={`listbox-item-${value}`} role="option" className="text-white cursor-default hover:bg-highlight-1 hover:text-white select-none relative py-2 pl-3 pr-9"> +
    + {label} +
    +
    • +); + +const ComboBox = ({ options, value, onChange, className }: Props) => { + const [inputValue, setInputValue] = useState(''); + const [open, setOpen ] = useState(false); + const listRef = useRef(null); + + useEffect(() => { + const option = find(options, ['value', value]); + setInputValue(option?.label ?? ''); + }, [value]); + + const selectOption = (optionValue, label) => { + onChange(optionValue, label); + setInputValue(label); + setOpen(false); + }; + + const toggleDropdown = () => { + setOpen(!open); + const ref = listRef.current; + if (ref !== null) { + ref.focus(); + } + }; + + return ( +
    +
    + +
    setOpen(false)} className={cx('absolute mt-1 w-full z-10 rounded-md bg-background-alt shadow-lg', { hidden: !open })}> +
      + {options.map(item => ())} +
    +
    +
    +
    + ); +}; + + +export default ComboBox; \ No newline at end of file diff --git a/src/components/Input/Select.tsx b/src/components/Input/Select.tsx index e4742ce3c..7b28effb6 100644 --- a/src/components/Input/Select.tsx +++ b/src/components/Input/Select.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Icon } from '@mdi/react'; import { mdiChevronDown } from '@mdi/js'; -import cx from 'classnames'; type Props = { id: string; @@ -10,25 +9,24 @@ type Props = { className?: string; children: any; label?: string; - inline?: boolean; }; function Select(props:Props) { const { id, value, className, children, onChange, - label, inline, + label, } = props; return (
    -