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'