@wordpress/components/build-module/font-size-picker/index.native.js

UI components for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { View, useWindowDimensions } from 'react-native';
/**
 * WordPress dependencies
 */

import { useNavigation } from '@react-navigation/native';
import { useState } from '@wordpress/element';
import { Icon, chevronRight, check } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';
import { BottomSheet } from '@wordpress/components';
import { getPxFromCssUnit } from '@wordpress/block-editor';
/**
 * Internal dependencies
 */

import { default as UnitControl, useCustomUnits } from '../unit-control';
import styles from './style.scss';
const DEFAULT_FONT_SIZE = 16;

function FontSizePicker(_ref) {
  var _fontSizes$find;

  let {
    fontSizes = [],
    disableCustomFontSizes = false,
    onChange,
    value: selectedValue
  } = _ref;
  const [showSubSheet, setShowSubSheet] = useState(false);
  const navigation = useNavigation();
  const {
    height,
    width
  } = useWindowDimensions();
  const cssUnitOptions = {
    height,
    width,
    fontSize: DEFAULT_FONT_SIZE
  }; // We need to always convert to px units because the selected value
  // could be coming from the web where it could be stored as a different unit.

  const selectedPxValue = getPxFromCssUnit(selectedValue, cssUnitOptions);

  const onChangeValue = value => {
    return () => {
      goBack();
      onChange(value);
    };
  };

  const selectedOption = (_fontSizes$find = fontSizes.find(option => option.sizePx === selectedPxValue)) !== null && _fontSizes$find !== void 0 ? _fontSizes$find : {
    name: 'Custom'
  };

  const goBack = () => {
    setShowSubSheet(false);
    navigation.goBack();
  };

  const openSubSheet = () => {
    navigation.navigate(BottomSheet.SubSheet.screenName);
    setShowSubSheet(true);
  };

  const label = __('Font Size');

  const units = useCustomUnits({
    availableUnits: ['px', 'em', 'rem']
  });
  return createElement(BottomSheet.SubSheet, {
    navigationButton: createElement(BottomSheet.Cell, {
      label: label,
      separatorType: "none",
      value: selectedValue ? sprintf( // translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px
      __('%1$s (%2$s)'), selectedOption.name, selectedPxValue) : __('Default'),
      onPress: openSubSheet,
      accessibilityRole: 'button',
      accessibilityLabel: selectedOption.name,
      accessibilityHint: sprintf( // translators: %s: Select control button label e.g. Small
      __('Navigates to select %s'), selectedOption.name)
    }, createElement(Icon, {
      icon: chevronRight
    })),
    showSheet: showSubSheet
  }, createElement(Fragment, null, createElement(BottomSheet.NavBar, null, createElement(BottomSheet.NavBar.BackButton, {
    onPress: goBack
  }), createElement(BottomSheet.NavBar.Heading, null, label)), createElement(View, {
    style: styles['components-font-size-picker']
  }, createElement(BottomSheet.Cell, {
    customActionButton: true,
    separatorType: "none",
    label: __('Default'),
    onPress: onChangeValue(undefined),
    leftAlign: true,
    key: 'default',
    accessibilityRole: 'button',
    accessibilityLabel: __('Selected: Default'),
    accessibilityHint: __('Double tap to select default font size')
  }, createElement(View, null, selectedValue === undefined && createElement(Icon, {
    icon: check
  }))), fontSizes.map((item, index) => {
    // Only display a choice that we can currenly select.
    if (!parseFloat(item.sizePx)) {
      return null;
    }

    return createElement(BottomSheet.Cell, {
      customActionButton: true,
      separatorType: "none",
      label: item.name,
      subLabel: item.sizePx,
      onPress: onChangeValue(item.sizePx),
      leftAlign: true,
      key: index,
      accessibilityRole: 'button',
      accessibilityLabel: item.sizePx === selectedValue ? sprintf( // translators: %s: Select font size option value e.g: "Selected: Large".
      __('Selected: %s'), item.name) : item.name,
      accessibilityHint: __('Double tap to select font size')
    }, createElement(View, null, item.sizePx === selectedPxValue && createElement(Icon, {
      icon: check
    })));
  }), !disableCustomFontSizes && createElement(UnitControl, {
    label: __('Custom'),
    min: 0,
    max: 200,
    step: 1,
    value: selectedValue,
    onChange: nextSize => {
      if (0 === parseFloat(nextSize) || !nextSize) {
        onChange(undefined);
      } else {
        onChange(nextSize);
      }
    },
    units: units
  }))));
}

export default FontSizePicker;
//# sourceMappingURL=index.native.js.map