Skip to content

Commit 29f29b3

Browse files
iamfaraniamfaran
committed
remove more edit related code from columns
1 parent c82279e commit 29f29b3

17 files changed

+20
-1113
lines changed

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/column/columnTypeComp.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,11 @@ import { ColumnAvatarsComp } from "./columnTypeComps/columnAvatarsComp";
2323
import { ColumnDropdownComp } from "./columnTypeComps/columnDropdownComp";
2424

2525
export type CellProps = {
26-
editable?: boolean;
2726
tableSize?: string;
2827
candidateTags?: string[];
2928
candidateStatus?: { text: string; status: any }[];
3029
textOverflow?: boolean;
3130
cellTooltip?: string;
32-
editMode?: string;
3331
onTableEvent?: (eventName: any) => void;
3432
cellIndex?: string;
3533
};

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/column/columnTypeCompBuilder.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -163,17 +163,13 @@ export class ColumnTypeCompBuilder<
163163
};
164164
}
165165

166-
/**
166+
/**
167167
* Get the data actually displayed by the table cell
168168
*/
169169
getDisplayValue() {
170170
return this._displayValue;
171171
}
172-
173-
static canBeEditable() {
174-
return false;
175-
}
176-
172+
177173
componentWillUnmount() {
178174
// Cleanup all registered cleanup functions
179175
this.cleanupFunctions.forEach(cleanup => cleanup());

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/column/columnTypeComps/ColumnNumberComp.tsx

Lines changed: 1 addition & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useRef, useEffect, useCallback, useMemo, ReactNode } from "react";
1+
import React, { useCallback, useMemo, ReactNode } from "react";
22
import { default as InputNumber } from "antd/es/input-number";
33
import { NumberControl, RangeControl, StringControl } from "comps/controls/codeControl";
44
import { BoolControl } from "comps/controls/boolControl";
@@ -12,21 +12,6 @@ import { hasIcon } from "comps/utils";
1212
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
1313
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
1414

