office-ui-fabric-react/lib/components/ColorPicker/ColorSlider/ColorSlider.base.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { classNamesFunction, initializeComponentRef, EventGroup, KeyCodes, getWindow, warnDeprecations } from '../../../Utilities';
import { clamp } from '../../../utilities/color/clamp';
var getClassNames = classNamesFunction();
/**
 * {@docCategory ColorPicker}
 */
var ColorSliderBase = /** @class */ (function (_super) {
    tslib_1.__extends(ColorSliderBase, _super);
    function ColorSliderBase(props) {
        var _this = _super.call(this, props) || this;
        _this._root = React.createRef();
        _this._onKeyDown = function (ev) {
            var currentValue = _this.value;
            var _a = _this.props, minValue = _a.minValue, maxValue = _a.maxValue;
            var increment = ev.shiftKey ? 10 : 1;
            // Intentionally DO NOT flip the color picker in RTL: its orientation is not very meaningful,
            // and getting all the math and styles flipped correctly is tricky
            switch (ev.which) {
                case KeyCodes.left: {
                    currentValue -= increment;
                    break;
                }
                case KeyCodes.right: {
                    currentValue += increment;
                    break;
                }
                case KeyCodes.home: {
                    currentValue = minValue;
                    break;
                }
                case KeyCodes.end: {
                    currentValue = maxValue;
                    break;
                }
                default: {
                    return;
                }
            }
            _this._updateValue(ev, clamp(currentValue, maxValue, minValue));
        };
        _this._onMouseDown = function (ev) {
            var win = getWindow(_this);
            _this._events.on(win, 'mousemove', _this._onMouseMove, true);
            _this._events.on(win, 'mouseup', _this._onMouseUp, true);
            _this._onMouseMove(ev);
        };
        _this._onMouseMove = function (ev) {
            if (!_this._root.current) {
                return;
            }
            var _a = _this.props, minValue = _a.minValue, maxValue = _a.maxValue;
            var rectSize = _this._root.current.getBoundingClientRect();
            var currentPercentage = (ev.clientX - rectSize.left) / rectSize.width;
            var newValue = clamp(Math.round(currentPercentage * maxValue), maxValue, minValue);
            _this._updateValue(ev, newValue);
        };
        _this._onMouseUp = function () {
            _this._events.off();
        };
        initializeComponentRef(_this);
        _this._events = new EventGroup(_this);
        warnDeprecations('ColorSlider', props, {
            thumbColor: 'styles.sliderThumb',
            overlayStyle: 'overlayColor'
        });
        _this.state = {
            currentValue: props.value || 0
        };
        return _this;
    }
    Object.defineProperty(ColorSliderBase.prototype, "value", {
        get: function () {
            return this.state.currentValue;
        },
        enumerable: true,
        configurable: true
    });
    ColorSliderBase.prototype.componentDidUpdate = function (prevProps, prevState) {
        // if props changed (as opposed to a state update), set the value
        // TODO: switch to strict controlled pattern instead
        if (prevProps !== this.props && this.props.value !== undefined) {
            this.setState({ currentValue: this.props.value });
        }
    };
    ColorSliderBase.prototype.componentWillUnmount = function () {
        this._events.dispose();
    };
    ColorSliderBase.prototype.render = function () {
        var _a = this.props, isAlpha = _a.isAlpha, minValue = _a.minValue, maxValue = _a.maxValue, overlayStyle = _a.overlayStyle, overlayColor = _a.overlayColor, theme = _a.theme, className = _a.className, styles = _a.styles;
        var _b = this.props.ariaLabel, ariaLabel = _b === void 0 ? isAlpha ? 'Alpha' : 'Hue' : _b;
        var currentValue = this.value;
        var classNames = getClassNames(styles, {
            theme: theme,
            className: className,
            isAlpha: isAlpha
        });
        var currentPercentage = (100 * (currentValue - minValue)) / (maxValue - minValue);
        return (React.createElement("div", { ref: this._root, className: classNames.root, tabIndex: 0, onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, role: "slider", "aria-valuenow": currentValue, "aria-valuetext": String(currentValue), "aria-valuemin": minValue, "aria-valuemax": maxValue, "aria-label": ariaLabel, "data-is-focusable": true },
            !!(overlayStyle || overlayColor) && (React.createElement("div", { className: classNames.sliderOverlay, 
                // this isn't included in getStyles because it may change frequently
                style: overlayStyle || { background: "linear-gradient(to right, transparent 0, #" + overlayColor + " 100%)" } })),
            React.createElement("div", { className: classNames.sliderThumb, style: { left: currentPercentage + '%' } })));
    };
    ColorSliderBase.prototype._updateValue = function (ev, newValue) {
        if (newValue === this.value) {
            return;
        }
        var onChange = this.props.onChange;
        if (onChange) {
            onChange(ev, newValue);
        }
        if (!ev.defaultPrevented) {
            this.setState({
                currentValue: newValue
            });
            ev.preventDefault();
        }
    };
    ColorSliderBase.defaultProps = {
        minValue: 0,
        maxValue: 100,
        value: 0
    };
    return ColorSliderBase;
}(React.Component));
export { ColorSliderBase };
//# sourceMappingURL=ColorSlider.base.js.map