Single mode for particular dropdown

[abhijeet3112]

Discussed in https://github.com/xrutayisire/react-js-cron/discussions/34

^{Originally posted by **abhijeet3112** September 3, 2022} Is there any functionality we have that supports setting the single dropdown selection for minutes dropdown while keeping other dropdowns with multi select option?

[mpycio]

hi @abhijeet3112 Check my fork: https://github.com/mpycio/react-js-cron.git I've extended this awesome component by extra prop:

componentProps={{
      minute: {
        unitFilter: ({ value, label }) => parseInt(value) % 5 == 0,
        mode: "single",
        allowClear: false,
      },
      hour: {
        unitFilter: ({ value, label }) => !["22", "23"].includes(value),
        mode: "single",
        allowClear: false,
      },
}}

• it allows you to filter options for individual fields (I needed to limit minutes to allow selecting only 5/10/15,
• allows you to configure clear button on each component
• allows you to set a single/multiple mode on each component

@xrutayisire If you accept PRs and this this is useful extension I can clean that code a bit and create a PR, we could discuss possibility of merging that if you want. There's already 55 forks no need for another.

[xrutayisire]

Hello,

Definitely ok for PRs! Open source projects are here for that! More than happy to discuss your work :)

[prajwal-kulkarni]

Hello @mpycio @xrutayisire, is this PR merged? Is there anyway I can use mode on individual time units (hours, minutes etc)? Kindly help.

[xrutayisire]

Hey,

I don't think I received a PR for that at the end. Maybe @mpycio you could open one with your work?

[prajwal-kulkarni]

Hey @mpycio, could you kindly open a PR for the same? If they are busy or currently unable to raise a PR for whatsoever reason, I can create a PR for the same giving them the due credits. Let me know if that works @xrutayisire?

[xrutayisire]

Sure no problem for me 🙂

[mpycio]

Hi, I think I stopped when I encountered some ant version conflicts and did not have time to resolve them. I've now rebased my fork from the @xrutayisire master and created PR. There's some cleanup to be done and I haven't tested it yet after rebase.

[xrutayisire]

@prajwal-kulkarni please take a look to see if it would be good for you.

If @prajwal-kulkarni you can finish the PR it would be perfect, and I would approve it ASAP.

If you want me to finish it, I can find some time to do it, but it would be next week 😕

[xrutayisire]

Thank you so much @mpycio !

[prajwal-kulkarni]

Hey @xrutayisire Sure, I can co-author @mpycio's PR to make the necessary changes(if any), code cleanup and dev-test it. I will start working on it today, and expecting it to complete by this weekend.

[prajwalkulkarni]

Hello @xrutayisire I've created a new PR #58 which is worked on top of @mpycio's PR with some refactoring, code cleanup, and added some new test cases. Since I couldn't directly add commits to their PR, I had to create a new PR, however, both of our commits are present in the PR. I've dev-tested the changes and also all the formatting/linting and test cases are passing. I kindly request you to review the PR.

[xrutayisire]

Hey, Thank you very much both of you, I'm not home at the moment. I will try to get that done this week-end 🙂 If everything looks good or close enough, I will merge, do some changes if necessary and release a new version directly. 🚀

[prajwal-kulkarni]

Sure thank you, it'd be very helpful if you can release the new version at the earliest, as we're currently facing a blocker and need to progress ahead. Looking forward to the new release.

[xrutayisire]

Sure, I will do my best.

I need to rework a bit the PR to make it really extendable and generic. It's not that much work, but I think I could be finished by the end of Monday or Tuesday.

Stay tuned 🚀

[xrutayisire]

Hey, I worked tonight and at the end it was necessary for me to create something from scratch. The goal is to have some generic and not specific for one use case.

In my commit, I create a dropdownsConfig prop for the Cron component. With that, you can override every property that currently exist that apply to a specific dropdown.

I then added allowClear as a global prop and so as a dropdownsConfig prop too. I finally added filterOption as a dropdownsConfig prop only since i'ts specific to each dropdown. I inspired myself from antd for naming and tried to be more generic compare to what you did.

