DefaultFormRenderer: supports option 'nextTo' & style 'control .multi'

Author: dg

src/Forms/Rendering/DefaultFormRenderer.php

@@ -46,7 +46,7 @@ class DefaultFormRenderer implements Nette\Forms\IFormRenderer
 	 *            .... label.requiredsuffix
 	 *          \---
 	 *
-	 *          /--- control.container [.odd]
+	 *          /--- control.container [.odd .multi]
 	 *            .... CONTROL [.required .error .text .password .file .submit .button]
 	 *            .... control.requiredsuffix
 	 *            .... control.description
@@ -88,6 +88,7 @@ class DefaultFormRenderer implements Nette\Forms\IFormRenderer
 		'control' => [
 			'container' => 'td',
 			'.odd' => null,
+			'.multi' => null,
 
 			'description' => 'small',
 			'requiredsuffix' => '',
@@ -217,6 +218,12 @@ public function renderErrors(Nette\Forms\IControl $control = null, bool $own = t
 		$errors = $control
 			? $control->getErrors()
 			: ($own ? $this->form->getOwnErrors() : $this->form->getErrors());
+		return $this->doRenderErrors($errors, (bool) $control);
+	}
+
+
+	private function doRenderErrors(array $errors, bool $control): string
+	{
 		if (!$errors) {
 			return '';
 		}
@@ -450,6 +457,8 @@ public function renderControl(Nette\Forms\IControl $control): Html
 			$description = $this->getValue('control requiredsuffix') . $description;
 		}
 
+		$els = $errors = [];
+		renderControl:
 		$control->setOption('rendered', true);
 		$el = $control->getControl();
 		if ($el instanceof Html) {
@@ -458,7 +467,16 @@ public function renderControl(Nette\Forms\IControl $control): Html
 			}
 			$el->class($this->getValue('control .error'), $control->hasErrors());
 		}
-		return $body->setHtml($el . $description . $this->renderErrors($control));
+		$els[] = $el;
+		$errors = array_merge($errors, $control->getErrors());
+
+		if ($nextTo = $control->getOption('nextTo')) {
+			$control = $control->getForm()->getComponent($nextTo);
+			$body->class($this->getValue('control .multi'), true);
+			goto renderControl;
+		}
+
+		return $body->setHtml(implode('', $els) . $description . $this->doRenderErrors($errors, true));
 	}
 
 

tests/Forms/Forms.renderer.1.expect

@@ -93,26 +93,14 @@
 <tr class="required">
 	<th><label for="frm-password" class="required">Choose password:</label></th>
 
-	<td><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text"></td>
-</tr>
-
-<tr>
-	<th><label for="frm-password2">Reenter password:</label></th>
-
-	<td><input type="password" name="password2" id="frm-password2" data-nette-rules='[{"op":":valid","rules":[{"op":":filled","msg":"Reenter your password"},{"op":":equal","msg":"Passwords do not match","arg":{"control":"password"}}],"control":"password"}]' class="text">
+	<td><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text"><input type="password" name="password2" id="frm-password2" data-nette-rules='[{"op":":valid","rules":[{"op":":filled","msg":"Reenter your password"},{"op":":equal","msg":"Passwords do not match","arg":{"control":"password"}}],"control":"password"}]' class="text"><input type="file" name="avatar" id="frm-avatar" data-nette-rules='[{"op":":fileSize","msg":"The size of the uploaded file can be up to %d% bytes.","arg":%d%},{"op":":filled","rules":[{"op":":image","msg":"Uploaded file is not image"}],"control":"avatar"}]' class="text">
 
 	<span class="error">
 		Reenter your password
 	</span>
 </td>
 </tr>
 
-<tr>
-	<th><label for="frm-avatar">Picture:</label></th>
-
-	<td><input type="file" name="avatar" id="frm-avatar" data-nette-rules='[{"op":":fileSize","msg":"The size of the uploaded file can be up to %d% bytes.","arg":%d%},{"op":":filled","rules":[{"op":":image","msg":"Uploaded file is not image"}],"control":"avatar"}]' class="text"></td>
-</tr>
-
 <tr>
 	<th><label for="frm-note">Comment:</label></th>
 

