office-ui-fabric-react#PrimaryButton TypeScript Examples
The following examples show how to use
office-ui-fabric-react#PrimaryButton.
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: list-feed.tsx From fluent-reader with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
render() {
return (
this.props.feed.loaded && (
<FocusZone
as="div"
id="refocus"
direction={FocusZoneDirection.vertical}
className={this.getClassName()}
shouldReceiveFocus={this.canFocusChild}
data-is-scrollable>
<List
className={AnimationClassNames.slideUpIn10}
items={this.props.items}
onRenderCell={this.onRenderItem}
ignoreScrollingState
usePageCache
/>
{this.props.feed.loaded && !this.props.feed.allLoaded ? (
<div className="load-more-wrapper">
<PrimaryButton
id="load-more"
text={intl.get("loadMore")}
disabled={this.props.feed.loading}
onClick={() =>
this.props.loadMore(this.props.feed)
}
/>
</div>
) : null}
{this.props.items.length === 0 && (
<div className="empty">{intl.get("article.empty")}</div>
)}
</FocusZone>
)
)
}
Example #2
| Source File: SpfxReactConfetti.tsx From SPFx with Mozilla Public License 2.0 | 6 votes |
|
public render(): React.ReactElement<ISpfxReactConfettiProps> {
return (
<div className={styles.spfxReactConfetti}>
{this.state.showConfetti == true ?
<Confetti
width={750}
height={200}
/>
: ''
}
<div className={styles.container}>
<div className={styles.row}>
<div className={styles.column}>
<span className={styles.title}>Welcome to SharePoint!</span>
<p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
<p className={styles.description}>{escape(this.props.description)}</p>
<Stack horizontal tokens={stackTokens}>
<a href="https://aka.ms/spfx" className={styles.button}>
<span className={styles.label}>Learn more</span>
</a>
<PrimaryButton text="Stop Confetti" onClick={() => this.setState({ showConfetti: false })} />
</Stack>
</div>
</div>
</div>
</div>
);
}
Example #3
| Source File: SpfxPnpPageprovisioning.tsx From SPFx with Mozilla Public License 2.0 | 6 votes |
|
public render(): React.ReactElement<ISpfxPnpPageprovisioningProps> {
return (
<div className={styles.spfxPnpPageprovisioning}>
<TextField label="Page Name" onChanged={(val) => { this.setState({ name: val }) }} />
<TextField label="Page Title" onChanged={(val) => { this.setState({ title: val }) }} />
<br />
<PrimaryButton text="Create Page" onClick={this._CreatePage} />
</div>
);
}
Example #4
| Source File: SpfxFluentuiPivotTab1.tsx From SPFx with Mozilla Public License 2.0 | 6 votes |
|
public render(): React.ReactElement<{}> {
return (
<div className={styles.spfxFluentuiPivot}>
<h3>New user details</h3>
<TextField label="First Name" />
<TextField label="Last Name" />
<TextField label="House number" />
<TextField label="City" />
<TextField label="State" />
<br />
<PrimaryButton text="Save" />
</div>
);
}
Example #5
| Source File: SpfxFluentuiMessagebar.tsx From SPFx with Mozilla Public License 2.0 | 6 votes |
|
public render(): React.ReactElement<ISpfxFluentuiMessagebarProps> {
return (
<div className={styles.spfxFluentuiMessagebar}>
{(this.state.InfoMessage) ? <div><InfoMessage /><br /></div> : ''}
{(this.state.ErrorMessage) ? <div><ErrorMessage /><br /></div> : ''}
{(this.state.AccessMessage) ? <div><AccessMessage /><br /></div> : ''}
{(this.state.WarningMessage) ? <div><WarningMessage /><br /></div> : ''}
{(this.state.SuccessQuestion) ? <div><SuccessQuestion /><br /></div> : ''}
{(this.state.WarningQuestion) ? <div><WarningQuestion /><br /></div> : ''}
{(this.state.WarningLongMessage) ? <div><WarningLongMessage /><br /></div> : ''}
<br />
<br />
<Stack horizontal tokens={stackTokens}>
<PrimaryButton text="Show Info Message" onClick={() => this._showMessageClicked('InfoMessage')} />
<PrimaryButton text="Show Error Message" onClick={() => this._showMessageClicked('ErrorMessage')} />
<PrimaryButton text="Show Access Message" onClick={() => this._showMessageClicked('AccessMessage')} />
</Stack>
<br />
<br />
<Stack horizontal tokens={stackTokens}>
<PrimaryButton text="Show Warning Message" onClick={() => this._showMessageClicked('WarningMessage')} />
<PrimaryButton text="Show Success with Question Message" onClick={() => this._showMessageClicked('SuccessQuestion')} />
<PrimaryButton text="Show Warning with Question Message" onClick={() => this._showMessageClicked('WarningQuestion')} />
</Stack>
<br />
<br />
<Stack horizontal tokens={stackTokens}>
<PrimaryButton text="Show Long Message" onClick={() => this._showMessageClicked('WarningLongMessage')} />
<PrimaryButton text="Show info message and hide after 5 sec" onClick={this._showandhideMessageClicked} />
<DefaultButton text="Hide All Message" onClick={this._hideMessageClicked} />
</Stack>
</div>
);
}
Example #6
| Source File: SpfxFluentuiDropdown.tsx From SPFx with Mozilla Public License 2.0 | 6 votes |
|
public render(): React.ReactElement<ISpfxFluentuiDropdownProps> {
return (
<div className={styles.spfxFluentuiDropdown}>
<TextField
className={styles.fixedwidth}
label="Title" value={this.state.salestitle} onChanged={(titlevalue) => this.setState({ salestitle: titlevalue })} />
{this.state.seletedprojects == null ? '' : <Dropdown
placeholder="Select projects"
label="Projects"
onChange={this.projects_selection}
multiSelect
options={this.state.projectlookupvalues}
className={styles.fixedwidth}
defaultSelectedKeys={this.state.seletedprojects}
/>}
<br />
<PrimaryButton text="Save" onClick={this._savesales} />
</div>
);
}
Example #7
| Source File: SpfxReactDaterangepicker.tsx From SPFx with Mozilla Public License 2.0 | 6 votes |
|
public render(): React.ReactElement<ISpfxReactDaterangepickerProps> {
let state = [{ startDate: this.state.startDate, endDate: this.state.endDate, key: this.state.key }];
return (
<div className={styles.spfxReactDaterangepicker}>
<DateRange
editableDateInputs={true}
onChange={item => this.setState({ endDate: item.selection["endDate"], startDate: item.selection["startDate"] })}
moveRangeOnFirstSelection={false}
ranges={state}
/>
<br />
<PrimaryButton text="Save" onClick={this._SaveIntoSP} />
</div>
);
}
Example #8
| Source File: SpfxReactDropzone.tsx From SPFx with Mozilla Public License 2.0 | 6 votes |
|
public render(): React.ReactElement<ISpfxReactDropzoneProps> {
return (
<div className={styles.spfxReactDropzone}>
<FilePond files={this.state.files} allowMultiple={true} onupdatefiles={fileItems => {
this.setState({
files: fileItems.map(fileItem => fileItem.file)
});
}} />
<br />
<PrimaryButton text="Upload" onClick={this._uploadFiles} />
</div>
);
}
Example #9
| Source File: Confirm.tsx From sp-site-designs-studio with MIT License | 6 votes |
|
public render(): React.ReactElement<IConfirmBoxProps> {
return (
<DialogContent
title={this.props.title}
subText={this.props.message}
onDismiss={this._onCancel}
showCloseButton={false}
>
<DialogFooter>
<PrimaryButton text={this.props.okLabel} title={this.props.okLabel} onClick={this._onConfirm} />
<DefaultButton
text={this.props.cancelLabel}
title={this.props.cancelLabel}
onClick={this._onCancel}
/>
</DialogFooter>
</DialogContent>
);
}
Example #10
| Source File: ChangeColumnComponent.tsx From AIPerf with MIT License | 6 votes |
|
render(): React.ReactNode {
const { showColumn, isHideDialog } = this.props;
const { userSelectColumnList } = this.state;
const renderOptions: Array<CheckBoxItems> = [];
showColumn.map(item => {
if (userSelectColumnList.includes(item)) {
// selected column name
renderOptions.push({ label: item, checked: true, onChange: this.makeChangeHandler(item) });
} else {
renderOptions.push({ label: item, checked: false, onChange: this.makeChangeHandler(item) });
}
});
return (
<div>
<Dialog
hidden={isHideDialog} // required field!
dialogContentProps={{
type: DialogType.largeHeader,
title: 'Change table column',
subText: 'You can chose which columns you want to see in the table.'
}}
modalProps={{
isBlocking: false,
styles: { main: { maxWidth: 450 } }
}}
>
<div className="columns-height">
{renderOptions.map(item => {
return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />
})}
</div>
<DialogFooter>
<PrimaryButton text="Save" onClick={this.saveUserSelectColumn} />
<DefaultButton text="Cancel" onClick={this.cancelOption} />
</DialogFooter>
</Dialog>
</div>
);
}
Example #11
| Source File: SpfxReactRichtext.tsx From SPFx with Mozilla Public License 2.0 | 6 votes |
|
public render(): React.ReactElement<ISpfxReactRichtextProps> {
return (
<div className={styles.spfxReactRichtext}>
<TextField label="Name" value={this.state.title} onChanged={(newtext) => this.setState({ title: newtext })} />
<br />
<label>React rich text editor</label>
<ReactQuill value={this.state.reactrichtext} theme="snow" modules={modules}
formats={formats}
onChange={(newvalue) => this.setState({ reactrichtext: newvalue })} />
<TextField label="Place" value={this.state.place} onChanged={(newtext) => this.setState({ place: newtext })} />
<br />
<PrimaryButton text="Save" onClick={this._SaveIntoSP} />
</div>
);
}
Example #12
| Source File: NumInput.tsx From AIPerf with MIT License | 6 votes |
|
render(): React.ReactNode {
if (this.state.editting) {
return (
<Stack horizontal className="inputBox">
<input
type="number"
className="concurrencyInput"
defaultValue={this.props.value.toString()}
ref={this.input}
/>
<PrimaryButton
text="Save"
onClick={this.save}
/>
<PrimaryButton
text="Cancel"
style={{ display: 'inline-block', marginLeft: 1 }}
onClick={this.cancel}
/>
</Stack>
);
} else {
return (
<Stack horizontal className="inputBox">
<input
type="number"
className="concurrencyInput"
disabled={true}
value={this.props.value}
/>
<PrimaryButton
text="Edit"
onClick={this.edit}
/>
</Stack>
);
}
}
Example #13
| Source File: SpfxReactSelect.tsx From SPFx with Mozilla Public License 2.0 | 6 votes |
|
public render(): React.ReactElement<ISpfxReactSelectProps> {
return (
<div className={styles.spfxReactSelect}>
<label>Country</label>
<Select
className="basic-single"
classNamePrefix="Select"
isClearable={true}
isSearchable={true}
value={this.state.selectedvalue}
options={this.state.options}
onChange={(value) => this.setState({ selectedvalue: value })}
/>
<br />
<label>Countries</label>
<Select
className="basic-single"
classNamePrefix="Select"
isClearable={true}
isSearchable={true}
isMulti
value={this.state.selectedvalues}
options={this.state.options}
onChange={(value) => this.setState({ selectedvalues: value })}
/>
<br />
<PrimaryButton text="Save" onClick={this._savevalues} />
</div>
);
}
Example #14
| Source File: Killjob.tsx From AIPerf with MIT License | 6 votes |
|
render(): React.ReactNode {
const { isCalloutVisible } = this.state;
const prompString = 'Are you sure to cancel this trial?';
return (
<div>
<div className={styles.buttonArea} ref={(menuButton): any => (this.menuButtonElement = menuButton)}>
<PrimaryButton className="detail-button-operation" onClick={this.openPromot} title="kill">{blocked}</PrimaryButton>
</div>
{isCalloutVisible ? (
<div>
<FocusTrapCallout
role="alertdialog"
className={styles.callout}
gapSpace={0}
target={this.menuButtonElement}
onDismiss={this.onDismiss}
setInitialFocus={true}
>
<div className={styles.header}>
<p className={styles.title}>Kill trial</p>
</div>
<div className={styles.inner}>
<div>
<p className={styles.subtext}>{prompString}</p>
</div>
</div>
<FocusZone>
<Stack className={styles.buttons} gap={8} horizontal>
<DefaultButton onClick={this.onDismiss}>No</DefaultButton>
<PrimaryButton onClick={this.onKill}>Yes</PrimaryButton>
</Stack>
</FocusZone>
</FocusTrapCallout>
</div>
) : null}
</div>
);
}
Example #15
| Source File: cards-feed.tsx From fluent-reader with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
render() {
return (
this.props.feed.loaded && (
<FocusZone
as="div"
id="refocus"
className="cards-feed-container"
shouldReceiveFocus={this.canFocusChild}
data-is-scrollable>
<List
className={AnimationClassNames.slideUpIn10}
items={this.flexFixItems()}
onRenderCell={this.onRenderItem}
getItemCountForPage={this.getItemCountForPage}
getPageHeight={this.getPageHeight}
ignoreScrollingState
usePageCache
/>
{this.props.feed.loaded && !this.props.feed.allLoaded ? (
<div className="load-more-wrapper">
<PrimaryButton
id="load-more"
text={intl.get("loadMore")}
disabled={this.props.feed.loading}
onClick={() =>
this.props.loadMore(this.props.feed)
}
/>
</div>
) : null}
{this.props.items.length === 0 && (
<div className="empty">{intl.get("article.empty")}</div>
)}
</FocusZone>
)
)
}
Example #16
| Source File: CopyMeetingPage.tsx From msteams-meetings-template with MIT License | 5 votes |
|
function CopyMeetingPageComponent(props: CopyMeetingPageProps) {
return (
<>
<Header />
<Stack
className="container"
verticalFill
tokens={{
childrenGap: 35
}}
>
<Stack.Item align="center" className="meetingCardContainer">
<svg
className="meetingSuccess"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
>
<path
d="M24 0c2.2 0 4.3.3 6.4.9 2 .6 3.9 1.4 5.7 2.4 1.8 1 3.4 2.3 4.9 3.8 1.5 1.5 2.7 3.1 3.8 4.9 1 1.8 1.8 3.7 2.4 5.7.6 2 .9 4.2.9 6.4s-.3 4.3-.9 6.3c-.6 2-1.4 3.9-2.4 5.7-1 1.8-2.3 3.4-3.8 4.9-1.5 1.5-3.1 2.7-4.9 3.8-1.8 1-3.7 1.9-5.7 2.4-2 .6-4.1.9-6.4.9-2.2 0-4.3-.3-6.3-.9-2-.6-3.9-1.4-5.7-2.4-1.8-1-3.4-2.3-4.9-3.8-1.5-1.5-2.7-3.1-3.8-4.9-1-1.8-1.9-3.7-2.4-5.7C.3 28.3 0 26.2 0 24s.3-4.3.9-6.4c.6-2 1.4-3.9 2.4-5.7 1-1.8 2.3-3.4 3.8-4.9 1.5-1.5 3.1-2.7 4.9-3.8 1.8-1 3.7-1.9 5.7-2.4S21.8 0 24 0zm7.9 17.1c-.6 0-1.2.2-1.6.7l-8.5 8.5-3-3c-.4-.4-1-.7-1.6-.7-.3 0-.6.1-.8.2-.3.1-.5.3-.7.5s-.4.4-.5.7c-.2.3-.2.5-.2.8 0 .6.2 1.2.7 1.6l4.6 4.6c.4.4 1 .7 1.6.7.6 0 1.2-.2 1.6-.7l10.1-10.1c.4-.5.7-1 .7-1.6 0-.3-.1-.6-.2-.8-.1-.3-.3-.5-.5-.7s-.4-.4-.7-.5c-.4-.2-.7-.2-1-.2z"
fill="#599c00"
/>
</svg>
<Text block variant="xLarge" className="meetingCardHeader">
<FormattedMessage id="copyMeetingPage.header" />
</Text>
<div
className="meetingCardBody"
id="copy"
dangerouslySetInnerHTML={{ __html: props.meeting?.preview ?? '' }}
/>
<PrimaryButton
className="teamsButton copyButton"
onClick={() => props.onCopyToClipboard(props.meeting)}
ariaLabel={translate('copyMeetingPage.copy.ariaLabel')}
>
<FormattedMessage id="copyMeetingPage.copy" />
</PrimaryButton>
</Stack.Item>
</Stack>
</>
);
}
Example #17
| Source File: CreateLandingPage.tsx From msteams-meetings-template with MIT License | 5 votes |
|
function CreateLandingPageComponent(props: CreateLandingPageProps) {
// Check for a signed-in user and go to the signin page if there isn't one
const checkForSignedInUser = props.checkForSignedInUser;
React.useEffect(() => {
checkForSignedInUser();
});
return (
<>
<Header />
<Stack
className="container"
horizontalAlign="center"
verticalAlign="center"
verticalFill
tokens={{
childrenGap: 35
}}
>
<img
className="splashImage"
src={calendar}
alt={translate('createLandingPage.splash.altText')}
/>
<Text variant="xLargePlus" styles={boldStyle}>
<FormattedMessage id="createLandingPage.schedule.header" />
</Text>
<Text variant="medium">
<FormattedMessage id="createLandingPage.subheader" />
</Text>
<PrimaryButton
className="teamsButton"
onClick={() => props.onNewMeeting()}
ariaLabel={translate('createLandingPage.create.meeting.ariaLabel')}
>
<FormattedMessage id="createLandingPage.create.meeting" />
</PrimaryButton>
</Stack>
</>
);
}
Example #18
| Source File: ErrorPage.tsx From msteams-meetings-template with MIT License | 5 votes |
|
function ErrorPageComponent(props: ErrorPageProps) {
return (
<>
<Header />
<Stack
className="container"
horizontalAlign="center"
verticalAlign="center"
verticalFill
tokens={{
childrenGap: 35
}}
>
<img
className="splashImage"
src={errorImage}
alt={translate('errorPage.splash.altText')}
/>
<Text variant="xLargePlus" styles={boldStyle}>
<FormattedMessage id="errorPage.heading" />
</Text>
<Text variant="medium" className="uTextCenter">
<FormattedMessage id="errorPage.subheading" />
</Text>
<Stack horizontal tokens={{ childrenGap: 10 }}>
<DefaultButton
className="teamsButtonInverted"
onClick={() => props.goBack()}
ariaLabel={translate('errorPage.back.ariaLabel')}
>
<FormattedMessage id="errorPage.back" />
</DefaultButton>
<PrimaryButton
className="teamsButton"
onClick={() => props.retryCreateMeeting(props.meeting)}
ariaLabel={translate('errorPage.try.again')}
>
<FormattedMessage id="errorPage.try.again" />
</PrimaryButton>
</Stack>
</Stack>
</>
);
}
Example #19
| Source File: SpfxReactHooks.tsx From SPFx with Mozilla Public License 2.0 | 5 votes |
|
function simplehooks(props: ISpfxReactHooksProps) {
const [fruits, setfruits] = useState([])
const [firstName, setFistName] = useState("No first Name")
const [lastName, setLastName] = useState("No last Name")
useEffect(() => {
sp.setup({
spfxContext: props.context
});
_getListItemsFromSP()
}, []);
const _getListItemsFromSP = async () => {
const allItems: any[] = await sp.web.lists.getByTitle("Fruits").items.getAll();
let titlevalues: string[] = [];
allItems.forEach(function (v, i) {
titlevalues.push(v.Title);
})
setfruits(titlevalues);
}
const _onbtnclick = () => {
console.log('Changing value')
setFistName('Ravichandran')
}
const _lastNameChanged = (changedvalue: any) => {
setLastName(changedvalue)
}
return (<div>
<b>Props value</b><br />
{props.description}
<br />
<hr />
<br />
<b>State values</b><br />
Name : {firstName + ' ' + lastName}
<br />
<br />
<TextField label="Last Name" onChanged={_lastNameChanged} value={lastName} />
<br />
<br />
<PrimaryButton text="Change First Name" onClick={() => _onbtnclick()} />
<br />
<hr />
<br />
<b>Loop async values from SharePoint List</b><br />
{fruits.map(function (fruit, i) {
return <h3 key={i}>{fruit}</h3>
})}
</div>);
}
Example #20
| Source File: SigninPage.tsx From msteams-meetings-template with MIT License | 5 votes |
|
function SigninPageComponent(props: Partial<SigninPageProps>) {
const onSignIn = props.onSignIn ?? (() => {});
return (
<>
<div className="microsoftLogo">
<svg xmlns="http://www.w3.org/2000/svg" width="108" height="24">
<path
d="M44.836 4.6v13.8h-2.4V7.583H42.4L38.119 18.4h-1.588L32.142 7.583h-.029V18.4H29.9V4.6h3.436L37.3 14.83h.058L41.545 4.6zm2 1.049a1.268 1.268 0 01.419-.967 1.413 1.413 0 011-.39 1.392 1.392 0 011.02.4 1.3 1.3 0 01.4.958 1.248 1.248 0 01-.414.953 1.428 1.428 0 01-1.01.385A1.4 1.4 0 0147.25 6.6a1.261 1.261 0 01-.409-.948M49.41 18.4h-2.329V8.507h2.329zm7.064-1.694a3.213 3.213 0 001.145-.241 4.811 4.811 0 001.155-.635V18a4.665 4.665 0 01-1.266.481 6.886 6.886 0 01-1.554.164 4.707 4.707 0 01-4.918-4.908 5.641 5.641 0 011.4-3.932 5.055 5.055 0 013.955-1.545 5.414 5.414 0 011.324.168 4.431 4.431 0 011.063.39v2.233a4.763 4.763 0 00-1.1-.611 3.184 3.184 0 00-1.15-.217 2.919 2.919 0 00-2.223.9 3.37 3.37 0 00-.847 2.416 3.216 3.216 0 00.813 2.338 2.936 2.936 0 002.209.837m8.92-8.371a2.952 2.952 0 01.5.039 2.1 2.1 0 01.375.1v2.358a2.04 2.04 0 00-.534-.255 2.646 2.646 0 00-.852-.12 1.808 1.808 0 00-1.448.722 3.467 3.467 0 00-.592 2.223v4.99h-2.324V8.507h2.329v1.559h.038a2.729 2.729 0 01.963-1.266 2.611 2.611 0 011.545-.457m1 5.254a5.358 5.358 0 011.392-3.887 5.1 5.1 0 013.85-1.434 4.742 4.742 0 013.623 1.381 5.212 5.212 0 011.3 3.729 5.257 5.257 0 01-1.386 3.83 5.019 5.019 0 01-3.772 1.424 4.935 4.935 0 01-3.652-1.352 4.987 4.987 0 01-1.349-3.688m2.425-.077a3.535 3.535 0 00.7 2.368 2.505 2.505 0 002.011.818 2.345 2.345 0 001.934-.818 3.783 3.783 0 00.664-2.425 3.651 3.651 0 00-.688-2.411 2.389 2.389 0 00-1.929-.813 2.44 2.44 0 00-1.988.852 3.707 3.707 0 00-.707 2.43m11.2-2.416a1 1 0 00.318.785 5.426 5.426 0 001.4.717 4.767 4.767 0 011.959 1.256 2.6 2.6 0 01.563 1.689 2.715 2.715 0 01-1.068 2.239 4.558 4.558 0 01-2.9.847 6.978 6.978 0 01-1.362-.149 6.047 6.047 0 01-1.265-.38v-2.29a5.733 5.733 0 001.367.7 4 4 0 001.328.26 2.365 2.365 0 001.164-.221.79.79 0 00.375-.741 1.029 1.029 0 00-.39-.813 5.768 5.768 0 00-1.477-.765 4.564 4.564 0 01-1.829-1.213 2.655 2.655 0 01-.539-1.713 2.706 2.706 0 011.063-2.2 4.243 4.243 0 012.765-.86 6.663 6.663 0 011.164.115 5.161 5.161 0 011.078.3v2.214a4.974 4.974 0 00-1.078-.529 3.6 3.6 0 00-1.222-.221 1.781 1.781 0 00-1.034.26.824.824 0 00-.371.712m5.241 2.493a5.358 5.358 0 011.386-3.89 5.1 5.1 0 013.849-1.434 4.743 4.743 0 013.624 1.381 5.212 5.212 0 011.3 3.729 5.259 5.259 0 01-1.386 3.83 5.02 5.02 0 01-3.773 1.424 4.934 4.934 0 01-3.652-1.352 4.987 4.987 0 01-1.348-3.688m2.425-.077a3.537 3.537 0 00.7 2.368 2.506 2.506 0 002.011.818 2.345 2.345 0 001.934-.818 3.783 3.783 0 00.664-2.425 3.651 3.651 0 00-.688-2.411 2.39 2.39 0 00-1.93-.813 2.439 2.439 0 00-1.987.852 3.707 3.707 0 00-.707 2.43m15.464-3.109H99.7V18.4h-2.359v-7.988h-1.655V8.507h1.655V7.13a3.423 3.423 0 011.015-2.555 3.561 3.561 0 012.6-1 5.807 5.807 0 01.751.043 2.993 2.993 0 01.577.13v2.016a2.422 2.422 0 00-.4-.164 2.107 2.107 0 00-.664-.1 1.407 1.407 0 00-1.126.457 2.017 2.017 0 00-.394 1.356v1.194h3.469V6.283l2.339-.712v2.936h2.358v1.906h-2.358v4.629a1.951 1.951 0 00.332 1.29 1.326 1.326 0 001.044.375 1.557 1.557 0 00.486-.1 2.294 2.294 0 00.5-.231V18.3a2.737 2.737 0 01-.736.231 5.029 5.029 0 01-1.015.106 2.887 2.887 0 01-2.209-.784 3.341 3.341 0 01-.736-2.363z"
fill="#737373"
/>
<path fill="#f25022" d="M0 0h10.931v10.931H0z" />
<path fill="#7fba00" d="M12.069 0H23v10.931H12.069z" />
<path fill="#00a4ef" d="M0 12.069h10.931V23H0z" />
<path fill="#ffb900" d="M12.069 12.069H23V23H12.069z" />
</svg>
</div>
<Stack
className="container"
horizontalAlign="center"
verticalAlign="center"
verticalFill
tokens={{
childrenGap: 35
}}
>
<img
className="splashImage"
src={signInImage}
alt={translate('signin.logo')}
/>
<Text variant="xLargePlus" styles={boldStyle} className="signinHeader">
<FormattedMessage id="signin.header" />
</Text>
<Text variant="medium" className="uTextCenter signinSubHeader">
<FormattedMessage id="signin.subheader.lead" />
</Text>
<Text variant="medium" className="uTextCenter signinSubHeader">
<FormattedMessage id="signin.subheader.signin" />
</Text>
<PrimaryButton
className="teamsButton"
onClick={() => onSignIn()}
ariaLabel={translate('signin.button.ariaLabel')}
>
<FormattedMessage id="signin.button" />
</PrimaryButton>
</Stack>
</>
);
}
Example #21
| Source File: Para.tsx From AIPerf with MIT License | 5 votes |
|
render(): React.ReactNode {
const { option, paraNodata, dimName, isLoadConfirm, selectedItem, swapyAxis } = this.state;
return (
<div className="parameter">
<Stack horizontal className="para-filter" horizontalAlign="end">
<span className="para-filter-text">Top</span>
<Dropdown
selectedKey={selectedItem ? selectedItem.key : undefined}
onChange={this.percentNum}
placeholder="100%"
defaultSelectedKeys={[0.2]}
options={[
{ key: '0.2', text: '20%' },
{ key: '0.5', text: '50%' },
{ key: '0.8', text: '80%' },
{ key: '1', text: '100%' },
]}
styles={{ dropdown: { width: 300 } }}
className="para-filter-percent"
/>
<Dropdown
placeholder="Select options"
selectedKeys={swapyAxis}
onChange={this.getSwapArr}
multiSelect
options={
dimName.map((key, item) => {
return {
key: key, text: dimName[item]
};
})
}
styles={{ dropdown: { width: 300 } }}
/>
<PrimaryButton
text="Confirm"
onClick={this.swapReInit}
disabled={isLoadConfirm}
/>
</Stack>
<div className="searcHyper">
<ReactEcharts
option={option}
style={this.chartMulineStyle}
// lazyUpdate={true}
notMerge={true} // update now
/>
<div className="noneData">{paraNodata}</div>
</div>
</div>
);
}
Example #22
| Source File: Intermediate.tsx From AIPerf with MIT License | 5 votes |
|
render(): React.ReactNode {
const { interSource, isLoadconfirmBtn, isFilter } = this.state;
const IntermediateEvents = { 'dataZoom': this.intermediateDataZoom };
return (
<div>
{/* style in para.scss */}
<Stack horizontal horizontalAlign="end" tokens={stackTokens} className="meline intermediate">
{
isFilter
?
<div>
<span className="filter-x"># Intermediate result</span>
<input
// placeholder="point"
ref={(input): any => this.pointInput = input}
className="strange"
/>
<span>Metric range</span>
<input
// placeholder="range"
ref={(input): any => this.minValInput = input}
/>
<span className="hyphen">-</span>
<input
// placeholder="range"
ref={(input): any => this.maxValInput = input}
/>
<PrimaryButton
text="Confirm"
onClick={this.filterLines}
disabled={isLoadconfirmBtn}
/>
</div>
:
null
}
{/* filter message */}
<Stack horizontal className="filter-toggle">
<span>Filter</span>
<Toggle onChange={this.switchTurn} />
</Stack>
</Stack>
<div className="intermediate-graph">
<ReactEcharts
option={interSource}
style={{ width: '100%', height: 400, margin: '0 auto' }}
notMerge={true} // update now
onEvents={IntermediateEvents}
/>
<div className="xAxis"># Intermediate result</div>
</div>
</div>
);
}
Example #23
| Source File: OpenRow.tsx From AIPerf with MIT License | 5 votes |
|
render(): React.ReactNode {
const { isHidenInfo, typeInfo, info } = this.state;
const trialId = this.props.trialId;
const trial = TRIALS.getTrial(trialId);
const trialLink: string = `${MANAGER_IP}/trial-jobs/${trialId}`;
const logPathRow = trial.info.logPath || 'This trial\'s log path is not available.';
const multiProgress = trial.info.hyperParameters === undefined ? 0 : trial.info.hyperParameters.length;
return (
<Stack className="openRow">
<Stack className="openRowContent">
<Pivot>
<PivotItem headerText="Parameters" key="1" itemIcon="TestParameter">
{
EXPERIMENT.multiPhase
?
<Stack className="link">
{
`
Trails for multiphase experiment will return a set of parameters,
we are listing the latest parameter in webportal.
For the entire parameter set, please refer to the following "
`
}
<a href={trialLink} rel="noopener noreferrer" target="_blank">{trialLink}</a>{`".`}
<div>Current Phase: {multiProgress}.</div>
</Stack>
:
null
}
{
trial.info.hyperParameters !== undefined
?
<Stack id="description">
<Stack className="bgHyper">
<JSONTree
hideRoot={true}
shouldExpandNode={(): boolean => true} // default expandNode
getItemString={(): null => null} // remove the {} items
data={trial.description.parameters}
/>
</Stack>
<Stack horizontal className="copy">
<PrimaryButton
onClick={this.copyParams.bind(this, trial)}
text="Copy as json"
styles={{ root: { width: 128, marginRight: 10 } }}
/>
{/* copy success | failed message info */}
{!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
</Stack>
</Stack>
:
<Stack className="logpath">
<span className="logName">Error: </span>
<span className="error">{`This trial's parameters are not available.'`}</span>
</Stack>
}
</PivotItem>
<PivotItem headerText="Log" key="2" itemIcon="M365InvoicingLogo">
{
// FIXME: this should not be handled in web UI side
EXPERIMENT.trainingServicePlatform !== 'local'
?
<PaiTrialLog
logStr={logPathRow}
id={trialId}
logCollection={EXPERIMENT.logCollectionEnabled}
/>
:
<TrialLog logStr={logPathRow} id={trialId} />
}
</PivotItem>
</Pivot>
</Stack >
</Stack>
);
}
Example #24
| 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 #25
| Source File: NewSiteScriptPanel.tsx From sp-site-designs-studio with MIT License | 4 votes |
|
NewSiteScriptPanel = (props: INewSiteScriptPanelProps) => {
const [appContext, action] = useAppContext<IApplicationState, ActionType>();
// Get services instances
const siteScriptSchemaService = appContext.serviceScope.consume(SiteScriptSchemaServiceKey);
const siteDesignsService = appContext.serviceScope.consume(SiteDesignsServiceKey);
const [needsArguments, setNeedsArguments] = useState<boolean>(false);
const [creationArgs, setCreationArgs] = useState<ICreateArgs>({ from: "BLANK" });
const [fromWebArgs, setFromWebArgs] = useState<IGetSiteScriptFromWebOptions>(getDefaultFromWebArgs());
const [selectedSample, setSelectedSample] = useState<ISiteScriptSample>(null);
useEffect(() => {
setCreationArgs({ from: "BLANK" });
setNeedsArguments(false);
setFromWebArgs(getDefaultFromWebArgs());
}, [props.isOpen]);
const onCancel = () => {
if (props.onCancel) {
props.onCancel();
}
};
const onScriptAdded = async () => {
try {
let newSiteScriptContent: ISiteScriptContent = null;
let fromExistingResult: IGetSiteScriptFromExistingResourceResult = null;
switch (creationArgs.from) {
case "BLANK":
newSiteScriptContent = siteScriptSchemaService.getNewSiteScript();
break;
case "WEB":
fromExistingResult = await siteDesignsService.getSiteScriptFromWeb(creationArgs.webUrl, fromWebArgs);
newSiteScriptContent = fromExistingResult.JSON;
break;
case "LIST":
fromExistingResult = await siteDesignsService.getSiteScriptFromList(creationArgs.listUrl);
newSiteScriptContent = fromExistingResult.JSON;
break;
case "SAMPLE":
if (selectedSample) {
try {
const jsonWithIgnoredComments = selectedSample.jsonContent.replace(/\/\*(.*)\*\//g,'');
newSiteScriptContent = JSON.parse(jsonWithIgnoredComments);
} catch (error) {
action("SET_USER_MESSAGE", {
userMessage: {
message: "The JSON of this site script sample is unfortunately invalid... Please reach out to the maintainer to report this issue",
messageType: MessageBarType.error
}
});
}
} else {
console.error("The sample JSON is not defined.");
}
break;
}
const siteScript: ISiteScript = {
Id: null,
Title: null,
Description: null,
Version: 1,
Content: newSiteScriptContent
};
action("EDIT_SITE_SCRIPT", { siteScript } as IEditSiteScriptActionArgs);
} catch (error) {
console.error(error);
}
};
const onChoiceClick = (createArgs: ICreateArgs) => {
setCreationArgs(createArgs);
switch (createArgs.from) {
case "BLANK":
onScriptAdded();
break;
case "LIST":
setNeedsArguments(true);
break;
case "WEB":
setNeedsArguments(true);
break;
case "SAMPLE":
setNeedsArguments(true);
break;
}
};
const renderFromWebArgumentsForm = () => {
return <Stack tokens={{ childrenGap: 8 }}>
<SitePicker label="Site" onSiteSelected={webUrl => {
setCreationArgs({ ...creationArgs, webUrl });
}} serviceScope={appContext.serviceScope} />
<ListPicker serviceScope={appContext.serviceScope}
webUrl={creationArgs.webUrl}
label="Include lists"
multiselect
onListsSelected={(includeLists) => setFromWebArgs({ ...fromWebArgs, includeLists: !includeLists ? [] : includeLists.map(l => l.webRelativeUrl) })}
/>
<div className={styles.toggleRow}>
<div className={styles.column8}>Include Branding</div>
<div className={styles.column4}>
<Toggle checked={fromWebArgs && fromWebArgs.includeBranding} onChange={(_, includeBranding) => setFromWebArgs({ ...fromWebArgs, includeBranding })} />
</div>
</div>
<div className={styles.toggleRow}>
<div className={styles.column8}>Include Regional settings</div>
<div className={styles.column4}>
<Toggle checked={fromWebArgs && fromWebArgs.includeRegionalSettings} onChange={(_, includeRegionalSettings) => setFromWebArgs({ ...fromWebArgs, includeRegionalSettings })} />
</div>
</div>
<div className={styles.toggleRow}>
<div className={styles.column8}>Include Site external sharing capability</div>
<div className={styles.column4}>
<Toggle checked={fromWebArgs && fromWebArgs.includeSiteExternalSharingCapability} onChange={(_, includeSiteExternalSharingCapability) => setFromWebArgs({ ...fromWebArgs, includeSiteExternalSharingCapability })} />
</div>
</div>
<div className={styles.toggleRow}>
<div className={styles.column8}>Include theme</div>
<div className={styles.column4}>
<Toggle checked={fromWebArgs && fromWebArgs.includeTheme} onChange={(_, includeTheme) => setFromWebArgs({ ...fromWebArgs, includeTheme })} />
</div>
</div>
<div className={styles.toggleRow}>
<div className={styles.column8}>Include links to exported items</div>
<div className={styles.column4}>
<Toggle checked={fromWebArgs && fromWebArgs.includeLinksToExportedItems} onChange={(_, includeLinksToExportedItems) => setFromWebArgs({ ...fromWebArgs, includeLinksToExportedItems })} />
</div>
</div>
</Stack>;
};
const renderFromListArgumentsForm = () => {
return <Stack tokens={{ childrenGap: 8 }}>
<SitePicker label="Site" onSiteSelected={webUrl => {
setCreationArgs({ ...creationArgs, webUrl });
}} serviceScope={appContext.serviceScope} />
<ListPicker serviceScope={appContext.serviceScope}
webUrl={creationArgs.webUrl}
label="List"
onListSelected={(list) => setCreationArgs({ ...creationArgs, listUrl: list && list.url })}
/>
</Stack>;
};
const renderSamplePicker = () => {
return <SiteScriptSamplePicker
selectedSample={selectedSample}
onSelectedSample={setSelectedSample} />;
};
const renderArgumentsForm = () => {
if (!needsArguments) {
return null;
}
switch (creationArgs.from) {
case "LIST":
return renderFromListArgumentsForm();
case "WEB":
return renderFromWebArgumentsForm();
case "SAMPLE":
return renderSamplePicker();
default:
return null;
}
};
const validateArguments = () => {
if (!creationArgs) {
return false;
}
switch (creationArgs.from) {
case "SAMPLE":
return !!(selectedSample && selectedSample.jsonContent);
default:
return true;
}
};
const getPanelHeaderText = () => {
if (!needsArguments) {
return "Add a new Site Script";
}
switch (creationArgs.from) {
case "LIST":
return "Add a new Site Script from existing list";
case "WEB":
return "Add a new Site Script from existing site";
case "SAMPLE":
return "Add a new Site Script from samples";
default:
return "";
}
};
const panelType = creationArgs.from == "SAMPLE" ? PanelType.extraLarge : PanelType.smallFixedFar;
return <Panel type={panelType}
headerText={getPanelHeaderText()}
isOpen={props.isOpen}
onDismiss={onCancel}
onRenderFooterContent={() => needsArguments && <div className={styles.panelFooter}>
<Stack horizontalAlign="end" horizontal tokens={{ childrenGap: 25 }}>
<PrimaryButton text="Add Site Script" onClick={onScriptAdded} disabled={!validateArguments()} />
<DefaultButton text="Cancel" onClick={onCancel} />
</Stack>
</div>}>
<div className={styles.NewSiteScriptPanel}>
{!needsArguments && <Stack tokens={{ childrenGap: 20 }}>
<CompoundButton
iconProps={{ iconName: "PageAdd" }}
text="Blank"
secondaryText="Create a new blank Site Script"
onClick={() => onChoiceClick({ from: "BLANK" })}
/>
<CompoundButton
iconProps={{ iconName: "SharepointLogoInverse" }}
text="From Site"
secondaryText="Create a new Site Script from an existing site"
onClick={() => onChoiceClick({ from: "WEB" })}
/>
<CompoundButton
iconProps={{ iconName: "PageList" }}
text="From List"
secondaryText="Create a new Site Script from an existing list"
onClick={() => onChoiceClick({ from: "LIST" })}
/>
<CompoundButton
iconProps={{ iconName: "ProductCatalog" }}
text="From Sample"
secondaryText="Create a new Site Script from a sample"
onClick={() => onChoiceClick({ from: "SAMPLE" })}
/>
</Stack>}
{renderArgumentsForm()}
</div>
</Panel>;
}
Example #26
| Source File: MeetingPage.tsx From msteams-meetings-template with MIT License | 4 votes |
|
function MeetingPageComponent(props: MeetingPageProps) {
const [validationEnabled, setValidationEnabled] = useState(false);
function onSubjectChanged(
evt: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
newValue: string | undefined
) {
// The meeting objects are small, cloning is cheap enough
// Normally would use immutable records or similar to avoid overhead.
const nextMeeting = _.cloneDeep(props.meeting);
nextMeeting.subject = newValue ?? '';
props.setMeeting(nextMeeting);
}
function onStartDateSelected(date?: Moment) {
const nextMeeting = _.cloneDeep(props.meeting);
nextMeeting.startDateTime = date ?? nextMeeting.startDateTime;
// If start >= end, adjust to be the same delta as before from the start time
if (nextMeeting.startDateTime.isSameOrAfter(nextMeeting.endDateTime)) {
const existingDelta = moment(props.meeting.endDateTime).diff(
moment(props.meeting.startDateTime)
);
const newEndDateTime = moment(nextMeeting.startDateTime).add(
existingDelta
);
if (nextMeeting.startDateTime.isSameOrAfter(newEndDateTime)) {
newEndDateTime.add(existingDelta);
}
nextMeeting.endDateTime = newEndDateTime;
}
props.setMeeting(nextMeeting);
}
function onEndDateSelected(date?: Moment) {
const nextMeeting = _.cloneDeep(props.meeting);
const newEndDateTime = date ?? nextMeeting.endDateTime;
// Allow the change only if it maintains start < end
if (!nextMeeting.startDateTime.isAfter(newEndDateTime)) {
nextMeeting.endDateTime = newEndDateTime;
}
props.setMeeting(nextMeeting);
}
function onCreate() {
if (!!props.validationFailures.invalidTitle) {
setValidationEnabled(true);
return;
}
props.createMeeting(props.meeting);
}
if (props.creationInProgress) {
return (
<div className="spinnerContainer">
<Spinner size={SpinnerSize.large} />
</div>
);
}
return (
<div className="newMeetingContainer">
<Stack
className="container"
verticalFill
tokens={{
childrenGap: 35
}}
>
<Stack horizontal tokens={{ childrenGap: 15 }}>
<StackItem grow>
<FontIcon iconName="Calendar" className={meetingIconClass} />
<Text variant="xLarge" styles={boldStyle}>
<FormattedMessage id="meetingPage.header" />
</Text>
</StackItem>
<StackItem align="end" className="newMeetingButtons">
<Stack horizontal tokens={{ childrenGap: 10 }}>
<PrimaryButton
className="teamsButton"
disabled={props.creationInProgress}
onClick={() => onCreate()}
ariaLabel={translate('meetingPage.create.ariaLabel')}
>
<FormattedMessage id="meetingPage.create" />
</PrimaryButton>
<DefaultButton
className="teamsButtonInverted"
disabled={props.creationInProgress}
onClick={() => props.cancel()}
ariaLabel={translate('meetingPage.cancel.ariaLabel')}
>
<FormattedMessage id="meetingPage.cancel" />
</DefaultButton>
</Stack>
</StackItem>
</Stack>
<Stack horizontal>
<StackItem className="newMeetingInputIcon">
<FontIcon iconName="Edit" className={inputIconClass} />
</StackItem>
<StackItem grow>
<TextField
className="newMeetingInput"
placeholder={translate('meetingPage.title.input')}
value={props.meeting?.subject}
underlined
onChange={onSubjectChanged}
errorMessage={
validationEnabled
? props.validationFailures.invalidTitle
: undefined
}
/>
</StackItem>
</Stack>
<div className="newMeetingDatePickerContainer">
<FontIcon iconName="Clock" className={inputIconClass} />
<div className="newMeetingPicker">
<DateTimePicker
dateTime={props.meeting.startDateTime}
minDate={moment()}
onTimeUpdated={onStartDateSelected}
includeDuration={false}
iconName="ReplyAlt"
/>
<DateTimePicker
dateTime={props.meeting.endDateTime}
minDate={props.meeting.startDateTime}
onTimeUpdated={onEndDateSelected}
includeDuration={true}
/>
</div>
</div>
{/* MOBILE BUTTON GROUP */}
</Stack>
<StackItem className="newMeetingButtonsMobile">
<Stack horizontal tokens={{ childrenGap: 10 }}>
<PrimaryButton
className="teamsButton teamsButtonFullWidth"
disabled={props.creationInProgress}
onClick={() => onCreate()}
ariaLabel={translate('meetingPage.create.ariaLabel')}
>
<FormattedMessage id="meetingPage.create" />
</PrimaryButton>
<DefaultButton
className="teamsButtonInverted teamsButtonFullWidth"
disabled={props.creationInProgress}
onClick={() => props.cancel()}
ariaLabel={translate('meetingPage.cancel.ariaLabel')}
>
<FormattedMessage id="meetingPage.cancel" />
</DefaultButton>
</Stack>
</StackItem>
</div>
);
}
Example #27
| Source File: TableList.tsx From AIPerf with MIT License | 4 votes |
|
// get IColumn[]
// when user click [Add Column] need to use the function
private initTableColumnList = (columnList: string[]): IColumn[] => {
// const { columnList } = this.props;
// [supportCustomizedTrial: true]
const supportCustomizedTrial = (EXPERIMENT.multiPhase === true) ? false : true;
const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status);
const showColumn: IColumn[] = [];
for (const item of columnList) {
const paraColumn = item.match(/ \(search space\)$/);
let result;
if (paraColumn !== null) {
result = paraColumn.input;
}
switch (item) {
case 'Trial No.':
showColumn.push(this.SequenceIdColumnConfig);
break;
case 'ID':
showColumn.push(this.IdColumnConfig);
break;
case 'Start Time':
showColumn.push(this.StartTimeColumnConfig);
break;
case 'End Time':
showColumn.push(this.EndTimeColumnConfig);
break;
case 'Duration':
showColumn.push(this.DurationColumnConfig);
break;
case 'Status':
showColumn.push(this.StatusColumnConfig);
break;
case 'Intermediate result':
showColumn.push(this.IntermediateCountColumnConfig);
break;
case 'Default':
showColumn.push(this.AccuracyColumnConfig);
break;
case 'Operation':
showColumn.push({
name: 'Operation',
key: 'operation',
fieldName: 'operation',
minWidth: 160,
maxWidth: 200,
isResizable: true,
className: 'detail-table',
onRender: (record: any) => {
const trialStatus = record.status;
const flag: boolean = (trialStatus === 'RUNNING' || trialStatus === 'UNKNOWN') ? false : true;
return (
<Stack className="detail-button" horizontal>
{/* see intermediate result graph */}
<PrimaryButton
className="detail-button-operation"
title="Intermediate"
onClick={this.showIntermediateModal.bind(this, record.id)}
>
{LineChart}
</PrimaryButton>
{/* kill job */}
{
flag
?
<PrimaryButton className="detail-button-operation" disabled={true} title="kill">
{blocked}
</PrimaryButton>
:
<KillJob trial={record} />
}
{/* Add a new trial-customized trial */}
{
supportCustomizedTrial
?
<PrimaryButton
className="detail-button-operation"
title="Customized trial"
onClick={this.setCustomizedTrial.bind(this, record.id)}
disabled={disabledAddCustomizedTrial}
>
{copy}
</PrimaryButton>
:
null
}
</Stack>
);
},
});
break;
case (result):
// remove SEARCH_SPACE title
// const realItem = item.replace(' (search space)', '');
showColumn.push({
name: item.replace(' (search space)', ''),
key: item,
fieldName: item,
minWidth: 150,
onRender: (record: TableRecord) => {
const eachTrial = TRIALS.getTrial(record.id);
return (
<span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>
);
},
});
break;
default:
showColumn.push({
name: item,
key: item,
fieldName: item,
minWidth: 100,
onRender: (record: TableRecord) => {
const accDictionary = record.accDictionary;
let other = '';
if (accDictionary !== undefined) {
other = accDictionary[item].toString();
}
return (
<div>{other}</div>
);
}
});
}
}
return showColumn;
}
Example #28
| Source File: LogDrawer.tsx From AIPerf with MIT License | 4 votes |
|
render(): React.ReactNode {
const { closeDrawer, activeTab } = this.props;
const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
return (
<Stack>
<Panel
isOpen={true}
hasCloseButton={false}
isFooterAtBottom={true}
>
<div className="log-tab-body">
<Pivot
selectedKey={activeTab}
style={{ minHeight: 190, paddingTop: '16px' }}
>
{/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */}
<PivotItem headerText="Dispatcher Log" key="dispatcher">
<MonacoHTML
content={dispatcherLogStr || 'Loading...'}
loading={isLoading}
// paddingTop[16] + tab[44] + button[32]
height={logDrawerHeight - 92}
/>
<Stack horizontal className="buttons">
<StackItem grow={12} className="download">
<PrimaryButton text="Download" onClick={this.downloadDispatcher} />
</StackItem>
<StackItem grow={12} className="close">
<DefaultButton text="Close" onClick={closeDrawer} />
</StackItem>
</Stack>
</PivotItem>
<PivotItem headerText="NNIManager Log" key="nnimanager">
{/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
<MonacoHTML
content={nniManagerLogStr || 'Loading...'}
loading={isLoading}
height={logDrawerHeight - 92}
/>
<Stack horizontal className="buttons">
<StackItem grow={12} className="download">
<PrimaryButton text="Download" onClick={this.downloadNNImanager} />
</StackItem>
<StackItem grow={12} className="close">
<DefaultButton text="Close" onClick={closeDrawer} />
</StackItem>
</Stack>
</PivotItem>
</Pivot>
</div>
</Panel>
</Stack>
);
}
Example #29
| Source File: ExperimentDrawer.tsx From AIPerf with MIT License | 4 votes |
|
render(): React.ReactNode {
const { isVisble, closeExpDrawer } = this.props;
const { experiment, expDrawerHeight } = this.state;
return (
<Stack className="logDrawer">
<Panel
isOpen={isVisble}
hasCloseButton={false}
styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
>
<Pivot style={{ minHeight: 190 }} className="log-tab-body">
<PivotItem headerText="Experiment Parameters">
<div className="just-for-log">
<MonacoEditor
width="100%"
// 92 + marginTop[16]
height={expDrawerHeight - 108}
language="json"
value={experiment}
options={DRAWEROPTION}
/>
</div>
<Stack horizontal className="buttons">
<StackItem grow={50} className="download">
<PrimaryButton
text="Download"
onClick={this.downExperimentParameters}
/>
</StackItem>
<StackItem grow={50} className="close">
<DefaultButton
text="Close"
onClick={closeExpDrawer}
/>
</StackItem>
</Stack>
</PivotItem>
</Pivot>
</Panel>
</Stack>
);
}
