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

cleanup

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-31 19:12:59 +02:00
parent 21471e7698
commit ca86bad272
1 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/Components/Profile/Templates/TabsForm.tsx
View File

@ -1,5 +1,5 @@
import { useCallback, useEffect, useState } from "react" import { useCallback, useEffect, useState } from "react"
import { TextAreaInput, TextInput } from "../../Input" import { TextAreaInput } from "../../Input"
import { PopupStartEndInput, TextView } from "../../Map" import { PopupStartEndInput, TextView } from "../../Map"
import { ActionButton } from "../Subcomponents/ActionsButton" import { ActionButton } from "../Subcomponents/ActionsButton"
import { LinkedItemsHeaderView } from "../Subcomponents/LinkedItemsHeaderView" import { LinkedItemsHeaderView } from "../Subcomponents/LinkedItemsHeaderView"
@ -15,45 +15,49 @@ export const TabsForm = ({ item, state, setState, updatePermission, linkItem, un
const updateActiveTab = useCallback((id: number) => { const updateActiveTab = useCallback((id: number) => {
setActiveTab(id); setActiveTab(id);
let params = new URLSearchParams(window.location.search); let params = new URLSearchParams(window.location.search);
params.set("tab", `${id}`); params.set("tab", `${id}`);
const newUrl = location.pathname + "?" + params.toString(); const newUrl = location.pathname + "?" + params.toString();
window.history.pushState({}, '', newUrl); window.history.pushState({}, '', newUrl);
setUrlParams(params); setUrlParams(params);
}, [location.pathname]); }, [location.pathname]);
useEffect(() => { useEffect(() => {
let params = new URLSearchParams(location.search); let params = new URLSearchParams(location.search);
let urlTab = params.get("tab"); let urlTab = params.get("tab");
setActiveTab(urlTab ? Number(urlTab) : 1); setActiveTab(urlTab ? Number(urlTab) : 1);
}, [location.search]); }, [location.search]);
return ( return (
<div role="tablist" className="tw-tabs tw-tabs-lifted tw-mt-3"> <div role="tablist" className="tw-tabs tw-tabs-lifted tw-mt-3">
<input type="radio" name="my_tabs_2" role="tab" className={`tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`} aria-label="Info" checked={activeTab == 1 && true} onChange={() => updateActiveTab(1)} /> <input type="radio" name="my_tabs_2" role="tab" className={`tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`} aria-label="Info" checked={activeTab == 1 && true} onChange={() => updateActiveTab(1)} />
<div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-border-[var(--fallback-bc,oklch(var(--bc)/0.2))] tw-rounded-box tw-h-[calc(100dvh-332px)] tw-min-h-56 tw-border-none"> <div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-border-[var(--fallback-bc,oklch(var(--bc)/0.2))] tw-rounded-box tw-h-[calc(100dvh-332px)] tw-min-h-56 tw-border-none">
<div className={`tw-flex tw-flex-col tw-h-full ${item.layer.itemType.show_start_end_input && "tw-pt-4"}`}> <div className={`tw-flex tw-flex-col tw-h-full ${item.layer.itemType.show_start_end_input && "tw-pt-4"}`}>
{item.layer.itemType.show_start_end_input && {item.layer.itemType.show_start_end_input &&
<PopupStartEndInput <PopupStartEndInput
item={item} item={item}
showLabels={false} showLabels={false}
updateEndValue={(e) => setState(prevState => ({ updateEndValue={(e) => setState(prevState => ({
...prevState, ...prevState,
end: e end: e
}))} }))}
updateStartValue={(s) => setState(prevState => ({ updateStartValue={(s) => setState(prevState => ({
...prevState, ...prevState,
start: s start: s
}))}></PopupStartEndInput> }))}></PopupStartEndInput>
} }
<TextAreaInput placeholder="about ..." defaultValue={item?.text ? item.text : ""} updateFormValue={(v) => setState(prevState => ({ <TextAreaInput placeholder="about ..."
...prevState, defaultValue={item?.text ? item.text : ""}
text: v updateFormValue={(v) => setState(prevState => ({
}))} containerStyle='tw-grow' inputStyle={`tw-h-full ${!item.layer.itemType.show_start_end_input && "tw-border-t-0 tw-rounded-tl-none"}`} /> ...prevState,
text: v
}))}
containerStyle='tw-grow'
inputStyle={`tw-h-full ${!item.layer.itemType.show_start_end_input && "tw-border-t-0 tw-rounded-tl-none"}`} />
<div> <div>
<TextAreaInput <TextAreaInput
placeholder="contact info ..." placeholder="contact info ..."
defaultValue={state.contact || ""} defaultValue={state.contact || ""}
updateFormValue={(c) => setState(prevState => ({ updateFormValue={(c) => setState(prevState => ({