Skip to content

Adding Shapes Component #854

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 27 commits into from
May 11, 2024
Merged

Adding Shapes Component #854

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
10d27dc
initial shape component
freddysundowner Apr 18, 2024
840678f
Merge branch 'dev' of https://github.com/lowcoder-org/lowcoder into f…
freddysundowner Apr 18, 2024
6842c4f
merged from dev
freddysundowner Apr 18, 2024
cd3d37f
initial shape component
freddysundowner Apr 18, 2024
06d6458
selecting active shape
freddysundowner Apr 19, 2024
c0325fe
selecting active shape
freddysundowner Apr 19, 2024
7e190ed
aa
freddysundowner Apr 24, 2024
cd4f98b
fixed shape width and height, added default icon selection
freddysundowner Apr 27, 2024
a78fbe1
added icons lables
freddysundowner May 6, 2024
4ac855d
added grid too shapes comp and lables to shapes lists
freddysundowner May 6, 2024
acda8fe
referencing forked coolshapes package
freddysundowner May 6, 2024
e1a49c4
added grid too shapes comp and lables to shapes lists
freddysundowner May 6, 2024
578899e
initial shape component
freddysundowner Apr 18, 2024
e9d4aa4
initial shape component
freddysundowner Apr 18, 2024
be62b7d
selecting active shape
freddysundowner Apr 19, 2024
ebc66fe
selecting active shape
freddysundowner Apr 19, 2024
b07fee5
aa
freddysundowner Apr 24, 2024
b19c9bc
fixed shape width and height, added default icon selection
freddysundowner Apr 27, 2024
e5e1e2a
added icons lables
freddysundowner May 6, 2024
9e2f907
added grid too shapes comp and lables to shapes lists
freddysundowner May 6, 2024
bcd1211
referencing forked coolshapes package
freddysundowner May 6, 2024
5665218
added grid too shapes comp and lables to shapes lists
freddysundowner May 6, 2024
9143dd5
lazy load shapes comp
raheeliftikhar5 May 9, 2024
7dab708
removed console
raheeliftikhar5 May 9, 2024
307668c
Merge branch 'feat-ShapeComp' of https://github.com/lowcoder-org/lowc…
freddysundowner May 9, 2024
84ba449
fixed drag items to shape comp
freddysundowner May 10, 2024
b156fc0
Merge branch 'dev' into feat-ShapeComp
FalkWolsky May 11, 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
added grid too shapes comp and lables to shapes lists
  • Loading branch information
@freddysundowner @raheeliftikhar5
freddysundowner authored and raheeliftikhar5 committed May 9, 2024
commit 9e2f907cdcf0c7b9a3be3977f4b43eaa8bd875dc
296 changes: 141 additions & 155 deletions client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,173 +1,159 @@
import { useEffect, useRef, useState } from "react";
import styled, { css } from "styled-components";
import { RecordConstructorToView } from "lowcoder-core";
import { styleControl } from "comps/controls/styleControl";
import _ from "lodash";
import {
IconStyle,
IconStyleType,
heightCalculator,
widthCalculator,
} from "comps/controls/styleControlConstants";
import { UICompBuilder } from "comps/generators/uiCompBuilder";
import { withDefault } from "../../generators";
import { CompParams } from "lowcoder-core";
import { ToDataType } from "comps/generators/multi";
import {
NameConfigHidden,
withExposingConfigs,
} from "comps/generators/withExposing";
import { NameGenerator } from "comps/utils/nameGenerator";
import { Section, sectionNames } from "lowcoder-design";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { NumberControl } from "comps/controls/codeControl";
import { oldContainerParamsToNew } from "../containerBase";
import { toSimpleContainerData } from "../containerBase/simpleContainerComp";
import { ShapeTriContainer } from "./shapeTriContainer";
import { ShapeControl } from "comps/controls/shapeControl";
import ReactResizeDetector from "react-resize-detector";
import { AutoHeightControl } from "../../controls/autoHeightControl";
import { withDefault } from "../../generators";
import {
clickEvent,
eventHandlerControl,
} from "../../controls/eventHandlerControl";
import { useContext } from "react";
ContainerChildren,
ContainerCompBuilder,
} from "../triContainerComp/triContainerCompBuilder";
import {
disabledPropertyView,
hiddenPropertyView,
} from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { BoolCodeControl } from "comps/controls/codeControl";
import { DisabledContext } from "comps/generators/uiCompBuilder";
import React, { useContext, useEffect, useState } from "react";
import { EditorContext } from "comps/editorState";
import { Coolshape } from "coolshapes-react";

const Container = styled.div<{ $style: IconStyleType | undefined }>`
display: flex;
align-items: center;
justify-content: center;

${(props) =>
props.$style &&
css`
height: calc(100% - ${props.$style.margin});
width: calc(100% - ${props.$style.margin});
padding: ${props.$style.padding};
margin: ${props.$style.margin};
background: ${props.$style.background};
svg {
max-width: ${widthCalculator(props.$style.margin)};
max-height: ${heightCalculator(props.$style.margin)};
color: ${props.$style.fill};
object-fit: contain;
pointer-events: auto;
}
`}
`;

const EventOptions = [clickEvent] as const;

const childrenMap = {
style: styleControl(IconStyle),
icon: withDefault(ShapeControl, ""),
autoHeight: withDefault(AutoHeightControl, "auto"),
iconSize: withDefault(NumberControl, 20),
onEvent: eventHandlerControl(EventOptions),
};

