started implementing state management designs
This commit is contained in:
Martin McKeaveney
parent
f0e07cdfca
commit
c064f08d55
|
|
@ -4,5 +4,6 @@
|
|||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M13 10h7l-9 13v-9H4l9-13z" />
|
||||
<path
|
||||
d="M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 181 B After Width: | Height: | Size: 228 B |
|
|
@ -0,0 +1,54 @@
|
|||
<script>
|
||||
import getIcon from "./icon";
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.select-container {
|
||||
padding-bottom: 10px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--secondary50);
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
color: #444;
|
||||
line-height: 1.3;
|
||||
padding: 1em 2.6em 0.9em 1.4em;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border-radius: 0.5em;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
pointer-events: none;
|
||||
color: var(--primary100);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="select-container">
|
||||
<select on:change {value}>
|
||||
<slot />
|
||||
</select>
|
||||
<span class="arrow">
|
||||
{@html getIcon('chevron-down', '24')}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -1,49 +1,95 @@
|
|||
<script>
|
||||
import Modal from "../../common/Modal.svelte";
|
||||
import EventSelector from "../EventSelector.svelte";
|
||||
import HandlerSelector from "./HandlerSelector.svelte";
|
||||
import IconButton from "../../common/IconButton.svelte";
|
||||
import Select from "../../common/Select.svelte";
|
||||
|
||||
export let event;
|
||||
export let events;
|
||||
export let open;
|
||||
export let closeModal;
|
||||
export let changeEventHandler;
|
||||
export let removeEventHandler;
|
||||
export let addEventHandler;
|
||||
|
||||
$: action = open && event ? "Edit" : "Create";
|
||||
|
||||
let newEventType = "onClick";
|
||||
</script>
|
||||
|
||||
<Modal isOpen={open} onClosed={closeModal}>
|
||||
<h2>{action} Event</h2>
|
||||
<EventSelector
|
||||
onChanged={console.log}
|
||||
onRemoved={console.log}
|
||||
{event}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
h2 {
|
||||
color: var(--primary100);
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
/* TODO: Should be it's own component */
|
||||
input {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #8997ab;
|
||||
margin-bottom: 10px;
|
||||
color: #163057;
|
||||
opacity: 0.7;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.root {
|
||||
font-size: 10pt;
|
||||
width: 100%;
|
||||
.event-action {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.form-root {
|
||||
.event-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.prop-container {
|
||||
flex: 1 1 auto;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.edit-icon:hover {
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Modal bind:isOpen={open} onClosed={closeModal}>
|
||||
{#if event}
|
||||
<h2>{event.name}</h2>
|
||||
{:else}
|
||||
<h2>Create a New Component Event</h2>
|
||||
{/if}
|
||||
<span>Click here to learn more about component events</span>
|
||||
|
||||
<div class="event-options">
|
||||
<div>
|
||||
<h5>Event Name</h5>
|
||||
<input type="text" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5>Event Type</h5>
|
||||
<Select bind:value={newEventType}>
|
||||
{#each events as [name]}
|
||||
<option value={name}>{name}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Event Action(s)</h5>
|
||||
{#if event.handlers}
|
||||
{#each event.handlers as handler, index}
|
||||
<HandlerSelector
|
||||
{index}
|
||||
onChanged={changeEventHandler}
|
||||
onRemoved={() => removeEventHandler(index)}
|
||||
{handler} />
|
||||
<hr />
|
||||
{/each}
|
||||
{/if}
|
||||
<div
|
||||
class="addelement-container"
|
||||
on:click={() => addEventHandler(newEventType)}>
|
||||
<IconButton icon="plus" size="12" />
|
||||
Add Handler
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
import PlusButton from "../../common/PlusButton.svelte";
|
||||
import IconButton from "../../common/IconButton.svelte";
|
||||
import Modal from "../../common/Modal.svelte";
|
||||
import EventEditorModal from "./EventEditorModal.svelte";
|
||||
import HandlerSelector from "./HandlerSelector.svelte";
|
||||
|
||||
import { PencilIcon } from "../../common/Icons";
|
||||
|
|
@ -28,12 +29,6 @@
|
|||
export let onPropChanged = () => {};
|
||||
export let components;
|
||||
|
||||
// Structure
|
||||
// {
|
||||
// [eventName]: [{eventHandler}, {eventHandler1}],
|
||||
// [eventName1]: [{eventHandler}, {eventHandler1}],
|
||||
// }
|
||||
|
||||
let modalOpen = false;
|
||||
let events = [];
|
||||
let selectedEvent = {};
|
||||
|
|
@ -41,15 +36,6 @@
|
|||
|
||||
// TODO: only show events that have handlers
|
||||
|
||||
// $: {
|
||||
// let componentEvents = {};
|
||||
// for (let propName in componentInfo) {
|
||||
// const isEventProp = findType(propName) === EVENT_TYPE;
|
||||
// if (isEventProp) componentEvents[propName] = componentInfo[propName];
|
||||
// }
|
||||
// events = componentEvents;
|
||||
// }
|
||||
|
||||
$: events =
|
||||
componentInfo &&
|
||||
Object.entries(componentInfo).filter(
|
||||
|
|
@ -64,8 +50,6 @@
|
|||
.props[propName];
|
||||
}
|
||||
|
||||
console.log({ componentInfo, events, components });
|
||||
|
||||
const openModal = event => {
|
||||
selectedEvent = event;
|
||||
modalOpen = true;
|
||||
|
|
@ -111,8 +95,6 @@
|
|||
handlers.splice(index, 1);
|
||||
onPropChanged(newEventType, handlers);
|
||||
};
|
||||
|
||||
console.log("DA HANDLERS", selectedEvent.handlers);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -134,11 +116,6 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.prop-container {
|
||||
flex: 1 1 auto;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -175,28 +152,6 @@
|
|||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--primary100);
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* TODO: Should be it's own component */
|
||||
input {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #163057;
|
||||
opacity: 0.7;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.event-action {
|
||||
background: #fafafa;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="heading">
|
||||
|
|
@ -210,7 +165,7 @@
|
|||
{#each events as [name, handlers], index}
|
||||
{#if handlers.length > 0}
|
||||
<div
|
||||
class="handler-container hierarchy-item"
|
||||
class="handler-container hierarchy-item {selectedEvent.index === index ? 'selected' : ''}"
|
||||
on:click={() => openModal({ name, handlers, index })}>
|
||||
<span class="event-name">{name}</span>
|
||||
<span class="edit-text">EDIT</span>
|
||||
|
|
@ -220,37 +175,11 @@
|
|||
{/each}
|
||||
</form>
|
||||
</div>
|
||||
<Modal bind:isOpen={modalOpen} onClosed={closeModal}>
|
||||
<h2>Create a New Component Event</h2>
|
||||
<span>Click here to learn more about component events</span>
|
||||
|
||||
<h4>Event Name</h4>
|
||||
<input type="text" />
|
||||
|
||||
<h4>Event Type</h4>
|
||||
<select
|
||||
class="type-selector uk-select uk-form-small"
|
||||
bind:value={newEventType}>
|
||||
{#each events as [name]}
|
||||
<option value={name}>{name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<h4>Event Action(s)</h4>
|
||||
{#if selectedEvent.handlers}
|
||||
{#each selectedEvent.handlers as handler, index}
|
||||
<HandlerSelector
|
||||
{index}
|
||||
onChanged={changeEventHandler}
|
||||
onRemoved={removeEventHandler}
|
||||
{handler} />
|
||||
<hr />
|
||||
{/each}
|
||||
{/if}
|
||||
<div
|
||||
class="addelement-container"
|
||||
on:click={() => addEventHandler(newEventType)}>
|
||||
<IconButton icon="plus" size="12" />
|
||||
Add Handler
|
||||
</div>
|
||||
</Modal>
|
||||
<EventEditorModal
|
||||
open={modalOpen}
|
||||
onClose={closeModal}
|
||||
event={selectedEvent}
|
||||
{events}
|
||||
{addEventHandler}
|
||||
{changeEventHandler}
|
||||
{removeEventHandler} />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import IconButton from "../../common/IconButton.svelte";
|
||||
import Select from "../../common/Select.svelte";
|
||||
import StateBindingControl from "./StateBindingControl.svelte";
|
||||
import { find, map, keys, reduce, keyBy } from "lodash/fp";
|
||||
import { pipe, userWithFullAccess } from "../../common/core";
|
||||
|
|
@ -76,7 +77,8 @@
|
|||
<style>
|
||||
.type-selector-container {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 10px;
|
||||
background: #fafafa;
|
||||
padding: 22px;
|
||||
border: 1px solid var(--primary75);
|
||||
|
|
@ -85,28 +87,33 @@
|
|||
.type-selector {
|
||||
border-color: var(--primary50);
|
||||
border-radius: 2px;
|
||||
width: 50px;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.handler-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="type-selector-container">
|
||||
<div class="handler-option">
|
||||
Action
|
||||
<select
|
||||
class="type-selector uk-select uk-form-small "
|
||||
value={handlerType}
|
||||
on:change={handlerTypeChanged}>
|
||||
<Select value={handlerType} on:change={handlerTypeChanged}>
|
||||
<option />
|
||||
{#each eventOptions as option}
|
||||
<option value={option.name}>{option.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</Select>
|
||||
</div>
|
||||
{#if parameters}
|
||||
{#each parameters as param, index}
|
||||
{#each parameters as param, idx}
|
||||
<div class="handler-option">
|
||||
<div>{param.name}</div>
|
||||
<StateBindingControl
|
||||
onChanged={onParameterChanged(index)}
|
||||
onChanged={onParameterChanged(idx)}
|
||||
value={param.value} />
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue