Merge pull request #357 from TykTechnologies/string-builder-revert

String builder revert

lib/sass/form/components/StringBuilder/sass/Stringbuilder.scss

@@ -15,9 +15,9 @@
   font: inherit;
   display: block;
   z-index: 1;
+  width: 100%;
   padding: 0px;
   width: calc(100% - 35px);
-
   &:focus,
   &:active {
     border: none;
@@ -34,7 +34,7 @@
   border: none;
   word-wrap: break-word;
   word-break: break-all;
-
+  
 }
 
 .string-builder__disabled{

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "3.0.16",
+  "version": "3.0.17",
   "description": "Tyk UI - ui reusable components",
   "main": "lib/index.js",
   "scripts": {

src/form/components/StringBuilder/index.js

@@ -41,7 +41,7 @@ function StringBuilder(props) {
   const [stringBuilderHeight, setStringBuilderHeight] = useState();
   const [showOptions, setShowOptions] = useState(false);
   const [tokenString, setTokenString] = useState(stringToTokenString(value, options));
-  const [contentMaxLength, setContentMaxLength] = useState(
+  const [contextMaxLength, setContentMaxLength] = useState(
     tokenValue.length + 5,
   );
   const [tokens, setTokens] = useState([]);
@@ -82,10 +82,10 @@ function StringBuilder(props) {
 
   useEffect(() => {
     // Auto Grow Input
-    if (contentMaxLength - 3 < tokenValue.length) {
+    if (contextMaxLength - 3 < tokenValue.length) {
       const newHeight = inputRef.current.scrollHeight + 3;
       setStringBuilderHeight(() => newHeight);
-      setContentMaxLength(() => contentMaxLength + 25);
+      setContentMaxLength(() => contextMaxLength + 25);
     }
   }, [tokenString, tokenValue]);
 
@@ -183,7 +183,7 @@ function StringBuilder(props) {
                 inputRef={inputRef}
                 invalidTokenRegex={invalidTokenRegex}
                 name={name}
-                contentMaxLength={contentMaxLength}
+                contextMaxLength={contextMaxLength}
                 setContentMaxLength={setContentMaxLength}
               />
               <TokenizedString

src/form/components/StringBuilder/js/invalid-token.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import Tooltip from '../../../../components/Tooltip';
 import Icon from '../../../../components/Icon';
 
-function InvalidToken(props) {
+
+const InvalidToken = (props) => {
   const { token, findInvalidTokenSubstitute } = props;
   return (
     <span
@@ -19,7 +20,7 @@ function InvalidToken(props) {
       </Tooltip>
     </span>
   );
-}
+};
 
 InvalidToken.propTypes = {
   token: PropTypes.string,

src/form/components/StringBuilder/js/options-list.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import FloatingContainer from '../../../../components/FloatingContainer';
 
-export function OptionsList({
+export const OptionsList = ({
   options,
   showOptions,
   handleOptionSelection,
@@ -12,7 +12,7 @@ export function OptionsList({
   setShowOptions,
   allowSearch,
   initialSearchValue,
-}) {
+}) => {
   const [filterValue, setFilterValue] = useState(initialSearchValue);
   const [filteredOptions, setFilteredOptions] = useState(options);
 
@@ -26,7 +26,7 @@ export function OptionsList({
       return;
     }
     const newFilteredOptions = options.filter(
-      (option) => option.name.toLowerCase().includes(filterValue.toLowerCase()),
+      option => option.name.toLowerCase().includes(filterValue.toLowerCase()),
     );
     setFilteredOptions(newFilteredOptions);
   }, [filterValue]);
@@ -40,56 +40,58 @@ export function OptionsList({
   }
 
   return (
-    <FloatingContainer
-      className={`string-builder-dropdown tyk-form-group ${getThemeClasses().join(' ')}`}
-      element={containerRef}
-      size="matchElement"
-      displayAxis="vertical"
-    >
-      {allowSearch && (
-        <div className="string-builder-search">
-          <input
-            autoFocus
-            className="tyk-form-control"
-            value={filterValue}
-            placeholder="Search parameter"
-            onChange={(e) => {
-              setFilterValue(e.target.value);
-            }}
-            onKeyDown={(e) => {
-              if (
-                e.key === 'Escape'
-                || e.key === 'ArrowUp'
-                // || e.key === 'ArrowDown'
-                || e.key === 'Enter'
-              ) {
-                setShowOptions(false);
-              }
-            }}
-          />
-        </div>
-      )}
-      <ul className="string-builder-list">
-        {filteredOptions.map((option) => (
-          <li
-            key={`${option.id}-${option.name}`}
-            onMouseDown={() => handleOptionSelection(option)}
-          >
-            <span className={`url-builder__options_name ${option.className || 'default-option-name'}`}>
-              {option.name}
-            </span>
-            {option.desc && (
-              <span className="url-builder__options_description">
-                &nbsp; : &nbsp;
-                {option.desc}
+    <>
+      <FloatingContainer
+        className={`string-builder-dropdown tyk-form-group ${getThemeClasses().join(' ')}`}
+        element={containerRef}
+        size="matchElement"
+        displayAxis="vertical"
+      >
+        {allowSearch && (
+          <div className="string-builder-search">
+            <input
+              autoFocus
+              className="tyk-form-control"
+              value={filterValue}
+              placeholder="Search parameter"
+              onChange={(e) => {
+                setFilterValue(e.target.value);
+              }}
+              onKeyDown={(e) => {
+                if (
+                  e.key === 'Escape'
+                  || e.key === 'ArrowUp'
+                  // || e.key === 'ArrowDown'
+                  || e.key === 'Enter'
+                ) {
+                  setShowOptions(false);
+                }
+              }}
+            />
+          </div>
+        )}
+        <ul className="string-builder-list">
+          {filteredOptions.map(option => (
+            <li
+              key={`${option.id}${Math.random()}`}
+              onMouseDown={() => handleOptionSelection(option)}
+            >
+              <span className={`url-builder__options_name ${option.className || 'default-option-name'}`}>
+                {option.name}
               </span>
-            )}
-          </li>
-        ))}
-      </ul>
-    </FloatingContainer>
+              {option.desc && (
+                <span className="url-builder__options_description">
+                  &nbsp; : &nbsp;
+                  {option.desc}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      </FloatingContainer>
+    </>
   );
-}
+};
 
 OptionsList.propTypes = {
   options: PropTypes.arrayOf(Object),

src/form/components/StringBuilder/js/service.js

@@ -6,6 +6,7 @@ export const stringToTokenString = (value, options) => {
   return tempStr;
 };
 
+
 export const setCursorPos = (ref, pos) => {
   setTimeout(() => {
     ref.current.setSelectionRange(pos, pos);

src/form/components/StringBuilder/js/string-builder-footer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function StringBuilderFooter(props) {
+export const StringBuilderFooter = (props) => {
   const {
     note, error, inputInFocus, stringBuilderHeight, dropdownTriggerKey,
   } = props;
@@ -18,9 +18,7 @@ export function StringBuilderFooter(props) {
         <p className="tyk-form-control__help-block">
           <span>
             Enter
-            {' '}
             <span className="string_builder_trigger">{dropdownTriggerKey}</span>
-            {' '}
             to add any parameter
           </span>
         </p>
@@ -31,7 +29,7 @@ export function StringBuilderFooter(props) {
       )}
     </div>
   );
-}
+};
 
 StringBuilderFooter.propTypes = {
   note: PropTypes.string,

src/form/components/StringBuilder/js/string-input.js

@@ -21,7 +21,7 @@ function StringInput({
   setInputInFocus,
   invalidTokenRegex,
   name,
-  contentMaxLength,
+  contextMaxLength,
 }) {
   const [isPasteEvent, setIsPasteEvent] = useState(false);
 
@@ -82,8 +82,8 @@ function StringInput({
 
     // -- START :: Handle backspacing when cursor is at the end of the string
     if (selectionEnd === tokenValue.length) {
-      const lastToken = tokens[tokens.length - 2];
-      const lastCharsInString = tokenValue.slice(-(lastToken?.length ?? 0));
+      const lastToken = tokens[tokens?.length - 2];
+      const lastCharsInString = tokenValue.slice(-lastToken?.length);
       if (lastToken === lastCharsInString) {
         e.preventDefault();
         setTokenString(
@@ -257,7 +257,7 @@ function StringInput({
       name={name}
       ref={inputRef}
       style={{ height: `${stringBuilderHeight}px` }}
-      maxLength={contentMaxLength}
+      maxLength={contextMaxLength}
       onPaste={handlePasteEvent}
       onFocus={handleOnFocus}
       onBlur={() => setInputInFocus(false)}
@@ -290,7 +290,7 @@ StringInput.propTypes = {
   inputRef: PropTypes.instanceOf(Object),
   invalidTokenRegex: PropTypes.instanceOf(RegExp),
   name: PropTypes.string,
-  contentMaxLength: PropTypes.number,
+  contextMaxLength: PropTypes.number,
 };
 
 export { StringInput };