ods-component-lib 1.18.169 → 1.18.170

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/antd/form/OdsBasicForm.d.ts +18 -0
  2. package/dist/components/antd/icon/OdsIcon.d.ts +10 -0
  3. package/dist/components/antd/modal/OdsAdvanceModal.d.ts +7 -0
  4. package/dist/components/antd/select/OdsCustomMultiSelect.d.ts +7 -0
  5. package/dist/components/antd/select/OdsMultiSelect.d.ts +9 -0
  6. package/dist/components/custom/OdsLogin.d.ts +8 -0
  7. package/dist/components/devextreme/DxDataPopupForm.d.ts +3 -0
  8. package/dist/components/devextreme/DynamicIcon.d.ts +5 -0
  9. package/dist/components/devextreme/OdsDataGridNew.d.ts +56 -0
  10. package/dist/components/devextreme/OdsInlineEditDataGrid/handlers/ContentHandlers.d.ts +14 -0
  11. package/dist/components/devextreme/OdsInlineEditDataGrid/handlers/EditorPreparedHandlers.d.ts +7 -0
  12. package/dist/components/devextreme/OdsInlineEditDataGrid/handlers/OnExportingHandlers.d.ts +19 -0
  13. package/dist/components/devextreme/OdsInlineEditDataGrid/handlers/OptionHandlers.d.ts +7 -0
  14. package/dist/components/devextreme/OdsInlineEditDataGrid/handlers/SummaryHandlers.d.ts +21 -0
  15. package/dist/components/devextreme/OdsInlineEditDataGrid/partials/ActionCellRender.d.ts +15 -0
  16. package/dist/components/devextreme/OdsInlineEditDataGrid/partials/EditingPartial.d.ts +9 -0
  17. package/dist/components/devextreme/OdsInlineEditDataGrid/partials/PageTitle.d.ts +8 -0
  18. package/dist/components/devextreme/OdsInlineEditDataGrid/utils.d.ts +19 -0
  19. package/dist/components/devextreme/OdsProfDataGrid.d.ts +3 -0
  20. package/dist/components/devextreme/dataGridHandlers/OnToolbarButtonHandler.d.ts +7 -0
  21. package/dist/components/devextreme/dataGridStyle.d.ts +3 -0
  22. package/dist/components/devextreme/treeview/DxTreeView.d.ts +3 -0
  23. package/dist/index.js +18 -14
  24. package/dist/index.js.map +1 -1
  25. package/dist/index.modern.js +18 -14
  26. package/dist/index.modern.js.map +1 -1
  27. package/dist/stories/OdsAdvanceModal/OdsAdvanceModal.stories.d.ts +42 -0
  28. package/dist/stories/OdsAdvanceModal/Samples/BasicOdsAdvanceModal.sample.d.ts +8 -0
  29. package/dist/stories/OdsCustomMultiSelect/OdsCustomMultiSelect.stories.d.ts +9 -0
  30. package/dist/stories/OdsCustomMultiSelect/Samples/Basic.Sample.d.ts +1 -0
  31. package/dist/stories/OdsCustomMultiSelect/Samples/ModeMultiple.Sample.d.ts +1 -0
  32. package/dist/stories/OdsModal/Samples/OdsModal.Sample.d.ts +1 -0
  33. package/dist/stories/OdsTimePicker/Samples/TimeRangePicker.d.ts +2 -0
  34. package/dist/utils/DynamicIcon.d.ts +5 -0
  35. package/package.json +1 -1
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { FormProps, ButtonProps } from 'antd';
3
+ export interface IFormItemRuleProps {
4
+ required?: boolean;
5
+ message?: string;
6
+ }
7
+ export interface IFormItemProps {
8
+ label?: string;
9
+ name?: string;
10
+ formItemType: string;
11
+ rules?: IFormItemRuleProps[];
12
+ }
13
+ export interface IFormProps extends FormProps {
14
+ formItems: IFormItemProps[];
15
+ formButtons: ButtonProps[];
16
+ }
17
+ declare function OdsBasicForm(props: IFormProps): React.JSX.Element;
18
+ export default OdsBasicForm;
@@ -0,0 +1,10 @@
1
+ import { IconBaseProps } from "@ant-design/icons/lib/components/Icon";
2
+ import React from "react";
3
+ export interface IconProps extends IconBaseProps {
4
+ type: string;
5
+ twoToneColor?: string;
6
+ iconComponent?: string;
7
+ iconSVCName?: string;
8
+ }
9
+ declare function OdsIcon(props: IconProps): React.JSX.Element;
10
+ export default OdsIcon;
@@ -0,0 +1,7 @@
1
+ import { ModalProps } from "antd";
2
+ import React from "react";
3
+ export interface ICustomModalProps extends ModalProps {
4
+ content: React.ReactNode;
5
+ }
6
+ declare const OdsAdvanceModal: React.FC<ICustomModalProps>;
7
+ export default OdsAdvanceModal;
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ import { SelectProps } from "antd";
3
+ export interface ISelectProps extends SelectProps {
4
+ buttonLabel: string;
5
+ }
6
+ declare function OdsCustomMultiSelect(props: ISelectProps): React.JSX.Element;
7
+ export default OdsCustomMultiSelect;
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ import { SelectProps } from "antd";
3
+ import { IOdsSelectOption } from "./OdsSelect.styled";
4
+ export interface OdsMultiSelectProps extends SelectProps {
5
+ selectAllText?: string | undefined;
6
+ dataSource: IOdsSelectOption[];
7
+ }
8
+ declare const OdsMultiSelect: (props: OdsMultiSelectProps) => React.JSX.Element;
9
+ export default OdsMultiSelect;
@@ -0,0 +1,8 @@
1
+ import { FormProps } from "antd";
2
+ import React from "react";
3
+ export interface IFormProps extends FormProps {
4
+ items: any[];
5
+ loading: boolean;
6
+ }
7
+ declare function OdsLogin(props: IFormProps): React.JSX.Element;
8
+ export default OdsLogin;
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ declare const _default: React.MemoExoticComponent<(props: any) => React.JSX.Element>;
3
+ export default _default;
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ declare const DynamicIcon: ({ iconName }: {
3
+ iconName: any;
4
+ }) => React.JSX.Element;
5
+ export default DynamicIcon;
@@ -0,0 +1,56 @@
1
+ import React from "react";
2
+ import { IDataGridOptions, IEditingProps, ISelectionProps, IButtonProps } from 'devextreme-react/data-grid';
3
+ import { ButtonType } from "antd/es/button/buttonHelpers";
4
+ interface IButtonGroup extends IButtonProps {
5
+ type?: ButtonType;
6
+ label?: string;
7
+ onclick?: React.MouseEventHandler<HTMLElement>;
8
+ actionPermission?: boolean;
9
+ }
10
+ interface IEditingoptions extends IEditingProps {
11
+ formItems?: any[];
12
+ title?: string;
13
+ }
14
+ interface ISelectOptions extends ISelectionProps {
15
+ selectEnable: boolean;
16
+ }
17
+ interface IOdsDataGridProps extends IDataGridOptions {
18
+ actionButtonGroup?: IButtonGroup[];
19
+ toolbarButtonGroup?: IButtonGroup[];
20
+ exportFileName?: string;
21
+ summaryTotalColumnName?: string;
22
+ storeState?: boolean;
23
+ summaryTotalDataCount?: number;
24
+ summaryTotalDataDisplayLabel?: string;
25
+ summaryTotalPagesize?: number;
26
+ editHintLabel?: string;
27
+ editButtonClick?: any;
28
+ deleteButtonClick?: any;
29
+ pageTitle?: string;
30
+ pageSize?: number;
31
+ pagingEnable?: boolean;
32
+ searchEnable?: boolean;
33
+ filterEnable?: boolean;
34
+ headerFilterEnable?: boolean;
35
+ columnChooserPositionDisabled?: boolean;
36
+ editEnable?: boolean;
37
+ popupTitle?: string;
38
+ scroll?: any;
39
+ exportEnable?: boolean;
40
+ customPopup?: boolean;
41
+ onExportingCustom?: any;
42
+ filterEnabledShow?: boolean;
43
+ scrolUseNative?: boolean;
44
+ formItems?: any[];
45
+ hintForDeleteButton?: string;
46
+ hintForEditButton?: string;
47
+ exportFormats?: string[];
48
+ actionPermission?: boolean;
49
+ columns: any[];
50
+ actionColumnEnable?: boolean;
51
+ edit?: IEditingoptions;
52
+ selectOptions?: ISelectOptions;
53
+ actionColumnCaption?: string;
54
+ }
55
+ declare function OdsDataGridNew(props: IOdsDataGridProps): React.JSX.Element;
56
+ export default OdsDataGridNew;
@@ -0,0 +1,14 @@
1
+ import { ContentReadyEvent } from "devextreme/ui/data_grid";
2
+ import { IColumnConfig } from "../types";
3
+ /**
4
+ * Custom hook to handle content ready events for the data grid.
5
+ * @param {React.MutableRefObject<any>} lastPageIndexRef - Reference to the last page index.
6
+ * @param {boolean} contentReady - Boolean indicating if the content is ready.
7
+ * @param {Function} setRowCount - Function to set the row count state
8
+ * @param {Function} setContentReady - Function to set the content ready state.
9
+ * @param {Function} setCurrentPage - Function to set the current page state.
10
+ * @param {Function} setCurrentPageSize - Function to set the current page size state.
11
+ * @param {Function} [callback] - Optional callback function.
12
+ * @returns {(e: ContentReadyEvent<any, any>) => void} handleContentReady - Handler for content ready event.
13
+ */
14
+ export declare const useContentHandlers: (lastPageIndexRef: React.MutableRefObject<any>, contentReady: boolean, columns: IColumnConfig[], setRowCount: Function, setContentReady: Function, setCurrentPage: Function, setCurrentPageSize: Function, setHeaderFilterData: Function, callback?: Function) => (e: ContentReadyEvent<any, any>) => void;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Custom hook that returns a callback function to handle the "editorPrepared" event of a DevExtreme component.
3
+ * This callback function is responsible for customizing the editor's behavior based on specific conditions.
4
+ *
5
+ * @returns {Function} The callback function to handle the "editorPrepared" event.
6
+ */
7
+ export declare const useEditorPreparedHandlers: () => (e: any) => void;
@@ -0,0 +1,19 @@
1
+ interface IOnExportingProps {
2
+ gridComponent: any;
3
+ baseFileName?: string;
4
+ selectedText?: string;
5
+ getSummary: () => string;
6
+ selectedRowsOnly: boolean;
7
+ }
8
+ /**
9
+ * Handles the exporting of data from the grid component.
10
+ *
11
+ * @param {IOnExportingProps} params - The parameters for exporting the data.
12
+ * @param {React.RefObject<Grid>} params.gridComponent - The reference to the grid component.
13
+ * @param {string} params.baseFileName - The base file name for the exported file.
14
+ * @param {string} params.selectedText - The text to be displayed for selected rows.
15
+ * @param {Function} params.getSummary - The function to get the summary of the exported data.
16
+ * @param {boolean} params.selectedRowsOnly - Indicates whether to export only selected rows.
17
+ */
18
+ export declare const onExporting: ({ gridComponent, baseFileName, selectedText, getSummary, selectedRowsOnly, }: IOnExportingProps) => void;
19
+ export {};
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Custom hook to handle option change events for the data grid.
3
+ * @param {Object} dataGridRef - The dataGridRef property passed to the hook.
4
+ * @param {Function} setFilterApplied - Function to set the filter applied state.
5
+ * @returns {Function} - Handler function for option changed event.
6
+ */
7
+ export declare const useOptionHandlers: (dataGridRef: any, setFilterApplied: any) => (e: any) => void;
@@ -0,0 +1,21 @@
1
+ import type { ISummaryRowOptions } from "../types";
2
+ interface IUseSummaryHandlersProps {
3
+ customSummary?: ISummaryRowOptions;
4
+ totalRecordCount: number;
5
+ currentPageSize: number;
6
+ currentPage: number;
7
+ filterApplied: boolean;
8
+ rowCount: number;
9
+ filteredRowCount: number;
10
+ isServerSide?: boolean;
11
+ }
12
+ /**
13
+ * Custom hook that provides summary handlers for a data grid.
14
+ *
15
+ * @param {IUseSummaryHandlersProps} props - The props object containing necessary parameters.
16
+ * @returns {Object} - An object containing the renderTotal function.
17
+ */
18
+ export declare const useSummaryHandlers: ({ customSummary, totalRecordCount, currentPageSize, currentPage, filterApplied, rowCount, filteredRowCount, }: IUseSummaryHandlersProps) => {
19
+ renderTotal: () => string | null;
20
+ };
21
+ export {};
@@ -0,0 +1,15 @@
1
+ import { FC } from "react";
2
+ import { IVirtualDataGridProps } from "../types";
3
+ interface ActionCellRenderProps {
4
+ cellData: any;
5
+ actionButtons: IVirtualDataGridProps["actionButtonGroup"];
6
+ edit?: IVirtualDataGridProps["edit"];
7
+ actionButtonGroup?: IVirtualDataGridProps["actionButtonGroup"];
8
+ }
9
+ /**
10
+ * Renders the action buttons for a cell in the OdsInlineEditDataGrid component.
11
+ * @param {ActionCellRenderProps} props - The props for the ActionCellRender component.
12
+ * @returns {ReactNode} - The rendered action buttons.
13
+ */
14
+ declare const ActionCellRender: FC<ActionCellRenderProps>;
15
+ export default ActionCellRender;
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ import { IEditingOptions } from "../types";
3
+ /**
4
+ * Component that handles editing functionalities within the data grid.
5
+ * @param {IEditingOptions} props - The properties passed to the component.
6
+ * @returns {JSX.Element} - The JSX element representing the editing handlers.
7
+ */
8
+ declare const EditingPartial: React.FC<IEditingOptions>;
9
+ export default EditingPartial;
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ import { IToolbarButton } from "../types";
3
+ interface PageTitleAndToolbarProps {
4
+ pageTitle?: string;
5
+ toolbarButtonGroup?: IToolbarButton[];
6
+ }
7
+ declare const MemoizedPageTitleAndToolbar: React.NamedExoticComponent<PageTitleAndToolbarProps>;
8
+ export default MemoizedPageTitleAndToolbar;
@@ -0,0 +1,19 @@
1
+ interface IConcatFilteredLabelProps {
2
+ result: string;
3
+ totalLoaded: number;
4
+ filteredRowCount: number;
5
+ filterApplied: boolean;
6
+ summaryFilteredDataLabel: string;
7
+ }
8
+ /**
9
+ * Concatenates the filtered label with the result string.
10
+ *
11
+ * @param {IConcatFilteredLabelProps} props - The object containing the necessary properties.
12
+ * @returns {string} - The concatenated result string.
13
+ */
14
+ export declare const concatFilteredLabel: ({ result, totalLoaded, filteredRowCount, filterApplied, summaryFilteredDataLabel, }: IConcatFilteredLabelProps) => string;
15
+ export {};
16
+ /**
17
+ * This file contains utility functions related to the OdsInlineEditDataGrid component.
18
+ * These utility functions are used for handling filtering and data manipulation.
19
+ */
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ declare function OdsProfDataGrid(props: any): React.JSX.Element;
3
+ export default OdsProfDataGrid;
@@ -0,0 +1,7 @@
1
+ interface IOnToolbarPreparingOptions {
2
+ pageTitle?: string;
3
+ toolbarButtonGroup?: any[];
4
+ callback?: (e: any) => void;
5
+ }
6
+ export declare const useOnToolbarButtonHandler: ({ pageTitle, toolbarButtonGroup, callback }: IOnToolbarPreparingOptions) => (e: any) => void;
7
+ export {};
@@ -0,0 +1,3 @@
1
+ export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
2
+ toolbarGrid: import("antd-style").SerializedStyles;
3
+ }>;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const DxTreeView: (props: any) => React.JSX.Element;
3
+ export default DxTreeView;
package/dist/index.js CHANGED
@@ -34488,7 +34488,7 @@ var DynamicIcon = function DynamicIcon(_ref) {
34488
34488
  };
