Skip to content
This repository has been archived by the owner on May 19, 2020. It is now read-only.

added support for read-only rendering #54

Merged
merged 3 commits into from
Apr 22, 2020
Merged

added support for read-only rendering #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
acee75f
added support for read-only rendering
kanav-raina Apr 15, 2020
9e76eff
fix readOnly bugs
kanav-raina Apr 22, 2020
8a7b178
added readOnly and disabled prop
kanav-raina Apr 22, 2020
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
1 change: 1 addition & 0 deletions packages/concerto-ui-react/src/concertoForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ class ConcertoForm extends Component {
includeOptionalFields: true,
includeSampleData: 'sample',
disabled: props.readOnly,
readOnly:false,
visitor: new ReactFormVisitor(),
// CSS Styling, specify classnames
customClasses : {
Expand Down
13 changes: 13 additions & 0 deletions packages/concerto-ui-react/src/reactformvisitor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
const id = enumDeclaration.getName().toLowerCase();
component = (<div className={styles.field} key={id}>
<select className={styles.enumeration}
disabled={parameters.readOnly}
value={value}
onChange={(e)=>parameters.onFieldValueChange(e, key)}
key={key} >
Expand Down Expand Up @@ -253,6 +254,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
return(<div className={styles} key={field.getName()+'_wrapper'}>
<div className={styles.boolean}>
<input type="checkbox"
disabled={parameters.readOnly}
checked={value}
value={value}
onChange={(e)=>parameters.onFieldValueChange(e, key)}
Expand All @@ -264,6 +266,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
return (<div className={style} key={field.getName()+'_wrapper'}>
<input type={this.toFieldType(field.getType())}
className={styles.input}
readOnly={parameters.readOnly}
value={new Date(value).toDatetimeLocal()}
onChange={(e)=>parameters.onFieldValueChange(e, key)}
key={key} />
Expand All @@ -272,6 +275,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
return (<div className={style} key={field.getName()+'_wrapper'}>
<input type={this.toFieldType(field.getType())}
className={styles.input}
readOnly={parameters.readOnly}
value={value}
onChange={e => this.castChangeToPrimitiveType(e, key, field.getType(), parameters)}
key={key} />
Expand Down Expand Up @@ -310,6 +314,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
</div>
<div>
<button
disabled={parameters.readOnly}
className={styles.button + ' negative icon'}
onClick={(e)=>{parameters.removeElement(e, key, index);e.preventDefault();}}>
<i className="times icon"></i>
Expand All @@ -324,6 +329,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
<div/>
<div>
<button
disabled={parameters.readOnly}
className={styles.button + ' positive icon'}
onClick={(e)=>{parameters.addElement(e, key, defaultValue);e.preventDefault();}}>
<i className="plus icon"></i>
Expand All @@ -337,6 +343,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
{ !parameters.skipLabel && <label>{Utilities.normalizeLabel(field.getName())}</label> }
<div className={styles.boolean}>
<input type="checkbox"
disabled={parameters.readOnly}
checked={value}
value={value}
onChange={(e)=>parameters.onFieldValueChange(e, key)}
Expand All @@ -349,6 +356,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
{ !parameters.skipLabel && <label>{Utilities.normalizeLabel(field.getName())}</label> }
<input type={this.toFieldType(field.getType())}
className={styles.input}
readOnly={parameters.readOnly}
value={new Date(value).toDatetimeLocal()}
onChange={(e)=>parameters.onFieldValueChange(e, key)}
key={key} />
Expand All @@ -358,6 +366,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
{ !parameters.skipLabel && <label>{Utilities.normalizeLabel(field.getName())}</label> }
<input type={this.toFieldType(field.getType())}
className={styles.input}
readOnly={parameters.readOnly}
value={value}
onChange={e => this.castChangeToPrimitiveType(e, key, field.getType(), parameters)}
key={key} />
Expand Down Expand Up @@ -421,6 +430,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
let value = get(parameters.json,key);
return (<input type='text'
className={styles.input}
readOnly={parameters.readOnly}
value={value}
onChange={(e)=>parameters.onFieldValueChange(e, key)}
key={key} />);
Expand All @@ -436,6 +446,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
</div>
<div>
<button
disabled={parameters.readOnly}
className={styles.button + ' negative icon'}
onClick={(e)=>{parameters.removeElement(e, key, index);e.preventDefault();}}>
<i className="times icon"></i>
Expand All @@ -450,6 +461,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
<div/>
<div>
<button
disabled={parameters.readOnly}
className={styles.button + ' positive icon'}
onClick={(e)=>{parameters.addElement(e, key, 'resource1');e.preventDefault();}}>
<i className="plus icon"></i>
Expand All @@ -463,6 +475,7 @@ class ReactFormVisitor extends HTMLFormVisitor {
<input
type='text'
className={styles.input}
readOnly={parameters.readOnly}
value={value}
onChange={(e)=>parameters.onFieldValueChange(e, key)}
key={key}
Expand Down