Function SaveButton

src/components/SaveButton/SaveButton.react.js:14–57

({
  state = SaveButton.States.WAITING,
  onClick,
  waitingText = 'Save changes',
  savingText = 'Saving\u2026',
  failedText = 'Save failed',
  succeededText = 'Saved!',
  disabled = false,
  ...buttonProps
})

import styles from 'components/SaveButton/SaveButton.scss';

const SaveButton = ({
  state = SaveButton.States.WAITING,
  onClick,
  waitingText = 'Save changes',
  savingText = 'Saving\u2026',
  failedText = 'Save failed',
  succeededText = 'Saved!',
  disabled = false,
  ...buttonProps
}) => {
  let value = '';
  let color = 'blue';
  switch (state) {
    case SaveButton.States.WAITING:
      value = waitingText;
      break;
    case SaveButton.States.SAVING:
      value = savingText;
      break;
    case SaveButton.States.SUCCEEDED:
      value = succeededText;
      color = 'green';
      break;
    case SaveButton.States.FAILED:
      value = failedText;
      color = 'red';
      break;
  }
  const className = state === SaveButton.States.FAILED ? styles.shake : null;
  return (
    <span className={className}>
      <Button
        primary={true}
        width={'128px'}
        progress={state === SaveButton.States.SAVING}
        color={color}
        onClick={state === SaveButton.States.WAITING ? onClick : null}
        value={value}
        disabled={state === SaveButton.States.WAITING ? disabled : false}
        {...buttonProps}
      />
    </span>
  );
};

SaveButton.States = keyMirror(['SAVING', 'SUCCEEDED', 'FAILED']);