diff --git a/src/AjaxUploader.tsx b/src/AjaxUploader.tsx index e537d9e..f364a2f 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,9 +264,11 @@ class AjaxUploader extends Component { component: Tag, prefixCls, className, + classNames = {}, disabled, id, style, + styles = {}, multiple, accept, capture, @@ -277,7 +279,7 @@ class AjaxUploader extends Component { 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 { 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 index 5cb69b0..3fb0695 100644 --- a/src/interface.tsx +++ b/src/interface.tsx @@ -37,6 +37,12 @@ export interface UploadProps onMouseEnter?: (e: React.MouseEvent) => void; onMouseLeave?: (e: React.MouseEvent) => void; onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void; + classNames?: { + input?: string; + }; + styles?: { + input?: React.CSSProperties; + }; } export interface UploadProgressEvent extends Partial { diff --git a/tests/uploader.spec.js b/tests/uploader.spec.js index d224bbd..ccb58b0 100644 --- 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(); + expect(wrapper.find('input').props().style.display).toBe('none'); + }); + + it('classNames and styles should work', () => { + const wrapper = mount( + , + ); + 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'); + }); });