Fix #29 : Added support to list-groups in Collapse class

yiisoft · Apr 15, 2015 · 599d60c · 599d60c
1 parent 8e26e12
commit 599d60c
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ Yii Framework 2 bootstrap extension Change Log
 
 - Bug #18: `label` option ignored by `yii\bootstrap\Activefield::checkbox()` and `yii\bootstrap\Activefield::radio()` (mikehaertl)
 - Bug #5984: `yii\bootstrap\Activefield::checkbox()` caused browser to link label to the wrong input (cebe)
+- Enh #29: Added support to list-groups for Collapse class (pana1990, skullcrasher)
 - Enh #2546: Added `visible` option to `yii\bootstrap\ButtonGroup::$buttons` (samdark, lukBarros)
 - Enh #7633: Added `ActionColumn::$buttonOptions` for defining HTML options to be added to the default buttons (cebe)
 - Enh: Added `Nav::$dropDownCaret` to allow customization of the dropdown caret symbol (cebe)
@@ -41,7 +42,7 @@ Yii Framework 2 bootstrap extension Change Log
 ----------------------
 
 - Bug #5323: Nested dropdown does not work for `yii\bootstrap\DropDown` (aryraditya)
-- Bug #5336: `yii\bootstrap\DropDown` should register bootstrap plugin asset (zelenin) 
+- Bug #5336: `yii\bootstrap\DropDown` should register bootstrap plugin asset (zelenin)
 - Chg #5231: Collapse `items` property uses `label` element instead of array key for headers (nkovacs)
 - Chg #5232: Collapse encodes headers by default (nkovacs)
 - Chg #5217: Tabs no longer requires content since empty tab could be used dynamically (damiandennis)

diff --git a/Collapse.php b/Collapse.php
@@ -33,6 +33,17 @@
  * 'contentOptions' => [...],
  * 'options' => [...],
  * ],
