office-ui-fabric-react#Toggle TypeScript Examples
The following examples show how to use
office-ui-fabric-react#Toggle.
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: DefaultMetricPoint.tsx From AIPerf with MIT License | 6 votes |
|
render(): React.ReactNode {
const graph = this.generateGraph();
const accNodata = (graph === EmptyGraph ? 'No data' : '');
const onEvents = { 'dataZoom': this.metricDataZoom };
return (
<div>
<Stack horizontalAlign="end" className="default-metric">
<Toggle label="Optimization curve"
inlineLabel
onChange={this.loadDefault}
/>
</Stack>
<div className="default-metric-graph">
<ReactEcharts
option={graph}
style={{
width: '100%',
height: 402,
margin: '0 auto',
}}
theme="my_theme"
notMerge={true} // update now
onEvents={onEvents}
/>
<div className="default-metric-noData">{accNodata}</div>
</div>
</div>
);
}
Example #2
| 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 #3
| 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 #4
| 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>
);
}
Example #5
| Source File: GenericObjectEditor.tsx From sp-site-designs-studio with MIT License | 4 votes |
|
export function PropertyEditor(props: IPropertyEditorProps) {
let { schema,
label,
readonly,
required,
value,
onChange } = props;
const onDropdownChange = ((ev: any, v: IDropdownOption) => {
onChange(v.key);
});
const onNumberInputChange = ((ev: any, v: any) => {
if (typeof (v) === "number") {
onChange(v);
} else {
const number = parseFloat(v as string);
onChange(number);
}
});
const onInputChange = ((ev: any, v: any) => {
onChange(v);
});
if (schema.enum) {
if (schema.enum.length > 1 && !readonly) {
return (
<Dropdown
required={required}
label={label}
selectedKey={value}
options={schema.enum.map((p) => ({ key: p, text: p }))}
onChange={onDropdownChange}
/>
);
} else {
return (
<TextField
label={label}
value={value}
readOnly={true}
required={required}
onChange={onInputChange}
/>
);
}
} else {
switch (schema.type) {
case 'boolean':
return (
<Toggle
label={label}
checked={value as boolean}
disabled={readonly}
onChange={onInputChange}
/>
);
case 'array':
return <>
<Label>{label}</Label>
<GenericArrayEditor
object={value}
schema={schema.items}
onObjectChanged={onChange} />
</>;
case 'object': // TODO If object is a simple dictionary (key/non-complex object values) => Display a custom control
// return <GenericObjectEditor
// object={value}
// schema={schema}
// onObjectChanged={onChange}
// />;
return <div>
<Label>{label}</Label>
<MessageBar messageBarType={MessageBarType.info}>{`This value of this property must be a complex object. Please use code editor to edit it`}</MessageBar>
</div>;
case 'number':
return (
<TextField
required={required}
label={label}
value={value}
readOnly={readonly}
onChange={onNumberInputChange}
/>
);
case 'string':
default:
return (
<TextField
required={required}
label={label}
value={value}
readOnly={readonly}
onChange={onInputChange}
/>
);
}
}
}
Example #6
| 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>;
}
