@wordpress/components
Version:
UI components for WordPress.
162 lines (158 loc) • 7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _native = require("@react-navigation/native");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _getPxFromCssUnit = _interopRequireDefault(require("../mobile/utils/get-px-from-css-unit"));
var _unitControl = _interopRequireWildcard(require("../unit-control"));
var _style = _interopRequireDefault(require("./style.scss"));
var _bottomSheet = _interopRequireDefault(require("../mobile/bottom-sheet"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const DEFAULT_FONT_SIZE = 16;
function FontSizePicker({
fontSizes = [],
disableCustomFontSizes = false,
onChange,
value: selectedValue
}) {
var _fontSizes$find;
const [showSubSheet, setShowSubSheet] = (0, _element.useState)(false);
const navigation = (0, _native.useNavigation)();
const {
height,
width
} = (0, _reactNative.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 = (0, _getPxFromCssUnit.default)(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.default.SubSheet.screenName);
setShowSubSheet(true);
};
const label = (0, _i18n.__)('Font Size');
const units = (0, _unitControl.useCustomUnits)({
availableUnits: ['px', 'em', 'rem', 'vw', 'vh']
});
const accessibilityLabel = (0, _i18n.sprintf)(
// translators: %s: Font size name e.g. Small
(0, _i18n.__)('Font Size, %s'), selectedOption.name);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.SubSheet, {
navigationButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.Cell, {
label: label,
separatorType: "none",
value: selectedValue ? (0, _i18n.sprintf)(
// translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px
(0, _i18n._x)('%1$s (%2$s)', 'font size'), selectedOption.name, selectedPxValue) : (0, _i18n.__)('Default'),
onPress: openSubSheet,
accessibilityRole: "button",
accessibilityLabel: accessibilityLabel,
accessibilityHint: (0, _i18n.sprintf)(
// translators: %s: Select control button label e.g. "Button width"
(0, _i18n.__)('Navigates to select %s'), selectedOption.name),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.chevronRight
})
}),
showSheet: showSubSheet,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_bottomSheet.default.NavBar, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.NavBar.BackButton, {
onPress: goBack
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.NavBar.Heading, {
children: label
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _style.default['components-font-size-picker'],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.Cell, {
customActionButton: true,
separatorType: "none",
label: (0, _i18n.__)('Default'),
onPress: onChangeValue(undefined),
leftAlign: true,
accessibilityRole: "button",
accessibilityLabel: (0, _i18n.__)('Selected: Default'),
accessibilityHint: (0, _i18n.__)('Double tap to select default font size'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
children: selectedValue === undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.check
})
})
}, "default"), fontSizes.map((item, index) => {
// Only display a choice that we can currently select.
if (!parseFloat(item.sizePx)) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.Cell, {
customActionButton: true,
separatorType: "none",
label: item.name,
subLabel: item.sizePx,
onPress: onChangeValue(item.sizePx),
leftAlign: true,
accessibilityRole: "button",
accessibilityLabel: item.sizePx === selectedValue ? (0, _i18n.sprintf)(
// translators: %s: The selected option.
(0, _i18n.__)('Selected: %s'), item.name) : item.name,
accessibilityHint: (0, _i18n.__)('Double tap to select font size'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
children: item.sizePx === selectedPxValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.check
})
})
}, index);
}), !disableCustomFontSizes && /*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControl.default, {
label: (0, _i18n.__)('Custom'),
min: 0,
max: 200,
step: 1,
value: selectedValue,
onChange: nextSize => {
if (0 === parseFloat(nextSize) || !nextSize) {
onChange(undefined);
} else {
onChange(nextSize);
}
},
units: units
})]
})]
})
});
}
var _default = exports.default = FontSizePicker;
//# sourceMappingURL=index.native.js.map