+ * // if you want to swap out .panel-body with .list-group, you may use the following
+ * [
+ * 'label' => 'Collapsible Group Item #1',
+ * 'content' => [
+ * 'Anim pariatur cliche...',
+ * 'Anim pariatur cliche...'
+ * ],
+ * 'contentOptions' => [...],
+ * 'options' => [...],
+ * 'footer' => 'Footer' // the footer label in list-group
+ * ],
  * ]
  * ]);
  * ```
@@ -50,7 +61,7 @@ class Collapse extends Widget
  * - label: string, required, the group header label.
  * - encode: boolean, optional, whether this label should be HTML-encoded. This param will override
  * global `$this->encodeLabels` param.
- * - content: string, required, the content (HTML) of the group
+ * - content: array|string, required, the content (HTML) of the group
  * - options: array, optional, the HTML attributes of the group
  * - contentOptions: optional, the HTML attributes of the group's content
  */
@@ -135,7 +146,22 @@ public function renderItem($header, $item, $index)
 
  $header = Html::tag('h4', $headerToggle, ['class' => 'panel-title']);
 
- $content = Html::tag('div', $item['content'], ['class' => 'panel-body']) . "\n";
+ if (is_string($item['content'])) {
+ $content = Html::tag('div', $item['content'], ['class' => 'panel-body']) . "\n";
+ } elseif (is_array($item['content'])) {
+ $content = Html::ul($item['content'], [
+ 'class' => 'list-group',
+ 'itemOptions' => [
+ 'class' => 'list-group-item'
+ ],
+ 'encode' => false,
+ ]) . "\n";
+ if (isset($item['footer'])) {
+ $content .= Html::tag('div', $item['footer'], ['class' => 'panel-footer']) . "\n";
+ }
+ } else {
+ throw new InvalidConfigException('The "content" option should be a string or array.');
+ }
  } else {
  throw new InvalidConfigException('The "content" option is required.');
  }

diff --git a/tests/CollapseTest.php b/tests/CollapseTest.php
@@ -15,35 +15,57 @@ public function testRender()
  'items' => [
  [
  'label' => 'Collapsible Group Item #1',
- 'content' => 'test content1',
+ 'content' => [
+ 'test content1',
+ 'test content2'
+ ],
+ ],
+ [
+ 'label' => 'Collapsible Group Item #2',
+ 'content' => [
+ 'test content1',
+ 'test content2'
+ ],
+ 'contentOptions' => [
+ 'class' => 'testContentOptions'
+ ],
+ 'options' => [
+ 'class' => 'testClass',
+ 'id' => 'testId'
+ ],
+ 'footer' => 'Footer'
  ],
  [
- 'label' => '<h1>Collapsible Group Item #2</h1>',
- 'content' => '<h2>test content2</h2>',
+ 'label' => '<h1>Collapsible Group Item #3</h1>',
+ 'content' => [
+ '<h2>test content1</h2>',
+ '<h2>test content2</h2>'
+ ],
  'contentOptions' => [
  'class' => 'testContentOptions2'
  ],
  'options' => [
  'class' => 'testClass2',
  'id' => 'testId2'
  ],
- 'encode' => true
+ 'encode' => false,
+ 'footer' => 'Footer2'
  ],
  [
- 'label' => '<h1>Collapsible Group Item #3</h1>',
- 'content' => '<h2>test content3</h2>',
+ 'label' => '<h1>Collapsible Group Item #4</h1>',
+ 'content' => [
+ '<h2>test content1</h2>',
+ '<h2>test content2</h2>'
+ ],
  'contentOptions' => [
  'class' => 'testContentOptions3'
  ],
  'options' => [
  'class' => 'testClass3',
  'id' => 'testId3'
  ],
- 'encode' => false
- ],
- [
- 'label' => '<h1>Collapsible Group Item #4</h1>',
- 'content' => '<h1>test content4</h1>',
+ 'encode' => true,
+ 'footer' => 'Footer3'
  ],
  ]
  ]);
@@ -52,19 +74,34 @@ public function testRender()
 <div id="w0" class="panel-group">
 <div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse1" data-toggle="collapse" data-parent="#w0">Collapsible Group Item #1</a>
 </h4></div>
-<div id="w0-collapse1" class="panel-collapse collapse"><div class="panel-body">test content1</div>
+<div id="w0-collapse1" class="panel-collapse collapse"><ul class="list-group">
+<li class="list-group-item">test content1</li>
+<li class="list-group-item">test content2</li>
+</ul>
 </div></div>
-<div id="testId2" class="testClass2 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse2" data-toggle="collapse" data-parent="#w0">&lt;h1&gt;Collapsible Group Item #2&lt;/h1&gt;</a>
+<div id="testId" class="testClass panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse2" data-toggle="collapse" data-parent="#w0">Collapsible Group Item #2</a>
 </h4></div>
-<div id="w0-collapse2" class="testContentOptions2 panel-collapse collapse"><div class="panel-body"><h2>test content2</h2></div>
+<div id="w0-collapse2" class="testContentOptions panel-collapse collapse"><ul class="list-group">
+<li class="list-group-item">test content1</li>
+<li class="list-group-item">test content2</li>
+</ul>
+<div class="panel-footer">Footer</div>
 </div></div>
-<div id="testId3" class="testClass3 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse3" data-toggle="collapse" data-parent="#w0"><h1>Collapsible Group Item #3</h1></a>
+<div id="testId2" class="testClass2 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse3" data-toggle="collapse" data-parent="#w0"><h1>Collapsible Group Item #3</h1></a>
 </h4></div>
-<div id="w0-collapse3" class="testContentOptions3 panel-collapse collapse"><div class="panel-body"><h2>test content3</h2></div>
+<div id="w0-collapse3" class="testContentOptions2 panel-collapse collapse"><ul class="list-group">
+<li class="list-group-item"><h2>test content1</h2></li>
+<li class="list-group-item"><h2>test content2</h2></li>
+</ul>
+<div class="panel-footer">Footer2</div>
 </div></div>
-<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse4" data-toggle="collapse" data-parent="#w0">&lt;h1&gt;Collapsible Group Item #4&lt;/h1&gt;</a>
+<div id="testId3" class="testClass3 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse4" data-toggle="collapse" data-parent="#w0">&lt;h1&gt;Collapsible Group Item #4&lt;/h1&gt;</a>
 </h4></div>
-<div id="w0-collapse4" class="panel-collapse collapse"><div class="panel-body"><h1>test content4</h1></div>
+<div id="w0-collapse4" class="testContentOptions3 panel-collapse collapse"><ul class="list-group">
+<li class="list-group-item"><h2>test content1</h2></li>
+<li class="list-group-item"><h2>test content2</h2></li>
+</ul>
+<div class="panel-footer">Footer3</div>
 </div></div>
 </div>