@wordpress/components/build/color-picker/saturation.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Saturation = void 0;

var _element = require("@wordpress/element");

var _lodash = require("lodash");

var _i18n = require("@wordpress/i18n");

var _keycodes = require("@wordpress/keycodes");

var _compose = require("@wordpress/compose");

var _utils = require("./utils");

var _button = _interopRequireDefault(require("../button"));

var _keyboardShortcuts = _interopRequireDefault(require("../keyboard-shortcuts"));

var _visuallyHidden = _interopRequireDefault(require("../visually-hidden"));

/**
 * Parts of this source were derived and modified from react-color,
 * released under the MIT license.
 *
 * https://github.com/casesandberg/react-color/
 *
 * Copyright (c) 2015 Case Sandberg
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
class Saturation extends _element.Component {
  constructor(props) {
    super(props);
    this.throttle = (0, _lodash.throttle)((fn, data, e) => {
      fn(data, e);
    }, 50);
    this.container = (0, _element.createRef)();
    this.saturate = this.saturate.bind(this);
    this.brighten = this.brighten.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);
  }

  componentWillUnmount() {
    this.throttle.cancel();
    this.unbindEventListeners();
  }

  saturate(amount = 0.01) {
    const {
      hsv,
      onChange = _lodash.noop
    } = this.props;
    const intSaturation = (0, _lodash.clamp)(hsv.s + Math.round(amount * 100), 0, 100);
    const change = {
      h: hsv.h,
      s: intSaturation,
      v: hsv.v,
      a: hsv.a,
      source: 'rgb'
    };
    onChange(change);
  }

  brighten(amount = 0.01) {
    const {
      hsv,
      onChange = _lodash.noop
    } = this.props;
    const intValue = (0, _lodash.clamp)(hsv.v + Math.round(amount * 100), 0, 100);
    const change = {
      h: hsv.h,
      s: hsv.s,
      v: intValue,
      a: hsv.a,
      source: 'rgb'
    };
    onChange(change);
  }

  handleChange(e) {
    const {
      onChange = _lodash.noop
    } = this.props;
    const change = (0, _utils.calculateSaturationChange)(e, this.props, this.container.current);
    this.throttle(onChange, change, e);
  }

  handleMouseDown(e) {
    this.handleChange(e);
    window.addEventListener('mousemove', this.handleChange);
    window.addEventListener('mouseup', this.handleMouseUp);
  }

  handleMouseUp() {
    this.unbindEventListeners();
  }

  preventKeyEvents(event) {
    if (event.keyCode === _keycodes.TAB) {
      return;
    }

    event.preventDefault();
  }

  unbindEventListeners() {
    window.removeEventListener('mousemove', this.handleChange);
    window.removeEventListener('mouseup', this.handleMouseUp);
  }

  render() {
    const {
      hsv,
      hsl,
      instanceId
    } = this.props;
    const pointerLocation = {
      top: `${-hsv.v + 100}%`,
      left: `${hsv.s}%`
    };
    const shortcuts = {
      up: () => this.brighten(),
      'shift+up': () => this.brighten(0.1),
      pageup: () => this.brighten(1),
      down: () => this.brighten(-0.01),
      'shift+down': () => this.brighten(-0.1),
      pagedown: () => this.brighten(-1),
      right: () => this.saturate(),
      'shift+right': () => this.saturate(0.1),
      end: () => this.saturate(1),
      left: () => this.saturate(-0.01),
      'shift+left': () => this.saturate(-0.1),
      home: () => this.saturate(-1)
    };
    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

    return (0, _element.createElement)(_keyboardShortcuts.default, {
      shortcuts: shortcuts
    }, (0, _element.createElement)("div", {
      style: {
        background: `hsl(${hsl.h},100%, 50%)`
      },
      className: "components-color-picker__saturation-color",
      ref: this.container,
      onMouseDown: this.handleMouseDown,
      onTouchMove: this.handleChange,
      onTouchStart: this.handleChange,
      role: "application"
    }, (0, _element.createElement)("div", {
      className: "components-color-picker__saturation-white"
    }), (0, _element.createElement)("div", {
      className: "components-color-picker__saturation-black"
    }), (0, _element.createElement)(_button.default, {
      "aria-label": (0, _i18n.__)('Choose a shade'),
      "aria-describedby": `color-picker-saturation-${instanceId}`,
      className: "components-color-picker__saturation-pointer",
      style: pointerLocation,
      onKeyDown: this.preventKeyEvents
    }), (0, _element.createElement)(_visuallyHidden.default, {
      id: `color-picker-saturation-${instanceId}`
    }, (0, _i18n.__)('Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.'))));
    /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
  }

}

exports.Saturation = Saturation;

var _default = (0, _compose.compose)(_compose.pure, _compose.withInstanceId)(Saturation);

exports.default = _default;
//# sourceMappingURL=saturation.js.map