From 6ef64a9b992b27799d4e65f7e415299af0af8e1f Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 18 Oct 2023 13:42:28 +0800 Subject: [PATCH 01/11] feat: add innserStyle --- src/AjaxUploader.tsx | 7 ++++--- src/interface.tsx | 5 +++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/AjaxUploader.tsx b/src/AjaxUploader.tsx index e537d9ed..939fecdd 100644 --- a/src/AjaxUploader.tsx +++ b/src/AjaxUploader.tsx @@ -266,7 +266,8 @@ class AjaxUploader extends Component { className, disabled, id, - style, + style: rootStyle, + innerStyle, multiple, accept, capture, @@ -298,7 +299,7 @@ class AjaxUploader extends Component { tabIndex: '0', }; return ( - + { ref={this.saveFileInput} onClick={e => e.stopPropagation()} // https://github.com/ant-design/ant-design/issues/19948 key={this.state.uid} - style={{ display: 'none' }} + style={{ display: 'none', ...(innerStyle ?? {}) }} accept={accept} {...dirProps} multiple={multiple} diff --git a/src/interface.tsx b/src/interface.tsx index 5cb69b05..3e48f025 100644 --- a/src/interface.tsx +++ b/src/interface.tsx @@ -37,6 +37,11 @@ export interface UploadProps onMouseEnter?: (e: React.MouseEvent) => void; onMouseLeave?: (e: React.MouseEvent) => void; onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void; + /** + * Inline styles that actually act on the input tag, + * whereas the previous `style` only acted on its parent container. + */ + innerStyle?: React.CSSProperties; } export interface UploadProgressEvent extends Partial { From dca7a95bd13fd5941f5da7cae7e218780bd8dc95 Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 18 Oct 2023 13:46:08 +0800 Subject: [PATCH 02/11] test: add test case --- tests/uploader.spec.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tests/uploader.spec.js b/tests/uploader.spec.js index d224bbd9..937a1894 100644 --- a/tests/uploader.spec.js +++ b/tests/uploader.spec.js @@ -850,4 +850,9 @@ describe('uploader', () => { expect(requests[0].url).toEqual('bamboo'); }); + + it('props: innerStyle', () => { + const wrapper = mount(); + expect(wrapper.find('input').props().style.color).toBe('red'); + }); }); From 96c9369d6e764dced07349ad189c9b144738fb06 Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 18 Oct 2023 14:07:47 +0800 Subject: [PATCH 03/11] feat: support classNames and styles --- src/AjaxUploader.tsx | 31 +++++++++++++++++++++---------- src/interface.tsx | 13 ++++++++----- 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/AjaxUploader.tsx b/src/AjaxUploader.tsx index 939fecdd..5c887b34 100644 --- a/src/AjaxUploader.tsx +++ b/src/AjaxUploader.tsx @@ -1,7 +1,7 @@ /* eslint react/no-is-mounted:0,react/sort-comp:0,react/prop-types:0 */ import type { ReactElement } from 'react'; import React, { Component } from 'react'; -import classNames from 'classnames'; +import clsx from 'classnames'; import pickAttrs from 'rc-util/lib/pickAttrs'; import defaultRequest from './request'; import getUid from './uid'; @@ -264,10 +264,11 @@ class AjaxUploader extends Component { component: Tag, prefixCls, className, + classNames, disabled, id, - style: rootStyle, - innerStyle, + style, + styles, multiple, accept, capture, @@ -278,11 +279,14 @@ class AjaxUploader extends Component { onMouseLeave, ...otherProps } = this.props; - const cls = classNames({ - [prefixCls]: true, - [`${prefixCls}-disabled`]: disabled, - [className]: className, - }); + const cls = clsx( + className, + prefixCls, + { + [`${prefixCls}-disabled`]: disabled, + }, + classNames?.wrapper, + ); // because input don't have directory/webkitdirectory type declaration const dirProps: any = directory ? { directory: 'directory', webkitdirectory: 'webkitdirectory' } @@ -298,8 +302,14 @@ class AjaxUploader extends Component { onDragOver: this.onFileDrop, tabIndex: '0', }; + + const mergedWrapperStyle: React.CSSProperties = { + ...style, + ...styles?.wrapper, + }; + return ( - + { ref={this.saveFileInput} onClick={e => e.stopPropagation()} // https://github.com/ant-design/ant-design/issues/19948 key={this.state.uid} - style={{ display: 'none', ...(innerStyle ?? {}) }} + style={styles?.input ?? { display: 'none' }} + className={classNames?.input} accept={accept} {...dirProps} multiple={multiple} diff --git a/src/interface.tsx b/src/interface.tsx index 3e48f025..bd731eab 100644 --- a/src/interface.tsx +++ b/src/interface.tsx @@ -37,11 +37,14 @@ export interface UploadProps onMouseEnter?: (e: React.MouseEvent) => void; onMouseLeave?: (e: React.MouseEvent) => void; onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void; - /** - * Inline styles that actually act on the input tag, - * whereas the previous `style` only acted on its parent container. - */ - innerStyle?: React.CSSProperties; + classNames?: { + wrapper?: string; + input?: string; + }; + styles?: { + wrapper?: React.CSSProperties; + input?: React.CSSProperties; + }; } export interface UploadProgressEvent extends Partial { From f23ed1656ca09300b1e09653bcf89deebbb768c2 Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 18 Oct 2023 14:07:59 +0800 Subject: [PATCH 04/11] Revert "test: add test case" This reverts commit dca7a95bd13fd5941f5da7cae7e218780bd8dc95. --- tests/uploader.spec.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/tests/uploader.spec.js b/tests/uploader.spec.js index 937a1894..d224bbd9 100644 --- a/tests/uploader.spec.js +++ b/tests/uploader.spec.js @@ -850,9 +850,4 @@ describe('uploader', () => { expect(requests[0].url).toEqual('bamboo'); }); - - it('props: innerStyle', () => { - const wrapper = mount(); - expect(wrapper.find('input').props().style.color).toBe('red'); - }); }); From 749164a22639702f8b0f49e1e139353b299133a4 Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 18 Oct 2023 14:21:41 +0800 Subject: [PATCH 05/11] test: add test case --- tests/uploader.spec.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/tests/uploader.spec.js b/tests/uploader.spec.js index d224bbd9..f87d4a41 100644 --- a/tests/uploader.spec.js +++ b/tests/uploader.spec.js @@ -850,4 +850,24 @@ describe('uploader', () => { expect(requests[0].url).toEqual('bamboo'); }); + + it('input style defaults to display none', () => { + const wrapper = mount(); + expect(wrapper.find('input').props().style.display).toBe('none'); + }); + + it('classNames and styles should work', () => { + const wrapper = mount( + , + ); + expect(wrapper.find('.bamboo').length).toBeTruthy(); + expect(wrapper.find('.bamboo-input').length).toBeTruthy(); + + expect(wrapper.find('.bamboo').props().style.height).toEqual(100); + expect(wrapper.find('.bamboo-input').props().style.color).toEqual('red'); + expect(wrapper.find('input').props().style.display).not.toBe('none'); + }); }); From e2617202c63ab9025200a030f852f4ecae0a05eb Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 18 Oct 2023 15:00:52 +0800 Subject: [PATCH 06/11] chore: update --- src/AjaxUploader.tsx | 18 ++++-------------- src/interface.tsx | 2 -- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/src/AjaxUploader.tsx b/src/AjaxUploader.tsx index 5c887b34..6d718f14 100644 --- a/src/AjaxUploader.tsx +++ b/src/AjaxUploader.tsx @@ -279,14 +279,9 @@ class AjaxUploader extends Component { onMouseLeave, ...otherProps } = this.props; - const cls = clsx( - className, - prefixCls, - { - [`${prefixCls}-disabled`]: disabled, - }, - classNames?.wrapper, - ); + const cls = clsx(className, prefixCls, { + [`${prefixCls}-disabled`]: disabled, + }); // because input don't have directory/webkitdirectory type declaration const dirProps: any = directory ? { directory: 'directory', webkitdirectory: 'webkitdirectory' } @@ -303,13 +298,8 @@ class AjaxUploader extends Component { tabIndex: '0', }; - const mergedWrapperStyle: React.CSSProperties = { - ...style, - ...styles?.wrapper, - }; - return ( - + ) => void; onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void; classNames?: { - wrapper?: string; input?: string; }; styles?: { - wrapper?: React.CSSProperties; input?: React.CSSProperties; }; } From bcaefe0bb4a1ef5eb95ad6f1cd05fdec71352774 Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 18 Oct 2023 15:02:18 +0800 Subject: [PATCH 07/11] chore: update case --- tests/uploader.spec.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/tests/uploader.spec.js b/tests/uploader.spec.js index f87d4a41..d9ca60e6 100644 --- a/tests/uploader.spec.js +++ b/tests/uploader.spec.js @@ -858,15 +858,10 @@ describe('uploader', () => { it('classNames and styles should work', () => { const wrapper = mount( - , + , ); - expect(wrapper.find('.bamboo').length).toBeTruthy(); expect(wrapper.find('.bamboo-input').length).toBeTruthy(); - expect(wrapper.find('.bamboo').props().style.height).toEqual(100); expect(wrapper.find('.bamboo-input').props().style.color).toEqual('red'); expect(wrapper.find('input').props().style.display).not.toBe('none'); }); From b629f5a9ccad96fac700ed99d6fc5070e7473abf Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 18 Oct 2023 15:04:20 +0800 Subject: [PATCH 08/11] chore: update --- src/AjaxUploader.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/AjaxUploader.tsx b/src/AjaxUploader.tsx index 6d718f14..c5b3345f 100644 --- a/src/AjaxUploader.tsx +++ b/src/AjaxUploader.tsx @@ -297,7 +297,6 @@ class AjaxUploader extends Component { onDragOver: this.onFileDrop, tabIndex: '0', }; - return ( Date: Wed, 18 Oct 2023 15:44:57 +0800 Subject: [PATCH 09/11] chore: update Co-authored-by: zombieJ --- src/AjaxUploader.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/AjaxUploader.tsx b/src/AjaxUploader.tsx index c5b3345f..1e520368 100644 --- a/src/AjaxUploader.tsx +++ b/src/AjaxUploader.tsx @@ -264,11 +264,11 @@ class AjaxUploader extends Component { component: Tag, prefixCls, className, - classNames, + classNames = {}, disabled, id, style, - styles, + styles = {}, multiple, accept, capture, @@ -307,8 +307,8 @@ class AjaxUploader extends Component { ref={this.saveFileInput} onClick={e => e.stopPropagation()} // https://github.com/ant-design/ant-design/issues/19948 key={this.state.uid} - style={styles?.input ?? { display: 'none' }} - className={classNames?.input} + style={{ display: 'none', ...styles.input }} + className={classNames.input} accept={accept} {...dirProps} multiple={multiple} From f70c7b4b7160d2064d568c26347b49116fcdb8b2 Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 18 Oct 2023 15:45:47 +0800 Subject: [PATCH 10/11] chore: update case --- tests/uploader.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/uploader.spec.js b/tests/uploader.spec.js index d9ca60e6..ccb58b05 100644 --- a/tests/uploader.spec.js +++ b/tests/uploader.spec.js @@ -863,6 +863,6 @@ describe('uploader', () => { expect(wrapper.find('.bamboo-input').length).toBeTruthy(); expect(wrapper.find('.bamboo-input').props().style.color).toEqual('red'); - expect(wrapper.find('input').props().style.display).not.toBe('none'); + expect(wrapper.find('input').props().style.display).toBe('none'); }); }); From 0c079a3e70b039c5be2d9945d4b9c677ace2ce6b Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 18 Oct 2023 15:47:17 +0800 Subject: [PATCH 11/11] chore: revert --- src/AjaxUploader.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/AjaxUploader.tsx b/src/AjaxUploader.tsx index 1e520368..f364a2f1 100644 --- a/src/AjaxUploader.tsx +++ b/src/AjaxUploader.tsx @@ -279,8 +279,10 @@ class AjaxUploader extends Component { onMouseLeave, ...otherProps } = this.props; - const cls = clsx(className, prefixCls, { + const cls = clsx({ + [prefixCls]: true, [`${prefixCls}-disabled`]: disabled, + [className]: className, }); // because input don't have directory/webkitdirectory type declaration const dirProps: any = directory