react-icons/fi#FiPlus TypeScript Examples
The following examples show how to use
react-icons/fi#FiPlus.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: OrphanagesMap.tsx From NLW-3.0 with MIT License | 6 votes |
|
function OrphanagesMap() {
const [orphanages, setOrphanages] = useState<Orphanage[]>([]);
useEffect(() => {
api.get('orphanages').then(response => {
setOrphanages(response.data);
});
}, []);
return (
<div id="page-map">
<aside>
<header>
<img src={mapMarkerImg} alt="Happy" />
<h2>Escolha um orfanato no mapa</h2>
<p>Muitas crianças estão esperando a sua visita {':)'}</p>
</header>
<footer>
<strong>Meia Praia</strong>
<span>Santa Catarina</span>
</footer>
</aside>
<Map
center={[-27.1376523, -48.6087994]}
zoom={15}
style={{ width: '100%', height: '100%' }}
>
{/* <TileLayer url="https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" /> */}
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
{orphanages.map(orphanage => (
<Marker
key={orphanage.id}
icon={mapIcon}
position={[orphanage.latitude, orphanage.longitude]}
>
<Popup closeButton={false} minWidth={240} maxWidth={240} className="map-popup">
{orphanage.name}
<Link to={`/orphanages/${orphanage.id}`}>
<FiArrowRight size={20} color="#fff" />
</Link>
</Popup>
</Marker>
))}
</Map>
<Link to="/orphanages/create" className="create-orphanage">
<FiPlus size={32} color="#fff" />
</Link>
</div>
)
}
Example #2
| Source File: Realm.tsx From tobira with Apache License 2.0 | 6 votes |
|
RealmEditLinks: React.FC<{ path: string }> = ({ path }) => {
const { t } = useTranslation();
const encodedPath = pathToQuery(path);
const items = [
<LinkWithIcon key={0} to={`/~manage/realm?path=${encodedPath}`} iconPos="left">
<FiTool />
{t("realm.page-settings")}
</LinkWithIcon>,
<LinkWithIcon key={1} to={`/~manage/realm/content?path=${encodedPath}`} iconPos="left">
<FiLayout />
{t("realm.edit-page-content")}
</LinkWithIcon>,
<LinkWithIcon key={1} to={`/~manage/realm/add-child?parent=${encodedPath}`} iconPos="left">
<FiPlus />
{t("realm.add-sub-page")}
</LinkWithIcon>,
];
return <LinkList items={items} />;
}
Example #3
| Source File: index.tsx From tobira with Apache License 2.0 | 6 votes |
|
SettingsPage: React.FC<Props> = ({ realm }) => {
const { t } = useTranslation();
if (!realm.canCurrentUserEdit) {
return <NotAuthorized />;
}
const heading = realm.isRoot
? t("manage.realm.heading-root")
: t("manage.realm.heading", { realm: realm.name });
const breadcrumbs = (realm.isRoot ? realm.ancestors : realm.ancestors.concat(realm))
.map(({ name, path }) => ({ label: name, link: path }));
return (
<RealmSettingsContainer css={{ maxWidth: 900 }}>
<Breadcrumbs path={breadcrumbs} tail={<i>{t("realm.page-settings")}</i>} />
<PageTitle title={heading} />
<p>{t("manage.realm.descendants-count", { count: realm.numberOfDescendants })}</p>
<div css={{
margin: "32px 0",
display: "flex",
flexWrap: "wrap",
gap: 16,
}}>
<LinkButton to={realm.path}>
<FiArrowRightCircle />
{t("manage.realm.view-page")}
</LinkButton>
<LinkButton to={`/~manage/realm/add-child?parent=${pathToQuery(realm.path)}`}>
<FiPlus />
{t("realm.add-sub-page")}
</LinkButton>
</div>
<section><General fragRef={realm} /></section>
<section><ChildOrder fragRef={realm} /></section>
<section><DangerZone fragRef={realm} /></section>
</RealmSettingsContainer>
);
}
Example #4
| Source File: index.tsx From nlw-03-omnistack with MIT License | 6 votes |
|
export default function OrphanagesMap() {
return (
<div id="page-map">
<aside>
<header>
<img src={mapMarkerImg} alt="Happy" />
<h2>Escolha um orfanato no mapa</h2>
<p>Muitas crianças estão esperando a sua visita :)</p>
</header>
<footer>
<strong>Rio do Sul</strong>
<span>Santa Catarina</span>
</footer>
</aside>
<Map>
<Marker icon={happyMapIcon} position={[-27.2092052,-49.6401092]}>
<Popup closeButton={false} minWidth={240} maxWidth={240} className="map-popup">
Lar das meninas
<Link to={`/orphanages/1`}>
<FiArrowRight size={20} color="#fff" />
</Link>
</Popup>
</Marker>
</Map>
<Link to="/orphanages/create" className="create-orphanage">
<FiPlus size={32} color="#FFF" />
</Link>
</div>
);
}
Example #5
| Source File: OrphanagesMap.tsx From happy with MIT License | 5 votes |
|
function OrphanagesMap() {
const [orphanages, setOrphanages] = useState<Orphanage[]>([]);
useEffect(() => {
api.get('orphanages').then(response => {
setOrphanages(response.data);
});
}, []);
return (
<div id="page-map">
<aside>
<header>
<img src={mapMarkerImg} alt="Happy"/>
<h2>Escolha um orfanato no mapa</h2>
<p>Muitas crianças estão esperando a sua visita {':)'}</p>
</header>
<footer>
<strong>Rio do Sul</strong>
<span>Santa Catarina</span>
</footer>
</aside>
<Map
center={[-27.2092052, -49.6401092]}
zoom={15}
style={{ width: '100%', height: '100%'}}
>
<TileLayer url="https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" />
{/* <TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/> */}
{orphanages.map(orphanage => (
<Marker
key={orphanage.id}
icon={mapIcon}
position={[orphanage.latitude, orphanage.longitude]}
>
<Popup closeButton={false} minWidth={240} maxWidth={240} className="map-popup">
{orphanage.name}
<Link to={`/orphanages/${orphanage.id}`}>
<FiArrowRight size={20} color="#fff" />
</Link>
</Popup>
</Marker>
))}
</Map>
<Link to="/orphanages/create" className="create-orphanage">
<FiPlus size={32} color="#fff" />
</Link>
</div>
)
}
Example #6
| Source File: index.tsx From NextLevelWeek with MIT License | 5 votes |
|
OrphanagesMap: React.FC = () => {
const [orphanages, setOrphanages] = useState<IOpharnage[]>([]);
useEffect(() => {
api.get('/orphanages').then(res => {
// console.log(res.data);
setOrphanages(res.data);
});
}, []);
return (
<Container>
<SideBar>
<header>
<img src={mapMarkerImg} alt="" />
<h2>Escolha um orfanato no mapa</h2>
<p>Muitas crianças estão esperando a sua visita <span role="img" aria-label="happy">?</span></p>
</header>
<footer>
<strong>Natal</strong>
<span>Rio Grande do Norte</span>
</footer>
</SideBar>
<Map
center={[-5.8044209, -35.263095]}
zoom={12}
style={{ width: '100%', height: '100%' }}
>
<TileLayer url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`} />
{orphanages.map(orphanage => {
return (
<Marker
key={orphanage.id}
position={[orphanage.latitude, orphanage.longitude]}
icon={happyMapIcon}
>
<Popup closeButton={false} minWidth={240} maxHeight={240} className="map-popup">
{orphanage.name}
<Link to={`/orphanages/${orphanage.id}`}>
<FiArrowRight size={20} color="#fff" />
</Link>
</Popup>
</Marker>
);
})}
</Map>
<Link to="/orphanages/create">
<FiPlus size={32} color="#FFF" />
</Link>
</Container>
);
}
Example #7
| Source File: AddButtons.tsx From tobira with Apache License 2.0 | 5 votes |
|
AddButtons: React.FC<Props> = ({ index, realm }) => {
const { t } = useTranslation();
const { id: realmId } = useFragment(graphql`
fragment AddButtonsRealmData on Realm {
id
}
`, realm);
const env = useRelayEnvironment();
const addBlock = (
type: string,
prepareBlock?: (store: RecordSourceProxy, block: RecordProxy) => void,
) => {
commitLocalUpdate(env, store => {
const realm = store.get(realmId) ?? bug("could not find realm");
const blocks = [
...realm.getLinkedRecords("blocks") ?? bug("realm does not have blocks"),
];
const id = "clNEWBLOCK";
const block = store.create(id, `${type}Block`);
prepareBlock?.(store, block);
block.setValue(true, "editMode");
block.setValue(id, "id");
blocks.splice(index, 0, block);
realm.setLinkedRecords(blocks, "blocks");
});
};
return <ButtonGroup css={{ alignSelf: "center" }}>
<span
title={t("manage.realm.content.add")}
css={{
color: "white",
backgroundColor: "var(--grey20)",
}}
>
<FiPlus />
</span>
<Button title={t("manage.realm.content.add-title")} onClick={() => addBlock("Title")}>
<FiType />
</Button>
<Button title={t("manage.realm.content.add-text")} onClick={() => addBlock("Text")}>
<FiAlignLeft />
</Button>
<Button
title={t("manage.realm.content.add-series")}
onClick={() => addBlock("Series", (_store, block) => {
block.setValue("NEW_TO_OLD", "order");
block.setValue(true, "showTitle");
})}
>
<FiGrid />
</Button>
<Button
title={t("manage.realm.content.add-video")}
onClick={() => addBlock("Video", (_store, block) => {
block.setValue(true, "showTitle");
})}
>
<FiFilm />
</Button>
</ButtonGroup>;
}
Example #8
| Source File: OrphanagesMap.tsx From happy with MIT License | 5 votes |
|
function OrphanagesMap() {
const [orphanages, setOrphaanges] = useState<Orphanage[]>([]);
useEffect(() => {
api.get("/orphanages").then(res => {
setOrphaanges(res.data);
});
}, []);
return (
<div id="page-map">
<aside>
<header>
<img src={mapMakerImg} alt="Logo da plataforma Happy" />
<h2>Escolha um orfanato no mapa</h2>
<p>Muitas crianças estão esperando sua visita :)</p>
</header>
<footer>
<strong>São Paulo</strong>
<span>São Paulo</span>
</footer>
</aside>
<Map
center={[-23.6821604, -46.8754915]}
zoom={10}
style={{ width: "100%", height: "100%" }}
>
{/* Mapa alternativo: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" */}
<TileLayer
url={
`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`
}
/>
{orphanages.map(orphanage => {
return (
<Marker
key={orphanage.id}
icon={mapIcon}
position={[orphanage.latitude, orphanage.longitude]}
>
<Popup
closeButton={false}
minWidth={240}
maxWidth={240}
className="map-popup"
>
{orphanage.name}
<Link to={`/orphanages/${orphanage.id}`}>
<FiArrowRight size={20} color="#FFF" />
</Link>
</Popup>
</Marker>
)
})}
</Map>
<Link to="/orphanages/create" className="create-orphanage">
<FiPlus size={32} color="#FFF" />
</Link>
</div>
);
}
Example #9
| Source File: index.tsx From Meshtastic with GNU General Public License v3.0 | 5 votes |
|
Hardware = (): JSX.Element => {
const hardware = [tbeam, hydra, rak19003, rak19001, nano_g1, heltec, techo];
const [modalData, setModalData] = useState<IDevice>();
return (
<PageLayout title="Hardware" description="Supported hardware">
<div className="border-b border-tertiary p-4">
<div className="sm:flex sm:items-baseline">
<h3 className="text-lg font-medium leading-6 text-gray-900">
Issues
</h3>
<div className="mt-4 sm:mt-0 sm:ml-10">
<nav className="-mb-px flex space-x-8">
<a
href="#"
className="border-indigo-500 text-indigo-600"
aria-current={'page'}
>
Devices
</a>
<a
href="#"
className="hover:border-gray-300', 'whitespace-nowrap border-b-2 border-transparent
px-1 pb-4 text-sm font-medium text-gray-500 hover:text-gray-700"
>
Antennas
</a>
</nav>
</div>
</div>
</div>
<div className="mx-auto max-w-7xl py-8 px-4 sm:px-6 lg:px-8">
<ul
role="list"
className="grid grid-cols-2 gap-x-2 gap-y-4 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:grid-cols-5 xl:gap-x-4"
>
{hardware.map((device, index) => (
<HardwareCard
key={index}
device={device}
setDevice={(): void => {
setModalData(device);
}}
/>
))}
<li className="group relative">
<a
href="https://github.com/meshtastic/Meshtastic-device/issues/new?assignees=&labels=enhancement%2Ctriage&template=New+Board.yml&title=%5BBoard%5D%3A+"
className="flex aspect-[4/3] rounded-lg border-2 border-dashed border-mute group-hover:border-tertiaryInv"
target="_blank"
rel="noreferrer"
>
<FiPlus className="m-auto h-12 w-12 text-mute group-hover:text-tertiaryInv" />
</a>
<p className="pointer-events-none mt-2 block truncate text-sm font-medium text-primaryInv">
New Board
</p>
<p className="pointer-events-none block text-sm font-medium text-mute">
Want to support a board?
</p>
</li>
</ul>
</div>
{modalData && (
<HardwareModal
open={!!modalData}
close={() => {
setModalData(undefined);
}}
device={modalData}
/>
)}
</PageLayout>
);
}
Example #10
| Source File: index.tsx From nlw-03-omnistack with MIT License | 5 votes |
|
export default function OrphanagesMap() {
return (
<div id="page-create-orphanage">
<Sidebar />
<main>
<form className="create-orphanage-form">
<fieldset>
<legend>Dados</legend>
<Map style={{ width: '100%', height: 280 }}>
<Marker interactive={false} icon={happyMapIcon} position={[-27.2092052,-49.6401092]} />
</Map>
<div className="input-block">
<label htmlFor="name">Nome</label>
<input id="name" />
</div>
<div className="input-block">
<label htmlFor="about">Sobre <span>Máximo de 300 caracteres</span></label>
<textarea id="name" maxLength={300} />
</div>
<div className="input-block">
<label htmlFor="images">Fotos</label>
<div className="uploaded-image">
</div>
<button className="new-image">
<FiPlus size={24} color="#15b6d6" />
</button>
</div>
</fieldset>
<fieldset>
<legend>Visitação</legend>
<div className="input-block">
<label htmlFor="instructions">Instruções</label>
<textarea id="instructions" />
</div>
<div className="input-block">
<label htmlFor="opening_hours">Nome</label>
<input id="opening_hours" />
</div>
<div className="input-block">
<label htmlFor="open_on_weekends">Atende fim de semana</label>
<div className="button-select">
<button type="button" className="active">Sim</button>
<button type="button">Não</button>
</div>
</div>
</fieldset>
<PrimaryButton type="submit">Confirmar</PrimaryButton>
</form>
</main>
</div>
);
}
Example #11
| Source File: CreateOrphanage.tsx From happy with MIT License | 4 votes |
|
export default function OrphanagesMap() {
const history = useHistory();
const [position, setPosition] = useState({ latitude: 0, longitude: 0})
const [name, setName] = useState('');
const [about, setAbout] = useState('');
const [instructions, setInstructions] = useState('');
const [opening_hours, setOpeningHours] = useState('');
const [open_on_weekends, setOpenOnWeekends] = useState(true);
const [images, setImages] = useState<File[]>([]);
const [previewImages, setPreviewImages] = useState<string[]>([]);
function handleMapClick(event: LeafletMouseEvent) {
const { lat, lng } = event.latlng;
setPosition({
latitude: lat,
longitude: lng,
});
}
function handleSelectImages(event: ChangeEvent<HTMLInputElement>) {
if (!event.target.files) {
return;
}
const selectedImages = Array.from(event.target.files)
setImages(selectedImages);
const selectedImagesPreview = selectedImages.map(image => {
return URL.createObjectURL(image);
});
setPreviewImages(selectedImagesPreview);
}
async function handleSubmit(event: FormEvent) {
event.preventDefault();
const { latitude, longitude } = position;
const data = new FormData();
data.append('name', name);
data.append('about', about);
data.append('latitude', String(latitude));
data.append('longitude', String(longitude));
data.append('instructions', instructions);
data.append('opening_hours', opening_hours);
data.append('open_on_weekends', String(open_on_weekends));
images.forEach(image => {
data.append('images', image);
});
await api.post('orphanages', data);
alert('Cadastro realizado com sucesso!');
history.push('/app');
}
return (
<div id="page-create-orphanage">
<Sidebar />
<main>
<form onSubmit={handleSubmit} className="create-orphanage-form">
<fieldset>
<legend>Dados</legend>
<Map
center={[-27.2092052,-49.6401092]}
style={{ width: '100%', height: 280 }}
zoom={15}
onClick={handleMapClick}
>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
{ position.latitude !== 0 && (
<Marker
interactive={false}
icon={mapIcon}
position={[position.latitude, position.longitude]}
/>
)}
</Map>
<div className="input-block">
<label htmlFor="name">Nome</label>
<input
id="name"
value={name}
onChange={event => setName(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="about">Sobre <span>Máximo de 300 caracteres</span></label>
<textarea
id="name"
maxLength={300}
value={about}
onChange={event => setAbout(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="images">Fotos</label>
<div className="images-container">
{previewImages.map(image => (
<img key={image} src={image} alt={name} />
))}
<label htmlFor="image[]" className="new-image">
<FiPlus size={24} color="#15b6d6" />
</label>
</div>
<input multiple onChange={handleSelectImages} type="file" id="image[]"/>
</div>
</fieldset>
<fieldset>
<legend>Visitação</legend>
<div className="input-block">
<label htmlFor="instructions">Instruções</label>
<textarea
id="instructions"
value={instructions}
onChange={event => setInstructions(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="opening_hours">Horário de funcinamento</label>
<input
id="opening_hours"
value={opening_hours}
onChange={event => setOpeningHours(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="open_on_weekends">Atende fim de semana</label>
<div className="button-select">
<button
type="button"
className={open_on_weekends ? 'active' : ''}
onClick={() => setOpenOnWeekends(true)}
>
Sim
</button>
<button
type="button"
className={!open_on_weekends ? 'active' : ''}
onClick={() => setOpenOnWeekends(false)}
>
Não
</button>
</div>
</div>
</fieldset>
<button className="confirm-button" type="submit">
Confirmar
</button>
</form>
</main>
</div>
);
}
Example #12
| Source File: lyric.tsx From cloudmusic-vscode with MIT License | 4 votes |
|
Lyric = (): JSX.Element => {
const [focus, setFocus] = useState(FocusMode.center);
const [fontSize, setFontSize] = useState(bigFontSize - 8);
bigFontSize = fontSize + 8;
const [lyric, setLyric] = useState<NeteaseTypings.LyricData["text"]>([]);
useEffect(() => {
const handler = ({ data }: { data: LyricSMsg }) => {
switch (data.command) {
case "lyric":
cnt += 1;
setLyric(data.text);
window.scrollTo({ top: 0, behavior: "smooth" });
break;
case "index":
{
const prev = document.getElementById(`${cnt}-${active}`);
if (prev) {
prev.style.fontSize = "";
prev.style.opacity = "";
prev.style.fontWeight = "";
}
active = data.idx;
const curr = document.getElementById(`${cnt}-${active}`);
if (curr) {
curr.style.fontSize = `${bigFontSize}px`;
curr.style.opacity = "1";
curr.style.fontWeight = "bold";
if (focus === FocusMode.center) {
curr.scrollIntoView({ block: "center", behavior: "smooth" });
} else if (focus === FocusMode.inview) {
const { top, bottom } = curr.getBoundingClientRect();
if (top > innerHeight || bottom < 0)
curr.scrollIntoView({ block: "center", behavior: "smooth" });
}
}
}
break;
}
};
window.addEventListener("message", handler);
return () => window.removeEventListener("message", handler);
}, [focus]);
return (
<>
{useMemo(
() => (
<>
<div
className="fixed right-8 bottom-8 bg-slate-700 rounded-full p-1 cursor-pointer z-10"
onClick={() => setFontSize((v) => v - 2)}
>
<FiMinus size={32} />
</div>
<div
className="fixed right-8 bottom-24 bg-slate-700 rounded-full p-1 cursor-pointer z-10"
onClick={() => setFontSize((v) => v + 2)}
>
<FiPlus size={32} />
</div>
</>
),
[]
)}
{useMemo(() => {
// eslint-disable-next-line @typescript-eslint/naming-convention
const Icon =
focus === FocusMode.center
? FiCrosshair
: focus === FocusMode.inview
? FiLifeBuoy
: FiCircle;
return (
<div
className="fixed right-8 bottom-40 bg-slate-700 rounded-full p-1 cursor-pointer z-10"
onClick={() => setFocus((v) => (v + 1) % 3)}
>
<Icon size={32} />{" "}
</div>
);
}, [focus])}
<style>{"body::-webkit-scrollbar{display: none;}"}</style>
<div style={{ fontSize }} className="my-80">
{lyric.map(([otext, ttext, rtext], idx) => (
<div
id={`${cnt}-${idx}`}
key={`${cnt}-${idx}`}
className="text-center text-ellipsis whitespace-nowrap flex flex-col gap-y-1 opacity-80 mb-8"
>
<div>{otext}</div>
{rtext && <div>{rtext}</div>}
{ttext && <div>{ttext}</div>}
</div>
))}
</div>
</>
);
}
Example #13
| Source File: index.tsx From hub with Apache License 2.0 | 4 votes |
|
PackageView = (props: Props) => {
const history = useHistory();
const point = useBreakpointDetect();
const contentWrapper = useRef<HTMLDivElement | null>(null);
const [isLoadingPackage, setIsLoadingPackage] = useState(false);
const [packageName, setPackageName] = useState(props.packageName);
const [repositoryKind, setRepositoryKind] = useState(props.repositoryKind);
const [repositoryName, setRepositoryName] = useState(props.repositoryName);
const [version, setVersion] = useState(props.version);
const [detail, setDetail] = useState<Package | null | undefined>(undefined);
const { tsQueryWeb, tsQuery, pageNumber, filters, deprecated, operators, verifiedPublisher, official, sort } =
props.searchUrlReferer || {};
const [apiError, setApiError] = useState<null | string | JSX.Element>(null);
const [currentHash, setCurrentHash] = useState<string | undefined>(props.hash);
const columnWrapper = useRef<HTMLDivElement | null>(null);
const [relatedPosition, setRelatedPosition] = useState<'column' | 'content' | undefined | null>(null);
const [currentPkgId, setCurrentPkgId] = useState<null | string>(null);
const [relatedPackages, setRelatedPackages] = useState<Package[] | undefined>(undefined);
const [viewsStats, setViewsStats] = useState<PackageViewsStats | undefined>();
useScrollRestorationFix();
useLayoutEffect(() => {
const updateRelatedPosition = () => {
if (contentWrapper.current && columnWrapper.current && point && detail) {
if (point && !['xs', 'sm'].includes(point)) {
setRelatedPosition(
contentWrapper.current.offsetHeight <= columnWrapper.current.offsetHeight + RELATED_PKGS_GAP
? 'content'
: 'column'
);
} else {
setRelatedPosition('column');
}
}
};
if (isUndefined(relatedPosition)) {
updateRelatedPosition();
}
}, [relatedPosition]); /* eslint-disable-line react-hooks/exhaustive-deps */
useEffect(() => {
if (!isUndefined(props.packageName) && !isLoadingPackage) {
setPackageName(props.packageName);
setVersion(props.version);
setRepositoryKind(props.repositoryKind);
setRepositoryName(props.repositoryName);
}
}, [props, isLoadingPackage]);
useEffect(() => {
async function fetchRelatedPackages(pkgDetail: Package) {
try {
let name = pkgDetail.name.split('-');
let words = [...name];
if (!isUndefined(pkgDetail.keywords) && pkgDetail.keywords.length > 0) {
words = [...name, ...pkgDetail.keywords];
}
const searchResults = await API.searchPackages(
{
tsQueryWeb: Array.from(new Set(words)).join(' or '),
filters: {},
limit: 9,
offset: 0,
},
false
);
let filteredPackages: Package[] = [];
if (!isNull(searchResults.packages)) {
filteredPackages = searchResults.packages
.filter((item: Package) => item.packageId !== currentPkgId)
.slice(0, 8); // Only first 8 packages
}
setRelatedPackages(filteredPackages);
} catch {
setRelatedPackages([]);
}
}
if (!isNull(currentPkgId) && detail) {
fetchRelatedPackages(detail);
}
}, [currentPkgId]); /* eslint-disable-line react-hooks/exhaustive-deps */
async function trackView(pkgID: string, version: string) {
try {
API.trackView(pkgID, version);
} catch {
// Do not do anything
}
}
async function getViewsStats(pkgID: string) {
try {
setViewsStats(await API.getViews(pkgID));
} catch (err: any) {
// Don't display any error if API request fails
}
}
async function fetchPackageDetail() {
try {
setRelatedPosition(null);
const detailPkg = await API.getPackage({
packageName: packageName,
version: version,
repositoryKind: repositoryKind,
repositoryName: repositoryName,
});
let metaTitle = `${detailPkg.normalizedName} ${detailPkg.version} · ${
detailPkg.repository.userAlias || detailPkg.repository.organizationName
}/${detailPkg.repository.name}`;
updateMetaIndex(metaTitle, detailPkg.description);
setDetail(detailPkg);
// Track view
trackView(detailPkg.packageId, detailPkg.version!);
// Get pkg views stats
getViewsStats(detailPkg.packageId);
if (currentHash) {
setCurrentHash(undefined);
}
setApiError(null);
setCurrentPkgId(detailPkg.packageId);
setRelatedPosition(undefined);
window.scrollTo(0, 0); // Scroll to top when a new version is loaded
setIsLoadingPackage(false);
scrollIntoView();
} catch (err: any) {
if (err.kind === ErrorKind.NotFound) {
setApiError(
<>
<div className={`mb-4 mb-lg-5 h2 ${styles.noDataTitleContent}`}>
Sorry, the package you requested was not found.
</div>
<p className={`h5 mb-4 mb-lg-5 ${styles.noDataTitleContent}`}>
The package you are looking for may have been deleted by the provider, or it may now belong to a different
repository. Please try searching for it, as it may help locating the package in a different repository or
discovering other alternatives.
</p>
<p className="h6 lh-base">
NOTE: The official Helm <span className="fw-bold">stable</span> and{' '}
<span className="fw-bold">incubator</span> repositories were removed from Artifact Hub on November 6th as
part of the deprecation plan announced by the Helm project. For more information please see{' '}
<ExternalLink href="https://helm.sh/blog/charts-repo-deprecation/" label="Open Helm documentation">
this blog post
</ExternalLink>{' '}
and{' '}
<ExternalLink href="https://github.com/helm/charts/issues/23944" label="Open GitHub issue">
this GitHub issue
</ExternalLink>
.
</p>
</>
);
} else if (!isUndefined(err.message)) {
setApiError(err.message);
}
setDetail(null);
setIsLoadingPackage(false);
}
}
useEffect(() => {
setIsLoadingPackage(true);
fetchPackageDetail();
/* eslint-disable react-hooks/exhaustive-deps */
}, [packageName, version, repositoryName, repositoryKind, setIsLoadingPackage]);
/* eslint-enable react-hooks/exhaustive-deps */
useEffect(() => {
return () => {
setIsLoadingPackage(false);
};
}, [setIsLoadingPackage]);
let sortedVersions: Version[] = [];
if (detail && detail.availableVersions) {
sortedVersions =
detail.repository.kind === RepositoryKind.Container
? detail.availableVersions
: sortPackageVersions(detail.availableVersions);
}
// Section for recommended packages and in production (orgs)
const renderMoreDetails = (): JSX.Element | null => {
if (detail) {
const recommendations = detail.recommendations && detail.recommendations.length > 0;
if (recommendations) {
return (
<div
data-testid="more-details-section"
className={`d-none d-md-block px-3 ${styles.moreDetailsSectionWrapper}`}
>
<div className="container-lg px-sm-4 px-lg-0 py-2 d-flex flex-column position-relative">
{recommendations && <RecommendedPackages recommendations={detail.recommendations} className="mt-3" />}
</div>
</div>
);
} else {
return null;
}
}
return null;
};
const getInstallationModal = (wrapperClassName?: string): JSX.Element | null => (
<div className={wrapperClassName}>
<InstallationModal
package={detail}
visibleInstallationModal={!isUndefined(props.visibleModal) && props.visibleModal === 'install'}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
/>
</div>
);
const getFalcoRules = (): ContentDefaultModalItem[] | undefined => {
let rules: ContentDefaultModalItem[] | undefined;
if (
!isUndefined(detail) &&
!isNull(detail) &&
!isNull(detail.data) &&
!isUndefined(detail.data) &&
!isUndefined(detail.data.rules)
) {
if (isArray(detail.data.rules)) {
rules = detail.data.rules.map((item: any, index: number) => {
return {
name:
item.Name && item.Name !== ''
? item.Name
: `rules${detail!.data!.rules!.length === 1 ? '' : `-${index + 1}`}`,
file: item.Raw,
};
});
} else {
rules = Object.keys(detail.data.rules).map((rulesFileName: string) => {
return {
name: rulesFileName,
file: (detail!.data!.rules as FalcoRules)[rulesFileName],
};
});
}
}
return rules;
};
const getOPAPolicies = (): ContentDefaultModalItem[] | undefined => {
let policies: ContentDefaultModalItem[] | undefined;
if (
!isUndefined(detail) &&
!isNull(detail) &&
!isNull(detail.data) &&
!isUndefined(detail.data) &&
!isUndefined(detail.data.policies)
) {
policies = Object.keys(detail.data.policies).map((policyName: string) => {
return {
name: policyName,
file: detail.data!.policies![policyName],
};
});
}
return policies;
};
const getManifestRaw = (): string | undefined => {
let manifest: string | undefined;
if (
!isUndefined(detail) &&
!isNull(detail) &&
!isNull(detail.data) &&
!isUndefined(detail.data) &&
!isUndefined(detail.data.manifestRaw)
) {
manifest = detail.data.manifestRaw as string;
}
return manifest;
};
const getCRDs = (): CustomResourcesDefinition[] | undefined => {
let resources: CustomResourcesDefinition[] | undefined;
if (detail && detail.crds) {
let examples: CustomResourcesDefinitionExample[] = detail.crdsExamples || [];
resources = detail.crds.map((resourceDefinition: CustomResourcesDefinition) => {
return {
...resourceDefinition,
example: examples.find((info: any) => info.kind === resourceDefinition.kind),
};
});
}
return resources;
};
const getBadges = (withRepoInfo: boolean, extraStyle?: string): JSX.Element => (
<>
<OfficialBadge official={isPackageOfficial(detail)} className={`d-inline me-3 ${extraStyle}`} type="package" />
{withRepoInfo && (
<VerifiedPublisherBadge
verifiedPublisher={detail!.repository.verifiedPublisher}
className={`d-inline me-3 ${extraStyle}`}
/>
)}
{detail!.deprecated && (
<Label
text="Deprecated"
icon={<AiOutlineStop />}
labelStyle="danger"
className={`d-inline me-3 ${extraStyle}`}
/>
)}
<SignedBadge
repositoryKind={detail!.repository.kind}
signed={detail!.signed}
signatures={detail!.signatures}
className={`d-inline ${extraStyle}`}
/>
<div className="d-none d-lg-inline">
<SignKeyInfo
visibleKeyInfo={!isUndefined(props.visibleModal) && props.visibleModal === 'key-info'}
repoKind={detail!.repository.kind}
signatures={detail!.signatures}
signed={detail!.signed}
signKey={detail!.signKey}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
/>
</div>
</>
);
useEffect(() => {
if (props.hash !== currentHash) {
setCurrentHash(props.hash);
if (isUndefined(props.hash) || props.hash === '') {
window.scrollTo(0, 0);
} else {
scrollIntoView();
}
}
}, [props.hash]); /* eslint-disable-line react-hooks/exhaustive-deps */
const scrollIntoView = useCallback(
(id?: string) => {
const elId = id || props.hash;
if (isUndefined(elId) || elId === '') return;
try {
const element = document.querySelector(elId);
if (element) {
element.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });
if (isUndefined(id)) {
history.replace({
pathname: history.location.pathname,
hash: elId,
state: {
searchUrlReferer: props.searchUrlReferer,
fromStarredPage: props.fromStarredPage,
},
});
} else if (props.hash !== elId) {
history.push({
pathname: history.location.pathname,
hash: elId,
state: {
searchUrlReferer: props.searchUrlReferer,
fromStarredPage: props.fromStarredPage,
},
});
}
}
} finally {
return;
}
},
[props.hash, props.searchUrlReferer, props.fromStarredPage, history]
);
const getSupportLink = (): string | undefined => {
if (detail && detail.links) {
const support = detail.links.find((link: PackageLink) => link.name.toLowerCase() === 'support');
if (support) {
return support.url;
} else {
return undefined;
}
}
return undefined;
};
const getAdditionalPkgContent = (): { content: JSX.Element; titles: string } | null => {
if (isNull(detail) || isUndefined(detail)) return null;
let additionalTitles = '';
const additionalContent = (
<>
{(() => {
switch (detail.repository.kind) {
case RepositoryKind.Krew:
let manifest: string | undefined = getManifestRaw();
if (!isUndefined(manifest)) {
additionalTitles += '# Manifest\n';
}
return (
<>
{!isUndefined(manifest) && (
<div className={`mb-5 ${styles.codeWrapper}`}>
<AnchorHeader level={2} scrollIntoView={scrollIntoView} title="Manifest" />
<div
className={`d-flex d-xxxl-inline-block mw-100 position-relative overflow-hidden border ${styles.manifestWrapper}`}
>
<BlockCodeButtons content={manifest} filename={`${detail.normalizedName}-rules.yaml`} />
<SyntaxHighlighter
language="yaml"
style={docco}
customStyle={{
backgroundColor: 'transparent',
padding: '1.5rem',
lineHeight: '1.25rem',
marginBottom: '0',
height: '100%',
fontSize: '80%',
color: '#636a6e',
}}
lineNumberStyle={{
color: 'var(--color-black-25)',
marginRight: '5px',
fontSize: '0.8rem',
}}
showLineNumbers
>
{manifest}
</SyntaxHighlighter>
</div>
</div>
)}
</>
);
default:
return null;
}
})()}
</>
);
return { content: additionalContent, titles: additionalTitles };
};
const supportLink: string | undefined = getSupportLink();
const additionalInfo = getAdditionalPkgContent();
return (
<>
{!isUndefined(props.searchUrlReferer) && (
<SubNavbar>
<button
className={`btn btn-link btn-sm ps-0 d-flex align-items-center ${styles.link}`}
onClick={() => {
history.push({
pathname: '/packages/search',
search: prepareQueryString({
pageNumber: pageNumber || 1,
tsQueryWeb: tsQueryWeb,
tsQuery: tsQuery,
filters: filters,
deprecated: deprecated,
operators: operators,
verifiedPublisher: verifiedPublisher,
official: official,
sort: sort,
}),
state: { 'from-detail': true },
});
}}
aria-label="Back to results"
>
<IoIosArrowBack className="me-2" />
{tsQueryWeb ? (
<>
Back to "<span className="fw-bold">{tsQueryWeb}</span>" results
</>
) : (
<>
Back to
<span className={`fw-bold ${styles.extraSpace}`}> search results</span>
</>
)}
</button>
</SubNavbar>
)}
{!isUndefined(props.fromStarredPage) && props.fromStarredPage && (
<SubNavbar>
<button
className={`btn btn-link btn-sm ps-0 d-flex align-items-center ${styles.link}`}
onClick={() => {
history.push({
pathname: '/packages/starred',
state: { 'from-detail': true },
});
}}
aria-label="Back to starred packages"
>
<IoIosArrowBack className="me-2" />
<div>
Back to <span className="fw-bold">starred packages</span>
</div>
</button>
</SubNavbar>
)}
<div data-testid="mainPackage" className="position-relative flex-grow-1">
{(isLoadingPackage || isUndefined(detail)) && <Loading spinnerClassName="position-fixed top-50" />}
{!isUndefined(detail) && (
<>
{!isNull(detail) && (
<>
<div className={`jumbotron package-detail-jumbotron rounded-0 mb-2 ${styles.jumbotron}`}>
<div className="container-lg px-sm-4 px-lg-0 position-relative">
<div className="d-flex align-items-start w-100 mb-3">
<div className="d-flex align-items-center flex-grow-1 mw-100">
<div
className={`d-flex align-items-center justify-content-center p-1 p-md-2 overflow-hidden border border-2 rounded-circle bg-white ${styles.imageWrapper} imageWrapper`}
>
<Image
className={styles.image}
alt={detail.displayName || detail.name}
imageId={detail.logoImageId}
kind={detail.repository.kind}
/>
</div>
<div className={`ms-3 flex-grow-1 ${styles.wrapperWithContentEllipsis}`}>
<div className={`d-flex flex-row align-items-center ${styles.titleWrapper}`}>
<div className={`h3 mb-0 text-nowrap text-truncate ${styles.title}`}>
{detail.displayName || detail.name}
</div>
<div className="d-none d-md-flex ms-3">{getBadges(false, 'mt-1')}</div>
</div>
<div className={`d-flex d-md-none text-truncate mt-2 w-100 ${styles.mobileSubtitle}`}>
<small className="text-muted text-uppercase">Repo: </small>
<div className={`mx-1 d-inline ${styles.mobileIcon}`}>
<RepositoryIcon kind={detail.repository.kind} className={`w-auto ${styles.repoIcon}`} />
</div>
<span className={`text-dark d-inline-block text-truncate mw-100 ${styles.mobileVersion}`}>
{detail.repository.displayName || detail.repository.name}
</span>
</div>
<div className={`d-none d-md-flex flex-row align-items-baseline mt-2 ${styles.subtitle}`}>
{detail.repository.userAlias ? (
<div className={`me-2 text-truncate ${styles.mw50}`}>
<small className="me-1 text-uppercase text-muted">User: </small>
<Link
className="text-dark"
to={{
pathname: '/packages/search',
search: prepareQueryString({
pageNumber: 1,
filters: {
user: [detail.repository.userAlias!],
},
deprecated: detail.deprecated || false,
}),
}}
>
{detail.repository.userAlias}
</Link>
</div>
) : (
<OrganizationInfo
className={`me-2 text-truncate d-flex flex-row align-items-baseline ${styles.mw50}`}
organizationName={detail.repository.organizationName!}
organizationDisplayName={detail.repository.organizationDisplayName}
deprecated={detail.deprecated}
visibleLegend
/>
)}
<RepositoryInfo
repository={detail.repository}
deprecated={detail.deprecated}
className={`text-truncate d-flex flex-row align-items-baseline ${styles.mw50}`}
repoLabelClassName={styles.repoLabel}
visibleIcon
withLabels
/>
</div>
</div>
</div>
</div>
<p className={`mb-0 overflow-hidden text-break ${styles.description}`}>{detail.description}</p>
<Stats
packageStats={detail.stats}
productionOrganizationsCount={detail.productionOrganizationsCount}
/>
<div className="d-flex flex-wrap d-md-none">{getBadges(true, 'mt-3 mt-md-0')}</div>
<div
className={`position-absolute d-flex flex-row align-items-center top-0 end-0 ${styles.optsWrapper}`}
>
{detail!.ts && !isFuture(detail!.ts) && (
<span className={`d-block d-md-none text-muted text-nowrap ${styles.date}`}>
Updated {moment.unix(detail!.ts).fromNow()}
</span>
)}
<StarButton packageId={detail.packageId} />
<SubscriptionsButton packageId={detail.packageId} />
<InProductionButton normalizedName={detail.normalizedName} repository={detail.repository} />
<MoreActionsButton
packageId={detail.packageId}
packageName={detail.displayName || detail.name}
packageDescription={detail.description}
visibleWidget={!isUndefined(props.visibleModal) && props.visibleModal === 'widget'}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
/>
</div>
<div className="row align-items-baseline d-md-none">
<Modal
buttonType="btn-outline-secondary btn-sm text-nowrap"
buttonContent={
<>
<FiPlus className="me-2" />
<span>Info</span>
</>
}
header={
<ModalHeader
displayName={detail.displayName}
name={detail.name}
logoImageId={detail.logoImageId}
repoKind={detail.repository.kind}
/>
}
className={`col mt-3 ${styles.btnMobileWrapper}`}
>
<Details
package={detail}
sortedVersions={sortedVersions}
channels={detail.channels}
viewsStats={viewsStats}
version={props.version}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
visibleSecurityReport={false}
/>
</Modal>
{getInstallationModal(`col mt-3 ${styles.btnMobileWrapper}`)}
{point && ['xs', 'sm'].includes(point) && (
<div className={`col mt-3 ${styles.btnMobileWrapper}`}>
<ChangelogModal
packageId={detail.packageId}
normalizedName={detail.normalizedName}
repository={detail.repository}
hasChangelog={detail.hasChangelog!}
currentVersion={props.version}
visibleChangelog={!isUndefined(props.visibleModal) && props.visibleModal === 'changelog'}
visibleVersion={
!isUndefined(props.visibleModal) && props.visibleModal === 'changelog'
? props.visibleVersion
: undefined
}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
/>
</div>
)}
</div>
</div>
</div>
{renderMoreDetails()}
</>
)}
<div className="container-lg px-sm-4 px-lg-0">
{isNull(detail) && !isLoadingPackage ? (
<NoData className={styles.noDataWrapper}>
{isNull(apiError) ? (
<>An error occurred getting this package, please try again later.</>
) : (
<>{apiError}</>
)}
</NoData>
) : (
<div className="d-flex flex-column-reverse d-md-block px-xs-0 px-sm-3 px-lg-0">
<div
className={`ms-0 ms-md-5 mb-5 position-relative float-none float-md-end ${styles.additionalInfo}`}
>
{!isNull(detail) && (
<div ref={columnWrapper} className={styles.rightColumnWrapper}>
<div className="d-none d-md-block">
{getInstallationModal('mb-2')}
<div className="d-none d-lg-block">
<ChartTemplatesModal
normalizedName={detail.normalizedName}
packageId={detail.packageId}
version={detail.version!}
sortedVersions={sortedVersions}
repoKind={detail.repository.kind}
visibleChartTemplates={
!isUndefined(props.visibleModal) && props.visibleModal === 'template'
}
visibleTemplate={
!isUndefined(props.visibleModal) && props.visibleModal === 'template'
? props.visibleTemplate
: undefined
}
compareVersionTo={
!isUndefined(props.visibleModal) && props.visibleModal === 'template'
? props.compareVersionTo
: undefined
}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
/>
</div>
<div className="d-none d-lg-block">
<ContentDefaultModal
kind={ContentDefaultModalKind.CustomResourcesDefinition}
packageId={detail.packageId}
modalName="crds"
language="yaml"
visibleModal={!isUndefined(props.visibleModal) && props.visibleModal === 'crds'}
visibleFile={
!isUndefined(props.visibleModal) && props.visibleModal === 'crds'
? props.visibleFile
: undefined
}
btnModalContent={
<div className="d-flex flex-row align-items-center justify-content-center">
<FiCode />
<span className="ms-2 fw-bold text-uppercase">CRDs</span>
</div>
}
normalizedName={detail.normalizedName}
title="Custom Resources Definition"
files={getCRDs() as any}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
/>
</div>
<div className="d-none d-lg-block">
<ContentDefaultModal
kind={ContentDefaultModalKind.Rules}
packageId={detail.packageId}
modalName="rules"
language="yaml"
visibleModal={!isUndefined(props.visibleModal) && props.visibleModal === 'rules'}
visibleFile={
!isUndefined(props.visibleModal) && props.visibleModal === 'rules'
? props.visibleFile
: undefined
}
btnModalContent={
<div className="d-flex flex-row align-items-center justify-content-center">
<FiCode />
<span className="ms-2 fw-bold text-uppercase">Rules</span>
</div>
}
normalizedName={detail.normalizedName}
title="Rules"
files={getFalcoRules() as any}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
/>
</div>
<div className="d-none d-lg-block">
<ContentDefaultModal
kind={ContentDefaultModalKind.Policy}
packageId={detail.packageId}
modalName="policies"
language="text"
visibleModal={!isUndefined(props.visibleModal) && props.visibleModal === 'policies'}
visibleFile={
!isUndefined(props.visibleModal) && props.visibleModal === 'policies'
? props.visibleFile
: undefined
}
btnModalContent={
<div className="d-flex flex-row align-items-center justify-content-center">
<FiCode />
<span className="ms-2 fw-bold text-uppercase">Policies</span>
</div>
}
normalizedName={detail.normalizedName}
title="Policies"
files={getOPAPolicies() as any}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
/>
</div>
{(() => {
switch (detail.repository.kind) {
case RepositoryKind.TektonTask:
case RepositoryKind.TektonPipeline:
return (
<TektonManifestModal
normalizedName={detail.normalizedName}
manifestRaw={getManifestRaw()}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
visibleManifest={
!isUndefined(props.visibleModal) && props.visibleModal === 'manifest'
}
/>
);
case RepositoryKind.Helm:
return (
<>
<div className="mb-2">
<Values
packageId={detail.packageId}
version={detail.version!}
normalizedName={detail.normalizedName}
sortedVersions={sortedVersions}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
visibleValues={
!isUndefined(props.visibleModal) && props.visibleModal === 'values'
}
visibleValuesPath={
!isUndefined(props.visibleModal) && props.visibleModal === 'values'
? props.visibleValuesPath
: undefined
}
compareVersionTo={
!isUndefined(props.visibleModal) && props.visibleModal === 'values'
? props.compareVersionTo
: undefined
}
/>
</div>
{detail.hasValuesSchema && (
<div className="mb-2">
<ValuesSchema
packageId={detail.packageId}
version={detail.version!}
normalizedName={detail.normalizedName}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
visibleValuesSchema={
!isUndefined(props.visibleModal) && props.visibleModal === 'values-schema'
}
visibleValuesSchemaPath={
!isUndefined(props.visibleModal) && props.visibleModal === 'values-schema'
? props.visibleValuesPath
: undefined
}
/>
</div>
)}
</>
);
default:
return null;
}
})()}
{point && !['xs', 'sm'].includes(point) && (
<div className="mb-2">
<ChangelogModal
packageId={detail.packageId}
normalizedName={detail.normalizedName}
repository={detail.repository}
hasChangelog={detail.hasChangelog!}
currentVersion={props.version}
visibleChangelog={
!isUndefined(props.visibleModal) && props.visibleModal === 'changelog'
}
visibleVersion={
!isUndefined(props.visibleModal) && props.visibleModal === 'changelog'
? props.visibleVersion
: undefined
}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
/>
</div>
)}
{!isUndefined(detail.screenshots) && (
<ScreenshotsModal
screenshots={detail.screenshots}
visibleScreenshotsModal={
!isUndefined(props.visibleModal) && props.visibleModal === 'screenshots'
}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
/>
)}
<div className={`card shadow-sm position-relative info ${styles.info}`}>
<div className={`card-body ${styles.detailsBody}`}>
<Details
package={detail}
sortedVersions={sortedVersions}
channels={detail.channels}
searchUrlReferer={props.searchUrlReferer}
fromStarredPage={props.fromStarredPage}
visibleSecurityReport={
!isUndefined(props.visibleModal) && props.visibleModal === 'security-report'
}
visibleImage={props.visibleImage}
visibleTarget={props.visibleTarget}
visibleSection={props.visibleSection}
viewsStats={viewsStats}
version={props.version}
eventId={
!isUndefined(props.visibleModal) && props.visibleModal === 'security-report'
? props.eventId
: undefined
}
/>
</div>
</div>
</div>
{!isUndefined(relatedPosition) && relatedPosition === 'column' && (
<div className={styles.relatedPackagesWrapper}>
<RelatedPackages packages={relatedPackages} in={relatedPosition} />
</div>
)}
</div>
)}
</div>
{!isNull(detail) && (
<>
<div
className={`noFocus ${styles.mainContent}`}
id="content"
tabIndex={-1}
aria-label="Package detail"
>
<div ref={contentWrapper}>
{isNull(detail.readme) || isUndefined(detail.readme) ? (
<div className={styles.contentWrapper}>
<NoData className="w-100 noReadmeAlert bg-transparent">
<div>
<div className={`mb-4 ${styles.fileIcon}`}>
<IoDocumentTextOutline />
</div>
<p className="h4 mb-3">This package version does not provide a README file</p>
</div>
</NoData>
</div>
) : (
<ReadmeWrapper
packageName={detail.displayName || detail.name}
supportLink={supportLink}
markdownContent={detail.readme}
scrollIntoView={scrollIntoView}
additionalTitles={isNull(additionalInfo) ? '' : additionalInfo.titles}
/>
)}
{!isNull(additionalInfo) && <>{additionalInfo.content}</>}
</div>
<PackagesViewsStats
stats={viewsStats}
version={props.version}
repoKind={detail.repository.kind}
title={
<AnchorHeader
level={2}
scrollIntoView={scrollIntoView}
anchorName="views"
title="Views over the last 30 days"
/>
}
/>
{!isUndefined(relatedPosition) && relatedPosition === 'content' && (
<RelatedPackages
className={styles.relatedWrapper}
packages={relatedPackages}
title={<AnchorHeader level={2} scrollIntoView={scrollIntoView} title="Related packages" />}
in={relatedPosition}
/>
)}
</div>
</>
)}
</div>
)}
</div>
</>
)}
</div>
<Footer isHidden={isLoadingPackage || isUndefined(detail)} />
</>
);
}
Example #14
| Source File: index.tsx From NextLevelWeek with MIT License | 4 votes |
|
OrphanageCreate: React.FC = () => {
const history = useHistory();
const [position, setPosition] = useState({ latitude: 0, longitude: 0 });
// Função para quando clicar no mapa
function handleMapClick(e: LeafletMouseEvent) {
// console.log(e);
const { lat, lng } = e.latlng;
setPosition({
latitude: lat,
longitude: lng,
});
}
// Campos do formulário
const [name, setName] = useState('');
const [about, setAbout] = useState('');
const [instructions, setInstructions] = useState('');
const [opening_hours, setOpeningHours] = useState('');
const [open_on_weekends, setOpenOnWeekends] = useState(true);
// Função para o envio do fomulário
async function handleSubmit(e: FormEvent) {
e.preventDefault();
const { latitude, longitude } = position;
const data = new FormData();
data.append('name', name);
data.append('about', about);
data.append('latitude', String(latitude));
data.append('longitude', String(longitude));
data.append('instructions', instructions);
data.append('opening_hours', opening_hours);
data.append('open_on_weekends', String(open_on_weekends));
images.forEach(image => {
data.append('images', image);
});
await api.post('/orphanages', data);
history.push('/app');
}
// Função quando seleciona a imagem
const [images, setImages] = useState<File[]>([]);
const [previewImages, setPreviewImages] = useState<string[]>([]);
function handleSelectImages(e: ChangeEvent<HTMLInputElement>) {
// console.log(e.target.files);
if (!e.target.files) {
return;
}
// Array de imagens
const selectedImages = Array.from(e.target.files)
setImages(selectedImages);
// Preview das imagens
const selectedImagesPreview = selectedImages.map(image => {
return URL.createObjectURL(image);
});
setPreviewImages(selectedImagesPreview);
}
return (
<Container>
<Sidebar />
<Content>
<Form onSubmit={handleSubmit}>
<fieldset>
<legend>Dados</legend>
<Map
center={[-5.8044209, -35.263095]}
style={{ width: '100%', height: 280 }}
zoom={15}
onclick={handleMapClick}
>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
{
position.latitude !== 0 &&
<Marker
interactive={false}
icon={happyMapIcon}
position={[position.latitude, position.longitude]}
/>
}
</Map>
<InputContainer>
<label htmlFor="name">Nome</label>
<input
id="name"
value={name}
onChange={e => setName(e.target.value)}
/>
</InputContainer>
<InputContainer>
<label htmlFor="about">Sobre <span>Máximo de 300 caracteres</span></label>
<textarea
id="about"
maxLength={300}
value={about}
onChange={e => setAbout(e.target.value)}
/>
</InputContainer>
<InputContainer>
<label htmlFor="images">Fotos</label>
<ImagesContainer>
{previewImages.map(image => {
return (
<img
key={image}
src={image}
alt={name}
/>
)
})}
<label htmlFor="image[]">
<FiPlus size={24} color="#15b6d6" />
</label>
</ImagesContainer>
<input
type="file"
id="image[]"
multiple
onChange={handleSelectImages}
/>
</InputContainer>
</fieldset>
<fieldset>
<legend>Visitação</legend>
<InputContainer>
<label htmlFor="instructions">Instruções</label>
<textarea
id="instructions"
value={instructions}
onChange={e => setInstructions(e.target.value)}
/>
</InputContainer>
<InputContainer>
<label htmlFor="opening_hours">Horário de funcionamento</label>
<input
id="opening_hours"
value={opening_hours}
onChange={e => setOpeningHours(e.target.value)}
/>
</InputContainer>
<InputContainer>
<label htmlFor="open_on_weekends">Atende no fim de semana</label>
<OpenOnWeekendContainer>
<SelectButton
type="button"
active={open_on_weekends}
onClick={() => setOpenOnWeekends(true)}
>Sim</SelectButton>
<SelectButton
type="button"
active={!open_on_weekends}
onClick={() => setOpenOnWeekends(false)}
>Não</SelectButton>
</OpenOnWeekendContainer>
</InputContainer>
</fieldset>
<button type="submit">Confirmar</button>
</Form>
</Content>
</Container>
);
}
Example #15
| Source File: CreateOrphanage.tsx From happy with MIT License | 4 votes |
|
export default function CreateOrphanage() {
const history = useHistory();
const [position, setPosition] = useState({ latitude: 0, longitude: 0 });
const [name, setName] = useState('');
const [about, setAbout] = useState('');
const [instructions, setInstructions] = useState('');
const [opening_hours, setOpeningHours] = useState('');
const [open_on_weekends, setOpenOnWeekends] = useState(true);
const [images, setImages] = useState<File[]>([]);
const [previewImages, setPreviewImages] = useState<PreviewImage[]>([]);
function handleMapClick(event: LeafletMouseEvent) {
const { lat, lng } = event.latlng;
setPosition({
latitude: lat,
longitude: lng
});
}
async function handleSubmit(event: FormEvent) {
event.preventDefault();
const { latitude, longitude } = position;
const data = new FormData();
data.append('name', name);
data.append('about', about);
data.append('latitude', String(latitude));
data.append('longitude', String(longitude));
data.append('instructions', instructions);
data.append('opening_hours', opening_hours);
data.append('open_on_weekends', String(open_on_weekends));
images.forEach(image => {
data.append('images', image);
});
await api.post('/orphanages', data);
alert('Orfanato cadastrado com sucesso!');
history.push('/app');
}
function handleSelectImages(event: ChangeEvent<HTMLInputElement>) {
if (!event.target.files) {
return;
}
const selectedImages = Array.from(event.target.files);
event.target.value = "";
setImages(selectedImages);
const selectedImagesPreview = selectedImages.map(image => {
return { name: image.name, url: URL.createObjectURL(image) };
});
setPreviewImages(selectedImagesPreview);
}
function handleRemoveImage(image: PreviewImage) {
setPreviewImages(
previewImages.map((image) => image).filter((img) => img.url !== image.url)
);
setImages(
images.map((image) => image).filter((img) => img.name !== image.name)
);
}
return (
<div id="page-create-orphanage">
<Sidebar />
<main>
<form onSubmit={handleSubmit} className="create-orphanage-form">
<fieldset>
<legend>Dados</legend>
<Map
center={[-27.2092052, -49.6401092]}
style={{ width: '100%', height: 280 }}
zoom={15}
onclick={handleMapClick}
>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
{position.latitude !== 0 && (
<Marker
interactive={false}
icon={mapIcon}
position={[
position.latitude,
position.longitude
]}
/>
)}
</Map>
<div className="input-block">
<label htmlFor="name">Nome</label>
<input
id="name"
value={name}
onChange={event => setName(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="about">Sobre <span>Máximo de 300 caracteres</span></label>
<textarea
id="name"
maxLength={300}
value={about}
onChange={event => setAbout(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="images">Fotos</label>
<div className="images-container">
{previewImages.map((image) => {
return (
<div key={image.url}>
<span
className="remove-image"
onClick={() => handleRemoveImage(image)}
>
<FiX size={18} color="#ff669d" />
</span>
<img src={image.url} alt={name} className="new-image" />
</div>
);
})}
<label htmlFor="image[]" className="new-image">
<FiPlus size={24} color="#15b6d6" />
</label>
</div>
<input
type="file"
multiple
accept=".png, .jpg, .jpeg"
onChange={handleSelectImages}
id="image[]"
/>
</div>
</fieldset>
<fieldset>
<legend>Visitação</legend>
<div className="input-block">
<label htmlFor="instructions">Instruções</label>
<textarea
id="instructions"
value={instructions}
onChange={event => setInstructions(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="opening_hours">Horário de Funcionamento</label>
<input
id="opening_hours"
value={opening_hours}
onChange={event => setOpeningHours(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="open_on_weekends">Atende fim de semana</label>
<div className="button-select">
<button
type="button"
className={open_on_weekends ? 'active' : ''}
onClick={() => setOpenOnWeekends(true)}
>
Sim
</button>
<button
type="button"
className={!open_on_weekends ? 'active' : ''}
onClick={() => setOpenOnWeekends(false)}
>
Não
</button>
</div>
</div>
</fieldset>
<button className="confirm-button" type="submit">
Confirmar
</button>
</form>
</main>
</div>
);
}
