Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(fw-popover): added show/hide event emitters and new prop #268

Merged
merged 2 commits into from
Nov 12, 2021
Merged

feat(fw-popover): added show/hide event emitters and new prop #268

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00713be
feat(fw-popover): added show/hide event emitters and a new prop preve…
kishore-kumar-E3682 Nov 10, 2021
30f75be
feat(fw-popover): added trigger prop to specify the trigger type
kishore-kumar-E3682 Nov 12, 2021
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
16 changes: 16 additions & 0 deletions packages/crayons-core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,10 @@ export namespace Components {
* Placement of the popover content with respect to the popover trigger.
*/
"placement": PopoverPlacementType;
/**
* Whether the popover-content width to be same as that of the popover-trigger.
*/
"preventDefault": boolean;
/**
* Whether the popover-content width to be same as that of the popover-trigger.
*/
Expand Down Expand Up @@ -1403,10 +1407,22 @@ declare namespace LocalJSX {
* Alternative placement for popover if the default placement is not possible.
*/
"fallbackPlacements"?: [PopoverPlacementType];
/**
* Triggered whenever the popover contents is closed/hidden.
*/
"onFwHide"?: (event: CustomEvent<any>) => void;
/**
* Triggered whenever the popover contents is open/displayed.
*/
"onFwShow"?: (event: CustomEvent<any>) => void;
/**
* Placement of the popover content with respect to the popover trigger.
*/
"placement"?: PopoverPlacementType;
/**
* Whether the popover-content width to be same as that of the popover-trigger.
*/
"preventDefault"?: boolean;
/**
* Whether the popover-content width to be same as that of the popover-trigger.
*/
Expand Down
41 changes: 33 additions & 8 deletions packages/crayons-core/src/components/popover/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
import { Component, Element, State, Method, Prop, h } from '@stencil/core';
import {
Component,
Element,
State,
Event,
EventEmitter,
Method,
Prop,
h,
} from '@stencil/core';
import { createPopper, Instance } from '@popperjs/core';

@Component({
Expand Down Expand Up @@ -45,6 +54,18 @@ export class Popover {
* Whether the popover-content width to be same as that of the popover-trigger.
*/
@Prop() sameWidth = true;
/**
* Whether the popover-content width to be same as that of the popover-trigger.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the documentation text is wrong!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have replaced this prop with the trigger prop, to specify the trigger event on which the popover-content will be shown/hide.

*/
@Prop() preventDefault = false;
/**
* Triggered whenever the popover contents is open/displayed.
*/
@Event() fwShow: EventEmitter;
/**
* Triggered whenever the popover contents is closed/hidden.
*/
@Event() fwHide: EventEmitter;

@Method()
async show() {
Expand All @@ -68,6 +89,7 @@ export class Popover {
this.popperInstance.update();
this.overlay.style.display = 'block';
this.isOpen = !this.isOpen;
this.fwShow.emit();
}
}

Expand All @@ -85,18 +107,21 @@ export class Popover {
}));
this.overlay.style.display = 'none';
this.isOpen = !this.isOpen;
this.fwHide.emit();
}
}

componentWillLoad() {
this.triggerRef = this.host.querySelector('[slot="popover-trigger"]');
this.triggerRef.addEventListener('click', () => {
if (this.isOpen) {
this.hide();
} else {
this.show();
}
});
if (!this.preventDefault) {
this.triggerRef.addEventListener('click', () => {
if (this.isOpen) {
this.hide();
} else {
this.show();
}
});
}
this.popperOptions = {
placement: this.placement,
modifiers: [
Expand Down
27 changes: 18 additions & 9 deletions packages/crayons-core/src/components/popover/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,24 @@ Popover need two slots `popover-trigger` and `popover-content`. By default on cl

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------- | ------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `boundary` | -- | The area that the popup will be checked for overflow relative to. | `HTMLElement` | `undefined` |
| `distance` | `distance` | Distance defines the distance between the popover trigger and the popover content along y-axis. | `string` | `'0'` |
| `fallbackPlacements` | -- | Alternative placement for popover if the default placement is not possible. | `[PopoverPlacementType]` | `['top']` |
| `placement` | `placement` | Placement of the popover content with respect to the popover trigger. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` |
| `sameWidth` | `same-width` | Whether the popover-content width to be same as that of the popover-trigger. | `boolean` | `true` |
| `skidding` | `skidding` | Skidding defines the distance between the popover trigger and the popover content along x-axis. | `string` | `'0'` |
| `variant` | `variant` | Variant defines the style of the popover-content. | `"date-picker" \| "select"` | `'select'` |
| Property | Attribute | Description | Type | Default |
| -------------------- | ----------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `boundary` | -- | The area that the popup will be checked for overflow relative to. | `HTMLElement` | `undefined` |
| `distance` | `distance` | Distance defines the distance between the popover trigger and the popover content along y-axis. | `string` | `'0'` |
| `fallbackPlacements` | -- | Alternative placement for popover if the default placement is not possible. | `[PopoverPlacementType]` | `['top']` |
| `placement` | `placement` | Placement of the popover content with respect to the popover trigger. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` |
| `preventDefault` | `prevent-default` | Whether the popover-content width to be same as that of the popover-trigger. | `boolean` | `false` |
| `sameWidth` | `same-width` | Whether the popover-content width to be same as that of the popover-trigger. | `boolean` | `true` |
| `skidding` | `skidding` | Skidding defines the distance between the popover trigger and the popover content along x-axis. | `string` | `'0'` |
| `variant` | `variant` | Variant defines the style of the popover-content. | `"date-picker" \| "select"` | `'select'` |


## Events

| Event | Description | Type |
| -------- | ---------------------------------------------------------- | ------------------ |
| `fwHide` | Triggered whenever the popover contents is closed/hidden. | `CustomEvent<any>` |
| `fwShow` | Triggered whenever the popover contents is open/displayed. | `CustomEvent<any>` |


## Methods
Expand Down