Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'feature/image' into 'release'

Browse Source 
Feature/image

See merge request theappsmith/internal-tools-client!103
This commit is contained in:
Nikhil Nandagopal 2019-10-31 11:26:37 +00:00
commit 7ffd2416d6
7 changed files with 53 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/src/components/appsmith/ContainerComponent.tsx
View File

@ -11,8 +11,9 @@ import React, {
import { FocusContext } from "../../pages/Editor/Canvas";
import { getBorderCSSShorthand } from "../../constants/DefaultTheme";
type StyledContainerProps = ContainerProps & {
export type StyledContainerProps = ContainerProps & {
focus?: boolean;
imageUrl?: string;
};
export const StyledContainer = styled("div")<StyledContainerProps>`
@ -20,6 +21,7 @@ export const StyledContainer = styled("div")<StyledContainerProps>`
flex-direction: ${props => {
return props.orientation === "HORIZONTAL" ? "row" : "column";
}};
background: ${props => props.imageUrl}
background: ${props => props.style.backgroundColor};
color: ${props => props.theme.colors.primary};
position: ${props => {

26
app/client/src/components/appsmith/ImageComponent.tsx Normal file
View File

@ -0,0 +1,26 @@
import * as React from "react";
import { ComponentProps } from "../appsmith/BaseComponent";
import { StyledContainer, StyledContainerProps } from "./ContainerComponent";
import styled from "styled-components";
export const StyledImage = styled(StyledContainer)<StyledContainerProps>`
background-image: url("${props => {
return props.imageUrl;
}}");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
`;
class ImageComponent extends React.Component<ImageComponentProps> {
render() {
return <StyledImage {...this.props}>{}</StyledImage>;
}
}
export interface ImageComponentProps extends ComponentProps {
imageUrl: string;
defaultImageUrl: string;
}
export default ImageComponent;

11
app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
View File

@ -92,14 +92,9 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
{
id: "4.1",
propertyName: "image",
label: "Image",
controlType: "IMAGE_PICKER",
},
{
id: "4.2",
propertyName: "defaultImage",
label: "Default Image",
controlType: "IMAGE_PICKER",
label: "Image Url",
placeholderText: "Enter URL",
controlType: "INPUT_TEXT",
},
{
id: "4.3",

10
app/client/src/utils/WidgetRegistry.tsx
View File

@ -13,8 +13,8 @@ import WidgetFactory from "./WidgetFactory";
import React from "react";
import ButtonWidget, { ButtonWidgetProps } from "../widgets/ButtonWidget";
import DropdownWidget, { DropdownWidgetProps } from "../widgets/DropdownWidget";
import TableWidget, { TableWidgetProps } from '../widgets/TableWidget';
import ImageWidget, { ImageWidgetProps } from "../widgets/ImageWidget";
import TableWidget, { TableWidgetProps } from "../widgets/TableWidget";
class WidgetBuilderRegistry {
static registerWidgetBuilders() {
WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
@ -65,9 +65,9 @@ class WidgetBuilderRegistry {
},
});
WidgetFactory.registerWidgetBuilder("DROP_DOWN_WIDGET", {
buildWidget(widgetData: DropdownWidgetProps): JSX.Element {
return <DropdownWidget {...widgetData} />;
WidgetFactory.registerWidgetBuilder("IMAGE_WIDGET", {
buildWidget(widgetData: ImageWidgetProps): JSX.Element {
return <ImageWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("TABLE_WIDGET", {

10
app/client/src/widgets/ImageWidget.tsx
View File

@ -1,10 +1,18 @@
import * as React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import ImageComponent from "../components/appsmith/ImageComponent";
class ImageWidget extends BaseWidget<ImageWidgetProps, WidgetState> {
getPageView() {
return <div />;
return (
<ImageComponent
widgetId={this.props.widgetId}
style={this.getPositionStyle()}
imageUrl={this.props.image}
defaultImageUrl={this.props.defaultImage}
/>
);
}
getWidgetType(): WidgetType {

10
app/client/src/widgets/TableWidget.tsx
View File

@ -14,11 +14,11 @@ interface Column {
}
function constructColumns(data: object[]): Column[] {
let cols: Column[] = [];
let listItemWithAllProperties = {}
const cols: Column[] = [];
const listItemWithAllProperties = {};
data.forEach(dataItem => {
Object.assign(listItemWithAllProperties, dataItem)
})
Object.assign(listItemWithAllProperties, dataItem);
});
forIn(listItemWithAllProperties, (value, key) => {
cols.push({
key: key,
@ -46,7 +46,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
this.props.tableData ? ((this.props.tableData as any) as string) : "",
);
let columns = constructColumns(tableData);
const columns = constructColumns(tableData);
return (
<AutoResizer>
{({ width, height }: { width: number; height: number }) => (

4
app/client/yarn.lock
View File

@ -7494,7 +7494,7 @@ mem@^4.0.0:
mimic-fn "^2.0.0"
p-is-promise "^2.0.0"
memoize-one@^5.0.0:
"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0:
version "5.1.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
@ -9555,7 +9555,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.3"
prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@15.7.2, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==