Skip to content
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

Closed

Conversation

ludwigfrank
Copy link

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.

Copy link
Collaborator

@mathieudutour mathieudutour left a 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(
Copy link
Collaborator

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]),
Copy link
Collaborator

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';
Copy link
Collaborator

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))
Copy link
Collaborator

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)) {
Copy link
Collaborator

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",
Copy link
Collaborator

@mathieudutour mathieudutour Jun 3, 2018

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)

This was referenced Jun 11, 2018
@thierryc
Copy link
Contributor

thierryc commented Jun 11, 2018

#358 fix conflicts and @mathieudutour requested changes.

Thank you @ludwigfrank

@mathieudutour
Copy link
Collaborator

fixed in #358

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants