How to use the recompose.withHandlers function in recompose

// conditional functions here:
const nullConditionFn = (props) => !props
const showDocPreviewConditionFn = (props) => props.preview || props.previewOnly

export default compose(
  withRouter,
  withMaybe(nullConditionFn),
  withState('numPages', 'setNumPages', null),
  withState('pageNumber', 'setPageNumber', 1),
  withState('preview', 'setPreview', false),
  withPropsOnChange([ 'value' ], ({ value, setPreview }) => {
    if (value) {
      setPreview(true)
    }
  }),
  withHandlers({
    togglePreview: ({ preview, setPreview }) => (e) => {
      e.preventDefault()
      e.stopPropagation()

      setPreview(!preview)
    },
    customTextRenderer: (props) => (item) => {
      console.log('customTextRenderer', item)
    },
    handleTextLoaded: ({ onTextLoaded }) => () => {
      if (typeof onTextLoaded === 'function') {
        onTextLoaded()
      }
    },
    handlePage: ({ setPageNumber, numPages }) => (page) => {
      if (page > 0 && page <= numPages) {

name: 'attach-money',
      size: dimensions.iconSize,
    },
  }),


  withProps({ icons }),
  withProps(({ navigation }) => ({ category: getParam('category')(navigation) })),
  withProps(({ category, createCategory, updateCategory }) => ({
    submit: category ? updateCategory : createCategory,
  })),
  withState('icon', 'setIcon', accountProp('icon', icons[0])),
  withState('name', 'setName', accountProp('name')),
  withState('type', 'setType', accountProp('type', null)),
  withState('isPickerVisible', 'setPickerVisible', false),
  withHandlers({
    togglePicker: ({ isPickerVisible, setPickerVisible }) => () => {
      setPickerVisible(!isPickerVisible);
    },
    onChangeIcon: ({ setPickerVisible, setIcon }) => (value) => {
      setIcon(value);
      setPickerVisible(false);
    },
    onSubmit: ({
      submit, navigation, category, onClose, ...props
    }) => () => {
      Keyboard.dismiss();
      const editedProps = R.pick(['name', 'icon', 'type'], props);
      const propsToSubmit = category ? { id: category.id, ...editedProps } : editedProps;
      submit(propsToSubmit);
      navigation.goBack(null);
    },

import Spinner from 'ui/components/Spinner';
import { loggedInUserId } from 'ui/redux/modules/auth';
import { withSchema } from 'ui/utils/hocs';
import styles from './styles.css';

const schema = 'export';

const enhance = compose(
  withStyles(styles),
  withSchema(schema),
  withState('activeTab', 'setActiveTab', 0),
  withState('selectedExportId', 'setSelectedExportId'),
  connect(state => ({
    userId: loggedInUserId(state)
  })),
  withHandlers({
    onAddExport: ({ addModel, userId, setSelectedExportId }) => async () => {
      const { model } = await addModel({ props: { owner: userId, name: 'New Export' } });
      setSelectedExportId(model.get('_id'));
    },
    setSelectedExport: ({ setSelectedExportId }) => (model) => {
      if (model) return setSelectedExportId(model.get('_id'));
      setSelectedExportId(null);
    }
  }),
  withProps(({ models, selectedExportId }) => {
    if (selectedExportId) return { selectedExportId };
    if (models.size > 0) {
      return {
        selectedExportId: models.first().get('_id')
      };
    }

}),
  withProps((props) => ({
    isModal: props.previousChildren && props.shouldBeModal(props.location)
  })),
  lifecycle({
    componentWillReceiveProps: function (nextProps) {
      if (nextProps.location.key !== this.props.location.key && this.props.shouldBeModal(nextProps.location)) {
        if (!this.props.isModal) {
          this.props.setPreviousChildren(this.props.children)
          this.props.setPreviousPath(this.props.location.pathname)
        }
      }
    }
  }),
  withRouter,
  withHandlers({
    closeModal: ({router, previousPath}) => () => router.push(previousPath)
  }),
  withContext(
    modalContext,
    (props) => {
      return ({
        isModal: props.isModal,
        previousChildren: props.previousChildren,
        closeModal: props.closeModal
      })
    }
  )
)

}

    if (prevProps.playHeadPercent !== this.props.playHeadPercent) {
      this.props.updateMediaTimeAfterSeeking();
    }

    this.props.updateMediaPlayState();
    this.props.updateOtherMediaValues();
  },
};

export default compose(
  connectWithId(mapStateToProps, {
    setOption,
  }),
  withHandlers(handlers),
  setLifecycle(lifecycle),
)(Media);

return {
        piece,
        gamePhase: state.game.phase,
        belowPieceLimit: ownedPieceSelector(state).length < state.localPlayer.level,
        currentSelectedPiece: state.game.selectedPiece
    };
};

