feat: single-line-editor add an optional prop to hide all validation …

…messages [LUMOS-312] (#1805) feat: 🎸 add an optional prop to hide all validation messages ✅ Closes: LUMOS-312
contentful · Dec 3, 2024 · 4590482 · 4590482
1 parent a14e400
commit 4590482
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 20 deletions.
diff --git a/packages/single-line/src/SingleLineEditor.test.tsx b/packages/single-line/src/SingleLineEditor.test.tsx
@@ -229,4 +229,35 @@ describe('SingleLineEditor', () => {
     expect(getByText('0 characters')).toBeInTheDocument();
     expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
   });
+
+  it('renders no validation message or counter if withCharInformation is false', () => {
+    const [field] = createFakeFieldAPI((field) => {
+      return {
+        ...field,
+        type: 'Symbol',
+        validations: [
+          {
+            size: {
+              min: 100,
+              max: 1000,
+            },
+          },
+        ],
+        id: 'field-id',
+      };
+    });
+
+    const { queryByText } = render(
+      <SingleLineEditor
+        field={field}
+        withCharValidation={false}
+        isInitiallyDisabled={false}
+        withCharInformation={false}
+        locales={createFakeLocalesAPI()}
+      />
+    );
+
+    expect(queryByText('0 characters')).not.toBeInTheDocument();
+    expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/single-line/src/SingleLineEditor.tsx b/packages/single-line/src/SingleLineEditor.tsx
@@ -16,17 +16,22 @@ export interface SingleLineEditorProps {
   /**
    * is the field disabled initially
    */
-  isInitiallyDisabled: boolean;
+  isInitiallyDisabled?: boolean;
 
   /**
    * is the field manually disabled
    */
   isDisabled?: boolean;
 
+  /**
+   * whether validations should be rendered or not.
+   */
+  withCharInformation?: boolean;
+
   /**
    * whether char validation should be shown or not
    */
-  withCharValidation: boolean;
+  withCharValidation?: boolean;
   /**
    * sdk.field
    */
@@ -53,7 +58,18 @@ function isSupportedFieldTypes(val: string): val is 'Symbol' | 'Text' {
 }
 
 export function SingleLineEditor(props: SingleLineEditorProps) {
-  const { field, locales } = props;
+  const {
+    field,
+    isDisabled,
+    isInitiallyDisabled = true,
+    locales,
+    onBlur,
+    onFocus,
+    withCharInformation = true,
+    withCharValidation = true,
+  } = props;
+
+  console.log(`isDisabled => `, isDisabled);
 
   if (!isSupportedFieldTypes(field.type)) {
     throw new Error(`"${field.type}" field type is not supported by SingleLineEditor`);
@@ -62,12 +78,13 @@ export function SingleLineEditor(props: SingleLineEditorProps) {
   const constraints = ConstraintsUtils.fromFieldValidations(field.validations, field.type);
   const checkConstraint = ConstraintsUtils.makeChecker(constraints);
   const direction = locales.direction[field.locale] || 'ltr';
+  const handleCheckConstraint = withCharValidation ? checkConstraint : () => true;
 
   return (
     <FieldConnector<string>
       field={field}
-      isInitiallyDisabled={props.isInitiallyDisabled}
-      isDisabled={props.isDisabled}
+      isInitiallyDisabled={isInitiallyDisabled}
+      isDisabled={isDisabled}
     >
       {({ value, errors, disabled, setValue }) => {
         return (
@@ -78,21 +95,16 @@ export function SingleLineEditor(props: SingleLineEditorProps) {
               isInvalid={errors.length > 0}
               isDisabled={disabled}
               value={value || ''}
-              onFocus={props.onFocus}
-              onBlur={props.onBlur}
+              onFocus={onFocus}
+              onBlur={onBlur}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 setValue(e.target.value);
               }}
             />
-            {props.withCharValidation && (
+            {withCharInformation && (
               <div className={styles.validationRow}>
-                <CharCounter value={value || ''} checkConstraint={checkConstraint} />
-                <CharValidation constraints={constraints} />
-              </div>
-            )}
-            {props.withCharValidation === false && (
-              <div className={styles.validationRow}>
-                <CharCounter value={value || ''} checkConstraint={() => true} />
+                <CharCounter value={value || ''} checkConstraint={handleCheckConstraint} />
+                {withCharValidation && <CharValidation constraints={constraints} />}
               </div>
             )}
           </div>
@@ -101,8 +113,3 @@ export function SingleLineEditor(props: SingleLineEditorProps) {
     </FieldConnector>
   );
 }
-
-SingleLineEditor.defaultProps = {
-  isInitiallyDisabled: true,
-  withCharValidation: true,
-};
diff --git a/packages/single-line/stories/SingleLineEditor.stories.tsx b/packages/single-line/stories/SingleLineEditor.stories.tsx
@@ -33,3 +33,47 @@ export const Default: Story = {
     );
   },
 };
+
+export const CharValidationDisabled: Story = {
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+  render: () => {
+    const [field, mitt] = createFakeFieldAPI();
+    const locales = createFakeLocalesAPI();
+
+    return (
+      <div>
+        <SingleLineEditor
+          field={field}
+          locales={locales}
+          isInitiallyDisabled={false}
+          withCharValidation={false}
+        />
+        <ActionsPlayground mitt={mitt} />
+      </div>
+    );
+  },
+};
+
+export const WithCharInformationDisabled: Story = {
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+  render: () => {
+    const [field, mitt] = createFakeFieldAPI();
+    const locales = createFakeLocalesAPI();
+
+    return (
+      <div>
+        <SingleLineEditor
+          isInitiallyDisabled={false}
+          withCharInformation={false}
+          field={field}
+          locales={locales}
+        />
+        <ActionsPlayground mitt={mitt} />
+      </div>
+    );
+  },
+};