#16 refactoring rendering of inputs

Author: Eugene Tupikov

CHANGELOG.md

@@ -4,6 +4,8 @@ Yii2 multiple input change log
 1.1.1 under development
 -----------------------
 
+- Bug #16 refactoring rendering of inputs (unclead)
+
 1.1.0
 -----
 

examples/models/ExampleModel.php

@@ -31,6 +31,8 @@ class ExampleModel extends Model
      */
     public $schedule;
 
+    public $enable;
+
     public function init()
     {
         parent::init();
@@ -44,12 +46,14 @@ public function init()
             [
                 'day'       => '27.02.2015',
                 'user_id'   => 31,
-                'priority'  => 1
+                'priority'  => 1,
+                'enable'    => true
             ],
             [
                 'day'       => '27.02.2015',
                 'user_id'   => 33,
-                'priority'  => 2
+                'priority'  => 2,
+                'enable'    => false
             ],
         ];
     }

examples/views/example.php

@@ -25,10 +25,10 @@
 
     <h3>Single column</h3>
 <?php
-//    echo $form->field($model, 'emails')->widget(MultipleInput::className(), [
-//        'limit' => 5
-//    ])
-//    ->label(false);
+    echo $form->field($model, 'emails')->widget(MultipleInput::className(), [
+        'limit' => 5
+    ])
+    ->label(false);
 ?>
 
     <h3>Multiple columns</h3>
@@ -43,7 +43,6 @@
             'title' => 'User',
             'defaultValue' => 33,
             'items' => [
-                '' => 'Select user',
                 31 => 'item 31',
                 32 => 'item 32',
                 33 => 'item 33',
@@ -96,11 +95,15 @@
         [
             'type' => 'checkbox',
             'name' => 'enable',
-            'defaultValue' => 0
+            'defaultValue' => 0,
+            'headerOptions' => [
+                'style' => 'width: 20px;',
+            ]
         ]
     ]
 ]);
 ?>
+
 <?= Html::submitButton('Update', ['class' => 'btn btn-success']);?>
 <?php ActiveForm::end();?>
 

src/MultipleInputColumn.php

@@ -14,6 +14,7 @@
 use yii\db\ActiveRecord;
 use yii\helpers\ArrayHelper;
 use yii\helpers\Html;
+use yii\helpers\Inflector;
 
 /**
  * Class MultipleInputColumn
@@ -28,6 +29,8 @@ class MultipleInputColumn extends Object
     const TYPE_CHECKBOX_LIST    = 'checkboxList';
     const TYPE_RADIO_LIST       = 'radioList';
     const TYPE_STATIC           = 'static';
+    const TYPE_CHECKBOX         = 'checkbox';
+    const TYPE_RADIO            = 'radio';
 
     /**
      * @var string input name
@@ -174,38 +177,12 @@ public function prepareValue($data)
      */
     public function renderCellContent($value, $index)
     {
-        $type = $this->type;
         $name = $this->widget->getElementName($this->name, $index);
 
         $options = $this->options;
         $options['id'] = $this->widget->getElementId($this->name, $index);
-        Html::addCssClass($options, 'form-control');
 
-        switch ($this->type) {
-            case self::TYPE_HIDDEN_INPUT:
-                $input = Html::hiddenInput($name, $value, $options);
-                break;
-            case self::TYPE_DROPDOWN:
-            case self::TYPE_LISTBOX:
-            case self::TYPE_CHECKBOX_LIST:
-            case self::TYPE_RADIO_LIST:
-                $input = Html::$type($name, $value, $this->items, $options);
-                break;
-            case self::TYPE_STATIC:
-                $input = Html::tag('p', $value, ['class' => 'form-control-static']);
-                break;
-            default:
-                if (method_exists('yii\helpers\Html', $type)) {
-                    $input = Html::$type($name, $value, $options);
-                } elseif (class_exists($type) && method_exists($type, 'widget')) {
-                    $input = $type::widget(array_merge($options, [
-                        'name'  => $name,
-                        'value' => $value,
-                    ]));
-                } else {
-                    throw new InvalidConfigException("Invalid column type '$type'");
-                }
-        }
+        $input = $this->renderInput($name, $value, $options);
 
         if ($this->isHiddenInput()) {
             return $input;
@@ -233,6 +210,100 @@ public function renderCellContent($value, $index)
         ]);
     }
 
