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

Generic block editor.

import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import { ScrollView } from 'react-native';
import { find } from 'lodash';
/**
 * GeChiUI dependencies
 */

import { store as blocksStore } from '@gechiui/blocks';
import { useSelect, useDispatch } from '@gechiui/data';
import { useMemo } from '@gechiui/element';
import { _x } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import { getActiveStyle, replaceActiveStyle } from './utils';
import StylePreview from './preview';
import containerStyles from './style.scss';
import { store as blockEditorStore } from '../../store';

function BlockStyles(_ref) {
  let {
    clientId,
    url
  } = _ref;

  const selector = select => {
    const {
      getBlock
    } = select(blockEditorStore);
    const {
      getBlockStyles
    } = select(blocksStore);
    const block = getBlock(clientId);
    return {
      styles: getBlockStyles(block.name),
      className: block.attributes.className || ''
    };
  };

  const {
    styles,
    className
  } = useSelect(selector, [clientId]);
  const {
    updateBlockAttributes
  } = useDispatch(blockEditorStore);
  const renderedStyles = find(styles, 'isDefault') ? styles : [{
    name: 'default',
    label: _x('Default', 'block style'),
    isDefault: true
  }, ...styles];
  const mappedRenderedStyles = useMemo(() => {
    const activeStyle = getActiveStyle(renderedStyles, className);
    return renderedStyles.map(style => {
      const styleClassName = replaceActiveStyle(className, activeStyle, style);
      const isActive = activeStyle === style;

      const onStylePress = () => {
        updateBlockAttributes(clientId, {
          className: styleClassName
        });
      };

      return createElement(StylePreview, {
        onPress: onStylePress,
        isActive: isActive,
        key: style.name,
        style: style,
        url: url
      });
    });
  }, [renderedStyles, className, clientId]);

  if (!styles || styles.length === 0) {
    return null;
  }

  return createElement(ScrollView, {
    horizontal: true,
    showsHorizontalScrollIndicator: false,
    contentContainerStyle: containerStyles.content
  }, mappedRenderedStyles);
}

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