unify dropdown with lookup and fix /w left/right action

atk4 · Jun 5, 2023 · 5e302f1 · 5e302f1
1 parent 84233ba
commit 5e302f1
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 12 deletions.
diff --git a/src/Form/Control/Dropdown.php b/src/Form/Control/Dropdown.php
@@ -5,13 +5,13 @@
 namespace Atk4\Ui\Form\Control;
 
 use Atk4\Ui\HtmlTemplate;
+use Atk4\Ui\Js\Jquery;
 use Atk4\Ui\Js\JsExpression;
 use Atk4\Ui\Js\JsExpressionable;
 use Atk4\Ui\Js\JsFunction;
 
 class Dropdown extends Input
 {
-    public $ui = 'dropdown fluid search selection';
     public $defaultTemplate = 'form/control/dropdown.html';
 
     public string $inputType = 'hidden';
@@ -165,12 +165,23 @@ public function setDropdownOptions($options): void
         $this->dropdownOptions = array_merge($this->dropdownOptions, $options);
     }
 
+    /**
+     * @param bool|string      $when
+     * @param JsExpressionable $action
+     *
+     * @return Jquery
+     */
+    protected function jsDropdown($when = false, $action = null): JsExpressionable
+    {
+        return $this->js($when, $action, 'div.ui.dropdown:has(> #' . $this->name . '_input)');
+    }
+
     /**
      * Render JS for dropdown.
      */
     protected function jsRenderDropdown(): JsExpressionable
     {
-        return $this->js(true)->dropdown($this->dropdownOptions);
+        return $this->jsDropdown(true)->dropdown($this->dropdownOptions);
     }
 
     /**
@@ -210,22 +221,21 @@ protected function htmlRenderValue(): void
     protected function renderView(): void
     {
         if ($this->multiple) {
-            $this->addClass('multiple');
+            $this->template->dangerouslySetHtml('multipleClass', 'multiple');
         }
 
         if ($this->readOnly || $this->disabled) {
             $this->setDropdownOption('allowTab', false);
-            $this->removeClass('search');
             if ($this->multiple) {
-                $this->js(true)->find('a i.delete.icon')->attr('class', 'disabled');
+                $this->jsDropdown(true)->find('a i.delete.icon')->attr('class', 'disabled');
             }
         }
 
         if ($this->disabled) {
-            $this->addClass('disabled');
+            $this->template->set('disabledClass', ' disabled');
             $this->template->dangerouslySetHtml('disabled', 'disabled="disabled"');
         } elseif ($this->readOnly) {
-            $this->addClass('read-only');
+            $this->template->set('disabledClass', ' read-only');
             $this->template->dangerouslySetHtml('disabled', 'readonly="readonly"');
 
             $this->setDropdownOption('allowTab', false);

diff --git a/src/Form/Control/Lookup.php b/src/Form/Control/Lookup.php
@@ -13,6 +13,7 @@
 use Atk4\Ui\Js\Jquery;
 use Atk4\Ui\Js\JsBlock;
 use Atk4\Ui\Js\JsExpression;
+use Atk4\Ui\Js\JsExpressionable;
 use Atk4\Ui\Js\JsFunction;
 use Atk4\Ui\Js\JsModal;
 use Atk4\Ui\Js\JsToast;
@@ -130,7 +131,6 @@ protected function init(): void
         parent::init();
 
         $this->template->set([
-            'inputId' => $this->name . '-ac',
             'placeholder' => $this->placeholder,
         ]);
 
@@ -142,6 +142,17 @@ protected function init(): void
         });
     }
 
+    /**
+     * @param bool|string      $when
+     * @param JsExpressionable $action
+     *
+     * @return Jquery
+     */
+    protected function jsDropdown($when = false, $action = null): JsExpressionable
+    {
+        return $this->js($when, $action, 'div.ui.dropdown:has(> #' . $this->name . '_input)');
+    }
+
     /**
      * Returns URL which would respond with first 50 matching records.
      */
@@ -261,7 +272,7 @@ protected function initQuickNewRecord(): void
                 $res->addStatement((new Jquery())->closest('.atk-modal')->modal('hide'));
 
                 $row = $this->renderRow($form->model);
-                $chain = new Jquery('#' . $this->name . '-ac');
+                $chain = $this->jsDropdown();
                 $chain->dropdown('set value', $row['value'])->dropdown('set text', $row['title']);
                 $res->addStatement($chain);
 
@@ -371,7 +382,7 @@ protected function renderView(): void
             ], $this->apiConfig['data'] ?? []);
         }
 
-        $chain = new Jquery('#' . $this->name . '-ac');
+        $chain = $this->jsDropdown();
 
         $this->initDropdown($chain);
 

diff --git a/template/form/control/dropdown.html b/template/form/control/dropdown.html
@@ -1,6 +1,7 @@
 
 <div {$attributes}>
 {$BeforeInput}{$AfterBeforeInput}
+<div class="ui dropdown {$multipleClass} search selection{$disabledClass}" style="width: 100%;">
 {$Input}
 <i class="dropdown icon"></i>
 <div class="default text">{$DefaultText}</div>
@@ -9,5 +10,6 @@
 {Item}<div class="item" data-value="{$value}">{Icon}<i class="{$iconClass}"></i>{/Icon}{$title}</div>
 {/Item}
 </div>
+</div>
 {$AfterInput}{$AfterAfterInput}
 </div>
diff --git a/template/form/control/dropdown.pug b/template/form/control/dropdown.pug
@@ -1,5 +1,6 @@
 | <div {$attributes}>
 | {$BeforeInput}{$AfterBeforeInput}
+| <div class="ui dropdown {$multipleClass} search selection{$disabledClass}" style="width: 100%;">
 | {$Input}
 | <i class="dropdown icon"></i>
 | <div class="default text">{$DefaultText}</div>
@@ -8,6 +9,7 @@
 | {Item}<div class="item" data-value="{$value}">{Icon}<i class="{$iconClass}"></i>{/Icon}{$title}</div>
 | {/Item}
 | </div>
+| </div>
 | {$AfterInput}{$AfterAfterInput}
 | </div>
 = "\n"
diff --git a/template/form/control/lookup.html b/template/form/control/lookup.html
@@ -1,7 +1,7 @@
 
 <div {$attributes}>
 {$BeforeInput}{$AfterBeforeInput}
-<div id="{$inputId}" class="ui {$multipleClass} search selection dropdown{$disabledClass}" style="width: 100%;">
+<div class="ui dropdown {$multipleClass} search selection{$disabledClass}" style="width: 100%;">
 {$Input}
 <i class="dropdown icon"></i>
 <div class="default text">{$placeholder}</div>

diff --git a/template/form/control/lookup.pug b/template/form/control/lookup.pug
@@ -1,6 +1,6 @@
 | <div {$attributes}>
 | {$BeforeInput}{$AfterBeforeInput}
-| <div id="{$inputId}" class="ui {$multipleClass} search selection dropdown{$disabledClass}" style="width: 100%;">
+| <div class="ui dropdown {$multipleClass} search selection{$disabledClass}" style="width: 100%;">
 | {$Input}
 | <i class="dropdown icon"></i>
 | <div class="default text">{$placeholder}</div>