Fix/application configuration preview style (#597)

This commit is contained in:
zxhlyh 2023-07-19 12:41:35 +08:00 • committed by GitHub
commit 753e5f1500
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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"