Bartosz Dziewoński has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/191832

Change subject: FormLayout: Allow adding child layouts via config
......................................................................

FormLayout: Allow adding child layouts via config

Previously the only way to add content to a FormLayout was to call
->appendContent() / .$element.append() on it, which is pretty much a
private interface.

Let's turn it into a GroupElement and allow an array of
FieldsetLayouts to be passed as 'items' configuration option.

Bug: T89750
Change-Id: I9604dfd37af5b4d931e719c4af11326504137e45
---
M demos/pages/widgets.js
M demos/widgets.php
M php/layouts/FormLayout.php
M src/layouts/FormLayout.js
4 files changed, 119 insertions(+), 53 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/32/191832/1

diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 933098b..310d5fd 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1252,6 +1252,59 @@
                                        }
                                )
                        ]
+               } ),
+               new OO.ui.FormLayout( {
+                       method: 'GET',
+                       action: 'widgets.php',
+                       items: [
+                               new OO.ui.FieldsetLayout( {
+                                       label: 'Form layout',
+                                       items: [
+                                               new OO.ui.FieldLayout(
+                                                       new 
OO.ui.TextInputWidget( {
+                                                               name: 'username'
+                                                       } ),
+                                                       {
+                                                               label: 'User 
name',
+                                                               align: 'top'
+                                                       }
+                                               ),
+                                               new OO.ui.FieldLayout(
+                                                       new 
OO.ui.TextInputWidget( {
+                                                               name: 
'password',
+                                                               type: 'password'
+                                                       } ),
+                                                       {
+                                                               label: 
'Password',
+                                                               align: 'top'
+                                                       }
+                                               ),
+                                               new OO.ui.FieldLayout(
+                                                       new 
OO.ui.CheckboxInputWidget( {
+                                                               name: 
'rememberme',
+                                                               selected: true
+                                                       } ),
+                                                       {
+                                                               label: 
'Remember me',
+                                                               align: 'inline'
+                                                       }
+                                               ),
+                                               new OO.ui.FieldLayout(
+                                                       new 
OO.ui.ButtonInputWidget( {
+                                                               name: 'login',
+                                                               label: 'Log in',
+                                                               type: 'submit',
+                                                               flags: [ 
'primary', 'progressive' ],
+                                                               icon: 'check'
+                                                       } ),
+                                                       {
+                                                               label: null,
+                                                               align: 'top'
+                                                       }
+                                               )
+                                       ]
+                               } )
+                       ]
                } )
        ];
 
diff --git a/demos/widgets.php b/demos/widgets.php
index 810caad..c69db6c 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -714,62 +714,59 @@
                                        )
                                ) );
 
