Pārlūkot izejas kodu

异步组件优化

jqh 4 gadi atpakaļ
vecāks
revīzija
090d1a2e19

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
resources/dist/dcat/css/dcat-app-blue-dark.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
resources/dist/dcat/css/dcat-app-blue-light.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
resources/dist/dcat/css/dcat-app-blue.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
resources/dist/dcat/css/dcat-app-green.css


+ 5 - 1
src/Grid/LazyRenderable.php

@@ -26,7 +26,11 @@ abstract class LazyRenderable extends Renderable
      */
     public function render()
     {
-        return $this->prepare($this->grid())->render();
+        $class = $this->allowSimpleMode() ? 'simple-grid' : null;
+
+        return <<<HTML
+<div class="$class">{$this->prepare($this->grid())->render()}</div>
+HTML;
     }
 
     /**

+ 1 - 1
src/Traits/InteractsWithRenderApi.php

@@ -38,7 +38,7 @@ trait InteractsWithRenderApi
         return $this->renderable;
     }
 
-    public function setRenderable(LazyRenderable $renderable)
+    public function setRenderable(?LazyRenderable $renderable)
     {
         $this->renderable = $renderable;
 

+ 6 - 1
src/Widgets/Box.php

@@ -2,6 +2,7 @@
 
 namespace Dcat\Admin\Widgets;
 
+use Dcat\Admin\Grid\LazyRenderable as LazyGrid;
 use Illuminate\Contracts\Support\Renderable;
 
 class Box extends Widget
@@ -71,7 +72,11 @@ class Box extends Widget
      */
     public function content($content)
     {
-        $this->content = $content;
+        if ($content instanceof LazyGrid) {
+            $content->simple();
+        }
+
+        $this->content = $this->lazyRenderable($content);
 
         return $this;
     }

+ 19 - 26
src/Widgets/Card.php

@@ -2,30 +2,20 @@
 
 namespace Dcat\Admin\Widgets;
 
+use Dcat\Admin\Grid\LazyRenderable as LazyGrid;
+use Dcat\Admin\Traits\LazyWidget;
 use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Support\Str;
 
 class Card extends Widget
 {
-    /**
-     * @var string
-     */
     protected $view = 'admin::widgets.card';
-
     protected $title;
-
     protected $content;
-
     protected $footer;
-
-    /**
-     * @var array
-     */
     protected $tools = [];
-
-    /**
-     * @var bool
-     */
     protected $divider = false;
+    protected $padding;
 
     public function __construct($title = '', $content = null)
     {
@@ -34,15 +24,11 @@ class Card extends Widget
             $title = '';
         }
 
-        if ($title) {
-            $this->title($title);
-        }
-
-        if ($content !== null) {
-            $this->content($content);
-        }
+        $this->title($title);
+        $this->content($content);
 
         $this->class('card');
+        $this->id('card-'.Str::random(8));
     }
 
     /**
@@ -67,14 +53,23 @@ class Card extends Widget
         return $this;
     }
 
+    public function noPadding()
+    {
+        return $this->padding('0');
+    }
+
     /**
-     * @param string $content
+     * @param string|\Closure|Renderable|LazyWidget $content
      *
      * @return $this
      */
     public function content($content)
     {
-        $this->content = $content;
+        if ($content instanceof LazyGrid) {
+            $content->simple();
+        }
+
+        $this->content = $this->lazyRenderable($content);
 
         return $this;
     }
@@ -116,9 +111,7 @@ class Card extends Widget
     }
 
     /**
-     * Variables in view.
-     *
-     * @return array
+     * {@inheritDoc}
      */
     public function variables()
     {

+ 3 - 3
src/Widgets/DialogTable.php

@@ -15,7 +15,7 @@ class DialogTable extends Widget
     protected $title;
 
     /**
-     * @var AsyncTable
+     * @var LazyTable
      */
     protected $table;
 
@@ -66,7 +66,7 @@ class DialogTable extends Widget
             return $this;
         }
 
-        $this->table = AsyncTable::make($renderable)->simple()->runScript(false);
+        $this->table = LazyTable::make($renderable)->simple()->runScript(false);
 
         return $this;
     }
@@ -174,7 +174,7 @@ class DialogTable extends Widget
     }
 
     /**
-     * @return AsyncTable
+     * @return LazyTable
      */
     public function getTable()
     {

+ 72 - 0
src/Widgets/Lazy.php

@@ -0,0 +1,72 @@
+<?php
+
+namespace Dcat\Admin\Widgets;
+
+use Dcat\Admin\Contracts\LazyRenderable;
+use Dcat\Admin\Traits\InteractsWithRenderApi;
+use Illuminate\Support\Str;
+
+class Lazy extends Widget
+{
+    use InteractsWithRenderApi;
+
+    protected $target = 'lazy';
+    protected $load = true;
+
+    public function __construct(LazyRenderable $renderable = null, bool $load = true)
+    {
+        $this->setRenderable($renderable);
+
+        $this->class('lazy-box');
+        $this->id('lazy-'.Str::random(8));
+    }
+
+    /**
+     * 设置是否立即加载.
+     *
+     * @param bool $value
+     *
+     * @return $this
+     */
+    public function load(bool $value)
+    {
+        $this->load = $value;
+
+        return $this;
+    }
+
+    /**
+     * 获取触发异步渲染JS代码.
+     *
+     * @return string
+     */
+    public function getLoadScript()
+    {
+        return "$('{$this->getElementSelector()}').trigger('{$this->target}:load');";
+    }
+
+    protected function addScript()
+    {
+        $loader = $this->load ? "target.trigger('{$this->target}:load')" : '';
+
+        $this->script = <<<JS
+(function () {
+    var target = $('{$this->getElementSelector()}'), body = target;
+    {$this->getRenderableScript()}
+
+    body.html('<div style="min-height:150px"></div>').loading();
+    
+    {$loader}
+})();
+JS;
+    }
+
+    public function html()
+    {
+        $this->addScript();
+
+        return <<<HTML
+<div {$this->formatHtmlAttributes()}></div>
+HTML;
+    }
+}

+ 5 - 18
src/Widgets/AsyncTable.php → src/Widgets/LazyTable.php

@@ -5,7 +5,7 @@ namespace Dcat\Admin\Widgets;
 use Dcat\Admin\Grid\LazyRenderable;
 use Illuminate\Support\Str;
 
-class AsyncTable extends Widget
+class LazyTable extends Widget
 {
     public static $js = [
         '@grid-extension',
@@ -31,7 +31,7 @@ class AsyncTable extends Widget
     protected $simple;
 
     /**
-     * AsyncTable constructor.
+     * LazyTable constructor.
      *
      * @param LazyRenderable $renderable
      * @param bool $load
@@ -107,21 +107,12 @@ class AsyncTable extends Widget
 
     protected function addScript()
     {
+        $loader = $this->load ? $this->getLoadScript() : '';
+
         $this->script = <<<JS
 Dcat.grid.AsyncTable({container: '{$this->getElementSelector()}'});
+{$loader}
 JS;
-
-        if ($this->load) {
-            $this->script .= $this->getLoadScript();
-        }
-    }
-
-    /**
-     * @return string
-     */
-    public function getElementSelector()
-    {
-        return '#'.$this->getHtmlAttribute('id');
     }
 
     /**
@@ -138,10 +129,6 @@ JS;
     {
         if ($this->simple !== null) {
             $this->renderable->simple($this->simple);
-
-            if ($this->simple) {
-                $this->class('simple-grid', true);
-            }
         }
 
         $this->addScript();

+ 3 - 15
src/Widgets/Modal.php

@@ -169,7 +169,7 @@ class Modal extends Widget
     {
         if ($content instanceof LazyGrid) {
             $content = $table =
-                AsyncTable::make()
+                LazyTable::make()
                 ->from($content)
                 ->simple()
                 ->load(false);
@@ -287,16 +287,6 @@ class Modal extends Widget
         return $this->on('hidden.bs.modal', $script);
     }
 
-    /**
-     * 获取弹窗元素选择器.
-     *
-     * @return string
-     */
-    public function getElementSelector()
-    {
-        return '#'.$this->id();
-    }
-
     protected function addEventScript()
     {
         if (! $this->events) {
@@ -313,7 +303,7 @@ class Modal extends Widget
 
         $this->script = <<<JS
 (function () {
-    var target = $('{$this->getElementSelector()}');
+    var target = $('{$this->getElementSelector()}'), body = target.find('.modal-body');
     {$this->getRenderableScript()}
     {$script}
 })();
@@ -327,12 +317,10 @@ JS;
         }
 
         $this->on('show.bs.modal', <<<JS
-body = target.find('.modal-body');
-
 body.html('<div style="min-height:150px"></div>').loading();
         
 setTimeout(function () {
-    target.trigger('modal:load')
+    target.trigger('{$this->target}:load')
 }, {$this->delay});
 JS
         );

+ 1 - 1
src/Widgets/Tab.php

@@ -41,7 +41,7 @@ class Tab extends Widget
         $this->data['tabs'][] = [
             'id'      => mt_rand(),
             'title'   => $title,
-            'content' => $content instanceof Renderable ? $content->render() : $content,
+            'content' => $this->toString($this->lazyRenderable($content)),
             'type'    => static::TYPE_CONTENT,
         ];
 

+ 32 - 0
src/Widgets/Widget.php

@@ -3,6 +3,8 @@
 namespace Dcat\Admin\Widgets;
 
 use Dcat\Admin\Admin;
+use Dcat\Admin\Contracts\LazyRenderable;
+use Dcat\Admin\Grid\LazyRenderable as LazyGrid;
 use Dcat\Admin\Layout\Content;
 use Dcat\Admin\Support\Helper;
 use Dcat\Admin\Traits\HasHtmlAttributes;
@@ -187,6 +189,18 @@ abstract class Widget implements Renderable
     }
 
     /**
+     * 获取元素选择器.
+     *
+     * @return string
+     */
+    public function getElementSelector()
+    {
+        return '#'.$this->id();
+    }
+
+    /**
+     * 渲染HTML.
+     *
      * @return string
      */
     public function html()
@@ -244,6 +258,24 @@ abstract class Widget implements Renderable
         return $this->script;
     }
 
+    /**
+     * @param mixed $content
+     *
+     * @return Lazy|LazyTable|mixed
+     */
+    protected function lazyRenderable($content)
+    {
+        if ($content instanceof LazyGrid) {
+            return LazyTable::make($content);
+        }
+
+        if ($content instanceof LazyRenderable) {
+            return Lazy::make($content);
+        }
+
+        return $content;
+    }
+
     /**
      * @param $method
      * @param $parameters

Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels