@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
54 lines • 3.49 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Grid, TextField } from "@mui/material";
import React, { useState } from "react";
import { ApiHelper } from "../../helpers";
import { Locale } from "../../helpers";
import { CommonEnvironmentHelper } from "@churchapps/helpers";
export const StockPhotos = (props) => {
const [images, setImages] = useState([]);
const [searchText, setSearchText] = useState("");
const [searchResults, setSearchResults] = useState(null);
const contentRoot = CommonEnvironmentHelper.ContentRoot;
const loadData = () => { ApiHelper.getAnonymous("/gallery/stock/" + props.aspectRatio.toString(), "ContentApi").then((data) => setImages(data.images)); };
React.useEffect(loadData, [props.aspectRatio]);
const handleChange = (e) => { e.preventDefault(); setSearchText(e.currentTarget.value); };
const handleSearch = (e) => {
if (e !== null)
e.preventDefault();
const term = searchText.trim();
ApiHelper.post("/stock/search", { term: term }, "ContentApi").then((data) => { setSearchResults(data); });
};
const getImages = () => {
if (searchResults)
return getResults();
else
return getSuggested();
};
const getResults = () => {
const result = [];
searchResults.forEach((p) => {
result.push(_jsxs(Grid, { size: { xs: 12, md: 4 }, children: [_jsx("a", { href: "about:blank", onClick: (e) => { e.preventDefault(); props.onStockSelect(p.large); }, children: _jsx("img", { src: p.thumbnail, alt: "stock", style: {
width: "100%",
height: "auto",
maxWidth: "100%",
display: "block"
} }) }), _jsx("div", { children: _jsxs("i", { style: { fontSize: 12 }, children: [_jsx("a", { href: p.url, target: "_blank", rel: "noreferrer noopener", children: Locale.label("stockPhotos.photoBy") }), " ", _jsx("a", { href: p.photographerUrl, target: "_blank", rel: "noreferrer noopener", children: p.photographer })] }) })] }));
});
return result;
};
const getSuggested = () => {
const result = [];
images.forEach((img) => {
result.push(_jsx(Grid, { size: { xs: 12, md: 4 }, children: _jsx("a", { href: "about:blank", onClick: (e) => { e.preventDefault(); props.onSelect(contentRoot + "/" + img); }, children: _jsx("img", { src: contentRoot + "/" + img, alt: "stock", style: {
width: "100%",
height: "auto",
maxWidth: "100%",
display: "block"
} }) }) }));
});
return result;
};
return (_jsxs(_Fragment, { children: [_jsx(TextField, { fullWidth: true, name: "personAddText", label: "Search Term", value: searchText, onChange: handleChange, InputProps: { endAdornment: _jsx(Button, { variant: "contained", id: "searchButton", "data-testid": "search-button", onClick: handleSearch, children: "Search" }) } }), searchResults && _jsxs("div", { children: [Locale.label("stockPhotos.providedBy"), " ", _jsx("a", { href: "https://pexels.com", children: "Pexels" }), "."] }), _jsx(Grid, { container: true, spacing: 3, alignItems: "center", children: getImages() })] }));
};
//# sourceMappingURL=StockPhotos.js.map