Form - landrisek/impala GitHub Wiki

You can create your own react form using all advantage of validators and asynchronous javascript rerendering only for specific component by extending ReactForm:

With your own react component:

final class MyForm extends Impala\ReactForm { public function __construct(string $assets, \Impala\IBuilder $builder, \Nette\Http\IRequest $request) {     parent::__construct($myAssets . '/MyForm.js', null, $request);     $this->builder = $builder; } or: public function __construct(string $assets, Nette\Http\IRequest $request) {     parent::__construct($myAssets . '/MyForm.js', 'myId', $request); }

Without your own react component (only php):

final class MyForm extends Impala\ReactForm {     public function __construct(string $assets, \Nette\Http\IRequest $request, \Nette\Localization\ITranslator $translatorRepository) {         parent::__construct($impalaAssets . '/GeneralForm.js', 'generalForm', $request);     $this->translatorRepository = $translatorRepository;     }     public function attached(\Nette\ComponentModel\IComponent $presenter): void {         parent::attached($presenter);     if ($presenter instanceof \Nette\Application\IPresenter) {         $this->addText('email', ucfirst($this->translationsRepository->translate('email')))->addRule(\Impala\Validators::EMAIL);         }     }

Overriding validation and submit methods:

    public function handleValidate(): void {         $values = $this->builder->getPost('row');         $validators = [];         if(!is_string($values['myString'])) {             $validators['myKey'] = self::NOT_STRING;         }         $this->getPresenter()->sendResponse(\Nette\Applications\Responses\JsonResponse($validators));     }     public function handleSubmit(): void {         $values = $this->builder->getPost('row');     }

Google map:

$this->addGoogleMap('gps', 'Gps', ['data' => ['Latitude' => $row['latitude'], 'Longitude' => $row['longitude'], 'Zoom' => 11]]);

ReactForm:

In php you need your nette component to extend Impala\ReactForm In react you need your react component to extend file in Form.jsx on github $form = new ReactForm(); $form->addProgressBar('submitId'); $form->addSubmit('submitId','onClick'=>'start'); Added progressbar would be bind to Impala:handlePrepare(), Impala:handleRun(), Impala:handleDone() or running this.run(data, progressBarId) method in Form.jsx can be overloaded in react child component

Ordering**

As Impala\ReactForm need to concat keys with numerics values with underscore (e.g. "_6"), Impala\IRowBuilder must treat this in update methods. This is provide in automatic test RowBuilder.phpt and depend on setting primary keys for testUser in config: