import * as React from 'react';
import { SpinButton } from '@fluentui/react/lib/SpinButton';
var suffix = ' cm';
var min = 0;
var max = 100;
// By default the field grows to fit available width. Constrain the width instead.
var styles = { spinButtonWrapper: { width: 75 } };
/** Remove the suffix or any other text after the numbers, or return undefined if not a number */
var getNumericPart = function (value) {
    var valueRegex = /^(\d+(\.\d+)?).*/;
    if (valueRegex.test(value)) {
        var numericValue = Number(value.replace(valueRegex, '$1'));
        return isNaN(numericValue) ? undefined : numericValue;
    }
    return undefined;
};
/** Increment the value (or return nothing to keep the previous value if invalid) */
var onIncrement = function (value, event) {
    var numericValue = getNumericPart(value);
    if (numericValue !== undefined) {
        return String(Math.min(numericValue + 2, max)) + suffix;
    }
};
/** Decrement the value (or return nothing to keep the previous value if invalid) */
var onDecrement = function (value, event) {
    var numericValue = getNumericPart(value);
    if (numericValue !== undefined) {
        return String(Math.max(numericValue - 2, min)) + suffix;
    }
};
/**
 * Clamp the value within the valid range (or return nothing to keep the previous value
 * if there's not valid numeric input)
 */
var onValidate = function (value, event) {
    var numericValue = getNumericPart(value);
    if (numericValue !== undefined) {
        numericValue = Math.min(numericValue, max);
        numericValue = Math.max(numericValue, min);
        return String(numericValue) + suffix;
    }
};
/** This will be called after each change */
var onChange = function (event, value) {
    console.log('Value changed to ' + value);
};
export var SpinButtonSuffixExample = function () {
    return (React.createElement("div", null,
        "This SpinButton includes a suffix in the value and defines custom ",
        React.createElement("code", null, "onIncrement"),
        ",",
        ' ',
        React.createElement("code", null, "onDecrement"),
        ", and ",
        React.createElement("code", null, "onValidate"),
        " handlers which work with the suffix. It also has an",
        ' ',
        React.createElement("code", null, "onChange"),
        " handler.)",
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement(SpinButton, { label: "With suffix", defaultValue: '7' + suffix, min: min, max: max, onValidate: onValidate, onIncrement: onIncrement, onDecrement: onDecrement, onChange: onChange, incrementButtonAriaLabel: "Increase value by 2", decrementButtonAriaLabel: "Decrease value by 2", styles: styles })));
};
//# sourceMappingURL=SpinButton.Suffix.Example.js.map