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

UI components for WordPress.

"use strict";

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

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

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

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

var _lodash = require("lodash");

var _a11y = require("@wordpress/a11y");

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

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

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

var _icons = require("@wordpress/icons");

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

var _textControl = _interopRequireDefault(require("../text-control"));

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/* Wrapper for TextControl, only used to handle intermediate state while typing. */
class Input extends _element.Component {
  constructor() {
    super(...arguments);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  handleBlur() {
    const {
      value,
      valueKey,
      onChange,
      source
    } = this.props;
    onChange({
      source,
      state: 'commit',
      value,
      valueKey
    });
  }

  handleChange(value) {
    const {
      valueKey,
      onChange,
      source
    } = this.props;

    if (value.length > 4 && (0, _utils.isValidHex)(value)) {
      onChange({
        source,
        state: 'commit',
        value,
        valueKey
      });
    } else {
      onChange({
        source,
        state: 'draft',
        value,
        valueKey
      });
    }
  }

  handleKeyDown({
    keyCode
  }) {
    if (keyCode !== _keycodes.ENTER && keyCode !== _keycodes.UP && keyCode !== _keycodes.DOWN) {
      return;
    }

    const {
      value,
      valueKey,
      onChange,
      source
    } = this.props;
    onChange({
      source,
      state: 'commit',
      value,
      valueKey
    });
  }

  render() {
    const {
      label,
      value,
      ...props
    } = this.props;
    return (0, _element.createElement)(_textControl.default, (0, _extends2.default)({
      className: "components-color-picker__inputs-field",
      label: label,
      value: value,
      onChange: newValue => this.handleChange(newValue),
      onBlur: this.handleBlur,
      onKeyDown: this.handleKeyDown
    }, (0, _lodash.omit)(props, ['onChange', 'valueKey', 'source'])));
  }

}

exports.Input = Input;
const PureButton = (0, _compose.pure)(_button.default);

class Inputs extends _element.Component {
  constructor({
    hsl
  }) {
    super(...arguments);
    const view = hsl.a === 1 ? 'hex' : 'rgb';
    this.state = {
      view
    };
    this.toggleViews = this.toggleViews.bind(this);
    this.resetDraftValues = this.resetDraftValues.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.normalizeValue = this.normalizeValue.bind(this);
  }

  static getDerivedStateFromProps(props, state) {
    if (props.hsl.a !== 1 && state.view === 'hex') {
      return {
        view: 'rgb'
      };
    }

    return null;
  }

  toggleViews() {
    if (this.state.view === 'hex') {
      this.setState({
        view: 'rgb'
      }, this.resetDraftValues);
      (0, _a11y.speak)((0, _i18n.__)('RGB mode active'));
    } else if (this.state.view === 'rgb') {
      this.setState({
        view: 'hsl'
      }, this.resetDraftValues);
      (0, _a11y.speak)((0, _i18n.__)('Hue/saturation/lightness mode active'));
    } else if (this.state.view === 'hsl') {
      if (this.props.hsl.a === 1) {
        this.setState({
          view: 'hex'
        }, this.resetDraftValues);
        (0, _a11y.speak)((0, _i18n.__)('Hex color mode active'));
      } else {
        this.setState({
          view: 'rgb'
        }, this.resetDraftValues);
        (0, _a11y.speak)((0, _i18n.__)('RGB mode active'));
      }
    }
  }

  resetDraftValues() {
    return this.props.onChange({
      state: 'reset'
    });
  }

  normalizeValue(valueKey, value) {
    if (valueKey !== 'a') {
      return value;
    }

    if (value < 0) {
      return 0;
    } else if (value > 1) {
      return 1;
    }

    return Math.round(value * 100) / 100;
  }

  handleChange({
    source,
    state,
    value,
    valueKey
  }) {
    this.props.onChange({
      source,
      state,
      valueKey,
      value: this.normalizeValue(valueKey, value)
    });
  }

