@wordpress/block-editor/build/components/block-styles/index.native.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _blocks = require("@wordpress/blocks");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _utils = require("./utils");
var _preview = _interopRequireDefault(require("./preview"));
var _style = _interopRequireDefault(require("./style.scss"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const EMPTY_ARRAY = [];
function BlockStyles({
  clientId,
  url
}) {
  const selector = select => {
    const {
      getBlock
    } = select(_store.store);
    const {
      getBlockStyles
    } = select(_blocks.store);
    const block = getBlock(clientId);
    return {
      styles: getBlockStyles(block?.name) || EMPTY_ARRAY,
      className: block?.attributes?.className || ''
    };
  };
  const {
    styles,
    className
  } = (0, _data.useSelect)(selector, [clientId]);
  const {
    updateBlockAttributes
  } = (0, _data.useDispatch)(_store.store);
  const renderedStyles = styles?.find(style => style.isDefault) ? styles : [{
    name: 'default',
    label: (0, _i18n._x)('Default', 'block style'),
    isDefault: true
  }, ...styles];
  const mappedRenderedStyles = (0, _element.useMemo)(() => {
    const activeStyle = (0, _utils.getActiveStyle)(renderedStyles, className);
    return renderedStyles.map(style => {
      const styleClassName = (0, _utils.replaceActiveStyle)(className, activeStyle, style);
      const isActive = activeStyle === style;
      const onStylePress = () => {
        updateBlockAttributes(clientId, {
          className: styleClassName
        });
      };
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_preview.default, {
        onPress: onStylePress,
        isActive: isActive,
        style: style,
        url: url
      }, style.name);
    });
  }, [renderedStyles, className, clientId]);
  if (!styles || styles.length === 0) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
    horizontal: true,
    showsHorizontalScrollIndicator: false,
    contentContainerStyle: _style.default.content,
    children: mappedRenderedStyles
  });
}
var _default = exports.default = BlockStyles;
//# sourceMappingURL=index.native.js.map