component.Base: getPlugin() => find via type / ntype neomjs#5407

examples/fieldWithPrefix/MainContainer.mjs

@@ -19,7 +19,7 @@ class MainContainer extends ConfigurationViewport {
 
  onPluginConfigChange(config, opts) {
  const textfield = this.exampleComponent.items[0],
- plugin = textfield.getPlugin({flag: 'prefix'});
+ plugin = textfield.getPlugin('prefixfield');
 
  if (config === 'accept') {
  plugin.accept = opts.record.value;
@@ -88,7 +88,6 @@ class MainContainer extends ConfigurationViewport {
  plugins : [
  {
  module : PrefixPlugin,
- flag : 'prefix',
  pattern: '+1 (___) ___-___-____',
  slots : '_'
  }
@@ -99,7 +98,6 @@ class MainContainer extends ConfigurationViewport {
  plugins : [
  {
  module : PrefixPlugin,
- flag : 'prefix',
  pattern: 'dd/mm/yyyy hh:mm',
  slots : 'dmyh'
  }
@@ -110,7 +108,6 @@ class MainContainer extends ConfigurationViewport {
  plugins : [
  {
  module : PrefixPlugin,
- flag : 'prefix',
  pattern: 'XX:XX:XX:XX:XX:XX',
  slots : 'X',
  accept : '[A-H]'
@@ -122,7 +119,6 @@ class MainContainer extends ConfigurationViewport {
  plugins : [
  {
  module : PrefixPlugin,
- flag : 'prefix',
  pattern: '__-__-__-____',
  slots : '_',
  accept : /\w/
@@ -134,7 +130,6 @@ class MainContainer extends ConfigurationViewport {
  plugins : [
  {
  module : PrefixPlugin,
- flag : 'prefix',
  pattern: '.... .... .... ....',
  slots : '.',
  accept : /\d/

examples/list/animate/MainContainerController.mjs

@@ -65,7 +65,7 @@ class MainContainerController extends Component {
  * @param {Object} data
  */
  changeTransitionDuration(data) {
- this.getReference('list').getPlugin('animate').transitionDuration = data.value;
+ this.getReference('list').getPlugin('list-animate').transitionDuration = data.value;
  }
 }
 

src/calendar/view/week/Component.mjs

@@ -355,27 +355,24 @@ class Component extends BaseComponent {
  * @protected
  */
  afterSetEnableDrag(value, oldValue) {
- let me = this;
-
- if (value && !me.getPlugin({flag: 'dragdrop'})) {
+ if (value && !this.getPlugin('calendar-week-dragdrop')) {
  Promise.all([
  import('./plugin/DragDrop.mjs'),
  import('./plugin/EventResizable.mjs')
  ]).then(modules => {
- let me = this,
- plugins = me.plugins || [];
+ let me = this,
+ {appName} = me,
+ plugins = me.plugins || [];
 
  plugins.push({
  module : modules[0].default,
- appName: me.appName,
- flag : 'dragdrop',
+ appName,
  ...me.pluginDragDropConfig
  }, {
  module : modules[1].default,
- appName : me.appName,
+ appName,
  delegationCls: 'neo-event',
  directions : ['b', 't'],
- flag : 'resizable',
  ...me.pluginEventResizableConfig
  });
 

src/calendar/view/week/plugin/DragDrop.mjs

@@ -16,6 +16,11 @@ class DragDrop extends Base {
  * @protected
  */
  className: 'Neo.calendar.view.week.plugin.DragDrop',
+ /**
+ * @member {String} ntype='plugin-calendar-week-dragdrop'
+ * @protected
+ */
+ ntype: 'plugin-calendar-week-dragdrop',
  /**
  * @member {Boolean} isDragging=false
  * @protected
@@ -148,7 +153,7 @@ class DragDrop extends Base {
  style: {opacity: 1}
  }).then(() => {
  owner.eventDragZone.dragEnd();
- owner.getPlugin({flag:'resizable'}).onDragEnd(data);
+ owner.getPlugin('calendar-week-eventresizable').onDragEnd(data);
  });
  }
  }
@@ -217,7 +222,7 @@ class DragDrop extends Base {
  proxyParentId : data.path[0].id
  });
 
- owner.getPlugin({flag:'resizable'}).onDragStart(data);
+ owner.getPlugin('calendar-week-eventresizable').onDragStart(data);
  eventDragZone.dragStart(data);
 
  setTimeout(() => {
@@ -242,7 +247,7 @@ class DragDrop extends Base {
 
  if (!me.isTopLevelEvent(data)) {
  data = me.adjustResizeEvent(data);
- owner.getPlugin({flag:'resizable'}).onDragEnd(data);
+ owner.getPlugin('calendar-week-eventresizable').onDragEnd(data);
  } else {
  owner.eventDragZone.removeBodyCursorCls();
  }
@@ -297,7 +302,7 @@ class DragDrop extends Base {
  if (isTopLevelEvent) {
  eventDragZone.addBodyCursorCls();
  } else {
- owner.getPlugin({flag:'resizable'}).onDragStart(data);
+ owner.getPlugin('calendar-week-eventresizable').onDragStart(data);
  }
 
  eventDragZone.dragStart(data);

src/calendar/view/week/plugin/EventResizable.mjs

@@ -10,7 +10,12 @@ class EventResizable extends Resizable {
  * @member {String} className='Neo.calendar.view.week.plugin.EventResizable'
  * @protected
  */
- className: 'Neo.calendar.view.week.plugin.EventResizable'
+ className: 'Neo.calendar.view.week.plugin.EventResizable',
+ /**
+ * @member {String} ntype='plugin-calendar-week-eventresizable'
+ * @protected
+ */
+ ntype: 'plugin-calendar-week-eventresizable'
  }
 
  /**

src/component/Base.mjs

@@ -1637,7 +1637,13 @@ class Base extends CoreBase {
  * @returns {Neo.plugin.Base|null}
  */
  getPlugin(opts) {
- opts = typeof opts !== 'string' ? opts : {id: opts};
+ if (Neo.isString(opts)) {
+ if (!opts.startsWith('plugin-')) {
+ opts = 'plugin-' + opts
+ }
+
+ opts = {ntype: opts}
+ }
 
  let me = this,
  hasMatch;

src/dialog/Base.mjs

@@ -188,7 +188,7 @@ class Base extends Panel {
  */
  afterSetAppName(value, oldValue) {
  let me = this,
- resizable = me.getPlugin({flag: 'resizable'});
+ resizable = me.getPlugin('resizable');
 
  if (me.dragZone) {
  me.dragZone.appName = value
@@ -298,22 +298,22 @@ class Base extends Panel {
  * @protected
  */
  afterSetResizable(value, oldValue) {
- value && import('../plugin/Resizable.mjs').then(module => {
- let me = this,
- plugins = me.plugins || [];
+ if (value && !this.getPlugin('resizable')) {
+ import('../plugin/Resizable.mjs').then(module => {
+ let me = this,
+ {appName} = me,
+ plugins = me.plugins || [];
 
- if (!me.getPlugin({flag: 'resizable'})) {
  plugins.push({
  module : module.default,
- appName : me.appName,
+ appName,
  delegationCls: 'neo-dialog',
- flag : 'resizable',
  ...me.resizablePluginConfig
  });
 
  me.plugins = plugins
- }
- })
+ })
+ }
  }
 
  /**
@@ -666,7 +666,7 @@ class Base extends Panel {
  if (!me.maximized) {
  me.isDragging = true;
 
- me.getPlugin({flag: 'resizable'})?.removeAllNodes();
+ me.getPlugin('resizable')?.removeAllNodes();
 
  if (!me.dragZone) {
  me.dragZone = Neo.create({

src/list/Base.mjs

@@ -195,19 +195,20 @@ class Base extends Component {
  * @protected
  */
  afterSetAnimate(value, oldValue) {
- value && import('./plugin/Animate.mjs').then(module => {
- let me = this,
- plugins = me.plugins || [];
-
- plugins.push({
- module : module.default,
- appName: me.appName,
- id : 'animate',
- ...me.pluginAnimateConfig
- });
+ if (value && !this.getPlugin('list-animate')) {
+ import('./plugin/Animate.mjs').then(module => {
+ let me = this,
+ plugins = me.plugins || [];
 
- me.plugins = plugins
- })
+ plugins.push({
+ module : module.default,
+ appName: me.appName,
+ ...me.pluginAnimateConfig
+ });
+
+ me.plugins = plugins
+ })
+ }
  }
 
  /**
@@ -564,7 +565,7 @@ class Base extends Component {
  me.afterSetHeaderlessSelectedIndex(headerlessSelectedIndex, null)
  }
 
- if (!(me.animate && !me.getPlugin('animate'))) {
+ if (!(me.animate && !me.getPlugin('list-animate'))) {
  vdom.cn = [];
 
  me.store.items.forEach((item, index) => {

src/list/plugin/Animate.mjs

@@ -20,6 +20,11 @@ class Animate extends Base {
  * @protected
  */
  className: 'Neo.list.plugin.Animate',
+ /**
+ * @member {String} ntype='plugin-list-animate'
+ * @protected
+ */
+ ntype: 'plugin-list-animate',
  /**
  * Read only
  * @member {Number|null} columns=null

src/plugin/Base.mjs

@@ -1,6 +1,7 @@
 import CoreBase from '../core/Base.mjs';
 
 /**
+ * Abstract base class for plugin implementations.
  * Plugins are intended to get put into the plugins config of component.Base
  * to enhance them or add additional features
  * @class Neo.plugin.Base
@@ -14,6 +15,7 @@ class Base extends CoreBase {
  */
  className: 'Neo.plugin.Base',
  /**
+ * All plugin ntypes need to start with 'plugin-' to ensure that component.Base: getPlugin() can find them
  * @member {String} ntype='plugin'
  * @protected
  */

src/plugin/PrefixField.mjs

@@ -11,7 +11,6 @@ import Base from './Base.mjs';
  * labelText: 'Credit Card',
  * plugins : [{
  * module : PrefixPlugin, // import PrefixPlugin from '../../src/plugin/PrefixField.mjs';
- * flag : 'prefix', // textField.getPlugins({flag: 'prefix'})
  * pattern: 'dd/mm/yyyy',
  * slots : 'dmy', // characters allowed to replace
  * accept : /\d/ // either '[A-Z]' or regex or undefined
@@ -30,7 +29,6 @@ class PrefixField extends Base {
  * @protected
  */
  ntype: 'plugin-prefixfield',
-
  /**
  * Custom cls added to the inputEl
  * @member {String} inputCls='neo-prefixfield-input'