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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
Object.defineProperty(exports, "useCustomUnits", {
  enumerable: true,
  get: function () {
    return _utils.useCustomUnits;
  }
});
var _react = require("react");
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 _element = require("@wordpress/element");
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,
  ...props
}) {
  const pickerRef = (0, _element.useRef)();
  const anchorNodeRef = (0, _element.useRef)();
  const onPickerPresent = (0, _element.useCallback)(() => {
    if (pickerRef?.current) {
      pickerRef.current.presentPicker();
    }
    // Disable reason: this should be fixed by the native team.
    // It would be great if this could be done in the context of
    // https://github.com/WordPress/gutenberg/pull/39218
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [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, _react.createElement)(_reactNative.View, {
      style: _style.default.unitButton
    }, (0, _react.createElement)(_reactNative.Text, {
      style: unitButtonTextStyle
    }, unit));
    if ((0, _utils.hasUnits)(units) && units?.length > 1) {
      return (0, _react.createElement)(_reactNative.TouchableWithoutFeedback, {
        onPress: onPickerPresent,
        accessibilityLabel: accessibilityLabel,
        accessibilityRole: "button",
        accessibilityHint: accessibilityHint
      }, unitButton);
    }
    return unitButton;
  }, [onPickerPresent, accessibilityLabel, accessibilityHint, unitButtonTextStyle, unit, units]);
  const getAnchor = (0, _element.useCallback)(() => anchorNodeRef?.current ? (0, _reactNative.findNodeHandle)(anchorNodeRef?.current) : undefined,
  // Disable reason: this should be fixed by the native team.
  // It would be great if this could be done in the context of
  // https://github.com/WordPress/gutenberg/pull/39218
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [anchorNodeRef?.current]);
  const getDecimal = step => {
    // Return the decimal offset based on the step size.
    // if step size is 0.1 we expect the offset to be 1.
    // for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );
    // steps are defined in the CSS_UNITS and they vary from unit to unit.
    const stepToString = step;
    const splitStep = stepToString.toString().split('.');
    return splitStep[1] ? splitStep[1].length : 0;
  };
  const renderUnitPicker = (0, _element.useCallback)(() => {
    // Keeping for legacy reasons, although `false` should not be a valid
    // value for the `units` prop anymore.
    if (units === false) {
      return null;
    }
    return (0, _react.createElement)(_reactNative.View, {
      style: _style.default.unitMenu,
      ref: anchorNodeRef
    }, renderUnitButton, (0, _utils.hasUnits)(units) && units?.length > 1 ? (0, _react.createElement)(_picker.default, {
      ref: pickerRef,
      options: units,
      onChange: onUnitChange,
      hideCancelButton: true,
      leftAlign: true,
      getAnchor: getAnchor
    }) : null);
  }, [pickerRef, units, onUnitChange, getAnchor, renderUnitButton]);
  let step = props.step;

  /*
   * If no step prop has been passed, lookup the active unit and
   * try to get step from `units`, or default to a value of `1`
   */
  if (!step && units) {
    var _activeUnit$step;
    const activeUnit = units.find(option => option.value === unit);
    step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
  }
  const decimalNum = getDecimal(step);
  return (0, _react.createElement)(_react.Fragment, null, unit !== '%' ? (0, _react.createElement)(_stepperCell.default, {
    label: label,
    max: max,
    min: min,
    onChange: onChange,
    separatorType: separatorType,
    value: value,
    step: step,
    defaultValue: initialControlValue,
    shouldDisplayTextInput: true,
    decimalNum: decimalNum,
    openUnitPicker: onPickerPresent,
    unitLabel: (0, _utils.getAccessibleLabelForUnit)(unit),
    ...props
  }, renderUnitPicker()) : (0, _react.createElement)(_rangeCell.default, {
    label: label,
    onChange: onChange,
    minimumValue: min,
    maximumValue: max,
    value: value,
    step: step,
    unit: unit,
    defaultValue: initialControlValue,
    separatorType: separatorType,
    decimalNum: decimalNum,
    openUnitPicker: onPickerPresent,
    unitLabel: (0, _utils.getAccessibleLabelForUnit)(unit),
    ...props
  }, renderUnitPicker()));
}
var _default = (0, _element.memo)((0, _compose.withPreferredColorScheme)(UnitControl));
exports.default = _default;
//# sourceMappingURL=index.native.js.map