1
0
Fork 0
mirror of synced 2024-06-14 16:35:02 +12:00

Add disabled setting for forms and fields, and force autocolumns in forms to be disabled

This commit is contained in:
Andrew Kingston 2021-02-17 15:16:44 +00:00
parent d9cee39cdd
commit d92c0b770b
11 changed files with 122 additions and 9 deletions

View file

@ -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
}
]
}

View file

@ -5,6 +5,7 @@
export let field
export let label
export let disabled = false
let fieldState
let fieldApi
@ -24,11 +25,21 @@
<Field
{label}
{field}
{disabled}
type="attachment"
bind:fieldState
bind:fieldApi
defaultValue={[]}>
{#if mounted}
<Dropzone bind:files={value} />
<div class:disabled={$fieldState.disabled}>
<Dropzone bind:files={value} />
</div>
{/if}
</Field>
<style>
div.disabled :global(> *) {
background-color: var(--spectrum-global-color-gray-200) !important;
pointer-events: none !important;
}
</style>

View file

@ -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 @@
<Field
{label}
{field}
{disabled}
type="boolean"
bind:fieldState
bind:fieldApi
@ -26,6 +28,7 @@
<label class="spectrum-Checkbox" class:is-invalid={!$fieldState.valid}>
<input
checked={$fieldState.value}
disabled={$fieldState.disabled}
on:change={onChange}
type="checkbox"
class="spectrum-Checkbox-input"

View file

@ -9,6 +9,7 @@
export let label
export let placeholder
export let enableTime
export let disabled = false
let fieldState
let fieldApi
@ -53,7 +54,7 @@
}
</script>
<Field {label} {field} type="datetime" bind:fieldState bind:fieldApi>
<Field {label} {field} {disabled} type="datetime" bind:fieldState bind:fieldApi>
{#if fieldState}
<Flatpickr
bind:flatpickr
@ -67,6 +68,7 @@
id={flatpickrId}
aria-disabled="false"
aria-invalid={!$fieldState.valid}
class:is-disabled={$fieldState.disabled}
class:is-invalid={!$fieldState.valid}
class="flatpickr spectrum-InputGroup spectrum-Datepicker"
class:is-focused={open}
@ -76,6 +78,7 @@
<div
on:click={flatpickr?.open}
class="spectrum-Textfield spectrum-InputGroup-textfield"
class:is-disabled={$fieldState.disabled}
class:is-invalid={!$fieldState.valid}>
{#if !$fieldState.valid}
<svg
@ -88,6 +91,7 @@
<input
data-input
type="text"
disabled={$fieldState.disabled}
class="spectrum-Textfield-input spectrum-InputGroup-input"
aria-invalid={!$fieldState.valid}
{placeholder}
@ -98,6 +102,7 @@
type="button"
class="spectrum-Picker spectrum-InputGroup-button"
tabindex="-1"
disabled={$fieldState.disabled}
class:is-invalid={!$fieldState.valid}
on:click={flatpickr?.open}>
<svg
@ -120,7 +125,7 @@
.spectrum-Textfield-input {
pointer-events: none;
}
.spectrum-Textfield:hover {
.spectrum-Textfield:not(.is-disabled):hover {
cursor: pointer;
}
.flatpickr {

View file

@ -10,6 +10,7 @@
export let fieldSchema
export let defaultValue
export let type
export let disabled = false
// Get contexts
const formContext = getContext("form")
@ -20,7 +21,7 @@
// Register field with form
const formApi = formContext?.formApi
const labelPosition = fieldGroupContext?.labelPosition || "above"
const formField = formApi?.registerField(field, defaultValue)
const formField = formApi?.registerField(field, defaultValue, disabled)
// Expose field properties to parent component
fieldState = formField?.fieldState

View file

@ -8,6 +8,7 @@
export let datasource
export let theme
export let size
export let disabled = false
const component = getContext("component")
const context = getContext("context")
@ -34,11 +35,23 @@
// Form API contains functions to control the form
const formApi = {
registerField: (field, defaultValue = null) => {
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,
})
}

View file

@ -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 @@
<Field
{label}
{field}
{disabled}
type="longform"
bind:fieldState
bind:fieldApi
defaultValue="">
{#if mounted}
<div>
<div class:disabled={$fieldState.disabled}>
<RichText bind:value {options} />
</div>
{/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;
}
</style>

View file

@ -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 @@
<Field
{field}
{label}
{disabled}
type="options"
bind:fieldState
bind:fieldApi

View file

@ -20,6 +20,7 @@
<button
id={$fieldState.fieldId}
class="spectrum-Picker"
disabled={$fieldState.disabled}
class:is-invalid={!$fieldState.valid}
class:is-open={open}
aria-haspopup="listbox"

View file

@ -7,6 +7,7 @@
export let field
export let label
export let disabled = false
let fieldState
let fieldApi
@ -65,6 +66,7 @@
<Field
{label}
{field}
{disabled}
type="link"
bind:fieldState
bind:fieldApi

View file

@ -6,6 +6,7 @@
export let label
export let placeholder
export let type = "text"
export let disabled = false
let fieldState
let fieldApi
@ -33,11 +34,15 @@
<Field
{label}
{field}
{disabled}
type={type === 'number' ? 'number' : 'string'}
bind:fieldState
bind:fieldApi>
{#if fieldState}
<div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
<div
class="spectrum-Textfield"
class:is-invalid={!$fieldState.valid}
class:is-disabled={$fieldState.disabled}>
{#if !$fieldState.valid}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
@ -49,6 +54,7 @@
<input
on:keyup={updateValueOnEnter}
bind:this={input}
disabled={$fieldState.disabled}
id={$fieldState.fieldId}
value={$fieldState.value || ''}
placeholder={placeholder || ''}