@@ -39,4 +35,4 @@ const Example = () => {
};
-render(
);
+render(
);
diff --git a/package.json b/package.json
index 54841ef..6a21423 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@kne/react-form-antd",
- "version": "3.1.5",
+ "version": "4.0.0-alpha.0",
"syntax": {
"esmodules": true
},
@@ -9,21 +9,22 @@
"module": "dist/index.modern.js",
"source": "src/index.js",
"scripts": {
+ "init": "husky && npm run init-example",
+ "start": "run-p start:lib start:md start:example",
+ "build": "run-s build:lib build:md build:example",
"init-example": "modules-dev-libs-init",
- "create-fields": "node ./scripts/createIndex.mjs",
- "start": "run-p start:lib start:example",
- "build": "run-s create-fields build:lib build:example",
+ "build:md": "npx @kne/md-doc",
+ "start:md": "npx @kne/md-doc --watch",
"build:lib": "microbundle --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment",
"start:lib": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment",
- "test": "run-s test:unit test:lint test:build",
+ "build:example": "cd example && npm run build",
+ "start:example": "cd example && npm run start",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
- "build:example": "cd example && npm run build",
- "start:example": "cd example && npm run start",
- "deploy": "gh-pages -d example/build",
- "prettier": "prettier --config .prettierrc --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
+ "prettier": "prettier --config .prettierrc --write '{src/**/*,index,prompts}.{js,jsx,ts,tsx,json,css,scss}'",
+ "lint-staged": "npx lint-staged"
},
"repository": {
"type": "git",
@@ -55,40 +56,25 @@
},
"homepage": "https://github.com/kne-union/react-form-antd#readme",
"peerDependencies": {
- "@kne/react-fetch": "1.x",
"antd": ">=5.x",
- "prop-types": ">=15.x",
- "react": ">=16.x"
+ "react": ">=18.x"
},
"dependencies": {
- "@ant-design/icons": "^4.2.1",
- "@babel/runtime": "^7.10.3",
- "@kne/react-form": "^2.1.16",
- "@kne/react-form-helper": "^1.0.36",
+ "@kne/react-form": "3.1.0-alpha.5",
+ "@kne/react-form-helper": "3.0.0-alpha.0",
"@kne/use-control-value": "^0.1.1",
- "@kne/use-event": "^0.1.3",
- "@kne/with-layer": "^0.1.5",
"classnames": "^2.2.6",
"dayjs": "^1.11.7",
- "lodash": "^4.17.15",
- "react-avatar-editor": "^13.0.0"
+ "lodash": "^4.17.15"
},
"devDependencies": {
- "@craco/craco": "^7.1.0",
- "@kne/microbundle": "^0.15.4",
- "@kne/modules-dev": "^2.0.3",
- "@kne/react-fetch": "^0.1.12",
- "antd": "^5.0.2",
- "axios": "^0.21.4",
+ "@kne/microbundle": "^0.15.5",
+ "@kne/modules-dev": "^2.0.19",
+ "@kne/react-form": "^3.1.0-alpha.4",
"cross-env": "^7.0.3",
- "fs-extra": "^9.0.1",
- "gh-pages": "^3.2.3",
- "glob": "^10.3.3",
- "husky": "^7.0.2",
- "sass": "1.75.0",
+ "husky": "^9.0.11",
"npm-run-all": "^4.1.5",
- "pify": "^5.0.0",
- "prettier": "^2.4.1",
+ "prettier": "^3.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
diff --git a/src/assets/full.js b/src/assets/full.js
deleted file mode 100644
index 795bab7..0000000
--- a/src/assets/full.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from "react";
-
-const FullIcon = props =>
;
-
-export default FullIcon;
\ No newline at end of file
diff --git a/src/assets/index.scss b/src/assets/index.scss
index 32fd8e3..309c237 100644
--- a/src/assets/index.scss
+++ b/src/assets/index.scss
@@ -217,22 +217,6 @@
}
}
-.react-form-avatar {
- .preview {
- width: 85px;
- height: 85px;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
-
- img {
- max-width: 100%;
- max-height: 100%;
- }
- }
-}
-
.data_range_picker {
color: rgba(0, 0, 0, 0.85);
position: relative;
@@ -258,31 +242,3 @@
}
}
}
-
-.svg_box {
- display: flex;
- align-items: center;
- color: rgba(0, 0, 0, 0.5);
- margin: 0 4px;
-
- svg {
- width: 16px;
- height: 16px;
- }
-}
-
-.react-form-avatar-btn {
- cursor: pointer;
- padding: 5px;
- box-sizing: content-box;
- border-radius: 2px;
- &:hover {
- background: #F8F8F8;
- }
-}
-
-.react-form-avatar-tips {
- margin-bottom: 14px;
- color: #999;
- font-size: 12px;
-}
diff --git a/src/assets/rotate.js b/src/assets/rotate.js
deleted file mode 100644
index f10ec02..0000000
--- a/src/assets/rotate.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from "react";
-
-const RotateIcon = props =>
;
-
-export default RotateIcon;
\ No newline at end of file
diff --git a/src/common/getPopupContainer.js b/src/common/getPopupContainer.js
deleted file mode 100644
index d910bc5..0000000
--- a/src/common/getPopupContainer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const getPopupContainer = (triggerNode) => {
- const findAntdPopupContainer = (el) => {
- if (el === document.body || !el.parentElement) {
- return document.body
- }
- const targetEl = [].slice.call(el.classList, 0).find((className) => ['ant-modal-body', 'ant-modal-content', 'ant-popover-content'].indexOf(className) > -1);
- if (targetEl) {
- return el;
- }
- return findAntdPopupContainer(el.parentElement);
- };
- return findAntdPopupContainer(triggerNode);
-};
-
-export default getPopupContainer;
diff --git a/src/common/withFetch.js b/src/common/withFetch.js
deleted file mode 100644
index 4103eea..0000000
--- a/src/common/withFetch.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, {forwardRef, useImperativeHandle, useEffect, useRef} from 'react';
-import useEvent from "@kne/use-event";
-import {hooks} from "@kne/react-form-helper";
-import {withFetch as withReactFetch} from '@kne/react-fetch';
-
-const {useOnChange} = hooks;
-
-const withFetch = (WrappedComponent) => {
- const FieldInner = withReactFetch(({
- data,
- setData,
- send,
- loadMore,
- isComplete,
- refresh,
- reload,
- fetchEmitter,
- isLoading,
- children,
- onLoaded,
- fetchProps,
- requestParams,
- ...props
- }) => {
- const refreshRef = useRef(refresh);
- refreshRef.current = refresh;
- const reloadRef = useRef(reload);
- reloadRef.current = reload
- const setDataRef = useRef(setData);
- setDataRef.current = setData;
- const dataRef = useRef(data);
- useEffect(() => {
- const token1 = fetchEmitter.addListener('select-fetch-refresh', () => refreshRef.current());
- const token2 = fetchEmitter.addListener('select-fetch-reload', () => reloadRef.current());
- const token3 = fetchEmitter.addListener('select-fetch-set-data', () => setDataRef.current());
- return () => {
- token1 && token1.remove();
- token2 && token2.remove();
- token3 && token3.remove();
- };
- }, [fetchEmitter]);
- useEffect(() => {
- onLoaded && onLoaded(dataRef.current);
- }, []);
- return
;
- });
-
- const useFetchEmitter = (ref) => {
- const emitter = useEvent();
- useImperativeHandle(ref, () => {
- return {
- refresh: () => emitter.emit('select-fetch-refresh'),
- reload: () => emitter.emit('select-fetch-reload'),
- setData: (data) => emitter.emit('select-fetch-set-data', data)
- };
- }, [emitter]);
- return emitter;
- };
-
- const Fetch = forwardRef((props, ref) => {
- const emitter = useFetchEmitter(ref);
- const render = useOnChange(Object.assign({placeholder: `请选择${props.label}`}, props, {fetchEmitter: emitter}));
- return render(FieldInner);
- });
-
- Fetch.field = forwardRef((props, ref) => {
- const emitter = useFetchEmitter(ref);
-
- return
;
- });
-
- return Fetch;
-};
-
-export default withFetch;
diff --git a/src/fields/Avatar.js b/src/fields/Avatar.js
deleted file mode 100644
index d4c6f6f..0000000
--- a/src/fields/Avatar.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import React, {useState, useRef, useEffect, forwardRef} from "react";
-import {Upload, message, Modal, Slider, Row, Col, Tooltip, App} from "antd";
-import withLayer from '@kne/with-layer';
-import {globalParams} from "../preset";
-import classnames from "classnames";
-import {
- PlusOutlined, LoadingOutlined
-} from "@ant-design/icons";
-import AvatarEditor from "react-avatar-editor";
-import {hooks} from "@kne/react-form-helper";
-import {merge, omit} from 'lodash';
-import Rotate from '../assets/rotate';
-import Full from '../assets/full';
-import getPopupContainer from '../common/getPopupContainer';
-
-const {useOnChange} = hooks;
-const avatarParams = globalParams.field.avatar;
-
-const createAvatarEditor = withLayer(({close, file, editor, onComplete, ...props}) => {
- const editorRef = useRef(null);
- const [rotate, setRotate] = useState(0);
- const [scale, setScale] = useState(() => {
- if (editor.width === editor.height) {
- return 1;
- }
- return 0.35;
- });
- const {modal} = App.useApp();
-
- return {
- onComplete && onComplete(editorRef.current.getImage().toDataURL());
- close();
- }}>
- {editor.tips ? {editor.tips}
: null}
-
-
-
- {
- setRotate((rotate) => {
- return (rotate - 90) % 360;
- });
- }}/>
- {
- setScale(1);
- }}/>
-
- '大小', getPopupContainer
- }} value={scale} step={0.05} min={0.2} max={3} onChange={setScale}/>
-
-
-
-
-});
-
-
-const _Avatar = ({
- className,
- value: imageUrl,
- onChange: propsChange,
- beforeUpload: onBeforeUpload,
- transformResponse,
- action,
- imageType,
- fileSize: size,
- children,
- extraRender,
- onError,
- openEditor,
- editorTips,
- editor: targetEditor,
- previewImg,
- previewRender
- }) => {
- const [loading, setLoading] = useState(false);
- const [showImageUrl, setImageUrl] = useState(imageUrl);
- const editorRef = useRef();
-
- const defaultEditor = {
- open: false,
- width: 250,
- height: 250,
- borderRadius: 1,
- text: "确定",
- cancelText: '取消',
- title: "裁剪图片",
- tips: null
- };
- const editor = merge({}, defaultEditor, {open: openEditor, tips: editorTips}, targetEditor);
-
- useEffect(() => {
- setImageUrl(imageUrl);
- }, [imageUrl]);
-
- /* base64转blob */
- const dataURLtoBlob = (dataurl) => {
- let arr = dataurl.split(",");
- // 注意base64的最后面中括号和引号是不转译的
- let _arr = arr[1].substring(0, arr[1].length - 2);
- let mime = arr[0].match(/:(.*?);/)[1], bstr = atob(_arr), n = bstr.length, u8arr = new Uint8Array(n);
- while (n--) {
- u8arr[n] = bstr.charCodeAt(n);
- }
- return new Blob([u8arr], {
- type: mime
- });
- };
-
- const uploadButton = (
- {loading ?
:
}
- {children}
-
);
-
- const beforeUpload = async (file) => {
- return new Promise((resolve, reject) => {
- const isJpgOrPng = imageType.indexOf(file.type) > -1;
- if (!isJpgOrPng) {
- onError(`只支持${imageType.map((str) => str.replace("image/", "")).join("/")}格式图片!`, "typeError", {
- type: imageType, fileType: file.type
- });
- reject();
- return false;
- }
- const isLt = file.size / 1024 / 1024 < size;
- if (!isLt) {
- onError(`图片不能超过${size}MB!`, "sizeError", {size, fileSize: file.size});
- reject();
- return false;
- }
-
- /*剪切图像*/
- // editor:{open:false,width:250,height:250,borderRadius:0-100,text:'剪切'}
- if (editor.open) {
- createAvatarEditor({
- editor,
- file,
- title: editor.title,
- icon: "",
- width: editor.width * 2,
- cancelText: editor.cancelText,
- okText: editor.text,
- onComplete: (base64) => {
- setImageUrl(base64);
- let blob = dataURLtoBlob(base64);
- const files = new window.File([blob], file.name, {type: file.type});
- onBeforeUpload && onBeforeUpload(files);
- resolve(files);
- }
- });
- } else {
- onBeforeUpload && onBeforeUpload(file);
- resolve(file);
- }
- });
-
- };
-
- const onChange = (info) => {
- if (info.file.status === "uploading") {
- setLoading(true);
- return;
- }
- if (info.file.status === "done") {
- setLoading(false);
- const response = (transformResponse || avatarParams.transformResponse)(info.file.response);
- if (response.code === 200) {
- propsChange(response.results);
- } else {
- onError(response.msg, "xhrError", response);
- }
- }
- };
-
- const headers = Object.assign({}, avatarParams.headers);
-
- if (typeof avatarParams.getHeaders === 'function') {
- Object.assign(headers, avatarParams.getHeaders())
- }
-
- return (<>
-
-
- {previewImg && showImageUrl ? previewRender ? previewRender(showImageUrl) :
-
: uploadButton}
- {extraRender ? extraRender(showImageUrl) : ''}
-
-
- >);
-};
-
-_Avatar.defaultProps = {
- imageType: ["image/jpeg", "image/png"],
- fileSize: 2, // 单位MB
- children: 点击上传
,
- extraRender: null,
- onError: (info) => message.error(info),
- previewImg: true,
- previewRender: null,
- openEditor: false
-};
-
-const AvatarInput = (props) => {
- const render = useOnChange(props);
- return render(_Avatar);
-};
-
-AvatarInput.defaultProps = {
- fieldName: 'avatar'
-};
-
-AvatarInput.field = _Avatar;
-
-export default AvatarInput;
diff --git a/src/fields/Cascader.js b/src/fields/Cascader.js
index 7a789dc..79a8f22 100644
--- a/src/fields/Cascader.js
+++ b/src/fields/Cascader.js
@@ -4,13 +4,14 @@ import {hooks} from '@kne/react-form-helper';
const {useOnChange} = hooks;
const Cascader = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'cascader'
+ }, props);
const render = useOnChange(props);
return render(_Cascader);
};
-Cascader.defaultProps = {
- fieldName: 'cascader'
-};
+Cascader.Field = _Cascader;
export default Cascader;
diff --git a/src/fields/Checkbox.js b/src/fields/Checkbox.js
index 1aa79fb..05d9195 100644
--- a/src/fields/Checkbox.js
+++ b/src/fields/Checkbox.js
@@ -7,6 +7,9 @@ const {withChecked} = hoc;
const WithCheckbox = withChecked(_Checkbox);
const Checkbox = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'checkbox'
+ }, props);
const checkedProps = useCheckedToValue(Object.assign({}, props, {
onChange: (e) => {
e.target.type = 'checkbox';
@@ -17,8 +20,5 @@ const Checkbox = (props) => {
return render(WithCheckbox);
};
-Checkbox.defaultProps = {
- fieldName: 'checkbox'
-};
-
+Checkbox.Field = _Checkbox;
export default Checkbox;
diff --git a/src/fields/CheckboxGroup.js b/src/fields/CheckboxGroup.js
index 3013397..7b55714 100644
--- a/src/fields/CheckboxGroup.js
+++ b/src/fields/CheckboxGroup.js
@@ -6,14 +6,14 @@ const {useOnChange} = hooks;
const _CheckboxGroup = Checkbox.Group;
const CheckboxGroup = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'checkboxGroup'
+ }, props);
const render = useOnChange(props);
return render(_CheckboxGroup);
};
CheckboxGroup.Checkbox = Checkbox;
-
-CheckboxGroup.defaultProps = {
- fieldName: 'checkboxGroup'
-};
+CheckboxGroup.Field = _CheckboxGroup;
export default CheckboxGroup;
diff --git a/src/fields/DatePicker.js b/src/fields/DatePicker.js
index b62442b..83b24d2 100644
--- a/src/fields/DatePicker.js
+++ b/src/fields/DatePicker.js
@@ -6,40 +6,44 @@ const {useOnChange} = hooks;
const {MonthPicker, RangePicker, WeekPicker} = DatePicker;
const _DatePicker = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'datePicker'
+ }, props);
const render = useOnChange(Object.assign({placeholder: `请选择${props.label || ''}`}, props));
return render(DatePicker);
};
-_DatePicker.defaultProps = {
- fieldName: 'datePicker'
-};
+_DatePicker.Field = DatePicker;
const _MonthPicker = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'monthDatePicker'
+ }, props);
const render = useOnChange(Object.assign({placeholder: ['开始时间', '结束时间']}, props));
return render(MonthPicker);
};
-_MonthPicker.defaultProps = {
- fieldName: 'monthDatePicker'
-};
+_MonthPicker.Field = MonthPicker;
const _RangePicker = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'rangeDatePicker'
+ }, props);
const render = useOnChange(Object.assign({placeholder: ['开始时间', '结束时间']}, props));
return render(RangePicker);
};
-_RangePicker.defaultProps = {
- fieldName: 'rangeDatePicker'
-};
+_RangePicker.Field = RangePicker;
const _WeekPicker = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'weekDatePicker'
+ }, props);
const render = useOnChange(Object.assign({placeholder: ['开始时间', '结束时间']}, props));
return render(WeekPicker);
};
-_WeekPicker.defaultProps = {
- fieldName: 'weekDatePicker'
-};
+_WeekPicker.Field = WeekPicker;
_DatePicker.MonthPicker = _MonthPicker;
_DatePicker.RangePicker = _RangePicker;
diff --git a/src/fields/DatePickerToday.js b/src/fields/DatePickerToday.js
index 655108d..a4ce66b 100644
--- a/src/fields/DatePickerToday.js
+++ b/src/fields/DatePickerToday.js
@@ -41,51 +41,46 @@ const PickerToday = ({soFarText, startProps, endProps, ...props}) => {
};
const foot = () => {
- return (
-
- )
+ return ()
}
- return (
-
-
-
-
- {soFarText || '至今'}
-
-
+ return (
+
+
- );
+
+ {soFarText || '至今'}
+
+
+ );
}
const RangePickerToday = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'rangePickerToday'
+ }, props);
const render = useOnChange(props);
return render(PickerToday);
};
-RangePickerToday.defaultProps = {
- fieldName: 'rangePickerToday'
-};
-
-RangePickerToday.field = PickerToday;
+RangePickerToday.Field = PickerToday;
export default RangePickerToday;
diff --git a/src/fields/Input.js b/src/fields/Input.js
index e83ee8b..b746df4 100644
--- a/src/fields/Input.js
+++ b/src/fields/Input.js
@@ -4,23 +4,23 @@ import {hooks} from '@kne/react-form-helper';
const {useDecorator} = hooks;
const InputField = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'input', autoComplete: 'off'
+ }, props);
const render = useDecorator(Object.assign({placeholder: `请输入${props.label}`}, props));
return render(Input);
};
+InputField.Field = Input;
+
InputField.Password = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'password', autoComplete: 'off'
+ }, props);
const render = useDecorator(Object.assign({placeholder: `请输入${props.label}`}, props));
return render(Input.Password);
};
-InputField.defaultProps = {
- fieldName: 'input',
- autoComplete: 'off'
-};
-
-InputField.Password.defaultProps = {
- fieldName: 'password',
- autoComplete: 'off'
-};
+InputField.Password.Field = Input.Password;
export default InputField;
diff --git a/src/fields/InputNumber.js b/src/fields/InputNumber.js
index a54c837..c07c184 100644
--- a/src/fields/InputNumber.js
+++ b/src/fields/InputNumber.js
@@ -4,13 +4,13 @@ import {hooks} from '@kne/react-form-helper';
const {useDecorator} = hooks;
const InputNumberField = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'inputNumber', autoComplete: 'off'
+ }, props);
const render = useDecorator(Object.assign({placeholder: `请输入${props.label}`}, props));
return render(InputNumber);
};
-InputNumberField.defaultProps = {
- fieldName: 'inputNumber',
- autoComplete: 'off'
-};
+InputNumberField.Field = InputNumber;
export default InputNumberField;
diff --git a/src/fields/RadioGroup.js b/src/fields/RadioGroup.js
index 1d42ded..639784d 100644
--- a/src/fields/RadioGroup.js
+++ b/src/fields/RadioGroup.js
@@ -5,6 +5,9 @@ import {hooks} from '@kne/react-form-helper';
const {useOnChange} = hooks;
const RadioGroup = ({onChange, ...props}) => {
+ props = Object.assign({}, {
+ fieldName: 'radioGroup'
+ }, props);
const handler = useCallback((e) => {
onChange && onChange(e.target.value);
}, [onChange]);
@@ -16,10 +19,7 @@ const _RadioGroup = (props) => {
return render(RadioGroup);
};
-_RadioGroup.defaultProps = {
- fieldName: 'radioGroup'
-};
-
+_RadioGroup.Field = RadioGroup;
_RadioGroup.Radio = Radio;
export default _RadioGroup;
diff --git a/src/fields/Rate.js b/src/fields/Rate.js
index c26d70c..b382429 100644
--- a/src/fields/Rate.js
+++ b/src/fields/Rate.js
@@ -4,12 +4,13 @@ import {hooks} from '@kne/react-form-helper';
const {useOnChange} = hooks;
const Rate = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'rate'
+ }, props);
const render = useOnChange(Object.assign({}, props));
return render(_Rate);
};
-Rate.defaultProps = {
- fieldName: 'rate'
-};
+Rate.Field = _Rate;
export default Rate;
diff --git a/src/fields/Select.js b/src/fields/Select.js
index 40823f4..c7d697d 100644
--- a/src/fields/Select.js
+++ b/src/fields/Select.js
@@ -1,21 +1,17 @@
import {Select} from 'antd';
import {hooks} from '@kne/react-form-helper';
-import withFetch from '../common/withFetch';
const {useOnChange} = hooks;
const _Select = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'select'
+ }, props);
const render = useOnChange(Object.assign({placeholder: `请选择${props.label || ''}`}, props));
return render(Select);
};
-
-_Select.Fetch = withFetch(Select);
-
+_Select.Field = Select;
_Select.Option = Select.Option;
_Select.OptGroup = Select.OptGroup;
-_Select.defaultProps = _Select.Fetch.defaultProps = {
- fieldName: 'select'
-};
-
export default _Select;
diff --git a/src/fields/Slider.js b/src/fields/Slider.js
index 77dbdeb..8914efc 100644
--- a/src/fields/Slider.js
+++ b/src/fields/Slider.js
@@ -4,12 +4,13 @@ import {hooks} from '@kne/react-form-helper';
const {useOnChange} = hooks;
const Slider = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'slider'
+ }, props);
const render = useOnChange(Object.assign({}, props));
return render(_Slider);
};
-Slider.defaultProps = {
- fieldName: 'slider'
-};
+Slider.Field = _Slider;
export default Slider;
diff --git a/src/fields/Switch.js b/src/fields/Switch.js
index 8db14fe..8581955 100644
--- a/src/fields/Switch.js
+++ b/src/fields/Switch.js
@@ -6,13 +6,14 @@ const {withChecked} = hoc;
const WithSwitch = withChecked(_Switch);
const Switch = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'switch'
+ }, props);
const checkedProps = useCheckedToValue(props);
const render = useOnChange(checkedProps);
return render(WithSwitch);
};
-Switch.defaultProps = {
- fieldName: 'switch'
-};
+Switch.Field = _Switch;
export default Switch;
diff --git a/src/fields/TextArea.js b/src/fields/TextArea.js
index b77b6d5..1c7c9c0 100644
--- a/src/fields/TextArea.js
+++ b/src/fields/TextArea.js
@@ -4,12 +4,13 @@ import {hooks} from '@kne/react-form-helper';
const {useDecorator} = hooks;
const TextArea = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'textArea'
+ }, props);
const render = useDecorator(Object.assign({placeholder: `请输入${props.label}`}, props));
return render(Input.TextArea);
};
-TextArea.defaultProps = {
- fieldName: 'textArea'
-};
+TextArea.Field = Input.TextArea;
export default TextArea;
diff --git a/src/fields/TimePicker.js b/src/fields/TimePicker.js
index 15d484b..163b497 100644
--- a/src/fields/TimePicker.js
+++ b/src/fields/TimePicker.js
@@ -6,22 +6,24 @@ const {useOnChange} = hooks;
const {RangePicker} = TimePicker;
const _TimePicker = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'timePicker'
+ }, props);
const render = useOnChange(Object.assign({placeholder: `请选择${props.label || ''}`}, props));
return render(TimePicker);
};
-_TimePicker.defaultProps = {
- fieldName: 'timePicker'
-};
+_TimePicker.Field = TimePicker;
const _RangePicker = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'rangeTimePicker'
+ }, props);
const render = useOnChange(Object.assign({placeholder: `请选择${props.label || ''}`}, props));
return render(RangePicker);
};
-_RangePicker.defaultProps = {
- fieldName: 'rangeTimePicker'
-};
+_RangePicker.Field = RangePicker;
_TimePicker.RangePicker = _RangePicker;
diff --git a/src/fields/TreeSelect.js b/src/fields/TreeSelect.js
index 541f9a4..0f6d8ff 100644
--- a/src/fields/TreeSelect.js
+++ b/src/fields/TreeSelect.js
@@ -1,19 +1,17 @@
import {TreeSelect} from 'antd';
import {hooks} from '@kne/react-form-helper';
-import withFetch from "../common/withFetch";
const {useOnChange} = hooks;
const _TreeSelect = (props) => {
+ props = Object.assign({}, {
+ fieldName: 'treeSelect'
+ }, props);
const render = useOnChange(Object.assign({placeholder: `请选择${props.label || ''}`}, props));
return render(TreeSelect);
};
-_TreeSelect.Fetch = withFetch(TreeSelect);
-
-_TreeSelect.defaultProps = _TreeSelect.Fetch.defaultProps = {
- fieldName: 'treeSelect'
-};
+_TreeSelect.Field = TreeSelect;
_TreeSelect.TreeNode = TreeSelect.TreeNode;
diff --git a/src/fields/Upload.js b/src/fields/Upload.js
deleted file mode 100644
index d2f3d87..0000000
--- a/src/fields/Upload.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, {useState, useMemo} from 'react';
-import {Upload, message, Button} from 'antd';
-import {
- UploadOutlined
-} from '@ant-design/icons';
-import {get, groupBy, uniqueId, omit} from 'lodash';
-import {hooks} from '@kne/react-form-helper';
-import {globalParams} from "../preset";
-import AvatarInput from "./Avatar.js";
-
-const {useOnChange} = hooks;
-
-const {Dragger} = Upload;
-
-const uploadParams = globalParams.field.upload;
-
-const decodeURIComponentSafe = (str) => {
- try {
- return decodeURIComponent(str);
- } catch (e) {
- return str;
- }
-};
-
-const computedFilename = (path, displayFilename = 'filename') => {
- const strArray = path.split('?');
- if (strArray[1]) {
- const query = {};
- strArray[1].split('&').forEach((str) => {
- const [key, value] = str.split('=');
- query[key] = value;
- });
- if (query[displayFilename]) {
- return decodeURIComponentSafe(query[displayFilename]);
- }
- }
- return path;
-};
-
-const valueToList = (value, displayFilename) => {
- if (!value) {
- return [];
- }
- return value.map((item) => {
- return {
- uid: uniqueId(),
- name: computedFilename(item.substr(item.lastIndexOf('/') + 1), displayFilename),
- status: 'done',
- response: {code: 200, results: item}
- }
- });
-};
-
-const listToValue = (value) => {
- return (value || []).slice(0).filter(({status}) => status === 'done').map(({response}) => response.results);
-};
-
-const _Upload = ({
- action,
- value,
- onChange,
- drag,
- children,
- displayFilename,
- accept,
- fileSize: size,
- onError,
- onUploadComplete,
- onBeforeUpload,
- maxLength,
- transformResponse,
- ...props
- }) => {
- displayFilename = displayFilename || uploadParams.displayFilename;
- value = value || [];
- const [list, setList] = useState([]);
- const valueList = useMemo(() => {
- return valueToList(value.filter((url) => {
- return !list.find((file) => decodeURIComponentSafe(get(file, 'response.results', '')) === decodeURIComponentSafe(url));
- }), displayFilename).concat(list);
- }, [list, value, displayFilename]);
- const changeHandler = (info) => {
- if (['uploading', 'done', 'error', 'removed'].indexOf(info.file.status) === -1) {
- return;
- }
- if (info.fileList?.length > maxLength) {
- if (JSON.stringify(info.file) === JSON.stringify(info.fileList[info.fileList?.length - 1])) {
- onError(`上传文件不能超过最大允许数量${maxLength}`, 'lengthError', maxLength);
- }
- return;
- }
- if (info.file.status === 'done' && info.fileList.find(({uid}) => uid === info.file.uid)) {
- info.file.response = (transformResponse || uploadParams.transformResponse)(info.file.response);
- if (info.file.response.code === 200) {
- info.file.name = computedFilename(info.file.response.results.substr(info.file.response.results.lastIndexOf('/') + 1), displayFilename);
- onUploadComplete(info);
- } else {
- info.file.status = 'error';
- onError(info.file.response.msg, 'xhrError', info.file.response);
- }
- }
- const {done} = groupBy(info.fileList, (file) => file.status === 'done' ? 'done' : 'uploading');
- if (['done', 'removed'].indexOf(info.file.status) > -1) {
- onChange(listToValue(done));
- }
- setList((list) => {
- const newList = list.slice(0);
- const index = list.findIndex(({uid}) => uid === info.file.uid);
- if (info.file.status === 'removed') {
- index > -1 && newList.splice(index, 1);
- return newList;
- }
- if (index === -1) {
- newList.push(info.file);
- return newList;
- }
- newList.splice(index, 1, info.file);
- return newList;
- });
- };
- const beforeUploadHandler = (file) => {
- const isLt = file.size / 1024 / 1024 < size;
- if (!isLt) {
- onError(`文件不能超过${size}MB!`, 'sizeError', {size, fileSize: file.size});
- return false;
- }
- if (maxLength === 1) {
- onChange([]);
- setList([]);
- }
- return onBeforeUpload && onBeforeUpload(file);
- };
-
- const headers = Object.assign({}, uploadParams.headers);
-
- if (typeof uploadParams.getHeaders === 'function') {
- Object.assign(headers, uploadParams.getHeaders())
- }
-
- const UploadComponent = drag ? Dragger : Upload;
- return
- {typeof children === 'function' ? children({size: props.size}) : children}
-
-};
-
-_Upload.defaultProps = {
- value: [],
- accept: [],
- fileSize: 2,
- maxLength: 1,
- children: ({size}) => ,
- onError: (info) => message.error(info),
- onUploadComplete: () => {
- }
-};
-
-const UploadInput = (props) => {
- const render = useOnChange(props);
- return render(_Upload);
-};
-
-UploadInput.defaultProps = {
- fieldName: 'upload'
-};
-
-
-UploadInput.Field = AvatarInput.Field = _Upload;
-
-export default UploadInput;
diff --git a/src/index.js b/src/index.js
index 881a7e7..743e990 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,4 @@
import Form from './Form';
-
-import Upload from './fields/Upload';
import TreeSelect from './fields/TreeSelect';
import TimePicker from './fields/TimePicker';
import TextArea from './fields/TextArea';
@@ -14,7 +12,6 @@ import DatePicker from './fields/DatePicker';
import CheckboxGroup from './fields/CheckboxGroup';
import Checkbox from './fields/Checkbox';
import Cascader from './fields/Cascader';
-import Avatar from './fields/Avatar';
import Rate from './fields/Rate';
import Slider from './fields/Slider';
@@ -26,7 +23,6 @@ export {default as ResetButton} from './ResetButton';
export {default as SubmitButton} from './SubmitButton';
export {default as CancelButton} from './CancelButton';
export {
- Upload,
TreeSelect,
TimePicker,
TextArea,
@@ -40,13 +36,11 @@ export {
CheckboxGroup,
Checkbox,
Cascader,
- Avatar,
Rate,
Slider
};
export const fields = {
- Upload,
TreeSelect,
TimePicker,
TextArea,
@@ -60,7 +54,6 @@ export const fields = {
CheckboxGroup,
Checkbox,
Cascader,
- Avatar,
Rate,
Slider
};
diff --git a/src/preset.js b/src/preset.js
index 88a54ee..3b56f27 100644
--- a/src/preset.js
+++ b/src/preset.js
@@ -1,27 +1,9 @@
import {preset as presetRules} from '@kne/react-form';
-import {merge, get} from 'lodash';
+import merge from 'lodash/merge';
import {preset as formHelperPreset} from '@kne/react-form-helper';
export const globalParams = {
- type: 'default', size: 'middle', rules: {}, formModal: {}, resetButton: {}, submitButton: {}, field: {
- upload: {
- displayFilename: 'filename', action: '/upload', transformResponse: (response) => {
- const targetPath = get(response, 'results[0].targetPath');
- const filename = get(response, 'results[0].filename');
- return {
- code: response.code,
- msg: response.msg,
- results: targetPath + (filename ? `?${globalParams.field.upload.displayFilename}=` + encodeURIComponent(filename) : '')
- };
- }
- }, avatar: {
- transformResponse: (response) => {
- return {
- code: response.code, results: response.results, msg: response.msg
- }
- }, action: '/upload'
- }
- }
+ type: 'default', size: 'middle', rules: {}, formModal: {}, resetButton: {}, submitButton: {}, field: {}
};
export default (props) => {