@wordpress/block-library/build-module/social-links/edit.native.js

Block library for the WordPress editor.

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

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

import { InnerBlocks, store as blockEditorStore } from '@wordpress/block-editor';
import { withDispatch, withSelect } from '@wordpress/data';
import { useRef, useEffect, useState } from '@wordpress/element';
import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import styles from './editor.scss';
import variations from '../social-link/variations';
const ALLOWED_BLOCKS = variations.map(v => `core/social-link-${v.name}`); // Template contains the links that show when start.

const TEMPLATE = [['core/social-link-wordpress', {
  service: 'wordpress',
  url: 'https://wordpress.org'
}], ['core/social-link-facebook', {
  service: 'facebook'
}], ['core/social-link-twitter', {
  service: 'twitter'
}], ['core/social-link-instagram', {
  service: 'instagram'
}]];

function SocialLinksEdit(_ref) {
  let {
    shouldDelete,
    onDelete,
    isSelected,
    isInnerIconSelected,
    innerBlocks,
    attributes,
    activeInnerBlocks,
    getBlock,
    blockWidth
  } = _ref;
  const [initialCreation, setInitialCreation] = useState(true);
  const shouldRenderFooterAppender = isSelected || isInnerIconSelected;
  const {
    align
  } = attributes;
  const {
    marginLeft: spacing
  } = styles.spacing;
  useEffect(() => {
    if (!shouldRenderFooterAppender) {
      setInitialCreation(false);
    }
  }, [shouldRenderFooterAppender]);
  const renderFooterAppender = useRef(() => createElement(View, null, createElement(InnerBlocks.ButtonBlockAppender, {
    isFloating: true
  })));
  const placeholderStyle = usePreferredColorSchemeStyle(styles.placeholder, styles.placeholderDark);

  function renderPlaceholder() {
    return [...new Array(innerBlocks.length || 1)].map((_, index) => createElement(View, {
      testID: "social-links-placeholder",
      style: placeholderStyle,
      key: index
    }));
  }

  function filterInnerBlocks(blockIds) {
    return blockIds.filter(blockId => getBlock(blockId).attributes.url);
  }

  if (!shouldRenderFooterAppender && activeInnerBlocks.length === 0) {
    return createElement(View, {
      style: styles.placeholderWrapper
    }, renderPlaceholder());
  }

  return createElement(InnerBlocks, {
    allowedBlocks: ALLOWED_BLOCKS,
    templateLock: false,
    template: initialCreation && TEMPLATE,
    renderFooterAppender: shouldRenderFooterAppender && renderFooterAppender.current,
    orientation: 'horizontal',
    onDeleteBlock: shouldDelete ? onDelete : undefined,
    marginVertical: spacing,
    marginHorizontal: spacing,
    horizontalAlignment: align,
    filterInnerBlocks: !shouldRenderFooterAppender && filterInnerBlocks,
    blockWidth: blockWidth
  });
}

export default compose(withSelect((select, _ref2) => {
  let {
    clientId
  } = _ref2;
  const {
    getBlockCount,
    getBlockParents,
    getSelectedBlockClientId,
    getBlocks,
    getBlock
  } = select(blockEditorStore);
  const selectedBlockClientId = getSelectedBlockClientId();
  const selectedBlockParents = getBlockParents(selectedBlockClientId, true);
  const innerBlocks = getBlocks(clientId);
  const activeInnerBlocks = innerBlocks.filter(block => {
    var _block$attributes;

    return (_block$attributes = block.attributes) === null || _block$attributes === void 0 ? void 0 : _block$attributes.url;
  });
  return {
    shouldDelete: getBlockCount(clientId) === 1,
    isInnerIconSelected: selectedBlockParents[0] === clientId,
    innerBlocks,
    activeInnerBlocks,
    getBlock
  };
}), withDispatch((dispatch, _ref3) => {
  let {
    clientId
  } = _ref3;
  const {
    removeBlock
  } = dispatch(blockEditorStore);
  return {
    onDelete: () => {
      removeBlock(clientId, false);
    }
  };
}))(SocialLinksEdit);
//# sourceMappingURL=edit.native.js.map