34489
34489
 
34490
34490
  var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
34491
- var _props$columnResizing, _props$pagerProps$vis, _props$pagerProps, _props$pagerProps$sho, _props$pagerProps2, _props$pagerProps$sho2, _props$pagerProps3, _props$pagerProps$dis, _props$pagerProps4, _props$pagerProps$inf, _props$pagerProps5, _props$exportProps;
34491
+ var _props$dataGridRef, _props$dataGridRef$da, _props$dataGridRef$da2, _props$dataGridRef$da3, _props$columnResizing, _props$pagerProps$vis, _props$pagerProps, _props$pagerProps$sho, _props$pagerProps2, _props$pagerProps$sho2, _props$pagerProps3, _props$pagerProps$dis, _props$pagerProps4, _props$pagerProps$inf, _props$pagerProps5, _props$exportProps;
34492
34492
  var rowCount = React.useRef(0);
34493
34493
  var _useState = React.useState(50),
34494
34494
  currentPageSize = _useState[0],
@@ -34499,17 +34499,22 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
34499
34499
  var _useState3 = React.useState(false),
34500
34500
  filterApplied = _useState3[0],
34501
34501
  setFilterApplied = _useState3[1];
34502
- var totalUnfilteredCount = React.useRef(0);
34503
- var totalFilteredCount = React.useRef(0);
34504
- var _useState4 = React.useState(false),
34505
- updateTrigger = _useState4[0],
34506
- setUpdateTrigger = _useState4[1];
34502
+ var _useState4 = React.useState(0),
34503
+ totalUnfilteredCount = _useState4[0],
34504
+ setTotalUnfilteredCount = _useState4[1];
34505
+ var _useState5 = React.useState(0),
34506
+ totalFilteredCount = _useState5[0],
34507
+ setTotalFilteredCount = _useState5[1];
34508
+ var _useState6 = React.useState(false),
34509
+ updateTrigger = _useState6[0],
34510
+ setUpdateTrigger = _useState6[1];
34507
34511
  var lastPageIndexRef = React.useRef(null);
