From 69d498dd06303b567e0fbacfaa09899068838529 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A1=D0=B5=D0=BC=D0=BA=D0=B5=20=D0=94=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B8=D0=BB=20=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B5=D0=B2=D0=B8?= =?UTF-8?q?=D1=87?= Date: Fri, 14 Jun 2024 11:15:14 +0500 Subject: [PATCH] Fix --- .../DateTimePickerWithTimeZone.tsx | 18 +-- .../ObjectViewer/ObjectRenderer.tsx | 128 +++++++++--------- db-viewer-ui/src/DbViewerApplication.tsx | 76 +++++------ 3 files changed, 109 insertions(+), 113 deletions(-) diff --git a/db-viewer-ui/src/Components/DateTimeRangePicker/DateTimePickerWithTimeZone.tsx b/db-viewer-ui/src/Components/DateTimeRangePicker/DateTimePickerWithTimeZone.tsx index 90f9cfd7..670fdc81 100644 --- a/db-viewer-ui/src/Components/DateTimeRangePicker/DateTimePickerWithTimeZone.tsx +++ b/db-viewer-ui/src/Components/DateTimeRangePicker/DateTimePickerWithTimeZone.tsx @@ -1,6 +1,6 @@ import { formatDate, fromLocalToUtc, Time } from "@skbkontur/edi-ui"; import { Select } from "@skbkontur/react-ui"; -import React from "react"; +import React, { useState, useEffect } from "react"; import { DatePicker } from "./DatePicker"; import { jsStyles } from "./DateTimePicker.styles"; @@ -15,19 +15,19 @@ interface DateTimePickerWithTimeZone { timeZoneEditable?: boolean; } -export function DateTimePickerWithTimeZone({ +export const DateTimePickerWithTimeZone = ({ error, defaultTime, value, onChange, disabled, timeZoneEditable, -}: DateTimePickerWithTimeZone): React.ReactElement { - const [time, setTime] = React.useState>(null); - const [offset, setOffset] = React.useState>(null); - const [date, setDate] = React.useState>(null); - React.useEffect(() => loadState(value), [value]); - React.useEffect(() => handleDateTimeChange(date, time, offset), [date, time, offset]); +}: DateTimePickerWithTimeZone): React.ReactElement => { + const [time, setTime] = useState>(null); + const [offset, setOffset] = useState>(null); + const [date, setDate] = useState>(null); + useEffect(() => loadState(value), [value]); + useEffect(() => handleDateTimeChange(date, time, offset), [date, time, offset]); const handleDateTimeChange = ( newDate: Nullable, @@ -102,4 +102,4 @@ export function DateTimePickerWithTimeZone({ ); -} +}; diff --git a/db-viewer-ui/src/Components/ObjectViewer/ObjectRenderer.tsx b/db-viewer-ui/src/Components/ObjectViewer/ObjectRenderer.tsx index 44bd6818..1384ea19 100644 --- a/db-viewer-ui/src/Components/ObjectViewer/ObjectRenderer.tsx +++ b/db-viewer-ui/src/Components/ObjectViewer/ObjectRenderer.tsx @@ -4,7 +4,7 @@ import { ToolPencilLineIcon16Regular } from "@skbkontur/icons/ToolPencilLineIcon import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout"; import { Link } from "@skbkontur/react-ui"; import get from "lodash/get"; -import React from "react"; +import React, { useState } from "react"; import { PropertyMetaInformation } from "../../Domain/Api/DataTypes/PropertyMetaInformation"; import { ICustomRenderer } from "../../Domain/Objects/CustomRenderer"; @@ -25,79 +25,77 @@ interface ObjectRendererProps { customRenderer: ICustomRenderer; } -interface ObjectRendererState { - editableMode: boolean; - value: any; -} - -export class ObjectRenderer extends React.Component { - public state: ObjectRendererState = { - editableMode: false, - value: undefined, - }; - - public render(): React.ReactElement { - const { path, target, property, objectType, customRenderer } = this.props; - const value = this.state.editableMode ? this.state.value : getByPath(target, path); - const { editableMode } = this.state; - const canEdit = this.canEditProperty(); - return ( - - - {editableMode - ? renderForEdit(value, property, objectType, this.handleChange, customRenderer) - : renderForDetails(target, path, property, objectType, customRenderer)} - - - {canEdit && !editableMode && ( - - } onClick={this.handleClick} data-tid="Edit" /> - - )} - {canEdit && editableMode && ( - - } onClick={this.handleSaveChanges} data-tid="Save"> - Сохранить - - - )} - {canEdit && editableMode && ( - - } - onClick={this.handleCancelChanges} - data-tid="Cancel"> - Отменить - - - )} - - ); - } +export const ObjectRenderer = ({ + target, + objectType, + customRenderer, + path, + property, + allowEdit, + onChange, +}: ObjectRendererProps): React.ReactElement => { + const [editableMode, setEditableMode] = useState(false); + const [value, setValue] = useState(undefined); - private readonly handleClick = () => { - this.setState({ - editableMode: true, - value: getByPath(this.props.target, this.props.path), - }); + const handleClick = () => { + setEditableMode(true); + setValue(getByPath(target, path)); }; - private readonly handleChange = (value: any) => { - this.setState({ value: value }); + const handleChange = (value: any) => { + setValue(value); }; - private readonly handleSaveChanges = () => { - this.props.onChange(this.state.value, this.props.path); - this.setState({ editableMode: false, value: undefined }); + const handleSaveChanges = () => { + onChange(value, path); + setEditableMode(false); + setValue(undefined); }; - private readonly handleCancelChanges = () => { - this.setState({ editableMode: false, value: undefined }); + const handleCancelChanges = () => { + setEditableMode(false); + setValue(undefined); }; - private readonly canEditProperty = () => { - const { property, allowEdit } = this.props; + const canEditProperty = () => { const type = property.type.typeName; return type != null && !type.includes("[]") && !property.isIdentity && property.isEditable && allowEdit; }; -} + + const canEdit = canEditProperty(); + return ( + + + {editableMode + ? renderForEdit( + editableMode ? value : getByPath(target, path), + property, + objectType, + handleChange, + customRenderer + ) + : renderForDetails(target, path, property, objectType, customRenderer)} + + + {canEdit && !editableMode && ( + + } onClick={handleClick} data-tid="Edit" /> + + )} + {canEdit && editableMode && ( + + } onClick={handleSaveChanges} data-tid="Save"> + Сохранить + + + )} + {canEdit && editableMode && ( + + } onClick={handleCancelChanges} data-tid="Cancel"> + Отменить + + + )} + + ); +}; diff --git a/db-viewer-ui/src/DbViewerApplication.tsx b/db-viewer-ui/src/DbViewerApplication.tsx index f3ac9135..03bcc428 100644 --- a/db-viewer-ui/src/DbViewerApplication.tsx +++ b/db-viewer-ui/src/DbViewerApplication.tsx @@ -23,42 +23,40 @@ export const DbViewerApplication = ({ identifierKeywords, useErrorHandlingContainer, withGoBackUrl, -}: DbViewerApplicationProps): React.ReactElement => { - return ( - - - } - /> - - } - /> - - } - /> - - ); -}; +}: DbViewerApplicationProps): React.ReactElement => ( + + + } + /> + + } + /> + + } + /> + +);