@gm-pc/react 1.27.5-beta.0 → 1.27.5-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.27.5-beta.0",
+  "version": "1.27.5-beta.1",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/locales": "^1.27.5-beta.0",
+    "@gm-pc/locales": "^1.27.5-beta.1",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -48,5 +48,5 @@
     "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "62f3bf16794e2d1778f97dc45c342746b9ea53f9"
+  "gitHead": "ba7a645cc22f0b5f7271160bf327909c1c057388"
 }

package/src/component/more_select/base.tsx

@@ -22,11 +22,10 @@ import { findDOMNode } from 'react-dom'
 import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
 
 interface MoreSelectBaseState {
-  searchValue: string | undefined
+  searchValue: string
   loading: boolean
   /* keyboard 默认第一个位置 */
   willActiveIndex: number | null
-  isOpen: boolean
 }
 
 // @todo keydown item disabled
@@ -39,10 +38,9 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   static renderListFilterPinYin = renderListFilterPinYin
 
   readonly state: MoreSelectBaseState = {
-    searchValue: (undefined as unknown) as string,
+    searchValue: '',
     loading: false,
     willActiveIndex: this.props.isKeyboard ? 0 : null,
-    isOpen: false,
   }
 
   private _isUnmounted = false
@@ -135,10 +133,6 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     const searchValue = event.target.value
     this.setState({ searchValue })
     this._debounceDoSearch(searchValue)
-    if (this.props.isSameAntd) {
-      // eslint-disable-next-line no-unused-expressions
-      this._popoverRef.current?.apiDoSetActive(true)
-    }
     setTimeout(() => {
       // eslint-disable-next-line no-unused-expressions
       isInitSearch && this._inputRef.current?.select()
@@ -238,34 +232,18 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     )
   }
 
