Components refactoring and small fixes

2025-06-26 13:00:39 +03:00 · 2023-11-05 16:31:49 +03:00 · 2023-11-05 16:31:49 +03:00 · bdbf77faa2
commit bdbf77faa2
parent 6e610b5806
17 changed files with 78 additions and 55 deletions
--- a/rsconcept/frontend/src/components/Common/Button.tsx
+++ b/rsconcept/frontend/src/components/Common/Button.tsx
@ -1,35 +1,35 @@
+import { IColorsProps, IControlProps } from '../commonInterfaces'
+
 interface ButtonProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children' | 'title'| 'type'> {
+extends IControlProps, IColorsProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children' | 'title'| 'type'> {
  text?: string
  icon?: React.ReactNode
-  tooltip?: string
+
  dense?: boolean
  loading?: boolean
-  dimensions?: string
-  borderClass?: string
-  colorClass?: string
 }

 function Button({
  text, icon, tooltip,
-  dense, disabled,
-  borderClass = 'border rounded',
-  colorClass = 'clr-btn-default',
+  dense, disabled, noBorder, noOutline,
+  colors = 'clr-btn-default',
  dimensions = 'w-fit h-fit',
  loading,
  ...props
 }: ButtonProps) {
+  const borderClass = noBorder ? '' : 'border rounded';
  const padding = dense ? 'px-1' : 'px-3 py-2';
+  const outlineClass = noOutline ? 'outline-none': 'clr-outline';
  const cursor = 'disabled:cursor-not-allowed ' + (loading ? 'cursor-progress ' : 'cursor-pointer ');
  return (
    <button type='button'
      disabled={disabled ?? loading}
      title={tooltip}
-      className={`inline-flex items-center gap-2 align-middle justify-center select-none ${padding} ${colorClass} ${dimensions} ${borderClass} ${cursor}`}
+      className={`inline-flex items-center gap-2 align-middle justify-center select-none ${padding} ${colors} ${outlineClass} ${borderClass} ${dimensions} ${cursor}`}
      {...props}
    >
      {icon && icon}
-      {text && <span className={'font-semibold'}>{text}</span>}
+      {text && <span className='font-semibold'>{text}</span>}
    </button>
  );
 }
--- a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
@ -7,13 +7,18 @@ extends Omit<ITooltip, 'variant'> {
  layer?: string
 }

