56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
import { Divider } from "@mui/material";
|
|
import { useSharedState } from "../../store/useSharedState";
|
|
import GenericBox from "../../ui/GenericBox";
|
|
import GenericRadioGroup from "../../ui/GenericRadioGroup";
|
|
import InputField from "../../ui/InputField";
|
|
import { URL_RADIO_DATA } from "./../../constants/photo";
|
|
import { useState } from "react";
|
|
|
|
function PhotoUrl() {
|
|
const previewMode = useSharedState((state) => state.previewMode);
|
|
const setPreviewMode = useSharedState((state) => state.setPreviewMode);
|
|
|
|
const [urlPoint, setUrlPoint] = useState("single");
|
|
|
|
const url = useSharedState((state) => state.urls[previewMode]);
|
|
const setUrl = useSharedState((state) => state.setUrl);
|
|
|
|
const photoAlt = useSharedState((state) => state.photoAlt);
|
|
const setPhotoAlt = useSharedState((state) => state.setPhotoAlt);
|
|
|
|
const handleUrlRadioChange = (event) => {
|
|
setUrlPoint(event.target.value);
|
|
setPreviewMode(event.target.value === "rwd" ? "desktop" : "single");
|
|
};
|
|
const handleChangeURL = ({ event, type }) => {
|
|
event.preventDefault();
|
|
setUrl(type, event.target.value);
|
|
};
|
|
|
|
return (
|
|
<GenericBox variant="inner" title="Zdjęcie">
|
|
<GenericRadioGroup
|
|
radioData={URL_RADIO_DATA}
|
|
value={urlPoint}
|
|
onChange={handleUrlRadioChange}
|
|
direction="row"
|
|
/>
|
|
<InputField
|
|
name={`URL zdjęcia ${
|
|
previewMode === "single" ? "" : `na ${previewMode}`
|
|
}`}
|
|
onChange={(e) => handleChangeURL({ event: e, type: previewMode })}
|
|
value={url}
|
|
/>
|
|
<Divider />
|
|
<InputField
|
|
name="Alt zdjęcia"
|
|
onChange={(e) => setPhotoAlt(e.target.value)}
|
|
value={photoAlt}
|
|
/>
|
|
</GenericBox>
|
|
);
|
|
}
|
|
|
|
export default PhotoUrl;
|