-  private _renderSearchInput = () => {
-    const { searchPlaceholder } = this.props
-    const { searchValue } = this.state
-    return (
-      <div className='gm-more-select-popup-input'>
-        <Input
-          ref={this._inputRef}
-          autoFocus
-          value={searchValue}
-          onChange={this._handleChange}
-          placeholder={searchPlaceholder}
-        />
-      </div>
-    )
-  }
-
   private _renderList = (config: ConfigProviderProps): ReactNode => {
     const {
       selected = [],
       multiple,
       isGroupList,
       renderListItem,
+      searchPlaceholder,
       listHeight,
       popupClassName,
       renderCustomizedBottom,
-      isSameAntd = false,
     } = this.props
-    const { loading, willActiveIndex } = this.state
+    const { loading, searchValue, willActiveIndex } = this.state
     const filterData = this._getFilterData()
     return (
       <ConfigProvider {...config}>
@@ -273,7 +251,15 @@ class MoreSelectBase<V extends string | number = string> extends Component<
           className={classNames('gm-more-select-popup', popupClassName)}
           onKeyDown={this._handlePopupKeyDown}
         >
-          {isSameAntd ? null : this._renderSearchInput()}
+          <div className='gm-more-select-popup-input'>
+            <Input
+              ref={this._inputRef}
+              autoFocus
+              value={searchValue}
+              onChange={this._handleChange}
+              placeholder={searchPlaceholder}
+            />
+          </div>
           <div style={{ height: listHeight }}>
             {loading && (
               <Flex alignCenter justifyCenter className='gm-bg gm-padding-5'>
@@ -313,16 +299,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   }
 
   private _handlePopoverVisibleChange = (active: boolean) => {
-    if (this.props.isSameAntd) {
-      this.setState({
-        isOpen: active,
-      })
-      if (!this.props.multiple && !active) {
-        this.setState({ searchValue: undefined })
-      }
-    }
-
-    if (active && this.props.searchOnActive && !this.props.isSameAntd) {
+    if (active && this.props.searchOnActive) {
       const searchValue = localStorage.getItem('_GM-PC_MORESELECT_SEARCHVALUE')
       if (searchValue) {
         this.setState({ searchValue })
@@ -348,11 +325,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       style,
       popoverType,
       children,
-      searchPlaceholder,
-      isSameAntd = false,
     } = this.props
-    const { searchValue } = this.state
-
     return (
       <ConfigConsumer>
         {(config) => (
@@ -373,9 +346,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
               ref={this._popoverRef}
               type={popoverType}
               popup={() => this._renderList(config)}
-              disabled={
-                disabled || (!isSameAntd ? false : this.state.searchValue === undefined)
-              }
+              disabled={disabled}
               isInPopup={isInPopup}
               onVisibleChange={this._handlePopoverVisibleChange}
             >
@@ -384,17 +355,13 @@ class MoreSelectBase<V extends string | number = string> extends Component<
                   ref={this._selectionRef}
                   tabIndex={0}
                   wrap
-                  className={classNames({
-                    'gm-more-select-selected': true,
-                    'gm-more-select-selected-antd': isSameAntd,
-                  })}
+                  className='gm-more-select-selected'
                 >
                   {selected.length !== 0 ? (
                     selected.map((item) => (
                       <Flex
                         key={item.value as any}
                         className='gm-more-select-selected-item'
-                        alignCenter
                       >
                         <Popover
                           disabled={!this.props.isKeyboard}
@@ -402,23 +369,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
                           popup={<div className='gm-padding-10'>{item.text}</div>}
                         >
                           <Flex flex column>
-                            {isSameAntd ? (
-                              <div className='gm-more-select-popup-input'>
-                                <Input
-                                  ref={this._inputRef}
-                                  value={
-                                    !this.state.isOpen
-                                      ? renderSelected!(item)
-                                      : searchValue
-                                  }
-                                  onChange={this._handleChange}
-                                  placeholder={searchPlaceholder}
-                                  className='gm-more-select-popup-input-no-border'
-                                />
-                              </div>
-                            ) : (
-                              renderSelected!(item)
-                            )}
+                            {renderSelected!(item)}
                           </Flex>
                         </Popover>
                         {multiple ? (
@@ -442,20 +393,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
                     ))
                   ) : (
                     // 加多个 &nbsp; 避免对齐问题，有文本才有对齐
-                    <>
-                      {isSameAntd ? (
-                        <Input
-                          ref={this._inputRef}
-                          value={searchValue}
-                          onChange={this._handleChange}
-                          placeholder={searchPlaceholder}
-                          className='gm-more-select-popup-input-no-border'
-                        />
-                      ) : (
-                        <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
-                      )}
-                    </>
-                    //
+                    <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
                   )}
                 </Flex>
               )}

package/src/component/more_select/style.less

@@ -14,15 +14,10 @@
     }
   }
 
-  .gm-more-select-selected-antd {
-    padding: 0 12px;
-  }
-
   .gm-more-select-clear-btn {
     position: absolute;
-    right: 4px;
-    top: 50%;
-    transform: translateY(-50%);
+    right: 5px;
+    top: 7px;
     cursor: pointer;
     color: var(--gm-color-desc);
   }
@@ -75,10 +70,3 @@
     }
   }
 }
-
-.gm-more-select-popup-input-no-border {
-  border: none !important;
-  border-radius: 0 !important;
-  padding: 0 !important;
-  box-shadow: none !important;
-}

package/src/component/more_select/types.ts

@@ -80,8 +80,6 @@ interface MoreSelectBaseProps<V extends string | number = string>
   ): MoreSelectGroupDataItem<V>[]
   /** 是否在active的时候搜索，订单业务相关，searchValue放在localstorage */
   searchOnActive?: boolean
-  /** 是否用select */
-  isSameAntd?: boolean
 }
 
 type MoreSelectData<V extends string | number = string> =

package/src/component/pagination/left.tsx

@@ -6,13 +6,17 @@ import _ from 'lodash'
 import { getLocale } from '@gm-pc/locales'
 
 function getLimitData(limit: number, pageSizeOptions?: string[]) {
-  const limitData = [
-    { value: limit, text: limit + '' },
-    { value: 10, text: '10' },
-    { value: 20, text: '20' },
-    { value: 50, text: '50' },
-    ...(pageSizeOptions?.map((v) => ({ value: Number(v), text: v })) || []),
-  ]
+  let limitData = []
+  if (pageSizeOptions) {
+    limitData = pageSizeOptions.map((v) => ({ value: Number(v), text: v }))
+  } else {
+    limitData = [
+      { value: limit, text: limit + '' },
+      { value: 10, text: '10' },
+      { value: 20, text: '20' },
+      { value: 50, text: '50' },
+    ]
+  }
 
   return _.orderBy(
     _.uniqBy(limitData, (v) => v.value),