tests/Forms/Forms.renderer.1.phpt

@@ -86,10 +86,12 @@ $form->addSelect('countrySetItems', 'Country:')
 $form->addGroup('Your account');
 
 $form->addPassword('password', 'Choose password:')
+	->setOption('nextTo', 'password2')
 	->addRule(Form::FILLED, 'Choose your password')
 	->addRule(Form::MIN_LENGTH, 'The password is too short: it must be at least %d characters', 3);
 
 $form->addPassword('password2', 'Reenter password:')
+	->setOption('nextTo', 'avatar')
 	->addConditionOn($form['password'], Form::VALID)
 		->addRule(Form::FILLED, 'Reenter your password')
 		->addRule(Form::EQUAL, 'Passwords do not match', $form['password']);

tests/Forms/Forms.renderer.2.expect

@@ -81,7 +81,7 @@
 
 	<dt><label for="frm-password" class="required">Choose password:</label></dt>
 
-	<dd><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text is-invalid"> • <small>(at least 3 characters)</small>
+	<dd class="multi"><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text is-invalid"><input type="password" name="password2" id="frm-password2" data-nette-rules='[{"op":":valid","rules":[{"op":":filled","msg":"Reenter your password"},{"op":":equal","msg":"Passwords do not match","arg":{"control":"password"}}],"control":"password"}]' class="text"> • <small>(at least 3 characters)</small>
 
 	<span class="error">
 		The password is too short: it must be at least 3 characters
@@ -90,21 +90,15 @@
 
 
 
-	<dt><label for="frm-password2">Reenter password:</label></dt>
-
-	<dd class="odd"><input type="password" name="password2" id="frm-password2" data-nette-rules='[{"op":":valid","rules":[{"op":":filled","msg":"Reenter your password"},{"op":":equal","msg":"Passwords do not match","arg":{"control":"password"}}],"control":"password"}]' class="text"></dd>
-
-
-
 	<dt><label for="frm-avatar">Picture:</label></dt>
 
-	<dd><input type="file" name="avatar" id="frm-avatar" data-nette-rules='[{"op":":fileSize","msg":"The size of the uploaded file can be up to %d% bytes.","arg":%d%}]' class="text"></dd>
+	<dd class="odd"><input type="file" name="avatar" id="frm-avatar" data-nette-rules='[{"op":":fileSize","msg":"The size of the uploaded file can be up to %d% bytes.","arg":%d%}]' class="text"></dd>
 
 
 
 	<dt><label for="frm-note">Comment:</label></dt>
 
-	<dd class="odd"><textarea name="note" id="frm-note"></textarea></dd>
+	<dd><textarea name="note" id="frm-note"></textarea></dd>
 
 </dl>
 

tests/Forms/Forms.renderer.2.phpt

@@ -46,6 +46,7 @@ $renderer->wrappers['pair']['container'] = null;
 $renderer->wrappers['controls']['container'] = 'dl';
 $renderer->wrappers['control']['container'] = 'dd';
 $renderer->wrappers['control']['.odd'] = 'odd';
+$renderer->wrappers['control']['.multi'] = 'multi';
 $renderer->wrappers['control']['.error'] = 'is-invalid';
 $renderer->wrappers['control']['errors'] = true;
 $renderer->wrappers['label']['container'] = 'dt';
@@ -96,6 +97,7 @@ $form->addSelect('country', 'Country', $countries)
 $form->addGroup('Your account');
 
 $form->addPassword('password', 'Choose password')
+	->setOption('nextTo', 'password2')
 	->addRule(Form::FILLED, 'Choose your password')
 	->addRule(Form::MIN_LENGTH, 'The password is too short: it must be at least %d characters', 3)
 	->setOption('description', '(at least 3 characters)');