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

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { Text, View, TouchableWithoutFeedback, Platform, findNodeHandle } from 'react-native';
/**
 * Internal dependencies
 */

import RangeCell from '../mobile/bottom-sheet/range-cell';
import StepperCell from '../mobile/bottom-sheet/stepper-cell';
import Picker from '../mobile/picker';
import styles from './style.scss';
import { CSS_UNITS, hasUnits, parseA11yLabelForUnit } from './utils';
/**
 * WordPress dependencies
 */

import { useRef, useCallback, useMemo, memo } from '@wordpress/element';
import { withPreferredColorScheme } from '@wordpress/compose';
import { __, sprintf } from '@wordpress/i18n';

function UnitControl({
  currentInput,
  label,
  value,
  onChange,
  onUnitChange,
  initialPosition,
  min,
  max,
  separatorType,
  units = CSS_UNITS,
  unit,
  getStylesFromColorScheme,
  decimalNum,
  ...props
}) {
  const pickerRef = useRef();
  const anchorNodeRef = useRef();
  const onPickerPresent = 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(styles.unitButtonText, styles.unitButtonTextDark);
  /* translators: accessibility text. Inform about current unit value. %s: Current unit value. */

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

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

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

export default memo(withPreferredColorScheme(UnitControl));
//# sourceMappingURL=index.native.js.map