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 (
-
- );
- }
-}
+ return (
+
+
+
+ );
+};
-const NewForm = createForm()(Form);
+const Demo = () => {
+ return (
+
+ );
+};
-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 = (