react-bootstrap#MenuItem JavaScript Examples
The following examples show how to use
react-bootstrap#MenuItem.
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: PlotSelection.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
function PlotTabs({
active,
onTabChange,
data,
plots,
...props
}) {
const MAX_TABS = 3; // max number of tabs
const getPlotTitle = (plot, index) => {
return plot?.title ?? ("Selection " + (index + 1).toString());
};
return (
<Tab.Container
onSelect={onTabChange}
activeKey={active}
defaultActiveKey={active}>
<Row className="clearfix">
<Col sm={12}>
<Nav bsStyle="tabs">
{plots.slice(0, plots.length > MAX_TABS ? MAX_TABS - 1 : MAX_TABS).map((plot, index) => (
<NavItem role="tab" eventKey={index}>
{getPlotTitle(plot, index)}
</NavItem>
))}
{plots.length > MAX_TABS
? <NavDropdown title={active < MAX_TABS - 1 ? "More..." : getPlotTitle(plots[active], active)}>
{plots.slice(MAX_TABS - 1).map((plot, index) => (
<MenuItem eventKey={index + MAX_TABS - 1}>
{getPlotTitle(plot, index + MAX_TABS - 1)}
</MenuItem>
))}
</NavDropdown>
: null}
<PlotSelectionTabActionButtons {...props} data={data} />
</Nav>
</Col>
<PlotSelectionTabContent {...props} data={data} />
</Row>
</Tab.Container>
);
}
Example #2
| Source File: PlotSelectionToolbar.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 4 votes |
|
export default function PlotSelectionToolbar({
foncier,
authLevel = {},
currentData = [],
loadInfo = () => {},
onSaveAsAnnotation = () => {},
zoomToSelection = () => {},
removePlots = () => {},
showLandedPropertyInformationByParcelle = () => {},
selectedPlots = []
}) {
const atLeastOneSelected = selectedPlots.length > 0;
const onlyOneSelected = selectedPlots.length === 1;
const isDataPresent = currentData.length > 0;
const { isCNIL1, isCNIL2 } = authLevel;
const [showBundleInformation, setShowBundleInformation] = useState(false);
const [exportPlotModal, setExportPlotModal] = useState(false);
return (
<>
<Toolbar
btnGroupProps={{className: "pull-right"}}
btnDefaultProps={{
tooltipPosition: 'bottom'
}}
buttons={[{
disabled: !isDataPresent,
glyph: "zoom-in",
tooltipId: atLeastOneSelected ? "cadastrapp.result.parcelle.zoom.selection" : "cadastrapp.result.parcelle.zoom.list",
onClick: zoomToSelection
}, ...(foncier
? [{
disabled: !onlyOneSelected,
glyph: "th-list",
tooltipId: "cadastrapp.result.parcelle.uf",
onClick: () => { showLandedPropertyInformationByParcelle(find(currentData, {parcelle: selectedPlots[0]})); }
}]
: []), {
disabled: !atLeastOneSelected,
glyph: "trash",
tooltipId: "cadastrapp.result.parcelle.delete",
onClick: () => { removePlots(selectedPlots); }
}, {
disabled: !atLeastOneSelected,
glyph: "info-sign",
tooltipId: "cadastrapp.result.parcelle.fiche",
onClick: () => { loadInfo(selectedPlots);}
}, {
disabled: !isDataPresent,
glyph: "comment",
tooltipId: "cadastrapp.result.parcelle.saveAsAnnotation",
onClick: () => { onSaveAsAnnotation(selectedPlots);}
}, ((isCNIL1 || isCNIL2) ? {
renderButton:
(<DropdownButton
disabled={!atLeastOneSelected}
pullRight title={< Glyphicon glyph="export" />}>
<MenuItem onClick={() => exportParcellesAsCSV({ parcelles: selectedPlots }).then(downloadResponse)}>
<Message msgId={"cadastrapp.result.csv.button.parcelles"} />
</MenuItem>
<MenuItem onClick={() => exportProprietaireByParcelles({ parcelles: selectedPlots }).then(downloadResponse)}>
<Message msgId={"cadastrapp.result.csv.button.owner"} />
</MenuItem>
<MenuItem onClick={() => exportCoProprietaireByParcelles({ parcelles: selectedPlots }).then(downloadResponse)}>
<Message msgId={"cadastrapp.result.csv.button.coowner"} />
</MenuItem>
<MenuItem disabled={!onlyOneSelected} onClick={() => {
// prevent click event when disabled
if (onlyOneSelected) {
setShowBundleInformation(true);
}
}}><Message msgId={"cadastrapp.result.csv.button.bundle"} /></MenuItem>
<MenuItem onClick={() => setExportPlotModal(true)}>
<Message msgId={"cadastrapp.result.pdf.export"} /></MenuItem>
</DropdownButton>)
} : {
renderButton: (
<DropdownButton
disabled={!isDataPresent || !atLeastOneSelected}
pullRight title={< Glyphicon glyph="export" />}>
<MenuItem
onClick={() => exportParcellesAsCSV({ parcelles: selectedPlots }).then(downloadResponse)}>
<Message msgId={"cadastrapp.result.csv.export"} />
</MenuItem>
<MenuItem onClick={() => setExportPlotModal(true)}>
<Message msgId={"cadastrapp.result.pdf.export"} /></MenuItem>
</DropdownButton>
)
})
]}
/>
<BundleInformationModal show={showBundleInformation} onClose={() => setShowBundleInformation(false)} parcelle={selectedPlots[0]} />
<ExportPlotsAsPDFModal show={exportPlotModal} onClose={()=> setExportPlotModal(false) }
parcelle={selectedPlots} isCNIL1={isCNIL1} isCNIL2={isCNIL2}/>
</>);
}
Example #3
| Source File: Header.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { history, location } = this.props;
const { pushPermission, commands, runningTasks, updateAvailable, latestVersion, lastUpdate } = this.state;
const signedInName = auth.user ? auth.user.username : '?';
const showCommands = commands.length > 0;
const workspace = Workspaces.findByPath(location.pathname);
const updateMsg = i18n._('A new version of {{name}} is available', { name: settings.productName }) + '. ' +
i18n._('Version {{version}}', { version: latestVersion.readable }) +
` (${moment(lastUpdate).format('LLL')})`;
const title = workspace ? workspace.name : 'Makerverse';
return (
<Navbar
fixedTop
fluid
style={{
margin: 0,
}}
>
<Navbar.Header style={{ display: 'flex', alignItems: 'center' }}>
<img
style={{
margin: '4px auto 0 auto',
width: '42px'
}}
src="images/logo-badge-32x32.png"
alt=""
/>
<h1 style={{ color: '#222', marginLeft: '15px', marginTop: 0, marginBottom: 0, fontSize: '30px', fontWeight: '600' }}>
{title}
</h1>
{updateAvailable && (
<Tooltip
placement="bottom"
id="navbarBrandTooltip"
style={{ color: '#fff' }}
content={updateMsg}
>
<button
type="button"
className="btn btn-warning"
style={{ marginLeft: '10px' }}
onClick={() => {
window.location = '/#/settings/about';
}}
title={i18n._('New update available')}
>
<i className="fa fa-warning" />
<Space width="8" />
{i18n._('New update available')}
</button>
</Tooltip>
)}
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavDropdown
id="nav-dropdown-user"
title={(
<div title={i18n._('My Account')}>
<i className="fa fa-fw fa-user" />
</div>
)}
noCaret
>
<MenuItem header>
{i18n._('Signed in as {{name}}', { name: signedInName })}
</MenuItem>
<MenuItem divider />
<MenuItem
href="https://openwork.shop/account/manage"
>
<i className="fa fa-fw fa-user" />
<Space width="8" />
{i18n._('Account')}
</MenuItem>
<MenuItem
onClick={() => {
log.debug('Destroy and cleanup the WebSocket connection');
Workspaces.disconnect();
deleteCookie(auth.GUEST_COOKIE_NAME);
if (auth.isGuest()) {
window.location.replace('/#/login');
} else {
auth.signout();
// Remember current location
history.replace(location.pathname);
}
}}
>
<i className="fa fa-fw fa-sign-out" />
<Space width="8" />
{i18n._('Sign Out')}
</MenuItem>
</NavDropdown>
<NavDropdown
id="nav-dropdown-menu"
title={(
<div title={i18n._('Options')}>
<i className="fa fa-fw fa-ellipsis-v" />
{this.state.runningTasks.length > 0 && (
<span
className="label label-primary"
style={{
position: 'absolute',
top: 4,
right: 4
}}
>
N
</span>
)}
</div>
)}
noCaret
>
{showCommands && (
<MenuItem header>
{i18n._('Command')}
{pushPermission === Push.Permission.GRANTED && (
<span className="pull-right">
<i className="fa fa-fw fa-bell-o" />
</span>
)}
{pushPermission === Push.Permission.DENIED && (
<span className="pull-right">
<i className="fa fa-fw fa-bell-slash-o" />
</span>
)}
{pushPermission === Push.Permission.DEFAULT && (
<span className="pull-right">
<Anchor
className={styles.btnIcon}
onClick={this.actions.requestPushPermission}
title={i18n._('Show notifications')}
>
<i className="fa fa-fw fa-bell" />
</Anchor>
</span>
)}
</MenuItem>
)}
{showCommands && commands.map((cmd) => {
const isTaskRunning = runningTasks.indexOf(cmd.taskId) >= 0;
return (
<MenuItem
key={cmd.id}
disabled={cmd.disabled}
onSelect={() => {
this.actions.runCommand(cmd);
}}
>
<span title={cmd.command}>{cmd.title || cmd.command}</span>
<span className="pull-right">
<i
className={classNames(
'fa',
'fa-fw',
{ 'fa-circle-o-notch': isTaskRunning },
{ 'fa-spin': isTaskRunning },
{ 'fa-exclamation-circle': cmd.err },
{ 'text-error': cmd.err }
)}
title={cmd.err}
/>
</span>
</MenuItem>
);
})}
{showCommands &&
<MenuItem divider />
}
<MenuItem
href="https:/makerverse.com/"
target="_blank"
>
{i18n._('Help')}
</MenuItem>
{/* <MenuItem
href="https://github.com/cncjs/cncjs/issues"
target="_blank"
>
{i18n._('Report an issue')}
</MenuItem> */}
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
Example #4
| Source File: AddMacro.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { state, actions } = this.props;
const { content = '' } = { ...state.modal.params };
return (
<Modal disableOverlay size="md" onClose={actions.closeModal}>
<Modal.Header>
<Modal.Title>
{i18n._('New Macro')}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form
ref={c => {
this.form = c;
}}
onSubmit={(event) => {
event.preventDefault();
}}
>
<div className="form-group">
<label>{i18n._('Macro Name')}</label>
<Input
ref={c => {
this.fields.name = c;
}}
type="text"
className="form-control"
name="name"
value=""
validations={[validations.required]}
/>
</div>
<div className="form-group">
<div>
<label>{i18n._('Macro Commands')}</label>
<Dropdown
id="add-macro-dropdown"
className="pull-right"
onSelect={(eventKey) => {
const textarea = ReactDOM.findDOMNode(this.fields.content).querySelector('textarea');
if (textarea) {
insertAtCaret(textarea, eventKey);
}
actions.updateModalParams({
content: textarea.value
});
}}
pullRight
>
<Dropdown.Toggle
className={styles.btnLink}
style={{ boxShadow: 'none' }}
useAnchor
noCaret
>
<i className="fa fa-plus" />
<Space width="8" />
{i18n._('Macro Variables')}
<Space width="4" />
<i className="fa fa-caret-down" />
</Dropdown.Toggle>
<Dropdown.Menu className={styles.macroVariablesDropdown}>
{variables.map(v => {
if (typeof v === 'object') {
return (
<MenuItem
header={v.type === 'header'}
key={uniqueId()}
>
{v.text}
</MenuItem>
);
}
return (
<MenuItem
eventKey={v}
key={uniqueId()}
>
{v}
</MenuItem>
);
})}
</Dropdown.Menu>
</Dropdown>
</div>
<Textarea
ref={c => {
this.fields.content = c;
}}
rows="10"
className="form-control"
name="content"
value={content}
validations={[validations.required]}
/>
</div>
</Form>
</Modal.Body>
<Modal.Footer>
<Button
onClick={actions.closeModal}
>
{i18n._('Cancel')}
</Button>
<Button
btnStyle="primary"
onClick={() => {
this.form.validate(err => {
if (err) {
return;
}
const { name, content } = this.value;
actions.addMacro({ name, content });
actions.closeModal();
});
}}
>
{i18n._('OK')}
</Button>
</Modal.Footer>
</Modal>
);
}
Example #5
| Source File: EditMacro.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { state, actions } = this.props;
const { id, name, content } = { ...state.modal.params };
return (
<Modal disableOverlay size="md" onClose={actions.closeModal}>
<Modal.Header>
<Modal.Title>
{i18n._('Edit Macro')}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form
ref={c => {
this.form = c;
}}
onSubmit={(event) => {
event.preventDefault();
}}
>
<div className="form-group">
<label>{i18n._('Macro Name')}</label>
<Input
ref={c => {
this.fields.name = c;
}}
type="text"
className="form-control"
name="name"
value={name}
validations={[validations.required]}
/>
</div>
<div className="form-group">
<div>
<label>{i18n._('Macro Commands')}</label>
<Dropdown
id="edit-macro-dropdown"
className="pull-right"
onSelect={(eventKey) => {
const textarea = ReactDOM.findDOMNode(this.fields.content).querySelector('textarea');
if (textarea) {
insertAtCaret(textarea, eventKey);
}
actions.updateModalParams({
content: textarea.value
});
}}
pullRight
>
<Dropdown.Toggle
className={styles.btnLink}
style={{ boxShadow: 'none' }}
useAnchor
noCaret
>
<i className="fa fa-plus" />
<Space width="8" />
{i18n._('Macro Variables')}
<Space width="4" />
<i className="fa fa-caret-down" />
</Dropdown.Toggle>
<Dropdown.Menu className={styles.macroVariablesDropdown}>
{variables.map(v => {
if (typeof v === 'object') {
return (
<MenuItem
header={v.type === 'header'}
key={uniqueId()}
>
{v.text}
</MenuItem>
);
}
return (
<MenuItem
eventKey={v}
key={uniqueId()}
>
{v}
</MenuItem>
);
})}
</Dropdown.Menu>
</Dropdown>
</div>
<Textarea
ref={c => {
this.fields.content = c;
}}
rows="10"
className="form-control"
name="content"
value={content}
validations={[validations.required]}
/>
</div>
</Form>
</Modal.Body>
<Modal.Footer>
<Button
btnStyle="danger"
className="pull-left"
onClick={() => {
const name = get(this.fields.name, 'value');
portal(({ onClose }) => (
<Modal disableOverlay={false} size="xs" onClose={onClose}>
<Modal.Header>
<Modal.Title>
{i18n._('Delete Macro')}
</Modal.Title>
</Modal.Header>
<Modal.Body>
{i18n._('Are you sure you want to delete this macro?')}
<p><strong>{name}</strong></p>
</Modal.Body>
<Modal.Footer>
<Button onClick={onClose}>
{i18n._('No')}
</Button>
<Button
btnStyle="danger"
onClick={chainedFunction(
() => {
actions.deleteMacro(id);
actions.closeModal();
},
onClose
)}
>
{i18n._('Yes')}
</Button>
</Modal.Footer>
</Modal>
));
}}
>
{i18n._('Delete')}
</Button>
<Button
onClick={() => {
actions.closeModal();
}}
>
{i18n._('Cancel')}
</Button>
<Button
btnStyle="primary"
onClick={() => {
this.form.validate(err => {
if (err) {
return;
}
const { name, content } = this.value;
actions.updateMacro(id, { name, content });
actions.closeModal();
});
}}
>
{i18n._('Save Changes')}
</Button>
</Modal.Footer>
</Modal>
);
}
Example #6
| Source File: WorkflowControl.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { state } = this.props;
const { controller } = state;
const activeState = this.workspace.activeState;
activeState.updateControllerState(controller.state);
const isRunningWorkflow = this.isWorkflowRunning;
const hasPausedWorkflow = this.isWorkflowPaused;
const isWorkflowActive = hasPausedWorkflow || isRunningWorkflow;
const canClose = this.isWorkflowIdle;
const hasError = !!activeState.error;
const isPaused = hasPausedWorkflow || activeState.isPaused;
const canPause = isRunningWorkflow || activeState.isRunning;
const canPlay = this.canRunWorkflow || activeState.isPaused;
const playPauseText = isPaused ? 'Resume (Cycle Start)' : 'Run Program';
return (
<div className={styles.workflowControl}>
<input
// The ref attribute adds a reference to the component to
// this.refs when the component is mounted.
ref={(node) => {
this.fileInputEl = node;
}}
type="file"
style={{ display: 'none' }}
multiple={false}
onChange={this.handleChangeFile}
/>
<div className="btn-toolbar">
<div className="btn-group btn-group-sm">
<button
type="button"
className="btn btn-primary"
title={i18n._('Uplload Program')}
onClick={this.handleClickUpload}
>
{i18n._('Upload Program')}
</button>
</div>
<div className="btn-group btn-group-sm">
{this.renderButtonFeature('cyclestart', null, playPauseText, 'fa-play', 'success', !canPlay)}
{this.renderButtonFeature('feedhold', null, 'Pause execution (feedhold)', 'fa-pause', 'warning', !canPause)}
{isWorkflowActive && !canClose && this.renderButtonFeature('stop', null, 'Stop program execution (progress will be lost)', 'fa-stop', 'danger', !hasPausedWorkflow)}
{canClose && this.renderButtonFeature('unload', null, 'Unload the current program', 'fa-trash', 'danger')}
</div>
<div className="btn-group btn-group-sm">
{activeState.isIdle && this.renderButtonFeature('sleep', 'Sleep', 'Put machine to sleep', 'fa-bed', 'success')}
{(activeState.hasAlarm || hasError) && this.renderButtonFeature('unlock', 'Unlock', 'Clear system alarms and errors', 'fa-unlock-alt', 'warning')}
{this.renderButtonFeature('reset', 'Reset', 'Reset board connection', 'fa-plug', 'danger')}
</div>
<div className="pull-right btn-group btn-group-sm">
{this.renderButtonFeature('homing', 'Set Home', 'Set current position as machine home', 'fa-home', 'primary')}
</div>
<Dropdown
className="hidden"
bsSize="sm"
id="toolbar-dropdown"
pullRight
>
<Dropdown.Toggle
noCaret
style={{
paddingLeft: 8,
paddingRight: 8
}}
>
<i className="fa fa-list-alt" />
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem>
<i className={classNames(styles.icon, styles.iconPerimeterTracingSquare)} />
<Space width="4" />
</MenuItem>
</Dropdown.Menu>
</Dropdown>
</div>
<AlertErrorToast
workspaceId={this.workspace.id}
/>
</div>
);
}