-function ConceptTooltip({ className, layer, place='bottom', ...props }: ConceptTooltipProps) {
+function ConceptTooltip({
+  className,
+  layer='z-tooltip',
+  place='bottom',
+  ...props
+}: ConceptTooltipProps) {
  const { darkMode } = useConceptTheme();

  return (
  <Tooltip
    opacity={0.97}
-    className={`overflow-auto border shadow-md ${layer ?? 'z-tooltip'} ${className}`}
+    className={`overflow-auto border shadow-md ${layer} ${className}`}
    variant={(darkMode ? 'dark' : 'light')}
    place={place}
    {...props}
--- a/rsconcept/frontend/src/components/Common/FileInput.tsx
+++ b/rsconcept/frontend/src/components/Common/FileInput.tsx
@ -8,8 +8,9 @@ interface FileInputProps
 extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'title' | 'style' | 'accept' | 'type'> {
  label: string
  tooltip?: string
-  acceptType?: string
  dimensions?: string
+  
+  acceptType?: string
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }

--- a/rsconcept/frontend/src/components/Common/MiniButton.tsx
+++ b/rsconcept/frontend/src/components/Common/MiniButton.tsx
@ -1,5 +1,5 @@
 interface MiniButtonProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'title' |'children' > {
+extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'title' | 'children' > {
  icon: React.ReactNode
  tooltip?: string
  noHover?: boolean
--- a/rsconcept/frontend/src/components/Common/Modal.tsx
+++ b/rsconcept/frontend/src/components/Common/Modal.tsx
@ -52,7 +52,7 @@ function Modal({
          text={submitText}
          tooltip={!canSubmit ? submitInvalidTooltip: ''}
          dimensions='min-w-[6rem] min-h-[2.6rem] w-fit h-fit'
-          colorClass='clr-btn-primary'
+          colors='clr-btn-primary'
          disabled={!canSubmit}
          onClick={handleSubmit}
          autoFocus
--- a/rsconcept/frontend/src/components/Common/SelectorButton.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectorButton.tsx
@ -5,14 +5,14 @@ extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'child
  tooltip?: string
  dimensions?: string
  borderClass?: string
-  colorClass?: string
+  colors?: string
  transparent?: boolean
 }


 function SelectorButton({
  text, icon, tooltip,
-  colorClass = 'clr-btn-default',
+  colors = 'clr-btn-default',
  dimensions = 'w-fit h-fit',
  transparent,
  ...props
@ -21,7 +21,7 @@ function SelectorButton({
  const position = `px-1 flex flex-start items-center gap-1 ${dimensions}`
  return (
    <button type='button'
-      className={`text-sm small-caps ${!transparent && 'border'} ${cursor} ${position} text-btn text-controls select-none ${transparent ? 'clr-hover' : colorClass}`}
+      className={`text-sm small-caps ${!transparent && 'border'} ${cursor} ${position} text-btn text-controls select-none ${transparent ? 'clr-hover' : colors}`}
      title={tooltip}
      {...props}
    >
--- a/rsconcept/frontend/src/components/Common/TextArea.tsx
+++ b/rsconcept/frontend/src/components/Common/TextArea.tsx
@ -1,23 +1,22 @@
 import { TextareaHTMLAttributes } from 'react';

+import { IColorsProps, IEditorProps } from '../commonInterfaces';
 import Label from './Label';

 export interface TextAreaProps 
-extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'title'> {
-  label?: string
-  tooltip?: string
-  dimensions?: string
+extends IEditorProps, IColorsProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'title'> {
  dense?: boolean
-  colorClass?: string
 }

 function TextArea({
-  id, label, required, tooltip, dense,
+  id, label, required, tooltip, dense, noBorder, noOutline,
  dimensions = 'w-full',
-  colorClass = 'clr-input',
+  colors = 'clr-input',
  rows = 4,
  ...props
 }: TextAreaProps) {
+  const borderClass = noBorder ? '': 'border';
+  const outlineClass = noOutline ? '': 'clr-outline';
  return (
    <div className={`flex ${dense ? 'items-center gap-4 ' + dimensions : 'flex-col items-start gap-2'}`}>
      {label && 
@ -27,7 +26,7 @@ function TextArea({
      />}
      <textarea id={id}
        title={tooltip}
-        className={`px-3 py-2 leading-tight border clr-outline ${colorClass} ${dense ? 'w-full' : dimensions}`}
+        className={`px-3 py-2 leading-tight ${outlineClass} ${borderClass} ${colors} ${dense ? 'w-full' : dimensions}`}
        rows={rows}
        required={required}
        {...props}
--- a/rsconcept/frontend/src/components/Common/TextInput.tsx
+++ b/rsconcept/frontend/src/components/Common/TextInput.tsx
@ -1,21 +1,22 @@
+import { IColorsProps, IEditorProps } from '../commonInterfaces';
 import Label from './Label';

-interface TextInputProps
-extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'title'> {
-  id?: string
-  label?: string
-  tooltip?: string
-  dimensions?: string
-  colorClass?: string
+interface TextInputProps 
+extends IEditorProps, IColorsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'title'> {
  dense?: boolean
-  noBorder?: boolean
-  noOutline?: boolean
+  allowEnter?: boolean
+}
+
+function preventEnterCapture(event: React.KeyboardEvent<HTMLInputElement>) {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+  }
 }

 function TextInput({
-  id, required, label, dense, tooltip, noBorder, noOutline,
+  id, label, dense, tooltip, noBorder, noOutline, allowEnter, onKeyDown,
  dimensions = 'w-full',
-  colorClass = 'clr-input',
+  colors = 'clr-input',
  ...props
 }: TextInputProps) {
  const borderClass = noBorder ? '': 'border';
@ -29,8 +30,9 @@ function TextInput({
      />}
      <input id={id}
        title={tooltip}
-        className={`px-3 py-2 leading-tight truncate hover:text-clip ${outlineClass} ${borderClass} ${colorClass} ${dense ? 'w-full' : dimensions}`}
-        required={required}
+        
+        onKeyDown={!allowEnter && !onKeyDown ? preventEnterCapture: onKeyDown}
+        className={`px-3 py-2 leading-tight truncate hover:text-clip ${colors} ${outlineClass} ${borderClass} ${dense ? 'w-full' : dimensions}`}
        {...props}
      />
    </div>
--- a/rsconcept/frontend/src/components/commonInterfaces.ts
+++ b/rsconcept/frontend/src/components/commonInterfaces.ts
@ -0,0 +1,17 @@
+// =========== Module contains interfaces for common UI elements. ==========
+export interface IControlProps {
+  tooltip?: string
+  dimensions?: string
+  
+  disabled?: boolean
+  noBorder?: boolean
+  noOutline?: boolean
+}
+
+export interface IEditorProps extends IControlProps {
+  label?: string
+}
+
+export interface IColorsProps {
+  colors?: string
+}
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@ -243,7 +243,6 @@
  }

  :is(.clr-outline,
-    .clr-btn-default,
    .clr-btn-primary
  ):focus {
    outline-width: 2px;
--- a/rsconcept/frontend/src/pages/LoginPage.tsx
+++ b/rsconcept/frontend/src/pages/LoginPage.tsx
@ -91,18 +91,18 @@ function LoginPage() {
      onSubmit={handleSubmit}
      dimensions='w-[24rem]'
    >
-      <TextInput id='username'
+      <TextInput id='username' type='text'
        label='Имя пользователя'
        required
-        type='text'
+        allowEnter
        value={username}
        autoFocus
        onChange={event => setUsername(event.target.value)}
      />
-      <TextInput id='password'
+      <TextInput id='password' type='password'
        label='Пароль'
        required
-        type='password'
+        allowEnter
        value={password}
        onChange={event => setPassword(event.target.value)}
      />
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@ -226,7 +226,7 @@ function EditorConstituenta({
          dense
          rows={1}
          value={typification}
-          colorClass='clr-app'
+          colors='clr-app'
          disabled
        />
        <EditorRSExpression id='expression' label='Формальное определение'
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
@ -143,9 +143,9 @@ function EditorRSExpression({
        <Button
          tooltip='Проверить формальное определение'
          text='Проверить'
-          dimensions='w-fit h-[3rem] z-pop'
-          colorClass='clr-btn-default'
-          borderClass='rounded-none border'
+          dimensions='w-fit h-[3rem] z-pop rounded-none'
+          colors='clr-btn-default'
+          noOutline
          onClick={() => handleCheckExpression()}
        />
        <StatusBar
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx
@ -81,9 +81,9 @@ function RSTabsMenu({
      <Button
        tooltip='Действия'
        icon={<MenuIcon color='text-controls' size={5}/>}
-        borderClass=''
        dimensions='h-full w-fit pl-2'
        style={{outlineColor: 'transparent'}}
+        noBorder
        dense
        onClick={schemaMenu.toggle}
        tabIndex={-1}
@ -137,11 +137,11 @@ function RSTabsMenu({
    <div ref={editMenu.ref}>
      <Button
        tooltip={'измнение: ' + (isEditable ? '[доступно]' : '[запрещено]')}
-        borderClass=''
        dimensions='h-full w-fit'
        style={{outlineColor: 'transparent'}}
        icon={<EditIcon size={5} color={isEditable ? 'text-success' : 'text-warning'}/>}
        dense
+        noBorder
        onClick={editMenu.toggle}
        tabIndex={-1}
      />
@ -185,9 +185,9 @@ function RSTabsMenu({
          : <NotSubscribedIcon color='text-controls' size={5}/>
        }
        dimensions='h-full w-fit pr-2'
-        borderClass=''
        style={{outlineColor: 'transparent'}}
        dense
+        noBorder
        onClick={onToggleSubscribe}
        tabIndex={-1}
        />
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
@ -70,7 +70,7 @@ function EditorPassword() {
            onChange={event => setOldPassword(event.target.value)}
          />
          <TextInput id='new_password' type='password' 
-            colorClass={passwordColor}
+            colors={passwordColor}
            label='Новый пароль'
            value={newPassword}
            onChange={event => {
@ -78,7 +78,7 @@ function EditorPassword() {
            }}
          />
          <TextInput id='new_password_repeat' type='password' 
-            colorClass={passwordColor}
+            colors={passwordColor}
            label='Повторите новый'
            value={newPasswordRepeat}
            onChange={event => {
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
@ -52,7 +52,7 @@ function EditorProfile() {
  return (
    <form onSubmit={handleSubmit} className='px-6 py-2 flex flex-col gap-8 min-w-[18rem]'>
      <div className='flex flex-col gap-3'>
-        <TextInput id='username' 
+        <TextInput id='username'
          label='Логин'
          tooltip='Логин изменить нельзя'
          disabled={true}
--- a/rsconcept/frontend/src/utils/labels.ts
+++ b/rsconcept/frontend/src/utils/labels.ts
@ -1,4 +1,4 @@
-// =========== Modules contains all text descriptors ==========
+// =========== Module contains all text descriptors. ==========

 import { GramData,Grammeme, ReferenceType } from '../models/language';
 import { CstMatchMode, DependencyMode, HelpTopic, LibraryFilterStrategy } from '../models/miscelanious';