office-ui-fabric-react#Image TypeScript Examples
The following examples show how to use
office-ui-fabric-react#Image.
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: ListCarousel.tsx From art with MIT License | 6 votes |
|
createGrid(): JSX.Element[] {
let grid: JSX.Element[] = [];
this.props.items.forEach((item: any, i: number) => {
let isSelected = false
if (this.props.selectedArtwork !== null && item.id === this.props.selectedArtwork!.id) {
isSelected = true
}
grid.push(
<div className="explore__card-img-container" key={i} onClick={() => this.props.selectorCallback(item)}>
<LazyLoad
throttle={250}
height={200}
offset={1000}
placeholder={<CircularProgress style={{ color: '#6A6A6A' }} />}>
<Image alt={item.title} className="explore__card-img" style={isSelected ? { "border": "4px solid black" } : { "border": "4px solid white" }} src={item.Thumbnail_Url} />
</LazyLoad>
</div>
);
})
return grid;
}
Example #2
| Source File: Mantainers.tsx From website with MIT License | 5 votes |
|
Mantainers = () => {
var theme = useTheme();
const locale = LocalizationService.strings();
var language: string | undefined = LocalizationService.getLanguage();
const profileIconStyle = { color: theme.palette.themePrimary, fontSize: FontSizes.size24 };
const sectionCard = {
minHeight: '120px',
height: '100%',
width: '100%',
maxWidth: 'none',
marginLeft: 'auto',
marginRight: 'auto',
maxHeight: 'none',
backgroundColor: theme.palette.white
};
return (
<div className="pb-4 pt-4" style={{ backgroundColor: theme.palette.neutralLighter }}>
<Container className="contributors text-center">
<div className="mb-4"><Text variant="xLarge">{locale?.contributors.header1}</Text></div>
<Row className="justify-content-center">
{
developers.map((x: any, i: any) => {
return (
<Col className="mb-3" xl={4} lg={4} md={4} sm={6} xs={12} key={i}>
<Card tokens={cardTokens} style={sectionCard} className="justify-content-center text-center">
<Card.Section>
<div className="justify-content-center">
<Image id="logo"
src={process.env.PUBLIC_URL + "/contributors/" + x.pic}
alt={x.name}
style={developerPic}
/>
</div>
<div className="mb-0"><Text variant="medium" styles={semibold}>{x.name}</Text></div>
<Text variant="medium" className="mt-2">
{x.description[language!]}
</Text>
<div>
<TooltipHost
content={locale?.contributors.githubProfile}
calloutProps={calloutProps}
styles={hostStyles}
delay={TooltipDelay.zero}
>
<Link onClick={() => redirectToLink(x.github)}><Icon iconName="ProfileSearch" style={profileIconStyle} /></Link>
</TooltipHost>
<TooltipHost
content={locale?.contributors.websiteProfile}
calloutProps={calloutProps}
styles={hostStyles}
delay={TooltipDelay.zero}
>
<Link onClick={() => redirectToLink(x.website)}><Icon iconName="Website" style={profileIconStyle} /></Link>
</TooltipHost>
</div>
</Card.Section>
</Card>
</Col>
)
})
}
</Row>
</Container>
</div>
)
}
Example #3
| Source File: QueryArtwork.tsx From art with MIT License | 5 votes |
|
render() {
let musImg = (this.props.artwork.Museum === 'rijks') ? <img style={{height:'5vh'}} id='musButton1' alt={"The Rijksmuseum Icon"} src={rijksImg} /> : <img style={{height:'5vh'}} id='musButton1' alt={"The Met Museum Icon"} src={metImg} />;
let imgURL = this.props.artwork.Thumbnail_Url;
return (
<React.Fragment>
<HideAt breakpoint="mediumAndBelow">
<Stack horizontal horizontalAlign="end" verticalAlign="center" className="explore__main-images">
<Stack verticalAlign="end" style={{ "marginRight": 20 }}>
<Text block style={{ "textAlign": "right", "fontWeight": "bold" , "width":"15vw"}} variant="xLarge">{this.props.artwork.Title ? this.props.artwork.Title : "Untitled Piece"}</Text>
<Text style={{ "textAlign": "right", "textTransform": "capitalize"}} variant="large">{this.props.artwork.Culture.replace(/_/g, " ")}</Text>
<Text style={{ "textAlign": "right", "marginBottom": 15 , "textTransform": "capitalize"}} variant="large">{this.props.artwork.Classification.replace(/_/g, " ")}</Text>
</Stack>
<Stack>
<div className="explore__artwork-frame" onMouseEnter={() => this.setState({ hover: true })} onMouseLeave={() => this.setState({ hover: false })}>
<Image height={"35vh"} style={{"maxWidth":"30vw", "objectFit":"cover"}} src={imgURL} className="explore__img" />
<div className="explore__museum-icon">
<TooltipHost delay={TooltipDelay.medium} closeDelay={0} directionalHint={DirectionalHint.bottomCenter} content="View Source" calloutProps={{ gapSpace: 0, target: `#musButton1` }}>
<a href={this.props.artwork.Museum_Page} target="_blank" rel="noopener noreferrer">
{musImg}
</a>
</TooltipHost>
</div>
</div>
<Text style={{ "textAlign": "center", "fontWeight": "bold", "paddingTop": "10px" }} variant="large">Query Image</Text>
</Stack>
</Stack>
</HideAt>
<ShowAt breakpoint="mediumAndBelow">
<Stack horizontal horizontalAlign="center" verticalAlign="center" className="explore__main-images">
<Stack onMouseEnter={() => this.setState({ hover: true })} onMouseLeave={() => this.setState({ hover: false })}>
<Stack className="explore__img-container" onMouseEnter={() => this.setState({ hover: true })} onMouseLeave={() => this.setState({ hover: false })}>
<Image height={"275px"} style={{"maxWidth":"100%", "objectFit": "cover"}} src={imgURL} />
<div className="explore__museum-icon">
<TooltipHost delay={TooltipDelay.medium} closeDelay={0} directionalHint={DirectionalHint.bottomCenter} content="View Source" calloutProps={{ gapSpace: 0, target: `#musButton1` }}>
<a href={this.props.artwork.Museum_Page} target="_blank" rel="noopener noreferrer">
{musImg}
</a>
</TooltipHost>
</div>
</Stack>
<Text style={{ "textAlign": "center", "fontWeight": "bold" }} variant="large">Query Image</Text>
</Stack>
</Stack>
</ShowAt>
</React.Fragment>
)
}
Example #4
| Source File: ResultArtwork.tsx From art with MIT License | 5 votes |
|
render() {
var musImg
if (this.props.artwork.Museum === 'rijks') {
musImg = <img style={{ height: '5vh' }} id='musButton2' alt={"The Rijksmuseum Icon"} src={rijksImg} />
} else{
musImg = <img style={{ height: '5vh' }} id='musButton2' alt={"The Met Museum Icon"} src={metImg} />
};
const imgURL = this.props.artwork.Thumbnail_Url;
let dataLoaded = this.props.artwork.id == null ? false : true;
return (
<React.Fragment>
<HideAt breakpoint="mediumAndBelow">
<Stack horizontal horizontalAlign="start" verticalAlign="center" className="explore__main-images">
<Stack>
<Shimmer isDataLoaded={dataLoaded} shimmerElements={[{ type: ShimmerElementType.line, height: 340, width: 300 }]} ariaLabel="loading content">
<div className="explore__artwork-frame">
<Image height={"35vh"} style={{ "maxWidth": "30vw", "objectFit": "cover" }} src={imgURL} className="explore__img" />
<div className="explore__museum-icon">
<TooltipHost delay={TooltipDelay.medium} closeDelay={0} directionalHint={DirectionalHint.bottomCenter} content="View Source" calloutProps={{ gapSpace: 0, target: `#musButton2` }}>
<a href={this.props.artwork.Museum_Page} target="_blank" rel="noopener noreferrer">
{musImg}
</a>
</TooltipHost>
</div>
</div>
</Shimmer>
<Text style={{ "textAlign": "center", "fontWeight": "bold", "paddingTop": "10px" }} variant="large">{"Close Match"}</Text>
</Stack>
<Stack style={{ "marginLeft": 20 }}>
<Text block style={{ "fontWeight": "bold", "width": "15vw" }} variant="xLarge">{this.props.artwork.Title ? this.props.artwork.Title : "Untitled Piece"}</Text>
<Text style={{ "textTransform": "capitalize" }} variant="large">{this.props.artwork.Culture.replace(/_/g, " ")}</Text>
<Text variant="large" style={{ "marginBottom": 15, "textTransform": "capitalize" }}>{this.props.artwork.Classification.replace(/_/g, " ")}</Text>
</Stack>
</Stack>
</HideAt>
<ShowAt breakpoint="mediumAndBelow">
<Stack horizontal horizontalAlign="center" verticalAlign="center" className="explore__main-images">
<Stack>
<div className="explore__img-container">
<Shimmer isDataLoaded={dataLoaded} shimmerElements={[{ type: ShimmerElementType.line, height: 280, width: 230 }]} ariaLabel="loading content">
<div className="explore__artwork-frame">
<Image height={"275px"} style={{ "maxWidth": "100%", "objectFit": "cover" }} src={imgURL} />
<div className="explore__museum-icon">
<TooltipHost delay={TooltipDelay.medium}
closeDelay={0}
directionalHint={DirectionalHint.bottomCenter}
content="View Source"
calloutProps={{ gapSpace: 0, target: `#musButton2` }}>
<a href={this.props.artwork.Museum_Page} target="_blank" rel="noopener noreferrer">
{musImg}
</a>
</TooltipHost>
</div>
</div>
</Shimmer>
</div>
<Text style={{ "textAlign": "center", "fontWeight": "bold" }} variant="large">{"Close Match"}</Text>
</Stack>
</Stack>
</ShowAt>
</React.Fragment>
)
}
Example #5
| Source File: ResultBox.tsx From art with MIT License | 5 votes |
|
render() {
let museumName = this.props.data.Museum === "met" ? "The Met" : "The Rijks";
return (
<Card className="grid-card" onMouseEnter={() => this.setState({ hover: true })} onMouseLeave={() => this.setState({ hover: false })}>
<Card.Item className="grid-card__link">
<div onClick={() => {
if (isBeta) {
window.location.href = urlEncodeArt(this.props.data.id);
} else {
this.openModal()
};
}}>
<LazyLoad
throttle={250}
height={200}
offset={1000}
placeholder={<CircularProgress style={{ color: '#6A6A6A' }} />}
>
<Image className="grid-card__img" alt="thumbnail" src={this.props.data.Thumbnail_Url} imageFit={ImageFit.contain} />
</LazyLoad>
</div>
<Popup
open={this.state.open}
closeOnDocumentClick
onClose={this.closeModal}
>
<div className="modal">
<button className="close" onClick={this.closeModal}>
×
</button>
{betaMessageDiv}
</div>
</Popup>
</Card.Item>
<Card.Item>
<div className="grid-card__title" style={{ marginTop: -10, textAlign: "center" }}>{!this.props.data.Title ?
"Untitled Piece" :
this.props.data.Title.length < 55 ? this.props.data.Title : this.props.data.Title.substring(0, 55) + "..."}</div>
</Card.Item>
<Card.Item >
<div className="grid-card__text" style={{ marginTop: -10, textAlign: "center" }}>{!this.props.data.Artist ? "No known artist" : this.props.data.Artist}</div>
</Card.Item>
<Card.Item>
<CSSTransition in={this.state.hover} timeout={0} classNames="grid-card__slide">
<Stack horizontal className="grid-card__buttons">
<a
href={this.props.data.Museum_Page}
onClick={() => this.props.handleTrackEvent("Source", { "Location": "SearchPage", "ArtLink": this.props.data.Link_Resource })}
className="grid-card__button_link"
target="_blank"
rel="noopener noreferrer">View Source at {museumName}</a>
<div className="grid-card__button_sep"></div>
</Stack>
</CSSTransition>
</Card.Item>
</Card>
);
}
Example #6
| Source File: GroupsView.tsx From website with MIT License | 4 votes |
|
GroupsView = () => {
var theme = useTheme();
const locale = LocalizationService.strings();
var language: string | undefined = LocalizationService.getLanguage();
let history = useHistory();
let didMount = React.useRef(false);
const resetIcon: IIconProps = { iconName: 'Refresh' };
const calloutProps = { gapSpace: 10 };
const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
/* States */
let [hideApiErrorDialog, { toggle: toggleApiErrorDialog }] = useBoolean(true);
let [degreeTextSearch, setDegreeTextSearch] = React.useState(''); // Testo nel campo di ricerca
let [loadedDegree, setLoadedDegree] = React.useState<VerboseDegree | null>(null); // Degree da passare ai vari componenti (DegreeInformations e AdminsList)
let [selectedDegree, setSelectedDegree] = React.useState<string>(''); // PK del Degree
let [searchData, setSearchData] = React.useState<ISuggestionItem[]>([]); // Array di ISuggestionItem (contenente anche Degree per ogni elemento)
let [courses, setCourses] = React.useState<CourseDegree[]>([]); // Corsi di insegnamento
let [reactHelmetContent, setReactHelmetContent] = React.useState<reactHelmetContent>(
{
title: locale?.helmet.courses.title!,
description: locale?.helmet.courses.description!,
href: 'https://studentiunimi.it/courses/',
hrefLang: language!
}
);
const [loadingCourses, setLoadingCourses] = React.useState<boolean>(false);
const [errorLoadingDegrees, setErrorLoadingDegrees] = React.useState<boolean>(false);
const [errorLoadingCourses, setErrorLoadingCourses] = React.useState<boolean>(false);
/* Handlers */
const entitySelectHandler = (item: ISuggestionItem): void => { // Questo viene triggerato quando selezioni qualcosa dal menù
setDegreeTextSearch(item.displayValue);
setSelectedDegree(item.key as unknown as string);
history.push(`/courses/${item.degree?.slug}`);
};
const searchTextHandler = (): void => { // Triggerato quando premi per la ricerca (si è deciso di selezionare il primo risultato)
if (searchData.length === 0) return;
setDegreeTextSearch(searchData[0]?.displayValue);
setSelectedDegree(searchData[0]?.key as unknown as string);
history.push(`/courses/${searchData[0]?.degree?.slug}`);
};
/* Degrees for the SearchBox */
const updateDegreesForSearchBox = React.useCallback(async (searchBoxText: string) => {
setDegreeTextSearch(searchBoxText)
if (searchBoxText === undefined || searchBoxText === "") return;
let degreesResult = await getDegreesForSearchBox(searchBoxText);
if (degreesResult.status !== 200) {
setErrorLoadingDegrees(true);
toggleApiErrorDialog();
console.error("error on degrees result by searchbox text");
return;
}
let tempSearchData : ISuggestionItem[] = [];
(degreesResult.value ?? []).map(x => {
return tempSearchData.push({degree: x, key: x.pk, displayValue: x.name!, searchValue: x.name!});
});
setSearchData(tempSearchData ?? []);
}, [toggleApiErrorDialog]);
/* Courses callBack */
const updateCourses = React.useCallback(async () => {
if (selectedDegree === '' || selectedDegree === undefined) return;
setErrorLoadingCourses(false);
setLoadingCourses(true);
let coursesResult = await getCourses(selectedDegree);
if (coursesResult.status !== 200) {
setLoadingCourses(false);
setErrorLoadingCourses(true);
return;
}
if (loadedDegree !== undefined && loadedDegree?.group?.invite_link !== '' && loadedDegree?.group?.invite_link !== null && loadedDegree?.group?.invite_link !== undefined) {
let mainDegreeGroup: CourseDegree = {
"course": {
pk: undefined,
name: "Gruppo principale",
cfu: 0,
wiki_link: "",
links: [],
group: {
id: loadedDegree?.group?.id!,
title: loadedDegree?.group?.title,
profile_picture: loadedDegree?.group?.profile_picture,
invite_link: loadedDegree?.group?.invite_link
},
},
year: -1,
semester: 0
};
coursesResult.value?.unshift(mainDegreeGroup);
}
setCourses(coursesResult.value ?? []);
setLoadingCourses(false);
setReactHelmetContent({
title: locale?.helmet.degreeLoaded.title1 + `${loadedDegree?.name} (${getDegreeTypeName(loadedDegree?.type!)})` + locale?.helmet.degreeLoaded.title2,
description: locale?.helmet.degreeLoaded.description1 + `${loadedDegree?.name} (${getDegreeTypeName(loadedDegree?.type!)})` + locale?.helmet.degreeLoaded.description2,
href: `https://studentiunimi.it/courses/${loadedDegree?.slug}`,
hrefLang: language!
});
}, [locale, selectedDegree, loadedDegree, language]);
/* This function initializes the VerboseDegree (retrieves degree based on url initialization) */
const initializeDegreeByUrl = React.useCallback(async () => {
if (!didMount.current) {
didMount.current = true;
var states = history.location.pathname.substring(1).split('/').filter(x => x !== '');
var degreeSlug = states.length >= 2 ? states[1].toLowerCase() : '';
if (degreeSlug === '') {
return;
}
let verboseDegreeResult = await getVerboseDegreeBySlug(degreeSlug);
if (verboseDegreeResult.status !== 200) {
return;
}
const verboseDeg = verboseDegreeResult.value ?? undefined;
if (verboseDeg === undefined || verboseDeg === null) return;
setSelectedDegree(verboseDeg.pk! as unknown as string);
setDegreeTextSearch(verboseDeg.name!)
setReactHelmetContent({
title: locale?.helmet.degreeLoaded.title1 + `${verboseDeg?.name} (${getDegreeTypeName(verboseDeg?.type!)})` + locale?.helmet.degreeLoaded.title2,
description: locale?.helmet.degreeLoaded.description1 + `${verboseDeg?.name} (${getDegreeTypeName(verboseDeg?.type!)})` + locale?.helmet.degreeLoaded.description2,
href: `https://studentiunimi.it/courses/${verboseDeg?.slug}`,
hrefLang: language!
});
}
}, [history.location.pathname, locale?.helmet.degreeLoaded.title1, locale?.helmet.degreeLoaded.title2, locale?.helmet.degreeLoaded.description1, locale?.helmet.degreeLoaded.description2, language]);
const updateLoadedDegree = React.useCallback(async () => {
if (selectedDegree === null || selectedDegree === undefined || selectedDegree === "") return;
let degreeResult = await getVerboseDegreeByID(selectedDegree);
if (degreeResult.status !== 200) return;
const degree = degreeResult.value ?? undefined;
if (degree === undefined || degree === null) return;
setLoadedDegree(degree);
}, [selectedDegree]);
React.useEffect(() => {
if (!didMount.current) initializeDegreeByUrl();
}, [searchData, loadedDegree, selectedDegree, initializeDegreeByUrl]);
React.useEffect(() => {
updateCourses();
}, [selectedDegree, loadedDegree, updateCourses]);
React.useEffect(() => {
updateLoadedDegree();
}, [selectedDegree, updateLoadedDegree]);
React.useEffect(() => {
/* Updating content based on browser commands (push and pop) */
return history.listen(async () => {
if (history.action === 'PUSH' || history.action === 'POP') {
var states = history.location.pathname.substring(1).split('/').filter(x => x !== '');
var degreeSlug = states.length >= 2 ? states[1].toLowerCase() : '';
if (degreeSlug === "") {
resetSection();
} else {
didMount.current = false;
initializeDegreeByUrl();
}
}
});
}, [history, initializeDegreeByUrl, updateCourses])
function resetSection() {
setLoadedDegree(null);
setSelectedDegree('');
setDegreeTextSearch('');
};
const modelProps = { isBlocking: false };
const dialogContentProps = {
type: DialogType.largeHeader,
title: locale?.serverError
};
return (
<>
<Helmet>
<meta charSet="utf-8" />
<title>{reactHelmetContent.title}</title>
<meta name="description" content={reactHelmetContent.description} />
<link rel="canonical" href={reactHelmetContent.href} />
<meta name="keywords" content={reactHelmetContent.title + ", " + reactHelmetContent.description + ", Network StudentiUniMi, Studenti UniMi, Network Studenti Unimi, Gruppi telegram unimi, Gruppi unimi, Siti web corsi unimi, Faq corsi unimi, Wiki Unimi"} />
<meta property="og:title" content={reactHelmetContent.title} />
<meta property="og:description" content={reactHelmetContent.description} />
<meta property="og:type" content="website" />
<meta property="og:url" content={reactHelmetContent.href} />
</Helmet>
<div className="groups">
<div className="pt-5">
<Container>
<Row>
<Col lg={3} className="text-center mb-3 mb-lg-0">
<div style={{ marginLeft: 'auto', marginRight: 'auto', maxWidth: 350 }}>
<Image className="mb-2" src={process.env.PUBLIC_URL + '/images/groups/groups.png'} style={{ display: 'inline-block', width: '100%' }} />
</div>
</Col>
<Col lg={9}>
<div className="mb-2">
<div className="mb-1">
<Text variant="medium" styles={semibold} style={{textTransform: 'uppercase', color: theme.palette.themePrimary}}>{locale?.groups.groupsSection.text1}</Text>
</div>
<div className="mb-2">
<span className="mr-1"><Text variant="xLargePlus">{locale?.groups.groupsSection.text2}</Text></span>
<TooltipHost
content={locale?.groups.resetSection}
calloutProps={calloutProps}
styles={hostStyles}
>
<IconButton iconProps={resetIcon} onClick={resetSection} />
</TooltipHost>
</div>
<div className="mb-2 mb-md-4">
<Text variant="large">{locale?.groups.groupsSection.text3}</Text>
</div>
</div>
<div className="search-box">
<Autocomplete
items={searchData}
searchTitle={locale?.groups.findDegreeByName}
suggestionCallback={(item) => entitySelectHandler(item)}
searchCallback={searchTextHandler}
changeCallback={(text) => updateDegreesForSearchBox(text)}
value={degreeTextSearch}
disabled={errorLoadingDegrees}
/>
</div>
<div className="mt-2" style={{ display: errorLoadingDegrees ? 'block' : 'none' }}>
<Text variant="medium" styles={semibold} style={{ color: theme.palette.red }}>{locale?.errorDataLoading}</Text>
</div>
</Col>
</Row>
</Container>
</div>
<div style={{ display: selectedDegree !== '' ? 'block' : 'none', marginTop: '1.5rem' }}>
<GroupList degree={loadedDegree!} courses={courses} loadingCourses={loadingCourses} errorLoadingCourses={errorLoadingCourses} />
<DegreeInformations degree={loadedDegree!} />
<AdminsList degree={loadedDegree!} />
</div>
<Container className="pb-4">
<Separator className="mb-3 mt-3" />
<div className="mb-4">
<Row>
<Col xl={9} lg={8}>
<div className="mb-3">
<div className="mb-1">
<Text variant="medium" styles={semibold} style={{ textTransform: 'uppercase', color: theme.palette.themePrimary }}>{locale?.groups.extraGroupsSection.text1}</Text>
</div>
<div className="mb-2">
<Text variant="xLargePlus">{locale?.groups.extraGroupsSection.text2}</Text>
</div>
<div>
<Text variant="medium">{locale?.groups.extraGroupsSection.text3}</Text>
</div>
</div>
</Col>
<Col xl={3} lg={4} className="text-center">
<div style={{ marginLeft: 'auto', marginRight: 'auto' }}>
<Image className="mb-2" src={process.env.PUBLIC_URL + '/images/groups/extra_groups.png'} style={{ display: 'inline-block', width: '75%' }} />
</div>
</Col>
</Row>
</div>
<AdditionalGroupsView />
</Container>
{/* APIs Error dialog */}
<Dialog
hidden={hideApiErrorDialog}
onDismiss={toggleApiErrorDialog}
dialogContentProps={dialogContentProps}
modalProps={modelProps}
>
<div className="mb-3">
{locale?.errorDataLoading}
</div>
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: 5 }}>
<Image src={process.env.PUBLIC_URL + '/images/message/error.png'} style={{ width: 200 }} />
</div>
<div>
<JsxParser bindings={{ theme: theme, semibold: semibold }} components={{ Text, Link }} jsx={locale?.additionalInformations} />
</div>
<DialogFooter>
<PrimaryButton onClick={toggleApiErrorDialog} text="Ok" />
</DialogFooter>
</Dialog>
</div>
</>
);
}
Example #7
| Source File: Options.tsx From hypertrons-crx with Apache License 2.0 | 4 votes |
|
Options: React.FC = () => {
const [settings, setSettings] = useState(new Settings());
const [metaData, setMetaData] = useState(new MetaData());
const [inited, setInited] = useState(false);
const [version, setVersion] = useState('0.0.0');
const [checkingUpdate, setCheckingUpdate] = useState(false);
const [token, setToken] = useState('');
const [checkingToken, setCheckingToken] = useState(false);
const [showDialogToken, setShowDialogToken] = useState(false);
const [showDialogTokenError, setShowDialogTokenError] = useState(false);
const [showDialogNotification, setShowDialogNotification] = useState(false);
const [notificationId, setNotificationId] = useState(0);
const [notification, setNotification] = useState('');
const [updateStatus, setUpdateStatus] = useState(UpdateStatus.undefine);
const [updateUrl, setUpdateUrl] = useState(
'https://github.com/hypertrons/hypertrons-crx/releases'
);
const tokenCurrent = metaData.token;
const graphOptions: IChoiceGroupOption[] = [
{
key: 'antv',
text: 'Antv',
},
{
key: 'echarts',
text: 'Echarts',
},
];
const locale = settings.locale;
const localeOptions: IChoiceGroupOption[] = [
{
key: 'en',
text: 'English',
},
{
key: 'zh_CN',
text: '简体中文 (Simplified Chinese)',
},
];
useEffect(() => {
const initMetaData = async () => {
const tempMetaData = await loadMetaData();
setMetaData(tempMetaData);
if (tempMetaData.token !== '') {
setToken(tempMetaData.token);
}
const notificationInformation = await getNotificationInformation();
if (
notificationInformation.is_published &&
tempMetaData.idLastNotication < notificationInformation.id
) {
if (locale === 'zh_CN') {
setNotification(notificationInformation.content.zh);
} else {
setNotification(notificationInformation.content.en);
}
setNotificationId(notificationInformation.id);
setShowDialogNotification(true);
}
};
if (!inited) {
initMetaData();
}
}, [inited, locale, metaData]);
useEffect(() => {
const initSettings = async () => {
const temp = await loadSettings();
setSettings(temp);
setInited(true);
};
if (!inited) {
initSettings();
}
}, [inited, settings]);
const getVersion = async () => {
let version = (await chrome.management.getSelf()).version;
setVersion(version);
};
useEffect(() => {
getVersion();
}, [version]);
const saveSettings = async (settings: Settings) => {
setSettings(settings);
await chromeSet('settings', settings.toJson());
};
const checkUpdateManually = async () => {
setUpdateStatus(UpdateStatus.undefine);
setCheckingUpdate(true);
const [currentVersion, latestVersion, updateUrl] = await checkUpdate();
if (compareVersion(currentVersion, latestVersion) === -1) {
setUpdateUrl(updateUrl);
setUpdateStatus(UpdateStatus.yes);
} else {
setUpdateStatus(UpdateStatus.no);
}
setCheckingUpdate(false);
};
if (!inited) {
return <div />;
}
return (
<Stack>
{showDialogNotification && (
<Dialog
hidden={!showDialogNotification}
onDismiss={() => {
setShowDialogNotification(false);
}}
dialogContentProps={{
type: DialogType.normal,
title: getMessageByLocale(
'global_notificationTitle',
settings.locale
),
}}
modalProps={{
isBlocking: true,
}}
>
<Text variant="mediumPlus">{notification}</Text>
<DialogFooter>
<DefaultButton
onClick={() => {
setShowDialogNotification(false);
}}
>
{getMessageByLocale('global_btn_ok', settings.locale)}
</DefaultButton>
<PrimaryButton
onClick={async () => {
metaData.idLastNotication = notificationId;
setMetaData(metaData);
await chromeSet('meta_data', metaData.toJson());
setShowDialogNotification(false);
}}
>
{getMessageByLocale('global_btn_disable', settings.locale)}
</PrimaryButton>
</DialogFooter>
</Dialog>
)}
{showDialogToken && (
<Dialog
hidden={!showDialogToken}
onDismiss={() => {
setShowDialogToken(false);
}}
dialogContentProps={{
type: DialogType.normal,
title: getMessageByLocale(
'options_token_dialog_title',
settings.locale
),
}}
modalProps={{
isBlocking: true,
}}
>
<p style={{ fontSize: 14, color: '#6a737d', margin: 5 }}>
{getMessageByLocale(
'options_token_dialog_description',
settings.locale
)}
</p>
<Stack horizontal style={{ fontSize: 16, margin: 5 }}>
<Link
href="https://github.com/settings/tokens/new"
target="_blank"
underline
>
{getMessageByLocale(
'options_token_dialog_message',
settings.locale
)}
</Link>
</Stack>
{checkingToken && (
<Spinner
label={getMessageByLocale(
'options_token_dialog_checking',
settings.locale
)}
/>
)}
{showDialogTokenError && (
<MessageBar messageBarType={MessageBarType.error}>
{getMessageByLocale(
'options_token_dialog_error',
settings.locale
)}
</MessageBar>
)}
<Stack
horizontal
horizontalAlign="space-around"
verticalAlign="end"
style={{ margin: '10px' }}
tokens={{
childrenGap: 15,
}}
>
<TextField
style={{ width: '200px' }}
defaultValue={token}
onChange={(e, value) => {
if (value) {
setShowDialogTokenError(false);
setToken(value);
}
}}
/>
<PrimaryButton
disabled={checkingToken}
onClick={async () => {
setCheckingToken(true);
const result = await checkIsTokenAvailabe(token);
setCheckingToken(false);
if ('id' in result) {
metaData.token = token;
metaData.avatar = result['avatar_url'];
metaData.name = result['name'];
metaData.id = result['id'];
setMetaData(metaData);
await chromeSet('meta_data', metaData.toJson());
setShowDialogToken(false);
} else {
setShowDialogTokenError(true);
}
}}
>
{getMessageByLocale('global_btn_ok', settings.locale)}
</PrimaryButton>
</Stack>
{tokenCurrent !== '' && (
<DefaultButton
onClick={async () => {
metaData.token = '';
metaData.avatar = '';
metaData.name = '';
metaData.id = '';
setMetaData(metaData);
await chromeSet('meta_data', metaData.toJson());
setShowDialogToken(false);
}}
style={{
width: 120,
}}
>
{getMessageByLocale('options_token_btn_rmToken', settings.locale)}
</DefaultButton>
)}
</Dialog>
)}
<Stack horizontalAlign="center" style={{ paddingBottom: '10px' }}>
<h1>PERCEPTOR</h1>
<sub>{`version ${version}`}</sub>
</Stack>
<Stack
horizontalAlign="center"
tokens={{
childrenGap: 30,
}}
>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_enable_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_enable_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack
style={{ margin: '10px 25px' }}
tokens={{
childrenGap: 10,
}}
>
<p>
{getMessageByLocale('options_enable_toolTip', settings.locale)}.
</p>
<Toggle
label={getMessageByLocale(
'options_enable_toggle_autoCheck',
settings.locale
)}
defaultChecked={settings.isEnabled}
onText={getMessageByLocale(
'global_toggle_onText',
settings.locale
)}
offText={getMessageByLocale(
'global_toggle_offText',
settings.locale
)}
onChange={async (e, checked) => {
settings.isEnabled = checked;
await saveSettings(settings);
}}
/>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_locale_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_locale_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack style={{ margin: '10px 25px' }}>
<p>
{getMessageByLocale('options_locale_toolTip', settings.locale)} :
</p>
<ChoiceGroup
defaultSelectedKey={settings.locale}
options={localeOptions}
onChange={async (e, option: any) => {
settings.locale = option.key;
await saveSettings(settings);
}}
/>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_components_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale(
'options_components_title',
settings.locale
)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack
style={{ margin: '10px 25px' }}
tokens={{
childrenGap: 10,
}}
>
<p>
{getMessageByLocale(
'options_components_toolTip',
settings.locale
)}{' '}
:
</p>
<Checkbox
label={getMessageByLocale(
'component_developerCollabrationNetwork_title',
settings.locale
)}
defaultChecked={settings.developerNetwork}
onChange={async (e, checked) => {
settings.developerNetwork = checked;
await saveSettings(settings);
}}
/>
<Checkbox
label={getMessageByLocale(
'component_projectCorrelationNetwork_title',
settings.locale
)}
defaultChecked={settings.projectNetwork}
onChange={async (e, checked) => {
settings.projectNetwork = checked;
await saveSettings(settings);
}}
/>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_graphType_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_graphType_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack style={{ margin: '10px 25px' }}>
<p>
{getMessageByLocale('options_graphType_toolTip', settings.locale)}{' '}
:
</p>
<ChoiceGroup
defaultSelectedKey={settings.graphType}
options={graphOptions}
onChange={async (e, option: any) => {
settings.graphType = option.key as GraphType;
await saveSettings(settings);
}}
/>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_update_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_update_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack
style={{ margin: '10px 25px' }}
tokens={{
childrenGap: 10,
}}
>
<p>
{getMessageByLocale('options_update_toolTip', settings.locale)}.
</p>
<Toggle
label={getMessageByLocale(
'options_update_toggle_autoCheck',
settings.locale
)}
defaultChecked={settings.checkForUpdates}
onText={getMessageByLocale(
'global_toggle_onText',
settings.locale
)}
offText={getMessageByLocale(
'global_toggle_offText',
settings.locale
)}
onChange={async (e, checked) => {
settings.checkForUpdates = checked;
await saveSettings(settings);
}}
/>
{checkingUpdate && (
<Stack horizontalAlign="start">
<Spinner
label={getMessageByLocale(
'options_update_checking',
settings.locale
)}
/>
</Stack>
)}
{updateStatus === UpdateStatus.yes && (
<MessageBar
messageBarType={MessageBarType.success}
isMultiline={false}
>
{getMessageByLocale(
'options_update_btn_updateStatusYes',
settings.locale
)}
<Link href={updateUrl} target="_blank" underline>
{getMessageByLocale(
'options_update_btn_getUpdate',
settings.locale
)}
</Link>
</MessageBar>
)}
{updateStatus === UpdateStatus.no && (
<MessageBar
messageBarType={MessageBarType.info}
isMultiline={false}
>
{getMessageByLocale(
'options_update_btn_updateStatusNo',
settings.locale
)}
</MessageBar>
)}
<DefaultButton
style={{
width: 120,
}}
disabled={checkingUpdate}
onClick={async () => {
await checkUpdateManually();
}}
>
{getMessageByLocale(
'options_update_btn_checkUpdate',
settings.locale
)}
</DefaultButton>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_token_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_token_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack
style={{ margin: '10px 25px' }}
tokens={{
childrenGap: 10,
}}
>
<p>
{getMessageByLocale('options_token_toolTip', settings.locale)} :
</p>
{tokenCurrent !== '' && (
<Stack
horizontal
verticalAlign="center"
style={{
margin: '5px',
padding: '3px',
width: '300px',
boxShadow: '4px 4px 10px rgba(0, 0, 0, 0.2)',
}}
tokens={{
childrenGap: 5,
}}
>
<Image
width={75}
height={75}
src={metaData.avatar}
imageFit={ImageFit.centerCover}
/>
<Text
variant="large"
style={{
marginLeft: 25,
maxWidth: 200,
wordWrap: 'break-word',
}}
>
{metaData.name}
</Text>
</Stack>
)}
<DefaultButton
onClick={() => {
setShowDialogToken(true);
}}
style={{
width: 120,
}}
>
{getMessageByLocale(
'options_token_btn_setToken',
settings.locale
)}
</DefaultButton>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_about_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_about_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack style={{ margin: '10px 25px' }}>
<p>
{getMessageByLocale('options_about_description', settings.locale)}
</p>
<p>
{getMessageByLocale(
'options_about_description_website',
settings.locale
)}
</p>
<Link href={HYPERTRONS_CRX_WEBSITE} target="_blank" underline>
{HYPERTRONS_CRX_WEBSITE}
</Link>
</Stack>
</Stack.Item>
</Stack>
</Stack>
);
}
Example #8
| Source File: Popup.tsx From hypertrons-crx with Apache License 2.0 | 4 votes |
|
Popup: React.FC = () => {
const [settings, setSettings] = useState(new Settings());
const [metaData, setMetaData] = useState(new MetaData());
const [inited, setInited] = useState(false);
useEffect(() => {
const initSettings = async () => {
const temp = await loadSettings();
setSettings(temp);
setInited(true);
};
if (!inited) {
initSettings();
}
}, [inited, settings]);
useEffect(() => {
const initMetaData = async () => {
const temp = await loadMetaData();
setMetaData(temp);
};
initMetaData();
}, []);
const saveSettings = async (settings: Settings) => {
setSettings(settings);
await chromeSet('settings', settings.toJson());
};
if (!inited) {
return <div />;
}
return (
<Stack horizontalAlign="center">
<Stack
horizontalAlign="space-around"
verticalAlign="center"
style={{ margin: '5px', padding: '3px' }}
tokens={{
childrenGap: 10,
}}
>
<Stack horizontalAlign="center">
<Toggle
label={getMessageByLocale(
'options_enable_toggle_autoCheck',
settings.locale
)}
defaultChecked={settings.isEnabled}
onText={getMessageByLocale('global_toggle_onText', settings.locale)}
offText={getMessageByLocale(
'global_toggle_offText',
settings.locale
)}
onChange={async (e, checked) => {
settings.isEnabled = checked;
await saveSettings(settings);
}}
/>
</Stack>
{metaData.token !== '' && (
<Stack
horizontal
verticalAlign="center"
style={{
margin: '5px',
padding: '3px',
width: '200px',
}}
tokens={{
childrenGap: 5,
}}
>
<Image
width={75}
height={75}
src={metaData.avatar}
imageFit={ImageFit.centerCover}
/>
<Text
variant="large"
style={{ marginLeft: 25, width: 100, wordWrap: 'break-word' }}
>
{metaData.name}
</Text>
</Stack>
)}
{metaData.token === '' && (
<DefaultButton
onClick={() => {
chrome.runtime.openOptionsPage();
}}
style={{
width: 120,
}}
>
{getMessageByLocale('options_token_title', settings.locale)}
</DefaultButton>
)}
</Stack>
</Stack>
);
}
