fix(select): Issue #60 - Use suffixIcon instead of deprecated showArrow

BREAKING CHANGE: antd >= v5.8.0 required

README.md

@@ -40,7 +40,7 @@ react-js-cron is written in TypeScript with complete definitions
 Be sure that you have these dependencies on your project:
 
 - react (>=17.0.0)
-- antd (>=5.5.0)
+- antd (>=5.8.0)
 
 ```bash
 # NPM

package.json

@@ -63,7 +63,7 @@
  "enhanced-resolve": "5.10.0"
  },
  "peerDependencies": {
- "antd": ">=5.5.0",
+ "antd": ">=5.8.0",
  "react": ">=17.0.0",
  "react-dom": ">=17.0.0"
  },
@@ -93,7 +93,7 @@
  "@types/react-dom": "18.0.9",
  "@typescript-eslint/eslint-plugin": "5.44.0",
  "@typescript-eslint/parser": "5.44.0",
- "antd": "5.6.1",
+ "antd": "5.9.4",
  "babel-loader": "8.3.0",
  "cz-conventional-changelog": "3.3.0",
  "del-cli": "5.0.0",

src/components/CustomSelect.tsx

@@ -264,7 +264,7 @@ export default function CustomSelect(props: CustomSelectProps) {
  popupClassName={popupClassName}
  options={options}
  showSearch={false}
- showArrow={!readOnly}
+ suffixIcon={readOnly ? null : undefined}
  menuItemSelectedIcon={null}
  popupMatchSelectWidth={false}
  onSelect={onOptionClick}

src/fields/Period.tsx

@@ -129,7 +129,7 @@ export default function Period(props: PeriodProps) {
  className={selectClassName}
  popupClassName={popupClassName}
  disabled={disabled}
- showArrow={!readOnly}
+ suffixIcon={readOnly ? null : undefined}
  open={readOnly ? false : undefined}
  data-testid='select-period'
  allowClear={allowClear}

src/tests/Cron.updateValue.test.tsx

@@ -231,4 +231,42 @@ describe('Cron update value test suite', () => {
  expect(onError).toHaveBeenNthCalledWith(3, undefined)
  })
  })
+
+ it("should check that it's not possible to update value when it's readOnly mode", async () => {
+ const user = userEvent.setup()
+ const value = '1,4 * * * *'
+ const setValue = jest.fn()
+
+ render(<Cron value={value} setValue={setValue} readOnly />)
+
+ // Open minute dropdown
+ await waitFor(() => user.click(screen.getByText('1,4')))
+
+ // Check dropdown is not visible
+ await waitFor(() => {
+ expect(screen.queryByText('59')).not.toBeInTheDocument()
+ })
+
+ // Check dropdowns values still the sane
+ expect(await screen.findByText('1,4')).toBeVisible()
+ })
+
+ it("should check that it's not possible to update value when it's disabled mode", async () => {
+ const user = userEvent.setup()
+ const value = '1,4 * * * *'
+ const setValue = jest.fn()
+
+ render(<Cron value={value} setValue={setValue} disabled />)
+
+ // Open minute dropdown
+ await waitFor(() => user.click(screen.getByText('1,4')))
+
+ // Check dropdown is not visible
+ await waitFor(() => {
+ expect(screen.queryByText('59')).not.toBeInTheDocument()
+ })
+
+ // Check dropdowns values still the sane
+ expect(await screen.findByText('1,4')).toBeVisible()
+ })
 })

src/types.ts

@@ -389,7 +389,7 @@ export interface CustomSelectProps
  | 'tagRender'
  | 'dropdownRender'
  | 'showSearch'
- | 'showArrow'
+ | 'suffixIcon'
  | 'onChange'
  | 'dropdownMatchSelectWidth'
  | 'options'