yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix dialog stories and add options for each layout

Browse Source
This commit is contained in:
Mads Rasmussen
2022-08-10 13:53:09 +02:00
parent 2ce2cfffab
commit ce272e0b80
1 changed files with 24 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
View File

@@ -1,5 +1,7 @@
import '../../../backoffice/components/backoffice-modal-container.element';
import '../../../core/services/modal/layouts/content-picker/modal-layout-content-picker.element';
import '../../context/context-provider.element';
import '../../../backoffice/components/editor-layout.element';
import '@umbraco-ui/uui-modal';
import '@umbraco-ui/uui-modal-container';
@@ -11,7 +13,7 @@ import { html } from 'lit-html';
import { customElement, property, state } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../context';
import { LitElement } from 'lit';
import { UmbModalHandler, UmbModalOptions, UmbModalService } from './';
import { UmbModalHandler, UmbModalService } from './';
export default {
title: 'API/Modals',
@@ -27,89 +29,20 @@ export default {
],
id: 'installer-page',
argTypes: {
modalType: { control: 'select', options: ['sidebar', 'dialog'] },
modalLayout: { control: 'select', options: ['Confirm', 'Content Picker'] },
},
} as Meta;
@customElement('story-modal-service-dialog-example')
class DialogExampleElement extends UmbContextConsumerMixin(LitElement) {
@property({ attribute: false })
modalHandler?: UmbModalHandler;
private _close() {
this.modalHandler?.close();
}
private _submit(value: any) {
this.modalHandler?.close(value);
}
render() {
return html`
<uui-dialog>
<uui-dialog-layout headline="I am a dialog">
<p>By clicking the close button, the modal is closed</p>
<p>
By clicking the submit button, the modal is closed and the value <b>I am the value</b> is returned to the
component that opened this modal
</p>
<uui-button slot="actions" look="secondary" @click=${() => this._close()} label="close"></uui-button>
<uui-button
slot="actions"
look="primary"
color="positive"
@click=${() => this._submit('I am the value')}
label="submit"></uui-button>
</uui-dialog-layout>
</uui-dialog>
`;
}
}
@customElement('story-modal-service-sidebar-example')
class SidebarExampleElement extends UmbContextConsumerMixin(LitElement) {
@property({ attribute: false })
modalHandler?: UmbModalHandler;
private _close() {
this.modalHandler?.close();
}
private _submit(value: any) {
this.modalHandler?.close(value);
}
render() {
return html`<div style="background: white; padding: 16px">
<h2>Sidebar</h2>
<p>By clicking the close button, the modal is closed</p>
<p>
By clicking the submit button, the modal is closed and the value <b>I am the value</b> is returned to the
component that opened this modal
</p>
<uui-button look="secondary" @click=${() => this._close()} label="close"></uui-button>
<uui-button
look="primary"
color="positive"
@click=${() => this._submit('I am the value')}
label="submit"></uui-button>
</div>`;
}
}
@customElement('story-modal-service-example')
class StoryModalServiceExampleElement extends UmbContextConsumerMixin(LitElement) {
private _modalService?: UmbModalService;
@property()
modalType: 'dialog' | 'sidebar' = 'dialog';
@property()
modalOptions: UmbModalOptions<unknown> = { type: 'sidebar', size: 'small' };
modalLayout = 'confirm';
@state()
value = '';
private _modalService?: UmbModalService;
constructor() {
super();
this.consumeContext('umbModalService', (modalService: UmbModalService) => {
@@ -118,23 +51,26 @@ class StoryModalServiceExampleElement extends UmbContextConsumerMixin(LitElement
}
private _open() {
let modalHandler = null;
if (this.modalType === 'dialog') {
modalHandler = this._modalService?.open('story-modal-service-dialog-example');
let modalHandler: UmbModalHandler | undefined;
switch (this.modalLayout) {
case 'Content Picker':
modalHandler = this._modalService?.contentPicker();
break;
default:
modalHandler = this._modalService?.confirm({
headline: 'Headline',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
});
break;
}
if (this.modalType === 'sidebar') {
modalHandler = this._modalService?.open('story-modal-service-sidebar-example', this.modalOptions);
}
modalHandler?.onClose.then((result) => {
this.value = result ?? this.value;
});
}
render() {
return html`
<uui-button label="open-dialog" look="primary" @click=${() => this._open()}>Open modal</uui-button>
<p style="margin-bottom: 0">The value is: ${this.value}</p>
<uui-button label="reset" @click=${() => (this.value = '')}></uui-button>
<uui-button label="open-dialog" look="primary" @click=${() => this._open()} style="margin-right: 9px;"
>Open modal</uui-button
>
`;
}
}
@@ -142,17 +78,8 @@ class StoryModalServiceExampleElement extends UmbContextConsumerMixin(LitElement
const Template: Story = (props) => {
return html`
<umb-backoffice-modal-container></umb-backoffice-modal-container>
<story-modal-service-example .modalType=${props.modalType}></story-modal-service-example>
<story-modal-service-example .modalLayout=${props.modalLayout}></story-modal-service-example>
`;
};
export const Dialog = Template.bind({});
Dialog.args = {
modalType: 'dialog',
};
export const Sidebar = Template.bind({});
Sidebar.args = {
modalType: 'sidebar',
modalOptions: { size: 'small' },
};
export const Overview = Template.bind({});