Custom select (ShokoAnime#394)

* Revert "add @material/tailwind (ShokoAnime#392)"

This reverts commit 9dcb46a.

* make custom select

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",

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 }) => (
+  <button onClick={onClick} type="button" className="relative w-full bg-background-alt border border-background-border rounded-md shadow-lg pl-2 pr-10 py-2 text-left cursor-default focus:outline-none focus:border-highlight-1">
+    <span className="flex items-center">
+        <span className="ml-3 block truncate">{value}</span>
+    </span>
+    <span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+      <Icon className="cursor-pointer" path={open ? mdiChevronUp : mdiChevronDown} size={1} />
+    </span>
+  </button>
+);
+
+const SelectOption = ({ label, value, onClick }) => (
+  <li 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">
+    <div className="flex items-center">
+      <span className="ml-3 block font-normal truncate">{label}</span>
+    </div>
+  </li>
+);
+
+const ComboBox = ({ options, value, onChange, className }: Props) => {
+  const [inputValue, setInputValue] = useState('');
+  const [open, setOpen ] = useState(false);
+  const listRef = useRef<HTMLDivElement>(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 (
+  <div className={className}>
+    <div className="relative">
+      <SelectInput value={inputValue} open={open} onClick={toggleDropdown}/>
+      <div ref={listRef} onBlur={() => setOpen(false)} className={cx('absolute mt-1 w-full z-10 rounded-md bg-background-alt shadow-lg', { hidden: !open })}>
+        <ul tabIndex={-1} role="listbox" className="max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+          {options.map(item => (<SelectOption {...item} onClick={selectOption} />))}
+        </ul>
+      </div>
+    </div>
+  </div>
+  );
+};
+
+
+export default ComboBox;

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 (
     <div className={`${className ?? ''}`}>
-      <label className={cx('font-open-sans', { 'flex flex-row justify-center': inline })} htmlFor={id}>
+      <label className="font-open-sans" htmlFor={id}>
         {label && (
-          <div className={cx('font-semibold', { 'mb-1.5': !inline, 'flex items-center mr-3': inline })}>
+          <div className="mb-1.5 font-semibold">
             {label}
           </div>
         )}
         <div className="w-auto relative">
-          <select id={id} value={value} onChange={onChange} className="w-full appearance-none rounded pl-2 py-2 pr-8 focus:shadow-none focus:outline-none bg-background-alt border border-background-border focus:border-highlight-1 transition duration-300 ease-in-out">
+          <select id={id} value={value} onChange={onChange} className="w-full appearance-none rounded pl-2 py-1.5 pr-8 focus:shadow-none focus:outline-none bg-background-alt border border-background-border focus:border-highlight-1 transition duration-300 ease-in-out">
             {children}
           </select>
           <div className="pointer-events-none absolute inset-y-0 right-0 pr-2 py-2">

src/core/app-hmr.tsx

@@ -5,14 +5,10 @@ import store from './store';
 import Router from './router';
 import ErrorBoundary from '../pages/error/ErrorPage';
 
-import { ThemeProvider } from '@material-tailwind/react';
-
 const App = () => (
   <Provider store={store}>
     <ErrorBoundary>
-      <ThemeProvider>
-        <Router history={history} />
-      </ThemeProvider>
+      <Router history={history} />
     </ErrorBoundary>
   </Provider>
 );

src/core/app.tsx

@@ -5,14 +5,10 @@ import store from './store';
 import Router from './router';
 import ErrorBoundary from '../pages/error/ErrorPage';
 
-import { ThemeProvider } from '@material-tailwind/react';
-
 const App = () => (
   <Provider store={store}>
     <ErrorBoundary>
-      <ThemeProvider>
-        <Router history={history} />
-      </ThemeProvider>
+      <Router history={history} />
     </ErrorBoundary>
   </Provider>
 );

src/pages/utilities/UnrecognizedUtilityTabs/Components/EpisodeLinkPanel.tsx

@@ -5,9 +5,9 @@ import ShokoPanel from '../../../../components/Panels/ShokoPanel';
 import type { SeriesAniDBSearchResult } from '../../../../core/types/api/series';
 import { FileType } from '../../../../core/types/api/file';
 import cx from 'classnames';
-import { Select, Option } from '@material-tailwind/react';
 import Input from '../../../../components/Input/Input';
 import Button from '../../../../components/Input/Button';
+import ComboBox from '../../../../components/Input/ComboBox';
 
 type Props = {
   files: Array<FileType>;
@@ -18,7 +18,11 @@ type Props = {
 function EpisodeLinkPanel(props: Props) {
   const { selectedSeries, files } = props;
 
-  const [ epType, setEpType ] = useState('Episode');
+  const [ epType, setEpType ] = useState('1');
+  const episodeOptions = [
+    { value: '0', label: 'Special' },
+    { value: '1', label: 'Episode' },
+  ];
 
   const renderTitle = () => (
     <div className="flex gap-x-1 items-center">
@@ -30,12 +34,7 @@ function EpisodeLinkPanel(props: Props) {
   return (
     <ShokoPanel title={renderTitle()} className="w-1/2">
       <div className="flex flex-row space-x-3 justify-end">
-        <div className="w-72">
-          <Select label="Type" value={epType} onChange={value => setEpType(`${value}`)}>
-            <Option>Special</Option>
-            <Option>Episode</Option>
-          </Select>
-        </div>
+        <ComboBox className="w-72" options={episodeOptions} value={epType} onChange={value => setEpType(`${value}`)} />
         <Input inline label="Range Start" type="text" id="range" value="" onChange={() => {}} className="w-40"/>
         <Button className="bg-background-alt py-2 px-2 mr-2" onClick={() => {}}>Range Fill</Button>
       </div>

tailwind.config.js

@@ -1,5 +1,3 @@
-const withMT = require("@material-tailwind/react/utils/withMT");
-
 function withOpacityValue(variable) {
   return ({ opacityValue }) => {
     if (opacityValue === undefined) {
@@ -9,7 +7,7 @@ function withOpacityValue(variable) {
   };
 }
 
-module.exports = withMT({
+module.exports = {
   plugins: [
       require('@tailwindcss/line-clamp'),
   ],
@@ -60,4 +58,4 @@ module.exports = withMT({
   variants: {
     margin: ['first'],
   },
-});
+}