Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Read only form fields #12244

Merged
merged 17 commits into from
Nov 7, 2023
Merged

Read only form fields #12244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5c049e0
LongFormField readonly prop
melohagan Nov 1, 2023
5c36d70
Pickers readonly prop
melohagan Nov 1, 2023
56d5a0b
Further read only settings
melohagan Nov 1, 2023
33e3726
Use fieldState
melohagan Nov 1, 2023
5923ae2
Make form block view readonly
melohagan Nov 1, 2023
8475df9
Merge branch 'master' into budi-7105-builder-option-for-read-only-for…
melohagan Nov 1, 2023
9161fee
Merge branch 'master' into budi-7105-builder-option-for-read-only-for…
melohagan Nov 2, 2023
738082d
Remove readonly key
melohagan Nov 2, 2023
662e33c
Merge branch 'master' into budi-7105-builder-option-for-read-only-for…
melohagan Nov 3, 2023
5f0a866
Merge branch 'master' into budi-7105-builder-option-for-read-only-for…
melohagan Nov 3, 2023
f02f557
Merge branch 'master' into budi-7105-builder-option-for-read-only-for…
melohagan Nov 3, 2023
a03a00c
Toggle preview
melohagan Nov 3, 2023
367a2e6
Merge branch 'budi-7105-builder-option-for-read-only-form-fields' of …
melohagan Nov 3, 2023
3767ecc
Merge branch 'master' into budi-7105-builder-option-for-read-only-for…
melohagan Nov 6, 2023
2a3e31f
Merge branch 'master' into budi-7105-builder-option-for-read-only-for…
shogunpurple Nov 6, 2023
fee9a9d
Merge branch 'master' into budi-7105-builder-option-for-read-only-for…
melohagan Nov 7, 2023
c169a73
readonly css
melohagan Nov 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/bbui/src/Form/Core/Checkbox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
export let id = null
export let text = null
export let disabled = false
export let readonly = false
export let size
export let indeterminate = false

Expand All @@ -24,6 +25,7 @@
class:is-invalid={!!error}
class:checked={value}
class:is-indeterminate={indeterminate}
class:readonly
>
<input
checked={value}
Expand Down Expand Up @@ -68,4 +70,7 @@
.spectrum-Checkbox-input {
opacity: 0;
}
.readonly {
pointer-events: none;
}
</style>
5 changes: 5 additions & 0 deletions packages/bbui/src/Form/Core/CheckboxGroup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
export let options = []
export let error = null
export let disabled = false
export let readonly = false
export let getOptionLabel = option => option
export let getOptionValue = option => option

Expand All @@ -34,6 +35,7 @@
title={getOptionLabel(option)}
class="spectrum-Checkbox spectrum-FieldGroup-item"
class:is-invalid={!!error}
class:readonly
>
<label
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
Expand Down Expand Up @@ -66,4 +68,7 @@
.spectrum-Checkbox-input {
opacity: 0;
}
.readonly {
pointer-events: none;
}
</style>
4 changes: 3 additions & 1 deletion packages/bbui/src/Form/Core/DatePicker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

