Skip to content

Commit

Permalink
Add action for add and remove items. Change background simulator image
Browse files Browse the repository at this point in the history
  • Loading branch information
Julián Scialabba committed Jun 18, 2020
1 parent 163a06d commit e5e180a
Show file tree
Hide file tree
Showing 11 changed files with 71 additions and 26 deletions.
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
"deploy": "npm run build && gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
Expand Down
12 changes: 1 addition & 11 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -1,21 +1,11 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"name": "CSS Flexbox Simulator",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
Expand Down
21 changes: 19 additions & 2 deletions src/Components/App/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class App extends Component{
constructor(props) {
super(props);
this.state = {
'itemsQuantity': 3,
'simulator': {
'justifyContent': 'flex-start',
'alignItems': 'stretch',
Expand All @@ -28,6 +29,22 @@ class App extends Component{
console.log('state app', this.state);
}

removeItem = () => {
const itemsQuantity = this.state.itemsQuantity;
if(itemsQuantity > 1){
const newValue = itemsQuantity - 1;
this.setState({itemsQuantity: newValue});
}
}

addItem = () => {
const itemsQuantity = this.state.itemsQuantity;
if(itemsQuantity < 20){
const newValue = itemsQuantity + 1;
this.setState({itemsQuantity: newValue});
}
}

render() {
return (
<AppLayout>
Expand All @@ -36,10 +53,10 @@ class App extends Component{
</HeaderLayout>
<ContentLayout>
<FlexboxActionLayout>
<FlexboxAction updateValues={this.updateStateActions}/>
<FlexboxAction updateValues={this.updateStateActions} removeItem={this.removeItem} addItem={this.addItem}/>
</FlexboxActionLayout>
<FlexboxSimulatorLayout>
<FlexboxSimulator values={this.state.simulator}/>
<FlexboxSimulator values={this.state.simulator} itemsQuantity={this.state.itemsQuantity} />
</FlexboxSimulatorLayout>
</ContentLayout>
<FooterLayout>
Expand Down
12 changes: 10 additions & 2 deletions src/Components/FlexboxAction/FlexboxAction.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@ import React, { Component } from 'react';
import {
FlexboxActionContainer,
FlexboxActionSection,
FlexboxActionHeader,
FlexboxActionSectionTitle,
FlexboxActionSectionItemsContainer,
FlexboxActionSectionItem,
FlexboxActionSectionItemTitle,
FlexboxActionSectionItemOptions
FlexboxActionSectionItemOptions,
FlexboxActionButtonAdd,
FlexboxActionButtonRemove
} from './styled';
import { RadioGroup, ReversedRadioButton } from '../RadioButton/RadioButton';
import FlexboxActionPopup from '../FlexboxActionPopup/FlexboxActionPopup';
Expand All @@ -32,11 +35,16 @@ class FlexboxAction extends Component {
this.props.updateValues(this.state);
}


render() {
return (
<FlexboxActionContainer>
<FlexboxActionSection>
<FlexboxActionSectionTitle>Container Properties</FlexboxActionSectionTitle>
<FlexboxActionHeader>
<FlexboxActionSectionTitle>Container Properties</FlexboxActionSectionTitle>
<FlexboxActionButtonRemove onClick={this.props.removeItem}>-</FlexboxActionButtonRemove>
<FlexboxActionButtonAdd onClick={this.props.addItem}>+</FlexboxActionButtonAdd>
</FlexboxActionHeader>
<FlexboxActionSectionItemsContainer>
{flexboxActionItemsData.map((flexboxActionItemData, index) => {
return (<FlexboxActionSectionItem key={index}>
Expand Down
28 changes: 27 additions & 1 deletion src/Components/FlexboxAction/styled.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,38 @@ export const FlexboxActionContainer = styled.div`

export const FlexboxActionSection = styled.div`
margin-top: 20px;
position:relative;
`

export const FlexboxActionHeader = styled.div`
display:flex;
flex-wrap: wrap;
`

export const FlexboxActionSectionTitle = styled.div`
font-size: 20px;
font-weight: 700;
flex-grow: 1;
`
export const FlexboxActionSectionItemsContainer = styled.div`
export const FlexboxActionButton = styled.div`
font-size: 16px;
padding: 10px;
text-align: center;
color: white;
cursor: pointer;
width: 20px;
`

export const FlexboxActionButtonAdd = styled(FlexboxActionButton)`
background-color: green;
`

export const FlexboxActionButtonRemove = styled(FlexboxActionButton)`
background-color: red;
margin-right: 10px;
`

export const FlexboxActionSectionItemsContainer = styled.div`
`

export const FlexboxActionSectionItem = styled.div`
Expand Down
1 change: 0 additions & 1 deletion src/Components/FlexboxActionPopup/styled.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export const FlexboxActionPopupContent = styled.div`
`

export const FlexboxActionPopupActionClose = styled.div`
cursor: pointer;
position: absolute;
display: block;
padding: 2px 5px;
Expand Down
16 changes: 10 additions & 6 deletions src/Components/FlexboxSimulator/FlexboxSimulator.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import React, { Component } from 'react';
import { FlexboxSimulatorContainer, FlexboxSimulatorItem } from './styled';
import backgroundSimulator from './background-simulator.png';
import backgroundSimulator from './background-simulator.jpg';

class FlexboxSimulator extends Component {

render() {
console.log('props simulator: ', this.props.values);
return (<FlexboxSimulatorContainer backgroundImg={backgroundSimulator} simulatorProps={this.props.values}>
<FlexboxSimulatorItem>1</FlexboxSimulatorItem>
<FlexboxSimulatorItem>2</FlexboxSimulatorItem>
<FlexboxSimulatorItem>3</FlexboxSimulatorItem>
const {itemsQuantity, values} = this.props;
console.log('itemsQuantity: ', itemsQuantity);
return (<FlexboxSimulatorContainer backgroundImg={backgroundSimulator} simulatorProps={values}>
{Array.apply(null, { length: itemsQuantity }).map((e, index) => {
return (<FlexboxSimulatorItem>
{index + 1}
</FlexboxSimulatorItem>);

})}
</FlexboxSimulatorContainer>);
}
}
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
2 changes: 1 addition & 1 deletion src/Components/FlexboxSimulator/styled.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,6 @@ export const FlexboxSimulatorItem = styled.div`
display: flex;
align-items: center;
justify-content: center;
font-size:22px;
font-size:40px;
font-weight: bolder;
`;
2 changes: 2 additions & 0 deletions src/Components/RadioButton/RadioButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,9 @@ export class ReversedRadioButton extends Component {
borderColor: disabled ? (disabledColor || '#e1e1e1') : (rootColor || '#999999'),
borderRadius: 1,
padding: padding || 16,
paddingTop: 10,
width: 150,
height: 13,
marginBottom: horizontal ? 10 : (padding || 16),
marginRight: horizontal && !last ? (padding || 16) / 2 : 0,
},
Expand Down

0 comments on commit e5e180a

Please sign in to comment.