From 28b6b7424dd950e29bcf15982b40b510a2d2fc62 Mon Sep 17 00:00:00 2001 From: Ludwig Frank Date: Sat, 3 Mar 2018 12:55:44 +0100 Subject: [PATCH 1/2] * Begin work on shadowGroup --- src/components/ShadowGroupPropTypes.js | 9 +++++++++ src/components/View.js | 7 +++++++ src/jsonUtils/shapeLayers.js | 2 +- src/renderers/ViewRenderer.js | 22 +++++++++++++++++++--- src/types.js | 12 ++++++++++++ 5 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 src/components/ShadowGroupPropTypes.js diff --git a/src/components/ShadowGroupPropTypes.js b/src/components/ShadowGroupPropTypes.js new file mode 100644 index 00000000..a5c44f1c --- /dev/null +++ b/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, +}; diff --git a/src/components/View.js b/src/components/View.js index 5e83557a..266c5390 100644 --- a/src/components/View.js +++ b/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 @@ -21,6 +22,11 @@ const propTypes = { resizingConstraint: PropTypes.shape({ ...ResizingConstraintPropTypes, }), + shadowGroup: PropTypes.arrayOf( + PropTypes.shape({ + ...ShadowGroupPropTypes, + }) + ), children: PropTypes.node, }; @@ -35,6 +41,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} diff --git a/src/jsonUtils/shapeLayers.js b/src/jsonUtils/shapeLayers.js index 736ae244..1d7707c6 100644 --- a/src/jsonUtils/shapeLayers.js +++ b/src/jsonUtils/shapeLayers.js @@ -7,7 +7,7 @@ import type { } from '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; diff --git a/src/renderers/ViewRenderer.js b/src/renderers/ViewRenderer.js index 06d7c80c..16fffc35 100644 --- a/src/renderers/ViewRenderer.js +++ b/src/renderers/ViewRenderer.js @@ -4,7 +4,13 @@ import type { SJShapeGroupLayer } from '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', @@ -60,7 +67,10 @@ class ViewRenderer extends SketchRenderer { style: ViewStyle, textStyle: TextStyle, // eslint-disable-next-line no-unused-vars - props: any + props: { + resizingConstraint: ?ResizeConstraints, + shadowGroup: ?SketchShadowGroup + } ): Array { const layers = []; // NOTE(lmr): the group handles the position, so we just care about width/height here @@ -111,7 +121,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; diff --git a/src/types.js b/src/types.js index 8d81cd33..283c4f31 100644 --- a/src/types.js +++ b/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, @@ -185,3 +187,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; From 99ac3df8cc5df180b2535de323157d2212ffd62b Mon Sep 17 00:00:00 2001 From: Ludwig Frank Date: Sat, 3 Mar 2018 14:53:41 +0100 Subject: [PATCH 2/2] * add shadowGroup to test snapshots --- __tests__/components/__snapshots__/RedBox.js.snap | 3 +++ __tests__/components/__snapshots__/View.js.snap | 6 ++++++ 2 files changed, 9 insertions(+) diff --git a/__tests__/components/__snapshots__/RedBox.js.snap b/__tests__/components/__snapshots__/RedBox.js.snap index 9e9b42c9..aa6bb2ce 100644 --- a/__tests__/components/__snapshots__/RedBox.js.snap +++ b/__tests__/components/__snapshots__/RedBox.js.snap @@ -2,6 +2,7 @@ exports[` renders simple errors 1`] = ` renders simple errors 1`] = ` renders string errors 1`] = ` name defaults to View 1`] = ` `; @@ -9,6 +10,7 @@ exports[` name passes its name 1`] = ` `; @@ -16,6 +18,7 @@ exports[` passes its children 1`] = ` foo @@ -25,6 +28,7 @@ exports[` style accepts a StyleSheet ordinal 1`] = ` style accepts a plain object 1`] = ` style accepts an array of plain objects and/or StyleSheet ordi