feat(ui-concerto): add textOnly mode-#13 (#365)

Signed-off-by: TC5022 <[email protected]>

Author: TC5022

packages/storybook/src/stories/3-ConcertoForm.stories.js

@@ -18,6 +18,7 @@ export default {
 
 export const SimpleExample = () => {
   const readOnly = boolean('Read-only', false);
+  const textOnly = boolean('Text-only', false);
   const type = text('Type', 'test.Person');
   const options = object('Options', {
     includeOptionalFields: true,
@@ -78,6 +79,7 @@ export const SimpleExample = () => {
     <div style={{ padding: '10px' }}>
       <ConcertoForm
         readOnly={readOnly}
+        textOnly={textOnly}
         models={[model]}
         options={options}
         type={type}
@@ -91,6 +93,7 @@ export const SimpleExample = () => {
 
 export const ModelBuilder = () => {
   const readOnly = boolean('Read-only', false);
+  const textOnly = boolean('Text-only', false);
   const type = text('Type', 'concerto.metamodel.ModelFile');
   const options = object('Options', {
     includeOptionalFields: false,
@@ -130,6 +133,7 @@ export const ModelBuilder = () => {
     <div style={{ padding: '10px' }}>
       <ConcertoModelBuilder
         readOnly={readOnly}
+        textOnly={textOnly}
         options={options}
         type={type}
         json={json}

packages/ui-concerto/src/components/concertoForm.css

@@ -59,6 +59,12 @@
   margin-bottom: 0;
 }
 
+.textOnly > label{
+  font-weight: 300;
+  color: #2f4f4f;
+  font-size: small;
+}
+
 /** CSS Classes for use by the ModelBuilderVisitor */
 .mbFieldDeclaration {
   display: grid;

packages/ui-concerto/src/components/concertoForm.js

@@ -70,6 +70,7 @@ const ConcertoForm = (props) => {
     includeOptionalFields: true,
     includeSampleData: 'sample',
     disabled: props.readOnly,
+    textOnly: props.textOnly,
     visitor: new ReactFormVisitor(),
     onFieldValueChange: (e, key) => {
       onFieldValueChange(e, key);
@@ -81,7 +82,7 @@ const ConcertoForm = (props) => {
       removeElement(e, key, index);
     },
     ...options,
-  }), [addElement, onFieldValueChange, removeElement, options, props.readOnly]);
+  }), [addElement, onFieldValueChange, removeElement, options, props.readOnly, props.textOnly]);
 
   const generator = React.useMemo(() => {
     if (modelManager) {
@@ -184,6 +185,7 @@ ConcertoForm.defaultProps = {
   onValueChange: () => true,
   options: {},
   readOnly: false,
+  textOnly: false,
   style: {}
 };
 
@@ -194,6 +196,7 @@ ConcertoForm.propTypes = {
   onValueChange: PropTypes.func.isRequired,
   options: PropTypes.object,
   readOnly: PropTypes.bool,
+  textOnly: PropTypes.bool,
   style: PropTypes.object
 };
 

packages/ui-concerto/src/components/concertoModelBuilder.js

@@ -39,6 +39,7 @@ ConcertoModelBuilder.propTypes = {
   onValueChange: PropTypes.func.isRequired,
   options: PropTypes.shape(),
   readOnly: PropTypes.bool,
+  textOnly: PropTypes.bool,
 };
 
 export default ConcertoModelBuilder;

packages/ui-concerto/src/components/fields.js

@@ -25,6 +25,7 @@ export const ConcertoCheckbox = ({
   id,
   field,
   readOnly,
+  textOnly,
   required,
   value,
   onFieldValueChange,
@@ -38,6 +39,7 @@ export const ConcertoCheckbox = ({
       fitted
       id={id}
       readOnly={readOnly}
+      disabled={textOnly}
       checked={value}
       onChange={(e, data) => onFieldValueChange(data, id)}
       key={`checkbox-${id}`}
@@ -49,6 +51,7 @@ export const ConcertoInput = ({
   id,
   field,
   readOnly,
+  textOnly,
   required,
   value,
   onFieldValueChange,
@@ -67,6 +70,7 @@ export const ConcertoInput = ({
   }
   return <Form.Field key={`field-${id}`} required={required} error={error}>
     <ConcertoLabel key={`label-${id}`} skip={skipLabel} name={applyDecoratorTitle(field)} htmlFor={id} />
+    {!textOnly ? (
     <Input
       id={id}
       type={type}
@@ -79,13 +83,21 @@ export const ConcertoInput = ({
       }
       key={`input-${id}`}
     />
+    ) : (
+      <div className='textOnly'>
+        <label value={value} key={`input-${id}`} >
+          {value}
+        </label>
+      </div>
+    )}
   </Form.Field>;
 };
 
 export const ConcertoRelationship = ({
   id,
   field,
   readOnly,
+  textOnly,
   required,
   value,
   onFieldValueChange,
@@ -105,6 +117,7 @@ export const ConcertoRelationship = ({
       id,
       field,
       readOnly,
+      textOnly,
       required,
       value,
       onFieldValueChange,
@@ -119,6 +132,8 @@ export const ConcertoRelationship = ({
     ? <ConcertoDropdown
       id={id}
       value={value}
+      displayText={value}
+      textOnly={textOnly}
       readOnly={readOnly}
       onFieldValueChange={onFieldValueChange}
       options={relationshipOptions}
@@ -129,6 +144,7 @@ export const ConcertoRelationship = ({
       label={<Label basic>{normalizeLabel(relationship.getType())}</Label>}
       labelPosition='right'
       readOnly={readOnly}
+      textOnly={textOnly}
       value={relationship.getIdentifier()}
       onChange={(e, data) => {
         relationship.setIdentifier(data.value || 'resource1');
@@ -173,13 +189,15 @@ export const ConcertoArray = ({
   id,
   field,
   readOnly,
+  textOnly,
   required,
   children,
   addElement,
 }) => (
   <Form.Field key={`field-${id}`} required={required}>
     <ConcertoLabel name={applyDecoratorTitle(field)} />
     {children}
+    {!textOnly ? (
     <div className="arrayElement grid">
       <div />
       <Button
@@ -198,18 +216,21 @@ export const ConcertoArray = ({
         }}
       />
     </div>
+    ) : null}
   </Form.Field>
 );
 
 export const ConcertoArrayElement = ({
   id,
   readOnly,
+  textOnly,
   children,
   index,
   removeElement,
 }) => (
   <div className="arrayElement grid" key={`array-${id}`}>
     <div key={`array-children-${id}`}>{children}</div>
+    {!textOnly ? (
     <Button
       icon={<Popup
         content='Remove this element'
@@ -226,28 +247,46 @@ export const ConcertoArrayElement = ({
       }}
       key={`array-btn-${id}`}
     />
+    ) : null}
   </div>
 );
 
 export const ConcertoDropdown = ({
   id,
   readOnly,
+  textOnly,
+  displayText,
   value,
   text,
   onFieldValueChange,
   options,
-}) => !readOnly ? (
-  <Select
-    clearable
-    fluid
-    value={value}
-    onChange={(e, data) => onFieldValueChange(data, id)}
-    key={`select-${id}`}
-    options={options}
-  />
-) : (
-    <Input type="text" readOnly value={text} key={`input-${id}`} />
-  );
+}) => {
+  if (readOnly) {
+    return (
+      <Input type="text" readOnly value={displayText} key={`input-${id}`} />
+    );
+  } else if (textOnly) {
+    return (
+      <div className="textOnly">
+        <label value={displayText} key={`input-${id}`}>
+          {" "}
+          {displayText}{" "}
+        </label>
+      </div>
+    );
+  } else {
+    return (
+      <Select
+        clearable
+        fluid
+        value={value}
+        onChange={(e, data) => onFieldValueChange(data, id)}
+        key={`select-${id}`}
+        options={options}
+      />
+    );
+  }
+}
 
 const BinaryField = ({ className, children }) => (
   <div className={className}>

packages/ui-concerto/src/formgenerator.js

@@ -34,6 +34,7 @@ class FormGenerator {
    * 'sample' uses random well-typed values
    * 'empty' provides sensible empty values
    * @param {object} options.disabled - if true, all form fields will be disabled
+   * @param {object} options.textOnly - if true, all form fields will appear as labels
    * @param {object} options.visitor - a class that extends HTMLFormVisitor
    *  that generates HTML, defaults to HTMLFormVisitor
    * @param {object} options.customClasses - a custom CSS classes that can be

packages/ui-concerto/src/modelBuilderVisitor.js

@@ -169,6 +169,8 @@ class ModelBuilderVisitor extends ReactFormVisitor {
             key={key}
             value={value.$class}
             text={altText ? altText.text : value.$class}
+            displayText={altText ? altText.text : value.$class}
+            textOnly={parameters.textOnly}
             readOnly={parameters.disabled}
             onFieldValueChange={onFieldValueChange}
             options={declarationTypes.map(({ value, text }) => ({

packages/ui-concerto/src/reactformvisitor.js

@@ -196,8 +196,10 @@ class ReactFormVisitor {
         id={key}
         key={`enum-${key}`}
         value={value}
+        displayText={value}
         field={enumDeclaration}
         readOnly={parameters.disabled}
+        textOnly={parameters.textOnly}
         onFieldValueChange={parameters.onFieldValueChange}
         options={enumDeclaration.getProperties().map(property => ({
           key: `option-${property.getName()}`,
@@ -219,6 +221,7 @@ class ReactFormVisitor {
     const {
       skipLabel,
       disabled,
+      textOnly,
       addElement,
       removeElement,
       onFieldValueChange,
@@ -242,6 +245,7 @@ class ReactFormVisitor {
       type: toFieldType(field.getType()),
       required: !field.isOptional(),
       readOnly: disabled,
+      textOnly: textOnly,
       addElement,
       removeElement,
       onFieldValueChange,
@@ -315,6 +319,8 @@ class ReactFormVisitor {
           id={key}
           key={`select-${key}`}
           value={value}
+          displayText={value}
+          textOnly={parameters.textOnly}
           readOnly={parameters.disabled}
           onFieldValueChange={parameters.onFieldValueChange}
           options={options.map(({ value, text }) => ({
@@ -357,6 +363,7 @@ class ReactFormVisitor {
     const {
       skipLabel,
       disabled,
+      textOnly,
       addElement,
       removeElement,
       onFieldValueChange,
@@ -380,6 +387,7 @@ class ReactFormVisitor {
       type: 'text',
       required: !relationship.isOptional(),
       readOnly: disabled,
+      textOnly: textOnly,
       addElement,
       removeElement,
       onFieldValueChange,