I'm thankful for the two PRs you created, but it was not going in the direction I think this library should go to answer future needs. Anyway, at the end the result is here, and you will be able to configure each dropdown as you want 🙂

Please tell me @mpycio and @prajwalkulkarni if the commit I did answer your needs? You can test it here with storybook, there is a new Story for the dropdownsConfig prop. If yes, I will create a new minor release.

Here is what the new prop looks like:

  /**
   * Define a configuration that is used for each dropdown specifically.
   * Configuring a dropdown will override any global configuration for the same property.
   *
   * Configurations available:
   *
   * // See global configuration
   * // For 'months' and 'week-days'
   * humanizeLabels?: boolean
   *
   * // See global configuration
   * // For 'months' and 'week-days'
   * humanizeValue?: boolean
   *
   * // See global configuration
   * // For 'month-days', 'hours' and 'minutes'
   * leadingZero?: boolean
   *
   * // See global configuration
   * For 'period', 'months', 'month-days', 'week-days', 'hours' and 'minutes'
   * disabled?: boolean
   *
   * // See global configuration
   * For 'period', 'months', 'month-days', 'week-days', 'hours' and 'minutes'
   * readOnly?: boolean
   *
   * // See global configuration
   * // For 'period', 'months', 'month-days', 'week-days', 'hours' and 'minutes'
   * allowClear?: boolean
   *
   * // See global configuration
   * // For 'months', 'month-days', 'week-days', 'hours' and 'minutes'
   * periodicityOnDoubleClick?: boolean
   *
   * // See global configuration
   * // For 'months', 'month-days', 'week-days', 'hours' and 'minutes'
   * mode?: Mode
   *
   * // The function will receive one argument, an object with value and label.
   * // If the function returns true, the option will be included in the filtered set.
   * // Otherwise, it will be excluded.
   * // For 'months', 'month-days', 'week-days', 'hours' and 'minutes'
   * filterOption?: FilterOption
   *
   * Default: undefined
   */
  dropdownsConfig?: {
    'period'?: {
      disabled?: boolean
      readOnly?: boolean
      allowClear?: boolean
    }
    'months'?: {
      humanizeLabels?: boolean
      humanizeValue?: boolean
      disabled?: boolean
      readOnly?: boolean
      allowClear?: boolean
      periodicityOnDoubleClick?: boolean
      mode?: 'multiple' | 'single'
      filterOption?: ({
          value,
          label,
        }: {
          value: string
          label: string
        }) => boolean
    }
    'month-days'?: {
      leadingZero?: boolean
      disabled?: boolean
      readOnly?: boolean
      allowClear?: boolean
      periodicityOnDoubleClick?: boolean
      mode?: 'multiple' | 'single'
      filterOption?: ({
          value,
          label,
        }: {
          value: string
          label: string
        }) => boolean
    }
    'week-days'?: {
      humanizeLabels?: boolean
      humanizeValue?: boolean
      disabled?: boolean
      readOnly?: boolean
      allowClear?: boolean
      periodicityOnDoubleClick?: boolean
      mode?: 'multiple' | 'single'
      filterOption?: ({
          value,
          label,
        }: {
          value: string
          label: string
        }) => boolean
    }
    'hours'?: {
      leadingZero?: boolean
      disabled?: boolean
      readOnly?: boolean
      allowClear?: boolean
      periodicityOnDoubleClick?: boolean
      mode?: 'multiple' | 'single'
      filterOption?: ({
          value,
          label,
        }: {
          value: string
          label: string
        }) => boolean
    }
    'minutes'?: {
      leadingZero?: boolean
      disabled?: boolean
      readOnly?: boolean
      allowClear?: boolean
      periodicityOnDoubleClick?: boolean
      mode?: 'multiple' | 'single'
      filterOption?: ({
          value,
          label,
        }: {
          value: string
          label: string
        }) => boolean
    }
  }

[prajwal-kulkarni]

Hey @xrutayisire , yes this looks good and fulfils my requirement, could you kindly release a minor version for the same?

[xrutayisire]

Great 👍 I will do that now 🚀

[xrutayisire]

Release v4.1.0 done 🚀

Thank you two for this discussion! Don't hesitate to comment here if there is a problem with the release 👍