const mapDispatchToProps: MapDispatchToProps = (dispatch, { type, position }) => ({
    onDropPiece: (piece: Models.Piece) => dispatch(BoardActions.pieceMoved(piece, position, type)),
    onSelectPiece: (piece: Models.Piece) => dispatch(selectPiece(piece))
});

const Tile = compose(
    connect(mapStateToProps, mapDispatchToProps),
    withHandlers({
        canDropPiece: props => {
            return (piece: Piece) => {
                return canDropPiece(
                    piece,
                    props.position,
                    props.piece === null,
                    props.gamePhase,
                    props.belowPieceLimit
                );
            }
        }
    }),
    tileDropTarget
)(TileUnconnected);

export {

value={icon.color}
                        updateValue={updateColor}
                        updatePreview={updateColorPreview}
                    />
                
            
        
    );
};

export default compose(
    connect(
        state => ({ element: getActiveElement(state) }),
        { updateElement }
    ),
    withHandlers({
        updateSettings: ({ updateElement, element }) => {
            const historyUpdated = {};

            return (name, value, history = true) => {
                const attrKey = `data.icon.${name}`;

                let newElement = set(element, attrKey, value);
                const { id, width, color } = get(newElement, "data.icon");
                newElement = set(newElement, "data.icon.svg", getSvg(id, { width, color }));

                if (!history) {
                    updateElement({ element: newElement, history });
                    return;
                }

                if (historyUpdated[name] !== value) {

{t('cancel')}
          
          <button type="submit">
            {t('submit')}
          </button>
        
      
    
    <footer>
  
);

export default compose(
  pure,
  withState('isOpenTermOfUse', 'setIsOpenTermOfUse', false),
  withHandlers({
    openTermOfUse: props =&gt; () =&gt; props.setIsOpenTermOfUse(!props.isOpenTermOfUse),
    onKeyDown: props =&gt; (e) =&gt; {
      if (e.key === 'Enter') return e.preventDefault();
    },
  }),
  withGetMessages(messages, 'Signup'),
)(Signup);
</footer>

}
}

Editor.childContextTypes = {
  blueprintPortalClassName: PropTypes.string
};

export default compose(
  connectToEditor(({ panelsShown, versionHistory, sequenceData = {} }) => {
    return {
      panelsShown,
      versionHistory,
      sequenceData
    };
  }),
  withHandlers({ handleSave, importSequenceFromFile })
)(Editor);

import DateInput from './DateInput'

export default compose(
  withState('type', 'changeType', ({ name }) => {
    if (endsWith(name, ['_date', '_on'])) return 'date'
    if (endsWith(name, ['_time', '_at'])) return 'time'
    return 'datetime'
  }),
  withProps(() => ({
    format: {
      date: 'MM/DD/YYYY',
      time: 'hh:mm A',
      datetime: 'MM/DD/YYYY hh:mm A'
    }
  })),
  withHandlers({
    onTypeChange: ({ changeType }) => (type) => changeType(type.value),
    onDateTimeChange: ({ onChange, format, type }) => (event) => onChange({ target: { value: event.format(format[type]) } })
  }),
  withPropsOnChange([ 'type' ], ({ type }) => {
    if (type === 'date') return { component: DateInput }
    if (type === 'time') return { component: TimeInput }
    if (type === 'datetime') return { component: DateTimeInput }
  })
)(DateTimeSelect)