@wordpress/components 18.0.0 → 19.0.3

package/build/color-picker/inputs.js

@@ -1,345 +0,0 @@
-"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 = 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.VisuallyHidden, {
-        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.VisuallyHidden, {
-        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

package/build/color-picker/inputs.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/inputs.js"],"names":["Input","Component","constructor","arguments","handleBlur","bind","handleChange","handleKeyDown","value","valueKey","onChange","source","props","state","length","keyCode","ENTER","UP","DOWN","render","label","newValue","PureButton","Button","Inputs","hsl","view","a","toggleViews","resetDraftValues","normalizeValue","getDerivedStateFromProps","setState","Math","round","renderFields","disableAlpha","hex","legend","rgb","r","g","b","h","s","l","chevronDown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { __ } from '@wordpress/i18n';\nimport { Component } from '@wordpress/element';\nimport { DOWN, ENTER, UP } from '@wordpress/keycodes';\nimport { pure } from '@wordpress/compose';\nimport { chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport TextControl from '../text-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { isValidHex } from './utils';\n\n/* Wrapper for TextControl, only used to handle intermediate state while typing. */\nexport class Input extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\t\tthis.handleBlur = this.handleBlur.bind( this );\n\t\tthis.handleChange = this.handleChange.bind( this );\n\t\tthis.handleKeyDown = this.handleKeyDown.bind( this );\n\t}\n\n\thandleBlur() {\n\t\tconst { value, valueKey, onChange, source } = this.props;\n\t\tonChange( {\n\t\t\tsource,\n\t\t\tstate: 'commit',\n\t\t\tvalue,\n\t\t\tvalueKey,\n\t\t} );\n\t}\n\n\thandleChange( value ) {\n\t\tconst { valueKey, onChange, source } = this.props;\n\t\tif ( value.length > 4 && isValidHex( value ) ) {\n\t\t\tonChange( {\n\t\t\t\tsource,\n\t\t\t\tstate: 'commit',\n\t\t\t\tvalue,\n\t\t\t\tvalueKey,\n\t\t\t} );\n\t\t} else {\n\t\t\tonChange( {\n\t\t\t\tsource,\n\t\t\t\tstate: 'draft',\n\t\t\t\tvalue,\n\t\t\t\tvalueKey,\n\t\t\t} );\n\t\t}\n\t}\n\n\thandleKeyDown( { keyCode } ) {\n\t\tif ( keyCode !== ENTER && keyCode !== UP && keyCode !== DOWN ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { value, valueKey, onChange, source } = this.props;\n\t\tonChange( {\n\t\t\tsource,\n\t\t\tstate: 'commit',\n\t\t\tvalue,\n\t\t\tvalueKey,\n\t\t} );\n\t}\n\n\trender() {\n\t\tconst { label, value, ...props } = this.props;\n\t\treturn (\n\t\t\t<TextControl\n\t\t\t\tclassName=\"components-color-picker__inputs-field\"\n\t\t\t\tlabel={ label }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ ( newValue ) => this.handleChange( newValue ) }\n\t\t\t\tonBlur={ this.handleBlur }\n\t\t\t\tonKeyDown={ this.handleKeyDown }\n\t\t\t\t{ ...omit( props, [ 'onChange', 'valueKey', 'source' ] ) }\n\t\t\t/>\n\t\t);\n\t}\n}\n\nconst PureButton = pure( Button );\n\nexport class Inputs extends Component {\n\tconstructor( { hsl } ) {\n\t\tsuper( ...arguments );\n\n\t\tconst view = hsl.a === 1 ? 'hex' : 'rgb';\n\t\tthis.state = { view };\n\n\t\tthis.toggleViews = this.toggleViews.bind( this );\n\t\tthis.resetDraftValues = this.resetDraftValues.bind( this );\n\t\tthis.handleChange = this.handleChange.bind( this );\n\t\tthis.normalizeValue = this.normalizeValue.bind( this );\n\t}\n\n\tstatic getDerivedStateFromProps( props, state ) {\n\t\tif ( props.hsl.a !== 1 && state.view === 'hex' ) {\n\t\t\treturn { view: 'rgb' };\n\t\t}\n\t\treturn null;\n\t}\n\n\ttoggleViews() {\n\t\tif ( this.state.view === 'hex' ) {\n\t\t\tthis.setState( { view: 'rgb' }, this.resetDraftValues );\n\n\t\t\tspeak( __( 'RGB mode active' ) );\n\t\t} else if ( this.state.view === 'rgb' ) {\n\t\t\tthis.setState( { view: 'hsl' }, this.resetDraftValues );\n\n\t\t\tspeak( __( 'Hue/saturation/lightness mode active' ) );\n\t\t} else if ( this.state.view === 'hsl' ) {\n\t\t\tif ( this.props.hsl.a === 1 ) {\n\t\t\t\tthis.setState( { view: 'hex' }, this.resetDraftValues );\n\n\t\t\t\tspeak( __( 'Hex color mode active' ) );\n\t\t\t} else {\n\t\t\t\tthis.setState( { view: 'rgb' }, this.resetDraftValues );\n\n\t\t\t\tspeak( __( 'RGB mode active' ) );\n\t\t\t}\n\t\t}\n\t}\n\n\tresetDraftValues() {\n\t\treturn this.props.onChange( {\n\t\t\tstate: 'reset',\n\t\t} );\n\t}\n\n\tnormalizeValue( valueKey, value ) {\n\t\tif ( valueKey !== 'a' ) {\n\t\t\treturn value;\n\t\t}\n\n\t\tif ( value < 0 ) {\n\t\t\treturn 0;\n\t\t} else if ( value > 1 ) {\n\t\t\treturn 1;\n\t\t}\n\t\treturn Math.round( value * 100 ) / 100;\n\t}\n\n\thandleChange( { source, state, value, valueKey } ) {\n\t\tthis.props.onChange( {\n\t\t\tsource,\n\t\t\tstate,\n\t\t\tvalueKey,\n\t\t\tvalue: this.normalizeValue( valueKey, value ),\n\t\t} );\n\t}\n\n\trenderFields() {\n\t\tconst { disableAlpha = false } = this.props;\n\t\tif ( this.state.view === 'hex' ) {\n\t\t\treturn (\n\t\t\t\t<div className=\"components-color-picker__inputs-fields\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\tlabel={ __( 'Color value in hexadecimal' ) }\n\t\t\t\t\t\tvalueKey=\"hex\"\n\t\t\t\t\t\tvalue={ this.props.hex }\n\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t);\n\t\t} else if ( this.state.view === 'rgb' ) {\n\t\t\tconst legend = disableAlpha\n\t\t\t\t? __( 'Color value in RGB' )\n\t\t\t\t: __( 'Color value in RGBA' );\n\t\t\treturn (\n\t\t\t\t<fieldset>\n\t\t\t\t\t<VisuallyHidden as=\"legend\">{ legend }</VisuallyHidden>\n\t\t\t\t\t<div className=\"components-color-picker__inputs-fields\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"r\"\n\t\t\t\t\t\t\tvalueKey=\"r\"\n\t\t\t\t\t\t\tvalue={ this.props.rgb.r }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"255\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"g\"\n\t\t\t\t\t\t\tvalueKey=\"g\"\n\t\t\t\t\t\t\tvalue={ this.props.rgb.g }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"255\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"b\"\n\t\t\t\t\t\t\tvalueKey=\"b\"\n\t\t\t\t\t\t\tvalue={ this.props.rgb.b }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"255\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ disableAlpha ? null : (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\t\tlabel=\"a\"\n\t\t\t\t\t\t\t\tvalueKey=\"a\"\n\t\t\t\t\t\t\t\tvalue={ this.props.rgb.a }\n\t\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\t\tmax=\"1\"\n\t\t\t\t\t\t\t\tstep=\"0.01\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t);\n\t\t} else if ( this.state.view === 'hsl' ) {\n\t\t\tconst legend = disableAlpha\n\t\t\t\t? __( 'Color value in HSL' )\n\t\t\t\t: __( 'Color value in HSLA' );\n\t\t\treturn (\n\t\t\t\t<fieldset>\n\t\t\t\t\t<VisuallyHidden as=\"legend\">{ legend }</VisuallyHidden>\n\t\t\t\t\t<div className=\"components-color-picker__inputs-fields\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"h\"\n\t\t\t\t\t\t\tvalueKey=\"h\"\n\t\t\t\t\t\t\tvalue={ this.props.hsl.h }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"359\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"s\"\n\t\t\t\t\t\t\tvalueKey=\"s\"\n\t\t\t\t\t\t\tvalue={ this.props.hsl.s }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"100\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"l\"\n\t\t\t\t\t\t\tvalueKey=\"l\"\n\t\t\t\t\t\t\tvalue={ this.props.hsl.l }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"100\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ disableAlpha ? null : (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\t\tlabel=\"a\"\n\t\t\t\t\t\t\t\tvalueKey=\"a\"\n\t\t\t\t\t\t\t\tvalue={ this.props.hsl.a }\n\t\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\t\tmax=\"1\"\n\t\t\t\t\t\t\t\tstep=\"0.05\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t);\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div className=\"components-color-picker__inputs-wrapper\">\n\t\t\t\t{ this.renderFields() }\n\t\t\t\t<div className=\"components-color-picker__inputs-toggle-wrapper\">\n\t\t\t\t\t<PureButton\n\t\t\t\t\t\tclassName=\"components-color-picker__inputs-toggle\"\n\t\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\t\tlabel={ __( 'Change color format' ) }\n\t\t\t\t\t\tonClick={ this.toggleViews }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default Inputs;\n"]}

package/build/color-picker/saturation.js

@@ -1,211 +0,0 @@
-"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 _visuallyHidden = 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);
-    this.handleKeyDown = this.handleKeyDown.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();
-  }
-
-  unbindEventListeners() {
-    window.removeEventListener('mousemove', this.handleChange);
-    window.removeEventListener('mouseup', this.handleMouseUp);
-  }
-
-  handleKeyDown(event) {
-    const {
-      keyCode,
-      shiftKey
-    } = event;
-    const shortcuts = {
-      [_keycodes.UP]: () => this.brighten(shiftKey ? 0.1 : 0.01),
-      [_keycodes.PAGEUP]: () => this.brighten(1),
-      [_keycodes.DOWN]: () => this.brighten(shiftKey ? -0.1 : -0.01),
-      [_keycodes.PAGEDOWN]: () => this.brighten(-1),
-      [_keycodes.RIGHT]: () => this.saturate(shiftKey ? 0.1 : 0.01),
-      [_keycodes.END]: () => this.saturate(1),
-      [_keycodes.LEFT]: () => this.saturate(shiftKey ? -0.1 : -0.01),
-      [_keycodes.HOME]: () => this.saturate(-1)
-    };
-
-    for (const code in shortcuts) {
-      if (code === String(keyCode)) {
-        shortcuts[keyCode]();
-      }
-    }
-
-    if (keyCode !== _keycodes.TAB) {
-      event.preventDefault();
-    }
-  }
-
-  render() {
-    const {
-      hsv,
-      hsl,
-      instanceId
-    } = this.props;
-    const pointerLocation = {
-      top: `${-hsv.v + 100}%`,
-      left: `${hsv.s}%`
-    };
-    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-
-    return (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.handleKeyDown
-    }), (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
-      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

package/build/color-picker/saturation.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/saturation.js"],"names":["Saturation","Component","constructor","props","throttle","fn","data","e","container","saturate","bind","brighten","handleChange","handleMouseDown","handleMouseUp","handleKeyDown","componentWillUnmount","cancel","unbindEventListeners","amount","hsv","onChange","noop","intSaturation","s","Math","round","change","h","v","a","source","intValue","current","window","addEventListener","removeEventListener","event","keyCode","shiftKey","shortcuts","UP","PAGEUP","DOWN","PAGEDOWN","RIGHT","END","LEFT","HOME","code","String","TAB","preventDefault","render","hsl","instanceId","pointerLocation","top","left","background","pure","withInstanceId"],"mappings":"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","sourcesContent":["/**\n * Parts of this source were derived and modified from react-color,\n * released under the MIT license.\n *\n * https://github.com/casesandberg/react-color/\n *\n * Copyright (c) 2015 Case Sandberg\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * External dependencies\n */\nimport { clamp, noop, throttle } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Component, createRef } from '@wordpress/element';\nimport {\n\tTAB,\n\tUP,\n\tDOWN,\n\tRIGHT,\n\tLEFT,\n\tPAGEUP,\n\tPAGEDOWN,\n\tHOME,\n\tEND,\n} from '@wordpress/keycodes';\nimport { compose, pure, withInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { calculateSaturationChange } from './utils';\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\n\nexport class Saturation extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\n\t\tthis.throttle = throttle( ( fn, data, e ) => {\n\t\t\tfn( data, e );\n\t\t}, 50 );\n\n\t\tthis.container = createRef();\n\t\tthis.saturate = this.saturate.bind( this );\n\t\tthis.brighten = this.brighten.bind( this );\n\t\tthis.handleChange = this.handleChange.bind( this );\n\t\tthis.handleMouseDown = this.handleMouseDown.bind( this );\n\t\tthis.handleMouseUp = this.handleMouseUp.bind( this );\n\t\tthis.handleKeyDown = this.handleKeyDown.bind( this );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.throttle.cancel();\n\t\tthis.unbindEventListeners();\n\t}\n\n\tsaturate( amount = 0.01 ) {\n\t\tconst { hsv, onChange = noop } = this.props;\n\t\tconst intSaturation = clamp(\n\t\t\thsv.s + Math.round( amount * 100 ),\n\t\t\t0,\n\t\t\t100\n\t\t);\n\t\tconst change = {\n\t\t\th: hsv.h,\n\t\t\ts: intSaturation,\n\t\t\tv: hsv.v,\n\t\t\ta: hsv.a,\n\t\t\tsource: 'rgb',\n\t\t};\n\n\t\tonChange( change );\n\t}\n\n\tbrighten( amount = 0.01 ) {\n\t\tconst { hsv, onChange = noop } = this.props;\n\t\tconst intValue = clamp( hsv.v + Math.round( amount * 100 ), 0, 100 );\n\t\tconst change = {\n\t\t\th: hsv.h,\n\t\t\ts: hsv.s,\n\t\t\tv: intValue,\n\t\t\ta: hsv.a,\n\t\t\tsource: 'rgb',\n\t\t};\n\n\t\tonChange( change );\n\t}\n\n\thandleChange( e ) {\n\t\tconst { onChange = noop } = this.props;\n\t\tconst change = calculateSaturationChange(\n\t\t\te,\n\t\t\tthis.props,\n\t\t\tthis.container.current\n\t\t);\n\t\tthis.throttle( onChange, change, e );\n\t}\n\n\thandleMouseDown( e ) {\n\t\tthis.handleChange( e );\n\t\twindow.addEventListener( 'mousemove', this.handleChange );\n\t\twindow.addEventListener( 'mouseup', this.handleMouseUp );\n\t}\n\n\thandleMouseUp() {\n\t\tthis.unbindEventListeners();\n\t}\n\n\tunbindEventListeners() {\n\t\twindow.removeEventListener( 'mousemove', this.handleChange );\n\t\twindow.removeEventListener( 'mouseup', this.handleMouseUp );\n\t}\n\n\thandleKeyDown( event ) {\n\t\tconst { keyCode, shiftKey } = event;\n\t\tconst shortcuts = {\n\t\t\t[ UP ]: () => this.brighten( shiftKey ? 0.1 : 0.01 ),\n\t\t\t[ PAGEUP ]: () => this.brighten( 1 ),\n\t\t\t[ DOWN ]: () => this.brighten( shiftKey ? -0.1 : -0.01 ),\n\t\t\t[ PAGEDOWN ]: () => this.brighten( -1 ),\n\t\t\t[ RIGHT ]: () => this.saturate( shiftKey ? 0.1 : 0.01 ),\n\t\t\t[ END ]: () => this.saturate( 1 ),\n\t\t\t[ LEFT ]: () => this.saturate( shiftKey ? -0.1 : -0.01 ),\n\t\t\t[ HOME ]: () => this.saturate( -1 ),\n\t\t};\n\n\t\tfor ( const code in shortcuts ) {\n\t\t\tif ( code === String( keyCode ) ) {\n\t\t\t\tshortcuts[ keyCode ]();\n\t\t\t}\n\t\t}\n\n\t\tif ( keyCode !== TAB ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { hsv, hsl, instanceId } = this.props;\n\t\tconst pointerLocation = {\n\t\t\ttop: `${ -hsv.v + 100 }%`,\n\t\t\tleft: `${ hsv.s }%`,\n\t\t};\n\n\t\t/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={ { background: `hsl(${ hsl.h },100%, 50%)` } }\n\t\t\t\tclassName=\"components-color-picker__saturation-color\"\n\t\t\t\tref={ this.container }\n\t\t\t\tonMouseDown={ this.handleMouseDown }\n\t\t\t\tonTouchMove={ this.handleChange }\n\t\t\t\tonTouchStart={ this.handleChange }\n\t\t\t\trole=\"application\"\n\t\t\t>\n\t\t\t\t<div className=\"components-color-picker__saturation-white\" />\n\t\t\t\t<div className=\"components-color-picker__saturation-black\" />\n\t\t\t\t<Button\n\t\t\t\t\taria-label={ __( 'Choose a shade' ) }\n\t\t\t\t\taria-describedby={ `color-picker-saturation-${ instanceId }` }\n\t\t\t\t\tclassName=\"components-color-picker__saturation-pointer\"\n\t\t\t\t\tstyle={ pointerLocation }\n\t\t\t\t\tonKeyDown={ this.handleKeyDown }\n\t\t\t\t/>\n\t\t\t\t<VisuallyHidden\n\t\t\t\t\tid={ `color-picker-saturation-${ instanceId }` }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'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.'\n\t\t\t\t\t) }\n\t\t\t\t</VisuallyHidden>\n\t\t\t</div>\n\t\t);\n\t\t/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */\n\t}\n}\n\nexport default compose( pure, withInstanceId )( Saturation );\n"]}