104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
import type { Component } from 'solid-js';
|
|
import { createSignal } from 'solid-js';
|
|
import {
|
|
SSAttrList,
|
|
SSButton,
|
|
SSCallout,
|
|
SSForm,
|
|
SSHeader,
|
|
SSModal,
|
|
SSSurface,
|
|
useSSModals,
|
|
} from 'src';
|
|
import { IconSpark } from '../../demo/content';
|
|
|
|
const ModalsPage: Component = () => {
|
|
const modals = useSSModals();
|
|
const [open, setOpen] = createSignal(false);
|
|
|
|
return (
|
|
<div class="demo_page">
|
|
<SSHeader title="Modals" subtitle="Inline and managed modal flows." />
|
|
|
|
<SSSurface class="demo_surface">
|
|
<div class="demo_inline">
|
|
<SSButton onclick={() => setOpen(true)}>Open modal</SSButton>
|
|
<SSButton
|
|
class="secondary"
|
|
onclick={() =>
|
|
modals.showDefault({
|
|
content: () => (
|
|
<div class="demo_stack">
|
|
<strong>Delete pipeline?</strong>
|
|
<span>This action will remove the pipeline and its history.</span>
|
|
</div>
|
|
),
|
|
modalProps: () => ({
|
|
title: 'Delete confirmation',
|
|
danger: true,
|
|
primaryButtonText: 'Delete',
|
|
}),
|
|
})
|
|
}
|
|
>
|
|
Default modal
|
|
</SSButton>
|
|
<SSButton
|
|
class="tertiary"
|
|
onclick={() =>
|
|
modals.showForm({
|
|
content: ({ context }) => (
|
|
<div class="demo_stack">
|
|
<SSForm.Input label="Change label" name="label" required />
|
|
<SSForm.Input label="Summary" name="summary" textArea />
|
|
<SSForm.Checkbox label="Notify watchers" name="notify" />
|
|
{context.hasError() && (
|
|
<span class="demo_hint">Please fix the highlighted fields.</span>
|
|
)}
|
|
</div>
|
|
),
|
|
modalProps: () => ({
|
|
title: 'Edit release',
|
|
primaryButtonText: 'Save',
|
|
}),
|
|
onSubmit: async ({ hide }) => {
|
|
hide();
|
|
},
|
|
})
|
|
}
|
|
>
|
|
Form modal
|
|
</SSButton>
|
|
</div>
|
|
</SSSurface>
|
|
|
|
<SSModal
|
|
open={open()}
|
|
title="Launch overview"
|
|
onClose={() => setOpen(false)}
|
|
footer={
|
|
<>
|
|
<SSButton class="secondary" onclick={() => setOpen(false)}>
|
|
Cancel
|
|
</SSButton>
|
|
<SSButton onclick={() => setOpen(false)}>Confirm</SSButton>
|
|
</>
|
|
}
|
|
>
|
|
<div class="demo_stack">
|
|
<SSCallout color="blue" icon={<IconSpark />}>
|
|
Everything is ready to go. Confirm to publish.
|
|
</SSCallout>
|
|
<SSAttrList>
|
|
<SSAttrList.Attr name="Version" value="v1.18.0" />
|
|
<SSAttrList.Attr name="Owner" value="Release team" />
|
|
<SSAttrList.Attr name="Window" value="Tomorrow 09:00 CET" />
|
|
</SSAttrList>
|
|
</div>
|
|
</SSModal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ModalsPage;
|