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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.21.0",
+  "version": "1.21.1-alpha.5",
   "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.21.0",
+    "@gm-pc/locales": "^1.21.1-alpha.5",
     "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": "79604d9169f1202b19a501fcfe2a51d0a513f493"
+  "gitHead": "9fa8a4ec1cc2fd5edd7d9decdae5c557a4750afd"
 }

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/dialog/prompt.tsx

@@ -4,6 +4,7 @@ import Dialog from './dialog'
 import { PromptProps } from './types'
 import { getLocale } from '@gm-pc/locales'
 import { Input } from '../input'
+import { ConfigProvider } from '../config_provider'
 
 const Prompt = (props: string | PromptProps): Promise<string> => {
   let p = props
@@ -20,6 +21,7 @@ const Prompt = (props: string | PromptProps): Promise<string> => {
     defaultValue,
     placeholder,
     onValidate,
+    fontSize,
     ...rest
   } = p as PromptProps
 
@@ -43,24 +45,26 @@ const Prompt = (props: string | PromptProps): Promise<string> => {
     }
 
     const child = (
-      <div>
+      <ConfigProvider fontSize={fontSize}>
         <div>
-          <Input
-            type='text'
-            defaultValue={value}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              value = e.target.value
-            }}
-            placeholder={placeholder}
-            onKeyDown={(e: KeyboardEvent) => {
-              if (e.key === 'Enter') {
-                handleOk()
-              }
-            }}
-          />
+          <div>
+            <Input
+              type='text'
+              defaultValue={value}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                value = e.target.value
+              }}
+              placeholder={placeholder}
+              onKeyDown={(e: KeyboardEvent) => {
+                if (e.key === 'Enter') {
+                  handleOk()
+                }
+              }}
+            />
+          </div>
+          {children}
         </div>
-        {children}
-      </div>
+      </ConfigProvider>
     )
 
     Dialog.render({

package/src/component/dialog/stories.tsx

@@ -4,6 +4,7 @@ import Alert from './alert'
 import Confirm from './confirm'
 import Prompt from './prompt'
 import Delete from './delete_com'
+import { ConfigProvider } from '../config_provider'
 
 export const ComDialog = () => {
   return (
@@ -156,6 +157,7 @@ export const ComPrompt = () => {
       <button
         onClick={() => {
           Prompt({
+            fontSize: 'sm',
             size: 'sm',
             children: '请填写，< 5 不通过',
             // @ts-ignore
@@ -182,6 +184,12 @@ export const ComPrompt = () => {
   )
 }
 
+export const ComPromptFontSize = () => (
+  <ConfigProvider fontSize='sm'>
+    <ComPrompt />
+  </ConfigProvider>
+)
+
 export default {
   title: '反馈/Dialog',
 }

package/src/component/dialog/types.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react'
 import { ButtonType } from '../button'
+import { ConfigProviderProps } from '../config_provider'
 
 type DialogSize = 'sm' | 'md' | 'lg' | 'xl'
 
@@ -12,7 +13,7 @@ interface DialogButtonProps {
   disabled?: boolean
 }
 
-interface DialogProps {
+interface DialogProps extends ConfigProviderProps {
   title?: string
   size?: DialogSize
   buttons?: DialogButtonProps[]
@@ -42,7 +43,7 @@ interface ConfirmProps extends SpecificDialogProps {
   read?: boolean | string
 }
 
-interface PromptProps extends ConfirmProps {
+interface PromptProps extends ConfirmProps, ConfigProviderProps {
   defaultValue?: string
   placeholder?: string
 }

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/function_set/function_set.tsx

@@ -5,6 +5,7 @@ import Overlay from './overlay'
 import { Button } from '../button'
 import { getLocale } from '@gm-pc/locales'
 import { IconDownUp } from '../icon_down_up'
+import { ConfigConsumer, ConfigProvider } from '../config_provider'
 
 interface InnerProps extends HTMLAttributes<HTMLDivElement> {
   disabled: boolean
@@ -59,16 +60,24 @@ class FunctionSet extends Component<FunctionSetProps> {
       return null
     }
     return (
-      <Popover
-        ref={this._popoverRef}
-        popup={<Overlay data={newData} onSelect={this._handleSelect} isReverse={right} />}
-        right={right}
-        type='hover'
-        disabled={disabled}
-        pureContainer
-      >
-        <Inner disabled={!!disabled}>{children}</Inner>
-      </Popover>
+      <ConfigConsumer>
+        {(config) => (
+          <Popover
+            ref={this._popoverRef}
+            popup={
+              <ConfigProvider {...config}>
+                <Overlay data={newData} onSelect={this._handleSelect} isReverse={right} />
+              </ConfigProvider>
+            }
+            right={right}
+            type='hover'
+            disabled={disabled}
+            pureContainer
+          >
+            <Inner disabled={!!disabled}>{children}</Inner>
+          </Popover>
+        )}
+      </ConfigConsumer>
     )
   }
 }

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);
+    }
+  }
 }