15-
const InputNumberWrapper = styled.div`
16-
.ant-input-number {
17-
width: 100%;
18-
border-radius: 0;
19-
background: transparent !important;
20-
// padding: 0 !important;
21-
box-shadow: none;
22-
23-
input {
24-
padding: 0;
25-
border-radius: 0;
26-
}
27-
}
28-
`;
29-
3015
const NumberViewWrapper = styled.div`
3116
cursor: pointer;
3217
display: flex;
@@ -61,15 +46,6 @@ type NumberViewProps = {
6146
onEvent?: (eventName: string) => void;
6247
};
6348

64-
type NumberEditProps = {
65-
value: number;
66-
onChange: (value: number) => void;
67-
onChangeEnd: () => void;
68-
step: number;
69-
precision: number;
70-
float: boolean;
71-
};
72-
7349
const ColumnNumberView = React.memo((props: NumberViewProps) => {
7450
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent ?? (() => {})})
7551

@@ -100,55 +76,6 @@ const ColumnNumberView = React.memo((props: NumberViewProps) => {
10076

10177
ColumnNumberView.displayName = 'ColumnNumberView';
10278

103-
104-
const ColumnNumberEdit = React.memo((props: NumberEditProps) => {
105-
const [currentValue, setCurrentValue] = useState(props.value);
106-
const mountedRef = useRef(true);
107-
108-
// Cleanup on unmount
109-
useEffect(() => {
110-
return () => {
111-
mountedRef.current = false;
112-
setCurrentValue(0);
113-
};
114-
}, []);
115-
116-
const handleChange = useCallback((value: string | number | null) => {
117-
if (!mountedRef.current) return;
118-
const newValue = typeof value === 'number' ? value : 0;
119-
const finalValue = !props.float ? Math.floor(newValue) : newValue;
120-
props.onChange(finalValue);
121-
setCurrentValue(finalValue);
122-
}, [props.onChange, props.float]);
123-
124-
const handleBlur = useCallback(() => {
125-
if (!mountedRef.current) return;
126-
props.onChangeEnd();
127-
}, [props.onChangeEnd]);
128-
129-
const handlePressEnter = useCallback(() => {
130-
if (!mountedRef.current) return;
131-
props.onChangeEnd();
132-
}, [props.onChangeEnd]);
133-
134-
return (
135-
<InputNumberWrapper>
136-
<InputNumber
137-
step={props.step}
138-
value={currentValue}
139-
autoFocus
140-
variant="borderless"
141-
onChange={handleChange}
142-
precision={props.float ? props.precision : 0}
143-
onBlur={handleBlur}
144-
onPressEnter={handlePressEnter}
145-
/>
146-
</InputNumberWrapper>
147-
);
148-
});
149-
150-
ColumnNumberEdit.displayName = 'NumberEdit';
151-
15279
export const ColumnNumberComp = (function () {
15380
return new ColumnTypeCompBuilder(
15481
childrenMap,

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/column/columnTypeComps/columnBooleanComp.tsx

Lines changed: 1 addition & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React, { useCallback, useRef, useEffect, useMemo } from "react";
1+
import React, { useMemo } from "react";
22
import { BoolCodeControl } from "comps/controls/codeControl";
33
import { trans } from "i18n";
4-
import { default as Checkbox, CheckboxChangeEvent } from "antd/es/checkbox";
54
import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
65
import { ColumnValueTooltip } from "../simpleColumnTypeComps";
76
import { getStyle } from "comps/comps/selectInputComp/checkboxComp";
@@ -13,10 +12,6 @@ import { TableCheckedIcon, TableUnCheckedIcon } from "lowcoder-design";
1312
import { IconControl } from "comps/controls/iconControl";
1413
import { hasIcon } from "comps/utils";
1514

16-
const CheckboxStyled = styled(Checkbox)<{ $style: CheckboxStyleType }>`
17-
${(props) => props.$style && getStyle(props.$style)}
18-
`;
19-
2015
const Wrapper = styled.div`
2116
background: transparent !important;
2217
padding: 0 8px;
@@ -60,58 +55,6 @@ const childrenMap = {
6055

6156
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, boolean, boolean> = (props) => props.text;
6257

63-
type CheckBoxEditPropsType = {
64-
value: boolean;
65-
onChange: (value: boolean) => void;
66-
onChangeEnd: () => void;
67-
};
68-
69-
// Memoized checkbox edit component
70-
const CheckBoxEdit = React.memo((props: CheckBoxEditPropsType) => {
71-
const mountedRef = useRef(true);
72-
const style = useStyle(CheckboxStyle);
73-
74-
// Cleanup on unmount
75-
useEffect(() => {
76-
return () => {
77-
mountedRef.current = false;
78-
};
79-
}, []);
80-
81-
const handleBlur = useCallback(() => {
82-
if (!mountedRef.current) return;
83-
props.onChangeEnd();
84-
}, [props.onChangeEnd]);
85-
86-
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
87-
if (!mountedRef.current) return;
88-
if (e.key === "Enter") {
89-
props.onChangeEnd();
90-
}
91-
}, [props.onChangeEnd]);
92-
93-
const handleChange = useCallback((e: CheckboxChangeEvent) => {
94-
if (!mountedRef.current) return;
95-
props.onChange(e.target.checked);
96-
}, [props.onChange]);
97-
98-
return (
99-
<Wrapper
100-
onBlur={handleBlur}
101-
onKeyDown={handleKeyDown}
102-
>
103-
<CheckboxStyled
104-
autoFocus
105-
$style={style}
106-
defaultChecked={props.value}
107-
onChange={handleChange}
108-
/>
109-
</Wrapper>
110-
);
111-
});
112-
113-
CheckBoxEdit.displayName = 'CheckBoxEdit';
114-
11558
// Memoized checkbox view component
11659
const CheckBoxView = React.memo(({
11760
value,

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/column/columnTypeComps/columnDateComp.tsx

Lines changed: 3 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import { withDefault } from "comps/generators";
99
import { formatPropertyView } from "comps/utils/propertyUtils";
1010
import { trans } from "i18n";
1111
import { isNumber } from "lodash";
12-
import dayjs, { Dayjs } from "dayjs";
12+
import dayjs from "dayjs";
1313
import utc from "dayjs/plugin/utc";
14-
import { CalendarCompIconSmall, PrevIcon, SuperPrevIcon } from "lowcoder-design";
15-
import React, { useCallback, useEffect, useRef, useState } from "react";
14+
import { PrevIcon, SuperPrevIcon } from "lowcoder-design";
15+
import React from "react";
1616
import styled from "styled-components";
1717
import { DateParser, DATE_FORMAT } from "util/dateTimeUtils";
1818

@@ -121,10 +121,6 @@ const DatePickerPopup = styled.div`
121121
overflow: hidden;
122122
`;
123123

124-
const Wrapper = styled.div`
125-
background: transparent !important;
126-
`;
127-
128124
export function formatDate(date: string, format: string) {
129125
let mom = dayjs(date);
130126
if (isNumber(Number(date)) && !isNaN(Number(date)) && date !== "") {
@@ -145,112 +141,6 @@ const childrenMap = {
145141

146142
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
147143

148-
type DateEditProps = {
149-
value: string;
150-
onChange: (value: string) => void;
151-
onChangeEnd: () => void;
152-
showTime: boolean;
153-
inputFormat: string;
154-
};
155-
156-
// Memoized DateEdit component
157-
export const DateEdit = React.memo((props: DateEditProps) => {
158-
const pickerRef = useRef<any>();
159-
const mountedRef = useRef(true);
160-
const [panelOpen, setPanelOpen] = useState(true);
161-
162-
// Initialize tempValue with proper validation
163-
const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(() => {
164-
const initialValue = dayjs(props.value, DateParser);
165-
return initialValue.isValid() ? initialValue : dayjs(0, DateParser);
166-
});
167-
168-
// Memoize event handlers
169-
const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
170-
if (!mountedRef.current) return;
171-
if (e.key === "Enter" && !panelOpen) {
172-
props.onChangeEnd();
173-
}
174-
}, [panelOpen, props.onChangeEnd]);
175-
176-
const handleMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
177-
if (!mountedRef.current) return;
178-
e.stopPropagation();
179-
e.preventDefault();
180-
}, []);
181-
182-
const handleOpenChange = useCallback((open: boolean) => {
183-
if (!mountedRef.current) return;
184-
setPanelOpen(open);
185-
}, []);
186-
187-
const handleChange = useCallback((value: dayjs.Dayjs | null, dateString: string | string[]) => {
188-
if (!mountedRef.current) return;
189-
props.onChange(dateString as string);
190-
}, [props.onChange]);
191-
192-
const handleBlur = useCallback(() => {
193-
if (!mountedRef.current) return;
194-
props.onChangeEnd();
195-
}, [props.onChangeEnd]);
196-
197-
// Update tempValue when props.value changes
198-
useEffect(() => {
199-
if (!mountedRef.current) return;
200-
201-
const newValue = props.value ? dayjs(props.value, DateParser) : null;
202-
if (newValue?.isValid()) {
203-
setTempValue(newValue);
204-
}
205-
}, [props.value]);
206-
207-
// Cleanup event listeners and state
208-
useEffect(() => {
209-
return () => {
210-
mountedRef.current = false;
211-
setTempValue(null);
212-
if (pickerRef.current) {
213-
pickerRef.current = null;
214-
}
215-
};
216-
}, []);
217-
218-
return (
219-
<Wrapper
220-
onKeyDown={handleKeyDown}
221-
onMouseDown={handleMouseDown}
222-
>
223-
<DatePickerStyled
224-
ref={pickerRef}
225-
$open={panelOpen}
226-
suffixIcon={<CalendarCompIconSmall />}
227-
prevIcon={<PrevIcon />}
228-
nextIcon={<IconNext />}
229-
superNextIcon={<IconSuperNext />}
230-
superPrevIcon={<SuperPrevIcon />}
231-
format={props.inputFormat}
232-
allowClear={true}
233-
variant="borderless"
234-
autoFocus
235-
value={tempValue}
236-
showTime={props.showTime}
237-
showNow={true}
238-
defaultOpen={true}
239-
panelRender={(panelNode) => (
240-
<DatePickerPopup>
241-
<StylePanel>{panelNode}</StylePanel>
242-
</DatePickerPopup>
243-
)}
244-
onOpenChange={handleOpenChange}
245-
onChange={(date: unknown, dateString: string | string[]) => handleChange(date as Dayjs | null, dateString)}
246-
onBlur={handleBlur}
247-
/>
248-
</Wrapper>
249-
);
250-
});
251-
252-
DateEdit.displayName = 'DateEdit';
253-
254144
export const DateComp = (function () {
255145
return new ColumnTypeCompBuilder(
256146
childrenMap,

0 commit comments

Comments
 (0)