mmazzarolo Github contribution chart
mmazzarolo Github Stats
mmazzarolo Most Used Languages

Activity

04 Oct 2022

Mmazzarolo

Allow to change fade time when dialog container is closed

New prop request

The fade time when dialos container is closed is slow. I would like to change this time but apparently there is no prop for it.

Forked On 04 Oct 2022 at 02:56:46

Mmazzarolo

👋 Hey! The goal of this library is to achieve a native look and feeling. At the current state we're not looking into increasing the customization options. If you think the fade timing doesn't match the native counterpart, feel free to submit a new PR. Thanks!

Commented On 04 Oct 2022 at 02:56:46
Issue Comment

Mmazzarolo

[Unicode Symbols Search] find super script with number input

Extension – Unicode Symbols Search

Author: @mmazzarolo

I would love to be able to get a superscript number by entering something like super 9 -> ⁹

Describe the feature and the current behavior/state. Currently it does not find the superscript item when I enter super 9. I have to type super nine.

It would be easier to use if it could just work with both, the numeric (9) value and the word (9). Same should work for subscript.

Who will benefit with this feature? Anybody using this to get super script numbers or subscript.

Forked On 20 Sep 2022 at 08:17:31

Mmazzarolo

@Sheraff I think so? I think I did find some issues doing that in the past but I don't remember what it was... and things might have changed now 👍

Commented On 20 Sep 2022 at 08:17:31
Issue Comment

Mmazzarolo

[Unicode Symbols Search] Add commonly used names to search

Extension – Unicode Symbols Search

Author: @mmazzarolo

Describe the feature and the current behavior/state. It would be nice to add some "commonly used" names to some characters so they can be easier to find, even if such names aren't in the official char name. For example:

  • ⇧ could be found with the string "shift" (currently, "UPWARDS WHITE ARROW")
  • ⌘ could be found with the string "command" or "cmd" (currently, "PLACE OF INTEREST SIGN")
  • ⌥ could be found with the string "alt" (currently, "OPTION KEY")
  • ⌃ could be found with the string "ctrl" or "control" (currently not in dataset)
  • ⌫ could be found with the string "delete" or "backspace" (currently "ERASE TO THE LEFT")

I'm sure there are other categories of characters that might also have some "common names" that people might report over time.

Who will benefit from this feature?

Any Other info. As a side thing, would this extension still feel nice to use if it switched to the newer Grid layout? Some of the characters are quite small for the list view.

Forked On 19 Sep 2022 at 09:30:14

Mmazzarolo

Hey @Sheraff ! Thanks for the feature request. I'm pretty sure this is the solution you're looking for — Personally, I don't have enough free time to develop it now though, maybe in a month.

As a side thing, would this extension still feel nice to use if it switched to the newer Grid layout? Some of the characters are quite small for the list view.

Yeah, that's a great idea :)

Commented On 19 Sep 2022 at 09:30:14

Mmazzarolo

modal not showing in android

Environment

Platforms

Android

Versions

Description

although if i'm using react-native-community/datetimepicker pacakage n get date picker it does get but there's some issue so i want to us this package instead of using the community one cause it's working fine on android

Reproducible Demo

Forked On 12 Sep 2022 at 08:01:57

Mmazzarolo

We can't help unless you provide all the info asked in the issue template.

Commented On 12 Sep 2022 at 08:01:57

Mmazzarolo

Create README.md

Pushed On 09 Sep 2022 at 06:35:24

Mmazzarolo

Update time picker programmatically

I added a group button on top (customHeaderIOS) of the iOS picker time to have a preset time. For refreshing the modal I am using key props, but it causes re-opening the modal. Is there any other way to update the picker programmatically without re-opening the modal?

File

Forked On 07 Sep 2022 at 01:18:36

Mmazzarolo

Nope, but we're not doing anything fancy with it. If provided, we'll use it here instead of the default datetimepicker component (which is this one). So APIs of the customPickerIOS and https://github.com/react-native-datetimepicker/datetimepicker should match.

Commented On 07 Sep 2022 at 01:18:36

