feat: limit the Molecule label length to a maximum of 10 characters

close: #1691
cheminfo · Sep 27, 2022 · 9a49474 · 9a49474
1 parent 92ef49b
commit 9a49474
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/component/elements/EditableColumn.tsx b/src/component/elements/EditableColumn.tsx
@@ -7,9 +7,10 @@ import {
   useState,
 } from 'react';
 
-import Input, { InputKeyboardEvent } from './Input';
+import Input, { InputKeyboardEvent, InputProps } from './Input';
 
-interface EditableColumnProps {
+interface EditableColumnProps
+  extends Omit<InputProps, 'style' | 'value' | 'type'> {
   onSave?: (element: any) => void;
   onEditStart?: (element: any) => void;
   type?: 'number' | 'text';
@@ -31,6 +32,7 @@ const EditableColumn = forwardRef(function EditableColumn(
     onEditStart = () => null,
     editStatus = false,
     validate = () => true,
+    ...InputProps
   } = props;
 
   const [enabled, enableEdit] = useState<boolean | undefined>();
@@ -107,6 +109,7 @@ const EditableColumn = forwardRef(function EditableColumn(
             value={value}
             type={type}
             onKeyUp={editHandler}
+            {...InputProps}
           />
         </div>
       )}

diff --git a/src/component/panels/MoleculesPanel/MoleculeHeader.tsx b/src/component/panels/MoleculesPanel/MoleculeHeader.tsx
@@ -63,6 +63,7 @@ export default function MoleculeHeader(props: MoleculeHeaderProps) {
           style={styles.labelInput}
           validate={validateLabel}
           onSave={(event) => saveLabelHandler(currentMolecule.id, event)}
+          maxLength={10}
         />
       </div>