fix color picker touch

This commit is contained in:
Simon Larsen 2023-03-08 20:06:29 +00:00
parent 30bbb06c42
commit 96107e13b3
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
2 changed files with 18 additions and 15 deletions

View File

@ -15,13 +15,13 @@ export interface DropdownOption {
export interface ComponentProps {
options: Array<DropdownOption>;
initialValue?: undefined | DropdownOption;
initialValue?: undefined | DropdownOption | Array<DropdownOption>;
onClick?: undefined | (() => void);
placeholder?: undefined | string;
className?: undefined | string;
onChange?:
| undefined
| ((value: DropdownValue | Array<DropdownValue> | null) => void);
| undefined
| ((value: DropdownValue | Array<DropdownValue> | null) => void);
value?: DropdownOption | undefined;
onFocus?: (() => void) | undefined;
onBlur?: (() => void) | undefined;
@ -40,6 +40,9 @@ const Dropdown: FunctionComponent<ComponentProps> = (
DropdownOption | Array<DropdownOption> | null
>(null);
const [initialValueSet, setInitialValueSet] = useState<DropdownOption | Array<DropdownOption> | undefined>(undefined);
useEffect(() => {
if (props.initialValue) {
setValue(props.initialValue);
@ -57,9 +60,12 @@ const Dropdown: FunctionComponent<ComponentProps> = (
}, [props.value]);
useEffect(() => {
if (props.initialValue) {
setValue(props.initialValue ? props.initialValue : null);
if (initialValueSet !== props.initialValue) {
setValue(props.initialValue || null);
}
setInitialValueSet(props.initialValue);
}, [props.initialValue]);
useEffect(() => {
@ -106,10 +112,9 @@ const Dropdown: FunctionComponent<ComponentProps> = (
return (
<div
className={`${
props.className ||
className={`${props.className ||
'relative mt-2 mb-1 rounded-md w-full'
}`}
}`}
onClick={() => {
props.onClick && props.onClick();
props.onFocus && props.onFocus();

View File

@ -46,7 +46,7 @@ export interface ComponentProps<T extends Object> {
id: string;
name: string;
submitButtonStyleType?: ButtonStyleType | undefined;
currentValue: FormValues<T>;
initialValues: FormValues<T>;
onSubmit: (values: FormValues<T>) => void;
onValidate?: undefined | ((values: FormValues<T>) => JSONObject);
onChange?: undefined | ((values: FormValues<T>) => void);
@ -95,7 +95,7 @@ const BasicForm: Function = <T extends Object>(
props: ComponentProps<T>
): ReactElement => {
const [currentValue, setCurrentValue] = useState<FormValues<T>>(
props.currentValue
props.initialValues
);
const [errors, setErrors] = useState<Dictionary<string>>({});
const [touched, setTouched] = useState<Dictionary<boolean>>({});
@ -263,11 +263,9 @@ const BasicForm: Function = <T extends Object>(
});
field.onChange && field.onChange(value);
setFieldValue(fieldName, value);
}}
tabIndex={index}
onFocus={async () => {
setFieldTouched(fieldName, true);
}}
tabIndex={index}
placeholder={field.placeholder || ''}
initialValue={
currentValue && (currentValue as any)[fieldName]
@ -893,7 +891,7 @@ const BasicForm: Function = <T extends Object>(
};
useEffect(() => {
const values: FormValues<T> = { ...props.currentValue };
const values: FormValues<T> = { ...props.initialValues };
for (const field of props.fields) {
const fieldName: string = getFieldName(field);
@ -933,7 +931,7 @@ const BasicForm: Function = <T extends Object>(
}
}
setCurrentValue(values);
}, [props.currentValue]);
}, [props.initialValues]);
const primaryButtonStyle: React.CSSProperties = {};