Skip to content

Commit

Permalink
merge
Browse files Browse the repository at this point in the history
  • Loading branch information
Derek Anderson committed Jan 31, 2018
1 parent 34098da commit 7e8f789
Show file tree
Hide file tree
Showing 9 changed files with 232 additions and 10 deletions.
1 change: 0 additions & 1 deletion ios/SyrNative/SyrNative/SyrButton.m
Expand Up @@ -21,7 +21,6 @@ +(NSObject*) render: (NSDictionary*) component withInstance: (NSObject*) compone
} else {
button = [UIButton buttonWithType:UIButtonTypeSystem];
[button addTarget:[[SyrEventHandler sharedInstance] assignDelegate:guid] action:@selector(handleSingleTap:) forControlEvents:UIControlEventTouchUpInside];

}

NSDictionary* style = [[[component objectForKey:@"instance"] objectForKey:@"attributes"] valueForKey:@"style"];
Expand Down
24 changes: 20 additions & 4 deletions ios/SyrNative/SyrNative/SyrRaster.m
Expand Up @@ -108,17 +108,30 @@ -(void) build: (NSDictionary*) astDict {

// build children in the tree
-(void) buildChildren:(NSDictionary*) component withViewParent: (UIView*) view {
bool recalculateLayout = false;
if([component isKindOfClass:[NSDictionary class]]) {
NSArray* children = [component objectForKey:@"children"];

for(id child in children) {

if(child != [NSNull null]) {


NSLog(@"building %@", [child valueForKey:@"elementName"]);
NSObject* nsComponent = [self createComponent:child];
NSArray* subchildren = [child objectForKey:@"children"];

id attributes = [child objectForKey:@"attributes"];
if(attributes != nil) {
id style = [attributes objectForKey:@"style"];
if(style != nil) {
NSString* height = [style valueForKey:@"height"];
if([height isKindOfClass:[NSString class]]) {
if(height != nil && [height containsString:@"auto"]) {
recalculateLayout = true;
}
}
}
}

// component is not of type available
// should do a strict check if it is derived from component
Expand Down Expand Up @@ -149,12 +162,15 @@ -(void) buildChildren:(NSDictionary*) component withViewParent: (UIView*) view
}
}
}

}

}

//
if(recalculateLayout) {
[self syncState:component];
}

}

}