34508
34512
  var _useStyles = useStyles$1(),
34509
34513
  gridStyle = _useStyles.styles;
34514
+ React.useEffect(function () {}, [updateTrigger, totalUnfilteredCount, totalFilteredCount, filterApplied]);
34510
34515
  var renderTotal = React.useCallback(function () {
34511
34516
  var _props$customSummary, _props$customSummary2, _props$customSummary3, _props$customSummary4;
34512
- var totalLoaded = filterApplied ? totalFilteredCount.current : totalUnfilteredCount.current;
34517
+ var totalLoaded = filterApplied ? totalFilteredCount : totalUnfilteredCount;
34513
34518
  var loadedPage = currentPage;
34514
34519
  var totalRecords = props.totalRecordCount;
34515
34520
  var totalPageCount = Math.ceil(totalRecords / currentPageSize);
@@ -34517,11 +34522,11 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
34517
34522
  return "";
34518
34523
  }
34519
34524
  var filteredDisplayText = filterApplied ? totalLoaded + " " + ((_props$customSummary = props.customSummary) === null || _props$customSummary === void 0 ? void 0 : _props$customSummary.summaryFilteredDataLabel) + " - " : "";
34520
- var loadedDisplayText = totalUnfilteredCount.current + " " + ((_props$customSummary2 = props.customSummary) === null || _props$customSummary2 === void 0 ? void 0 : _props$customSummary2.summaryLoadedDataLabel) + " - ";
34525
+ var loadedDisplayText = totalUnfilteredCount + " " + ((_props$customSummary2 = props.customSummary) === null || _props$customSummary2 === void 0 ? void 0 : _props$customSummary2.summaryLoadedDataLabel) + " - ";
34521
34526
  var result = "" + filteredDisplayText + loadedDisplayText + totalRecords + " " + ((_props$customSummary3 = props.customSummary) === null || _props$customSummary3 === void 0 ? void 0 : _props$customSummary3.summaryTotalDataLabel);
34522
34527
  result += " - " + ((_props$customSummary4 = props.customSummary) === null || _props$customSummary4 === void 0 ? void 0 : _props$customSummary4.summaryTotalPageCountLabel) + " " + loadedPage + " / " + totalPageCount;
34523
34528
  return result;
34524
- }, [currentPage, currentPageSize, filterApplied, props.customSummary, props.totalRecordCount, totalUnfilteredCount, props.dataSource]);
34529
+ }, [currentPage, currentPageSize, filterApplied, props.customSummary, props.totalRecordCount, totalUnfilteredCount, props.dataSource, (_props$dataGridRef = props.dataGridRef) === null || _props$dataGridRef === void 0 ? void 0 : (_props$dataGridRef$da = _props$dataGridRef.dataGridInstance) === null || _props$dataGridRef$da === void 0 ? void 0 : (_props$dataGridRef$da2 = _props$dataGridRef$da.getDataSource()) === null || _props$dataGridRef$da2 === void 0 ? void 0 : (_props$dataGridRef$da3 = _props$dataGridRef$da2.items()) === null || _props$dataGridRef$da3 === void 0 ? void 0 : _props$dataGridRef$da3.length]);
34525
34530
  var handleContentReady = React.useCallback(function (e) {
34526
34531
  var _dataGridInstance$get;
34527
34532
  var dataGridInstance = e.component;
@@ -34529,11 +34534,11 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
34529
34534
  var currentTotalCount = currentPageIndex == 0 ? 50 : dataGridInstance.totalCount();
34530
34535
  var newData = dataGridInstance === null || dataGridInstance === void 0 ? void 0 : (_dataGridInstance$get = dataGridInstance.getDataSource()) === null || _dataGridInstance$get === void 0 ? void 0 : _dataGridInstance$get.items();
34531
34536
  if (filterApplied) {
34532
- totalFilteredCount.current = currentTotalCount;
34537
+ setTotalFilteredCount(currentTotalCount);
34533
34538
  } else {
34534
- totalUnfilteredCount.current = currentTotalCount;
34539
+ setTotalUnfilteredCount(currentTotalCount);
34535
34540
  }
34536
- if ((!filterApplied && currentPageIndex == 1 && currentTotalCount != totalUnfilteredCount.current || lastPageIndexRef.current !== currentPageIndex) && newData && newData.length > 0) {
34541
+ if ((!filterApplied && currentPageIndex == 1 && currentTotalCount != totalUnfilteredCount || lastPageIndexRef.current !== currentPageIndex) && newData && newData.length > 0) {
34537
34542
  setCurrentPage(currentPageIndex);
34538
34543
  setCurrentPageSize(dataGridInstance.pageSize());
34539
34544
  rowCount.current = currentTotalCount;
@@ -34559,7 +34564,7 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
34559
34564
  if (active) {
34560
34565
  setTimeout(function () {
34561
34566
  dataGrid.refresh().done(function () {
34562
- totalFilteredCount.current = dataGrid.totalCount();
34567
+ setTotalFilteredCount(dataGrid.totalCount());
34563
34568
  setUpdateTrigger(function (prev) {
34564
34569
  return !prev;
34565
34570
  });
@@ -34571,7 +34576,6 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
34571
34576
  props.sortingProps.onOptionChanged(e);
34572
34577
  }
34573
34578
  }, [props.dataGridRef]);
34574
- React.useEffect(function () {}, [updateTrigger]);
34575
34579
  var actionButtons = React.useMemo(function () {
34576
34580
  if (props.actionButtonGroup) {
34577
34581
  if (props.actionButtonGroup.length > 3 && !props.edit) {