feat(StringControl.js): add prefix/suffix

- wrap the input in 2 Div elements with custom CSS - add example with both prefix & suffix
decaporg · Aug 8, 2023 · 584e348 · 584e348
1 parent 2df525c
commit 584e348
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/dev-test/config.yml b/dev-test/config.yml
@@ -117,7 +117,7 @@ collections: # A list of collections the CMS should be able to edit
         display_fields: ['title', 'date']
         search_fields: ['title', 'body']
         value_field: 'title'
-      - { label: 'Title', name: 'title', widget: 'string' }
+      - { label: 'Title', name: 'title', widget: 'string', prefix: 'This string:', suffix: 'is a title' }
       - { label: 'Boolean', name: 'boolean', widget: 'boolean', prefix: 'Toggle this to switch on/off:', hint: 'Toggle this to switch on/off', default: true }
       - { label: 'Map', name: 'map', widget: 'map' }
       - { label: 'Text', name: 'text', widget: 'text', hint: 'Plain text, not markdown' }

diff --git a/packages/netlify-cms-widget-string/src/StringControl.js b/packages/netlify-cms-widget-string/src/StringControl.js
@@ -1,8 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { css } from '@emotion/core';
+
+const innerWrapper = css`
+  display: flex;
+  align-items: baseline;
+`
 
 export default class StringControl extends React.Component {
   static propTypes = {
+    field: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
     forID: PropTypes.string,
     value: PropTypes.node,
@@ -41,21 +49,30 @@ export default class StringControl extends React.Component {
   };
 
   render() {
-    const { forID, value, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
+    const { field, forID, value, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
+
+    const prefix = field.get('prefix', false);
+    const suffix = field.get('suffix', false);
 
     return (
-      <input
-        ref={el => {
-          this._el = el;
-        }}
-        type="text"
-        id={forID}
-        className={classNameWrapper}
-        value={value || ''}
-        onChange={this.handleChange}
-        onFocus={setActiveStyle}
-        onBlur={setInactiveStyle}
-      />
+      <div className={classNameWrapper}>
+        <div css={innerWrapper}>
+          {prefix && (<span>{prefix}&nbsp;</span>)}
+          <input
+            ref={el => {
+              this._el = el;
+            }}
+            type="text"
+            id={forID}
+            value={value || ''}
+            onChange={this.handleChange}
+            onFocus={setActiveStyle}
+            onBlur={setInactiveStyle}
+            css={css`flex-grow: 1`}
+          />
+          {suffix && (<span>&nbsp;{suffix}</span>)}
+        </div>
+      </div>
     );
   }
 }