diff --git a/src/index.js b/src/index.js index 1b8e201..d5bce3f 100644 --- a/src/index.js +++ b/src/index.js @@ -56,6 +56,19 @@ const errorIcon = ( ); +const LOADING_TEXT = 'Loading'; + +const SUCCESS_TEXT = 'Success'; + +const ERROR_TEXT = 'Error'; + +const BUTTON_STATE = { + success: 'success', + error: 'error', + loading: 'loading', + idle: 'idle', +}; + const ReactiveButton = (props) => { const color = props.color ? props.color : 'primary'; @@ -64,21 +77,21 @@ const ReactiveButton = (props) => { const loadingText = props.loadingText && props.loadingText !== '' ? props.loadingText - : 'Loading'; + : LOADING_TEXT; const successText = props.successText && props.successText !== '' ? props.successText - : 'Success'; + : SUCCESS_TEXT; const errorText = - props.errorText && props.errorText !== '' ? props.errorText : 'Error'; + props.errorText && props.errorText !== '' ? props.errorText : ERROR_TEXT; const type = props.type ? props.type : 'button'; const className = `reactive-btn${ props.className ? ' ' + props.className : '' - }`; + }`; const outline = props.outline ? true : false; @@ -96,7 +109,7 @@ const ReactiveButton = (props) => { : true; const [buttonState, setButtonState] = useState( - props.buttonState ? props.buttonState : 'idle' + props.buttonState ? props.buttonState : BUTTON_STATE.idle ); const onClickHandler = () => { @@ -108,10 +121,10 @@ const ReactiveButton = (props) => { useEffect(() => { if (typeof props.buttonState !== 'undefined') { setButtonState(props.buttonState); - if (props.buttonState === 'success' || props.buttonState === 'error') { + if (props.buttonState === BUTTON_STATE.success || props.buttonState === BUTTON_STATE.error) { setTimeout( () => { - setButtonState('idle'); + setButtonState(BUTTON_STATE.idle); }, props.messageDuration ? props.messageDuration : 2000 ); @@ -120,26 +133,26 @@ const ReactiveButton = (props) => { }, [props.buttonState, props.messageDuration]); const getButtonText = (currentButtonState) => { - if (currentButtonState === 'idle') { + if (currentButtonState === BUTTON_STATE.idle) { return idleText; - } else if (currentButtonState === 'loading') { - return loadingText === 'Loading' ? ( + } else if (currentButtonState === BUTTON_STATE.loading) { + return loadingText === LOADING_TEXT ? ( {loadingIcon} {loadingText} ) : ( loadingText ); - } else if (currentButtonState === 'success') { - return successText === 'Success' ? ( + } else if (currentButtonState === BUTTON_STATE.success) { + return successText === SUCCESS_TEXT ? ( {successIcon} {successText} ) : ( successText ); - } else if (currentButtonState === 'error') { - return errorText === 'Error' ? ( + } else if (currentButtonState === BUTTON_STATE.error) { + return errorText === ERROR_TEXT ? ( {errorIcon} {errorText} @@ -157,14 +170,14 @@ const ReactiveButton = (props) => { >