/**
Expand Down
20 changes: 19 additions & 1 deletion ios/SyrNative/SyrNative/SyrScrollView.m
Expand Up @@ -13,7 +13,14 @@ @implementation SyrScrollView


+(NSObject*) render: (NSDictionary*) component withInstance: (NSObject*) componentInstance {
UIScrollView *scrollView = [[UIScrollView alloc] init];
UIScrollView *scrollView;

if(componentInstance != nil) {
scrollView = (UIScrollView*)componentInstance;
} else {
scrollView = [[UIScrollView alloc] init];
}

NSDictionary* style = [[[component objectForKey:@"instance"] objectForKey:@"attributes"] valueForKey:@"style"];
scrollView.frame = [SyrStyler styleFrame:style];

Expand All @@ -36,6 +43,17 @@ +(NSObject*) render: (NSDictionary*) component withInstance: (NSObject*) compone
farthestHeight = [style objectForKey:@"height"];
}


for (UIView *subview in scrollView.subviews)
{
CGRect frame = subview.frame;
NSNumber* y = [NSNumber numberWithDouble:frame.origin.y];
NSNumber* height = [NSNumber numberWithDouble:frame.size.height];
if(height > farthestHeight) {
farthestHeight = height;
}
};

scrollView.contentSize = CGSizeMake(scrollView.frame.size.width,[farthestHeight doubleValue]);
return scrollView;
}
Expand Down
34 changes: 32 additions & 2 deletions ios/SyrNative/SyrNative/SyrStackView.m
Expand Up @@ -16,17 +16,47 @@ +(NSObject*) render: (NSDictionary*) component withInstance: (NSObject*) compone
NSDictionary* style = [[[component objectForKey:@"instance"] objectForKey:@"attributes"] valueForKey:@"style"];
NSString* axis = [[[component objectForKey:@"instance"] objectForKey:@"attributes"] valueForKey:@"axis"];
NSString* guid = [[component objectForKey:@"instance"] valueForKey:@"guid"];
NSString* spacing = [[[component objectForKey:@"instance"] objectForKey:@"attributes"] valueForKey:@"spacing"];
NSString* distribution = [[[component objectForKey:@"instance"] objectForKey:@"attributes"] valueForKey:@"distribution"];
NSString* alignment = [[[component objectForKey:@"instance"] objectForKey:@"attributes"] valueForKey:@"align"];

if([alignment containsString:@"center"]) {
stackView.alignment = UIStackViewAlignmentCenter;
}

if([axis containsString:@"vertical"]) {
stackView.axis = UILayoutConstraintAxisVertical;
} else {
stackView.axis = UILayoutConstraintAxisHorizontal;
}

stackView.distribution = UIStackViewDistributionFillProportionally;
stackView.spacing = 10.0;
if(spacing != nil) {
stackView.spacing = [spacing doubleValue];
}

if ([distribution containsString:@"fill"]) {
stackView.distribution = UIStackViewDistributionFill;
} else if ([distribution containsString:@"proportional"]) {
stackView.distribution = UIStackViewDistributionFillProportionally;
} else if ([distribution containsString:@"spacing"]) {
stackView.distribution = UIStackViewDistributionEqualSpacing;
} else {
// default behavior
stackView.distribution = UIStackViewDistributionFillEqually;
}

NSNumber* totalHeight = [NSNumber numberWithInt:0];
for(id child in [component objectForKey:@"children"]){
NSDictionary* childStyle = [[[child objectForKey:@"instance"] objectForKey:@"attributes"] valueForKey:@"style"];
NSNumber* height = [childStyle objectForKey:@"height"];
totalHeight = [NSNumber numberWithDouble:[totalHeight doubleValue]+[height doubleValue]+[spacing doubleValue]];
}

stackView.frame = [SyrStyler styleFrame:style];
CGRect frame = stackView.frame;
frame.size.height = [totalHeight doubleValue];
stackView.frame = frame;

return [SyrStyler styleView:stackView withStyle:style];
}

Expand Down
2 changes: 1 addition & 1 deletion lib/rastermanager.js
Expand Up @@ -141,7 +141,7 @@ RasterManager.render = (component, target) => {
current.attributes = changeStack.attributes;
}

changeStack.children.forEach(change => {
changeStack.children && changeStack.children.forEach(change => {
let current = _instances[change.guid];
if (
(change.elementName && change.elementName.name === 'Text') ||
Expand Down
1 change: 1 addition & 0 deletions lib/rasters/dom/styler.js
Expand Up @@ -8,6 +8,7 @@ class styler {
element.style[key] = value;
}
}
element.style.overflow = 'hidden';
}
}

Expand Down
101 changes: 101 additions & 0 deletions samples/index.js
@@ -0,0 +1,101 @@
import {
Component,
Render,
View,
Dimensions,
Animated,
Text,
Button,
Image,
TouchableOpacity,
LinearGradient,
PixelRatio,
Platform,
NativeModules
} from '../index';

import { Styles } from './styles';

const operations = {
'+' : (oldValue, newValue) => {
return oldValue*1 + newValue*1;
},
'-' : (oldValue, newValue) => {
return oldValue*1 - newValue*1;
},
'x' : (oldValue, newValue) => {
return oldValue * newValue;
},
'/' : (oldValue, newValue) => {
return oldValue / newValue;
}
};

class SyrCalculator extends Component {
constructor() {
super();
this.state.displayAreaValue = '0';
this.state.calculations = [];
}
render() {
return (
<View style={Styles.mainView}>
<Text style={Styles.displayArea}>{this.state.displayAreaValue}</Text>
<View style={Styles.buttons}>
<Button onPress={()=>{this.onPressHandler(1)}} style={Styles.numButton(1)}>1</Button>
<Button onPress={()=>{this.onPressHandler(2)}} style={Styles.numButton(2)}>2</Button>
<Button onPress={()=>{this.onPressHandler(3)}} style={Styles.numButton(3)}>3</Button>
<Button onPress={()=>{this.onPressHandler(4)}} style={Styles.numButton(4)}>4</Button>
<Button onPress={()=>{this.onPressHandler(5)}} style={Styles.numButton(5)}>5</Button>
<Button onPress={()=>{this.onPressHandler(6)}} style={Styles.numButton(6)}>6</Button>
<Button onPress={()=>{this.onPressHandler(7)}} style={Styles.numButton(7)}>7</Button>
<Button onPress={()=>{this.onPressHandler(8)}} style={Styles.numButton(8)}>8</Button>
<Button onPress={()=>{this.onPressHandler(9)}} style={Styles.numButton(9)}>9</Button>
</View>
<Button onPress={()=>{this.onPressHandler('+')}} style={Styles.plus}>+</Button>
</View>
);
}
calculate() {
let runningValue = 0;
this.state.calculations.forEach( (element, index) => {
if(isNaN(element*1)) {
let prev = this.state.calculations[index-1];
let next = this.state.calculations[index+1];

if(prev && next) {
prev = index > 0 ? runningValue : prev;
runningValue = operations[element](prev, next);
}
}
});
return runningValue;
}
onPressHandler(btn) {
let displayAreaValue;

if(this.state.clearNextEntry) {
this.state.clearNextEntry = false;
this.state.displayAreaValue = '';
}

if(operations[btn]) {
if(this.state.displayAreaValue.length > 0) {
this.state.calculations.push(this.state.displayAreaValue);
}
this.state.calculations.push(btn);
this.state.clearNextEntry = true;
displayAreaValue = this.state.displayAreaValue;
this.calculate();
} else {
displayAreaValue = this.state.displayAreaValue == '0' ? '' : this.state.displayAreaValue;
displayAreaValue = displayAreaValue + '' + btn
}

this.setState({
displayAreaValue: displayAreaValue
})
}
}

Render(SyrCalculator);
57 changes: 57 additions & 0 deletions samples/styles/index.js
@@ -0,0 +1,57 @@
import {
Dimensions,
PixelRatio
} from '../../index';
PixelRatio.setBaseScreenSize(PixelRatio.baseDisplays.iPhoneSE);

const Styles = {
mainView: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
backgroundColor: '#aaaaaa'
},
buttons: {
width: PixelRatio.getPixelSizeForLayoutSize(600),
height: PixelRatio.getPixelSizeForLayoutSize(600),
top: PixelRatio.getPixelSizeForLayoutSize(200)
},
numButton: function (number) {
const row = Math.floor(number / 3) - (number % 3 ? 0 : 1);
const col = number % 3 ? number % 3 : 3; // 0, 1, 2
const width = Dimensions.get('window').width / 5;
const height = Dimensions.get('window').height / 7;
const padding = PixelRatio.getPixelSizeForLayoutSize(10);

const left = ((col - 1) * width) + (padding * col);
const top = (row * height) + (padding * row);

return {
height: height,
width: width,
backgroundColor: '#eeeeee',
left: left,
top: top
}
},
displayArea: {
textAlign: 'right',
height: PixelRatio.getPixelSizeForLayoutSize(125),
top: PixelRatio.getPixelSizeForLayoutSize(50),
left: PixelRatio.getPixelSizeForLayoutSize(10),
width: Dimensions.get('window').width - PixelRatio.getPixelSizeForLayoutSize(20),
backgroundColor: '#dedede',
fontSize: PixelRatio.getPixelSizeForLayoutSize(105)
},
plus: {
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(200),
backgroundColor: "#f49b42",
fontSize: PixelRatio.getPixelSizeForLayoutSize(60),
left:Dimensions.get('window').width - PixelRatio.getPixelSizeForLayoutSize(200) -PixelRatio.getPixelSizeForLayoutSize(10),
top: PixelRatio.getPixelSizeForLayoutSize(200)
}
}

export {
Styles
}
2 changes: 1 addition & 1 deletion webpack.config.js
Expand Up @@ -5,7 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// for now we set one entry for the main package.json entry
entry: {
app: ['./samples/example.js'],
app: ['./samples/index.js'],
},

output: {
Expand Down

0 comments on commit 7e8f789

Please sign in to comment.