Hide fields in Paragraphs conditionally using Form API #states

Question

Because the Conditional Fields module doesn't work with paragraphs for Drupal 8, I've followed the instructions in Conditional Fields in Paragraphs Using the Javascript States API for Drupal 8 to hide some paragraphs fields, depending on the value asigned to another field.

But it only works when the dependee field value changes, when the node is edited or when a new paragraph is created, until I change the value in the dependee field manually, the dependent value is always visible.

Does anyone know how can I have those fields hidden when a value is already selected in the dependee field?

Answer 1

I had to do something similar for having localized paragraphs for foreign languages with an option to hide the paragraph (until release date).

The paragraph types I needed this I added a "Display Languages" checkboxes field with the options of All, supported languages, Hide. For example, you could create a paragraph and tick the DE option and the Hide option. This paragraph was hidden until the Hide tick mark was removed and then it only showed when the language was DE.

Here's an example of the code I used for my announcement_banner paragraph type. If you need it for more types, just implement the hook code for that type.

/**
 * Implements hook_preprocess_paragraph__announcement_banner().
 *
 * Handles language display for paragraph type.
 *
 * @param array $variables
 */
function MY_MODULE_preprocess_paragraph__announcement_banner(&$variables) {
  $paragraph = $variables['paragraph'];
  if (!MY_MODULE_can_display($paragraph)) {
    $variables['attributes']['style'][] = 'display: none;';
    $variables['content'] = [];
  }
}
/**
 * Checks if a paragraph can be displayed for the current language.
 *
 * @param stdClass $paragraph
 *   The paragraph entity to be tested.
 * @return boolean
 *   True if it can be displayed / False if it can't
 */
function MY_MODULE_can_display( $paragraph ) {
  // Transition check remove once new corporate branding active.
  if (!isset($paragraph->field_display_languages)  || $paragraph->field_display_languages->count() == 0) {
    return TRUE;
  }
  $lang = \Drupal::languageManager()->getCurrentLanguage()->getId();
  $hide = FALSE;
  $allowed = FALSE;
  foreach ($paragraph->field_display_languages as $value ) {
    $langCode = $value->getValue()['value'];
    if ( $langCode == 'hide' ) {
      $hide = TRUE;
    }
    if ( $langCode == 'all'  || $langCode == $lang ) {
      $allowed = TRUE;
    }
  }
  // Hide if hidden option checked.
  if ($hide) {
    return FALSE;
  }
  // Show if nothing is checked or match found.
  return $allowed;
}