123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- import React from "react";
- import { useTranslation } from "react-i18next";
- import styled from "styled-components";
- import { MediaLibraryButton, media2Url } from "./";
- import backgroundGrid from "../../images/background-grid.png";
- const StyledImageField = styled.div`
- & .typeSelect {
- padding: 0.5em;
- }
- & .imgContainer {
- margin: 0 1em;
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- gap: 0.5em;
- }
- `;
- const Thumbnail = styled.img`
- max-height: 100px;
- display: block;
- background-image: url(${backgroundGrid});
- `;
- const ImageField = ({ value, onChange }) => {
- const { t } = useTranslation();
- let type, content;
- // Manage compat with old version
- if (typeof value === "object") {
- type = value.type;
- content = value.content;
- } else {
- if (value) {
- type = "external";
- content = value;
- } else {
- type = "empty";
- content = null;
- }
- }
- const handleInputChange = (e) => {
- onChange({ type, content: e.target.value });
- };
- const handleTypeChange = (e) => {
- onChange({ type: e.target.value, content: "" });
- };
- const handleMediaSelect = (key) => {
- onChange({ type: "local", content: key });
- };
- const url = media2Url(value);
- return (
- <StyledImageField>
- <form className="typeSelect">
- <label>
- <input
- type="radio"
- value="empty"
- onChange={handleTypeChange}
- checked={type === "empty"}
- />
- {t("No image")}
- </label>
- <label>
- <input
- type="radio"
- value="local"
- onChange={handleTypeChange}
- checked={type === "local"}
- />
- {t("Library")}
- </label>
- <label>
- <input
- type="radio"
- value="external"
- checked={type === "external"}
- onChange={handleTypeChange}
- />
- {t("External")}
- </label>
- </form>
- <div className="imgContainer" onClick={(e) => e.preventDefault()}>
- {type !== "empty" && content && <Thumbnail src={url} />}
- {type === "external" && (
- <input
- value={content}
- placeholder={t("Enter an image url...")}
- onChange={handleInputChange}
- />
- )}
- {type === "local" && (
- <MediaLibraryButton
- onSelect={handleMediaSelect}
- label={content ? t("Change image") : t("Select image")}
- />
- )}
- </div>
- </StyledImageField>
- );
- };
- export default ImageField;
|