Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

fix(core): allow for breakpoints with periods in them #921

Merged
merged 1 commit into from
Dec 16, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/lib/core/base/base2.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export abstract class BaseDirective2 implements OnChanges, OnDestroy {
ngOnChanges(changes: SimpleChanges) {
Object.keys(changes).forEach(key => {
if (this.inputs.indexOf(key) !== -1) {
const bp = key.split('.')[1] || '';
const bp = key.split('.').slice(1).join('.');
const val = changes[key].currentValue;
this.setValue(val, bp);
}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/extended/show-hide/show-hide.ts
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
Object.keys(changes).forEach(key => {
if (this.inputs.indexOf(key) !== -1) {
const inputKey = key.split('.');
const bp = inputKey[1] || '';
const bp = inputKey.slice(1).join('.');
const inputValue = changes[key].currentValue;
let shouldShow = inputValue !== '' ?
inputValue !== 0 ? coerceBooleanProperty(inputValue) : false
Expand Down
30 changes: 21 additions & 9 deletions src/lib/extended/show-hide/show.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -301,12 +301,20 @@ describe('show directive', () => {
CommonModule,
FlexLayoutModule.withConfig({
serverLoaded: true,
}, {
alias: 'sm-md',
suffix: 'SmMd',
mediaQuery: 'screen and (min-width: 720px) and (max-width: 839px)',
overlapping: false
}),
}, [
{
alias: 'sm-md',
suffix: 'SmMd',
mediaQuery: 'screen and (min-width: 720px) and (max-width: 839px)',
overlapping: false
},
{
alias: 'sm.lg',
suffix: 'SmLg',
mediaQuery: 'screen and (min-width: 840px) and (max-width: 1000px)',
overlapping: false
}
]),
],
declarations: [FxShowHideDirective],
providers: [
Expand All @@ -317,7 +325,7 @@ describe('show directive', () => {

it('should respond to custom breakpoint', async(() => {
createTestComponent(`
<p fxFlex="100%" fxHide="true" fxShow.sm-md="true"></p>
<p fxFlex="100%" fxHide="true" fxShow.sm-md="true" fxShow.sm.lg="true"></p>
`);

expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler);
Expand All @@ -329,13 +337,17 @@ describe('show directive', () => {
matchMedia.activate('sm');

expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler);

matchMedia.activate('sm.lg');

expectNativeEl(fixture).not.toHaveStyle({'display': 'none'}, styler);
}));
});

});

const inputs = ['fxShow.sm-md', 'fxHide.sm-md'];
const selector = `[fxShow.sm-md], [fxHide.sm-md]`;
const inputs = ['fxShow.sm-md', 'fxHide.sm-md', 'fxShow.sm.lg', 'fxHide.sm.lg'];
const selector = `[fxShow.sm-md], [fxHide.sm-md], [fxShow.sm.lg], [fxHide.sm.lg]`;

// Used to test custom breakpoint functionality
@Directive({inputs, selector})
Expand Down