Skip to content

Commit

Permalink
Merge branch 'main' into selectively-validate-empty-values
Browse files Browse the repository at this point in the history
  • Loading branch information
@garrettmflynn
garrettmflynn committed Nov 1, 2023
2 parents a3b530c + e49c29a commit e1935ff
Show file tree
Hide file tree
Showing 10 changed files with 263 additions and 102 deletions.
29 changes: 22 additions & 7 deletions src/renderer/src/stories/Button.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { LitElement, html, css } from "lit";
import { styleMap } from "lit/directives/style-map.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";

export class Button extends LitElement {
constructor({ primary, label, color = null, size, onClick, buttonStyles } = {}) {
constructor({ icon = null, primary, label, color = null, size, onClick, buttonStyles } = {}) {
super();
this.icon = icon;
this.label = label;
this.primary = primary;
this.color = color;
Expand All @@ -18,20 +20,29 @@ export class Button extends LitElement {
display: inline-block;
}
.button-icon {
margin-right: 10px;
}
.storybook-button {
padding: 10px 15px;
font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
border-radius: 5px;
cursor: pointer;
display: inline-block;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.button-icon {
margin-right: 7px;
}
svg {
margin: 0px !important;
width: auto;
height: 25px;
}
.storybook-button--primary {
color: white;
background-color: hsl(190, 60%, 36%);
Expand Down Expand Up @@ -89,7 +100,11 @@ export class Button extends LitElement {
)}
@click=${this.onClick}
>
${this.icon ? html`<span class="button-icon">${this.icon}</span>` : ""}
${this.icon
? html`<span class="button-icon"
>${this.icon instanceof HTMLElement ? this.icon : unsafeHTML(this.icon)}</span
>`
: ""}
<slot>${this.label ?? ""}</slot>
</button>
`;
Expand Down
113 changes: 63 additions & 50 deletions src/renderer/src/stories/JSONSchemaForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,9 @@ const componentCSS = `
margin: 15px;
}
hr {
margin: 1em 0 1.5em 0;
}
hr {
margin: 1em 0 1.5em 0;
}
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
Expand Down Expand Up @@ -137,14 +137,19 @@ hr {
border-bottom: 1px solid gainsboro;
}
.guided--text-input-instructions {
font-size: 13px;
width: 100%;
padding-top: 4px;
color: dimgray !important;
margin: 0 0 1em;
line-height: 1.4285em;
}
.guided--text-input-instructions {
font-size: 13px;
width: 100%;
padding-top: 4px;
color: dimgray !important;
margin: 0 0 1em;
line-height: 1.4285em;
}
[disabled] {
opacity: 0.5;
pointer-events: none;
}
`;

document.addEventListener("dragover", (e) => {
Expand Down Expand Up @@ -843,45 +848,51 @@ export class JSONSchemaForm extends LitElement {
if (this.mode === "accordion" && hasMany) {
const headerName = header(name);

this.#nestedForms[name] = new JSONSchemaForm({
identifier: this.identifier,
schema: info,
results: { ...results[name] },
globals: this.globals?.[name],

states: this.states,

mode: this.mode,

onUpdate: (internalPath, value) => {
const path = [...localPath, ...internalPath];
this.updateData(path, value);
},

required: required[name], // Scoped to the sub-schema
ignore: this.ignore,
dialogOptions: this.dialogOptions,
dialogType: this.dialogType,
onlyRequired: this.onlyRequired,
showLevelOverride: this.showLevelOverride,
deferLoading: this.deferLoading,
conditionalRequirements: this.conditionalRequirements,
validateOnChange: (...args) => this.validateOnChange(...args),
onThrow: (...args) => this.onThrow(...args),
validateEmptyValues: this.validateEmptyValues,
onStatusChange: (status) => {
accordion.setSectionStatus(headerName, status);
this.checkStatus();
}, // Forward status changes to the parent form
onInvalid: (...args) => this.onInvalid(...args),
onLoaded: () => {
this.nLoaded++;
this.checkAllLoaded();
},
renderTable: (...args) => this.renderTable(...args),
onOverride: (...args) => this.onOverride(...args),
base: [...this.base, ...localPath],
});
// Check properties that will be rendered before creating the accordion
const base = [...this.base, ...localPath];
const renderable = this.#getRenderable(info, required[name], base);

if (renderable.length) {
this.#nestedForms[name] = new JSONSchemaForm({
identifier: this.identifier,
schema: info,
results: { ...results[name] },
globals: this.globals?.[name],

states: this.states,

mode: this.mode,

onUpdate: (internalPath, value) => {
const path = [...localPath, ...internalPath];
this.updateData(path, value);
},

required: required[name], // Scoped to the sub-schema
ignore: this.ignore,
dialogOptions: this.dialogOptions,
dialogType: this.dialogType,
onlyRequired: this.onlyRequired,
showLevelOverride: this.showLevelOverride,
deferLoading: this.deferLoading,
conditionalRequirements: this.conditionalRequirements,
validateOnChange: (...args) => this.validateOnChange(...args),
onThrow: (...args) => this.onThrow(...args),
validateEmptyValues: this.validateEmptyValues,
onStatusChange: (status) => {
accordion.setSectionStatus(headerName, status);
this.checkStatus();
}, // Forward status changes to the parent form
onInvalid: (...args) => this.onInvalid(...args),
onLoaded: () => {
this.nLoaded++;
this.checkAllLoaded();
},
renderTable: (...args) => this.renderTable(...args),
onOverride: (...args) => this.onOverride(...args),
base,
});
}

if (!this.states[headerName]) this.states[headerName] = {};
this.states[headerName].subtitle = `${
Expand All @@ -897,6 +908,8 @@ export class JSONSchemaForm extends LitElement {

accordion.id = name; // assign name to accordion id

if (!renderable.length) accordion.setAttribute("disabled", "");

return accordion;
}

Expand Down
24 changes: 13 additions & 11 deletions src/renderer/src/stories/JSONSchemaInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,19 @@ export class JSONSchemaInput extends LitElement {
// onUpdate = () => {}
// onValidate = () => {}

updateData(value) {
if (this.value === value) return false;
updateData(value, forceValidate = false) {

if (this.value === value && !forceValidate) {
const el = this.getElement();
if (el.type === "checkbox") el.checked = value;
else if (el.classList.contains("list"))
el.children[0].items = value
? value.map((value) => {
return { value };
})
: [];
else el.value = value;
}

const { path: fullPath } = this;
const path = typeof fullPath === "string" ? fullPath.split("-") : [...fullPath];
Expand All @@ -119,15 +130,6 @@ export class JSONSchemaInput extends LitElement {
this.#triggerValidation(name, path);
this.#updateData(fullPath, value);

const el = this.getElement();
if (el.type === "checkbox") el.checked = value;
else if (el.classList.contains("list"))
el.children[0].items = value
? value.map((value) => {
return { value };
})
: [];
else el.value = value;

return true;
}
Expand Down
Loading

0 comments on commit e1935ff

Please sign in to comment.