Mmazzarolo

Update time picker programmatically

I added a group button on top (customHeaderIOS) of the iOS picker time to have a preset time. For refreshing the modal I am using key props, but it causes re-opening the modal. Is there any other way to update the picker programmatically without re-opening the modal?

File

Forked On 07 Sep 2022 at 08:29:40

Mmazzarolo

Hey @AliMonam ! Yeah unfortunately this doesn't seem like something we support nor we plan to support at the moment because it would be an ios-specific thing. On Android you can't change the selected date while the picker is open (and I'm not sure if it's possible even on iOS with the library we're using under the hood). Feel free to play with the repo's code and let me know if you're able to make it work :)

Commented On 07 Sep 2022 at 08:29:40

Mmazzarolo

Added Remotebear

Created On 06 Sep 2022 at 04:26:33

Mmazzarolo

Added Remotebear

Added https://remotebear.io/

Pushed On 06 Sep 2022 at 04:26:27

Mmazzarolo

Added Breathly

Created On 06 Sep 2022 at 04:22:48

Mmazzarolo

Added Breathly

Added https://breathly.app/

Pushed On 06 Sep 2022 at 04:22:39

Mmazzarolo

Added Ordinary Puzzles

Created On 06 Sep 2022 at 04:19:41

Mmazzarolo

Added Ordinary Puzzles

Added https://ordinarypuzzles.com/

Pushed On 06 Sep 2022 at 04:19:08

Mmazzarolo

Italia Opensource is a list of open source projects created by Italian companies or developers. The repository intends to give visibility to open source projects and stimulate the community to contribute to growing the ecosystem.

Forked On 06 Sep 2022 at 04:14:40

Mmazzarolo

Fix/ios timepicker default date actually return the launch date

Overview

Issue: #578

When using the time picker using an interval (for example 30 minutes), whenever the user clicks "OK" without changing the date, it return the locally cached time.

Test Plan

Tested on an internal company project on iOS simulator and device. Both worked.

Merged On 06 Sep 2022 at 09:07:45

Mmazzarolo

Thanks for the PR! Unfortunately I this change breaks the case where users change the initial date prop.

Commented On 06 Sep 2022 at 09:07:45

Mmazzarolo

fix: Add customCancelButton and customConfirmButton types (#656)

BREAKING CHANGE: This is a breaking change since it might break your typechecking flow.

Pushed On 06 Sep 2022 at 09:06:28

Mmazzarolo

Adding customCancelButton and customConfirmButton types

Created On 06 Sep 2022 at 09:06:27

Mmazzarolo

Wrong datetime using 24h format... timezone ?

Environment

System: OS: Windows 10 10.0.19044 CPU: (4) x64 Intel(R) Core(TM) i5-7600K CPU @ 3.80GHz Memory: 6.07 GB / 15.96 GB Binaries: Node: 16.14.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.0.2 - D:\laragon\bin\yarn\bin\yarn.CMD npm: 8.15.1 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled AllowAllTrustedApps: Enabled
IDEs: Android Studio: AI-212.5712.43.2112.8609683 Visual Studio: Not Found Languages: Java: javac 16 - C:\Program Files\AdoptOpenJDK\jdk-16.0.0.36-hotspot\bin\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 18.0.0 => 18.0.0 react-native: 0.69.3 => 0.69.3
react-native-windows: Not Found
npmGlobalPackages: react-native: Not Found

Platforms

Android

Versions

  • Android: 12 (emulator), 11 (my real phone)
  • iOS: not tested yet :(
  • react-native-modal-datetime-picker: 13.1.2
  • react-native-community/datetimepicker: 6.3.2
  • react-native: 0.69.3
  • react: 18.0.0

Description

Something is wrong with the timezones when I use the datetime mode with 24h format.

If I select the day 23 at 00:50 hours:

Screenshot_2

The onConfirm() event returns the following date:

Screenshot_1

Thanks you! :)

Forked On 06 Sep 2022 at 09:03:48

Mmazzarolo

:/ not really sure. I would suggest playing with the datetime creation flow locally to determine where the issue is happening. Unfortunately I can't help these days since I'm not using RN anymore.

Commented On 06 Sep 2022 at 09:03:48

Mmazzarolo

Wrong datetime using 24h format... timezone ?

Environment

System: OS: Windows 10 10.0.19044 CPU: (4) x64 Intel(R) Core(TM) i5-7600K CPU @ 3.80GHz Memory: 6.07 GB / 15.96 GB Binaries: Node: 16.14.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.0.2 - D:\laragon\bin\yarn\bin\yarn.CMD npm: 8.15.1 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled AllowAllTrustedApps: Enabled
IDEs: Android Studio: AI-212.5712.43.2112.8609683 Visual Studio: Not Found Languages: Java: javac 16 - C:\Program Files\AdoptOpenJDK\jdk-16.0.0.36-hotspot\bin\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 18.0.0 => 18.0.0 react-native: 0.69.3 => 0.69.3
react-native-windows: Not Found
npmGlobalPackages: react-native: Not Found

Platforms

Android

Versions

  • Android: 12 (emulator), 11 (my real phone)
  • iOS: not tested yet :(
  • react-native-modal-datetime-picker: 13.1.2
  • react-native-community/datetimepicker: 6.3.2
  • react-native: 0.69.3
  • react: 18.0.0

Description

Something is wrong with the timezones when I use the datetime mode with 24h format.

If I select the day 23 at 00:50 hours:

Screenshot_2

The onConfirm() event returns the following date:

Screenshot_1

Thanks you! :)

Forked On 05 Sep 2022 at 07:29:32

Mmazzarolo

👋 Please follow https://github.com/mmazzarolo/react-native-modal-datetime-picker#the-component-is-not-working-as-expected-what-should-i-do

Commented On 05 Sep 2022 at 07:29:32

Mmazzarolo

Adding customCancelButton and customConfirmButton types

Thank you guys for an amazing lib!!

PS: I am re-creating this PR because the I did not have the right email set in my commit, so the commit signature was unverified. Sorry for that!

Overview

The library is missing the CancelButton and ConfirmButton components for the iOS only properties customCancelButtonIOS and customConfirmButtonIOS. I also found a good idea to export their styles, just in case someone (myself included) wants to do some slight changes.

All I mentioned works fine, but whenever you try to import any of these two components or their styles you get some red on your code editor. That's because the declaration file is missing these elements. So all I did was I exported from ìndex.d.ts the CancelButton and ConfirmButton components, told the declaration file the customConfirmButtonIOS and customCancelButtonIOS properties were a React.FunctionComponenet<props> with some extra props. I also exported the style types of both components.

Test Plan

There is not much to do actually, all I did was passing the buttonTextColorIOS property to the custom button I was using. For example:

import ModalDateTimePicker, { CancelButton };

<ModalDateTimePicker
    // ... <normally used props>
    customCancelButtonIOS={(props) => <CancelButton {...props} buttonTextColorIOS="red"  />}
/> 

If you want to change the button styles, you might want to do something like that:

import ModalDateTimePicker, { CancelButton, CancelButtonStylePropTypes, cancelButtonStyles };

const customStyles: CancelButtonStylePropTypes = {
    ...cancelButtonStyles,
    text: {
        ...cancelButtonStyles.text,
        color: 'red',
    },
};

<ModalDateTimePicker
    // ... <normally used props>
    customCancelButtonIOS={(props) => <CancelButton {...props} style={customStyles} />}
/> 

Merged On 02 Sep 2022 at 10:23:11

Mmazzarolo

Changes are looking good to me now! Thanks so much for your PR and the discussion 🙌 I'm planning to merge it as a major change. Could you double-check that it works correctly for you one last time before I release it? Thanks!

Commented On 02 Sep 2022 at 10:23:11
Issue Comment

Mmazzarolo

[Unicode Symbols Search] find super script with number input

Extension – Unicode Symbols Search

Author: @mmazzarolo

I would love to be able to get a superscript number by entering something like super 9 -> ⁹

Describe the feature and the current behavior/state. Currently it does not find the superscript item when I enter super 9. I have to type super nine.

It would be easier to use if it could just work with both, the numeric (9) value and the word (9). Same should work for subscript.

Who will benefit with this feature? Anybody using this to get super script numbers or subscript.

Forked On 01 Sep 2022 at 09:16:19

Mmazzarolo

@mmazzarolo That is even better. How would we go about adding this though?

OK, I started writing something and then I changed my mind 😬

Easiest way to implement this

  • In the generate-dataset.ts script, add a something something like const charCodeToAliases = {"8313": ["superscript 9"]}. This will be the list of aliases we want to apply to the final dataset. I think it might even be better to define it in its own json file.
  • Update mapCharacterToDatasetItem to also add the aliases to the output (if any).
  • In the src/dataset-manager.ts, update the Fuse search to also search in aliases (just add it to the key array).

I think this is the easiest (and most performant) way to implement this.

Drawback of this approach:

  • Adding an alias requires re-running the generate-dataset.ts script.
  • It would be cool if users could add their own alias for a character as a preference, but I think it might be a bit hard to do with the current setup.

Let me know if it makes sense!

Previous idea (just for historical context):

It's been a while since I worked on this extension, but if I recall correctly the idea I had around character aliasing was:

Reason about some of the decisions above:

  • We could also merge the aliases with the dataset values using the generate-dataset.ts script. While more "elegant", I think this is less ergonomic because it requires running that script every time we add new aliases to the repo.
  • There might be a way to use Fuse to also handle the aliases search as well (instead of doing that search manually like I suggested), but we need to ensure we don't low the performance → AT THIS POINT I REALIZED THAT IT DOESN'T SEEM TO BE POSSIBLE TO GRAB CHARS BY ALIASES WITH THIS SETUP UNLESS WE FILTER THE ENTIRE DATASET WITHOUT USING FUZE. /STOP-SCREAMING

Commented On 01 Sep 2022 at 09:16:19
Issue Comment

Mmazzarolo

[Unicode Symbols Search] find super script with number input

Extension – Unicode Symbols Search

Author: @mmazzarolo

I would love to be able to get a superscript number by entering something like super 9 -> ⁹

Describe the feature and the current behavior/state. Currently it does not find the superscript item when I enter super 9. I have to type super nine.

It would be easier to use if it could just work with both, the numeric (9) value and the word (9). Same should work for subscript.

Who will benefit with this feature? Anybody using this to get super script numbers or subscript.

Forked On 01 Sep 2022 at 07:09:30

Mmazzarolo

@lukasoppermann to be honest I think it would be better to start support aliases for such use cases. The name property is a strict mapping to the official unicode character name; if we start editing the some of them just because we don't like them, that might bite us back in the future. Just my 2c!
Would be happy to review and help shipping an aliasing feature btw!

Commented On 01 Sep 2022 at 07:09:30

Mmazzarolo

Adding customCancelButton and customConfirmButton types

Thank you guys for an amazing lib!!

PS: I am re-creating this PR because the I did not have the right email set in my commit, so the commit signature was unverified. Sorry for that!

Overview

The library is missing the CancelButton and ConfirmButton components for the iOS only properties customCancelButtonIOS and customConfirmButtonIOS. I also found a good idea to export their styles, just in case someone (myself included) wants to do some slight changes.

All I mentioned works fine, but whenever you try to import any of these two components or their styles you get some red on your code editor. That's because the declaration file is missing these elements. So all I did was I exported from ìndex.d.ts the CancelButton and ConfirmButton components, told the declaration file the customConfirmButtonIOS and customCancelButtonIOS properties were a React.FunctionComponenet<props> with some extra props. I also exported the style types of both components.

Test Plan

There is not much to do actually, all I did was passing the buttonTextColorIOS property to the custom button I was using. For example:

import ModalDateTimePicker, { CancelButton };

<ModalDateTimePicker
    // ... <normally used props>
    customCancelButtonIOS={(props) => <CancelButton {...props} buttonTextColorIOS="red"  />}
/> 

If you want to change the button styles, you might want to do something like that:

import ModalDateTimePicker, { CancelButton, CancelButtonStylePropTypes, cancelButtonStyles };

const customStyles: CancelButtonStylePropTypes = {
    ...cancelButtonStyles,
    text: {
        ...cancelButtonStyles.text,
        color: 'red',
    },
};

<ModalDateTimePicker
    // ... <normally used props>
    customCancelButtonIOS={(props) => <CancelButton {...props} style={customStyles} />}
/> 

Forked On 30 Aug 2022 at 07:26:58

Mmazzarolo

> I know all of this looks bloat code maybe, but I just wanted to create more styling possibilities (something you could perfectly do in a JS project) for TS developers. That is my second ever contribution to an Open Source project, besides I created this one at the same day I created the first one. No worries! I appreciate the contribution. Let's make sure the issue I'm mentioning is clear so that we can decide how to go forward. P.S.: I'm also not a typing expert, and I didn't create the types of this component 😅 P.P.S.: I'm quite busy lately, so I might be slow to respond in the next days. Sorry.
On 30 Aug 2022 at 07:26:58

Mmazzarolo

Adding customCancelButton and customConfirmButton types

Thank you guys for an amazing lib!!

PS: I am re-creating this PR because the I did not have the right email set in my commit, so the commit signature was unverified. Sorry for that!

Overview

The library is missing the CancelButton and ConfirmButton components for the iOS only properties customCancelButtonIOS and customConfirmButtonIOS. I also found a good idea to export their styles, just in case someone (myself included) wants to do some slight changes.

All I mentioned works fine, but whenever you try to import any of these two components or their styles you get some red on your code editor. That's because the declaration file is missing these elements. So all I did was I exported from ìndex.d.ts the CancelButton and ConfirmButton components, told the declaration file the customConfirmButtonIOS and customCancelButtonIOS properties were a React.FunctionComponenet<props> with some extra props. I also exported the style types of both components.

Test Plan

There is not much to do actually, all I did was passing the buttonTextColorIOS property to the custom button I was using. For example:

import ModalDateTimePicker, { CancelButton };

<ModalDateTimePicker
    // ... <normally used props>
    customCancelButtonIOS={(props) => <CancelButton {...props} buttonTextColorIOS="red"  />}
/> 

If you want to change the button styles, you might want to do something like that:

import ModalDateTimePicker, { CancelButton, CancelButtonStylePropTypes, cancelButtonStyles };

const customStyles: CancelButtonStylePropTypes = {
    ...cancelButtonStyles,
    text: {
        ...cancelButtonStyles.text,
        color: 'red',
    },
};

<ModalDateTimePicker
    // ... <normally used props>
    customCancelButtonIOS={(props) => <CancelButton {...props} style={customStyles} />}
/> 

Merged On 30 Aug 2022 at 07:26:58

Mmazzarolo

Commented On 30 Aug 2022 at 07:26:58

Mmazzarolo

Adding customCancelButton and customConfirmButton types

Thank you guys for an amazing lib!!

PS: I am re-creating this PR because the I did not have the right email set in my commit, so the commit signature was unverified. Sorry for that!

Overview

The library is missing the CancelButton and ConfirmButton components for the iOS only properties customCancelButtonIOS and customConfirmButtonIOS. I also found a good idea to export their styles, just in case someone (myself included) wants to do some slight changes.

All I mentioned works fine, but whenever you try to import any of these two components or their styles you get some red on your code editor. That's because the declaration file is missing these elements. So all I did was I exported from ìndex.d.ts the CancelButton and ConfirmButton components, told the declaration file the customConfirmButtonIOS and customCancelButtonIOS properties were a React.FunctionComponenet<props> with some extra props. I also exported the style types of both components.

Test Plan

There is not much to do actually, all I did was passing the buttonTextColorIOS property to the custom button I was using. For example:

import ModalDateTimePicker, { CancelButton };

<ModalDateTimePicker
    // ... <normally used props>
    customCancelButtonIOS={(props) => <CancelButton {...props} buttonTextColorIOS="red"  />}
/> 

If you want to change the button styles, you might want to do something like that:

import ModalDateTimePicker, { CancelButton, CancelButtonStylePropTypes, cancelButtonStyles };

const customStyles: CancelButtonStylePropTypes = {
    ...cancelButtonStyles,
    text: {
        ...cancelButtonStyles.text,
        color: 'red',
    },
};

<ModalDateTimePicker
    // ... <normally used props>
    customCancelButtonIOS={(props) => <CancelButton {...props} style={customStyles} />}
/> 

Forked On 30 Aug 2022 at 07:16:34

Mmazzarolo

Thanks for your detailed reply! Before I start answering each bullet point separately, I wanted to make something clear. The main discussion point here is that **I think** (and, again, I'm not sure about this, maybe I'm just missing something) we shouldn't mark the custom button styles as strict as we're doing in this PR. With the current PR approach, [we're basically saying that the custom button components styles can only be of the type `ConfirmButtonStylePropTypes`/`CancelButtonStylePropTypes`](https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/91bc2d2694c91e52e6d072972356598787465e48/typings/index.d.ts#L124). Which is not true. If you're using a custom button component, this library doesn't care about what style you pass to it. Here's how it works for the confirm button, for example: 1. If you provide a custom component, [this library won't care about the internal confirm button](https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/064ccdfc9466d79fa225572d69612c7f0e106a30/src/DateTimePickerModal.ios.js#L137) 2. It will just render the [custom component as-it-is, without passing any style to it, just a few props](https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/064ccdfc9466d79fa225572d69612c7f0e106a30/src/DateTimePickerModal.ios.js#L181-L187). Something like the following should be perfectly valid (just an example): ```ts import DateTimePicker from 'react-native-modal-datetime-picker'; import { View, ViewStyle } from "react-native"; function MyCustomButton ({ style }: { style: ViewStyle }) { return <View style={style} /> } // ... and then return ( <RNModalDateTimePicker customCancelButtonIOS={<MyCustomButton />} /> ); ``` But with these PR changes it would break (I think so, right?) because we're saying that `customCancelButtonIOS` accepts only a component with a `style` prop that matches `ConfirmButtonStylePropTypes`... while in our example `MyCustomButton` has a `style` props that is just a `ViewStyle`.
On 30 Aug 2022 at 07:16:34

Mmazzarolo

Adding customCancelButton and customConfirmButton types

Thank you guys for an amazing lib!!

PS: I am re-creating this PR because the I did not have the right email set in my commit, so the commit signature was unverified. Sorry for that!

Overview

The library is missing the CancelButton and ConfirmButton components for the iOS only properties customCancelButtonIOS and customConfirmButtonIOS. I also found a good idea to export their styles, just in case someone (myself included) wants to do some slight changes.

All I mentioned works fine, but whenever you try to import any of these two components or their styles you get some red on your code editor. That's because the declaration file is missing these elements. So all I did was I exported from ìndex.d.ts the CancelButton and ConfirmButton components, told the declaration file the customConfirmButtonIOS and customCancelButtonIOS properties were a React.FunctionComponenet<props> with some extra props. I also exported the style types of both components.

Test Plan

There is not much to do actually, all I did was passing the buttonTextColorIOS property to the custom button I was using. For example:

import ModalDateTimePicker, { CancelButton };

<ModalDateTimePicker
    // ... <normally used props>
    customCancelButtonIOS={(props) => <CancelButton {...props} buttonTextColorIOS="red"  />}
/> 

If you want to change the button styles, you might want to do something like that:

import ModalDateTimePicker, { CancelButton, CancelButtonStylePropTypes, cancelButtonStyles };

const customStyles: CancelButtonStylePropTypes = {
    ...cancelButtonStyles,
    text: {
        ...cancelButtonStyles.text,
        color: 'red',
    },
};

<ModalDateTimePicker
    // ... <normally used props>
    customCancelButtonIOS={(props) => <CancelButton {...props} style={customStyles} />}
/> 

Merged On 30 Aug 2022 at 07:16:34

Mmazzarolo

Commented On 30 Aug 2022 at 07:16:34