From 4aed4e8da4fa8a55cb5b12de5ff878f159a3f692 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=90=C4=83ng=20T=C3=BA?=
 <68631458+ngdangtu-vn@users.noreply.github.com>
Date: Tue, 8 Aug 2023 16:18:40 +0700
Subject: [PATCH] feat(NumberControl.js): add prefix/suffix

- wrap the input in 2 Div elements with custom CSS
- add example with both prefix & suffix
---
 dev-test/config.yml                           |  2 +-
 .../src/NumberControl.js                      | 41 +++++++++++++------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/dev-test/config.yml b/dev-test/config.yml
index eab888e83c13..a29640db0925 100644
--- a/dev-test/config.yml
+++ b/dev-test/config.yml
@@ -121,7 +121,7 @@ collections: # A list of collections the CMS should be able to edit
       - { 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' }
-      - { label: 'Number', name: 'number', widget: 'number', hint: 'To infinity and beyond!' }
+      - { label: 'Number', name: 'number', widget: 'number', suffix: 'px', hint: 'To infinity and beyond!' }
       - { label: 'Markdown', name: 'markdown', widget: 'markdown' }
       - { label: 'Datetime', name: 'datetime', widget: 'datetime' }
       - { label: 'Date', name: 'date', widget: 'date' }
diff --git a/packages/netlify-cms-widget-number/src/NumberControl.js b/packages/netlify-cms-widget-number/src/NumberControl.js
index 35606d9e4211..9e69dd54e186 100644
--- a/packages/netlify-cms-widget-number/src/NumberControl.js
+++ b/packages/netlify-cms-widget-number/src/NumberControl.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { css } from '@emotion/core';
+
 const ValidationErrorTypes = {
   PRESENCE: 'PRESENCE',
   PATTERN: 'PATTERN',
@@ -8,6 +10,11 @@ const ValidationErrorTypes = {
   CUSTOM: 'CUSTOM',
 };
 
+const innerWrapper = css`
+  display: flex;
+  align-items: baseline;
+`
+
 export function validateMinMax(value, min, max, field, t) {
   let error;
 
@@ -100,19 +107,29 @@ export default class NumberControl extends React.Component {
     const min = field.get('min', '');
     const max = field.get('max', '');
     const step = field.get('step', field.get('value_type') === 'int' ? 1 : '');
+
+    const prefix = field.get('prefix', false);
+    const suffix = field.get('suffix', false);
+
     return (
-      <input
-        type="number"
-        id={forID}
-        className={classNameWrapper}
-        onFocus={setActiveStyle}
-        onBlur={setInactiveStyle}
-        value={value || (value === 0 ? value : '')}
-        step={step}
-        min={min}
-        max={max}
-        onChange={this.handleChange}
-      />
+      <div className={classNameWrapper}>
+        <div css={innerWrapper}>
+          {prefix && (<span>{prefix}&nbsp;</span>)}
+          <input
+            type="number"
+            id={forID}
+            onFocus={setActiveStyle}
+            onBlur={setInactiveStyle}
+            value={value || (value === 0 ? value : '')}
+            step={step}
+            min={min}
+            max={max}
+            onChange={this.handleChange}
+            css={css`flex-grow: 1`}
+          />
+          {suffix && (<span>&nbsp;{suffix}</span>)}
+        </div>
+      </div>
     );
   }
 }