1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

action-board-buttons are now a common components for both config table and ic

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
This commit is contained in:
Andrii Podriez 2024-07-25 13:52:15 +02:00 committed by al3xa23
parent 41c5066c0c
commit 0a17780602

View file

@ -0,0 +1,121 @@
/**
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* VILLASweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React from 'react';
import PropTypes from 'prop-types';
import IconButton from './icon-button';
import IconToggleButton from './icon-toggle-button';
const buttonStyle = {
marginLeft: '12px',
height: '44px',
width: '35px',
alignItems: 'center',
justifyContent: 'center',
display: 'inline-flex'
};
const iconStyle = {
height: '20px',
width: '20px'
}
let buttonkey = 0;
class ActionBoardButtonGroup extends React.Component {
getBtn(icon, tooltip, clickFn, disabled = false) {
return <IconButton
key={buttonkey++}
childKey={buttonkey++}
icon={icon}
disabled={disabled}
tooltip={tooltip}
tipPlacement={'bottom'}
onClick={clickFn}
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
}
getToggleBtn(checkedIcon, uncheckedIcon, tooltipChecked, tooltipUnchecked, clickFn, checked = false, disabled = false) {
return <IconToggleButton
index={buttonkey++}
childKey={buttonkey++}
key={buttonkey++}
checked={checked}
checkedIcon={checkedIcon}
uncheckedIcon={uncheckedIcon}
tooltipChecked={tooltipChecked}
tooltipUnchecked={tooltipUnchecked}
disabled={disabled}
buttonStyle={buttonStyle}
iconStyle={iconStyle}
onChange={clickFn}
/>
}
render() {
const buttons = [];
buttonkey = 0;
let disabled = this.props.disabled ? this.props.disabled : false;
if (this.props.onReset) {
buttons.push(this.getBtn("undo", "Reset", this.props.onReset, disabled));
}
if (this.props.onRecreate) {
buttons.push(this.getBtn("redo", "Recreate", this.props.onRecreate, disabled));
}
if (this.props.onShutdown) {
buttons.push(this.getBtn("power-off", "Shutdown", this.props.onShutdown, disabled));
}
if (this.props.onDelete) {
buttons.push(this.getBtn("trash", "Delete", this.props.onDelete, disabled));
}
if (this.props.onStart) {
buttons.push(this.getBtn("play", "Start", this.props.onStart, disabled));
}
if (this.props.onPauseResume) {
buttons.push(this.getToggleBtn("pause", "pause", "click to resume", "click to pause", this.props.onPauseResume, this.props.paused, disabled));
}
if (this.props.onStop) {
buttons.push(this.getBtn("stop", "Stop", this.props.onStop, disabled));
}
return <div className='section-buttons-group-center'>
{buttons}
</div>;
}
}
ActionBoardButtonGroup.propTypes = {
onReset: PropTypes.func,
onShutdown: PropTypes.func,
onDelete: PropTypes.func,
onRecreate: PropTypes.func,
onStart: PropTypes.func,
onStop: PropTypes.func,
onPauseResume: PropTypes.func
};
export default ActionBoardButtonGroup;