Repeater: Advanced - Add support for bulk actions

Author: nicolas-jaussaud

assets/build/beaver-builder/index.min.css

@@ -1,5 +1,7 @@
 import { useState } from 'react'
 import { Button } from '../../../base'
+import { Checkbox } from '../../../field'
+import BulkActions from '../../common/BulkActions'
 import {
   getHeaderConfig,
   renderHeaderValue
@@ -16,14 +18,20 @@ const Advanced = ({
   beforeRow = false,
   afterRow = false,
   renderAction,
-  renderFooterActions
+  renderFooterActions,
+  useBulk
 }) => {
 
   const [openSection, setOpenSection] = useState(false)
   const headerColumns = getHeaderConfig(fields, headerFields)
 
   return(
     <>
+      { useBulk &&
+        <BulkActions
+          actions={{ 'deletion': 'Delete' }}
+          dispatch={ dispatch }
+        /> }
       <div className='tf-repeater-advanced'>
         <div className='tf-repeater-advanced-header tf-repeater-advanced-label-row'>
           <div key={ 'index' } className='tf-repeater-advanced-label-row-index'></div>
@@ -42,6 +50,23 @@ const Advanced = ({
               data-open={ openSection === i ? 'true' : 'false' }
             >
               <div className='tf-repeater-advanced-overview tf-repeater-advanced-label-row'>
+                { useBulk &&
+                  <div
+                    className="tf-repeater-advanced-item-checkbox"
+                    onClick={ e => e.stopPropagation() }
+                  >
+                    <Checkbox
+                      label={ `Select item ${i + 1}` }
+                      labelVisuallyHidden={ true }
+                      value={ item._bulkCheckbox }
+                      onChange={ value => dispatch({
+                        type    : 'update',
+                        item    : i,
+                        control : '_bulkCheckbox',
+                        value   : value
+                      }) }
+                    />
+                  </div> }
                 <div key={ 'index' } className='tf-repeater-advanced-label-row-index'>
                   { i + 1 }
                 </div>

assets/build/default/index.min.css

@@ -162,3 +162,9 @@ $advanced-item-index-height: 40px;
 .tf-repeater-advanced .tf-repeater-actions {
   padding: $section-padding;
 }
+
+.tf-repeater-advanced-item-checkbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

assets/build/elementor/index.min.css

@@ -303,7 +303,8 @@
       'title' => 'Advanced',
       'path'  => 'repeater/advanced',
       'fields'=> [
-        'repeater_advanced' => [ 'json' => true ],
+        'repeater_advanced'           => [ 'json' => true ],
+        'repeater_advanced_use_bulk'  => [ 'json' => true ],
       ]
     ],
     'bare' => [

assets/build/example.min.js

@@ -40,6 +40,47 @@
 
 <div><?php tangible\see($fields->fetch_value('repeater_advanced')) ?></div>
 
+<h4>Example repeater with advanced layout and use_bulk set to true</h4>
+
+<div class="tangible-settings-row">
+  <?= $fields->render_field('repeater_advanced_use_bulk', [
+    'label'      => 'Repeater field',
+    'type'       => 'repeater',
+    'layout'     => 'advanced',
+    'value'      => $fields->fetch_value('repeater_advanced_use_bulk'),
+    'use_bulk'   => true,
+    'sub_fields' => [
+      [
+        'label' => 'Date',
+        'type'  => 'date_picker',
+        'name'  => 'date',
+      ], 
+      [
+        'label'   => 'Operator',
+        'type'    => 'select',
+        'name'    => 'select',
+        'choices' => [
+          'test1' => 'Test1',
+          'test2' => 'Test2',
+          'test3' => 'Test3',
+          'test4' => 'Test4'
+        ],
+      ],
+      [
+        'label' => 'Color',
+        'type'  => 'color_picker',
+        'name'  => 'color',
+      ],
+    ]
+  ]); ?>
+</div>
+
+<div class="tangible-settings-row">
+  <?php submit_button() ?>
+</div>
+
+<div><?php tangible\see($fields->fetch_value('repeater_advanced_use_bulk')) ?></div>
+
 <h4>Code</h4>
 
 <?php $this->start_code('php') ?>
@@ -48,7 +89,9 @@
   'type'       => 'repeater',
   'layout'     => 'bare',
   'value'      => $fields->fetch_value('repeater_advanced'),
-  
+
+  'use_bulk'   => true, // Optional, default false
+
   /**
    * Optional:
    *