Add possibility to add multiple shadows and shadow spread

__tests__/components/__snapshots__/RedBox.js.snap

@@ -4,6 +4,7 @@ exports[`<RedBox /> renders simple errors 1`] = `
 <view
   name="RedBox"
   resizingConstraint={undefined}
+  shadowGroup={undefined}
   style={
     Object {
       "backgroundColor": "rgb(204, 0, 0)",
@@ -32,6 +33,7 @@ exports[`<RedBox /> renders simple errors 1`] = `
   <view
     name="Frames"
     resizingConstraint={undefined}
+    shadowGroup={undefined}
     style={
       Object {
         "color": "white",
@@ -176,6 +178,7 @@ exports[`<RedBox /> renders string errors 1`] = `
 <view
   name="RedBox"
   resizingConstraint={undefined}
+  shadowGroup={undefined}
   style={
     Object {
       "backgroundColor": "rgb(204, 0, 0)",

__tests__/components/__snapshots__/View.js.snap

@@ -4,23 +4,25 @@ exports[`<View /> name defaults to View 1`] = `
 <view
   name="View"
   resizingConstraint={undefined}
-  style={undefined}
-/>
+  shadowGroup={undefined}
+  style={undefined} />
 `;
 
 exports[`<View /> name passes its name 1`] = `
 <view
   name="foo"
   resizingConstraint={undefined}
-  style={undefined}
+  shadowGroup={undefined}
+  style={undefined} />
 />
 `;
 
 exports[`<View /> passes its children 1`] = `
 <view
   name="View"
   resizingConstraint={undefined}
-  style={undefined}
+  shadowGroup={undefined}
+  style={undefined}>
 >
   foo
 </view>
@@ -30,6 +32,7 @@ exports[`<View /> style accepts a StyleSheet ordinal 1`] = `
 <view
   name="View"
   resizingConstraint={undefined}
+  shadowGroup={undefined}
   style={
     Object {
       "flex": 1,
@@ -42,6 +45,7 @@ exports[`<View /> style accepts a plain object 1`] = `
 <view
   name="View"
   resizingConstraint={undefined}
+  shadowGroup={undefined}
   style={
     Object {
       "flex": 1,
@@ -54,6 +58,7 @@ exports[`<View /> style accepts an array of plain objects and/or StyleSheet ordi
 <view
   name="View"
   resizingConstraint={undefined}
+  shadowGroup={undefined}
   style={
     Object {
       "flex": 1,

src/components/ShadowGroupPropTypes.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+
+module.exports = {
+  shadowColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  shadowOffset: { width: PropTypes.number, height: PropTypes.number },
+  shadowSpread: PropTypes.number,
+  shadowOpacity: PropTypes.number,
+  shadowRadius: PropTypes.number,
+};

src/components/View.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import StyleSheet from '../stylesheet';
 import ViewStylePropTypes from './ViewStylePropTypes';
 import ResizingConstraintPropTypes from './ResizingConstraintPropTypes';
+import ShadowGroupPropTypes from './ShadowGroupPropTypes';
 
 const propTypes = {
   // TODO(lmr): do some nice warning stuff like RN does
@@ -18,6 +19,11 @@ const propTypes = {
   resizingConstraint: PropTypes.shape({
     ...ResizingConstraintPropTypes,
   }),
+  shadowGroup: PropTypes.arrayOf(
+    PropTypes.shape({
+      ...ShadowGroupPropTypes,
+    })
+  ),
   children: PropTypes.node,
 };
 
@@ -33,6 +39,7 @@ class View extends React.Component {
         name={this.props.name}
         style={StyleSheet.flatten(this.props.style)}
         resizingConstraint={this.props.resizingConstraint}
+        shadowGroup={this.props.shadowGroup}
       >
         {this.props.children}
       </view>

src/jsonUtils/shapeLayers.js

@@ -2,7 +2,7 @@
 import type { SJFill, SJPath, SJRect, SJShapeGroupLayer } from '@skpm/sketchapp-json-flow-types';
 import { makeResizeConstraint } from './hacksForJSONImpl';
 import { generateID, makeRect } from './models';
-import type { ResizeConstraints } from '../types';
+import type { ResizeConstraints, SketchShadowGroup } from '../types';
 
 type Radii = Array<number>;
 

src/renderers/ViewRenderer.js

@@ -4,7 +4,13 @@ import type { SJShapeGroupLayer } from '@skpm/sketchapp-json-flow-types';
 import SketchRenderer from './SketchRenderer';
 import { makeRect, makeColorFill, makeColorFromCSS } from '../jsonUtils/models';
 import { makeRectShapeLayer, makeShapeGroup } from '../jsonUtils/shapeLayers';
-import type { ViewStyle, LayoutInfo, TextStyle } from '../types';
+import type {
+  ViewStyle,
+  LayoutInfo,
+  TextStyle,
+  SketchShadowGroup,
+  ResizeConstraints,
+} from '../types';
 import {
   makeBorderOptions,
   makeShadow,
@@ -24,6 +30,7 @@ const VISIBLE_STYLES = [
   'shadowOffset',
   'shadowOpacity',
   'shadowRadius',
+  'shadowSpread',
   'backgroundColor',
   'borderColor',
   'borderTopColor',
@@ -55,7 +62,7 @@ class ViewRenderer extends SketchRenderer {
     style: ViewStyle,
     textStyle: TextStyle,
     // eslint-disable-next-line no-unused-vars
-    props: any,
+    props: any
   ): Array<SJShapeGroupLayer> {
     const layers = [];
     // NOTE(lmr): the group handles the position, so we just care about width/height here
@@ -106,7 +113,13 @@ class ViewRenderer extends SketchRenderer {
     const fill = makeColorFill(backgroundColor);
     const content = makeShapeGroup(frame, [shapeLayer], [fill]);
 
-    if (hasAnyDefined(style, SHADOW_STYLES)) {
+    if (props.shadowGroup) {
+      const shadows = [];
+      props.shadowGroup.map(shadowStyle =>
+        shadows.push(makeShadow(shadowStyle))
+      );
+      content.style.shadows = shadows;
+    } else if (hasAnyDefined(style, SHADOW_STYLES)) {
       const shadow = [makeShadow(style)];
       if (style.shadowInner) {
         content.style.innerShadows = shadow;

src/types.js

@@ -73,6 +73,8 @@ export type ViewStyle = {
   shadowOffset: { width: number, height: number },
   shadowOpacity: number,
   shadowRadius: number,
+  shadowSpread: number,
+  shadowInner: "innerShadow" | "shadow",
   width: number,
   height: number,
   top: number,
@@ -180,3 +182,13 @@ export type ResizeConstraints = {
   fixedHeight: boolean,
   fixedWidth: boolean,
 };
+
+export type SketchShadow = {
+  shadowColor: Color,
+  shadowOffset: { width: number, height: number },
+  shadowSpread: number,
+  shadowOpacity: number,
+  shadowRadius: number
+};
+
+export type SketchShadowGroup = Array<SketchShadow>;