-
Notifications
You must be signed in to change notification settings - Fork 819
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add possibility to add multiple shadows and shadow spread #277
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PR! Sorry, it took so long. I have a couple of notes, happy to discuss them
@@ -18,6 +19,11 @@ const propTypes = { | |||
resizingConstraint: PropTypes.shape({ | |||
...ResizingConstraintPropTypes, | |||
}), | |||
shadowGroup: PropTypes.arrayOf( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's just call it shadows
?
import PropTypes from 'prop-types'; | ||
|
||
module.exports = { | ||
shadowColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should add shadowInner
to support multiple inner shadows as well
@@ -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'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
used anywhere?
if (props.shadowGroup) { | ||
const shadows = []; | ||
props.shadowGroup.map(shadowStyle => | ||
shadows.push(makeShadow(shadowStyle)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's push to innerShadows
as well if shadowStyle.shadowInner
is true
shadows.push(makeShadow(shadowStyle)) | ||
); | ||
content.style.shadows = shadows; | ||
} else if (hasAnyDefined(style, SHADOW_STYLES)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
instead of an else if
we should probably concatenate the shadow defined in style
if there is one
@@ -73,6 +73,8 @@ export type ViewStyle = { | |||
shadowOffset: { width: number, height: number }, | |||
shadowOpacity: number, | |||
shadowRadius: number, | |||
shadowSpread: number, | |||
shadowInner: "innerShadow" | "shadow", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this should be a boolean
.
And we could probably reuse the SketchShadow
type as well (type ViewStyle = {...} & SketchShadow
)
#358 fix conflicts and @mathieudutour requested changes. Thank you @ludwigfrank |
fixed in #358 |
As discussed in #161 this would add the shadowGroup prop to View, allowing multiple shadows to be added.
P.S. I'm new to working on big projects like this. I would be very grateful for any feedback. Thanks for opening this project to the community.