Prechádzať zdrojové kódy

fix: change borderless api name

代强 2 rokov pred
rodič
commit
c39a5797c9

+ 1 - 1
packages/semi-foundation/cascader/cascader.scss

@@ -508,7 +508,7 @@ $module: #{$prefix}-cascader;
     }
 }
 
-.#{$module}-noBorder{
+.#{$module}-borderless{
     &:not(:focus-within):not(:hover){
         background-color:transparent;
         border-color: transparent;

+ 1 - 1
packages/semi-foundation/datePicker/datePicker.scss

@@ -1621,7 +1621,7 @@ $module-list: #{$prefix}-scrolllist;
     }
 }
 
-.#{$module}-noBorder {
+.#{$module}-borderless {
 
     &:not(:focus-within):not(:hover){
         background-color: transparent;

+ 1 - 1
packages/semi-foundation/input/input.scss

@@ -690,7 +690,7 @@ $module: #{$prefix}-input;
 
 
 
-.#{$module}-noBorder{
+.#{$module}-borderless{
 
     &:not(:focus-within):not(:hover){
         background-color:transparent;

+ 1 - 1
packages/semi-foundation/input/textarea.scss

@@ -195,7 +195,7 @@ $module: #{$prefix}-input;
     }
 }
 
-.#{$module}-textarea-noBorder{
+.#{$module}-textarea-borderless{
     &:not(:focus-within):not(:hover){
         background-color:transparent;
         border-color: transparent;

+ 1 - 1
packages/semi-foundation/inputNumber/inputNumber.scss

@@ -110,7 +110,7 @@ $module: #{$prefix}-input-number;
 
 
 .#{$module}:not(:focus-within):not(:hover){
-    .#{$prefix}-input-noBorder{
+    .#{$prefix}-input-borderless{
         & + .#{$module}-suffix-btns{
             opacity: 0;
         }

+ 1 - 1
packages/semi-foundation/select/select.scss

@@ -473,7 +473,7 @@ $overflowList: #{$prefix}-overflow-list;
 }
 
 
-.#{$module}-noBorder {
+.#{$module}-borderless {
 
     &:not(:focus-within):not(:hover){
         background-color:transparent;

+ 1 - 1
packages/semi-foundation/timePicker/timePicker.scss

@@ -129,7 +129,7 @@ $module-list: #{$prefix}-scrolllist;
 }
 
 .#{$module} {
-    .#{$prefix}-input-noBorder:not(:focus-within):not(:hover){
+    .#{$prefix}-input-borderless:not(:focus-within):not(:hover){
         .#{$prefix}-input {
             &-suffix {
                 opacity: 0;

+ 1 - 1
packages/semi-foundation/treeSelect/treeSelect.scss

@@ -372,7 +372,7 @@ $module: #{$prefix}-tree-select;
     }
 }
 
