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

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'