@digi-frontend/dgate-api-documentation 1.0.28 → 1.0.31

package/src/components/table/tags-table.tsx

@@ -1,341 +1,348 @@
-import { useEffect, useState } from 'react'
-import './style.scss'
-import _styles from '../InfoForm/InfoForm.module.scss'
-import { Button, Input, TextArea } from 'digitinary-ui'
-import Tooltip from '../Tooltip/Tooltip'
-import SVGLoader from '../SVGLoader/SVGLoader'
-import { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'
-import styles from '../MethodAccordion/MethodAccordion.module.scss'
-import { useFormik } from 'formik'
-import * as yup from 'yup'
-import regex from '../../constants/regex'
-
-const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly }) => {
-  const [text, setText] = useState('')
-  const [externalDesc, setExternalDesc] = useState('')
-  const [externalUrl, setExternalUrl] = useState('')
-  const [tooltipRef, setTooltipRef] = useState(null)
-  const [externalTooltipRefs, setExternalTooltipRefs] = useState(null)
-  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
-    validateOnMount: true,
-    initialValues: {
-      name: '',
-      description: '',
-      externalDocs: {
-        url: '',
-        description: '',
-      },
-    },
-    validationSchema: yup.object().shape({
-      name: yup.string().trim().required('Tag name is required'),
-      description: yup.string().optional(),
-      externalDocs: yup
-        .object()
-        .shape({
-          url: yup
-            .string()
-            .trim()
-            .matches(regex.urlRegex, 'Invalid URL')
-            .when('description', (description, schema) => {
-              return description?.at(0)
-                ? schema.required('URL is required when description is provided')
-                : schema.optional()
-            }),
-          description: yup.string().trim().optional(),
-        })
-        .optional(),
-    }),
-    onSubmit: (values) => {
-      saveNewRow(values)
-      setText('')
-      resetForm()
-      setIsFormOpen(false)
-    },
-    validateOnChange: true,
-  })
-
-  return (
-    <div className="tableSectionContainer">
-      <div className="tableContainer">
-        <table id={id || ''} className={`table borderRadiusTop borderRadiusBottom`}>
-          <thead className="tableHead">
-            <tr>
-              {headCells?.map((headCell) => (
-                <th
-                  key={headCell.id}
-                  className={`tableHeadCell ${headCell.classes || ''}`}
-                  style={{ width: headCell.width, minWidth: headCell.minWidth }}
-                >
-                  <div
-                    className="headContainer"
-                    data-id={`${
-                      typeof headCell.label === 'string'
-                        ? headCell.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g, '_')
-                        : 'UNKNOWN_LABEL'
-                    }_COLUMN`}
-                  >
-                    {headCell.label}
-                  </div>
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody className="tableBody" data-id="TABLE_BODY">
-            {data?.map((row, rowIndex) => {
-              return (
-                <tr key={rowIndex} data-i={rowIndex} className={`row`}>
-                  {headCells?.map((headCell) => {
-                    const cellContent = row[headCell.id] !== '_' && (
-                      <div
-                        data-id="TEXT_DESCRIPTION"
-                        className="tableData"
-                        style={{
-                          width: headCell.width,
-                          minWidth: headCell.minWidth,
-                        }}
-                      >
-                        {row[headCell.id]}
-                      </div>
-                    )
-
-                    return (
-                      <td
-                        key={headCell.id}
-                        style={{
-                          width: headCell.width,
-                          minWidth: headCell.minWidth,
-                        }}
-                      >
-                        {cellContent}
-                      </td>
-                    )
-                  })}
-                </tr>
-              )
-            })}
-            {isFormOpen ? (
-              <tr key={''} data-i={''} className={`row`}>
-                <td key={'tag name'}>
-                  <div data-id="TEXT_DESCRIPTION" className="tableData">
-                    <Input
-                      placeholder="Tag name"
-                      size="large"
-                      type="text"
-                      maxLength={25}
-                      onChange={(value) => {
-                        !regex.basic.test(value) && setFieldValue('name', value)
-                      }} // Pass the value directly
-                      value={values.name} // Bind value to the state
-                      disabled={readOnly}
-                    />
-                  </div>
-                </td>
-
-                <td key={'tagDescRequired'}>
-                  <div data-id="TEXT_DESCRIPTION" className="tableData">
-                    <div className={styles.paramDescContainer}>
-                      <Tooltip
-                        arrowWithBorder
-                        placement="bottom-end"
-                        type="function"
-                        trigger="click"
-                        delay={[0, 0]}
-                        onCreate={(instance) => setTooltipRef(instance)}
-                        onHidden={() => {
-                          setText(values.description)
-                        }}
-                        content={
-                          <div className={_styles.editDescTooltipContent}>
-                            <p className={_styles.editDescTooltipContent_header}>Description</p>
-                            <TextArea
-                              value={text || values.description}
-                              disabled={readOnly}
-                              maxLength={25}
-                              placeholder="Describe Tag..."
-                              onChange={(value) => {
-                                if (value === '' || regex.ASCII.test(value)) setText(value)
-                              }}
-                            />
-                            {!readOnly && (
-                              <Button
-                                className={_styles.editDescTooltipContent_btn}
-                                variant="outlined"
-                                size="small"
-                                onClick={() => {
-                                  setFieldValue('description', text?.trim())
-                                  tooltipRef?.hide()
-                                }}
-                                disabled={!(text || values.description)?.trim()}
-                              >
-                                Apply
-                              </Button>
-                            )}
-                          </div>
-                        }
-                      >
-                        <Button
-                          className={_styles.editDescBtn}
-                          style={{ paddingLeft: 0 }}
-                          variant="link"
-                          color="action"
-                          endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                        >
-                          {readOnly ? 'View ' : 'Add '} Description
-                        </Button>
-                      </Tooltip>
-                    </div>{' '}
-                  </div>
-                </td>
-                <td key={'tagExternal'}>
-                  <div className="tableData">
-                    <div className={_styles.paramDescContainer}>
-                      <Tooltip
-                        arrowWithBorder
-                        placement="bottom-end"
-                        type="function"
-                        trigger="click"
-                        delay={[0, 0]}
-                        onCreate={(instance) => setExternalTooltipRefs(instance)}
-                        onHidden={() => {
-                          setExternalDesc(values.externalDocs.description)
-                          setExternalUrl(values.externalDocs.url)
-                        }}
-                        content={
-                          <div className={_styles.editDescTooltipContent}>
-                            <p className={_styles.editDescTooltipContent_header}>
-                              External Docs Description
-                            </p>
-                            <TextArea
-                              placeholder="Describe External Doc..."
-                              value={externalDesc || values.externalDocs.description}
-                              disabled={readOnly}
-                              maxLength={25}
-                              onChange={(value) => {
-                                if (value === '' || regex.ASCII.test(value)) setExternalDesc(value)
-                              }}
-                            />
-                            <p className={_styles.editDescTooltipContent_header}>
-                              External Docs Link
-                            </p>
-                            <TextArea
-                              placeholder="External Docs Link..."
-                              value={externalUrl || values.externalDocs.url}
-                              disabled={readOnly}
-                              maxLength={200}
-                              onChange={(value) => {
-                                if (value === '' || regex.ASCII.test(value)) setExternalUrl(value)
-                              }}
-                            />
-                            {!readOnly && (
-                              <Button
-                                className={_styles.editDescTooltipContent_btn}
-                                variant="outlined"
-                                size="small"
-                                onClick={() => {
-                                  setFieldValue(`externalDocs`, {
-                                    description: externalDesc,
-                                    url: externalUrl,
-                                  })
-
-                                  externalTooltipRefs?.hide()
-                                }}
-                                disabled={
-                                  !(externalDesc || values.externalDocs.description)?.trim() ||
-                                  !(externalUrl || values.externalDocs.url)?.trim() ||
-                                  !regex.urlRegex.test(externalUrl || values.externalDocs.url)
-                                }
-                              >
-                                Apply
-                              </Button>
-                            )}
-                          </div>
-                        }
-                      >
-                        {readOnly ? (
-                          <a
-                            className={_styles.editDescBtn}
-                            variant="link"
-                            color="action"
-                            href={values.externalDocs?.url}
-                            target="_blank"
-                          >
-                            {values?.externalDocs?.description
-                              ? values?.externalDocs?.description?.substring(0, 12)
-                              : '-'}
-                            {values?.externalDocs?.description &&
-                            values?.externalDocs?.description?.length > 12
-                              ? '...'
-                              : ''}
-                          </a>
-                        ) : (
-                          <Button
-                            className={_styles.editDescBtn}
-                            variant="link"
-                            color="action"
-                            endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                          >
-                            {readOnly ? 'View ' : 'Add '} External Docs Link
-                          </Button>
-                        )}
-                      </Tooltip>
-                      <div className={_styles.paramDescContainer_separator}></div>
-                      {!readOnly && (
-                        <Button
-                          className={_styles.deleteParamBtn}
-                          variant="link"
-                          color="error"
-                          endIcon={
-                            <SVGLoader src={DeleteIcon} width="1.125rem" height="1.125rem" />
-                          }
-                          onClick={() => {
-                            resetForm()
-                            setText('')
-                            setIsFormOpen(false)
-                          }} // Correctly delete the new row
-                        />
-                      )}
-
-                      {!readOnly && (
-                        <Button
-                          className={_styles.deleteParamBtn}
-                          variant="link"
-                          color="success"
-                          disabled={!isValid}
-                          endIcon={<SVGLoader src={AddRow} width="0.125rem" height="0.125rem" />}
-                          onClick={() => {
-                            setText('')
-                            submitForm()
-                          }} // Save the new row when clicked
-                        />
-                      )}
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            ) : (
-              <>
-                {!readOnly && (
-                  <tr key={'addNew'} data-i={'addNew'} className={`row`}>
-                    <td colSpan={5}>
-                      <Button
-                        variant="link"
-                        color="primary"
-                        onClick={() => {
-                          setIsFormOpen((prev) => !prev)
-                        }}
-                      >
-                        + Add Tag
-                      </Button>
-                    </td>
-                  </tr>
-                )}
-              </>
-            )}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  )
-}
-
-export default TagsTable
+import { useEffect, useState } from 'react'
+import './style.scss'
+import _styles from '../InfoForm/InfoForm.module.scss'
+import { Button, Input, TextArea } from 'digitinary-ui'
+import Tooltip from '../Tooltip/Tooltip'
+import SVGLoader from '../SVGLoader/SVGLoader'
+import { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'
+import styles from '../MethodAccordion/MethodAccordion.module.scss'
+import { useFormik } from 'formik'
+import * as yup from 'yup'
+import regex from '../../constants/regex'
+
+const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly }) => {
+  const [text, setText] = useState('')
+  const [externalDesc, setExternalDesc] = useState('')
+  const [externalUrl, setExternalUrl] = useState('')
+  const [tooltipRef, setTooltipRef] = useState(null)
+  const [externalTooltipRefs, setExternalTooltipRefs] = useState(null)
+  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
+    validateOnMount: true,
+    initialValues: {
+      name: '',
+      description: '',
+      externalDocs: {
+        url: '',
+        description: '',
+      },
+    },
+    validationSchema: yup.object().shape({
+      name: yup.string().trim().required('Tag name is required'),
+      description: yup.string().optional(),
+      externalDocs: yup
+        .object()
+        .shape({
+          url: yup
+            .string()
+            .trim()
+            .matches(regex.urlRegex, 'Invalid URL')
+            .when('description', (description, schema) => {
+              return description?.at(0)
+                ? schema.required('URL is required when description is provided')
+                : schema.optional()
+            }),
+          description: yup.string().trim().optional(),
+        })
+        .optional(),
+    }),
+    onSubmit: (values) => {
+      saveNewRow(values)
+      setText('')
+      resetForm()
+      setIsFormOpen(false)
+    },
+    validateOnChange: true,
+  })
+
+  return (
+    <div className="tableSectionContainer">
+      <div className="tableContainer">
+        <table id={id || ''} className={`table borderRadiusTop borderRadiusBottom`}>
+          <thead className="tableHead">
+            <tr>
+              {headCells?.map((headCell) => (
+                <th
+                  key={headCell.id}
+                  className={`tableHeadCell ${headCell.classes || ''}`}
+                  style={{ width: headCell.width, minWidth: headCell.minWidth }}
+                >
+                  <div
+                    className="headContainer"
+                    data-id={`${
+                      typeof headCell.label === 'string'
+                        ? headCell.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g, '_')
+                        : 'UNKNOWN_LABEL'
+                    }_COLUMN`}
+                  >
+                    {headCell.label}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="tableBody" data-id="TABLE_BODY">
+            {data?.map((row, rowIndex) => {
+              return (
+                <tr key={rowIndex} data-i={rowIndex} className={`row`}>
+                  {headCells?.map((headCell) => {
+                    const cellContent = row[headCell.id] !== '_' && (
+                      <div
+                        data-id="TEXT_DESCRIPTION"
+                        className="tableData"
+                        style={{
+                          width: headCell.width,
+                          minWidth: headCell.minWidth,
+                        }}
+                      >
+                        {row[headCell.id]}
+                      </div>
+                    )
+
+                    return (
+                      <td
+                        key={headCell.id}
+                        style={{
+                          width: headCell.width,
+                          minWidth: headCell.minWidth,
+                        }}
+                      >
+                        {cellContent}
+                      </td>
+                    )
+                  })}
+                </tr>
+              )
+            })}
+            {isFormOpen ? (
+              <tr key={''} data-i={''} className={`row`}>
+                <td key={'tag name'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <Input
+                      placeholder="Tag name"
+                      size="large"
+                      type="text"
+                      maxLength={25}
+                      onChange={(value) => {
+                        !regex.basic.test(value) && setFieldValue('name', value)
+                      }} // Pass the value directly
+                      value={values.name} // Bind value to the state
+                      disabled={readOnly}
+                    />
+                  </div>
+                </td>
+
+                <td key={'tagDescRequired'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <div className={styles.paramDescContainer}>
+                      <Tooltip
+                        arrowWithBorder
+                        placement="bottom-end"
+                        type="function"
+                        trigger="click"
+                        delay={[0, 0]}
+                        onCreate={(instance) => setTooltipRef(instance)}
+                        onShow={() => {
+                          setText(values.description || '') // Reset to current value when shown
+                        }}
+                        onHidden={() => {
+                          setText(values.description || '') // Reset on close
+                        }}
+                        content={
+                          <div className={_styles.editDescTooltipContent}>
+                            <p className={_styles.editDescTooltipContent_header}>Description</p>
+                            <TextArea
+                              value={text || values.description}
+                              disabled={readOnly}
+                              maxLength={25}
+                              placeholder="Describe Tag..."
+                              onChange={(value) => {
+                                if (value === '' || regex.ASCII.test(value)) setText(value)
+                              }}
+                            />
+                            {!readOnly && (
+                              <Button
+                                className={_styles.editDescTooltipContent_btn}
+                                variant="outlined"
+                                size="small"
+                                onClick={() => {
+                                  setFieldValue('description', text?.trim())
+                                  tooltipRef?.hide()
+                                }}
+                                disabled={!(text || values.description)?.trim()}
+                              >
+                                Apply
+                              </Button>
+                            )}
+                          </div>
+                        }
+                      >
+                        <Button
+                          className={_styles.editDescBtn}
+                          style={{ paddingLeft: 0 }}
+                          variant="link"
+                          color="action"
+                          endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                        >
+                          {readOnly ? 'View ' : 'Add '} Description
+                        </Button>
+                      </Tooltip>
+                    </div>{' '}
+                  </div>
+                </td>
+                <td key={'tagExternal'}>
+                  <div className="tableData">
+                    <div className={_styles.paramDescContainer}>
+                      <Tooltip
+                        arrowWithBorder
+                        placement="bottom-end"
+                        type="function"
+                        trigger="click"
+                        delay={[0, 0]}
+                        onCreate={(instance) => setExternalTooltipRefs(instance)}
+                        onShow={() => {
+                          setExternalDesc(values.externalDocs.description || '')
+                          setExternalUrl(values.externalDocs.url || '')
+                        }}
+                        onHidden={() => {
+                          setExternalDesc(values.externalDocs.description || '')
+                          setExternalUrl(values.externalDocs.url || '')
+                        }}
+                        content={
+                          <div className={_styles.editDescTooltipContent}>
+                            <p className={_styles.editDescTooltipContent_header}>
+                              External Docs Description
+                            </p>
+                            <TextArea
+                              placeholder="Describe External Doc..."
+                              value={externalDesc || values.externalDocs.description}
+                              disabled={readOnly}
+                              maxLength={25}
+                              onChange={(value) => {
+                                if (value === '' || regex.ASCII.test(value)) setExternalDesc(value)
+                              }}
+                            />
+                            <p className={_styles.editDescTooltipContent_header}>
+                              External Docs Link
+                            </p>
+                            <TextArea
+                              placeholder="External Docs Link..."
+                              value={externalUrl || values.externalDocs.url}
+                              disabled={readOnly}
+                              maxLength={200}
+                              onChange={(value) => {
+                                if (value === '' || regex.ASCII.test(value)) setExternalUrl(value)
+                              }}
+                            />
+                            {!readOnly && (
+                              <Button
+                                className={_styles.editDescTooltipContent_btn}
+                                variant="outlined"
+                                size="small"
+                                onClick={() => {
+                                  setFieldValue(`externalDocs`, {
+                                    description: externalDesc,
+                                    url: externalUrl,
+                                  })
+
+                                  externalTooltipRefs?.hide()
+                                }}
+                                disabled={
+                                  !(externalDesc || values.externalDocs.description)?.trim() ||
+                                  !(externalUrl || values.externalDocs.url)?.trim() ||
+                                  !regex.urlRegex.test(externalUrl || values.externalDocs.url)
+                                }
+                              >
+                                Apply
+                              </Button>
+                            )}
+                          </div>
+                        }
+                      >
+                        {readOnly ? (
+                          <a
+                            className={_styles.editDescBtn}
+                            variant="link"
+                            color="action"
+                            href={values.externalDocs?.url}
+                            target="_blank"
+                          >
+                            {values?.externalDocs?.description
+                              ? values?.externalDocs?.description?.substring(0, 12)
+                              : '-'}
+                            {values?.externalDocs?.description &&
+                            values?.externalDocs?.description?.length > 12
+                              ? '...'
+                              : ''}
+                          </a>
+                        ) : (
+                          <Button
+                            className={_styles.editDescBtn}
+                            variant="link"
+                            color="action"
+                            endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                          >
+                            {readOnly ? 'View ' : 'Add '} External Docs Link
+                          </Button>
+                        )}
+                      </Tooltip>
+                      <div className={_styles.paramDescContainer_separator}></div>
+                      {!readOnly && (
+                        <Button
+                          className={_styles.deleteParamBtn}
+                          variant="link"
+                          color="error"
+                          endIcon={
+                            <SVGLoader src={DeleteIcon} width="1.125rem" height="1.125rem" />
+                          }
+                          onClick={() => {
+                            resetForm()
+                            setText('')
+                            setIsFormOpen(false)
+                          }} // Correctly delete the new row
+                        />
+                      )}
+
+                      {!readOnly && (
+                        <Button
+                          className={_styles.deleteParamBtn}
+                          variant="link"
+                          color="success"
+                          disabled={!isValid}
+                          endIcon={<SVGLoader src={AddRow} width="0.125rem" height="0.125rem" />}
+                          onClick={() => {
+                            setText('')
+                            submitForm()
+                          }} // Save the new row when clicked
+                        />
+                      )}
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              <>
+                {!readOnly && (
+                  <tr key={'addNew'} data-i={'addNew'} className={`row`}>
+                    <td colSpan={5}>
+                      <Button
+                        variant="link"
+                        color="primary"
+                        onClick={() => {
+                          setIsFormOpen((prev) => !prev)
+                        }}
+                      >
+                        + Add Tag
+                      </Button>
+                    </td>
+                  </tr>
+                )}
+              </>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default TagsTable