-.#{$module}-noBorder{
+.#{$module}-borderless{
 
     &:not(:focus-within):not(:hover){
         background-color:transparent;

+ 1 - 1
packages/semi-ui/cascader/index.tsx

@@ -930,7 +930,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const classNames = useCustomTrigger ?
             cls(className) :
             cls(prefixcls, className, {
-                [`${prefixcls}-noBorder`]: borderless,
+                [`${prefixcls}-borderless`]: borderless,
                 [`${prefixcls}-focus`]: isFocus || (isOpen && !isInput),
                 [`${prefixcls}-disabled`]: disabled,
                 [`${prefixcls}-single`]: true,

+ 2 - 0
packages/semi-ui/collapse/item.tsx

@@ -94,6 +94,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
     }
 
     handleClick = (itemKey: string, e: React.MouseEvent)=>{
+        // Judge user click Icon or Header
+        // Don't mount this func into icon span wrapper, or get triggered twice because of event propagation
         if (this.context.clickHeaderToExpand || this.headerExpandIconTriggerRef.current?.contains(e.target as HTMLElement)) {
             this.context.onClick(itemKey, e);
         }

+ 2 - 2
packages/semi-ui/datePicker/dateInput.tsx

@@ -256,11 +256,11 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         const inputLeftWrapperCls = cls(`${prefixCls}-range-input-wrapper-start`, `${prefixCls}-range-input-wrapper`, {
             [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeStart' && !disabled,
             [`${prefixCls}-range-input-wrapper-start-with-prefix`]: this.props.prefix || this.props.insetLabel,
-            [`${prefixCls}-noBorder`]: borderless
+            [`${prefixCls}-borderless`]: borderless
         });
         const inputRightWrapperCls = cls(`${prefixCls}-range-input-wrapper-end`, `${prefixCls}-range-input-wrapper`, {
             [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeEnd' && !disabled,
-            [`${prefixCls}-noBorder`]: borderless
+            [`${prefixCls}-borderless`]: borderless
         });
         return (
             <>

+ 16 - 7
packages/semi-ui/datePicker/datePicker.tsx

@@ -7,7 +7,15 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { noop, stubFalse, isDate, get, isFunction, isEqual, pick } from 'lodash';
 import ConfigContext, { ContextValue } from '../configProvider/context';
-import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/datePicker/foundation';
+import DatePickerFoundation, {
+    DatePickerAdapter,
+    DatePickerFoundationProps,
+    DatePickerFoundationState,
+    DayStatusType,
+    PresetType,
+    Type,
+    RangeType
+} from '@douyinfe/semi-foundation/datePicker/foundation';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/datePicker/constants';
 import { strings as popoverStrings, numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
 import BaseComponent from '../_base/baseComponent';
@@ -41,15 +49,15 @@ export interface DatePickerProps extends DatePickerFoundationProps {
     renderFullDate?: (dayNumber?: number, fullDate?: string, dayStatus?: DayStatusType) => React.ReactNode;
     triggerRender?: (props: DatePickerProps) => React.ReactNode;
     /**
-     * There are multiple input boxes when selecting a range, and the input boxes will be out of focus multiple times. 
-     * 
+     * There are multiple input boxes when selecting a range, and the input boxes will be out of focus multiple times.
+     *
      * Use `onOpenChange` or `onClickOutSide` instead
      */
     onBlur?: React.MouseEventHandler<HTMLInputElement>;
     onClear?: React.MouseEventHandler<HTMLDivElement>;
     /**
      * There are multiple input boxes when selecting a range, and the input boxes will be focused multiple times.
-     * 
+     *
      * Use `onOpenChange` or `triggerRender` instead
      */
     onFocus?: (e: React.MouseEvent, rangeType: RangeType) => void;
@@ -572,7 +580,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             defaultPickerValue
         };
 
-        return insetInput ? <DateInput {...props} insetInput={insetInput} /> : null;
+        return insetInput ? <DateInput {...props} insetInput={insetInput}/> : null;
     }
 
     handleOpenPanel = () => this.foundation.openPanel();
@@ -614,7 +622,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         this.foundation.handlePanelVisibleChange(visible);
     }
 
-    renderInner() {
+    renderInner(extraProps?: Partial<DatePickerProps>) {
         const {
             clearIcon,
             type,
@@ -648,11 +656,12 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             [`${cssClasses.PREFIX}-range-input-active`]: isRangeType && rangeInputFocus && !inputDisabled,
             [`${cssClasses.PREFIX}-range-input-disabled`]: isRangeType && inputDisabled,
             [`${cssClasses.PREFIX}-range-input-${validateStatus}`]: isRangeType && validateStatus,
-            [`${cssClasses.PREFIX}-noBorder`]: borderless
+            [`${cssClasses.PREFIX}-borderless`]: borderless
         });
         const phText = placeholder || locale.placeholder[type]; // i18n
         // These values should be passed to triggerRender, do not delete any key if it is not necessary
         const props = {
+            ...extraProps,
             placeholder: phText,
             clearIcon,
             disabled: inputDisabled,

+ 2 - 2
packages/semi-ui/input/index.tsx

@@ -121,7 +121,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         inputStyle: PropTypes.object,
         getValueLength: PropTypes.func,
         preventScroll: PropTypes.bool,
-        noBg: PropTypes.bool,
+        borderless: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -471,7 +471,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             [`${wrapperPrefix}-modebtn`]: mode === 'password',
             [`${wrapperPrefix}-hidden`]: type === 'hidden',
             [`${wrapperPrefix}-${size}`]: size,
-            [`${prefixCls}-noBorder`]: borderless
+            [`${prefixCls}-borderless`]: borderless
         });
         const inputCls = cls(prefixCls, {
             [`${prefixCls}-${size}`]: size,

+ 1 - 1
packages/semi-ui/input/textarea.tsx

@@ -287,7 +287,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
             className,
             `${prefixCls}-textarea-wrapper`,
             {
-                [`${prefixCls}-textarea-noBorder`]: borderless,
+                [`${prefixCls}-textarea-borderless`]: borderless,
                 [`${prefixCls}-textarea-wrapper-disabled`]: disabled,
                 [`${prefixCls}-textarea-wrapper-readonly`]: readonly,
                 [`${prefixCls}-textarea-wrapper-${validateStatus}`]: Boolean(validateStatus),

+ 0 - 1
packages/semi-ui/inputNumber/index.tsx

@@ -22,7 +22,6 @@ import { ArrayElement } from '../_base/base';
 
 export interface InputNumberProps extends InputProps {
     autofocus?: boolean;
-    borderless?: boolean;
     className?: string;
     clearIcon?: React.ReactNode;
     defaultValue?: number | string;

+ 1 - 1
packages/semi-ui/select/index.tsx

@@ -1314,7 +1314,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         const selectionCls = useCustomTrigger ?
             cls(className) :
             cls(prefixcls, className, {
-                [`${prefixcls}-noBorder`]: borderless,
+                [`${prefixcls}-borderless`]: borderless,
                 [`${prefixcls}-open`]: isOpen,
                 [`${prefixcls}-focus`]: isFocus,
                 [`${prefixcls}-disabled`]: disabled,

+ 1 - 1
packages/semi-ui/treeSelect/index.tsx

@@ -990,7 +990,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             cls(
                 prefixcls,
                 {
-                    [`${prefixcls}-noBorder`]: borderless,
+                    [`${prefixcls}-borderless`]: borderless,
                     [`${prefixcls}-focus`]: isFocus,
                     [`${prefixcls}-disabled`]: disabled,
                     [`${prefixcls}-single`]: !multiple,