1
0
Fork 0
mirror of synced 2024-06-27 18:40:42 +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" "value": "spectrum--large"
} }
] ]
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
} }
] ]
}, },
@ -1185,6 +1191,12 @@
"type": "text", "type": "text",
"label": "Placeholder", "label": "Placeholder",
"key": "placeholder" "key": "placeholder"
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
} }
] ]
}, },
@ -1207,6 +1219,12 @@
"type": "text", "type": "text",
"label": "Placeholder", "label": "Placeholder",
"key": "placeholder" "key": "placeholder"
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
} }
] ]
}, },
@ -1230,6 +1248,12 @@
"label": "Placeholder", "label": "Placeholder",
"key": "placeholder", "key": "placeholder",
"placeholder": "Choose an option" "placeholder": "Choose an option"
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
} }
] ]
}, },
@ -1252,6 +1276,12 @@
"type": "text", "type": "text",
"label": "Text", "label": "Text",
"key": "text" "key": "text"
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
} }
] ]
}, },
@ -1275,6 +1305,12 @@
"label": "Placeholder", "label": "Placeholder",
"key": "placeholder", "key": "placeholder",
"placeholder": "Type something..." "placeholder": "Type something..."
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
} }
] ]
}, },
@ -1303,6 +1339,12 @@
"label": "Show Time", "label": "Show Time",
"key": "enableTime", "key": "enableTime",
"defaultValue": true "defaultValue": true
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
} }
] ]
}, },
@ -1320,6 +1362,12 @@
"type": "text", "type": "text",
"label": "Label", "label": "Label",
"key": "label" "key": "label"
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
} }
] ]
}, },
@ -1337,6 +1385,12 @@
"type": "text", "type": "text",
"label": "Label", "label": "Label",
"key": "label" "key": "label"
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
} }
] ]
} }

View file

@ -5,6 +5,7 @@
export let field export let field
export let label export let label
export let disabled = false
let fieldState let fieldState
let fieldApi let fieldApi
@ -24,11 +25,21 @@
<Field <Field
{label} {label}
{field} {field}
{disabled}
type="attachment" type="attachment"
bind:fieldState bind:fieldState
bind:fieldApi bind:fieldApi
defaultValue={[]}> defaultValue={[]}>
{#if mounted} {#if mounted}
<Dropzone bind:files={value} /> <div class:disabled={$fieldState.disabled}>
<Dropzone bind:files={value} />
</div>
{/if} {/if}
</Field> </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 field
export let label export let label
export let text export let text
export let disabled = false
let fieldState let fieldState
let fieldApi let fieldApi
@ -17,6 +18,7 @@
<Field <Field
{label} {label}
{field} {field}
{disabled}
type="boolean" type="boolean"
bind:fieldState bind:fieldState
bind:fieldApi bind:fieldApi
@ -26,6 +28,7 @@
<label class="spectrum-Checkbox" class:is-invalid={!$fieldState.valid}> <label class="spectrum-Checkbox" class:is-invalid={!$fieldState.valid}>
<input <input
checked={$fieldState.value} checked={$fieldState.value}
disabled={$fieldState.disabled}
on:change={onChange} on:change={onChange}
type="checkbox" type="checkbox"
class="spectrum-Checkbox-input" class="spectrum-Checkbox-input"

View file

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

View file

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

View file

@ -8,6 +8,7 @@
export let datasource export let datasource
export let theme export let theme
export let size export let size
export let disabled = false
const component = getContext("component") const component = getContext("component")
const context = getContext("context") const context = getContext("context")
@ -34,11 +35,23 @@
// Form API contains functions to control the form // Form API contains functions to control the form
const formApi = { const formApi = {
registerField: (field, defaultValue = null) => { registerField: (field, defaultValue = null, fieldDisabled = false) => {
if (!field) { if (!field) {
return return
} }
// Auto columns are always disabled
const isAutoColumn = !!schema?.[field]?.autocolumn
if (fieldMap[field] != null) { 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] return fieldMap[field]
} }
@ -47,7 +60,11 @@
const validate = createValidatorFromConstraints(constraints, field, table) const validate = createValidatorFromConstraints(constraints, field, table)
fieldMap[field] = { fieldMap[field] = {
fieldState: makeFieldState(field, defaultValue), fieldState: makeFieldState(
field,
defaultValue,
disabled || fieldDisabled || isAutoColumn
),
fieldApi: makeFieldApi(field, defaultValue, validate), fieldApi: makeFieldApi(field, defaultValue, validate),
fieldSchema: schema?.[field] ?? {}, fieldSchema: schema?.[field] ?? {},
} }
@ -115,13 +132,14 @@
} }
// Creates observable state data about a specific field // Creates observable state data about a specific field
const makeFieldState = (field, defaultValue) => { const makeFieldState = (field, defaultValue, fieldDisabled) => {
return writable({ return writable({
field, field,
fieldId: `id-${generateID()}`, fieldId: `id-${generateID()}`,
value: initialValues[field] ?? defaultValue, value: initialValues[field] ?? defaultValue,
error: null, error: null,
valid: true, valid: true,
disabled: fieldDisabled,
}) })
} }

View file

@ -6,6 +6,7 @@
export let field export let field
export let label export let label
export let placeholder export let placeholder
export let disabled = false
let fieldState let fieldState
let fieldApi let fieldApi
@ -41,12 +42,13 @@
<Field <Field
{label} {label}
{field} {field}
{disabled}
type="longform" type="longform"
bind:fieldState bind:fieldState
bind:fieldApi bind:fieldApi
defaultValue=""> defaultValue="">
{#if mounted} {#if mounted}
<div> <div class:disabled={$fieldState.disabled}>
<RichText bind:value {options} /> <RichText bind:value {options} />
</div> </div>
{/if} {/if}
@ -68,4 +70,12 @@
div :global(.ql-editor p) { div :global(.ql-editor p) {
word-break: break-all; 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> </style>

View file

@ -5,6 +5,7 @@
export let field export let field
export let label export let label
export let placeholder export let placeholder
export let disabled = false
let fieldState let fieldState
let fieldApi let fieldApi
@ -26,6 +27,7 @@
<Field <Field
{field} {field}
{label} {label}
{disabled}
type="options" type="options"
bind:fieldState bind:fieldState
bind:fieldApi bind:fieldApi

View file

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

View file

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

View file

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