change ui: show/hide enter url input when it is checked or not

collective · Jul 2, 2024 · 3512b76 · 3512b76
1 parent 9b1bd53
commit 3512b76
Showing 1 changed file with 22 additions and 3 deletions.
diff --git a/...ages/volto-hydra/src/customizations/components/manage/Preferences/PersonalPreferences.jsx b/...ages/volto-hydra/src/customizations/components/manage/Preferences/PersonalPreferences.jsx
@@ -98,6 +98,9 @@ class PersonalPreferences extends Component {
     super(props);
     this.onCancel = this.onCancel.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
+    this.state = {
+      hidden: true,
+    };
   }
 
   /**
@@ -127,6 +130,7 @@ class PersonalPreferences extends Component {
    */
   onCancel() {
     this.props.closeMenu();
+    toast.error(<Toast error title={'Invalid Entered URL!.'} />);
   }
 
   /**
@@ -147,7 +151,12 @@ class PersonalPreferences extends Component {
             {
               id: 'default',
               title: this.props.intl.formatMessage(messages.default),
-              fields: ['language', 'urls', 'url'],
+              fields: ['language'],
+            },
+            {
+              id: 'frontend',
+              title: 'Frontend',
+              fields: ['urls', 'urlCheck', 'url'],
             },
           ],
           properties: {
@@ -166,21 +175,31 @@ class PersonalPreferences extends Component {
               title: this.props.intl.formatMessage(messages.frontendUrls),
               type: 'string',
               choices: map(keys(urls), (url) => [url, urls[url]]),
+              mode: !this.state.hidden ? 'hidden' : '',
             },
-            url: {
+            urlCheck: {
               description: this.props.intl.formatMessage(
                 messages.urlDescription,
               ),
+              title: this.props.intl.formatMessage(messages.frontendUrl),
+              type: 'boolean',
+            },
+            url: {
               title: this.props.intl.formatMessage(messages.frontendUrl),
               type: 'string',
+              mode: this.state.hidden ? 'hidden' : '',
             },
           },
           required: [],
         }}
         onSubmit={this.onSubmit}
         onCancel={this.onCancel}
         onChangeFormData={(newFormData) => {
-          console.log(newFormData);
+          if (newFormData.urlCheck) {
+            this.setState({ hidden: false });
+          } else {
+            this.setState({ hidden: true });
+          }
           return;
         }}
       />