From ba82eb96296856588adc9451a5eb2943c77e2f21 Mon Sep 17 00:00:00 2001
From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Wed, 14 Aug 2024 10:28:38 +0300
Subject: [PATCH] doc(FormItem): add email validation (#7374)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Поправил валидацию почты в примере в документации
---
 .../vkui/src/components/FormItem/Readme.md    | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/vkui/src/components/FormItem/Readme.md b/packages/vkui/src/components/FormItem/Readme.md
index 4212178522..20a13ffe3c 100644
--- a/packages/vkui/src/components/FormItem/Readme.md
+++ b/packages/vkui/src/components/FormItem/Readme.md
@@ -67,17 +67,40 @@ const addressItems = [
   { label: 'Город', name: 'city' },
 ];
 
+const ERRORS_MAP = {
+  empty: 'Пожалуйста, введите электронную почту',
+  incorrect: 'Электронная почта некорректна',
+};
+
+const validateEmail = (email) => {
+  return email.match(
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+  );
+};
+
 const Example = () => {
   const [email, setEmail] = React.useState('');
   const [purpose, setPurpose] = React.useState('');
   const [about, setAbout] = React.useState('');
+  const [emailError, setEmailError] = React.useState('empty');
   const [showPatronymic, setShowPatronymic] = React.useState(true);
 
+  const updateEmail = (value) => {
+    setEmail(value);
+    if (!value) {
+      setEmailError('empty');
+    } else if (!validateEmail(value)) {
+      setEmailError('incorrect');
+    } else {
+      setEmailError('');
+    }
+  };
+
   const onChange = (e) => {
     const { name, value } = e.currentTarget;
 
     const setStateAction = {
-      email: setEmail,
+      email: updateEmail,
       purpose: setPurpose,
       about: setAbout,
     }[name];
@@ -98,10 +121,8 @@ const Example = () => {
             <FormItem
               htmlFor="email"
               top="E-mail"
-              status={email ? 'valid' : 'error'}
-              bottom={
-                email ? 'Электронная почта введена верно!' : 'Пожалуйста, введите электронную почту'
-              }
+              status={emailError ? 'error' : 'valid'}
+              bottom={emailError ? ERRORS_MAP[emailError] : 'Электронная почта введена верно!'}
               bottomId="email-type"
               required
             >