-                               $form = new OOUI\FormLayout( array(
+                               echo new OOUI\FormLayout( array(
                                        'method' => 'GET',
                                        'action' => 'widgets.php',
+                                       'items' => array(
+                                               new OOUI\FieldsetLayout( array(
+                                                       'label' => 'Form 
layout',
+                                                       'items' => array(
+                                                               new 
OOUI\FieldLayout(
+                                                                       new 
OOUI\TextInputWidget( array(
+                                                                               
'name' => 'username',
+                                                                       ) ),
+                                                                       array(
+                                                                               
'label' => 'User name',
+                                                                               
'align' => 'top',
+                                                                       )
+                                                               ),
+                                                               new 
OOUI\FieldLayout(
+                                                                       new 
OOUI\TextInputWidget( array(
+                                                                               
'name' => 'password',
+                                                                               
'type' => 'password',
+                                                                       ) ),
+                                                                       array(
+                                                                               
'label' => 'Password',
+                                                                               
'align' => 'top',
+                                                                       )
+                                                               ),
+                                                               new 
OOUI\FieldLayout(
+                                                                       new 
OOUI\CheckboxInputWidget( array(
+                                                                               
'name' => 'rememberme',
+                                                                               
'selected' => true,
+                                                                       ) ),
+                                                                       array(
+                                                                               
'label' => 'Remember me',
+                                                                               
'align' => 'inline',
+                                                                       )
+                                                               ),
+                                                               new 
OOUI\FieldLayout(
+                                                                       new 
OOUI\ButtonInputWidget( array(
+                                                                               
'name' => 'login',
+                                                                               
'label' => 'Log in',
+                                                                               
'type' => 'submit',
+                                                                               
'flags' => array( 'primary', 'progressive' ),
+                                                                               
'icon' => 'check',
+                                                                       ) ),
+                                                                       array(
+                                                                               
'label' => null,
+                                                                               
'align' => 'top',
+                                                                       )
+                                                               ),
+                                                       )
+                                               ) )
+                                       )
                                ) );
-
-                               $form->appendContent(
-                                       new OOUI\FieldsetLayout( array(
-                                               'label' => 'Form layout',
-                                               'items' => array(
-                                                       new OOUI\FieldLayout(
-                                                               new 
OOUI\TextInputWidget( array(
-                                                                       'name' 
=> 'username',
-                                                               ) ),
-                                                               array(
-                                                                       'label' 
=> 'User name',
-                                                                       'align' 
=> 'top',
-                                                               )
-                                                       ),
-                                                       new OOUI\FieldLayout(
-                                                               new 
OOUI\TextInputWidget( array(
-                                                                       'name' 
=> 'password',
-                                                                       'type' 
=> 'password',
-                                                               ) ),
-                                                               array(
-                                                                       'label' 
=> 'Password',
-                                                                       'align' 
=> 'top',
-                                                               )
-                                                       ),
-                                                       new OOUI\FieldLayout(
-                                                               new 
OOUI\CheckboxInputWidget( array(
-                                                                       'name' 
=> 'rememberme',
-                                                                       
'selected' => true,
-                                                               ) ),
-                                                               array(
-                                                                       'label' 
=> 'Remember me',
-                                                                       'align' 
=> 'inline',
-                                                               )
-                                                       ),
-                                                       new OOUI\FieldLayout(
-                                                               new 
OOUI\ButtonInputWidget( array(
-                                                                       'name' 
=> 'login',
-                                                                       'label' 
=> 'Log in',
-                                                                       'type' 
=> 'submit',
-                                                                       'flags' 
=> array( 'primary', 'progressive' ),
-                                                                       'icon' 
=> 'check',
-                                                               ) ),
-                                                               array(
-                                                                       'label' 
=> null,
-                                                                       'align' 
=> 'top',
-                                                               )
-                                                       ),
-                                               )
-                                       ) )
-                               );
-
-                               echo $form;
 
                                echo new OOUI\FieldsetLayout( array(
                                        'label' => 'PHP-specific',
diff --git a/php/layouts/FormLayout.php b/php/layouts/FormLayout.php
index 5270a9b..ca3e26d 100644
--- a/php/layouts/FormLayout.php
+++ b/php/layouts/FormLayout.php
@@ -16,15 +16,22 @@
         * @param string $config['method'] HTML form `method` attribute
         * @param string $config['action'] HTML form `action` attribute
         * @param string $config['enctype'] HTML form `enctype` attribute
+        * @param FieldsetLayout[] $config['items'] Items to add
         */
        public function __construct( array $config = array() ) {
                // Parent constructor
                parent::__construct( $config );
+
+               // Mixins
+               $this->mixin( new GroupElement( $this, array_merge( $config, 
array( 'group' => $this ) ) ) );
 
                // Initialization
                $attributeWhitelist = array( 'method', 'action', 'enctype' );
                $this
                        ->addClasses( array( 'oo-ui-formLayout' ) )
                        ->setAttributes( array_intersect_key( $config, 
array_flip( $attributeWhitelist ) ) );
+               if ( isset( $config['items'] ) ) {
+                       $this->addItems( $config['items'] );
+               }
        }
 }
diff --git a/src/layouts/FormLayout.js b/src/layouts/FormLayout.js
index f263ce5..8c0d151 100644
--- a/src/layouts/FormLayout.js
+++ b/src/layouts/FormLayout.js
@@ -3,12 +3,14 @@
  *
  * @class
  * @extends OO.ui.Layout
+ * @mixins OO.ui.GroupElement
  *
  * @constructor
  * @param {Object} [config] Configuration options
  * @cfg {string} [method] HTML form `method` attribute
  * @cfg {string} [action] HTML form `action` attribute
  * @cfg {string} [enctype] HTML form `enctype` attribute
+ * @cfg {OO.ui.FieldsetLayout[]} [items] Items to add
  */
 OO.ui.FormLayout = function OoUiFormLayout( config ) {
        // Configuration initialization
@@ -16,6 +18,9 @@
 
        // Parent constructor
        OO.ui.FormLayout.super.call( this, config );
+
+       // Mixin constructors
+       OO.ui.GroupElement.call( this, $.extend( {}, config, { $group: 
this.$element } ) );
 
        // Events
        this.$element.on( 'submit', this.onFormSubmit.bind( this ) );
@@ -28,11 +33,15 @@
                        action: config.action,
                        enctype: config.enctype
                } );
+       if ( Array.isArray( config.items ) ) {
+               this.addItems( config.items );
+       }
 };
 
 /* Setup */
 
 OO.inheritClass( OO.ui.FormLayout, OO.ui.Layout );
+OO.mixinClass( OO.ui.FormLayout, OO.ui.GroupElement );
 
 /* Events */
 

-- 
To view, visit https://gerrit.wikimedia.org/r/191832
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I9604dfd37af5b4d931e719c4af11326504137e45
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to