ldx-widgets/docs/components/confirm_save.coffee.md

widgets

[<< Component Index](../README.md)
#  [ConfirmSave](https://github.com/tmfi/ldx-web-utilities/blob/develop/src/components/confirm_save.coffee)
  This component is intended to be used inside of a modal or popover, but could be used other places to confirm a save event was successful.
  Tips for using this..
  - It is absolutely positioned w/ all zeroes, to add to the top level of the render tree
  - Create a local 'saveState' state on your component, and default it to null
  - render like this:

  ```coffee
  ConfirmSave {
    key: 'confirm'
    done: @close
    saveState: @state.saveState
  } if @state.saveState?
  ```

  This way, when you trigger the save, also call @setState({saveState: 'pending'})
  Then pass a call back to the save action, which just calls @setState({saveState: 'complete'})

### saveState
**`String`**
 _Required_

  This can be either 'pending' or 'complete' or 'failed'  
    - When 'pending', a spinner shows  
    - When 'complete', a green check mark flashes before calling the done callback  
    - When 'warning', a yellow exclamation mark flashes before calling the done callback  
    - When 'failed', a red x flashes before calling the fail callback  

---
### saveMessage
**`String`**
 _Required_

  A message that will be displayed alongside the saveState imagery  

---
### longSaveMessage
**`Boolean`**
 _Optional_

  Will improve formatting for long error messages  

---
### dismissBtnText
**`String`**
 _Optional_

  Text that will be displayed as the dismiss button  

---
### done
**`Function`**
 _Required_

  This method will be called animationDuration ms after the saveState hits complete  
  It will usually be a method that sets the parent's saveState back to null, which will remove this widget from the DOM, and will usually be a method that also performs some other post save action  

---
### fail
**`Function`**
 _Optional_

  This method will be called animationDuration ms after the saveState hits failed  
  It is REQUIRED if there is any change saveState will ever hit 'failed', otherwise the component will never hide after a failed save  
  It will usually be a method that sets the parent's saveState back to null, which will remove this widget from the DOM  

---
### scaleCheckmark
**`Number`**
 _Optional_

  percent to scale the confirm check and spinner  

---
### vTranslateCheckmark
 _Optional_

  number of pixels to move the checkmark up above the middle of the container  

---
### animationDuration
 _Optional_

  ms over which the check scalling takes place  

---
### displayProgressBar
**`Boolean`**
 _Optional_

  Defaults to no, whether or not the confirm/save show the progress bar instead of the spinner  

---
### uploadProgress
**`Number`**
 _Optional_

  Progress of a file being uploaded