From d92c0b770baefd02c2dc78e9e2028f1e6a4fc9d7 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 17 Feb 2021 15:16:44 +0000 Subject: [PATCH] Add disabled setting for forms and fields, and force autocolumns in forms to be disabled --- packages/standard-components/manifest.json | 54 +++++++++++++++++++ .../src/forms/AttachmentField.svelte | 13 ++++- .../src/forms/BooleanField.svelte | 3 ++ .../src/forms/DateTimeField.svelte | 9 +++- .../src/forms/Field.svelte | 3 +- .../standard-components/src/forms/Form.svelte | 24 +++++++-- .../src/forms/LongFormField.svelte | 12 ++++- .../src/forms/OptionsField.svelte | 2 + .../src/forms/Picker.svelte | 1 + .../src/forms/RelationshipField.svelte | 2 + .../src/forms/StringField.svelte | 8 ++- 11 files changed, 122 insertions(+), 9 deletions(-) diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index 4d80ee7b2b..229fd0242e 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -1135,6 +1135,12 @@ "value": "spectrum--large" } ] + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false } ] }, @@ -1185,6 +1191,12 @@ "type": "text", "label": "Placeholder", "key": "placeholder" + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false } ] }, @@ -1207,6 +1219,12 @@ "type": "text", "label": "Placeholder", "key": "placeholder" + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false } ] }, @@ -1230,6 +1248,12 @@ "label": "Placeholder", "key": "placeholder", "placeholder": "Choose an option" + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false } ] }, @@ -1252,6 +1276,12 @@ "type": "text", "label": "Text", "key": "text" + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false } ] }, @@ -1275,6 +1305,12 @@ "label": "Placeholder", "key": "placeholder", "placeholder": "Type something..." + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false } ] }, @@ -1303,6 +1339,12 @@ "label": "Show Time", "key": "enableTime", "defaultValue": true + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false } ] }, @@ -1320,6 +1362,12 @@ "type": "text", "label": "Label", "key": "label" + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false } ] }, @@ -1337,6 +1385,12 @@ "type": "text", "label": "Label", "key": "label" + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false } ] } diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte index 6cf16c109e..5df1d40eb9 100644 --- a/packages/standard-components/src/forms/AttachmentField.svelte +++ b/packages/standard-components/src/forms/AttachmentField.svelte @@ -5,6 +5,7 @@ export let field export let label + export let disabled = false let fieldState let fieldApi @@ -24,11 +25,21 @@ {#if mounted} - +
+ +
{/if}
+ + diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte index d7c43ea63c..6e38c22be4 100644 --- a/packages/standard-components/src/forms/BooleanField.svelte +++ b/packages/standard-components/src/forms/BooleanField.svelte @@ -5,6 +5,7 @@ export let field export let label export let text + export let disabled = false let fieldState let fieldApi @@ -17,6 +18,7 @@ - + {#if fieldState} {#if !$fieldState.valid} { + registerField: (field, defaultValue = null, fieldDisabled = false) => { if (!field) { return } + + // Auto columns are always disabled + const isAutoColumn = !!schema?.[field]?.autocolumn + if (fieldMap[field] != null) { + // Update disabled property just so that toggling the disabled field + // state in the builder makes updates in real time. + // We only need this because of optimisations which prevent fully + // remounting when settings change. + fieldMap[field].fieldState.update(state => { + state.disabled = disabled || fieldDisabled || isAutoColumn + return state + }) return fieldMap[field] } @@ -47,7 +60,11 @@ const validate = createValidatorFromConstraints(constraints, field, table) fieldMap[field] = { - fieldState: makeFieldState(field, defaultValue), + fieldState: makeFieldState( + field, + defaultValue, + disabled || fieldDisabled || isAutoColumn + ), fieldApi: makeFieldApi(field, defaultValue, validate), fieldSchema: schema?.[field] ?? {}, } @@ -115,13 +132,14 @@ } // Creates observable state data about a specific field - const makeFieldState = (field, defaultValue) => { + const makeFieldState = (field, defaultValue, fieldDisabled) => { return writable({ field, fieldId: `id-${generateID()}`, value: initialValues[field] ?? defaultValue, error: null, valid: true, + disabled: fieldDisabled, }) } diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte index d22be1b6a9..a5ef5d94ed 100644 --- a/packages/standard-components/src/forms/LongFormField.svelte +++ b/packages/standard-components/src/forms/LongFormField.svelte @@ -6,6 +6,7 @@ export let field export let label export let placeholder + export let disabled = false let fieldState let fieldApi @@ -41,12 +42,13 @@ {#if mounted} -
+
{/if} @@ -68,4 +70,12 @@ div :global(.ql-editor p) { word-break: break-all; } + + div.disabled { + pointer-events: none !important; + background-color: rgb(244, 244, 244); + } + div.disabled :global(.ql-container *) { + color: var(--spectrum-alias-text-color-disabled) !important; + } diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte index 48feb77b54..82f213686b 100644 --- a/packages/standard-components/src/forms/OptionsField.svelte +++ b/packages/standard-components/src/forms/OptionsField.svelte @@ -5,6 +5,7 @@ export let field export let label export let placeholder + export let disabled = false let fieldState let fieldApi @@ -26,6 +27,7 @@ {#if fieldState} -
+
{#if !$fieldState.valid}