Convenient methods for getting component type instances

themesberg · Nov 11, 2023 · 188934f · 188934f
1 parent 29228bf
commit 188934f
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 24 deletions.
diff --git a/content/getting-started/javascript.md b/content/getting-started/javascript.md
@@ -221,6 +221,13 @@ If you provide the wrong category or ID then the console will give you a warning
 
 If you have provided the correct category and element ID then you can now access the object as if you've created it yourself and work with it programmatically via JavaScript:
 
+Convenient methods exist for getting the instance objects of each component type:
+
+```javascript
+const modal = FlowbiteInstances.getModal('modal-id');
+const tooltip = FlowbiteInstances.getTooltip('tooltip-id');
+```
+
 ```javascript
 // show the modal
 modal.show();
@@ -285,6 +292,8 @@ Alternatively, you can also get all of the instances from one component pool suc
 
 ```javascript
 FlowbiteInstance.getInstances('Modal');
+// or
+FlowbiteInstance.getModalList();
 ```
 
 ## Instance options

diff --git a/src/components/drawer/index.ts b/src/components/drawer/index.ts
@@ -342,10 +342,7 @@ export function initDrawers() {
  const $drawerEl = document.getElementById(drawerId);
 
  if ($drawerEl) {
- const drawer: DrawerInterface = instances.getInstance(
- 'Drawer',
- drawerId
- );
+ const drawer: DrawerInterface = instances.getDrawer(drawerId);
 
  if (drawer) {
  const toggleDrawer = () => {
@@ -378,10 +375,7 @@ export function initDrawers() {
  const $drawerEl = document.getElementById(drawerId);
 
  if ($drawerEl) {
- const drawer: DrawerInterface = instances.getInstance(
- 'Drawer',
- drawerId
- );
+ const drawer: DrawerInterface = instances.getDrawer(drawerId);
 
  if (drawer) {
  const hideDrawer = () => {
@@ -410,10 +404,7 @@ export function initDrawers() {
  const $drawerEl = document.getElementById(drawerId);
 
  if ($drawerEl) {
- const drawer: DrawerInterface = instances.getInstance(
- 'Drawer',
- drawerId
- );
+ const drawer: DrawerInterface = instances.getDrawer(drawerId);
 
  if (drawer) {
  const showDrawer = () => {

diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts
@@ -295,10 +295,7 @@ export function initModals() {
  const $modalEl = document.getElementById(modalId);
 
  if ($modalEl) {
- const modal: ModalInterface = instances.getInstance(
- 'Modal',
- modalId
- );
+ const modal: ModalInterface = instances.getModal(modalId);
 
  if (modal) {
  const toggleModal = () => {
@@ -328,10 +325,7 @@ export function initModals() {
  const $modalEl = document.getElementById(modalId);
 
  if ($modalEl) {
- const modal: ModalInterface = instances.getInstance(
- 'Modal',
- modalId
- );
+ const modal: ModalInterface = instances.getModal(modalId);
 
  if (modal) {
  const showModal = () => {
@@ -361,10 +355,7 @@ export function initModals() {
  const $modalEl = document.getElementById(modalId);
 
  if ($modalEl) {
- const modal: ModalInterface = instances.getInstance(
- 'Modal',
- modalId
- );
+ const modal: ModalInterface = instances.getModal(modalId);
 
  if (modal) {
  const hideModal = () => {

diff --git a/src/dom/instances.ts b/src/dom/instances.ts
@@ -77,6 +77,50 @@ class Instances {
  return this._instances[component];
  }
 
+ getModalList() {
+ return this.getInstances('Modal');
+ }
+
+ getAccordionList() {
+ return this.getInstances('Accordion');
+ }
+
+ getCarouselList() {
+ return this.getInstances('Carousel');
+ }
+
+ getCollapseList() {
+ return this.getInstances('Collapse');
+ }
+
+ getDialList() {
+ return this.getInstances('Dial');
+ }
+
+ getDismissList() {
+ return this.getInstances('Dismiss');
+ }
+
+ getDrawerList() {
+ return this.getInstances('Drawer');
+ }
+
+ getDropdownList() {
+ return this.getInstances('Dropdown');
+ }
+
+ getPopoverList() {
+ return this.getInstances('Popover');
+ }
+
+ getTabsList() {
+ return this.getInstances('Tabs');
+ }
+
+ getTooltipList() {
+ return this.getInstances('Tooltip');
+ }
+
  getInstance(component: keyof Instances['_instances'], id: string) {
  if (!this._componentAndInstanceCheck(component, id)) {
  return;
@@ -89,6 +133,50 @@ class Instances {
  return this._instances[component][id] as any;
  }
 
+ getModal(id: string): undefined|ModalInterface {
+ return this.getInstance('Modal', id);
+ }
+
+ getAccordion(id: string): undefined|AccordionInterface {
+ return this.getInstance('Accordion', id);
+ }
+
+ getCarousel(id: string): undefined|CarouselInterface {
+ return this.getInstance('Carousel', id);
+ }
+
+ getCollapse(id: string): undefined|CollapseInterface {
+ return this.getInstance('Collapse', id);
+ }
+
+ getDial(id: string): undefined|DialInterface {
+ return this.getInstance('Dial', id);
+ }
+
+ getDismiss(id: string): undefined|DismissInterface {
+ return this.getInstance('Dismiss', id);
+ }
+
+ getDrawer(id: string): undefined|DrawerInterface {
+ return this.getInstance('Drawer', id);
+ }
+
+ getDropdown(id: string): undefined|DropdownInterface {
+ return this.getInstance('Dropdown', id);
+ }
+
+ getPopover(id: string): undefined|PopoverInterface {
+ return this.getInstance('Popover', id);
+ }
+
+ getTabs(id: string): undefined|TabsInterface {
+ return this.getInstance('Tabs', id);
+ }
+
+ getTooltip(id: string): undefined|TooltipInterface {
+ return this.getInstance('Tooltip', id);
+ }
+
  destroyAndRemoveInstance(
  component: keyof Instances['_instances'],
  id: string