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.

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

Remove Emotion and add inline css #127

Merged
merged 12 commits into from
May 15, 2020
Merged

Remove Emotion and add inline css #127

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d4687c9
Remove Emotion and inline css
stefanoruth May 12, 2020
940f180
Remove console.log
stefanoruth May 12, 2020
7dc8f32
Remove style & css loader
stefanoruth May 12, 2020
82d06ca
Make sure custom classes is applied last
stefanoruth May 12, 2020
890a2ab
Remove the injectStyle function from node_modules
stefanoruth May 13, 2020
76f50ce
Updated webpack config so we dont need to edit the example
stefanoruth May 13, 2020
fa582ed
Move css to head
stefanoruth May 14, 2020
87ec3a0
Added Option B, with prop and copy css
stefanoruth May 14, 2020
dd62e97
Merge branch 'master' into removal-of-emotion
ValentinH May 14, 2020
5625a9d
Rename prop + add prop documentation
stefanoruth May 15, 2020
258387f
Change name of props disableAutomaticStylesInjection
stefanoruth May 15, 2020
43c841d
Update README.md
ValentinH May 15, 2020
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
12 changes: 8 additions & 4 deletions scripts/copy-build-files.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import path from 'path'
import fse from 'fs-extra'

async function copyFile(file) {
const buildPath = path.resolve(__dirname, '../dist/', path.basename(file))
await fse.copy(file, buildPath)
console.log(`Copied ${file} to ${buildPath}`)
const buildPath = path.resolve(__dirname, '../dist/', path.basename(file.to || file.from))
await fse.copy(file.from, buildPath)
console.log(`Copied ${file.from} to ${buildPath}`)
}

async function createPackageFile() {
Expand Down Expand Up @@ -34,7 +34,11 @@ async function createPackageFile() {
}

async function run() {
await Promise.all(['./README.md'].map(file => copyFile(file)))
await Promise.all(
[{ from: './README.md' }, { from: './src/styles.css', to: 'react-easy-crop.css' }].map(file =>
copyFile(file)
)
)
await createPackageFile()
}

Expand Down
11 changes: 7 additions & 4 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ type Props = {
restrictPosition: boolean
initialCroppedAreaPixels?: Area
mediaProps: React.ImgHTMLAttributes<HTMLElement> | React.VideoHTMLAttributes<HTMLElement>
disableDefaultStyles?: boolean
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would suggest: disableAutomaticFileInjection

}

type State = {
Expand Down Expand Up @@ -101,10 +102,12 @@ class Cropper extends React.Component<Props, State> {
this.containerRef.addEventListener('gesturechange', this.preventZoomSafari)
}

this.styleRef = document.createElement('style')
this.styleRef.setAttribute('type', 'text/css')
this.styleRef.innerHTML = cssStyles
document.head.appendChild(this.styleRef)
if (!this.props.disableDefaultStyles) {
this.styleRef = document.createElement('style')
this.styleRef.setAttribute('type', 'text/css')
this.styleRef.innerHTML = cssStyles
document.head.appendChild(this.styleRef)
}

// when rendered via SSR, the image can already be loaded and its onLoad callback will never be called
if (this.imageRef && this.imageRef.complete) {
Expand Down