Skip to content

Commit acc700b

Browse files
Merge pull request #156 from terminusdb/bool
adding custom UI for boolean field
2 parents 65f5da7 + 812aa25 commit acc700b

File tree

7 files changed

+49
-3
lines changed

7 files changed

+49
-3
lines changed

packages/tdb-documents-ui/diff/src/Output.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,11 @@ export const Output = () => {
142142
}
143143
},
144144
"@type": "Class",
145+
"m_like": "xsd:boolean",
146+
"like": {
147+
"@class": "xsd:boolean",
148+
"@type": "Optional"
149+
},
145150
"optMarkDown": {
146151
"@class": "xsd:string",
147152
"@type": "Optional"

packages/tdb-documents-ui/diff/src/diff.constants.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ export const oldData = {
33
"body": {
44
"@id": "body/6230f55d381076aa7f94b6b01a7a7ae1692ef40c44e233a52c1c280b5d339839",
55
"@type": "body",
6+
"m_like": true,
7+
"like": false,
68
"optMarkDown": "### opt",
79
"setMarkDown": [
810
"### set 1",
@@ -17,6 +19,8 @@ export const changedData = {
1719
"body": {
1820
"@id": "body/6230f55d381076aa7f94b6b01a7a7ae1692ef40c44e233a52c1c280b5d339839",
1921
"@type": "body",
22+
"m_like": true,
23+
"like": true,
2024
"optMarkDown": "### opt changed",
2125
"setMarkDown": [
2226
"### set 1 changed",

packages/tdb-documents-ui/src/dataTypeFrames/helpers.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ export function getFormat(frame, item) {
126126
*/
127127
return widget.getTextareaUIWidget(CONST.XSD_STRING, mode, data)
128128
}
129+
if(frame[item] === CONST.XSD_BOOLEAN) return widget.getBooleanUI(mode, data)
129130
/** Commenting out HTML support as of now */
130131
/*else if (frame[item] === CONST.XDD_HTML) {
131132
return { ["ui:field"]: widget.getEditHTMLUI }

packages/tdb-documents-ui/src/dataTypeFrames/widget.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,36 @@ import * as util from "../utils"
1212
import MDEditor, { commands } from '@uiw/react-md-editor';
1313
import mermaid from "mermaid";
1414
import uuid from 'react-uuid'
15+
import InputGroup from 'react-bootstrap/InputGroup';
16+
17+
function booleanField(mode, props) {
18+
const [checked, setChecked] = useState(mode !== CONST.CREATE ? props.formData : false)
19+
20+
function handleClick() {
21+
setChecked(!checked)
22+
props.onChange(!checked)
23+
}
24+
return <InputGroup className="mb-3 w-100">
25+
{mode !== CONST.VIEW && <div className={`control-label`}>
26+
{props.name}
27+
{props.required && <span className="required">{"*"}</span>}
28+
</div>}
29+
<Stack direction={"horizontal"} gap={2}>
30+
{checked && <input type="checkbox" id={props.name} name={props.name} checked onChange={handleClick}/>}
31+
{!checked && <input type="checkbox" id={props.name} name={props.name} onChange={handleClick}/>}
32+
<span>{props.name}</span>
33+
</Stack>
34+
</InputGroup>
35+
}
36+
37+
export function getBooleanUI (mode, data) {
38+
let uiLayout = {}
39+
function displayBooleanField(props) {
40+
return booleanField(mode, props)
41+
}
42+
uiLayout["ui:field"] = displayBooleanField
43+
return uiLayout
44+
}
1545

1646
// function to provide a ui widget to textarea for xsd:string types
1747
export function getTextareaUIWidget(placeholder, mode, data) {

packages/tdb-documents-ui/src/helpers/formDataHelper.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export function getFormData(frame, item, mode, formData) {
77
if(!frame.hasOwnProperty(item)) return null
88

99
if(util.isDataType(frame[item])) {
10+
if(frame[item] === CONST.XSD_BOOLEAN) return false
1011
return util.getDefaultValue(item, formData)
1112
}
1213

packages/tdb-documents-ui/src/mandatoryFrames.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,10 @@ export function makeMandatoryFrames (fullFrame, item, frame, uiFrame, mode, form
7575
let data=dataProvider.getFormData(frame, item, mode, formData)
7676
if(data) layout["default"]=data
7777
}
78+
if(layout["type"] === CONST.BOOLEAN_TYPE) {
79+
let data=dataProvider.getFormData(frame, item, mode, formData)
80+
if(!data) layout["default"]=data
81+
}
7882

7983
/** gather ui layout of property to change look and feel */
8084
let uiLayout = generateUI(fullFrame, frame, item, uiFrame, mode, formData, onTraverse, onSelect, documentation, extractedFrames, docType)

packages/tdb-documents-ui/src/templates.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const DisplayLabel = ({schema, id, label, formData}) => {
4747

4848
//console.log("props", id, props)
4949
// return empty div when no data available
50-
if(!formData && !uiSchema.hasOwnProperty("ui:field")) {
50+
//if(!formData && !uiSchema.hasOwnProperty("ui:field")) {
5151
// check for ui field - we use custom fields some times to represent null fields
5252
if(schema.info === CONST.DATA_TYPE && schema.type === CONST.BOOLEAN_TYPE) {
5353
// display a different widget for bool type
@@ -61,12 +61,13 @@ const DisplayLabel = ({schema, id, label, formData}) => {
6161
</label>
6262
<div className="checkbox disabled">
6363
<label>
64-
<input type="checkbox" id="root_transparent" disabled="" checked=""/>
64+
{formData && <input type="checkbox" id="root_transparent" disabled="" checked/>}
65+
{!formData && <input type="checkbox" id="root_transparent" disabled=""/>}
6566
<span>{schema.title}</span>
6667
</label>
6768
</div>
6869
</div>
69-
}
70+
//}
7071
return <div className="empty__field"/>
7172
}
7273

0 commit comments

Comments
 (0)