Fix/application configuration preview style (#597)

This commit is contained in:
zxhlyh
2023-07-19 12:41:35 +08:00
committed by GitHub
parent a6af8e5d8f
commit 753e5f1500
11 changed files with 86 additions and 79 deletions

View File

@@ -31,6 +31,7 @@ export type ISelectProps = {
allowSearch?: boolean
bgClassName?: string
placeholder?: string
overlayClassName?: string
}
const Select: FC<ISelectProps> = ({
className,
@@ -40,6 +41,7 @@ const Select: FC<ISelectProps> = ({
onSelect,
allowSearch = true,
bgClassName = 'bg-gray-100',
overlayClassName,
}) => {
const [query, setQuery] = useState('')
const [open, setOpen] = useState(false)
@@ -48,9 +50,9 @@ const Select: FC<ISelectProps> = ({
useEffect(() => {
let defaultSelect = null
const existed = items.find((item: Item) => item.value === defaultValue)
if (existed) {
if (existed)
defaultSelect = existed
}
setSelectedItem(defaultSelect)
}, [defaultValue])
@@ -104,7 +106,7 @@ const Select: FC<ISelectProps> = ({
</div>
{filteredItems.length > 0 && (
<Combobox.Options className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
<Combobox.Options className={`absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm ${overlayClassName}`}>
{filteredItems.map((item: Item) => (
<Combobox.Option
key={item.value}
@@ -155,9 +157,9 @@ const SimpleSelect: FC<ISelectProps> = ({
useEffect(() => {
let defaultSelect = null
const existed = items.find((item: Item) => item.value === defaultValue)
if (existed) {
if (existed)
defaultSelect = existed
}
setSelectedItem(defaultSelect)
}, [defaultValue])
@@ -173,7 +175,7 @@ const SimpleSelect: FC<ISelectProps> = ({
>
<div className={`relative h-9 ${wrapperClassName}`}>
<Listbox.Button className={`w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer ${className}`}>
<span className={classNames("block truncate text-left", !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span>
<span className={classNames('block truncate text-left', !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDownIcon
className="h-5 w-5 text-gray-400"