Replace Respective Image using Custom Component #20

jasimawan · 2021-02-09T07:32:27Z

I added four new props in the library in CollageImage.js and DynamicCollage.js. This functionality is available only for Dynamic Colleges as StaticCollage doesn't need it. The four new props is:

**- onEditButtonPress: PropTypes.func

EditButtonComponent: PropTypes.func
editButtonPosition: PropTypes.string
isEditButtonVisible: PropTypes.bool**

onEditButtonPress has a special return statement and it returns matrix used in the collage and index of the picture to be replaced. onEditButtonPress={(matrix, index) => {}} I am attaching the code for onEditButtonPress if anyone will face difficulty to update the state of image in the list.

onEditButtonPress={(m, i) => {
            ImagePicker.openPicker({
              multiple: false,
              mediaType: "photo",
            }).then((rep: any) => {
              if (rep.path && rep.path != "") {
                let list = [...images]
                let t = LayoutData[images.length][index].matrix.filter(
                  (v, index, self) => index < m,
                )
                let s = 0
                if (t.length > 0) {
                  s = t.reduce((a, b) => a + b)
                }
                list[s + i] = rep.path // new list of images with replaced respective image
                this.setSate({ images: list })  
                      // update the state of your images data with new list using class based components
                   
                //  OR
                
                setImages(list) // update the state of your images data with new list using hooks
              }
            })
          }

EditButtonComponent here you can add your custom component or image or icon or anything you want to be displayed on the image. You can style your component as you like. But don't use Button or TouchableOpacity or something like that which have onPress Prop.

editButtonPosition this prop is used to set the alignment of EditButtonComponent. I provided the custom styles for this purpose: top-left | top-right | bottom-left | bottom-right. This prop is mandatory.

isEditButtonVisible in case you don't want to use replace image functionality set it to false. OR If user wants to save his collage image via ViewShot library then you can firstly you can set it to true then when viewshot has been taken change its state to false. So that this button doesn't captured with the collage.

If you want to update anything in this PR. Let me know and i will update it accordingly.
Thanks.

harbolaez · 2021-02-09T08:14:32Z

Hey, @jasimawan thank you for this great! Wanna ask about replacing the image, it seems that you're setting the whole state of images, but this will not re-rerender the child component DynamicCollage? or I'm missing something? I was thinking that you have 3 images and want to replace one, the whole state would change and the state of the other two would get lost?

jasimawan · 2021-02-09T08:26:36Z

Hi, @harbolaez thank you for the kind response. No it will only change the image we want to replace, the other images in the list will remain the same. You can see in the example code of onEditButtonPress. I made a copy of my images list and replaced the image which i want to be replaced with new image fetched from Image Picker and after that I update the state of images with new updated list. Use my method in your app and you will understand how its updating the the list of images. Thanks.

harbolaez · 2021-02-09T08:58:51Z

Hi, @harbolaez thank you for the kind response. No it will only change the image we want to replace, the other images in the list will remain the same. You can see in the example code of onEditButtonPress. I made a copy of my images list and replaced the image which i want to be replaced with new image fetched from Image Picker and after that I update the state of images with new updated list. Use my method in your app and you will understand how its updating the the list of images. Thanks.

I have attached a gyzao on what I'm experiencing https://gyazo.com/928a6ddfbbfd0807da760421e42aca33 -- let me know what you think?

This is the snippet of code i'm using

const [images, setImages] = useState([
    "https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png",
    "https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png",
  ]);

  console.log("IMAGES UPDATED: ", images);

  return (
    <DynamicCollage
      images={images}
      matrix={[2]}
      isEditButtonVisible={true}
      EditButtonComponent={() => <Text>Edit</Text>}
      editButtonPosition={"top"}
      retainScaleOnSwap={true}
      onEditButtonPress={(m, i) => {
        console.log({ m, i });
        let list = [...images];
        let t = LayoutData[images.length][i].matrix.filter(
          (v, index, self) => index < m,
        );
        let s = 0;
        if (t.length > 0) {
          s = t.reduce((a, b) => a + b);
        }
        list[s + i] =
          "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d";
        setImages(list);
      }}
      width={measurements.portrait}
      height={measurements.landscape}
      direction="column"
    />
  );```

jasimawan · 2021-02-09T09:25:21Z

@harbolaez I checked your code and the url you are replacing your image with is not rendering correctly. Test it on some other images url. Secondly there is a problem with your images hook as its not updating the render function. Check your state as well.

lukebrandonfarrell · 2021-02-09T11:07:42Z

@jasimawan Thanks for the PR! Appreciate the excitement around this library :) Could you let me know your prettier configuration? then I can push an update on Master and prettify the codebase so we can see more clearly the changes you made.

Also, this code here for updating is crazy 😆:

let list = [...images]
let t = LayoutData[images.length][index].matrix.filter(
  (v, index, self) => index < m,
)
let s = 0
if (t.length > 0) {
  s = t.reduce((a, b) => a + b)
}
list[s + i] = rep.path // new list of images with replaced respective image

I wonder if we should add in a replace image API i.e. (I can push this one as a separate PR)

collageRef.replaceImage(image, m, i)

What do you think?

jasimawan · 2021-02-09T12:08:30Z

Yes we can do that as well and I think your suggestion is better than my way of updating images. Glad you respond with a positive feedback and i will definitely enhance it using your suggestion and I will try to implement it this way. And if I feel to be stuck anywhere I will tell you so that you can help me in this regard.
Thanks.
@lukebrandonfarrell

lukebrandonfarrell · 2021-02-09T16:32:49Z

@jasimawan I have prettified the code-base, see: 20e1bb0

Would you be able to rebase so I can see your changes clearly in this PR?

jasimawan · 2021-02-10T05:04:16Z

@lukebrandonfarrell The changes I made you can see them in CollageImage file and DynamicCollage file. I am attaching the screenshot with it so that you can see it without facing any difficulty. I rebased the code btw.

CollageImage.js

DynamicCollage.js

lukebrandonfarrell · 2021-02-10T08:21:58Z

Thanks @jasimawan ! Can see the changes much more clearly now :) Looks good, will test this on device this evening, then happy to merge and publish

jasimawan · 2021-02-10T08:31:02Z

Thanks @lukebrandonfarrell for the kind response and to give me the opportunity to work on this Repo. Waiting for your next response.

lukebrandonfarrell

Nice work on this! Just tested it and looks awesome :) A left a few comments, but after that I am happy to merge and push this as 3.3.0. Thanks again for the PR

lukebrandonfarrell · 2021-02-10T10:06:13Z

src/DynamicCollage.js

@@ -339,6 +343,10 @@ DynamicCollage.propTypes = {
  retainScaleOnSwap: PropTypes.bool,
  longPressDelay: PropTypes.number,
  longPressSensitivity: PropTypes.number, // 1 - 20 - How sensitive is the long press?
+  onEditButtonPress: PropTypes.func,
+  EditButtonComponent: PropTypes.func,
+  editButtonPosition: PropTypes.string,


Could we change the prop type to an enum which accepts oneOf: "bottom-right", "bottom-left", "top-right" and "top-left" ?

Yes we can do that, I start working on that and will update the PR. @lukebrandonfarrell

Added enum types in the library and if someone will not enter the right enum type, the app will not crash and the the button will be aligned at top-left by default. @lukebrandonfarrell
Updating the readme with this change as well and committing.

lukebrandonfarrell · 2021-02-10T10:08:08Z

src/CollageImage.js

+            onPress={this.props.onEditButtonPress}
+            style={{
+              position: "absolute",
+              margin: 20,


Could we make the a variable called editButtonIndent with a default value of 20? (this will allow people to control the button indentation) i.e. margin: this.props.editButtonIndent

Yes, that would be best if we gave an extra option to the developer. Working on this suggestion. @lukebrandonfarrell

@lukebrandonfarrell I added the editButtonIntent prop with default value of 20. Updating the pull request.

lukebrandonfarrell · 2021-02-10T10:19:57Z

Oh also @jasimawan if you could update the documentation README.md with these features, that would be of great help! :) Working on the replaceImage API now

jasimawan · 2021-02-10T10:36:50Z

I will update the README.md file by tomorrow. @lukebrandonfarrell
Thanks for accepting my PR.

lukebrandonfarrell · 2021-02-10T11:35:40Z

@all-contributors please add @jasimawan for code and documentation

allcontributors · 2021-02-10T11:35:48Z

@lukebrandonfarrell

I've put up a pull request to add @jasimawan! 🎉

jasimawan · 2021-02-11T06:37:06Z

Updated the pull request with all the suggestions and enhancements. Updated the README.md file as well with the latest changes. Requested to review the changes. Kindly check it. @lukebrandonfarrell

lukebrandonfarrell

Looks good to me !

replace image funtionality with custom replace component

c13b9e7

lukebrandonfarrell added the enhancement New feature or request label Feb 9, 2021

lukebrandonfarrell modified the milestone: Parity with Layout (Instagram) Feb 9, 2021

lukebrandonfarrell linked an issue Feb 9, 2021 that may be closed by this pull request

Replace image should be incorporated. #15

Closed

Merge branch 'master' into master

232b726

lukebrandonfarrell requested changes Feb 10, 2021

View reviewed changes

allcontributors bot mentioned this pull request Feb 10, 2021

docs: add jasimawan as a contributor #24

Merged

jasimawan and others added 4 commits February 11, 2021 10:42

Update Readme file

7a7b6ff

updated readme

9315ffb

edit button intent added

60e7836

edit button intent and editButtonPostion enum conversion

6b7b5c4

jasimawan requested a review from lukebrandonfarrell February 11, 2021 06:35

lukebrandonfarrell approved these changes Feb 11, 2021

View reviewed changes

lukebrandonfarrell merged commit f40833d into Qeepsake:master Feb 11, 2021

lukebrandonfarrell mentioned this pull request Feb 12, 2021

Adding image onFocus and allowing image container style props for DynamicCollage #21

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace Respective Image using Custom Component #20

Replace Respective Image using Custom Component #20

jasimawan commented Feb 9, 2021 •

edited

Loading

harbolaez commented Feb 9, 2021

jasimawan commented Feb 9, 2021

harbolaez commented Feb 9, 2021 •

edited

Loading

jasimawan commented Feb 9, 2021

lukebrandonfarrell commented Feb 9, 2021 •

edited

Loading

jasimawan commented Feb 9, 2021

lukebrandonfarrell commented Feb 9, 2021

jasimawan commented Feb 10, 2021

lukebrandonfarrell commented Feb 10, 2021

jasimawan commented Feb 10, 2021

lukebrandonfarrell left a comment

lukebrandonfarrell Feb 10, 2021

jasimawan Feb 10, 2021

jasimawan Feb 11, 2021

lukebrandonfarrell Feb 10, 2021 •

edited

Loading

jasimawan Feb 10, 2021

jasimawan Feb 11, 2021

lukebrandonfarrell commented Feb 10, 2021

jasimawan commented Feb 10, 2021

lukebrandonfarrell commented Feb 10, 2021

allcontributors bot commented Feb 10, 2021

jasimawan commented Feb 11, 2021

lukebrandonfarrell left a comment

Replace Respective Image using Custom Component #20

Replace Respective Image using Custom Component #20

Conversation

jasimawan commented Feb 9, 2021 • edited Loading

harbolaez commented Feb 9, 2021

jasimawan commented Feb 9, 2021

harbolaez commented Feb 9, 2021 • edited Loading

jasimawan commented Feb 9, 2021

lukebrandonfarrell commented Feb 9, 2021 • edited Loading

jasimawan commented Feb 9, 2021

lukebrandonfarrell commented Feb 9, 2021

jasimawan commented Feb 10, 2021

lukebrandonfarrell commented Feb 10, 2021

jasimawan commented Feb 10, 2021

lukebrandonfarrell left a comment

Choose a reason for hiding this comment

lukebrandonfarrell Feb 10, 2021

Choose a reason for hiding this comment

jasimawan Feb 10, 2021

Choose a reason for hiding this comment

jasimawan Feb 11, 2021

Choose a reason for hiding this comment

lukebrandonfarrell Feb 10, 2021 • edited Loading

Choose a reason for hiding this comment

jasimawan Feb 10, 2021

Choose a reason for hiding this comment

jasimawan Feb 11, 2021

Choose a reason for hiding this comment

lukebrandonfarrell commented Feb 10, 2021

jasimawan commented Feb 10, 2021

lukebrandonfarrell commented Feb 10, 2021

allcontributors bot commented Feb 10, 2021

jasimawan commented Feb 11, 2021

lukebrandonfarrell left a comment

Choose a reason for hiding this comment

jasimawan commented Feb 9, 2021 •

edited

Loading

harbolaez commented Feb 9, 2021 •

edited

Loading

lukebrandonfarrell commented Feb 9, 2021 •

edited

Loading

lukebrandonfarrell Feb 10, 2021 •

edited

Loading