native-document 1.0.138 → 1.0.140

package/src/components/dropdown/Dropdown.js

@@ -1,49 +1,133 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import DropdownGroup from "./DropdownGroup";
-import DropdownTrigger from "./DropdownTrigger";
 import DropdownDivider from "./DropdownDivider";
+import DebugManager from "../../core/utils/debug-manager";
+import HasFullPosition from "../$traits/has-position/HasFullPosition";
+import { $ } from "../../../index";
+import {normalizeDropdownItem} from "./helpers";
+import {NDElement} from "../../core/wrappers/NDElement";
 
-export default function Dropdown(config = {}) {
+export default function Dropdown(props = {}) {
     if (!(this instanceof Dropdown)) {
-        return new Dropdown(config);
+        return new Dropdown(props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
         trigger: null,
-        items: [],
+        items: $.array([]),
         position: 'bottom-start',
+        interaction: 'click',
         offset: [0, 4],
-        disabled: false,
+        disabled: $(false),
         closeOnSelect: true,
         closeOnClickOutside: true,
         closeOnEscape: true,
         isOpen: $(false),
         maxHeight: null,
         searchable: false,
+        searchValue: null,
         searchPlaceholder: 'Search...',
         loopOnKeyboard: true,
-        renderTrigger: null,
         renderItem: null,
-        renderDivider: null,
         renderHeader: null,
         renderFooter: null,
+        renderContent: null,
         render: null,
-        ...config,
+        filter: null,
+        mapper: null,
+        filterDependencies: null,
+        matchTriggerWidth: null,
+        matchTargetWidth: null,
+        updatePositionOn: null,
+        includeTriggerIntoGhost: true,
+        props,
     };
-
-    this.$element = null;
 }
 
-BaseComponent.extends(Dropdown, HasEventEmitter);
-
+BaseComponent.extends(Dropdown);
+BaseComponent.use(Dropdown, HasEventEmitter, HasFullPosition);
 
 Dropdown.defaultTemplate = null;
 
 Dropdown.use = function(template) {
-    Dropdown.defaultTemplate = template.render;
+    Dropdown.defaultTemplate = template;
+
+    if(!NDElement.prototype.dropdown) {
+        NDElement.prototype.dropdown = function(dropdown) {
+            if(!(dropdown instanceof Dropdown)) {
+                throw new Error('The dropdown must be an instance of Dropdown.');
+            }
+            this.ghostDom(dropdown.trigger(this.$element));
+            return this;
+        };
+    }
+    if(!BaseComponent.prototype.dropdown) {
+        BaseComponent.prototype.dropdown = function(dropdown) {
+            if(!(dropdown instanceof Dropdown)) {
+                throw new Error('The dropdown must be an instance of Dropdown.');
+            }
+            this.postBuild(() => {
+                this.ghostDom(dropdown.trigger(this.$element));
+            });
+            return this;
+        }
+    }
+
+};
+
+Dropdown.preset = function(name, callback) {
+    if (Dropdown.prototype[name] || Dropdown[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Dropdown.`);
+        return;
+    }
+    Dropdown[name] = (props) => callback(new Dropdown(props));
+};
+
+Dropdown.presets = function(presets) {
+    for (const name in presets) {
+        Dropdown.preset(name, presets[name]);
+    }
+};
+
+Dropdown.prototype.open = function() {
+    this.$description.isOpen.set(true);
+    return this;
+};
+
+Dropdown.prototype.bind = function(source, mapper) {
+    this.$description.items = source.__$Observable ? source : $.array(source);
+    this.$description.mapper = mapper;
+    return this;
+};
+Dropdown.prototype.source = Dropdown.prototype.bind;
+Dropdown.prototype.from = Dropdown.prototype.bind;
+
+Dropdown.prototype.close = function() {
+    this.$description.isOpen.set(false);
+    return this;
+};
+
+Dropdown.prototype.toggle = function() {
+    return this.$description.isOpen.val() ? this.close() : this.open();
+};
+
+Dropdown.prototype.disabled = function(disabled = true) {
+    this.$description.disabled = BaseComponent.obs(disabled);
+    return this;
 };
 
+Dropdown.prototype.enable = function() {
+    this.$description.disabled.set(false);
+    return this;
+};
+Dropdown.prototype.disable = function() {
+    this.$description.disabled.set(true);
+    return this;
+}
+
 Dropdown.prototype.value = function(value) {
     this.$description.value = value;
     return this;
@@ -54,11 +138,12 @@ Dropdown.prototype.placeholder = function(placeholder) {
     return this;
 };
 
-Dropdown.prototype.searchable = function(searchable, placeholder = null) {
+Dropdown.prototype.searchable = function(searchable = true, placeholder = null) {
     this.$description.searchable = searchable;
     if (placeholder) {
         this.$description.searchPlaceholder = placeholder;
     }
+    this.$description.searchValue = $('');
     return this;
 };
 
@@ -87,27 +172,29 @@ Dropdown.prototype.maxHeight = function(maxHeight) {
     return this;
 };
 
-Dropdown.prototype.trigger = function(trigger) {
-    if (trigger instanceof DropdownTrigger) {
-        trigger.setIsOpen(this.$description.isOpen);
-        this.$description.trigger = trigger;
-        return this;
-    }
-
+Dropdown.prototype.trigger = function(trigger, includeTriggerIntoGhost = true) {
     this.$description.trigger = trigger;
+    this.$description.includeTriggerIntoGhost = includeTriggerIntoGhost;
     return this;
 };
 
-Dropdown.prototype.add = function(item) {
-    this.$description.items.push(item);
+Dropdown.prototype.add = function(item, props = {}) {
+    this.$description.items.push(normalizeDropdownItem(item, null, props));
     return this;
 };
+Dropdown.prototype.menu = Dropdown.prototype.add;
 Dropdown.prototype.item = Dropdown.prototype.add;
 
-Dropdown.prototype.items = function(items) {
-    for(const item of items) {
-        this.add(item);
+Dropdown.prototype.from = function(items, mapper = null) {
+    if(items.__$isObservableArray) {
+        this.$description.items.set(items.map((item) => normalizeDropdownItem(item, mapper)));
+        return this;
+    }
+
+    for(let i = 0; i < items.length; i++) {
+        this.add(normalizeDropdownItem(items[i], mapper));
     }
+
     return this;
 };
 
@@ -125,6 +212,7 @@ Dropdown.prototype.divider = function() {
 
 Dropdown.prototype.select = function(value) {
     this.$description.value?.set(value);
+    return this;
 };
 
 Dropdown.prototype.next = function() {
@@ -134,6 +222,7 @@ Dropdown.prototype.next = function() {
 Dropdown.prototype.preview = function() {
 
 };
+
 Dropdown.prototype.loopOnKeyboard = function(loopOnKeyboard) {
     this.$description.loopOnKeyboard = loopOnKeyboard;
     return this;
@@ -144,8 +233,13 @@ Dropdown.prototype.onChange= function(handler) {
     return this;
 };
 
-Dropdown.prototype.renderTrigger = function(renderFn) {
-    this.$description.renderTrigger = renderFn;
+Dropdown.prototype.onOpen = function(handler) {
+    this.on('open', handler);
+    return this;
+};
+
+Dropdown.prototype.onClose = function(handler) {
+    this.on('close', handler);
     return this;
 };
 
@@ -154,17 +248,61 @@ Dropdown.prototype.renderSearch = function(renderFn) {
     return this;
 };
 
-Dropdown.prototype.renderItem = function(renderFn) {
-    this.$description.renderItem = renderFn;
+
+Dropdown.prototype.interaction = function(interaction) {
+    this.$description.interaction = interaction;
+    return this;
+};
+
+
+Dropdown.prototype.filter = function(filter, dependencies) {
+    this.$description.filter = filter;
+    this.$description.filterDependencies = dependencies;
+    return this;
+};
+
+Dropdown.prototype.onClicked = function() {
+    this.$description.interaction = 'click';
     return this;
 };
 
-Dropdown.prototype.renderMenu = function(renderFn) {
-    this.$description.renderMenu = renderFn;
+Dropdown.prototype.onHovered = function() {
+    this.$description.interaction = 'hover';
     return this;
 };
 
-Dropdown.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
+Dropdown.prototype.onFocused = function() {
+    this.$description.interaction = 'focus';
     return this;
 };
+
+Dropdown.prototype.renderHeader = function(renderFn) {
+    this.$description.renderHeader = renderFn;
+    return this;
+};
+
+Dropdown.prototype.renderFooter = function(renderFn) {
+    this.$description.renderFooter = renderFn;
+    return this;
+};
+
+Dropdown.prototype.renderContent = function(renderFn) {
+    this.$description.renderContent = renderFn;
+    return this;
+};
+Dropdown.prototype.matchTriggerWidth = function() {
+    this.$description.matchTriggerWidth = true;
+    return this;
+};
+Dropdown.prototype.matchTargetWidth = function(target) {
+    this.$description.matchTargetWidth = target;
+    return this;
+};
+Dropdown.prototype.renderItem = function(callback) {
+    this.$description.renderItem = callback;
+    return this;
+};
+Dropdown.prototype.updatePositionOn = function(updatePositionOn) {
+    this.$description.updatePositionOn = updatePositionOn;
+    return this;
+};

package/src/components/dropdown/DropdownDivider.js

@@ -1,11 +1,12 @@
 import BaseComponent from "../BaseComponent";
 
-export default function DropdownDivider() {
+export default function DropdownDivider(props = {}) {
     if(!(this instanceof DropdownDivider)) {
         return new DropdownDivider();
     }
     this.$description  = {
-        type: 'divider'
+        type: 'divider',
+        props
     };
 }
 
@@ -14,7 +15,7 @@ BaseComponent.extends(DropdownDivider);
 DropdownDivider.defaultTemplate = null;
 
 DropdownDivider.use = function(template) {
-    DropdownDivider.defaultTemplate = template.divider;
+    DropdownDivider.defaultTemplate = template;
 };
 
 

package/src/components/dropdown/DropdownGroup.js

@@ -1,23 +1,36 @@
 import DropdownItem from "./DropdownItem";
 import BaseComponent from "../BaseComponent";
 import DropdownDivider from "./DropdownDivider";
+import { $ } from "../../../index";
+import {normalizeDropdownItem} from "./helpers";
 
-
-export default function DropdownGroup(config) {
+export default function DropdownGroup(props) {
     if(!(this instanceof DropdownGroup)) {
-        return new DropdownGroup(config);
+        return new DropdownGroup(props);
     }
 
-    DropdownItem.call(this, config);
+    DropdownItem.call(this, props);
 
     Object.assign(this.$description, {
-        renderItem: config.renderItem || null,
-        items: config.items || []
+        items: $.array([]),
     });
 }
 
 BaseComponent.extends(DropdownGroup, DropdownItem);
 
+DropdownGroup.defaultTemplate = null;
+DropdownGroup.use = function(template) {
+    DropdownGroup.defaultTemplate = template;
+};
+
+DropdownGroup.prototype.add = function(item, props) {
+    this.$description.items.push(normalizeDropdownItem(item, null, props));
+    return this;
+};
+
+DropdownGroup.prototype.menu = DropdownGroup.prototype.add;
+DropdownGroup.prototype.item = DropdownGroup.prototype.add;
+
 DropdownGroup.prototype.group = function(groupBuilder) {
     const item = new DropdownGroup();
     groupBuilder && groupBuilder(item);
@@ -29,16 +42,3 @@ DropdownGroup.prototype.divider = function() {
     this.$description.items.push(new DropdownDivider());
     return this;
 };
-
-DropdownGroup.prototype.renderItem = function(renderFn) {
-    this.$description.renderItem = renderFn;
-};
-
-
-DropdownGroup.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
-};
-
-DropdownGroup.prototype.toNdElement = function() {
-
-};

package/src/components/dropdown/DropdownItem.js

@@ -1,24 +1,34 @@
 import BaseComponent from "../BaseComponent";
 
 
-export default function DropdownItem(config = {}) {
+export default function DropdownItem(props = {}) {
     if(!(this instanceof DropdownItem)) {
-        return new DropdownItem(config);
+        return new DropdownItem(props);
     }
+
+    BaseComponent.call(this, props);
+
     this.$description = {
         icon: null,
         content: null,
-        shortcuts: null,
+        shortcut: null,
         value: null,
         disabled: false,
+        selected: false,
         data: null,
         render: null,
-        ...config
+        renderContent: null,
+        props
     };
 };
 
 BaseComponent.extends(DropdownItem);
 
+DropdownItem.defaultTemplate = null;
+DropdownItem.use = function(template) {
+    DropdownItem.defaultTemplate = template;
+};
+
 DropdownItem.prototype.value = function(value) {
     this.$description.value = value;
     return this;
@@ -29,7 +39,12 @@ DropdownItem.prototype.getValue = function() {
 };
 
 DropdownItem.prototype.disabled = function(disabled = true) {
-    this.$description.disabled = disabled;
+    this.$description.disabled = BaseComponent.obs(disabled);
+    return this;
+};
+
+DropdownItem.prototype.selected = function(selected = true) {
+    this.$description.selected = BaseComponent.obs(selected);
     return this;
 };
 
@@ -52,20 +67,11 @@ DropdownItem.prototype.getData = function() {
     return this.$description.data;
 };
 
-DropdownItem.prototype.shortcuts = function(shortcuts) {
-    this.$description.shortcuts = shortcuts;
+DropdownItem.prototype.shortcut = function(shortcut) {
+    this.$description.shortcut = shortcut;
     return this;
 };
-
-DropdownItem.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
+DropdownItem.prototype.renderContent = function(callback) {
+    this.$description.renderContent = callback;
     return this;
 };
-
-DropdownItem.prototype.$build = function() {
-
-};
-
-DropdownItem.prototype.toNdElement = function() {
-
-};

package/src/components/dropdown/helpers.js

@@ -0,0 +1,52 @@
+import {DropdownItem} from "./index";
+const resolveField = (raw, mapperField, fallbackKeys) => {
+    if(!mapperField) {
+        for(const key of fallbackKeys) {
+            if(raw[key] != null) return raw[key];
+        }
+        return null;
+    }
+    if(typeof mapperField === 'function') {
+        return mapperField(raw);
+    }
+    return raw[mapperField] ?? null;
+};
+
+export const normalizeDropdownItem = (raw, mapper = null, props = {}) => {
+    if(raw instanceof DropdownItem) {
+        return raw;
+    }
+
+    let config;
+
+    if(typeof mapper === 'function') {
+        config = mapper(raw);
+    }
+    else if(mapper && typeof mapper === 'object') {
+        config = {
+            content: resolveField(raw, mapper.content || mapper.label, ['name', 'label', 'content']),
+            value: resolveField(raw, mapper.value, ['value', 'id']),
+            icon: resolveField(raw, mapper.icon, ['icon']),
+            shortcut: resolveField(raw, mapper.shortcut, ['shortcut']),
+            disabled: resolveField(raw, mapper.disabled, ['disabled']) || false,
+            action: resolveField(raw, mapper.action, ['action']),
+            selected: resolveField(raw, mapper.action, ['selected']),
+            data: raw,
+        };
+    }
+    else {
+        config = {
+            content: raw.content || raw.label || raw.name,
+            value: raw.value || raw.id,
+            icon: raw.icon || null,
+            shortcut: raw.shortcut || null,
+            selected: raw.selected || null,
+            disabled: raw.disabled || false,
+            action: raw.action || null,
+            data: raw,
+        };
+    }
+
+
+    return DropdownItem(props).setDescription(config);
+};