@vimeo/iris/utils/hooks/useCharacterCount/useCharacterCount.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../../tslib.es6-3ec409b7.js');
var React = require('react');
var utils_hooks_useCharacterCount_useCharacterCount_state = require('./useCharacterCount.state.js');

/**
 * Based on withCharacterCount, this provides handlers for a character count message to create a controlled component.
 * Helpful to use in conjuction with custom inputs that need more control of input messages
 */
function useCharacterCount(_a) {
    var _b = _a.maxCharacters, maxCharacters = _b === void 0 ? 10 : _b, _c = _a.warningThreshold, warningThreshold = _c === void 0 ? 5 : _c;
    var _d = tslib_es6.__read(React.useReducer(utils_hooks_useCharacterCount_useCharacterCount_state.reducer, {
        remainingCharacters: maxCharacters,
    }), 2), state = _d[0], dispatch = _d[1];
    function handleError() {
        dispatch({
            type: 'SET_ERROR',
        });
    }
    function handleWarn() {
        dispatch({
            type: 'SET_WARNING',
        });
    }
    var clean = React.useCallback(function () {
        dispatch({
            type: 'RESET_STATUS',
        });
    }, []);
    var handleChange = React.useCallback(function (value) {
        var remaining = maxCharacters - value.length;
        if (remaining <= warningThreshold && remaining > 0)
            handleWarn();
        else if (remaining <= 0)
            handleError();
        else
            clean();
        dispatch({
            type: 'SET_REMAINING_CHARACTERS',
            payload: remaining,
        });
    }, [clean, maxCharacters, warningThreshold]);
    return {
        state: state,
        dispatch: dispatch,
        handleChange: handleChange,
        clean: clean,
    };
}

exports.useCharacterCount = useCharacterCount;