+    /**
+     * Renders the input.
+     *
+     * @param string $name name of the input
+     * @param mixed $value value of the input
+     * @param array $options the input options
+     * @return string
+     */
+    private function renderInput($name, $value, $options)
+    {
+        $method = 'render' . Inflector::camelize($this->type);
+
+        if (method_exists($this, $method)) {
+            $input = call_user_func_array([$this, $method], [$name, $value, $options]);
+        } else {
+            $input = $this->renderDefault($name, $value, $options);
+        }
+        return $input;
+    }
+
+
+    protected function renderDropDownList($name, $value, $options)
+    {
+        Html::addCssClass($options, 'form-control');
+        return Html::dropDownList($name, $value, $this->items, $options);
+    }
+
+    protected function renderListBox($name, $value, $options)
+    {
+        Html::addCssClass($options, 'form-control');
+        return Html::listBox($name, $value, $this->items, $options);
+    }
+
+    protected function renderHiddenInput($name, $value, $options)
+    {
+        return Html::hiddenInput($name, $value, $options);
+    }
+
+    protected function renderRadio($name, $value, $options)
+    {
+        if (!isset($options['label'])) {
+            $options['label'] = '';
+        }
+        $input = Html::radio($name, $value, $options);
+        return Html::tag('div', $input, ['class' => 'radio']);
+    }
+
+    protected function renderRadioList($name, $value, $options)
+    {
+        $options['item'] = function ($index, $label, $name, $checked, $value) {
+            return '<div class="radio">' . Html::radio($name, $checked, ['label' => $label, 'value' => $value]) . '</div>';
+        };
+        $input = Html::radioList($name, $value, $this->items, $options);
+        return Html::tag('div', $input, ['class' => 'radio']);
+    }
+
+    protected function renderCheckbox($name, $value, $options)
+    {
+        if (!isset($options['label'])) {
+            $options['label'] = '';
+        }
+        $input = Html::checkbox($name, $value, $options);
+        return Html::tag('div', $input, ['class' => 'checkbox']);
+    }
+
+    protected function renderCheckboxList($name, $value, $options)
+    {
+        $options['item'] = function ($index, $label, $name, $checked, $value) {
+            return '<div class="checkbox">' . Html::checkbox($name, $checked, ['label' => $label, 'value' => $value]) . '</div>';
+        };
+        $input = Html::checkboxList($name, $value, $this->items, $options);
+        return Html::tag('div', $input, ['class' => 'checkbox']);
+    }
+
+    protected function renderDefault($name, $value, $options)
+    {
+        $type = $this->type;
+
+        if ($type == self::TYPE_STATIC) {
+            $input = Html::tag('p', $value, ['class' => 'form-control-static']);
+        } elseif (method_exists('yii\helpers\Html', $type)) {
+            Html::addCssClass($options, 'form-control');
+            $input = Html::$type($name, $value, $options);
+        } elseif (class_exists($type) && method_exists($type, 'widget')) {
+            $input = $type::widget(array_merge($options, [
+                'name'  => $name,
+                'value' => $value,
+            ]));
+        } else {
+            throw new InvalidConfigException("Invalid column type '$type'");
+        }
+        return $input;
+    }
+
     /**
      * @param string $error
      * @return string

src/assets/src/css/multiple-input.css

@@ -7,7 +7,8 @@
     width: 80%;
 }
 
-.multiple-input-list.no-buttons .multiple-input-list__input {
+.multiple-input-list.no-buttons
+.multiple-input-list__input {
     display: block;
     width: 100%;
 }
@@ -29,4 +30,8 @@ table.multiple-input-list tr > th {
 }
 .multiple-input-list__item .list-cell__button {
     width: 40px;
+}
+.multiple-input-list__item .radio,
+.multiple-input-list__item .checkbox {
+    margin: 7px 0 7px 0;
 }