Skip to content

Fix unrecognized props on DOM elements #17

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.

Sign up for GitHub

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

Open
aautem wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Fix unrecognized props on DOM elements #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1b35708
Remove console.log when cropping image
aautem Jan 26, 2018
aeb2186
Update unrecognized prop on CropMenu component
aautem Jan 26, 2018
08c5777
Update unrecognized prop on History component
aautem Jan 26, 2018
9ec9742
Update README with prop name changes
aautem Jan 26, 2018
9559eda
Update Kitchen Sink with prop name changes
aautem Jan 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,23 +56,23 @@ If `crop` is set to false, then it will not show the crop handles, set `crop` to
## History

History component uses `step` and `length` to determine where user is in history, and looks for children with
`action` prop `back` or `next` - it also uses the `ifEmpty` tag to `disable` or `hide` the button if user is
`action` prop `back` or `next` - it also uses the `ifempty` tag to `disable` or `hide` the button if user is
at beginning or end of history.

```jsx
<History step={this.state.step} length={this.state.thread.length-1}>
<button
action="back"
onClick={this.onUndo}
data-ifEmpty="disable">
data-ifempty="disable">

Undo

</button>
<button
action="forward"
onClick={this.onRedo}
data-ifEmpty="disable">
data-ifempty="disable">

Redo

Expand Down Expand Up @@ -113,21 +113,21 @@ Filepicker can be used to upload files, but not needed, it is used in the kitche

## CropMenu

To add crop functionality, you can create a cropmenu, the buttons can be configured to `showOnlyWhen` a value of `croppingIsOff` or `croppingIsOn`.
To add crop functionality, you can create a cropmenu, the buttons can be configured to `showonlywhen` a value of `croppingIsOff` or `croppingIsOn`.
The CropMenu is entirely optional, and you can create your own composition for the crop menu if you choose.

```jsx
<CropMenu isCropping={crop}>
<button disabled={!hasFile} data-showOnlyWhen='croppingIsOff' onClick={this.onCropStart} data-tipsy="Crop" className="tipsy tipsy--sw">
<button disabled={!hasFile} data-showonlywhen='croppingIsOff' onClick={this.onCropStart} data-tipsy="Crop" className="tipsy tipsy--sw">
<span className="icon icon-crop"/>
</button>
<button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' style={{color: 'cyan'}}>
<button disabled={!hasFile} data-showonlywhen='croppingIsOn' style={{color: 'cyan'}}>
<span className="icon icon-crop"/>
</button>
<button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' onClick={this.onCropConfirm} style={{color: 'green'}} data-tipsy="Confirm" className="tipsy tipsy--sw">
<button disabled={!hasFile} data-showonlywhen='croppingIsOn' onClick={this.onCropConfirm} style={{color: 'green'}} data-tipsy="Confirm" className="tipsy tipsy--sw">
<span className="icon icon-checkmark"/>
</button>
<button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' onClick={this.onCropCancel} style={{color: 'red'}} data-tipsy="Cancel" className="tipsy tipsy--sw">
<button disabled={!hasFile} data-showonlywhen='croppingIsOn' onClick={this.onCropCancel} style={{color: 'red'}} data-tipsy="Cancel" className="tipsy tipsy--sw">
<span className="icon icon-cross"/>
</button>
</CropMenu>
Expand All @@ -148,15 +148,15 @@ The CropMenu is entirely optional, and you can create your own composition for t
<button
action="back"
onClick={this.onUndo}
ifEmpty="disable"
data-ifempty="disable"
data-tipsy="Undo"
className="tipsy tipsy--sw">
<span className="icon icon-undo2"/>
</button>
<button
action="forward"
onClick={this.onRedo}
ifEmpty="disable"
data-ifempty="disable"
data-tipsy="Redo"
className="tipsy tipsy--sw">
<span className="icon icon-redo2"/>
Expand All @@ -169,16 +169,16 @@ The CropMenu is entirely optional, and you can create your own composition for t
<span className="icon icon-redo"/>
</button>
<CropMenu isCropping={crop}>
<button disabled={!hasFile} data-showOnlyWhen='croppingIsOff' onClick={this.onCropStart} data-tipsy="Crop" className="tipsy tipsy--sw">
<button disabled={!hasFile} data-showonlywhen='croppingIsOff' onClick={this.onCropStart} data-tipsy="Crop" className="tipsy tipsy--sw">
<span className="icon icon-crop"/>
</button>
<button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' style={{color: 'cyan'}}>
<button disabled={!hasFile} data-showonlywhen='croppingIsOn' style={{color: 'cyan'}}>
<span className="icon icon-crop"/>
</button>
<button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' onClick={this.onCropConfirm} style={{color: 'green'}} data-tipsy="Confirm" className="tipsy tipsy--sw">
<button disabled={!hasFile} data-showonlywhen='croppingIsOn' onClick={this.onCropConfirm} style={{color: 'green'}} data-tipsy="Confirm" className="tipsy tipsy--sw">
<span className="icon icon-checkmark"/>
</button>
<button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' onClick={this.onCropCancel} style={{color: 'red'}} data-tipsy="Cancel" className="tipsy tipsy--sw">
<button disabled={!hasFile} data-showonlywhen='croppingIsOn' onClick={this.onCropCancel} style={{color: 'red'}} data-tipsy="Cancel" className="tipsy tipsy--sw">
<span className="icon icon-cross"/>
</button>
</CropMenu>
Expand Down
2 changes: 1 addition & 1 deletion src/components/CropMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default ({isCropping, children}) =>
<span>
{
React.Children.map(children, child => {
const showOnlyWhen = child.props['data-showOnlyWhen'];
const showOnlyWhen = child.props['data-showonlywhen'];

if (isCropping && showOnlyWhen === "croppingIsOn") {
return child;
Expand Down
2 changes: 1 addition & 1 deletion src/components/History.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const History = ({
let childNodes = [];

React.Children.forEach(children, child => {
const ifEmpty = child.props['data-ifEmpty'];
const ifEmpty = child.props['data-ifempty'];
const action = child.props.action;
if (action === "back") {

Expand Down
12 changes: 6 additions & 6 deletions src/containers/KitchenSink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,15 +211,15 @@ export default class KitchenSink extends React.Component {
<button
action="back"
onClick={this.onUndo}
data-ifEmpty="disable"
data-ifempty="disable"
data-tipsy="Undo"
className="tipsy tipsy--sw">
<span className="icon icon-undo2"/>
</button>
<button
action="forward"
onClick={this.onRedo}
data-ifEmpty="disable"
data-ifempty="disable"
data-tipsy="Redo"
className="tipsy tipsy--sw">
<span className="icon icon-redo2"/>
Expand All @@ -242,18 +242,18 @@ export default class KitchenSink extends React.Component {
<CropMenu isCropping={crop}>
<button
disabled={!hasFile}
data-showOnlyWhen='croppingIsOff'
data-showonlywhen='croppingIsOff'
onClick={this.onCropStart}
data-tipsy="Crop"
className="tipsy tipsy--sw">
<span className="icon icon-crop"/>
</button>
<button disabled={!hasFile} showOnlyWhen='croppingIsOn' style={{color: 'cyan'}}>
<button disabled={!hasFile} showonlywhen='croppingIsOn' style={{color: 'cyan'}}>
<span className="icon icon-crop"/>
</button>
<button
disabled={!hasFile}
data-showOnlyWhen='croppingIsOn'
data-showonlywhen='croppingIsOn'
onClick={this.onCropConfirm}
style={{color: 'green'}}
data-tipsy="Confirm"
Expand All @@ -262,7 +262,7 @@ export default class KitchenSink extends React.Component {
</button>
<button
disabled={!hasFile}
data-showOnlyWhen='croppingIsOn'
data-showonlywhen='croppingIsOn'
onClick={this.onCropCancel}
style={{color: 'red'}}
data-tipsy="Cancel"
Expand Down
3 changes: 1 addition & 2 deletions src/utils/Transform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export class Transform {
static renderCentered(ctx, image, imgRect, boundRect) {
let scaledRect = Transform.constrainProportions(imgRect, boundRect);
let position = Transform.centerRect(scaledRect, boundRect);

Transform.renderImage(ctx, image, position, scaledRect);
}

Expand Down Expand Up @@ -76,7 +76,6 @@ export class Transform {
* @returns {Promise}
*/
static cropImage(image, cropRect, boundRect, angle) {
console.log('crop image', cropRect, boundRect);
return new Promise((resolve, reject) => {
let scaledCanvas = document.createElement('canvas');
scaledCanvas.width = boundRect.width;
Expand Down