antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix bug preventing save empty fields

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-31 18:33:25 +02:00
parent 12401766ae
commit 23931a66cd
2 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/Components/Input/TextAreaInput.tsx
View File

@ -1,9 +1,8 @@
import * as React from "react" import * as React from "react";
import { useEffect, useRef } from "react"; import { useEffect, useRef, useState } from "react";
import Tribute from "tributejs"; import Tribute from "tributejs";
import { useTags } from "../Map/hooks/useTags"; import { useTags } from "../Map/hooks/useTags";
type TextAreaProps = { type TextAreaProps = {
labelTitle?: string; labelTitle?: string;
labelStyle?: string; labelStyle?: string;
@ -19,21 +18,20 @@ interface KeyValue {
[key: string]: string; [key: string]: string;
} }
export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, updateFormValue }: TextAreaProps) { export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, updateFormValue }: TextAreaProps) {
const ref = useRef<HTMLTextAreaElement>(null); const ref = useRef<HTMLTextAreaElement>(null);
const [inputValue, setInputValue] = useState<string>(defaultValue);
// prevent react18 from calling useEffect twice // prevent react18 from calling useEffect twice
const init = useRef(false) const init = useRef(false);
const tags = useTags(); const tags = useTags();
let values: KeyValue[] = []; let values: KeyValue[] = [];
tags.map(tag => { tags.forEach(tag => {
values.push({ key: tag.name, value: tag.name, color: tag.color }) values.push({ key: tag.name, value: tag.name, color: tag.color });
}) });
var tribute = new Tribute({ var tribute = new Tribute({
containerClass: 'tw-z-3000 tw-bg-base-100 tw-p-2 tw-rounded-lg tw-shadow', containerClass: 'tw-z-3000 tw-bg-base-100 tw-p-2 tw-rounded-lg tw-shadow',
@ -45,11 +43,10 @@ export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyl
return "" return ""
}, },
menuItemTemplate: function (item) { menuItemTemplate: function (item) {
return `<span style="color: ${item.original.color}; padding: 5px; boarder-radius: 3px;">#${item.string}</span>`; return `<span style="color: ${item.original.color}; padding: 5px; border-radius: 3px;">#${item.string}</span>`;
} }
}); });
useEffect(() => { useEffect(() => {
if (!init.current) { if (!init.current) {
if (ref.current) { if (ref.current) {
@ -57,16 +54,36 @@ export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyl
} }
init.current = true; init.current = true;
} }
}, [ref]) }, [ref]);
useEffect(() => {
setInputValue(defaultValue);
}, [defaultValue]);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const newValue = e.target.value;
setInputValue(newValue);
if (updateFormValue) {
updateFormValue(newValue);
}
};
return ( return (
<div className={`tw-form-control tw-w-full ${containerStyle ? containerStyle : ""}`}> <div className={`tw-form-control tw-w-full ${containerStyle ? containerStyle : ""}`}>
{labelTitle ? <label className="tw-label"> {labelTitle ? (
<span className={"tw-label-text tw-text-base-content " + labelStyle}>{labelTitle}</span> <label className="tw-label">
</label> : ""} <span className={`tw-label-text tw-text-base-content ${labelStyle}`}>{labelTitle}</span>
<textarea required ref={ref} defaultValue={defaultValue} name={dataField} className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle ? inputStyle : ""}`} placeholder={placeholder || ""} onChange={(e) => updateFormValue && updateFormValue(e.target.value)}></textarea> </label>
) : null}
<textarea
required
ref={ref}
value={inputValue}
name={dataField}
className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle || ""}`}
placeholder={placeholder || ""}
onChange={handleChange}
></textarea>
</div> </div>
) );
} }

10
src/Components/Profile/itemFunctions.ts
View File

@ -125,18 +125,18 @@ export const onUpdateItem = async (state, item, tags, addTag, setLoading, naviga
changedItem = { changedItem = {
id: state.id, id: state.id,
name: state.name, name: state.name,
...state.subname && {subname: state.subname}, subname: state.subname,
...state.text && {text: state.text}, text: state.text,
...state.color && {color: state.color}, ...state.color && {color: state.color},
position: item.position, position: item.position,
...state.groupType && {group_type: state.groupType}, ...state.groupType && {group_type: state.groupType},
...state.status && {status: state.status}, ...state.status && {status: state.status},
...state.contact && {contact: state.contact}, contact: state.contact,
...state.telephone && {telephone: state.telephone}, telephone: state.telephone,
...state.end && {end: state.end}, ...state.end && {end: state.end},
...state.start && {start: state.start}, ...state.start && {start: state.start},
...state.markerIcon && { markerIcon: state.markerIcon }, ...state.markerIcon && { markerIcon: state.markerIcon },
...state.nextAppointment && {next_appointment: state.nextAppointment}, next_appointment: state.nextAppointment,
...state.image.length > 10 && { image: state.image }, ...state.image.length > 10 && { image: state.image },
...state.offers.length > 0 && { offers: offer_updates }, ...state.offers.length > 0 && { offers: offer_updates },
...state.needs.length > 0 && { needs: needs_updates } ...state.needs.length > 0 && { needs: needs_updates }