export let id = null
export let disabled = false
export let readonly = false
export let error = null
export let enableTime = true
export let value = null
Expand Down Expand Up @@ -186,7 +187,7 @@
>
<div
id={flatpickrId}
class:is-disabled={disabled}
class:is-disabled={disabled || readonly}
class:is-invalid={!!error}
class="flatpickr spectrum-InputGroup spectrum-Datepicker"
class:is-focused={open}
Expand All @@ -211,6 +212,7 @@
{/if}
<input
{disabled}
{readonly}
data-input
type="text"
class="spectrum-Textfield-input spectrum-InputGroup-input"
Expand Down
5 changes: 5 additions & 0 deletions packages/bbui/src/Form/Core/RadioGroup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
export let options = []
export let error = null
export let disabled = false
export let readonly = false
export let getOptionLabel = option => option
export let getOptionValue = option => option
export let getOptionTitle = option => option
Expand Down Expand Up @@ -40,6 +41,7 @@
title={getOptionTitle(option)}
class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
class:is-invalid={!!error}
class:readonly
>
<input
on:change={onChange}
Expand All @@ -62,4 +64,7 @@
.spectrum-Radio-input {
opacity: 0;
}
.readonly {
pointer-events: none;
}
</style>
2 changes: 2 additions & 0 deletions packages/bbui/src/Form/Core/RichTextField.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
export let value = ""
export let placeholder = null
export let disabled = false
export let readonly = false
export let error = null
export let height = null
export let id = null
Expand All @@ -20,6 +21,7 @@
{fullScreenOffset}
{disabled}
{easyMDEOptions}
{readonly}
on:change
/>
</div>
Expand Down
2 changes: 2 additions & 0 deletions packages/bbui/src/Form/Core/TextArea.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
export let value = ""
export let placeholder = null
export let disabled = false
export let readonly = false
export let error = null
export let id = null
export let height = null
Expand Down Expand Up @@ -61,6 +62,7 @@
class="spectrum-Textfield-input"
style={align ? `text-align: ${align}` : ""}
{disabled}
{readonly}
{id}
on:focus={() => (focus = true)}
on:blur={onChange}
Expand Down
2 changes: 2 additions & 0 deletions packages/bbui/src/Form/DatePicker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
export let label = null
export let labelPosition = "above"
export let disabled = false
export let readonly = false
export let error = null
export let enableTime = true
export let timeOnly = false
Expand All @@ -33,6 +34,7 @@
<DatePicker
{error}
{disabled}
{readonly}
{value}
{placeholder}
{enableTime}
Expand Down
5 changes: 5 additions & 0 deletions packages/bbui/src/Markdown/MarkdownEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
export let id = null
export let fullScreenOffset = 0
export let disabled = false
export let readonly = false
export let easyMDEOptions

const dispatch = createEventDispatcher()
Expand All @@ -19,6 +20,9 @@
// control
$: checkValue(value)
$: mde?.codemirror.on("change", debouncedUpdate)
$: if (readonly || disabled) {
mde?.togglePreview()
}

const checkValue = val => {
if (mde && val !== latestValue) {
Expand Down Expand Up @@ -54,6 +58,7 @@
easyMDEOptions={{
initialValue: value,
placeholder,
toolbar: disabled || readonly ? false : undefined,
...easyMDEOptions,
}}
/>
Expand Down
119 changes: 112 additions & 7 deletions packages/client/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2589,6 +2589,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "text",
"label": "Initial form step",
Expand Down Expand Up @@ -2738,6 +2749,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "validation/string",
"label": "Validation",
Expand Down Expand Up @@ -2858,6 +2880,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "validation/number",
"label": "Validation",
Expand Down Expand Up @@ -3165,6 +3198,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "select",
"label": "Options source",
Expand Down Expand Up @@ -3319,6 +3363,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "select",
"label": "Type",
Expand Down Expand Up @@ -3522,6 +3577,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "validation/boolean",
"label": "Validation",
Expand Down Expand Up @@ -3630,6 +3696,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "validation/string",
"label": "Validation",
Expand Down Expand Up @@ -3740,6 +3817,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "validation/datetime",
"label": "Validation",
Expand Down Expand Up @@ -4087,7 +4175,7 @@
},
{
"type": "boolean",
"label": "Disabled",
"label": "Read only",
"key": "disabled",
"defaultValue": false
},
Expand Down Expand Up @@ -4193,6 +4281,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "select",
"label": "Layout",
Expand Down Expand Up @@ -4274,6 +4373,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "select",
"label": "Layout",
Expand Down Expand Up @@ -5923,12 +6033,7 @@
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false,
"dependsOn": {
"setting": "actionType",
"value": "View",
"invert": true
}
"defaultValue": false
}
]
},
Expand Down
3 changes: 2 additions & 1 deletion packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,8 @@
actionType: actionType === "Create" ? "Create" : "Update",
dataSource,
size,
disabled: disabled || actionType === "View",
disabled,
readonly: !disabled && actionType === "View",
}}
styles={{
normal: {
Expand Down
Loading
Loading