mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 18:44:01 +02:00
Code Issues Releases Wiki Activity

Add function type for popperConfig option (#32882)

Browse Source 
* Add function type for `popperConfig` option

* Update .bundlewatch.config.json

* copy edits

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
Rohit Sharma
2021-02-10 00:46:13 +05:30
committed by GitHub
parent 29e0c9dfa1
commit f7088e5d28
9 changed files with 99 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/src/dropdown.js
View File

@@ -86,7 +86,7 @@ const DefaultType = {
boundary: '(string|element)',
reference: '(string|element|object)',
display: 'string',
popperConfig: '(null|object)'
popperConfig: '(null|object|function)'
}
/**
@@ -322,7 +322,7 @@ class Dropdown extends BaseComponent {
}
_getPopperConfig() {
const popperConfig = {
const defaultBsPopperConfig = {
placement: this._getPlacement(),
modifiers: [{
name: 'preventOverflow',
@@ -341,15 +341,15 @@ class Dropdown extends BaseComponent {
// Disable Popper if we have a static display
if (this._config.display === 'static') {
popperConfig.modifiers = [{
defaultBsPopperConfig.modifiers = [{
name: 'applyStyles',
enabled: false
}]
}
return {
...popperConfig,
...this._config.popperConfig
...defaultBsPopperConfig,
...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig)
}
}

8
js/src/tooltip.js
View File

@@ -58,7 +58,7 @@ const DefaultType = {
sanitize: 'boolean',
sanitizeFn: '(null|function)',
allowList: 'object',
popperConfig: '(null|object)'
popperConfig: '(null|object|function)'
}
const AttachmentMap = {
@@ -490,7 +490,7 @@ class Tooltip extends BaseComponent {
}
_getPopperConfig(attachment) {
const defaultBsConfig = {
const defaultBsPopperConfig = {
placement: attachment,
modifiers: [
{
@@ -533,8 +533,8 @@ class Tooltip extends BaseComponent {
}
return {
...defaultBsConfig,
...this.config.popperConfig
...defaultBsPopperConfig,
...(typeof this.config.popperConfig === 'function' ? this.config.popperConfig(defaultBsPopperConfig) : this.config.popperConfig)
}
}

22
js/tests/unit/dropdown.spec.js
View File

@@ -123,6 +123,28 @@ describe('Dropdown', () => {
expect(popperConfig.placement).toEqual('left')
})
it('should allow to pass config to Popper with `popperConfig` as a function', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-placement="right" >Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const getPopperConfig = jasmine.createSpy('getPopperConfig').and.returnValue({ placement: 'left' })
const dropdown = new Dropdown(btnDropdown, {
popperConfig: getPopperConfig
})
const popperConfig = dropdown._getPopperConfig()
expect(getPopperConfig).toHaveBeenCalled()
expect(popperConfig.placement).toEqual('left')
})
})
describe('toggle', () => {

15
js/tests/unit/tooltip.spec.js
View File

@@ -156,6 +156,21 @@ describe('Tooltip', () => {
expect(popperConfig.placement).toEqual('left')
})
it('should allow to pass config to Popper with `popperConfig` as a function', () => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
const getPopperConfig = jasmine.createSpy('getPopperConfig').and.returnValue({ placement: 'left' })
const tooltip = new Tooltip(tooltipEl, {
popperConfig: getPopperConfig
})
const popperConfig = tooltip._getPopperConfig('top')
expect(getPopperConfig).toHaveBeenCalled()
expect(popperConfig.placement).toEqual('left')
})
})
describe('enable', () => {