UNPKG

@eccenca/gui-elements

Version:

Collection of low-level GUI elements like Buttons, Icons or Alerts. Also includes core styles for those elements.

74 lines (63 loc) 2.3 kB
import React from 'react'; import Button from './Button'; import ProgressButton from './ProgressButton'; /** Use the `<AffirmativeButton />` element for all buttons that trigger affirmative actions, e.g. confirming "Save data." For more information read the [GUI spec about button usage](https://confluence.brox.de/display/ECCGMBH/GUI+Specifications#GUISpecifications-Buttons). It is possible to combine it with `<Button />` parameters like `disabled`, `raised`, `iconName` and `ripple`. ```js import {AffirmativeButton} from '@eccenca/gui-elements'; const Page = React.createClass({ // template rendering render() { return ( <AffirmativeButton> Affirmative action </AffirmativeButton> ) }, // .... }); ``` */ const AffirmativeButton = props => { // split 'normal' props from button content const { children, ...otherProps } = props; const useProgressButton = typeof otherProps.progress !== 'undefined'; // remove unused propTypes from button if (!useProgressButton) { delete otherProps.progress; } if (__DEBUG__ && typeof otherProps.accent !== 'undefined') { console.warn( 'Do not use <AffirmativeButton/> with accent property.' ); // eslint-disable-line no-console } if (__DEBUG__ && typeof otherProps.colored !== 'undefined') { console.warn( 'Do not use <AffirmativeButton/> with colored property.' ); // eslint-disable-line no-console } if (__DEBUG__ && typeof otherProps.dismissive !== 'undefined') { console.warn( 'Do not use <AffirmativeButton/> with dismissive property.' ); // eslint-disable-line no-console } if (__DEBUG__ && typeof otherProps.disruptive !== 'undefined') { console.warn( 'Do not use <AffirmativeButton/> with disruptive property.' ); // eslint-disable-line no-console } // render button return useProgressButton ? ( <ProgressButton {...otherProps} affirmative> {children} </ProgressButton> ) : ( <Button {...otherProps} affirmative> {children} </Button> ); }; AffirmativeButton.displayName = 'AffirmativeButton'; export default AffirmativeButton;