@gm-pc/react 1.21.0 → 1.21.1-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.21.0",
+  "version": "1.21.1-alpha.4",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -48,5 +48,5 @@
     "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "79604d9169f1202b19a501fcfe2a51d0a513f493"
+  "gitHead": "0ca36eb94f309b229dd8f7e29756e86802fe3de2"
 }

package/src/component/button/button.tsx

@@ -1,8 +1,9 @@
-import React, { FC, useState, MouseEvent, AnchorHTMLAttributes } from 'react'
+import React, { FC, useState, MouseEvent, AnchorHTMLAttributes, useContext } from 'react'
 import _ from 'lodash'
 import classNames from 'classnames'
 import { is } from '@gm-common/tool'
 import { Loading } from '../loading'
+import { ConfigContext } from '../config_provider'
 
 type ButtonType = 'default' | 'primary' | 'success' | 'danger' | 'link'
 type ButtonSize = 'small' | 'middle' | 'large'
@@ -36,6 +37,7 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const [isLoading, setIsLoading] = useState(false)
+  const { fontSize } = useContext(ConfigContext)
 
   const loadFlag = loading || isLoading
 
@@ -69,8 +71,9 @@ const Button: FC<ButtonProps> = ({
         `gm-btn gm-btn-${type}`,
         {
           'gm-btn-block': block,
-          [`gm-btn-${size}`]: size,
           'gm-btn-plain': type !== 'link' && plain,
+          [`gm-btn-${size}`]: size,
+          [`gm-btn-text-${fontSize}`]: !!fontSize,
         },
         className
       )}

package/src/component/button/style.less

@@ -77,6 +77,11 @@
   &:focus {
     outline: none;
   }
+
+  /** 字体大小 */
+  &.gm-btn-text-sm {
+    font-size: 14px;
+  }
 }
 
 @keyframes gm-btn-rotating {

package/src/component/config_provider/config_provider.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react'
+import { ConfigContext } from './context'
+
+/** xs: 12px sm: 14px */
+export type FontSizeType = 'xs' | 'sm'
+
+export interface ConfigProviderProps {
+  fontSize?: FontSizeType
+}
+
+// 加一个div加上css var
+const ConfigProvider: FC<ConfigProviderProps> = ({ children, ...config }) => {
+  return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
+}
+
+export default ConfigProvider

package/src/component/config_provider/context.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+import { FontSizeType } from './config_provider'
+
+export interface ConfigConsumerProps {
+  fontSize?: FontSizeType
+}
+
+export const ConfigContext = createContext<ConfigConsumerProps>({})
+
+export const ConfigConsumer = ConfigContext.Consumer

package/src/component/config_provider/index.ts

@@ -0,0 +1,3 @@
+export { default as ConfigProvider } from './config_provider'
+export type { ConfigProviderProps } from './config_provider'
+export * from './context'

package/src/component/form/form.tsx

@@ -11,6 +11,7 @@ import classNames from 'classnames'
 import FormContext from './context'
 import Validator from '../../validator'
 import { FormProps, FormItemProps } from './types'
+import { ConfigConsumer } from '../config_provider'
 const { Provider } = FormContext
 
 interface FormState {
@@ -117,14 +118,22 @@ class Form extends Component<FormProps, FormState> {
       <Provider
         value={{ labelWidth, disabledCol, inline, btnPosition, colWidth, canValidate }}
       >
-        <form
-          {...rest}
-          className={classNames('gm-form', { 'form-inline': inline }, className)}
-          onSubmit={this._handleSubmit}
-        >
-          {children}
-          {hasButtonInGroup && <button type='submit' style={{ display: 'none' }} />}
-        </form>
+        <ConfigConsumer>
+          {({ fontSize }) => (
+            <form
+              {...rest}
+              className={classNames(
+                'gm-form',
+                { 'form-inline': inline, [`gm-form-text-${fontSize}`]: fontSize },
+                className
+              )}
+              onSubmit={this._handleSubmit}
+            >
+              {children}
+              {hasButtonInGroup && <button type='submit' style={{ display: 'none' }} />}
+            </form>
+          )}
+        </ConfigConsumer>
       </Provider>
     )
   }

package/src/component/form/style.less

@@ -58,6 +58,19 @@
     right: -28px;
     top: 7px;
   }
+
+  /** 字体大小 */
+  &.gm-form-text-sm {
+    font-size: var(--gm-size-text-sm);
+
+    .gm-form-label {
+      font-size: var(--gm-size-text-sm);
+    }
+
+    .gm-form-control {
+      font-size: var(--gm-size-text-sm);
+    }
+  }
 }
 
 @media (max-width: 768px) {

package/src/component/input/input.tsx

@@ -1,17 +1,21 @@
-import React, { forwardRef, InputHTMLAttributes } from 'react'
+import React, { forwardRef, InputHTMLAttributes, useContext } from 'react'
 import classNames from 'classnames'
+import { ConfigContext } from '../config_provider'
 
 type InputProps = InputHTMLAttributes<HTMLInputElement>
 
 /** 没什么，就一个input，多了个类名 gm-input 用来和库配合做UI */
 const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const { className, value = '', ...rest } = props
+  const { fontSize } = useContext(ConfigContext)
   return (
     <input
       ref={ref}
       {...rest}
       value={value}
-      className={classNames('gm-input', className)}
+      className={classNames('gm-input', className, {
+        [`gm-input-${fontSize}`]: fontSize,
+      })}
     />
   )
 })

