Initial commit

web/app/components/base/select-support-portal/index.tsx

@@ -0,0 +1,73 @@
+'use client'
+import React, { FC, useState } from 'react'
+import PortalToFollowElem from '../portal-to-follow-elem'
+import { ChevronDownIcon, CheckIcon } from '@heroicons/react/24/outline'
+import cn from 'classnames'
+
+export interface ISelectProps<T> {
+  value: T
+  items: { value: T, name: string }[]
+  onChange: (value: T) => void
+}
+
+const Select: FC<ISelectProps<string | number>> = ({
+  value,
+  items,
+  onChange
+}) => {
+  const [controlHide, setControlHide] = useState(0)
+  const itemsElement = items.map(item => {
+    const isSelected = item.value === value
+    return (
+      <div
+        key={item.value}
+        className={cn('relative h-9 leading-9 px-10 rounded-lg text-sm text-gray-700 hover:bg-gray-100')}
+        onClick={() => {
+          onChange(item.value)
+          setControlHide(Date.now())
+        }}
+      >
+        {isSelected && (
+          <div className='absolute left-4 top-1/2 translate-y-[-50%] flex items-center justify-center w-4 h-4 text-primary-600'>
+            <CheckIcon width={16} height={16}></CheckIcon>
+          </div>
+        )}
+        {item.name}
+      </div>
+    )
+  })
+  return (
+    <div>
+      <PortalToFollowElem
+        portalElem={(
+          <div
+            className='p-1 rounded-lg bg-white cursor-pointer'
+            style={{
+              boxShadow: '0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05)'
+            }}
+          >
+            {itemsElement}
+          </div>
+        )}
+        controlHide={controlHide}
+      >
+        <div className='relative '>
+          <div className='flex items-center h-9 px-3 gap-1 cursor-pointer  hover:bg-gray-50'>
+            <div className='text-sm text-gray-700'>{items.find(i => i.value === value)?.name}</div>
+            <ChevronDownIcon width={16} height={16} />
+          </div>
+          {/* <div
+            className='absolute z-50 left-0 top-9 p-1 w-[112px] rounded-lg bg-white'
+            style={{
+              boxShadow: '0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05)'
+            }}
+          >
+            {itemsElement}
+          </div> */}
+        </div>
+      </PortalToFollowElem>
+    </div>
+
+  )
+}
+export default React.memo(Select)