Skip to content

Commit 1e13c4d

Browse files
author
Amir Tocker
committed
Whitespace.
1 parent 660909b commit 1e13c4d

File tree

3 files changed

+101
-80
lines changed

3 files changed

+101
-80
lines changed

‎src/components/CloudinaryComponent/CloudinaryComponent.js‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,20 @@ export default class CloudinaryComponent extends Component {
4040
}
4141

4242
getChildTransformations(children) {
43-
return React.Children.map( children ,child =>
44-
CloudinaryComponent.getOptions(child.props, child.context)
43+
return React.Children.map(children, child =>
44+
CloudinaryComponent.getOptions(child.props, child.context) // TODO change to getTransformation()
4545
);
4646
}
4747

48-
getTransformation(){
48+
getTransformation() {
4949
let options = CloudinaryComponent.getOptions(this.props, this.context);
5050
let childrenOptions = this.getChildTransformations(this.props.children);
51-
if(!Util.isEmpty(childrenOptions)){
51+
if (!Util.isEmpty(childrenOptions)) {
5252
options.transformation = childrenOptions;
5353
}
5454
return options;
5555
}
56+
5657
/**
5758
* Combine props and context to create an option Object that can be passed to Cloudinary methods.<br>
5859
* All names are converted to snake_case.
@@ -63,34 +64,34 @@ export default class CloudinaryComponent extends Component {
6364
static getOptions(props, context) {
6465
var options = {};
6566

66-
for(let key in context) {
67+
for (let key in context) {
6768
let value = context[key];
68-
if(value !== null && value !== undefined) {
69+
if (value !== null && value !== undefined) {
6970
options[snakeCase(key)] = value;
7071
}
7172
}
72-
for(let key in props) {
73+
for (let key in props) {
7374
let value = props[key];
74-
if(value !== null && value !== undefined) {
75+
if (value !== null && value !== undefined) {
7576
options[snakeCase(key)] = value;
7677
}
7778
}
7879
return options;
7980
}
8081

8182
getUrl(props, context = {}) {
82-
var options = CloudinaryComponent.getOptions(props, context);
83-
options = this.getTransformation();
83+
let options = this.getTransformation();
8484
let cl = Cloudinary.new(options);
8585
this.getChildTransformations(props.children);
86-
return cl.url(props.publicId, options);
86+
return cl.url(props.publicId, options);
8787
}
8888

8989
}
90-
CloudinaryComponent.VALID_OPTIONS = Configuration.CONFIG_PARAMS.concat(Transformation.new().PARAM_NAMES).map( camelCase);
90+
CloudinaryComponent.VALID_OPTIONS = Configuration.CONFIG_PARAMS.concat(Transformation.new().PARAM_NAMES).map(camelCase);
9191
CloudinaryComponent.contextTypes = typesFrom(CloudinaryComponent.VALID_OPTIONS);
9292

93-
CloudinaryComponent.propTypes = CloudinaryComponent.contextTypes ;
93+
CloudinaryComponent.propTypes = CloudinaryComponent.contextTypes;
94+
CloudinaryComponent.propTypes.publicId = PropTypes.string;
9495

9596
CloudinaryComponent.childContextTypes = {};
9697

@@ -103,7 +104,13 @@ function typesFrom(configParams) {
103104
configParams = configParams || [];
104105
const types = {};
105106
for (let key of configParams) {
106-
types[camelCase(key)] = PropTypes.string;
107+
types[camelCase(key)] = PropTypes.oneOfType([
108+
PropTypes.string,
109+
PropTypes.arrayOf(PropTypes.string),
110+
PropTypes.object,
111+
PropTypes.arrayOf(PropTypes.object)
112+
113+
]);
107114
}
108115
return types;
109116
}

‎src/components/Video/Video.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ export default class Video extends CloudinaryComponent {
3636
}
3737

3838
render() {
39-
let {publicId, poster, sourceTypes, fallback, sourceTransformation, ...options} = Object.assign({}, this.context, this.props);
39+
let {publicId, poster, sourceTypes, fallback, sourceTransformation, ...options} = Object.assign({},
40+
this.context,
41+
this.props);
4042
sourceTransformation = sourceTransformation || {};
4143
sourceTypes = sourceTypes || Cloudinary.DEFAULT_VIDEO_PARAMS.source_types;
4244
options = CloudinaryComponent.getOptions(options, {});
@@ -47,19 +49,19 @@ export default class Video extends CloudinaryComponent {
4749
let defaults = poster.publicId !== undefined && poster.publicId !== null ? Cloudinary.DEFAULT_IMAGE_PARAMS : DEFAULT_POSTER_OPTIONS;
4850
poster = cld.url(poster.publicId || publicId, Util.defaults({}, poster, defaults));
4951
}
50-
if(!Util.isEmpty(poster)){
52+
if (!Util.isEmpty(poster)) {
5153
tagAttributes.poster = poster;
5254
}
53-
if(!Util.isEmpty(this.state.poster)){
55+
if (!Util.isEmpty(this.state.poster)) {
5456
tagAttributes.poster = this.state.poster;
5557
}
5658

57-
if(Util.isArray(sourceTypes)){
58-
sources = sourceTypes.map( srcType => {
59-
let transformation = sourceTransformation[srcType] || {};
60-
let src = cld.url(publicId, Util.defaults({}, transformation, {resource_type: 'video', format: srcType}));
61-
let mimeType = 'video/' + (srcType === 'ogv' ? 'ogg' : srcType);
62-
return <source key={mimeType} src={ src} type={ mimeType}/>;
59+
if (Util.isArray(sourceTypes)) {
60+
sources = sourceTypes.map(srcType => {
61+
let transformation = sourceTransformation[srcType] || {};
62+
let src = cld.url(publicId, Util.defaults({}, transformation, {resource_type: 'video', format: srcType}));
63+
let mimeType = 'video/' + (srcType === 'ogv' ? 'ogg' : srcType);
64+
return <source key={mimeType} src={ src} type={ mimeType}/>;
6365
}
6466
);
6567
} else {

‎stories/index.js‎

Lines changed: 69 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,111 @@
11
import React from 'react';
2-
import { storiesOf, action, linkTo } from '@kadira/storybook';
2+
import {storiesOf, action, linkTo} from '@kadira/storybook';
33
import Image from '../src/components/Image';
44
import Video from '../src/components/Video';
55
import Transformation from '../src/components/Transformation';
66
import CloudinaryContext from '../src/components/CloudinaryContext';
77
import cloudinary from 'cloudinary-core';
88

9-
storiesOf('Image', module)
10-
.addWithInfo('image', "Basic tag", ()=> {
11-
let t = { width: 0.5, crop: "scale"};
9+
storiesOf('Image', module).addWithInfo('image', "Basic tag", ()=> {
10+
let t = {width: 0.5, crop: "scale"};
11+
return (
12+
<Image cloudName="demo" publicId="sample" transformation={t}/>
13+
)
14+
}
15+
).addWithInfo('image with alt', "Demostrate using an img tag attribute", ()=> {
16+
let t = {width: 0.5, crop: "scale"};
1217
return (
13-
<Image cloudName="demo" publicId="sample" transformation={t}/>
14-
)})
15-
.addWithInfo('image with alt', "Demostrate using an img tag attribute", ()=> {
16-
let t = { width: 0.5, crop: "scale"};
17-
return(
1818
<Image cloudName="demo" publicId="does-not-exist" alt="This image is intentionally missing" transformation={t}/>
1919
)
20-
})
21-
.addWithInfo('image with html attributes', 'image with html attributes', ()=> {
22-
return(
23-
<Image cloudName="demo" publicId="sample" html_width="100"/>
20+
}
21+
).addWithInfo('image with html attributes', 'image with html attributes', ()=> {
22+
return (
23+
<Image cloudName="demo" publicId="sample" html_width="100"/>
2424
)
25-
})
26-
.addWithInfo('image with style', 'image with style', ()=> {
27-
let t = { width: 0.5, crop: "scale"};
28-
return(
29-
<Image cloudName="demo" publicId="sample" style={{border: "20px solid"}} />
25+
}
26+
).addWithInfo('image with style', 'image with style', ()=> {
27+
let t = {width: 0.5, crop: "scale"};
28+
return (
29+
<Image cloudName="demo" publicId="sample" style={{border: "20px solid"}}/>
3030
)
31-
}).addWithInfo('image with chained transformation', 'image with chained transformation', ()=> {
32-
let t = { width: 0.5, crop: "scale"};
33-
return(<div>
34-
<Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10" transformation={[{width:100, crop:"crop"}, {width:100, angle: -10, crop: "scale"}]} />
35-
<Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10" />
31+
}
32+
).addWithInfo('image with chained transformation', 'image with chained transformation', ()=> {
33+
let t = {width: 0.5, crop: "scale"};
34+
return (
35+
<div>
36+
<Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10"
37+
transformation={[{width: 100, crop: "crop"}, {width: 100, angle: -10, crop: "scale"}]}/>
38+
<Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10"/>
3639
</div>
3740
)
38-
}).addWithInfo('image with chained transformation', 'image with chained transformation', ()=> {
39-
let t = { width: 0.5, crop: "scale"};
40-
return(<div>
41-
<Image cloudName="demo" publicId="sample" >
42-
<Transformation width="200" crop="scale" angle="10" />
43-
<Transformation width="100" crop="crop" />
41+
}
42+
).addWithInfo('image with chained transformation', 'image with chained transformation', ()=> {
43+
let t = {width: 0.5, crop: "scale"};
44+
return (
45+
<div>
46+
<Image cloudName="demo" publicId="sample">
47+
<Transformation width="200" crop="scale" angle="10"/>
48+
<Transformation width="100" crop="crop"/>
4449
<Transformation width="100" crop="scale" angle="-10"/>
4550
</Image>
46-
<Image cloudName="demo" publicId="sample" width="100" crop="scale" />
47-
</div>
48-
)
49-
});
50-
storiesOf('Video', module)
51-
.addWithInfo('Simple tag', 'Simple tag', ()=> {
51+
<Image cloudName="demo" publicId="sample" width="100" crop="scale"/>
52+
</div>
53+
)
54+
});
55+
storiesOf('Video', module).addWithInfo('Simple tag', 'Simple tag', ()=> {
5256
return (
5357
<Video cloudName="demo" controls publicId="dog"/>
5458
)
55-
}).addWithInfo('With fallback', 'With fallback', ()=> {
59+
}
60+
).addWithInfo('With fallback', 'With fallback', ()=> {
5661
return (
5762
<Video cloudName="demo" controls="controls" publicId="dog" fallback="Cannot display video"/>
5863
)
59-
}).addWithInfo('With inline fallback', 'With inline fallback', ()=> {
64+
}
65+
).addWithInfo('With inline fallback', 'With inline fallback', ()=> {
6066
return (
61-
<Video cloudName="demo" controls="controls" publicId="dog" >
67+
<Video cloudName="demo" controls="controls" publicId="dog">
6268
Cannot display <b>video</b>.
6369
</Video>
6470
)
65-
}).addWithInfo('With source types', 'With source types', ()=> {
71+
}
72+
).addWithInfo('With source types', 'With source types', ()=> {
6673
return (
6774
<Video cloudName="demo" controls="controls" publicId="dog" sourceTypes={['webm', 'ogv', 'mp4']}>
6875
Cannot display video.
6976
</Video>
7077
)
71-
}).addWithInfo('Simple tag with width', 'Simple tag with width', ()=> {
78+
}
79+
).addWithInfo('Simple tag with width', 'Simple tag with width', ()=> {
7280
return (
7381
<Video cloudName="demo" controls publicId="dog" width="300" crop="scale"/>
7482
)
75-
}).addWithInfo('Simple tag with poster url', 'Simple tag with poster url', ()=> {
76-
let url = cloudinary.Cloudinary.new({cloud_name: "demo"}).url("sample", {width:300, crop: "scale"});
83+
}
84+
).addWithInfo('Simple tag with poster url', 'Simple tag with poster url', ()=> {
85+
let url = cloudinary.Cloudinary.new({cloud_name: "demo"}).url("sample", {width: 300, crop: "scale"});
7786
return (
7887
<Video cloudName="demo" controls publicId="dog" width="300" crop="scale" poster={url}/>
7988
)
80-
}).addWithInfo('Simple tag with poster object', 'Simple tag with poster object', ()=> {
81-
return (
82-
<Video cloudName="demo" controls publicId="dog" width="300" crop="scale" poster={{publicId: "sample"}}/>
83-
)
84-
});
85-
storiesOf('CloudinaryContext', module)
86-
.addWithInfo('CloudinaryContext', 'CloudinaryContext', ()=> {
87-
let t = { width: 0.5, crop: "scale"};
89+
}
90+
).addWithInfo('Simple tag with poster object', 'Simple tag with poster object', ()=> {
91+
return (
92+
<Video cloudName="demo" controls publicId="dog" width="300" crop="scale" poster={{publicId: "sample"}}/>
93+
)
94+
});
95+
96+
storiesOf('CloudinaryContext', module).addWithInfo('CloudinaryContext', 'CloudinaryContext', ()=> {
97+
let t = {width: 0.5, crop: "scale"};
8898
return (
89-
<CloudinaryContext cloudName="demo" >
99+
<CloudinaryContext cloudName="demo">
90100
<div><span>Inside a div: </span>
91101
<Image publicId="sample" transformation={t} width="50"/>
92-
</div>
102+
</div>
93103

94-
<Image publicId="sample" transformation={t}/>
104+
<Image publicId="sample" transformation={t}/>
95105
</CloudinaryContext>
96-
)})
97-
.addWithInfo('Nested Context', 'Nested Context', ()=> {
106+
);
107+
}
108+
).addWithInfo('Nested Context', 'Nested Context', ()=> {
98109
return (
99110
<CloudinaryContext cloudName="demo" width="50" crop="scale">
100111
<Image publicId="sample"/>
@@ -107,5 +118,6 @@ storiesOf('CloudinaryContext', module)
107118
<Image publicId="sample" angle="0"/>
108119
</CloudinaryContext>
109120
</CloudinaryContext>
110-
)})
111-
;
121+
)
122+
}
123+
);

0 commit comments

Comments
 (0)