From b0b982cf0efa1d32c43f97ceaca650d34ac811c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com> Date: Tue, 2 Apr 2024 18:50:46 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/main.yml | 5 +- examples/rc-form.tsx | 99 +++++++++++++++----------------------- package.json | 3 +- tests/keyboard.spec.tsx | 1 + 4 files changed, 46 insertions(+), 62 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 92b349a6..df8cfd68 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -105,8 +105,9 @@ jobs: with: path: node_modules key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }} - + - name: tsc + run: npm lint:tsc - name: coverage run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash) - needs: setup \ No newline at end of file + needs: setup diff --git a/examples/rc-form.tsx b/examples/rc-form.tsx index fc995413..bc78e340 100644 --- a/examples/rc-form.tsx +++ b/examples/rc-form.tsx @@ -1,9 +1,8 @@ -/* eslint-disable no-console, react/no-multi-comp, react/prop-types, react/button-has-type,prefer-destructuring,max-len, max-classes-per-file */ import arrayTreeFilter from 'array-tree-filter'; -import { createForm } from 'rc-form'; -import { Component } from 'react'; +import Form, { Field } from 'rc-field-form'; import '../assets/index.less'; import Cascader from '../src'; +import React from 'react'; const addressOptions = [ { @@ -58,71 +57,53 @@ const addressOptions = [ }, ]; -class CascaderInput extends Component { - onChange = value => { - const props = this.props; +const CascaderInput = (props: any) => { + const onChange = value => { if (props.onChange) { props.onChange(value); } }; - getLabel() { - const props = this.props; + const getLabel = () => { const value = props.value || []; - return arrayTreeFilter(props.options, (o, level) => o.value === value[level]) + return arrayTreeFilter(props.options, (o: any, level) => o.value === value[level]) .map(o => o.label) .join(', '); - } - - render() { - const props = this.props; - return ( - - - - ); - } -} - -class Form extends Component { - onSubmit = e => { - const props = this.props; - const { form } = props; - e.preventDefault(); - form.validateFields((error, values) => { - if (!error) { - console.log('ok', values); - } else { - console.error('error', error, values); - } - }); }; - render() { - const props = this.props; - const { form } = props; - const addressFieldError = form.getFieldError('address'); - return ( -
-
-

- {form.getFieldDecorator('address', { - initialValue: [], - rules: [{ required: true, type: 'array' }], - })()} - - {addressFieldError ? addressFieldError.join(' ') : null} - -

-

- -

-
-
- ); - } -} + return ( + + + + ); +}; -const NewForm = createForm()(Form); +const Demo = () => { + return ( +
+
{ + console.error('values', values); + }} + initialValues={{ address: [] }} + > +

+ + + + + {(_, __, { getFieldError }) => { + const hasErrors = getFieldError('address'); + return

{hasErrors ? hasErrors.join(' ') : null}
; + }} + +

+

+ +

+
+
+ ); +}; -export default NewForm; +export default Demo; diff --git a/package.json b/package.json index ea680d35..30bd12fa 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.jsx", "now-build": "npm run build", "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", + "lint:tsc": "tsc -p tsconfig.json --noEmit", "start": "dumi dev", "test": "rc-test" }, @@ -73,7 +74,7 @@ "less": "^4.2.0", "np": "^9.2.0", "prettier": "^3.1.0", - "rc-form": "^2.4.0", + "rc-field-form": "^1.44.0", "rc-test": "^7.0.14", "react": "^16.0.0", "react-dom": "^16.0.0", diff --git a/tests/keyboard.spec.tsx b/tests/keyboard.spec.tsx index ca066129..5bc83a59 100644 --- a/tests/keyboard.spec.tsx +++ b/tests/keyboard.spec.tsx @@ -2,6 +2,7 @@ import { mount } from 'enzyme'; import KeyCode from 'rc-util/lib/KeyCode'; import Cascader from '../src'; import { addressOptions } from './demoOptions'; +import React from 'react'; describe('Cascader.Keyboard', () => { let wrapper; From c5d5c132b512fdb1d91e5dd4d1896c5029d83c0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com> Date: Tue, 2 Apr 2024 19:09:25 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/adjust-overflow.tsx | 41 +++------ examples/animation.tsx | 28 +++--- examples/custom-arrow-icon.tsx | 106 ++++++++++------------ examples/custom-field-name.tsx | 37 +++----- examples/default-expand-single-option.tsx | 40 ++++---- examples/defaultValue.tsx | 30 +++--- examples/disabled.tsx | 27 ++---- examples/dropdown-render.tsx | 48 +++++----- examples/dynamic-options.tsx | 49 ++++------ examples/hover.tsx | 38 ++++---- examples/search.tsx | 18 ++-- examples/simple.tsx | 28 +++--- examples/text-trigger.tsx | 34 +++---- examples/value.tsx | 47 ++++------ examples/visible.tsx | 51 +++++------ tests/index.spec.tsx | 50 +++++----- 16 files changed, 284 insertions(+), 388 deletions(-) diff --git a/examples/adjust-overflow.tsx b/examples/adjust-overflow.tsx index 8108611d..2312d9ee 100644 --- a/examples/adjust-overflow.tsx +++ b/examples/adjust-overflow.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-console, react/prop-types */ import type { BuildInPlacements } from 'rc-trigger/lib/interface'; -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -58,35 +58,24 @@ const addressOptions = [ }, ]; -class MyCascader extends React.Component<{ builtinPlacements?: BuildInPlacements }> { - state = { - inputValue: '', - }; +const MyCascader = ({ builtinPlacements }: { builtinPlacements?: BuildInPlacements }) => { + const [inputValue, setInputValue] = useState(''); - onChange = (value, selectedOptions) => { + const onChange = (value, selectedOptions) => { console.log(value, selectedOptions); - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); }; - render() { - const { builtinPlacements } = this.props; - return ( - - - - ); - } -} + return ( + + + + ); +}; const placements = { bottomLeft: { diff --git a/examples/animation.tsx b/examples/animation.tsx index ff512aa5..4562add4 100644 --- a/examples/animation.tsx +++ b/examples/animation.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -56,25 +56,19 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - state = { - inputValue: '', - }; +const Demo = () => { + const [inputValue, setInputValue] = useState(''); - onChange = (value, selectedOptions) => { + const onChange = (value, selectedOptions) => { console.log(value, selectedOptions); - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); }; - render() { - return ( - - - - ); - } -} + return ( + + + + ); +}; export default Demo; diff --git a/examples/custom-arrow-icon.tsx b/examples/custom-arrow-icon.tsx index ca6be19e..d693e4e0 100644 --- a/examples/custom-arrow-icon.tsx +++ b/examples/custom-arrow-icon.tsx @@ -1,5 +1,4 @@ -/* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -81,39 +80,33 @@ const loadingPath = ' 7.9 4.1 11.4 1.3C854.5 760.8 912 649.1 912 523.9c0-' + '221.1-179.4-400.2-400.6-399.9z'; -class Demo extends React.Component { - state = { - inputValue: '', - dynamicInputValue: '', - options: [ - { - label: '福建', - isLeaf: false, - value: 'fj', - }, - { - label: '浙江', - isLeaf: false, - value: 'zj', - }, - ], - }; +const Demo = () => { + const [inputValue, setInputValue] = useState(''); + const [dynamicInputValue, setDynamicInputValue] = useState(''); + const [options, setOptions] = useState([ + { + label: '福建', + isLeaf: false, + value: 'fj', + }, + { + label: '浙江', + isLeaf: false, + value: 'zj', + }, + ]); - onChange = (value, selectedOptions) => { + const onChange = (value, selectedOptions) => { console.log(value, selectedOptions); - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); }; - onChangeDynamic = (value, selectedOptions) => { + const onChangeDynamic = (value, selectedOptions) => { console.log(value, selectedOptions); - this.setState({ - dynamicInputValue: selectedOptions.map(o => o.label).join(', '), - }); + setDynamicInputValue(selectedOptions.map(o => o.label).join(', ')); }; - expandIcon = ( + const expandIcon = ( ); - loadingIcon = ( + const loadingIcon = ( ); - loadData = selectedOptions => { + const loadData = selectedOptions => { const targetOption = selectedOptions[selectedOptions.length - 1]; targetOption.loading = true; // 动态加载下级数据 @@ -169,37 +162,32 @@ class Demo extends React.Component { value: 'dynamic2', }, ]; - this.setState({ - // eslint-disable-next-line react/no-access-state-in-setstate - options: [...this.state.options], - }); + setOptions([...options]); }, 1500); }; - render() { - return ( -
- - - - - - -
- ); - } -} + return ( +
+ + + + + + +
+ ); +}; export default Demo; diff --git a/examples/custom-field-name.tsx b/examples/custom-field-name.tsx index 5f587a53..dd4a24e2 100644 --- a/examples/custom-field-name.tsx +++ b/examples/custom-field-name.tsx @@ -1,5 +1,4 @@ -/* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -57,29 +56,23 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - state = { - inputValue: '', - }; +const Demo = () => { + const [inputValue, setInputValue] = useState(''); - onChange = (value, selectedOptions) => { + const onChange = (value, selectedOptions) => { console.log(value, selectedOptions); - this.setState({ - inputValue: selectedOptions.map(o => o.name).join(', '), - }); + setInputValue(selectedOptions.map(o => o.name).join(', ')); }; - render() { - return ( - - - - ); - } -} + return ( + + + + ); +}; export default Demo; diff --git a/examples/default-expand-single-option.tsx b/examples/default-expand-single-option.tsx index ff1d0c78..a7d31034 100644 --- a/examples/default-expand-single-option.tsx +++ b/examples/default-expand-single-option.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +/* eslint-disable @typescript-eslint/no-shadow */ +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -37,35 +38,28 @@ const options = [ }, ]; -class App extends React.Component { - state = { - inputValue: '', - value: [], - }; +const App = () => { + const [inputValue, setInputValue] = useState(''); + + const [value, setValue] = useState([]); - onChange = (value, selectedOptions) => { + const onChange = (value: any, selectedOptions) => { const lastSelected = selectedOptions[selectedOptions.length - 1]; if (lastSelected.children && lastSelected.children.length === 1) { value.push(lastSelected.children[0].value); - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - value, - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); + setValue(value); return; } - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - value, - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); + setValue(value); }; - render() { - return ( - - - - ); - } -} + return ( + + + + ); +}; export default App; diff --git a/examples/defaultValue.tsx b/examples/defaultValue.tsx index 6295e091..2e30fba2 100644 --- a/examples/defaultValue.tsx +++ b/examples/defaultValue.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -91,26 +91,20 @@ const defaultOptions = [ }, ]; -class Demo extends React.Component { - state = { - inputValue: defaultOptions.map(o => o.label).join(', '), - }; +const Demo = () => { + const [inputValue, setInputValue] = useState(defaultOptions.map(o => o.label).join(', ')); - onChange = (value, selectedOptions) => { + const onChange = (value, selectedOptions) => { console.log(value, selectedOptions); - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); }; - render() { - const defaultValue = defaultOptions.map(o => o.value); - return ( - - - - ); - } -} + const defaultValue = defaultOptions.map(o => o.value); + return ( + + + + ); +}; export default Demo; diff --git a/examples/disabled.tsx b/examples/disabled.tsx index 8cbff45f..f8d0d84d 100644 --- a/examples/disabled.tsx +++ b/examples/disabled.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -56,23 +56,14 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - state = { - inputValue: '', - }; +const Demo = () => { + const [inputValue] = useState(''); - render() { - return ( - - - - ); - } -} + return ( + + + + ); +}; export default Demo; diff --git a/examples/dropdown-render.tsx b/examples/dropdown-render.tsx index e16dc66a..bb875fac 100644 --- a/examples/dropdown-render.tsx +++ b/examples/dropdown-render.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -57,35 +57,29 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - state = { - inputValue: '', - }; +const Demo = () => { + const [inputValue, setInputValue] = useState(''); - onChange = (value, selectedOptions) => { + const onChange = (value, selectedOptions) => { console.log(value, selectedOptions); - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); }; - render() { - return ( - ( -
- {menus} -
- Hey, DropdownRender, Long DropdownRender, Long DropdownRender -
- )} - > - -
- ); - } -} + return ( + ( +
+ {menus} +
+ Hey, DropdownRender, Long DropdownRender, Long DropdownRender +
+ )} + > + +
+ ); +}; export default Demo; diff --git a/examples/dynamic-options.tsx b/examples/dynamic-options.tsx index 9cc98769..9a79aa05 100644 --- a/examples/dynamic-options.tsx +++ b/examples/dynamic-options.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -16,20 +16,16 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - state = { - inputValue: '', - options: addressOptions, - }; +const Demo = () => { + const [inputValue, setInputValue] = useState(''); + const [options, setOptions] = useState(addressOptions); - onChange = (value, selectedOptions) => { + const onChange = (value, selectedOptions) => { console.log('OnChange:', value, selectedOptions); - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); }; - loadData = selectedOptions => { + const loadData = selectedOptions => { console.log('onLoad:', selectedOptions); const targetOption = selectedOptions[selectedOptions.length - 1]; targetOption.loading = true; @@ -47,26 +43,21 @@ class Demo extends React.Component { value: 'dynamic2', }, ]; - this.setState({ - // eslint-disable-next-line react/no-access-state-in-setstate - options: [...this.state.options], - }); + setOptions([...options]); }, 500); }; - render() { - return ( - - - - ); - } -} + return ( + + + + ); +}; export default Demo; diff --git a/examples/hover.tsx b/examples/hover.tsx index 0b667ae9..004d767d 100644 --- a/examples/hover.tsx +++ b/examples/hover.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -71,8 +71,8 @@ const addressOptions = [ { label: '高雄', value: 'gaoxiong', - } - ] + }, + ], }, { label: '香港', @@ -80,28 +80,22 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - state = { - inputValue: '', - }; +const Demo = () => { + const [inputValue, setInputValue] = useState(''); - onChange = (value, selectedOptions) => { + const onChange = (value, selectedOptions) => { console.log(value, selectedOptions); - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); }; - render() { - return ( -
-

Hover to expand children

- - - -
- ); - } -} + return ( +
+

Hover to expand children

+ + + +
+ ); +}; export default Demo; diff --git a/examples/search.tsx b/examples/search.tsx index 79f1baf8..af73f022 100644 --- a/examples/search.tsx +++ b/examples/search.tsx @@ -66,12 +66,16 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - render() { - return ( - - ); - } -} +const Demo = () => { + return ( + + ); +}; export default Demo; diff --git a/examples/simple.tsx b/examples/simple.tsx index 98e09bb1..427917e2 100644 --- a/examples/simple.tsx +++ b/examples/simple.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -57,25 +57,19 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - state = { - inputValue: '', - }; +const Demo = () => { + const [inputValue, setInputValue] = useState(''); - onChange = (value, selectedOptions) => { + const onChange = (value, selectedOptions) => { console.log(value, selectedOptions); - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); }; - render() { - return ( - - - - ); - } -} + return ( + + + + ); +}; export default Demo; diff --git a/examples/text-trigger.tsx b/examples/text-trigger.tsx index 6420b7fe..8a9ce9dd 100644 --- a/examples/text-trigger.tsx +++ b/examples/text-trigger.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -56,28 +56,22 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - state = { - inputValue: '未选择', - }; +const Demo = () => { + const [inputValue, setInputValue] = useState(''); - onChange = (value, selectedOptions) => { + const onChange = (value, selectedOptions) => { console.log(value, selectedOptions); - this.setState({ - inputValue: selectedOptions.map(o => o.label).join(', '), - }); + setInputValue(selectedOptions.map(o => o.label).join(', ')); }; - render() { - return ( - - {this.state.inputValue} - - 切换地区 - - - ); - } -} + return ( + + {inputValue} + + 切换地区 + + + ); +}; export default Demo; diff --git a/examples/value.tsx b/examples/value.tsx index 2025ce4c..ec4c3e6c 100644 --- a/examples/value.tsx +++ b/examples/value.tsx @@ -1,6 +1,6 @@ -/* eslint-disable no-console,react/button-has-type */ +/* eslint-disable @typescript-eslint/no-shadow */ import arrayTreeFilter from 'array-tree-filter'; -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -57,38 +57,31 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - state = { - value: [], - }; - - onChange = value => { +const Demo = () => { + const [value, setValue] = useState([]); + const onChange = value => { console.log(value); - this.setState({ value }); + setValue(value); }; - setValue = () => { - this.setState({ - value: ['bj', 'chaoyang'], - }); + const handleSetValue = () => { + setValue(['bj', 'chaoyang']); }; - getLabel() { - return arrayTreeFilter(addressOptions, (o, level) => o.value === this.state.value[level]) + const getLabel = () => { + return arrayTreeFilter(addressOptions, (o, level) => o.value === value[level]) .map(o => o.label) .join(', '); - } + }; - render() { - return ( -
- - - - -
- ); - } -} + return ( +
+ + + + +
+ ); +}; export default Demo; diff --git a/examples/visible.tsx b/examples/visible.tsx index 763ce8eb..8dcdbb58 100644 --- a/examples/visible.tsx +++ b/examples/visible.tsx @@ -1,6 +1,7 @@ +/* eslint-disable @typescript-eslint/no-shadow */ /* eslint-disable no-console */ import arrayTreeFilter from 'array-tree-filter'; -import React from 'react'; +import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -57,39 +58,35 @@ const addressOptions = [ }, ]; -class Demo extends React.Component { - state = { - value: [], - popupVisible: false, - }; +const Demo = () => { + const [value, setValue] = useState([]); + const [popupVisible, setPopupVisible] = useState(false); - onChange = value => { - this.setState({ value }); + const onChange = value => { + setValue(value); }; - onPopupVisibleChange = popupVisible => { - this.setState({ popupVisible }); + const onPopupVisibleChange = popupVisible => { + setPopupVisible(popupVisible); }; - getLabel() { - return arrayTreeFilter(addressOptions, (o, level) => o.value === this.state.value[level]) + const getLabel = () => { + return arrayTreeFilter(addressOptions, (o, level) => o.value === value[level]) .map(o => o.label) .join(', '); - } + }; - render() { - return ( - - - - ); - } -} + return ( + + + + ); +}; export default Demo; diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 219fa8fe..f0d46ca3 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -2,7 +2,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import Cascader from '../src'; import { addressOptions, addressOptionsForUneven, optionsForActiveMenuItems } from './demoOptions'; import { mount } from './enzyme'; @@ -438,33 +438,25 @@ describe('Cascader.Basic', () => { // https://github.com/ant-design/ant-design/issues/5666 it('should have not change active value when value is not changed', () => { - class Demo extends React.Component { - state = { - value: [], - }; - - timeout = null; + const Demo = () => { + const [value, setValue] = useState([]); - componentDidMount() { - this.timeout = setTimeout(() => { - this.setState({ - value: [], - }); + // const timeout = null; + useEffect(() => { + const timeout = setTimeout(() => { + setValue([]); }, 10); - } - - componentWillUnmount() { - clearTimeout(this.timeout); - } - - render() { - return ( - - - - ); - } - } + return () => { + clearTimeout(timeout); + }; + }, []); + + return ( + + + + ); + }; const wrapper = mount(); wrapper.find('input').simulate('click'); let menus = wrapper.find('.rc-cascader-menu'); @@ -654,7 +646,8 @@ describe('Cascader.Basic', () => { changeOnSelect expandTrigger="hover" options={addressOptionsForUneven} - onChange={onChange}> + onChange={onChange} + >
, ); @@ -802,9 +795,8 @@ describe('Cascader.Basic', () => { expect(activeItems).toHaveLength(2); expect(activeItems.last().text()).toEqual('高雄'); }); - }) + }); }); - }); it('defaultValue not exist', () => { From b3a30f88256bae2c7ef9ba6f74804c323ae7ca0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com> Date: Wed, 3 Apr 2024 09:12:43 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/adjust-overflow.tsx | 1 - examples/animation.tsx | 1 - examples/change-on-select.tsx | 88 +++++++++++------------ examples/debug.tsx | 1 - examples/default-expand-single-option.tsx | 2 +- examples/defaultValue.tsx | 1 - examples/disabled.tsx | 1 - examples/dropdown-render.tsx | 1 - examples/dynamic-options.tsx | 1 - examples/hover.tsx | 1 - examples/multiple.tsx | 3 +- examples/panel.tsx | 1 - examples/search.tsx | 1 - examples/simple.tsx | 1 - examples/text-trigger.tsx | 1 - examples/visible.tsx | 1 - src/OptionList/index.tsx | 1 - tests/Panel.spec.tsx | 2 - tests/checkable.spec.tsx | 2 - tests/fieldNames.spec.tsx | 2 - tests/index.spec.tsx | 2 - tests/loadData.spec.tsx | 2 - tests/private.spec.tsx | 2 - tests/search.spec.tsx | 5 +- 24 files changed, 48 insertions(+), 76 deletions(-) diff --git a/examples/adjust-overflow.tsx b/examples/adjust-overflow.tsx index 2312d9ee..637b91db 100644 --- a/examples/adjust-overflow.tsx +++ b/examples/adjust-overflow.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console, react/prop-types */ import type { BuildInPlacements } from 'rc-trigger/lib/interface'; import React, { useState } from 'react'; import '../assets/index.less'; diff --git a/examples/animation.tsx b/examples/animation.tsx index 4562add4..4909d666 100644 --- a/examples/animation.tsx +++ b/examples/animation.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/change-on-select.tsx b/examples/change-on-select.tsx index 43a7f556..e0825919 100644 --- a/examples/change-on-select.tsx +++ b/examples/change-on-select.tsx @@ -1,79 +1,79 @@ -/* eslint-disable no-console */ import React from 'react'; import '../assets/index.less'; import Cascader from '../src'; const options = [ { - label: "Women Clothing", - value: "Women Clothing", + label: 'Women Clothing', + value: 'Women Clothing', children: [ { - label: "Women Tops, Blouses & Tee", - value: "Women Tops, Blouses & Tee", + label: 'Women Tops, Blouses & Tee', + value: 'Women Tops, Blouses & Tee', children: [ { - label: "Women T-Shirts", - value: "Women T-Shirts" + label: 'Women T-Shirts', + value: 'Women T-Shirts', }, { - label: "Women Tops", - value: "Women Tops" + label: 'Women Tops', + value: 'Women Tops', }, { - label: "Women Tank Tops & Camis", - value: "Women Tank Tops & Camis" + label: 'Women Tank Tops & Camis', + value: 'Women Tank Tops & Camis', }, { - label: "Women Blouses", - value: "Women Blouses" - } - ] + label: 'Women Blouses', + value: 'Women Blouses', + }, + ], }, { - label: "Women Suits", - value: "Women Suits", + label: 'Women Suits', + value: 'Women Suits', children: [ { - label: "Women Suit Pants", - value: "Women Suit Pants" + label: 'Women Suit Pants', + value: 'Women Suit Pants', }, { - label: "Women Suit Sets", - value: "Women Suit Sets" + label: 'Women Suit Sets', + value: 'Women Suit Sets', }, { - label: "Women Blazers", - value: "Women Blazers" - } - ] + label: 'Women Blazers', + value: 'Women Blazers', + }, + ], }, { - label: "Women Co-ords", - value: "Women Co-ords", + label: 'Women Co-ords', + value: 'Women Co-ords', children: [ { - label: "Two-piece Outfits", - value: "Two-piece Outfits" - } - ] - } - ] - } + label: 'Two-piece Outfits', + value: 'Two-piece Outfits', + }, + ], + }, + ], + }, ]; const onChange = (value, selectedOptions) => { - console.log(value, selectedOptions); + console.log(value, selectedOptions); }; - -const Demo = () => console.log('loadData')} -/>; +const Demo = () => ( + console.log('loadData')} + /> +); export default Demo; diff --git a/examples/debug.tsx b/examples/debug.tsx index 01f77c07..f655f608 100644 --- a/examples/debug.tsx +++ b/examples/debug.tsx @@ -1,4 +1,3 @@ -/* eslint-disable */ import React from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/default-expand-single-option.tsx b/examples/default-expand-single-option.tsx index a7d31034..cd1cff59 100644 --- a/examples/default-expand-single-option.tsx +++ b/examples/default-expand-single-option.tsx @@ -43,7 +43,7 @@ const App = () => { const [value, setValue] = useState([]); - const onChange = (value: any, selectedOptions) => { + const onChange = (value, selectedOptions) => { const lastSelected = selectedOptions[selectedOptions.length - 1]; if (lastSelected.children && lastSelected.children.length === 1) { value.push(lastSelected.children[0].value); diff --git a/examples/defaultValue.tsx b/examples/defaultValue.tsx index 2e30fba2..cfe30588 100644 --- a/examples/defaultValue.tsx +++ b/examples/defaultValue.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/disabled.tsx b/examples/disabled.tsx index f8d0d84d..be8b773e 100644 --- a/examples/disabled.tsx +++ b/examples/disabled.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/dropdown-render.tsx b/examples/dropdown-render.tsx index bb875fac..d18bc21d 100644 --- a/examples/dropdown-render.tsx +++ b/examples/dropdown-render.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/dynamic-options.tsx b/examples/dynamic-options.tsx index 9a79aa05..27e0d903 100644 --- a/examples/dynamic-options.tsx +++ b/examples/dynamic-options.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/hover.tsx b/examples/hover.tsx index 004d767d..763cfb10 100644 --- a/examples/hover.tsx +++ b/examples/hover.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/multiple.tsx b/examples/multiple.tsx index 428b80e7..4f071e61 100644 --- a/examples/multiple.tsx +++ b/examples/multiple.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React from 'react'; import '../assets/index.less'; import Cascader from '../src'; @@ -15,7 +14,7 @@ const optionLists = [ value: 'jiangsu', label: 'Jiangsu', isLeaf: false, - disableCheckbox: false + disableCheckbox: false, }, ]; diff --git a/examples/panel.tsx b/examples/panel.tsx index 492124f3..17e6a2ad 100644 --- a/examples/panel.tsx +++ b/examples/panel.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/search.tsx b/examples/search.tsx index af73f022..3662125a 100644 --- a/examples/search.tsx +++ b/examples/search.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/simple.tsx b/examples/simple.tsx index 427917e2..bada51f3 100644 --- a/examples/simple.tsx +++ b/examples/simple.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/text-trigger.tsx b/examples/text-trigger.tsx index 8a9ce9dd..03b92923 100644 --- a/examples/text-trigger.tsx +++ b/examples/text-trigger.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import React, { useState } from 'react'; import '../assets/index.less'; import Cascader from '../src'; diff --git a/examples/visible.tsx b/examples/visible.tsx index 8dcdbb58..23e52539 100644 --- a/examples/visible.tsx +++ b/examples/visible.tsx @@ -1,5 +1,4 @@ /* eslint-disable @typescript-eslint/no-shadow */ -/* eslint-disable no-console */ import arrayTreeFilter from 'array-tree-filter'; import React, { useState } from 'react'; import '../assets/index.less'; diff --git a/src/OptionList/index.tsx b/src/OptionList/index.tsx index 1180a8a8..7aa8a47e 100644 --- a/src/OptionList/index.tsx +++ b/src/OptionList/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable default-case */ import { useBaseProps } from 'rc-select'; import type { RefOptionListProps } from 'rc-select/lib/OptionList'; import * as React from 'react'; diff --git a/tests/Panel.spec.tsx b/tests/Panel.spec.tsx index 6718fe4f..10ffb9f3 100644 --- a/tests/Panel.spec.tsx +++ b/tests/Panel.spec.tsx @@ -1,5 +1,3 @@ -/* eslint-disable react/jsx-no-bind */ - import { fireEvent, render } from '@testing-library/react'; import React from 'react'; import Cascader, { type CascaderProps } from '../src'; diff --git a/tests/checkable.spec.tsx b/tests/checkable.spec.tsx index 56cc137e..5ccf02c2 100644 --- a/tests/checkable.spec.tsx +++ b/tests/checkable.spec.tsx @@ -1,5 +1,3 @@ -/* eslint-disable react/jsx-no-bind */ - import { fireEvent, render } from '@testing-library/react'; import React from 'react'; import Cascader from '../src'; diff --git a/tests/fieldNames.spec.tsx b/tests/fieldNames.spec.tsx index 33560b79..c90d3227 100644 --- a/tests/fieldNames.spec.tsx +++ b/tests/fieldNames.spec.tsx @@ -1,5 +1,3 @@ -/* eslint-disable react/jsx-no-bind */ - import React from 'react'; import { mount } from './enzyme'; import Cascader from '../src'; diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index f0d46ca3..3a6a0c0d 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -1,5 +1,3 @@ -/* eslint-disable react/jsx-no-bind */ - import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import React, { useEffect, useState } from 'react'; diff --git a/tests/loadData.spec.tsx b/tests/loadData.spec.tsx index e7bb5522..7b71ea52 100644 --- a/tests/loadData.spec.tsx +++ b/tests/loadData.spec.tsx @@ -1,5 +1,3 @@ -/* eslint-disable react/jsx-no-bind */ - import React from 'react'; import { act } from 'react-dom/test-utils'; import { mount } from './enzyme'; diff --git a/tests/private.spec.tsx b/tests/private.spec.tsx index 612caec7..ab9ff361 100644 --- a/tests/private.spec.tsx +++ b/tests/private.spec.tsx @@ -1,5 +1,3 @@ -/* eslint-disable @typescript-eslint/consistent-type-imports */ - import { render } from '@testing-library/react'; import React from 'react'; import Cascader from '../src'; diff --git a/tests/search.spec.tsx b/tests/search.spec.tsx index 5125d443..279c5d6a 100644 --- a/tests/search.spec.tsx +++ b/tests/search.spec.tsx @@ -1,12 +1,11 @@ -/* eslint-disable @typescript-eslint/consistent-type-imports */ - import { fireEvent, render } from '@testing-library/react'; import KeyCode from 'rc-util/lib/KeyCode'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; import Cascader from '../src'; import { optionsForActiveMenuItems } from './demoOptions'; -import { mount, ReactWrapper } from './enzyme'; +import type { ReactWrapper } from './enzyme'; +import { mount } from './enzyme'; describe('Cascader.Search', () => { function doSearch(wrapper: ReactWrapper, search: string) { From 50ad29f7f88e1706ca5a083653717038ad14ea6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com> Date: Wed, 3 Apr 2024 11:49:55 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/main.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index df8cfd68..65ad47f9 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -106,7 +106,7 @@ jobs: path: node_modules key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }} - name: tsc - run: npm lint:tsc + run: npm run lint:tsc - name: coverage run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash) From c0f7fdf1f1a308adaaec3560469b25279dcdaa4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com> Date: Wed, 3 Apr 2024 15:27:05 +0800 Subject: [PATCH 5/5] fix: type --- examples/adjust-overflow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/adjust-overflow.tsx b/examples/adjust-overflow.tsx index 637b91db..938ed3d7 100644 --- a/examples/adjust-overflow.tsx +++ b/examples/adjust-overflow.tsx @@ -1,5 +1,5 @@ -import type { BuildInPlacements } from 'rc-trigger/lib/interface'; import React, { useState } from 'react'; +import type { BuildInPlacements } from '@rc-component/trigger/lib/interface'; import '../assets/index.less'; import Cascader from '../src';