@wordpress/components 20.0.0 → 21.0.0

package/build/focal-point-picker/index.js

@@ -5,10 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.FocalPointPicker = void 0;
+exports.FocalPointPicker = FocalPointPicker;
+exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _i18n = require("@wordpress/i18n");
@@ -27,10 +30,10 @@ var _media = _interopRequireDefault(require("./media"));
 
 var _focalPointPickerStyle = require("./styles/focal-point-picker-style");
 
-var _math = require("../utils/math");
-
 var _utils = require("./utils");
 
+var _hooks = require("../utils/hooks");
+
 /**
  * External dependencies
  */
@@ -42,357 +45,251 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
-class FocalPointPicker extends _element.Component {
-  constructor(props) {
-    super(...arguments);
-    this.state = {
-      isDragging: false,
-      bounds: _utils.INITIAL_BOUNDS,
-      percentages: props.value
-    };
-    this.containerRef = (0, _element.createRef)();
-    this.mediaRef = (0, _element.createRef)();
-    this.onMouseDown = this.startDrag.bind(this);
-    this.onMouseUp = this.stopDrag.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.onMouseMove = this.doDrag.bind(this);
-
-    this.ifDraggingStop = () => {
-      if (this.state.isDragging) {
-        this.stopDrag();
-      }
-    };
-
-    this.onChangeAtControls = value => {
-      this.updateValue(value, () => {
-        this.props.onChange(this.state.percentages);
-      });
-    };
-
-    this.updateBounds = this.updateBounds.bind(this);
-    this.updateValue = this.updateValue.bind(this);
-  }
+const GRID_OVERLAY_TIMEOUT = 600;
+/**
+ * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.
+ *
+ * This component addresses a specific problem: with large background images it is common to see undesirable crops,
+ * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of
+ * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.
+ * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the
+ * focal point is never cropped out, regardless of viewport.
+ *
+ * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`
+ * - Corresponding CSS: `background-position: 50% 10%;`
+ *
+ * ```jsx
+ * import { FocalPointPicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ focalPoint, setFocalPoint ] = useState( {
+ * 		x: 0.5,
+ * 		y: 0.5,
+ * 	} );
+ *
+ * 	const url = '/path/to/image';
+ *
+ * 	// Example function to render the CSS styles based on Focal Point Picker value
+ * 	const style = {
+ * 		backgroundImage: `url(${ url })`,
+ * 		backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
+ * 	};
+ *
+ * 	return (
+ * 		<>
+ * 			<FocalPointPicker
+ * 				url={ url }
+ * 				value={ focalPoint }
+ * 				onDragStart={ setFocalPoint }
+ * 				onDrag={ setFocalPoint }
+ * 				onChange={ setFocalPoint }
+ * 			/>
+ * 			<div style={ style } />
+ * 		</>
+ * 	);
+ * };
+ * ```
+ */
 
-  componentDidMount() {
-    const {
-      defaultView
-    } = this.containerRef.current.ownerDocument;
-    defaultView.addEventListener('resize', this.updateBounds);
-    /*
-     * Set initial bound values.
-     *
-     * This is necessary for Safari:
-     * https://github.com/WordPress/gutenberg/issues/25814
-     */
-
-    this.updateBounds();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.url !== this.props.url) {
-      this.ifDraggingStop();
+function FocalPointPicker(_ref) {
+  let {
+    __nextHasNoMarginBottom,
+    autoPlay = true,
+    className,
+    help,
+    label,
+    onChange,
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    resolvePoint,
+    url,
+    value: valueProp = {
+      x: 0.5,
+      y: 0.5
+    },
+    ...restProps
+  } = _ref;
+  const [point, setPoint] = (0, _element.useState)(valueProp);
+  const [showGridOverlay, setShowGridOverlay] = (0, _element.useState)(false);
+  const {
+    startDrag,
+    endDrag,
+    isDragging
+  } = (0, _compose.__experimentalUseDragging)({
+    onDragStart: event => {
+      var _dragAreaRef$current;
+
+      (_dragAreaRef$current = dragAreaRef.current) === null || _dragAreaRef$current === void 0 ? void 0 : _dragAreaRef$current.focus();
+      const value = getValueWithinDragArea(event); // `value` can technically be undefined if getValueWithinDragArea() is
+      // called before dragAreaRef is set, but this shouldn't happen in reality.
+
+      if (!value) return;
+      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(value, event);
+      setPoint(value);
+    },
+    onDragMove: event => {
+      // Prevents text-selection when dragging.
+      event.preventDefault();
+      const value = getValueWithinDragArea(event);
+      if (!value) return;
+      onDrag === null || onDrag === void 0 ? void 0 : onDrag(value, event);
+      setPoint(value);
+    },
+    onDragEnd: () => {
+      onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
+      onChange === null || onChange === void 0 ? void 0 : onChange(point);
     }
-    /*
-     * Handles cases where the incoming value changes.
-     * An example is the values resetting based on an UNDO action.
-     */
-
-
-    const {
-      isDragging,
-      percentages: {
-        x,
-        y
-      }
-    } = this.state;
+  }); // Uses the internal point while dragging or else the value from props.
+
+  const {
+    x,
+    y
+  } = isDragging ? point : valueProp;
+  const dragAreaRef = (0, _element.useRef)(null);
+  const [bounds, setBounds] = (0, _element.useState)(_utils.INITIAL_BOUNDS);
+  const refUpdateBounds = (0, _element.useRef)(() => {
+    if (!dragAreaRef.current) return;
     const {
-      value
-    } = this.props;
+      clientWidth: width,
+      clientHeight: height
+    } = dragAreaRef.current; // Falls back to initial bounds if the ref has no size. Since styles
+    // give the drag area dimensions even when the media has not loaded
+    // this should only happen in unit tests (jsdom).
 
-    if (!isDragging && (value.x !== x || value.y !== y)) {
-      this.setState({
-        percentages: this.props.value
-      });
-    }
-  }
-
-  componentWillUnmount() {
+    setBounds(width > 0 && height > 0 ? {
+      width,
+      height
+    } : { ..._utils.INITIAL_BOUNDS
+    });
+  });
+  (0, _element.useEffect)(() => {
+    const updateBounds = refUpdateBounds.current;
+    if (!dragAreaRef.current) return;
     const {
       defaultView
-    } = this.containerRef.current.ownerDocument;
-    defaultView.removeEventListener('resize', this.updateBounds);
-    this.ifDraggingStop();
-  }
-
-  calculateBounds() {
-    const bounds = _utils.INITIAL_BOUNDS;
-
-    if (!this.mediaRef.current) {
-      return bounds;
-    } // Prevent division by zero when updateBounds runs in componentDidMount
-
-
-    if (this.mediaRef.current.clientWidth === 0 || this.mediaRef.current.clientHeight === 0) {
-      return bounds;
-    }
+    } = dragAreaRef.current.ownerDocument;
+    defaultView === null || defaultView === void 0 ? void 0 : defaultView.addEventListener('resize', updateBounds);
+    return () => defaultView === null || defaultView === void 0 ? void 0 : defaultView.removeEventListener('resize', updateBounds);
+  }, []); // Updates the bounds to cover cases of unspecified media or load failures.
+
+  (0, _compose.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []); // TODO: Consider refactoring getValueWithinDragArea() into a pure function.
+  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173
+
+  const getValueWithinDragArea = _ref2 => {
+    let {
+      clientX,
+      clientY,
+      shiftKey
+    } = _ref2;
+    if (!dragAreaRef.current) return;
+    const {
+      top,
+      left
+    } = dragAreaRef.current.getBoundingClientRect();
+    let nextX = (clientX - left) / bounds.width;
+    let nextY = (clientY - top) / bounds.height; // Enables holding shift to jump values by 10%.
 
-    const dimensions = {
-      width: this.mediaRef.current.clientWidth,
-      height: this.mediaRef.current.clientHeight
-    };
-    const pickerDimensions = this.pickerDimensions();
-    const widthRatio = pickerDimensions.width / dimensions.width;
-    const heightRatio = pickerDimensions.height / dimensions.height;
-
-    if (heightRatio >= widthRatio) {
-      bounds.width = bounds.right = pickerDimensions.width;
-      bounds.height = dimensions.height * widthRatio;
-      bounds.top = (pickerDimensions.height - bounds.height) / 2;
-      bounds.bottom = bounds.top + bounds.height;
-    } else {
-      bounds.height = bounds.bottom = pickerDimensions.height;
-      bounds.width = dimensions.width * heightRatio;
-      bounds.left = (pickerDimensions.width - bounds.width) / 2;
-      bounds.right = bounds.left + bounds.width;
+    if (shiftKey) {
+      nextX = Math.round(nextX / 0.1) * 0.1;
+      nextY = Math.round(nextY / 0.1) * 0.1;
     }
 
-    return bounds;
-  }
-
-  updateValue() {
-    var _this$props$resolvePo, _this$props$resolvePo2, _this$props;
-
-    let nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : undefined;
-    const resolvedValue = (_this$props$resolvePo = (_this$props$resolvePo2 = (_this$props = this.props).resolvePoint) === null || _this$props$resolvePo2 === void 0 ? void 0 : _this$props$resolvePo2.call(_this$props, nextValue)) !== null && _this$props$resolvePo !== void 0 ? _this$props$resolvePo : nextValue;
-    const {
-      x,
-      y
-    } = resolvedValue;
-    const nextPercentage = {
-      x: parseFloat(x).toFixed(2),
-      y: parseFloat(y).toFixed(2)
-    };
-    this.setState({
-      percentages: nextPercentage
-    }, callback);
-  }
-
-  updateBounds() {
-    this.setState({
-      bounds: this.calculateBounds()
+    return getFinalValue({
+      x: nextX,
+      y: nextY
     });
-  }
+  };
 
-  startDrag(event) {
-    var _this$props$onDragSta, _this$props2;
+  const getFinalValue = value => {
+    var _resolvePoint;
 
-    event.persist();
-    this.containerRef.current.focus();
-    this.setState({
-      isDragging: true
-    });
-    const {
-      ownerDocument
-    } = this.containerRef.current;
-    ownerDocument.addEventListener('mouseup', this.onMouseUp);
-    ownerDocument.addEventListener('mousemove', this.onMouseMove);
-    const value = this.getValueFromPoint({
-      x: event.pageX,
-      y: event.pageY
-    }, event.shiftKey);
-    this.updateValue(value);
-    (_this$props$onDragSta = (_this$props2 = this.props).onDragStart) === null || _this$props$onDragSta === void 0 ? void 0 : _this$props$onDragSta.call(_this$props2, value, event);
-  }
-
-  stopDrag(event) {
-    var _this$props$onDragEnd, _this$props3;
+    const resolvedValue = (_resolvePoint = resolvePoint === null || resolvePoint === void 0 ? void 0 : resolvePoint(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
+    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));
+    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));
 
-    const {
-      ownerDocument
-    } = this.containerRef.current;
-    ownerDocument.removeEventListener('mouseup', this.onMouseUp);
-    ownerDocument.removeEventListener('mousemove', this.onMouseMove);
-    this.setState({
-      isDragging: false
-    }, () => {
-      this.props.onChange(this.state.percentages);
-    });
-    (_this$props$onDragEnd = (_this$props3 = this.props).onDragEnd) === null || _this$props$onDragEnd === void 0 ? void 0 : _this$props$onDragEnd.call(_this$props3, event);
-  }
+    const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;
+
+    return {
+      x: roundToTwoDecimalPlaces(resolvedValue.x),
+      y: roundToTwoDecimalPlaces(resolvedValue.y)
+    };
+  };
 
-  onKeyDown(event) {
+  const arrowKeyStep = event => {
     const {
       code,
       shiftKey
     } = event;
     if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) return;
     event.preventDefault();
-    const next = { ...this.state.percentages
+    const value = {
+      x,
+      y
     };
     const step = shiftKey ? 0.1 : 0.01;
     const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
     const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
-    const value = parseFloat(next[axis]) + delta;
-    next[axis] = (0, _math.roundClamp)(value, 0, 1, step);
-    this.updateValue(next, () => {
-      this.props.onChange(this.state.percentages);
-    });
-  }
-
-  doDrag(event) {
-    var _this$props$onDrag, _this$props4;
-
-    // Prevents text-selection when dragging.
-    event.preventDefault();
-    const value = this.getValueFromPoint({
-      x: event.pageX,
-      y: event.pageY
-    }, event.shiftKey);
-    this.updateValue(value);
-    (_this$props$onDrag = (_this$props4 = this.props).onDrag) === null || _this$props$onDrag === void 0 ? void 0 : _this$props$onDrag.call(_this$props4, value, event);
-  }
-
-  getValueFromPoint(point, byTenths) {
-    const {
-      bounds
-    } = this.state;
-    const pickerDimensions = this.pickerDimensions();
-    const relativePoint = {
-      left: point.x - pickerDimensions.left,
-      top: point.y - pickerDimensions.top
-    };
-    const left = Math.max(bounds.left, Math.min(relativePoint.left, bounds.right));
-    const top = Math.max(bounds.top, Math.min(relativePoint.top, bounds.bottom));
-    let nextX = (left - bounds.left) / (pickerDimensions.width - bounds.left * 2);
-    let nextY = (top - bounds.top) / (pickerDimensions.height - bounds.top * 2); // Enables holding shift to jump values by 10%
-
-    const step = byTenths ? 0.1 : 0.01;
-    nextX = (0, _math.roundClamp)(nextX, 0, 1, step);
-    nextY = (0, _math.roundClamp)(nextY, 0, 1, step);
-    return {
-      x: nextX,
-      y: nextY
-    };
-  }
-
-  pickerDimensions() {
-    const containerNode = this.containerRef.current;
-
-    if (!containerNode) {
-      return {
-        width: 0,
-        height: 0,
-        left: 0,
-        top: 0
-      };
-    }
-
-    const {
-      clientHeight,
-      clientWidth
-    } = containerNode;
-    const {
-      top,
-      left
-    } = containerNode.getBoundingClientRect();
-    return {
-      width: clientWidth,
-      height: clientHeight,
-      top: top + document.body.scrollTop,
-      left
-    };
-  }
-
-  iconCoordinates() {
-    const {
-      bounds,
-      percentages: {
-        x,
-        y
-      }
-    } = this.state;
-
-    if (bounds.left === undefined || bounds.top === undefined) {
-      return {
-        left: '50%',
-        top: '50%'
-      };
+    value[axis] = value[axis] + delta;
+    onChange === null || onChange === void 0 ? void 0 : onChange(getFinalValue(value));
+  };
+
+  const focalPointPosition = {
+    left: x * bounds.width,
+    top: y * bounds.height
+  };
+  const classes = (0, _classnames.default)('components-focal-point-picker-control', className);
+  const instanceId = (0, _compose.useInstanceId)(FocalPointPicker);
+  const id = `inspector-focal-point-picker-control-${instanceId}`;
+  (0, _hooks.useUpdateEffect)(() => {
+    setShowGridOverlay(true);
+    const timeout = window.setTimeout(() => {
+      setShowGridOverlay(false);
+    }, GRID_OVERLAY_TIMEOUT);
+    return () => window.clearTimeout(timeout);
+  }, [x, y]);
+  return (0, _element.createElement)(_baseControl.default, (0, _extends2.default)({}, restProps, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    label: label,
+    id: id,
+    help: help,
+    className: classes
+  }), (0, _element.createElement)(_focalPointPickerStyle.MediaWrapper, {
+    className: "components-focal-point-picker-wrapper"
+  }, (0, _element.createElement)(_focalPointPickerStyle.MediaContainer, {
+    className: "components-focal-point-picker",
+    onKeyDown: arrowKeyStep,
+    onMouseDown: startDrag,
+    onBlur: () => {
+      if (isDragging) endDrag();
+    },
+    ref: dragAreaRef,
+    role: "button",
+    tabIndex: -1
+  }, (0, _element.createElement)(_grid.default, {
+    bounds: bounds,
+    showOverlay: showGridOverlay
+  }), (0, _element.createElement)(_media.default, {
+    alt: (0, _i18n.__)('Media preview'),
+    autoPlay: autoPlay,
+    onLoad: refUpdateBounds.current,
+    src: url
+  }), (0, _element.createElement)(_focalPoint.default, (0, _extends2.default)({}, focalPointPosition, {
+    isDragging: isDragging
+  })))), (0, _element.createElement)(_controls.default, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    hasHelpText: !!help,
+    point: {
+      x,
+      y
+    },
+    onChange: value => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(getFinalValue(value));
     }
-
-    const {
-      width,
-      height
-    } = this.pickerDimensions();
-    return {
-      left: x * (width - bounds.left * 2) + bounds.left,
-      top: y * (height - bounds.top * 2) + bounds.top
-    };
-  }
-
-  render() {
-    const {
-      autoPlay,
-      className,
-      help,
-      instanceId,
-      label,
-      url
-    } = this.props;
-    const {
-      bounds,
-      isDragging,
-      percentages
-    } = this.state;
-    const iconCoordinates = this.iconCoordinates();
-    const classes = (0, _classnames.default)('components-focal-point-picker-control', className);
-    const id = `inspector-focal-point-picker-control-${instanceId}`;
-    return (0, _element.createElement)(_baseControl.default, {
-      label: label,
-      id: id,
-      help: help,
-      className: classes
-    }, (0, _element.createElement)(_focalPointPickerStyle.MediaWrapper, {
-      className: "components-focal-point-picker-wrapper"
-    }, (0, _element.createElement)(_focalPointPickerStyle.MediaContainer, {
-      className: "components-focal-point-picker",
-      onKeyDown: this.onKeyDown,
-      onMouseDown: this.onMouseDown,
-      onBlur: this.ifDraggingStop,
-      ref: this.containerRef,
-      role: "button",
-      tabIndex: "-1"
-    }, (0, _element.createElement)(_grid.default, {
-      bounds: bounds,
-      value: percentages.x + percentages.y
-    }), (0, _element.createElement)(_media.default, {
-      alt: (0, _i18n.__)('Media preview'),
-      autoPlay: autoPlay,
-      mediaRef: this.mediaRef,
-      onLoad: this.updateBounds,
-      src: url
-    }), (0, _element.createElement)(_focalPoint.default, {
-      coordinates: iconCoordinates,
-      isDragging: isDragging
-    }))), (0, _element.createElement)(_controls.default, {
-      percentages: percentages,
-      onChange: this.onChangeAtControls
-    }));
-  }
-
+  }));
 }
 
-exports.FocalPointPicker = FocalPointPicker;
-FocalPointPicker.defaultProps = {
-  autoPlay: true,
-  value: {
-    x: 0.5,
-    y: 0.5
-  },
-  url: null
-};
-
-var _default = (0, _compose.withInstanceId)(FocalPointPicker);
-
+var _default = FocalPointPicker;
 exports.default = _default;
 //# sourceMappingURL=index.js.map