Skip to content

Commit

Permalink
Return the imageRestriction prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@Norserium
Norserium committed Oct 1, 2022
1 parent 4a889cf commit ff1b396
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 31 deletions.
43 changes: 22 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,30 +66,31 @@ To change the cropper's main color you should redefine `color` property for the

## Cropper

| Prop | Type | Description | Default
| ------------------------- | ------------------------- | --------------------------------------------------------------------------- | ---------------
| src | `string` | The cropping image (link / base64) |
| stencilType | `'circle'`, `'rectangle'` | The type of stencil | `'rectangle'`
| stencilComponent | `Component` | The stencil component | `RectangleStencil`
| stencilProps | `object` | The props for the stencil component | `{}`
| className | `string` | The optional class for the root cropper block |
| imageClassName | `string` | The optional class for the cropping image |
| boundaryClassName | `string` | The optional class for the area. |
| backgroundClassName | `string` | The optional class for the background under the image |
| transitions | `boolean`, `object` | Enable / disable auto zoom | `false`
| canvas | `boolean` | The flag that indicates if canvas should be used | `true`
| minWidth | `number` | The minimum width of the stencil (percents) |
| minHeight | `number` | The minimum height of the stencil (percents) |
| maxWidth | `number` | The maximum width of the stencil (percents) |
| maxHeight | `number` | The maximum height of the stencil (percents) |
| checkOrientation | `boolean` | Check if EXIF orientation should be checked | `true`
| Prop | Type | Description | Default
| ------------------------- |---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------| ---------------
| src | `string` | The cropping image (link / base64) |
| stencilType | `'circle'`, `'rectangle'` | The type of stencil | `'rectangle'`
| stencilComponent | `Component` | The stencil component | `RectangleStencil`
| stencilProps | `object` | The props for the stencil component | `{}`
| className | `string` | The optional class for the root cropper block |
| imageClassName | `string` | The optional class for the cropping image |
| boundaryClassName | `string` | The optional class for the area. |
| backgroundClassName | `string` | The optional class for the background under the image |
| transitions | `boolean`, `object` | Enable / disable auto zoom | `false`
| canvas | `boolean` | The flag that indicates if canvas should be used | `true`
| minWidth | `number` | The minimum width of the stencil (percents) |
| minHeight | `number` | The minimum height of the stencil (percents) |
| maxWidth | `number` | The maximum width of the stencil (percents) |
| maxHeight | `number` | The maximum height of the stencil (percents) |
| checkOrientation | `boolean` | Check if EXIF orientation should be checked | `true`
| resizeImage | `boolean`, `object` | The options for the image resizing ([details](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper#resizeimage)) | `true`
| moveImage | `boolean`, `object` | The options for the image moving ([details](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper#moveimage)) | `true`
| defaultSize | `object`, `Function` | The function that returns the default size of the stencil or object |
| defaultPosition | `object`, `Function` | The function that returns the default position of the stencil or object |
| moveImage | `boolean`, `object` | The options for the image moving ([details](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper#moveimage)) | `true`
| imageRestriction | `string` | Set restrictions for image position ('stencil', 'none') | `'stencil'`
| defaultSize | `object`, `Function` | The function that returns the default size of the stencil or object |
| defaultPosition | `object`, `Function` | The function that returns the default position of the stencil or object |

See [the documentation](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper) for more props and details.
Notice, in this cropper props `transitions`, `priority`, `imageRestrictions` and `stencilSize` are not available.
Notice, in this cropper props `transitions`, `priority`, and `stencilSize` are not available.

## RectangleStencil

Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-mobile-cropper",
"version": "0.7.0",
"version": "0.8.0",
"description": "The react mobile cropper inspired by Android mobile croppers",
"author": "Norserium",
"license": "MIT",
Expand Down Expand Up @@ -80,7 +80,7 @@
],
"dependencies": {
"classnames": "^2.2.6",
"react-advanced-cropper": "~0.12.1",
"react-advanced-cropper": "~0.13.0",
"tslib": "^2.4.0"
},
"sideEffects": false
Expand Down
19 changes: 11 additions & 8 deletions src/components/Cropper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,19 @@ import cn from 'classnames';
import {
Cropper as DefaultCropper,
CropperProps as DefaultCropperProps,
ScaleImageSettings,
CropperRef,
mergeRefs,
ImageRestriction,
mergeRefs,
ScaleImageSettings,
} from 'react-advanced-cropper';
import {
autoZoom,
resizeCoordinates,
transformImage,
fitStencilToImage,
zoomStencil,
defaultSize,
resizeCoordinates,
stencilConstraints,
} from 'advanced-cropper/showcase/telegram';
transformImage,
} from 'advanced-cropper/showcase/mobile';
import { PublicNavigationProps } from './Navigation';
import { CropperWrapper } from './CropperWrapper';

Expand All @@ -27,6 +28,7 @@ export interface CropperProps
resizeImage?: boolean | Omit<ScaleImageSettings, 'adjustStencil'>;
navigation?: boolean;
navigationProps?: PublicNavigationProps;
imageRestriction?: ImageRestriction.none | ImageRestriction.stencil;
}

export const Cropper = forwardRef((props: CropperProps, ref) => {
Expand All @@ -37,6 +39,7 @@ export const Cropper = forwardRef((props: CropperProps, ref) => {
stencilProps = {},
navigationProps = {},
wrapperComponent,
imageRestriction = ImageRestriction.stencil,
...cropperProps
} = props;

Expand All @@ -62,11 +65,11 @@ export const Cropper = forwardRef((props: CropperProps, ref) => {
}}
imageRestriction={ImageRestriction.none}
className={cn('rmc-cropper', className)}
postProcess={autoZoom}
defaultSize={defaultSize}
transformImageAlgorithm={transformImage}
resizeCoordinatesAlgorithm={resizeCoordinates}
transitions={true}
postProcess={imageRestriction === ImageRestriction.none ? zoomStencil : [fitStencilToImage, zoomStencil]}
resizeCoordinatesAlgorithm={imageRestriction === ImageRestriction.none ? undefined : resizeCoordinates}
/>
);
});
Expand Down

0 comments on commit ff1b396

Please sign in to comment.