const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
const conRef = useRef<HTMLDivElement>(null);
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

useEffect(() => {
if (height && width) {
onResize();
}
}, [height, width]);

const onResize = () => {
const container = conRef.current;
setWidth(container?.clientWidth ?? 0);
setHeight(container?.clientHeight ?? 0);
export const ContainerBaseComp = (function () {
const childrenMap = {
disabled: BoolCodeControl,
icon: withDefault(ShapeControl, ""),
};
let [shape, setShape] = useState({ value: "star", index: 0 });
useEffect(() => {
if (props.icon) {
let shapeDetails = Object.values(props?.icon)[4]?.value;
setShape({
index: parseInt(shapeDetails?.split("_")[0]),
value: shapeDetails?.split("_")[1],
});
}
}, [props.icon]);
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {

return (
<ReactResizeDetector onResize={onResize}>
<Container
ref={conRef}
$style={props.style}
style={{
fontSize: props.autoHeight
? `${height < width ? height : width}px`
: props.iconSize,
}}
onClick={() => {
console.log("click");
}}
>
<Coolshape
type={shape.value as any}
index={shape.index}
noise={false}
style={{
border: `${props.style.borderWidth} solid ${props.style.border}`,
borderRadius: props.style.radius,
color: props.style.background,
}}
/>
</Container>
</ReactResizeDetector>
);
};

let ShapeBasicComp = (function () {
return new UICompBuilder(childrenMap, (props) => <IconView {...props} />)
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
{children.icon.propertyView({
label: trans("iconComp.icon"),
IconType: "All",
})}
</Section>

{["logic", "both"].includes(
useContext(EditorContext).editorModeStatus
) && (
<Section name={sectionNames.interaction}>
{children.onEvent.getPropertyView()}
{hiddenPropertyView(children)}

return (
<DisabledContext.Provider value={props.disabled}>
<ShapeTriContainer {...props} />
</DisabledContext.Provider>
);
})
.setPropertyViewFn((children) => {
return (
<>
<Section name={sectionNames.basic}>
{children.icon.propertyView({
label: trans("iconComp.icon"),
IconType: "All",
})}
</Section>
)}

{["layout", "both"].includes(
useContext(EditorContext).editorModeStatus
) && (
<>
<Section name={sectionNames.layout}>
{children.autoHeight.propertyView({
label: trans("iconComp.autoSize"),
})}
{!children.autoHeight.getView() &&
children.iconSize.propertyView({
label: trans("iconComp.iconSize"),
})}
</Section>
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
{(useContext(EditorContext).editorModeStatus === "logic" ||
useContext(EditorContext).editorModeStatus === "both") && (
<Section name={sectionNames.interaction}>
{disabledPropertyView(children)}
{hiddenPropertyView(children)}
</Section>
</>
)}
</>
))
)}

{(useContext(EditorContext).editorModeStatus === "layout" ||
useContext(EditorContext).editorModeStatus === "both") && (
<>
<Section name={sectionNames.layout}>
{children.container.getPropertyView()}
</Section>
<Section name={sectionNames.style}>
{children.container.stylePropertyView()}
</Section>
{children.container.children.showHeader.getView() && (
<Section name={"Header Style"}>
{children.container.headerStylePropertyView()}
</Section>
)}
{children.container.children.showBody.getView() && (
<Section name={"Body Style"}>
{children.container.bodyStylePropertyView()}
</Section>
)}
{children.container.children.showFooter.getView() && (
<Section name={"Footer Style"}>
{children.container.footerStylePropertyView()}
</Section>
)}
</>
)}
</>
);
})
.build();
})();

ShapeBasicComp = class extends ShapeBasicComp {
override autoHeight(): boolean {
return false;
// Compatible with old data
function convertOldContainerParams(params: CompParams<any>) {
// convert older params to old params
let tempParams = oldContainerParamsToNew(params);

if (tempParams.value) {
const container = tempParams.value.container;
// old params
if (
container &&
(container.hasOwnProperty("layout") || container.hasOwnProperty("items"))
) {
const autoHeight = tempParams.value.autoHeight;
const scrollbars = tempParams.value.scrollbars;
return {
...tempParams,
value: {
container: {
showHeader: true,
body: { 0: { view: container } },
showBody: true,
showFooter: false,
autoHeight: autoHeight,
scrollbars: scrollbars,
},
},
};
}
}
};
return tempParams;
}

export const ShapeComp = withExposingConfigs(ShapeBasicComp, [
NameConfigHidden,
]);
class ContainerTmpComp extends ContainerBaseComp {
constructor(params: CompParams<any>) {
super(convertOldContainerParams(params));
}
}

export const ShapeComp = withExposingConfigs(ContainerTmpComp, [NameConfigHidden]);

type ContainerDataType = ToDataType<ContainerChildren<{}>>;

export function defaultContainerData(
compName: string,
nameGenerator: NameGenerator
): ContainerDataType {
return {
container: {
header: toSimpleContainerData([
{
item: {
compType: "text",
name: nameGenerator.genItemName("containerTitle"),
comp: {
text: "### " + trans("container.title"),
},
},
layoutItem: {
i: "",
h: 5,
w: 24,
x: 0,
y: 0,
},
},
]),
},
};
}
Loading