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

abstract position styled component to a seperate pure component

Browse Source
This commit is contained in:
Anirudh Madhavan 2019-03-16 16:29:42 +05:30
parent e438cb056c
commit ad22eac52e
6 changed files with 30 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/client/src/editorComponents/CalloutComponent.tsx
View File

@ -1,30 +1,20 @@
import * as React from "react";
import { IComponentProps } from "./BaseComponent";
import PositionContainer from "./PositionContainer";
import { Callout, Code, H5, Intent, Switch } from "@blueprintjs/core";
import styled from "../constants/DefaultTheme";
const CalloutContainer = styled("span")<ICalloutComponentProps>`
color: ${props => props.theme.primaryColor};
position: ${props => props.style.positionType};
left: ${props => {
return props.style.xPosition + props.style.xPositionUnit;
}};
top: ${props => {
return props.style.yPosition + props.style.yPositionUnit;
}};
`;
class CalloutComponent extends React.Component<ICalloutComponentProps> {
render() {
return (
<CalloutContainer {...this.props}>
<PositionContainer {...this.props}>
<Callout
{...this.props}
title={this.props.title ? this.props.title : undefined}
intent={this.props.intent}
>
{this.props.description}
</Callout>
</CalloutContainer>
</PositionContainer>
);
}
}

17
app/client/src/editorComponents/IconComponent.tsx
View File

@ -2,25 +2,14 @@ import * as React from "react";
import { IComponentProps } from "./BaseComponent";
import { Icon, Intent } from "@blueprintjs/core";
import { IconName } from "@blueprintjs/icons";
import styled from "../constants/DefaultTheme";
const IconContainer = styled("span")<IIconComponentProps>`
color: ${props => props.theme.primaryColor};
position: ${props => props.style.positionType};
left: ${props => {
return props.style.xPosition + props.style.xPositionUnit;
}};
top: ${props => {
return props.style.yPosition + props.style.yPositionUnit;
}};
`;
import PositionContainer from "./PositionContainer";
class IconComponent extends React.Component<IIconComponentProps> {
render() {
return (
<IconContainer {...this.props}>
<PositionContainer {...this.props}>
<Icon icon={this.props.icon} iconSize={this.props.iconSize} />
</IconContainer>
</PositionContainer>
);
}
}

17
app/client/src/editorComponents/InputTextComponent.tsx
View File

@ -1,22 +1,11 @@
import * as React from "react";
import { IComponentProps } from "./BaseComponent";
import styled from "../constants/DefaultTheme";
const InputTextContainer = styled("span")<IInputTextComponentProps>`
color: ${props => props.theme.primaryColor};
position: ${props => props.style.positionType};
left: ${props => {
return props.style.xPosition + props.style.xPositionUnit;
}};
top: ${props => {
return props.style.yPosition + props.style.yPositionUnit;
}};
`;
import PositionContainer from "./PositionContainer";
class InputTextComponent extends React.Component<IInputTextComponentProps> {
render() {
return (
<InputTextContainer {...this.props}>
<PositionContainer {...this.props}>
<input
placeholder={this.props.placeholder}
type={this.props.type}
@ -26,7 +15,7 @@ class InputTextComponent extends React.Component<IInputTextComponentProps> {
maxLength={this.props.maxLength}
size={this.props.size}
/>
</InputTextContainer>
</PositionContainer>
);
}
}

15
app/client/src/editorComponents/PositionContainer.tsx Normal file
View File

@ -0,0 +1,15 @@
import { IComponentProps } from "./BaseComponent";
import styled from "../constants/DefaultTheme";
const PositionContainer = styled("div")<IComponentProps>`
color: ${props => props.theme.primaryColor};
position: ${props => props.style.positionType};
left: ${props => {
return props.style.xPosition + props.style.xPositionUnit;
}};
top: ${props => {
return props.style.yPosition + props.style.yPositionUnit;
}};
`;
export default PositionContainer;

17
app/client/src/editorComponents/SpinnerComponent.tsx
View File

@ -1,29 +1,18 @@
import * as React from "react";
import { IComponentProps } from "./BaseComponent";
import PositionContainer from "./PositionContainer";
import { Spinner, Intent } from "@blueprintjs/core";
import styled from "../constants/DefaultTheme";
const SpinnerContainer = styled("span")<ISpinnerComponentProps>`
color: ${props => props.theme.primaryColor};
position: ${props => props.style.positionType};
left: ${props => {
return props.style.xPosition + props.style.xPositionUnit;
}};
top: ${props => {
return props.style.yPosition + props.style.yPositionUnit;
}};
`;
class SpinnerComponent extends React.Component<ISpinnerComponentProps> {
render() {
return (
<SpinnerContainer {...this.props}>
<PositionContainer {...this.props}>
<Spinner
size={this.props.size}
value={this.props.value}
intent={this.props.intent}
/>
</SpinnerContainer>
</PositionContainer>
);
}
}

15
app/client/src/editorComponents/TextComponent.tsx
View File

@ -1,21 +1,10 @@
import * as React from "react"
import { IComponentProps } from "./BaseComponent"
import styled from "../constants/DefaultTheme"
const TextContainer = styled("span")<ITextComponentProps>`
color: ${props => props.theme.primaryColor};
position: ${props => props.style.positionType};
left: ${props => {
return props.style.xPosition + props.style.xPositionUnit
}};
top: ${props => {
return props.style.yPosition + props.style.yPositionUnit
}};
`
import PositionContainer from "./PositionContainer";
class TextComponent extends React.Component<ITextComponentProps> {
render() {
return <TextContainer {...this.props}>{this.props.text}</TextContainer>
return <PositionContainer {...this.props}>{this.props.text}</PositionContainer>
}
}