  renderFields() {
    const {
      disableAlpha = false
    } = this.props;

    if (this.state.view === 'hex') {
      return (0, _element.createElement)("div", {
        className: "components-color-picker__inputs-fields"
      }, (0, _element.createElement)(Input, {
        source: this.state.view,
        label: (0, _i18n.__)('Color value in hexadecimal'),
        valueKey: "hex",
        value: this.props.hex,
        onChange: this.handleChange
      }));
    } else if (this.state.view === 'rgb') {
      const legend = disableAlpha ? (0, _i18n.__)('Color value in RGB') : (0, _i18n.__)('Color value in RGBA');
      return (0, _element.createElement)("fieldset", null, (0, _element.createElement)(_visuallyHidden.default, {
        as: "legend"
      }, legend), (0, _element.createElement)("div", {
        className: "components-color-picker__inputs-fields"
      }, (0, _element.createElement)(Input, {
        source: this.state.view,
        label: "r",
        valueKey: "r",
        value: this.props.rgb.r,
        onChange: this.handleChange,
        type: "number",
        min: "0",
        max: "255"
      }), (0, _element.createElement)(Input, {
        source: this.state.view,
        label: "g",
        valueKey: "g",
        value: this.props.rgb.g,
        onChange: this.handleChange,
        type: "number",
        min: "0",
        max: "255"
      }), (0, _element.createElement)(Input, {
        source: this.state.view,
        label: "b",
        valueKey: "b",
        value: this.props.rgb.b,
        onChange: this.handleChange,
        type: "number",
        min: "0",
        max: "255"
      }), disableAlpha ? null : (0, _element.createElement)(Input, {
        source: this.state.view,
        label: "a",
        valueKey: "a",
        value: this.props.rgb.a,
        onChange: this.handleChange,
        type: "number",
        min: "0",
        max: "1",
        step: "0.01"
      })));
    } else if (this.state.view === 'hsl') {
      const legend = disableAlpha ? (0, _i18n.__)('Color value in HSL') : (0, _i18n.__)('Color value in HSLA');
      return (0, _element.createElement)("fieldset", null, (0, _element.createElement)(_visuallyHidden.default, {
        as: "legend"
      }, legend), (0, _element.createElement)("div", {
        className: "components-color-picker__inputs-fields"
      }, (0, _element.createElement)(Input, {
        source: this.state.view,
        label: "h",
        valueKey: "h",
        value: this.props.hsl.h,
        onChange: this.handleChange,
        type: "number",
        min: "0",
        max: "359"
      }), (0, _element.createElement)(Input, {
        source: this.state.view,
        label: "s",
        valueKey: "s",
        value: this.props.hsl.s,
        onChange: this.handleChange,
        type: "number",
        min: "0",
        max: "100"
      }), (0, _element.createElement)(Input, {
        source: this.state.view,
        label: "l",
        valueKey: "l",
        value: this.props.hsl.l,
        onChange: this.handleChange,
        type: "number",
        min: "0",
        max: "100"
      }), disableAlpha ? null : (0, _element.createElement)(Input, {
        source: this.state.view,
        label: "a",
        valueKey: "a",
        value: this.props.hsl.a,
        onChange: this.handleChange,
        type: "number",
        min: "0",
        max: "1",
        step: "0.05"
      })));
    }
  }

  render() {
    return (0, _element.createElement)("div", {
      className: "components-color-picker__inputs-wrapper"
    }, this.renderFields(), (0, _element.createElement)("div", {
      className: "components-color-picker__inputs-toggle-wrapper"
    }, (0, _element.createElement)(PureButton, {
      className: "components-color-picker__inputs-toggle",
      icon: _icons.chevronDown,
      label: (0, _i18n.__)('Change color format'),
      onClick: this.toggleViews
    })));
  }

}

exports.Inputs = Inputs;
var _default = Inputs;
exports.default = _default;
//# sourceMappingURL=inputs.js.map