Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit bd9299f

Browse files
Merge pull request #1944 from iamfaran/fix/1935-col-editable
[Fix]: #1935 add instant save for boolean, select and switch
2 parents 966d692 + ccd5d17 commit bd9299f

File tree

4 files changed

+41
-5
lines changed

4 files changed

+41
-5
lines changed

‎client/packages/lowcoder/src/components/table/EditableCell.tsx

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export type EditViewFn<T> = (props: {
5454
value: T;
5555
onChange: (value: T) => void;
5656
onChangeEnd: () => void;
57+
onImmediateSave?: (value: T) => void;
5758
otherProps?: Record<string, any>;
5859
}) => ReactNode;
5960

@@ -168,9 +169,26 @@ function EditableCellComp<T extends JSONValue>(props: EditableCellProps<T>) {
168169
}
169170
}, [dispatch, tmpValue, baseValue, value, onTableEvent, setIsEditing]);
170171

172+
const onImmediateSave = useCallback((newValue: T) => {
173+
if (!mountedRef.current) return;
174+
175+
setTmpValue(newValue);
176+
const changeValue = _.isNil(newValue) || _.isEqual(newValue, baseValue) ? null : newValue;
177+
dispatch(
178+
changeChildAction(
179+
"changeValue",
180+
changeValue,
181+
false
182+
)
183+
);
184+
if(!_.isEqual(newValue, value)) {
185+
onTableEvent?.('columnEdited');
186+
}
187+
}, [dispatch, baseValue, value, onTableEvent]);
188+
171189
const editView = useMemo(
172-
() => editViewFn?.({ value, onChange, onChangeEnd, otherProps }) ?? <></>,
173-
[editViewFn, value, onChange, onChangeEnd, otherProps]
190+
() => editViewFn?.({ value, onChange, onChangeEnd, onImmediateSave,otherProps }) ?? <></>,
191+
[editViewFn, value, onChange, onChangeEnd, onImmediateSave,otherProps]
174192
);
175193

176194
const enterEditFn = useCallback(() => {

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ type CheckBoxEditPropsType = {
6464
value: boolean;
6565
onChange: (value: boolean) => void;
6666
onChangeEnd: () => void;
67+
onImmediateSave?: (value: boolean) => void;
6768
};
6869

6970
// Memoized checkbox edit component
@@ -92,8 +93,13 @@ const CheckBoxEdit = React.memo((props: CheckBoxEditPropsType) => {
9293

9394
const handleChange = useCallback((e: CheckboxChangeEvent) => {
9495
if (!mountedRef.current) return;
95-
props.onChange(e.target.checked);
96-
}, [props.onChange]);
96+
const newValue = e.target.checked;
97+
props.onChange(newValue);
98+
// Use immediate save to show Save Changes button without exiting edit mode
99+
if (props.onImmediateSave) {
100+
props.onImmediateSave(newValue);
101+
}
102+
}, [props.onChange, props.onImmediateSave]);
97103

98104
return (
99105
<Wrapper
@@ -171,6 +177,7 @@ export const BooleanComp = (function () {
171177
value={props.value}
172178
onChange={props.onChange}
173179
onChangeEnd={props.onChangeEnd}
180+
onImmediateSave={props.onImmediateSave}
174181
/>
175182
);
176183
})

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ type SelectEditProps = {
124124
initialValue: string;
125125
onChange: (value: string) => void;
126126
onChangeEnd: () => void;
127+
onImmediateSave?: (value: string) => void;
127128
options: any[];
128129
onMainEvent?: (eventName: string) => void;
129130
};
@@ -146,6 +147,11 @@ const SelectEdit = React.memo((props: SelectEditProps) => {
146147
props.onChange(val);
147148
setCurrentValue(val);
148149

150+
// Use immediate save to show Save Changes button without exiting edit mode
151+
if (props.onImmediateSave) {
152+
props.onImmediateSave(val);
153+
}
154+
149155
// Trigger the specific option's event handler
150156
const selectedOption = props.options.find(option => option.value === val);
151157
if (selectedOption?.onEvent) {
@@ -156,7 +162,7 @@ const SelectEdit = React.memo((props: SelectEditProps) => {
156162
if (props.onMainEvent) {
157163
props.onMainEvent("click");
158164
}
159-
}, [props.onChange, props.options, props.onMainEvent]);
165+
}, [props.onChange, props.onImmediateSave,props.options, props.onMainEvent]);
160166

161167
const handleEvent = useCallback(async (eventName: string) => {
162168
if (!mountedRef.current) return [] as unknown[];
@@ -209,6 +215,7 @@ export const ColumnSelectComp = (function () {
209215
options={props.otherProps?.options || []}
210216
onChange={props.onChange}
211217
onChangeEnd={props.onChangeEnd}
218+
onImmediateSave={props.onImmediateSave}
212219
onMainEvent={props.otherProps?.onEvent}
213220
/>
214221
</Wrapper>

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,10 @@ export const SwitchComp = (function () {
144144
disabled={false}
145145
onChange={(checked, e) => {
146146
props.onChange(checked);
147+
// Use immediate save to show Save Changes button without exiting edit mode
148+
if (props.onImmediateSave) {
149+
props.onImmediateSave(checked);
150+
}
147151
props.otherProps?.onEvent?.("change");
148152
props.otherProps?.onEvent?.(checked ? "true" : "false");
149153
}}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /