Skip to content

[Feat] Layer Feature & Bulk Property Settings #681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Feb 15, 2024
Merged

[Feat] Layer Feature & Bulk Property Settings #681

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a5d099b
initial
freddysundowner Dec 29, 2023
54583db
Merge pull request #638 from lowcoder-org/dev
FalkWolsky Jan 16, 2024
fc6cd84
Merge pull request #657 from lowcoder-org/dev
FalkWolsky Jan 24, 2024
a81e175
Pushing from header to left meno bar
Jan 24, 2024
875bdfd
Sortable Display of Components
Jan 25, 2024
27079d9
component sorting and z-index based on sorting position
raheeliftikhar5 Feb 2, 2024
5323da5
[WIP] Own Display for Layers
Feb 3, 2024
9ac931a
[WIP] Own Display for Layers
Feb 4, 2024
02c1ab3
bulk actions
raheeliftikhar5 Feb 5, 2024
b174385
bulk action value
raheeliftikhar5 Feb 15, 2024
0bc7f5b
Control of Component Properties
Feb 15, 2024
6911e74
Merge branch 'dev' into collion-integration
FalkWolsky Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
bulk actions
  • Loading branch information
@raheeliftikhar5
raheeliftikhar5 committed Feb 5, 2024
commit 02c1ab338a354fe15fe69f39ee656333009dbffc
62 changes: 28 additions & 34 deletions client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import cloneDeep from 'lodash/cloneDeep';
import { useDispatch } from "react-redux";
import { useApplicationId } from "util/hooks";
import { updateApplication } from "redux/reduxActions/applicationActions";
import { Button, Divider, Dropdown, Flex, Input, MenuProps, Space } from "antd";
import { Button, Divider, Dropdown, Flex, Input, Menu, MenuProps, Space } from "antd";
import { Switch } from "antd";
import {
saveCollisionStatus,
Expand Down Expand Up @@ -223,19 +223,7 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
pos: index,
};
})

dispatch(
updateApplication({
applicationId: applicationId,
editingApplicationDSL: {
...dsl,
ui: {
...dsl.ui,
layout,
}
} as object,
})
);

editorState.rootComp.children.ui.dispatchChangeValueAction({
...dsl.ui,
layout,
Expand Down Expand Up @@ -292,30 +280,32 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
return checkedKeys;
}

useEffect(() => {
console.log('onChange', actionValue);
}, [actionValue])

const getActionValue = () => {
return actionValue;
}

const handleComponentsActions = (actionType : string) => {
const handleComponentsActions = useCallback((actionType: string) => {
const value = getActionValue();
for (let key of getCheckedKeys()) {
const node = getTreeNodeByKey(componentTreeData, key);
const comp = editorState.getUICompByName(node.title);
if (comp != undefined) {
if (actionType === "hidden") {
comp.children.comp.dispatchChangeValueAction({ hidden: getActionValue() });
}
else if (actionType === "disable") {
comp.children.comp.dispatchChangeValueAction({ disabled: getActionValue() });
}
else if (actionType === "background") {
comp.children.comp.dispatchChangeValueAction({ BackgroundColor : getActionValue() });
if(comp) {
const { children } = comp.children.comp
const types = actionType.split('.');

if(types.length === 1) { // e.g hidden, disabled
children[types[0]]?.dispatchChangeValueAction(value);
}
else {
comp.children.comp.dispatchChangeValueAction({ actionType: getActionValue() });
else if(types.length === 2) { // nested object e.g. style.background
children[types[0]][types[1]]?.dispatchChangeValueAction(value);
}
}
}
}
}, [getActionValue, getCheckedKeys]);

/*

Expand All @@ -331,18 +321,15 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
const layerActions: ItemType[] = [
{
label: 'Hide Component',
key: 'hide',
onClick: () => handleComponentsActions("hidden"),
key: 'hidden',
},
{
label: 'Disable Component',
key: 'background',
onClick: () => handleComponentsActions("disable"),
key: 'disable',
},
{
label: 'Component Background',
key: '3',
onClick: () => handleComponentsActions("background"),
key: 'style.background',
},
{
label: 'Unlock',
Expand Down Expand Up @@ -396,7 +383,14 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
{trans("leftPanel.selectedComponents")}<br/>
{trans("leftPanel.displayComponents")}
<Input placeholder="Action Value" onChange={handleActionValueChange}/>
<CustomDropdown menu={{ items: layerActions }}>
<CustomDropdown
dropdownRender={() => (
<Menu
items={layerActions}
onClick={({key}) => handleComponentsActions(key)}
/>
)}
>
<Button size={"small"}>
<Space>
Action
Expand Down