Skip to content

Commit

Permalink
fix: attribute names, protected fields and methods, and override (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpoehnelt
jpoehnelt authored Aug 30, 2024
1 parent ea1f9fd commit 54671dc
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 36 deletions.
35 changes: 17 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,24 +80,23 @@ Note: The Google Picker API does not support file organization, moving, or copyi

### Properties

| Property | Attribute | Modifiers | Type | Default | Description |
| -------------- | ---------------- | --------- | ------------------------ | -------------------------------------------- | ------------------------------------------------------------------------------------------ |
| `appId` | `app-id` | | `string` | | The Google Drive app ID. |
| `clientId` | `client-id` | | `string` | | The Google API client ID. |
| `developerKey` | `developerKey` | | `string \| undefined` | | The Google API developer key. |
| `height` | `height` | | `number \| undefined` | | The height of the picker dialog. |
| `hideTitleBar` | `hide-title-bar` | | `boolean \| undefined` | | Whether to hide the title bar of the picker dialog. |
| `locale` | `locale` | | `string \| undefined` | | The locale of the picker dialog. |
| `maxItems` | `max-items` | | `number \| undefined` | | The maximum number of items that the user can select. |
| `multiselect` | `multiselect` | | `boolean \| undefined` | | Whether the user can select multiple items. |
| `oauthToken` | `oauth-token` | | `string \| undefined` | | The OAuth token to authenticate the user. |
| `origin` | `origin` | | `string \| undefined` | | The origin of the picker dialog. |
| `relayUrl` | `relay-url` | | `string \| undefined` | | The relay URL to use for cross-origin communication. |
| `scope` | `scope` | | `string` | "https://www.googleapis.com/auth/drive.file" | The scope of the OAuth token. |
| `title` | `title` | | `string` | "" | The title of the picker dialog. |
| `views` | | readonly | `(DocsView \| ViewId)[]` | | The `google.Picker.View` objects to display in the picker as defined by the slot elements. |
| `visible` | `visible` | | `boolean` | true | Whether the picker dialog is visible. |
| `width` | `width` | | `number \| undefined` | | The width of the picker dialog. |
| Property | Attribute | Type | Default | Description |
| -------------- | ---------------- | ---------------------- | -------------------------------------------- | ----------------------------------------------------- |
| `appId` | `app-id` | `string` | | The Google Drive app ID. |
| `clientId` | `client-id` | `string` | | The Google API client ID. |
| `developerKey` | `developerKey` | `string \| undefined` | | The Google API developer key. |
| `height` | `height` | `number \| undefined` | | The height of the picker dialog. |
| `hideTitleBar` | `hide-title-bar` | `boolean \| undefined` | | Whether to hide the title bar of the picker dialog. |
| `locale` | `locale` | `string \| undefined` | | The locale of the picker dialog. |
| `maxItems` | `max-items` | `number \| undefined` | | The maximum number of items that the user can select. |
| `multiselect` | `multiselect` | `boolean \| undefined` | | Whether the user can select multiple items. |
| `oauthToken` | `oauth-token` | `string \| undefined` | | The OAuth token to authenticate the user. |
| `origin` | `origin` | `string \| undefined` | | The origin of the picker dialog. |
| `relayUrl` | `relay-url` | `string \| undefined` | | The relay URL to use for cross-origin communication. |
| `scope` | `scope` | `string` | "https://www.googleapis.com/auth/drive.file" | The scope of the OAuth token. |
| `title` | `title` | `string` | "" | The title of the picker dialog. |
| `visible` | `visible` | `boolean` | true | Whether the picker dialog is visible. |
| `width` | `width` | `number \| undefined` | | The width of the picker dialog. |

### Methods

Expand Down
8 changes: 4 additions & 4 deletions examples/drive-picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@
<script type="module" src="../dist/index.js"></script>

<drive-picker
clientId="675807958095-nsptdcn5qdb6pl44cge1c6ghact9t5q0.apps.googleusercontent.com"
appId="675807958095"
client-id="675807958095-nsptdcn5qdb6pl44cge1c6ghact9t5q0.apps.googleusercontent.com"
app-id="675807958095"
>
<drive-picker-docs-view
mimeTypes="application/json"
mime-types="application/json"
label="JSON"
></drive-picker-docs-view>
<drive-picker-docs-view
ownedbyme=""
owned-by-me=""
label="Mine"
></drive-picker-docs-view>
<drive-picker-docs-view
Expand Down
24 changes: 10 additions & 14 deletions src/drive-picker/drive-picker-element.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { loadApi, retrieveAccessToken } from "../utils";
/**
* Copyright 2024 Google LLC
*
Expand All @@ -14,11 +17,6 @@
* limitations under the License.
*/

import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";

import { loadApi, retrieveAccessToken } from "../utils";

export type View = google.picker.DocsView;

export interface PickerViewElement extends HTMLElement {
Expand Down Expand Up @@ -93,7 +91,7 @@ export class DrivePickerElement
extends LitElement
implements DrivePickerElementProps, DrivePickerElementEventListeners
{
private picker: google.picker.Picker | undefined;
protected picker: google.picker.Picker | undefined;
protected observer: MutationObserver | undefined;

@state()
Expand Down Expand Up @@ -192,12 +190,12 @@ export class DrivePickerElement
/**
* The `google.Picker.View` objects to display in the picker as defined by the slot elements.
*/
get views(): (View | google.picker.ViewId)[] {
protected get views(): (View | google.picker.ViewId)[] {
const views = nestedViews(this);
return views.length ? views : ["all" as google.picker.ViewId];
}

async connectedCallback(): Promise<void> {
override async connectedCallback(): Promise<void> {
super.connectedCallback();
await loadApi();

Expand All @@ -221,7 +219,7 @@ export class DrivePickerElement
});
}

update(changedProperties: Map<PropertyKey, unknown>) {
protected override update(changedProperties: Map<PropertyKey, unknown>) {
// dispose the picker if any property other than visible is changed
if (!(changedProperties.size === 1 && changedProperties.has("visible"))) {
this.picker?.dispose();
Expand All @@ -245,13 +243,11 @@ export class DrivePickerElement
super.update(changedProperties);
}

render() {
protected override render() {
if (!this.picker) {
this.build();
}

console.log(this.views);

this.picker?.setVisible(this.visible);

return html`<slot></slot>`;
Expand Down Expand Up @@ -282,7 +278,7 @@ export class DrivePickerElement
this.dispatch(data.action, data);
}

disconnectedCallback(): void {
override disconnectedCallback(): void {
this.picker?.dispose();
super.disconnectedCallback();
}
Expand All @@ -294,7 +290,7 @@ export class DrivePickerElement
this.dispatchEvent(new CustomEvent(type, { detail }));
}

protected createRenderRoot(): HTMLElement | DocumentFragment {
protected override createRenderRoot(): HTMLElement | DocumentFragment {
return this;
}
}
Expand Down

0 comments on commit 54671dc

Please sign in to comment.