@wordpress/components/build/unit-control/index.native.js

UI components for WordPress.

"use strict";

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

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

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

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

var _reactNative = require("react-native");

var _rangeCell = _interopRequireDefault(require("../mobile/bottom-sheet/range-cell"));

var _stepperCell = _interopRequireDefault(require("../mobile/bottom-sheet/stepper-cell"));

var _picker = _interopRequireDefault(require("../mobile/picker"));

var _style = _interopRequireDefault(require("./style.scss"));

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

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

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

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

/**
 * WordPress dependencies
 */
function UnitControl({
  currentInput,
  label,
  value,
  onChange,
  onUnitChange,
  initialPosition,
  min,
  max,
  separatorType,
  units = _utils.CSS_UNITS,
  unit,
  getStylesFromColorScheme,
  decimalNum,
  ...props
}) {
  const pickerRef = (0, _element.useRef)();
  const anchorNodeRef = (0, _element.useRef)();
  const onPickerPresent = (0, _element.useCallback)(() => {
    if (pickerRef !== null && pickerRef !== void 0 && pickerRef.current) {
      pickerRef.current.presentPicker();
    }
  }, [pickerRef === null || pickerRef === void 0 ? void 0 : pickerRef.current]);
  const currentInputValue = currentInput === null ? value : currentInput;
  const initialControlValue = isFinite(currentInputValue) ? currentInputValue : initialPosition;
  const unitButtonTextStyle = getStylesFromColorScheme(_style.default.unitButtonText, _style.default.unitButtonTextDark);
  /* translators: accessibility text. Inform about current unit value. %s: Current unit value. */

  const accessibilityLabel = (0, _i18n.sprintf)((0, _i18n.__)('Current unit is %s'), unit);
  const accessibilityHint = _reactNative.Platform.OS === 'ios' ? (0, _i18n.__)('Double tap to open Action Sheet with available options') : (0, _i18n.__)('Double tap to open Bottom Sheet with available options');
  const renderUnitButton = (0, _element.useMemo)(() => {
    const unitButton = (0, _element.createElement)(_reactNative.View, {
      style: _style.default.unitButton
    }, (0, _element.createElement)(_reactNative.Text, {
      style: unitButtonTextStyle
    }, unit));

    if ((0, _utils.hasUnits)(units)) {
      return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
        onPress: onPickerPresent,
        accessibilityLabel: accessibilityLabel,
        accessibilityRole: "button",
        accessibilityHint: accessibilityHint
      }, unitButton);
    }

    return unitButton;
  }, [onPickerPresent, accessibilityLabel, accessibilityHint, unitButtonTextStyle, unit]);
  const getAnchor = (0, _element.useCallback)(() => anchorNodeRef !== null && anchorNodeRef !== void 0 && anchorNodeRef.current ? (0, _reactNative.findNodeHandle)(anchorNodeRef === null || anchorNodeRef === void 0 ? void 0 : anchorNodeRef.current) : undefined, [anchorNodeRef === null || anchorNodeRef === void 0 ? void 0 : anchorNodeRef.current]);
  const renderUnitPicker = (0, _element.useCallback)(() => {
    return (0, _element.createElement)(_reactNative.View, {
      style: _style.default.unitMenu,
      ref: anchorNodeRef
    }, renderUnitButton, (0, _utils.hasUnits)(units) ? (0, _element.createElement)(_picker.default, {
      ref: pickerRef,
      options: units,
      onChange: onUnitChange,
      hideCancelButton: true,
      leftAlign: true,
      getAnchor: getAnchor
    }) : null);
  }, [pickerRef, units, onUnitChange, getAnchor]);
  return (0, _element.createElement)(_element.Fragment, null, unit !== '%' ? (0, _element.createElement)(_stepperCell.default, (0, _extends2.default)({
    label: label,
    max: max,
    min: min,
    onChange: onChange,
    separatorType: separatorType,
    value: value,
    defaultValue: initialControlValue,
    shouldDisplayTextInput: true,
    decimalNum: unit === 'px' ? 0 : decimalNum,
    openUnitPicker: onPickerPresent,
    unitLabel: (0, _utils.parseA11yLabelForUnit)(unit)
  }, props), renderUnitPicker()) : (0, _element.createElement)(_rangeCell.default, (0, _extends2.default)({
    label: label,
    onChange: onChange,
    minimumValue: min,
    maximumValue: max,
    value: value,
    unit: unit,
    defaultValue: initialControlValue,
    separatorType: separatorType,
    decimalNum: decimalNum,
    openUnitPicker: onPickerPresent,
    unitLabel: (0, _utils.parseA11yLabelForUnit)(unit)
  }, props), renderUnitPicker()));
}

var _default = (0, _element.memo)((0, _compose.withPreferredColorScheme)(UnitControl));

exports.default = _default;
//# sourceMappingURL=index.native.js.map