afialapis / reactstrap-date-picker

A Reactstrap based, zero dependencies, date picker
MIT License
12 stars 6 forks source link

No InputGroupAddon import in npm package #18

Closed wholegroup closed 2 years ago

wholegroup commented 2 years ago

I see using InputGroupAddon in the source code https://github.com/afialapis/reactstrap-date-picker/blob/050c144f542a2e524596efe68f58d6bfb605dbca/src/DatePicker.js#L500-L509

but I can't see InputGroupAddon import in npm package node_modules/reactstrap-date-picker/dist/reactstrap-date-picker.es.js

import React from 'react';
import { Button, InputGroup, Input, Popover, PopoverHeader, PopoverBody, InputGroupText } from 'reactstrap';

[more code...]

/*#__PURE__*/React.createElement("input", {
      ref: this.hiddenInputRef,
      type: "hidden",
      className: "rdp-hidden",
      id: this.props.id != undefined ? this.props.id : "rdp-hidden-".concat(this.idSuffix),
      name: this.props.name,
      value: this.state.value || '',
      "data-formattedvalue": this.state.value ? this.state.inputValue : ''
    }), this.props.showClearButton && !this.props.customControl && /*#__PURE__*/React.createElement(InputGroupText, {
      onClick: () => this.props.disabled ? null : this.clear(),
      style: {
        opacity: this.state.inputValue && !this.props.disabled ? 1 : 0.5,
        cursor: this.state.inputValue && !this.props.disabled ? 'pointer' : 'not-allowed'
      },
      className: "rdp-addon"
    }, this.props.clearButtonElement), this.props.children));
  }

In fact reactstrap-date-picker v0.0.15 renders InputGroupText without InputGroupAddon

Well, as a result current rendering is wrong
Example here https://codesandbox.io/s/dazzling-lalande-nz80bf

wholegroup commented 2 years ago

@afialapis Could you take a look pls Thanks

afialapis commented 2 years ago

Hi, just published 0.0.16. Although no actual changes were made. But as I had a mess with git, and just to be sure, made a new version.

Anyway, I think you need to review the dependencies' versions. So:

reactstrap-date-picker 0.0.16: uses reactstrap 9.0.1 (InputGroupText), and needs bootstrap 5.1.3 reactstrap-date-picker 0.0.12: uses reactstrap 8.5.1 (InputGroupAddon), and needs bootstrap 4.5.2

The problem you see is because the class attributes change for those elements (input-group-append => input-group-text), and so they need their respective bootstrap's css.

Cheers,

wholegroup commented 2 years ago

@afialapis Well, now I see.

I'd like to ask if there is any plans to support reactstrap v8 ?

Reactstrap v9 is not production ready and have many open issues. Also hardly anyone will convert live projects from bootstrap v4 => v5.

afialapis commented 2 years ago

@wholegroup I already refactored the package (hooks, better code, improved performance). And my plan is to release in the next days/weeks a 1.0@beta version, which will also: -- be compatible with reactstrap >= 8 and bootstrap >= 4 (avoiding the problems that this issue surfaces) -- (probably) provide some newer and alternative api -better prop naming- (off course, being always backwards compatible)