devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Solved a problem with the record page not being able to reload

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-03-28 12:28:24 +00:00
parent 2657cb409c
commit b64593df90
3 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/Low/Select.tsx
View File

@@ -1,6 +1,6 @@
import clsx from "clsx";
import {ComponentProps, useEffect, useState} from "react";
import ReactSelect from "react-select";
import ReactSelect, {GroupBase, StylesConfig} from "react-select";
interface Option {
[key: string]: any;
@@ -16,9 +16,10 @@ interface Props {
placeholder?: string;
onChange: (value: Option | null) => void;
isClearable?: boolean;
styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
}
export default function Select({value, defaultValue, options, placeholder, disabled, onChange, isClearable}: Props) {
export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable}: Props) {
const [target, setTarget] = useState<HTMLElement>();
useEffect(() => {
@@ -27,33 +28,39 @@ export default function Select({value, defaultValue, options, placeholder, disab
return (
<ReactSelect
className={clsx(
"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
)}
className={
styles
? undefined
: clsx(
"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
)
}
options={options}
value={value}
onChange={onChange}
onChange={onChange as any}
placeholder={placeholder}
menuPortalTarget={target}
defaultValue={defaultValue}
styles={{
menuPortal: (base) => ({...base, zIndex: 9999}),
control: (styles) => ({
...styles,
paddingLeft: "4px",
border: "none",
outline: "none",
":focus": {
styles={
styles || {
menuPortal: (base) => ({...base, zIndex: 9999}),
control: (styles) => ({
...styles,
paddingLeft: "4px",
border: "none",
outline: "none",
},
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
":focus": {
outline: "none",
},
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}
}
isDisabled={disabled}
isClearable={isClearable}
/>