package/src/component/input/style.less

@@ -2,6 +2,11 @@
   .gmFormControl();
 
   .gmDisabledBgWith();
+
+  /** 字体大小 */
+  &.gm-input-sm {
+    font-size: var(--gm-size-text-sm);
+  }
 }
 
 .gm-input-close {

package/src/component/level_select/level_select.tsx

@@ -7,6 +7,7 @@ import { LevelList } from '../level_list'
 import { getLevel } from '../level_list/utils'
 import _ from 'lodash'
 import { judgeFunction } from '../../common/utils'
+import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
 
 interface LevelSelectState<V> {
   willActiveSelected: V[]
@@ -48,22 +49,24 @@ class LevelSelect<V = any> extends Component<LevelSelectProps<V>, LevelSelectSta
     this.setState({ willActiveSelected })
   }
 
-  private _renderPopup = (): ReactNode => {
+  private _renderPopup = (config: ConfigProviderProps): ReactNode => {
     const { titles, data, selected, right, onlySelectLeaf } = this.props
     const { willActiveSelected } = this.state
     return (
-      <Flex justifyEnd={right}>
-        <LevelList<V>
-          isReverse={right}
-          data={data}
-          onWillActiveSelect={this._handleWillActiveSelect}
-          willActiveSelected={willActiveSelected}
-          selected={selected}
-          onSelect={this._handleSelect}
-          titles={titles}
-          onlySelectLeaf={onlySelectLeaf}
-        />
-      </Flex>
+      <ConfigProvider {...config}>
+        <Flex justifyEnd={right}>
+          <LevelList<V>
+            isReverse={right}
+            data={data}
+            onWillActiveSelect={this._handleWillActiveSelect}
+            willActiveSelected={willActiveSelected}
+            selected={selected}
+            onSelect={this._handleSelect}
+            titles={titles}
+            onlySelectLeaf={onlySelectLeaf}
+          />
+        </Flex>
+      </ConfigProvider>
     )
   }
 
@@ -192,16 +195,20 @@ class LevelSelect<V = any> extends Component<LevelSelectProps<V>, LevelSelectSta
   render() {
     const { disabled, children, popoverType, right } = this.props
     return (
-      <Popover
-        ref={this._popoverRef}
-        right={right}
-        disabled={disabled}
-        popup={this._renderPopup()}
-        type={popoverType}
-        pureContainer
-      >
-        {children ?? this._renderTarget()}
-      </Popover>
+      <ConfigConsumer>
+        {(config) => (
+          <Popover
+            ref={this._popoverRef}
+            right={right}
+            disabled={disabled}
+            popup={this._renderPopup(config)}
+            type={popoverType}
+            pureContainer
+          >
+            {children ?? this._renderTarget()}
+          </Popover>
+        )}
+      </ConfigConsumer>
     )
   }
 }

package/src/component/list/base.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { xor, flatMap, isNil, noop } from 'lodash'
 import { ListBaseProps } from './types'
 import { ListDataItem } from '../../types'
+import { ConfigConsumer } from '../config_provider'
 
 class Base<V = any> extends Component<ListBaseProps<V>> {
   static defaultProps = {
@@ -83,34 +84,45 @@ class Base<V = any> extends Component<ListBaseProps<V>> {
 
     let sequenceDataIndex = -1
     return (
-      <div
-        {...rest}
-        ref={this._listRef}
-        className={classNames('gm-list', { 'gm-list-group': isGroupList }, className)}
-      >
-        {data.map((group, gIndex) => (
-          <div key={gIndex} className='gm-list-group-item'>
-            <div className='gm-list-label'>{group.label}</div>
-            {group.children.map((item, index) => {
-              sequenceDataIndex++
-              return (
-                <div
-                  key={`${index}_${item.value}`}
-                  {...getItemProps!(item)}
-                  className={classNames('gm-list-item', {
-                    active: selected.includes(item.value),
-                    'will-active': willActiveIndex === sequenceDataIndex,
-                    disabled: item.disabled,
-                  })}
-                  onClick={() => this._handleSelect(item)}
-                >
-                  {renderItem!(item, index)}
-                </div>
-              )
-            })}
+      <ConfigConsumer>
+        {({ fontSize }) => (
+          <div
+            {...rest}
+            ref={this._listRef}
+            className={classNames(
+              'gm-list',
+              {
+                'gm-list-group': isGroupList,
+                [`gm-list-text-${fontSize}`]: fontSize,
+              },
+              className
+            )}
+          >
+            {data.map((group, gIndex) => (
+              <div key={gIndex} className='gm-list-group-item'>
+                <div className='gm-list-label'>{group.label}</div>
+                {group.children.map((item, index) => {
+                  sequenceDataIndex++
+                  return (
+                    <div
+                      key={`${index}_${item.value}`}
+                      {...getItemProps!(item)}
+                      className={classNames('gm-list-item', {
+                        active: selected.includes(item.value),
+                        'will-active': willActiveIndex === sequenceDataIndex,
+                        disabled: item.disabled,
+                      })}
+                      onClick={() => this._handleSelect(item)}
+                    >
+                      {renderItem!(item, index)}
+                    </div>
+                  )
+                })}
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        )}
+      </ConfigConsumer>
     )
   }
 }

package/src/component/list/style.less

@@ -48,4 +48,11 @@
       padding: 9px 10px 9px 22px;
     }
   }
+
+  /** 字体大小 */
+  &.gm-list-text-sm {
+    .gm-list-item {
+      font-size: var(--gm-size-text-sm);
+    }
+  }
 }

package/src/component/more_select/base.tsx

@@ -19,6 +19,7 @@ import { Loading } from '../loading'
 import { getLocale } from '@gm-pc/locales'
 import { ListBase } from '../list'
 import { findDOMNode } from 'react-dom'
+import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
 
 interface MoreSelectBaseState {
   searchValue: string
@@ -231,7 +232,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     )
   }
 
-  private _renderList = (): ReactNode => {
+  private _renderList = (config: ConfigProviderProps): ReactNode => {
     const {
       selected = [],
       multiple,
@@ -245,46 +246,48 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     const { loading, searchValue, willActiveIndex } = this.state
     const filterData = this._getFilterData()
     return (
-      <div
-        className={classNames('gm-more-select-popup', popupClassName)}
-        onKeyDown={this._handlePopupKeyDown}
-      >
-        <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'>
-              <Loading size='20px' />
-            </Flex>
-          )}
-          {!loading && !filterData.length && this._renderEmpty()}
-          {!loading && !!filterData.length && (
-            <ListBase
-              selected={selected.map((v) => v.value)}
-              data={filterData}
-              multiple={multiple}
-              isGroupList={isGroupList}
-              className='gm-border-0'
-              renderItem={renderListItem}
-              onSelect={this._handleSelect}
-              isScrollTo
-              willActiveIndex={willActiveIndex!}
-              style={{ height: listHeight }}
+      <ConfigProvider {...config}>
+        <div
+          className={classNames('gm-more-select-popup', popupClassName)}
+          onKeyDown={this._handlePopupKeyDown}
+        >
+          <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'>
+                <Loading size='20px' />
+              </Flex>
+            )}
+            {!loading && !filterData.length && this._renderEmpty()}
+            {!loading && !!filterData.length && (
+              <ListBase
+                selected={selected.map((v) => v.value)}
+                data={filterData}
+                multiple={multiple}
+                isGroupList={isGroupList}
+                className='gm-border-0'
+                renderItem={renderListItem}
+                onSelect={this._handleSelect}
+                isScrollTo
+                willActiveIndex={willActiveIndex!}
+                style={{ height: listHeight }}
+              />
+            )}
+          </div>
+          {!loading &&
+            !!filterData.length &&
+            renderCustomizedBottom &&
+            renderCustomizedBottom(this._popoverRef)}
         </div>
-        {!loading &&
-          !!filterData.length &&
-          renderCustomizedBottom &&
-          renderCustomizedBottom(this._popoverRef)}
-      </div>
+      </ConfigProvider>
     )
   }
 
@@ -324,69 +327,80 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       children,
     } = this.props
     return (
-      <div
-        ref={this._baseRef}
-        onClick={this._handleMoreSelectClick}
-        className={classNames(
-          'gm-more-select',
-          {
-            disabled,
-            'gm-more-select-multiple': multiple,
-          },
-          className
-        )}
-        style={style}
-      >
-        <Popover
-          ref={this._popoverRef}
-          type={popoverType}
-          popup={this._renderList}
-          disabled={disabled}
-          isInPopup={isInPopup}
-          onVisibleChange={this._handlePopoverVisibleChange}
-        >
-          {children ?? (
-            <Flex
-              ref={this._selectionRef}
-              tabIndex={0}
-              wrap
-              className='gm-more-select-selected'
+      <ConfigConsumer>
+        {(config) => (
+          <div
+            ref={this._baseRef}
+            onClick={this._handleMoreSelectClick}
+            className={classNames(
+              'gm-more-select',
+              {
+                disabled,
+                'gm-more-select-multiple': multiple,
+              },
+              className
+            )}
+            style={style}
+          >
+            <Popover
+              ref={this._popoverRef}
+              type={popoverType}
+              popup={() => this._renderList(config)}
+              disabled={disabled}
+              isInPopup={isInPopup}
+              onVisibleChange={this._handlePopoverVisibleChange}
             >
-              {selected.length !== 0 ? (
-                selected.map((item) => (
-                  <Flex key={item.value as any} className='gm-more-select-selected-item'>
-                    <Popover
-                      disabled={!this.props.isKeyboard}
-                      type='hover'
-                      popup={<div className='gm-padding-10'>{item.text}</div>}
-                    >
-                      <Flex flex column>
-                        {renderSelected!(item)}
+              {children ?? (
+                <Flex
+                  ref={this._selectionRef}
+                  tabIndex={0}
+                  wrap
+                  className='gm-more-select-selected'
+                >
+                  {selected.length !== 0 ? (
+                    selected.map((item) => (
+                      <Flex
+                        key={item.value as any}
+                        className='gm-more-select-selected-item'
+                      >
+                        <Popover
+                          disabled={!this.props.isKeyboard}
+                          type='hover'
+                          popup={<div className='gm-padding-10'>{item.text}</div>}
+                        >
+                          <Flex flex column>
+                            {renderSelected!(item)}
+                          </Flex>
+                        </Popover>
+                        {multiple ? (
+                          <SVGRemove
+                            className='gm-cursor gm-more-select-clear-btn'
+                            onClick={
+                              disabled ? _.noop : this._handleClear.bind(this, item)
+                            }
+                          />
+                        ) : (
+                          !disabledClose && ( // 是否不限时清除按钮，仅单选可用
+                            <SVGCloseCircle
+                              onClick={
+                                disabled ? _.noop : this._handleClear.bind(this, item)
+                              }
+                              className='gm-cursor gm-more-select-clear-btn'
+                            />
+                          )
+                        )}
                       </Flex>
-                    </Popover>
-                    {multiple ? (
-                      <SVGRemove
-                        className='gm-cursor gm-more-select-clear-btn'
-                        onClick={disabled ? _.noop : this._handleClear.bind(this, item)}
-                      />
-                    ) : (
-                      !disabledClose && ( // 是否不限时清除按钮，仅单选可用
-                        <SVGCloseCircle
-                          onClick={disabled ? _.noop : this._handleClear.bind(this, item)}
-                          className='gm-cursor gm-more-select-clear-btn'
-                        />
-                      )
-                    )}
-                  </Flex>
-                ))
-              ) : (
-                // 加多个 &nbsp; 避免对齐问题，有文本才有对齐
-                <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
+                    ))
+                  ) : (
+                    // 加多个 &nbsp; 避免对齐问题，有文本才有对齐
+                    <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
+                  )}
+                </Flex>
               )}
-            </Flex>
-          )}
-        </Popover>
-      </div>
+            </Popover>
+          </div>
+        )}
+      </ConfigConsumer>
     )
   }
 }

package/src/component/recommend_input/recommend_input.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, FC, FocusEvent } from 'react'
+import React, { useMemo, useRef, FC, FocusEvent, useContext } from 'react'
 import { Popover } from '../popover'
 import { Input } from '../input'
 import { List } from '../list'
@@ -6,6 +6,7 @@ import _ from 'lodash'
 import { pinYinFilter } from '@gm-common/tool'
 import SVGCloseCircle from '../../svg/close-circle.svg'
 import classNames from 'classnames'
+import { ConfigContext, ConfigProvider } from '../config_provider'
 
 interface DataItem {
   text: string
@@ -31,6 +32,7 @@ const RecommendInput: FC<RecommendInputProps> = ({
   ...rest
 }) => {
   const popoverRef = useRef<Popover>(null)
+  const config = useContext(ConfigContext)
 
   // 构造list需要的数据结构
   const _data = useMemo(() => {
@@ -68,11 +70,13 @@ const RecommendInput: FC<RecommendInputProps> = ({
       type='realFocus'
       popup={
         searchData.length > 0 ? (
-          <List
-            data={searchData}
-            onSelect={handleSelect}
-            style={{ height: listHeight }}
-          />
+          <ConfigProvider {...config}>
+            <List
+              data={searchData}
+              onSelect={handleSelect}
+              style={{ height: listHeight }}
+            />
+          </ConfigProvider>
         ) : (
           <></> // 需要element
         )

package/src/component/select/select.tsx

@@ -7,6 +7,8 @@ import { Selection } from '../selection'
 import { List } from '../list'
 import { ListDataItem } from '../../types'
 import { judgeFunction } from '../../common/utils'
+import { ConfigConsumer, ConfigProvider } from '../config_provider'
+import { ConfigProviderProps, FontSizeType } from '../config_provider/config_provider'
 
 interface SelectState {
   willActiveIndex: number
@@ -108,26 +110,28 @@ class Select<V = any> extends Component<SelectProps<V>, SelectState> {
 
     const selected = newData.find((v) => v.value === value)
 
-    const popup = (
+    const popup = (config?: ConfigProviderProps) => (
       <>
-        <List
-          data={newData}
-          selected={value}
-          onSelect={this._handleChange}
-          renderItem={renderItem}
-          willActiveIndex={willActiveIndex}
-          className='gm-border-0'
-          style={{ maxHeight: '250px' }}
-        />
-        {addonLast && (
-          <div
-            onClick={() => {
-              this._popupRef.current!.apiDoSetActive()
-            }}
-          >
-            {addonLast}
-          </div>
-        )}
+        <ConfigProvider {...config}>
+          <List
+            data={newData}
+            selected={value}
+            onSelect={this._handleChange}
+            renderItem={renderItem}
+            willActiveIndex={willActiveIndex}
+            className='gm-border-0'
+            style={{ maxHeight: '250px' }}
+          />
+          {addonLast && (
+            <div
+              onClick={() => {
+                this._popupRef.current!.apiDoSetActive()
+              }}
+            >
+              {addonLast}
+            </div>
+          )}
+        </ConfigProvider>
       </>
     )
 
@@ -135,27 +139,31 @@ class Select<V = any> extends Component<SelectProps<V>, SelectState> {
     const handleChange = _.noop
 
     return (
-      <Popover
-        ref={this._popupRef}
-        type={popoverType}
-        disabled={disabled}
-        popup={popup}
-        isInPopup={isInPopup}
-      >
-        <Selection
-          {...rest}
-          ref={this._selectionRef}
-          selected={selected}
-          onSelect={handleChange}
-          disabled={disabled}
-          disabledClose
-          clean={clean}
-          renderSelected={renderSelected}
-          className={classNames('gm-select', className)}
-          noInput
-          onKeyDown={this._handleKeyDown}
-        />
-      </Popover>
+      <ConfigConsumer>
+        {(config) => (
+          <Popover
+            ref={this._popupRef}
+            type={popoverType}
+            disabled={disabled}
+            popup={popup(config)}
+            isInPopup={isInPopup}
+          >
+            <Selection
+              {...rest}
+              ref={this._selectionRef}
+              selected={selected}
+              onSelect={handleChange}
+              disabled={disabled}
+              disabledClose
+              clean={clean}
+              renderSelected={renderSelected}
+              className={classNames('gm-select', className)}
+              noInput
+              onKeyDown={this._handleKeyDown}
+            />
+          </Popover>
+        )}
+      </ConfigConsumer>
     )
   }
 }

package/src/component/selection/selection.tsx

@@ -12,6 +12,7 @@ import _ from 'lodash'
 import classNames from 'classnames'
 import SVGCloseCircle from '../../svg/close-circle.svg'
 import { IconDownUp } from '../icon_down_up'
+import { ConfigConsumer } from '../config_provider'
 
 type Selected = any
 
@@ -80,67 +81,79 @@ class Selection extends Component<SelectionProps> {
     }
 
     return (
-      <div
-        {...rest}
-        className={classNames(
-          'gm-selection',
-          {
-            disabled,
-            'gm-selection-disabled-clean': clean,
-            'gm-selection-disabled-close': disabledClose,
-          },
-          className
-        )}
-      >
-        {noInput ? (
+      <ConfigConsumer>
+        {({ fontSize }) => (
           <div
-            ref={this._inputRef}
-            // @ts-ignore
-            disabled={disabled}
-            className='gm-form-control gm-selection-selected gm-text-ellipsis'
-            tabIndex={0}
-            onKeyDown={onKeyDown}
-          >
-            {text || <span className='gm-text-desc'>{placeholder}</span>}
-          </div>
-        ) : (
-          <input
-            type='text'
-            ref={this._inputRef as RefObject<HTMLInputElement>}
-            disabled={disabled}
-            value={(text as string) || ''}
-            onChange={_.noop}
-            onKeyDown={onKeyDown}
-            placeholder={placeholder}
-            className='gm-form-control gm-selection-selected'
-          />
-        )}
-        {selected && !disabledClose && !clean && (
-          <SVGCloseCircle
-            onClick={this._handleClear}
-            className='gm-selection-icon gm-selection-close-icon'
-          />
-        )}
-        {funIcon ? (
-          cloneElement(funIcon as ReactElement, {
-            className: classNames(
-              'gm-selection-icon',
+            {...rest}
+            className={classNames(
+              'gm-selection',
               {
-                'gm-selection-fun-icon': selected && !disabledClose && !clean,
+                disabled,
+                'gm-selection-disabled-clean': clean,
+                'gm-selection-disabled-close': disabledClose,
+                [`gm-selection-text-${fontSize}`]: fontSize,
               },
-              (funIcon as ReactElement).props?.className
-            ),
-          })
-        ) : (
-          <IconDownUp
-            disabled={disabled}
-            active={(className ?? '').includes('gm-popover-active')}
-            className={classNames('gm-selection-icon', 'gm-selection-down-up', {
-              'gm-selection-fun-icon': selected && !disabledClose && !clean,
-            })}
-          />
+              className
+            )}
+          >
+            {noInput ? (
+              <div
+                ref={this._inputRef}
+                // @ts-ignore
+                disabled={disabled}
+                className={classNames(
+                  'gm-form-control gm-selection-selected gm-text-ellipsis',
+                  {
+                    [`gm-form-control-text-${fontSize}`]: fontSize,
+                  }
+                )}
+                tabIndex={0}
+                onKeyDown={onKeyDown}
+              >
+                {text || <span className='gm-text-desc'>{placeholder}</span>}
+              </div>
+            ) : (
+              <input
+                type='text'
+                ref={this._inputRef as RefObject<HTMLInputElement>}
+                disabled={disabled}
+                value={(text as string) || ''}
+                onChange={_.noop}
+                onKeyDown={onKeyDown}
+                placeholder={placeholder}
+                className={classNames('gm-form-control gm-selection-selected', {
+                  [`gm-form-control-text-${fontSize}`]: fontSize,
+                })}
+              />
+            )}
+            {selected && !disabledClose && !clean && (
+              <SVGCloseCircle
+                onClick={this._handleClear}
+                className='gm-selection-icon gm-selection-close-icon'
+              />
+            )}
+            {funIcon ? (
+              cloneElement(funIcon as ReactElement, {
+                className: classNames(
+                  'gm-selection-icon',
+                  {
+                    'gm-selection-fun-icon': selected && !disabledClose && !clean,
+                  },
+                  (funIcon as ReactElement).props?.className
+                ),
+              })
+            ) : (
+              <IconDownUp
+                disabled={disabled}
+                active={(className ?? '').includes('gm-popover-active')}
+                className={classNames('gm-selection-icon', 'gm-selection-down-up', {
+                  'gm-selection-fun-icon': selected && !disabledClose && !clean,
+                })}
+              />
+            )}
+          </div>
         )}
-      </div>
+      </ConfigConsumer>
     )
   }
 }

package/src/component/selection/style.less

@@ -57,4 +57,9 @@
       border: 1px solid transparent;
     }
   }
+
+  /** 字体大小 */
+  &.gm-selection-text-sm {
+    font-size: var(--gm-size-text-sm);
+  }
 }

package/src/component/textarea/style.less

@@ -5,4 +5,8 @@
   line-height: normal;
 
   .gmDisabledBgWith();
+
+  &.gm-textarea-text-sm {
+    font-size: var(--gm-size-text-sm);
+  }
 }

package/src/component/textarea/textarea.tsx

@@ -1,11 +1,21 @@
-import React, { forwardRef, TextareaHTMLAttributes } from 'react'
+import React, { forwardRef, TextareaHTMLAttributes, useContext } from 'react'
 import classNames from 'classnames'
+import { ConfigContext } from '../config_provider'
 
 type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>
 
 const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
+  const { fontSize } = useContext(ConfigContext)
   const { className, ...rest } = props
-  return <textarea ref={ref} {...rest} className={classNames('gm-textarea', className)} />
+  return (
+    <textarea
+      ref={ref}
+      {...rest}
+      className={classNames('gm-textarea', className, {
+        [`gm-textarea-text-${fontSize}`]: fontSize,
+      })}
+    />
+  )
 })
 
 export default TextArea

package/src/css/other.less

@@ -8,4 +8,8 @@
   .gmFormControl();
 
   .gmDisabledBgWith();
+
+  &.gm-form-control-text-sm {
+    font-size: var(--gm-size-text-sm);
+  }
 }

package/src/css/var/variables.less

@@ -17,6 +17,10 @@
 // grid
 @gm-grid-columns: 24;
 
+// 字体大小
+@gm-font-size-xs: 12px;
+@gm-font-size-sm: 14px;
+
 // 颜色会变
 :root {
   // color
@@ -81,6 +85,9 @@
   --gm-size-text-18: 18px;
   --gm-size-text-20: 20px;
 
+  --gm-size-text-xs: @gm-font-size-xs;
+  --gm-size-text-sm: @gm-font-size-sm;
+
   // 大小
   --gm-size-form-height: 30px;
   --gm-size-border-radius: 2px;

package/src/index.ts

@@ -58,3 +58,4 @@ export * from './component/recommend_input'
 export * from './component/card'
 export * from './component/controlled_form'
 export * from './component/v_browser'
+export * from './component/config_provider'

package/yarn-error.log

@@ -1,267 +0,0 @@
-Arguments: 
-  /usr/local/bin/node /usr/local/bin/yarn add react-router-dom^5.2.0 --peer
-
-PATH: 
-  /opt/intel/openvino_2021/deployment_tools/model_optimizer:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/VMware Fusion.app/Contents/Public:/usr/local/go/bin:/opt/X11/bin:/Library/Apple/usr/bin:/Users/jawei/google-cloud-sdk/bin:/Users/jawei/opt/anaconda3/bin:/Users/jawei/opt/anaconda3/condabin:/Library/Frameworks/Python.framework/Versions/3.8/bin:/Users/jawei/flutter/bin:/Users/yuanzhiying/Library/flutter/bin:/usr/local/go/bin
-
-Yarn version: 
-  1.22.10
-
-Node version: 
-  14.15.1
-
-Platform: 
-  darwin x64
-
-Trace: 
-  Error: https://registry.npm.taobao.org/react-router-dom%5E5.2.0: [NOT_FOUND] react-router-dom^5.2.0 not found
-      at Request.params.callback [as _callback] (/usr/local/lib/node_modules/yarn/lib/cli.js:66988:18)
-      at Request.self.callback (/usr/local/lib/node_modules/yarn/lib/cli.js:140662:22)
-      at Request.emit (events.js:315:20)
-      at Request.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:141634:10)
-      at Request.emit (events.js:315:20)
-      at Gunzip.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:141556:12)
-      at Object.onceWrapper (events.js:421:28)
-      at Gunzip.emit (events.js:315:20)
-      at endReadableNT (_stream_readable.js:1327:12)
-      at processTicksAndRejections (internal/process/task_queues.js:80:21)
-
-npm manifest: 
-  {
-    "name": "@gm-pc/react",
-    "version": "1.7.4-alpha.0",
-    "description": "观麦前端基础组件库",
-    "author": "liyatang <liyatang@qq.com>",
-    "homepage": "https://github.com/gmfe/gm-pc#readme",
-    "license": "ISC",
-    "publishConfig": {
-      "access": "public"
-    },
-    "main": "src/index.ts",
-    "module": "src/index.ts",
-    "types": "src/index.ts",
-    "repository": {
-      "type": "git",
-      "url": "git+https://github.com/gmfe/gm-pc.git"
-    },
-    "scripts": {
-      "test": "echo \"Error: run tests from root\" && exit 1"
-    },
-    "bugs": {
-      "url": "https://github.com/gmfe/gm-pc/issues"
-    },
-    "dependencies": {
-      "@gm-common/hooks": "^2.10.0",
-      "@gm-common/tool": "^2.10.0",
-      "@gm-pc/locales": "^1.7.4-alpha.0",
-      "big.js": "^6.0.1",
-      "classnames": "^2.2.5",
-      "lodash": "^4.17.19",
-      "modern-normalize": "^1.0.0",
-      "moment": "^2.29.1",
-      "react-window": "^1.8.5"
-    },
-    "devDependencies": {
-      "@types/react-router-dom": "^5.3.3",
-      "react": "^16.14.0",
-      "react-dom": "^16.14.0"
-    },
-    "peerDependencies": {
-      "big.js": "^6.0.1",
-      "classnames": "^2.2.5",
-      "lodash": "^4.17.19",
-      "modern-normalize": "^1.0.0",
-      "moment": "^2.29.1",
-      "react": "^16.14.0",
-      "react-dom": "^16.14.0",
-      "react-router-dom": "^5.2.0",
-      "react-window": "^1.8.5"
-    }
-  }
-
-yarn manifest: 
-  No manifest
-
-Lockfile: 
-  # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-  # yarn lockfile v1
-  
-  
-  "@babel/runtime@^7.0.0":
-    version "7.12.1"
-    resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.12.1.tgz?cache=0&sync_timestamp=1602799933339&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
-    integrity sha1-tBFqa2cR0BCy2tO3tuQ78bmVR0A=
-    dependencies:
-      regenerator-runtime "^0.13.4"
-  
-  "@gm-common/hooks@^2.10.0":
-    version "2.10.0"
-    resolved "https://registry.npmmirror.com/@gm-common/hooks/download/@gm-common/hooks-2.10.0.tgz#c67e02875b4d266ef911e7828257d957e923826b"
-    integrity sha1-xn4Ch1tNJm75EeeCglfZV+kjgms=
-    dependencies:
-      "@gm-common/tool" "^2.10.0"
-      ts-config-gm-react-app "^3.4.5"
-  
-  "@gm-common/tool@^2.10.0":
-    version "2.10.0"
-    resolved "https://registry.npmmirror.com/@gm-common/tool/download/@gm-common/tool-2.10.0.tgz#f4f512233ff1118eff8bbdeca9762f0e65ce26bd"
-    integrity sha1-9PUSIz/xEY7/i73sqXYvDmXOJr0=
-    dependencies:
-      lodash "^4.17.20"
-  
-  "@gm-pc/locales@^1.7.4-alpha.0":
-    version "1.8.6-alpha.0"
-    resolved "https://registry.npmmirror.com/@gm-pc/locales/-/locales-1.8.6-alpha.0.tgz#9fc9918454ee774c0d61ff41f5b33343411dd3c3"
-    integrity sha512-iNAdAuu8bg7F3xB7Vr0DgvY+jpJ1lxkOTAOw+2BK3ljI1eRTbIYkqvazX9ImrdcaB+7R0sbDGUMeR8Ca7iRY3w==
-  
-  "@types/history@^4.7.11":
-    version "4.7.11"
-    resolved "https://registry.npmmirror.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
-    integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
-  
-  "@types/prop-types@*":
-    version "15.7.4"
-    resolved "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
-    integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
-  
-  "@types/react-router-dom@^5.3.3":
-    version "5.3.3"
-    resolved "https://registry.npmmirror.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
-    integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
-    dependencies:
-      "@types/history" "^4.7.11"
-      "@types/react" "*"
-      "@types/react-router" "*"
-  
-  "@types/react-router@*":
-    version "5.1.18"
-    resolved "https://registry.npmmirror.com/@types/react-router/-/react-router-5.1.18.tgz#c8851884b60bc23733500d86c1266e1cfbbd9ef3"
-    integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==
-    dependencies:
-      "@types/history" "^4.7.11"
-      "@types/react" "*"
-  
-  "@types/react@*":
-    version "17.0.39"
-    resolved "https://registry.npmmirror.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
-    integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
-    dependencies:
-      "@types/prop-types" "*"
-      "@types/scheduler" "*"
-      csstype "^3.0.2"
-  
-  "@types/scheduler@*":
-    version "0.16.2"
-    resolved "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
-    integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
-  
-  big.js@^6.0.1:
-    version "6.0.1"
-    resolved "https://registry.npm.taobao.org/big.js/download/big.js-6.0.1.tgz#9e0a2e8b1825ce006cd4a096d6f294738cd5cff6"
-    integrity sha1-ngouixglzgBs1KCW1vKUc4zVz/Y=
-  
-  classnames@^2.2.5:
-    version "2.2.6"
-    resolved "https://registry.npm.taobao.org/classnames/download/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-    integrity sha1-Q5Nb/90pHzJtrQogUwmzjQD2UM4=
-  
-  csstype@^3.0.2:
-    version "3.0.10"
-    resolved "https://registry.npmmirror.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
-    integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
-  
-  "js-tokens@^3.0.0 || ^4.0.0":
-    version "4.0.0"
-    resolved "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-    integrity sha1-GSA/tZmR35jjoocFDUZHzerzJJk=
-  
-  lodash@^4.17.19, lodash@^4.17.20:
-    version "4.17.20"
-    resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-    integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
-  
-  loose-envify@^1.1.0, loose-envify@^1.4.0:
-    version "1.4.0"
-    resolved "https://registry.npm.taobao.org/loose-envify/download/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-    integrity sha1-ce5R+nvkyuwaY4OffmgtgTLTDK8=
-    dependencies:
-      js-tokens "^3.0.0 || ^4.0.0"
-  
-  "memoize-one@>=3.1.1 <6":
-    version "5.1.1"
-    resolved "https://registry.npm.taobao.org/memoize-one/download/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
-    integrity sha1-BHtuMZm1COrsA1BN5xIpuOsddcA=
-  
-  modern-normalize@^1.0.0:
-    version "1.0.0"
-    resolved "https://registry.npm.taobao.org/modern-normalize/download/modern-normalize-1.0.0.tgz#539d84a1e141338b01b346f3e27396d0ed17601e"
-    integrity sha1-U52EoeFBM4sBs0bz4nOW0O0XYB4=
-  
-  moment@^2.29.1:
-    version "2.29.1"
-    resolved "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
-    integrity sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M=
-  
-  object-assign@^4.1.1:
-    version "4.1.1"
-    resolved "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-    integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-  
-  prop-types@^15.6.2:
-    version "15.7.2"
-    resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-    integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
-    dependencies:
-      loose-envify "^1.4.0"
-      object-assign "^4.1.1"
-      react-is "^16.8.1"
-  
-  react-dom@^16.14.0:
-    version "16.14.0"
-    resolved "https://registry.npm.taobao.org/react-dom/download/react-dom-16.14.0.tgz?cache=0&sync_timestamp=1603367590403&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-dom%2Fdownload%2Freact-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-    integrity sha1-etg47Cmnd/s8dcOhkPZhz5Kri4k=
-    dependencies:
-      loose-envify "^1.1.0"
-      object-assign "^4.1.1"
-      prop-types "^15.6.2"
-      scheduler "^0.19.1"
-  
-  react-is@^16.8.1:
-    version "16.13.1"
-    resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz?cache=0&sync_timestamp=1603367576715&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-is%2Fdownload%2Freact-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-    integrity sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ=
-  
-  react-window@^1.8.5:
-    version "1.8.6"
-    resolved "https://registry.npm.taobao.org/react-window/download/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
-    integrity sha1-0BGVCsZDqZQRhjJmWq0MY4LioRI=
-    dependencies:
-      "@babel/runtime" "^7.0.0"
-      memoize-one ">=3.1.1 <6"
-  
-  react@^16.14.0:
-    version "16.14.0"
-    resolved "https://registry.npm.taobao.org/react/download/react-16.14.0.tgz?cache=0&sync_timestamp=1603367592109&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact%2Fdownload%2Freact-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-    integrity sha1-lNd23dCqo32j7aj8W2sYpMmjEU0=
-    dependencies:
-      loose-envify "^1.1.0"
-      object-assign "^4.1.1"
-      prop-types "^15.6.2"
-  
-  regenerator-runtime@^0.13.4:
-    version "0.13.7"
-    resolved "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz?cache=0&sync_timestamp=1595456311465&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
-    integrity sha1-ysLazIoepnX+qrrriugziYrkb1U=
-  
-  scheduler@^0.19.1:
-    version "0.19.1"
-    resolved "https://registry.npm.taobao.org/scheduler/download/scheduler-0.19.1.tgz?cache=0&sync_timestamp=1603367591660&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fscheduler%2Fdownload%2Fscheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-    integrity sha1-Tz4u0sGn1laB9MhU+oxaHMtA8ZY=
-    dependencies:
-      loose-envify "^1.1.0"
-      object-assign "^4.1.1"
-  
-  ts-config-gm-react-app@^3.4.5:
-    version "3.4.7"
-    resolved "https://registry.npmjs.org/ts-config-gm-react-app/-/ts-config-gm-react-app-3.4.7.tgz#51decbf847c991ae8e3bd950f3f84cfb0523ba4b"
-    integrity sha512-1XOMmAIEiUr2R0JTasF30zj5ZRZgVTOx/ycZJOh2xusQCYC4n1/wGbXfEzm8Dzhv2YSWHEWPVHpytAM3mYsu9Q==