yiisoft /
yii-bootstrap4
| 1 | <?php |
||||
| 2 | |||||
| 3 | declare(strict_types=1); |
||||
| 4 | |||||
| 5 | namespace Yiisoft\Yii\Bootstrap4; |
||||
| 6 | |||||
| 7 | use JsonException; |
||||
| 8 | use RuntimeException; |
||||
| 9 | use Yiisoft\Arrays\ArrayHelper; |
||||
| 10 | use Yiisoft\Html\Html; |
||||
| 11 | |||||
| 12 | use function array_key_exists; |
||||
| 13 | use function array_merge; |
||||
| 14 | use function implode; |
||||
| 15 | |||||
| 16 | /** |
||||
| 17 | * Tabs renders a Tab bootstrap javascript component. |
||||
| 18 | * |
||||
| 19 | * For example: |
||||
| 20 | * |
||||
| 21 | * ```php |
||||
| 22 | * echo Tabs::widget() |
||||
| 23 | * ->items([ |
||||
| 24 | * [ |
||||
| 25 | * 'label' => 'One', |
||||
| 26 | * 'content' => 'Anim pariatur cliche...', |
||||
| 27 | * 'active' => true, |
||||
| 28 | * ], |
||||
| 29 | * [ |
||||
| 30 | * 'label' => 'Two', |
||||
| 31 | * 'content' => 'Anim pariatur cliche...', |
||||
| 32 | * 'headerOptions' => [...], |
||||
| 33 | * 'options' => ['id' => 'myveryownID'], |
||||
| 34 | * ], |
||||
| 35 | * [ |
||||
| 36 | * 'label' => 'Example', |
||||
| 37 | * 'url' => 'http://www.example.com', |
||||
| 38 | * ], |
||||
| 39 | * [ |
||||
| 40 | * 'label' => 'Dropdown', |
||||
| 41 | * 'items' => [ |
||||
| 42 | * [ |
||||
| 43 | * 'label' => 'DropdownA', |
||||
| 44 | * 'content' => 'DropdownA, Anim pariatur cliche...', |
||||
| 45 | * ], |
||||
| 46 | * [ |
||||
| 47 | * 'label' => 'DropdownB', |
||||
| 48 | * 'content' => 'DropdownB, Anim pariatur cliche...', |
||||
| 49 | * ], |
||||
| 50 | * [ |
||||
| 51 | * 'label' => 'External Link', |
||||
| 52 | * 'url' => 'http://www.example.com', |
||||
| 53 | * ], |
||||
| 54 | * ], |
||||
| 55 | * ], |
||||
| 56 | * ]); |
||||
| 57 | * ``` |
||||
| 58 | */ |
||||
| 59 | class Tabs extends Widget |
||||
| 60 | { |
||||
| 61 | private array $panes = []; |
||||
| 62 | private array $items = []; |
||||
| 63 | private array $itemOptions = []; |
||||
| 64 | private array $headerOptions = []; |
||||
| 65 | private array $linkOptions = []; |
||||
| 66 | private bool $encodeLabels = true; |
||||
| 67 | private string $navType = 'nav-tabs'; |
||||
| 68 | private bool $renderTabContent = true; |
||||
| 69 | private array $tabContentOptions = []; |
||||
| 70 | private string $dropdownClass = Dropdown::class; |
||||
| 71 | private array $options = []; |
||||
| 72 | |||||
| 73 | 10 | protected function run(): string |
|||
| 74 | { |
||||
| 75 | 10 | if (!isset($this->options['id'])) { |
|||
| 76 | 8 | $this->options['id'] = "{$this->getId()}-tabs"; |
|||
| 77 | } |
||||
| 78 | |||||
| 79 | 10 | Html::addCssClass($this->options, ['widget' => 'nav', $this->navType]); |
|||
| 80 | 10 | Html::addCssClass($this->tabContentOptions, 'tab-content'); |
|||
| 81 | |||||
| 82 | 10 | $this->registerPlugin('tab', $this->options); |
|||
| 83 | 10 | $this->prepareItems($this->items); |
|||
| 84 | |||||
| 85 | 10 | return Nav::widget() |
|||
| 86 | 10 | ->dropdownClass($this->dropdownClass) |
|||
|
0 ignored issues
–
show
Bug
introduced
by
Loading history...
|
|||||
| 87 | 10 | ->options(ArrayHelper::merge(['role' => 'tablist'], $this->options)) |
|||
| 88 | 10 | ->items($this->items) |
|||
| 89 | 10 | ->encodeLabels($this->encodeLabels) |
|||
| 90 | 10 | ->render() |
|||
| 91 | 10 | . $this->renderPanes($this->panes); |
|||
| 92 | } |
||||
| 93 | |||||
| 94 | /** |
||||
| 95 | * Renders tab items as specified on {@see items}. |
||||
| 96 | * |
||||
| 97 | * @param array $items |
||||
| 98 | * @param string $prefix |
||||
| 99 | * |
||||
| 100 | * @throws JsonException|RuntimeException |
||||
| 101 | */ |
||||
| 102 | 10 | protected function prepareItems(array &$items, string $prefix = ''): void |
|||
| 103 | { |
||||
| 104 | 10 | if (!$this->hasActiveTab()) { |
|||
| 105 | 9 | $this->activateFirstVisibleTab(); |
|||
| 106 | } |
||||
| 107 | |||||
| 108 | 10 | foreach ($items as $n => $item) { |
|||
| 109 | 10 | $options = array_merge($this->itemOptions, ArrayHelper::getValue($item, 'options', [])); |
|||
| 110 | 10 | $options['id'] = ArrayHelper::getValue($options, 'id', $this->options['id'] . $prefix . '-tab' . $n); |
|||
| 111 | |||||
| 112 | /** {@see https://github.com/yiisoft/yii2-bootstrap4/issues/108#issuecomment-465219339} */ |
||||
| 113 | 10 | unset($items[$n]['options']['id']); |
|||
| 114 | |||||
| 115 | 10 | if (!ArrayHelper::remove($item, 'visible', true)) { |
|||
|
0 ignored issues
–
show
It seems like
$item can also be of type object; however, parameter $array of Yiisoft\Arrays\ArrayHelper::remove() does only seem to accept array, maybe add an additional type check?
(
Ignorable by Annotation
)
If this is a false-positive, you can also ignore this issue in your code via the
Loading history...
|
|||||
| 116 | 3 | continue; |
|||
| 117 | } |
||||
| 118 | |||||
| 119 | 10 | if (!array_key_exists('label', $item)) { |
|||
| 120 | throw new RuntimeException('The "label" option is required.'); |
||||
| 121 | } |
||||
| 122 | |||||
| 123 | 10 | $selected = ArrayHelper::getValue($item, 'active', false); |
|||
| 124 | 10 | $disabled = ArrayHelper::getValue($item, 'disabled', false); |
|||
| 125 | 10 | $headerOptions = ArrayHelper::getValue($item, 'headerOptions', $this->headerOptions); |
|||
| 126 | |||||
| 127 | 10 | if (isset($item['items'])) { |
|||
| 128 | 3 | $this->prepareItems($items[$n]['items'], '-dd' . $n); |
|||
| 129 | 3 | continue; |
|||
| 130 | } |
||||
| 131 | |||||
| 132 | 10 | ArrayHelper::setValue($items[$n], 'options', $headerOptions); |
|||
| 133 | |||||
| 134 | 10 | if (isset($item['url'])) { |
|||
| 135 | 3 | continue; |
|||
| 136 | } |
||||
| 137 | |||||
| 138 | 10 | ArrayHelper::setValue($items[$n], 'url', '#' . $options['id']); |
|||
| 139 | 10 | ArrayHelper::setValueByPath($items[$n], 'linkOptions.data.toggle', 'tab'); |
|||
| 140 | 10 | ArrayHelper::setValueByPath($items[$n], 'linkOptions.role', 'tab'); |
|||
| 141 | 10 | ArrayHelper::setValueByPath($items[$n], 'linkOptions.aria-controls', $options['id']); |
|||
| 142 | |||||
| 143 | 10 | if (!$disabled) { |
|||
| 144 | 10 | ArrayHelper::setValueByPath($items[$n], 'linkOptions.aria-selected', $selected ? 'true' : 'false'); |
|||
| 145 | } |
||||
| 146 | |||||
| 147 | 10 | Html::addCssClass($options, ['widget' => 'tab-pane']); |
|||
| 148 | |||||
| 149 | 10 | if ($selected) { |
|||
| 150 | 10 | Html::addCssClass($options, 'active'); |
|||
| 151 | } |
||||
| 152 | |||||
| 153 | 10 | if ($this->renderTabContent) { |
|||
| 154 | 10 | $tag = ArrayHelper::remove($options, 'tag', 'div'); |
|||
| 155 | 10 | $this->panes[] = Html::tag($tag, $item['content'] ?? '', $options); |
|||
| 156 | } |
||||
| 157 | } |
||||
| 158 | 10 | } |
|||
| 159 | |||||
| 160 | /** |
||||
| 161 | * @return bool if there's active tab defined. |
||||
| 162 | */ |
||||
| 163 | 10 | protected function hasActiveTab(): bool |
|||
| 164 | { |
||||
| 165 | 10 | foreach ($this->items as $item) { |
|||
| 166 | 10 | if (isset($item['active']) && $item['active'] === true) { |
|||
| 167 | 4 | return true; |
|||
| 168 | } |
||||
| 169 | } |
||||
| 170 | |||||
| 171 | 9 | return false; |
|||
| 172 | } |
||||
| 173 | |||||
| 174 | /** |
||||
| 175 | * Sets the first visible tab as active. |
||||
| 176 | * |
||||
| 177 | * This method activates the first tab that is visible and not explicitly set to inactive (`'active' => false`). |
||||
| 178 | */ |
||||
| 179 | 9 | protected function activateFirstVisibleTab(): void |
|||
| 180 | { |
||||
| 181 | 9 | foreach ($this->items as $i => $item) { |
|||
| 182 | 9 | $active = ArrayHelper::getValue($item, 'active', null); |
|||
| 183 | 9 | $visible = ArrayHelper::getValue($item, 'visible', true); |
|||
| 184 | 9 | $disabled = ArrayHelper::getValue($item, 'disabled', false); |
|||
| 185 | |||||
| 186 | 9 | if ($visible && $active !== false && ($disabled !== true)) { |
|||
| 187 | 9 | $this->items[$i]['active'] = true; |
|||
| 188 | 9 | return; |
|||
| 189 | } |
||||
| 190 | } |
||||
| 191 | } |
||||
| 192 | |||||
| 193 | /** |
||||
| 194 | * Renders tab panes. |
||||
| 195 | * |
||||
| 196 | * @param array $panes |
||||
| 197 | * |
||||
| 198 | * @throws JsonException |
||||
| 199 | * |
||||
| 200 | * @return string the rendering result. |
||||
| 201 | */ |
||||
| 202 | 10 | public function renderPanes(array $panes): string |
|||
| 203 | { |
||||
| 204 | 10 | return $this->renderTabContent ? ("\n" . Html::tag('div', implode("\n", $panes), $this->tabContentOptions)) : ''; |
|||
| 205 | } |
||||
| 206 | |||||
| 207 | /** |
||||
| 208 | * Name of a class to use for rendering dropdowns withing this widget. Defaults to {@see Dropdown}. |
||||
| 209 | * |
||||
| 210 | * @param string $value |
||||
| 211 | * |
||||
| 212 | * @return $this |
||||
| 213 | */ |
||||
| 214 | public function dropdownClass(string $value): self |
||||
| 215 | { |
||||
| 216 | $this->dropdownClass = $value; |
||||
| 217 | |||||
| 218 | return $this; |
||||
| 219 | } |
||||
| 220 | |||||
| 221 | /** |
||||
| 222 | * Whether the labels for header items should be HTML-encoded. |
||||
| 223 | * |
||||
| 224 | * @param bool $value |
||||
| 225 | * |
||||
| 226 | * @return $this |
||||
| 227 | */ |
||||
| 228 | 1 | public function encodeLabels(bool $value): self |
|||
| 229 | { |
||||
| 230 | 1 | $this->encodeLabels = $value; |
|||
| 231 | |||||
| 232 | 1 | return $this; |
|||
| 233 | } |
||||
| 234 | |||||
| 235 | /** |
||||
| 236 | * List of HTML attributes for the header container tags. This will be overwritten by the "headerOptions" set in |
||||
| 237 | * individual {@see items}. |
||||
| 238 | * |
||||
| 239 | * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. |
||||
| 240 | * |
||||
| 241 | * @param array $value |
||||
| 242 | * |
||||
| 243 | * @return $this |
||||
| 244 | */ |
||||
| 245 | public function headerOptions(array $value): self |
||||
| 246 | { |
||||
| 247 | $this->headerOptions = $value; |
||||
| 248 | |||||
| 249 | return $this; |
||||
| 250 | } |
||||
| 251 | |||||
| 252 | /** |
||||
| 253 | * List of tabs in the tabs widget. Each array element represents a single tab with the following structure: |
||||
| 254 | * |
||||
| 255 | * - label: string, required, the tab header label. |
||||
| 256 | * - encode: bool, optional, whether this label should be HTML-encoded. This param will override |
||||
| 257 | * global `$this->encodeLabels` param. |
||||
| 258 | * - headerOptions: array, optional, the HTML attributes of the tab header. |
||||
| 259 | * - linkOptions: array, optional, the HTML attributes of the tab header link tags. |
||||
| 260 | * - content: string, optional, the content (HTML) of the tab pane. |
||||
| 261 | * - url: string, optional, an external URL. When this is specified, clicking on this tab will bring |
||||
| 262 | * the browser to this URL. |
||||
| 263 | * - options: array, optional, the HTML attributes of the tab pane container. |
||||
| 264 | * - active: bool, optional, whether this item tab header and pane should be active. If no item is marked as |
||||
| 265 | * 'active' explicitly - the first one will be activated. |
||||
| 266 | * - visible: bool, optional, whether the item tab header and pane should be visible or not. Defaults to true. |
||||
| 267 | * - items: array, optional, can be used instead of `content` to specify a dropdown items |
||||
| 268 | * configuration array. Each item can hold three extra keys, besides the above ones: |
||||
| 269 | * * active: bool, optional, whether the item tab header and pane should be visible or not. |
||||
| 270 | * * content: string, required if `items` is not set. The content (HTML) of the tab pane. |
||||
| 271 | * * contentOptions: optional, array, the HTML attributes of the tab content container. |
||||
| 272 | * |
||||
| 273 | * @param array $value |
||||
| 274 | * |
||||
| 275 | * @return $this |
||||
| 276 | */ |
||||
| 277 | 10 | public function items(array $value): self |
|||
| 278 | { |
||||
| 279 | 10 | $this->items = $value; |
|||
| 280 | |||||
| 281 | 10 | return $this; |
|||
| 282 | } |
||||
| 283 | |||||
| 284 | /** |
||||
| 285 | * List of HTML attributes for the item container tags. This will be overwritten by the "options" set in individual |
||||
| 286 | * {@see items}. The following special options are recognized. |
||||
| 287 | * |
||||
| 288 | * @param array $value |
||||
| 289 | * |
||||
| 290 | * @return $this |
||||
| 291 | * |
||||
| 292 | * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. |
||||
| 293 | */ |
||||
| 294 | 1 | public function itemOptions(array $value): self |
|||
| 295 | { |
||||
| 296 | 1 | $this->itemOptions = $value; |
|||
| 297 | |||||
| 298 | 1 | return $this; |
|||
| 299 | } |
||||
| 300 | |||||
| 301 | /** |
||||
| 302 | * List of HTML attributes for the tab header link tags. This will be overwritten by the "linkOptions" set in |
||||
| 303 | * individual {@see items}. |
||||
| 304 | * |
||||
| 305 | * @param array $value |
||||
| 306 | * |
||||
| 307 | * @return $this |
||||
| 308 | * |
||||
| 309 | * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. |
||||
| 310 | */ |
||||
| 311 | public function linkOptions(array $value): self |
||||
| 312 | { |
||||
| 313 | $this->linkOptions = $value; |
||||
| 314 | |||||
| 315 | return $this; |
||||
| 316 | } |
||||
| 317 | |||||
| 318 | /** |
||||
| 319 | * Specifies the Bootstrap tab styling. |
||||
| 320 | * |
||||
| 321 | * @param string $value |
||||
| 322 | * |
||||
| 323 | * @return $this |
||||
| 324 | */ |
||||
| 325 | public function navType(string $value): self |
||||
| 326 | { |
||||
| 327 | $this->navType = $value; |
||||
| 328 | |||||
| 329 | return $this; |
||||
| 330 | } |
||||
| 331 | |||||
| 332 | /** |
||||
| 333 | * The HTML attributes for the widget container tag. The following special options are recognized. |
||||
| 334 | * |
||||
| 335 | * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. |
||||
| 336 | * |
||||
| 337 | * @param array $value |
||||
| 338 | * |
||||
| 339 | * @return $this |
||||
| 340 | */ |
||||
| 341 | 2 | public function options(array $value): self |
|||
| 342 | { |
||||
| 343 | 2 | $this->options = $value; |
|||
| 344 | |||||
| 345 | 2 | return $this; |
|||
| 346 | } |
||||
| 347 | |||||
| 348 | /** |
||||
| 349 | * Tab panes (contents). |
||||
| 350 | * |
||||
| 351 | * @param array $value |
||||
| 352 | * |
||||
| 353 | * @return $this |
||||
| 354 | */ |
||||
| 355 | public function panes(array $value): self |
||||
| 356 | { |
||||
| 357 | $this->panes = $value; |
||||
| 358 | |||||
| 359 | return $this; |
||||
| 360 | } |
||||
| 361 | |||||
| 362 | /** |
||||
| 363 | * Whether to render the `tab-content` container and its content. You may set this property to be false so that you |
||||
| 364 | * can manually render `tab-content` yourself in case your tab contents are complex. |
||||
| 365 | * |
||||
| 366 | * @param bool $value |
||||
| 367 | * |
||||
| 368 | * @return $this |
||||
| 369 | */ |
||||
| 370 | 1 | public function renderTabContent(bool $value): self |
|||
| 371 | { |
||||
| 372 | 1 | $this->renderTabContent = $value; |
|||
| 373 | |||||
| 374 | 1 | return $this; |
|||
| 375 | } |
||||
| 376 | |||||
| 377 | /** |
||||
| 378 | * List of HTML attributes for the `tab-content` container. This will always contain the CSS class `tab-content`. |
||||
| 379 | * |
||||
| 380 | * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. |
||||
| 381 | * |
||||
| 382 | * @param array $value |
||||
| 383 | * |
||||
| 384 | * @return $this |
||||
| 385 | */ |
||||
| 386 | 1 | public function tabContentOptions(array $value): self |
|||
| 387 | { |
||||
| 388 | 1 | $this->tabContentOptions = $value; |
|||
| 389 | |||||
| 390 | 1 | return $this; |
|||
| 391 | } |
||||
| 392 | } |
||||
| 393 |