feat: support classNames and styles (#518)

* feat: add innserStyle * test: add test case * feat: support classNames and styles * Revert "test: add test case" This reverts commit dca7a95. * test: add test case * chore: update * chore: update case * chore: update * chore: update Co-authored-by: zombieJ <[email protected]> * chore: update case * chore: revert --------- Co-authored-by: zombieJ <[email protected]>
react-component · Oct 18, 2023 · 3dacfff · 3dacfff
1 parent 6e24053
commit 3dacfff
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git 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,9 +264,11 @@ class AjaxUploader extends Component<UploadProps> {
       component: Tag,
       prefixCls,
       className,
+      classNames = {},
       disabled,
       id,
       style,
+      styles = {},
       multiple,
       accept,
       capture,
@@ -277,7 +279,7 @@ class AjaxUploader extends Component<UploadProps> {
       onMouseLeave,
       ...otherProps
     } = this.props;
-    const cls = classNames({
+    const cls = clsx({
       [prefixCls]: true,
       [`${prefixCls}-disabled`]: disabled,
       [className]: className,
@@ -307,7 +309,8 @@ class AjaxUploader extends Component<UploadProps> {
           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', ...styles.input }}
+          className={classNames.input}
           accept={accept}
           {...dirProps}
           multiple={multiple}

diff --git a/src/interface.tsx b/src/interface.tsx
@@ -37,6 +37,12 @@ export interface UploadProps
   onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
   onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+  classNames?: {
+    input?: string;
+  };
+  styles?: {
+    input?: React.CSSProperties;
+  };
 }
 
 export interface UploadProgressEvent extends Partial<ProgressEvent> {

diff --git a/tests/uploader.spec.js b/tests/uploader.spec.js
@@ -850,4 +850,19 @@ describe('uploader', () => {
 
     expect(requests[0].url).toEqual('bamboo');
   });
+
+  it('input style defaults to display none', () => {
+    const wrapper = mount(<Uploader />);
+    expect(wrapper.find('input').props().style.display).toBe('none');
+  });
+
+  it('classNames and styles should work', () => {
+    const wrapper = mount(
+      <Uploader classNames={{ input: 'bamboo-input' }} styles={{ input: { color: 'red' } }} />,
+    );
+    expect(wrapper.find('.bamboo-input').length).toBeTruthy();
+
+    expect(wrapper.find('.bamboo-input').props().style.color).toEqual('red');
+    expect(wrapper.find('input').props().style.display).toBe('none');
+  });
 });