@gm-pc/react 1.26.2-beta.0 → 1.27.1-beta.0

package/src/component/color_picker/color_picker.tsx

@@ -1,43 +1,43 @@
-import React, { FC, ReactNode, useRef } from 'react'
-import { Popover } from '../popover'
-import ColorSelect from './color_select'
-
-interface ColorPickerProps {
-  value?: string
-  onChange?: (color: string) => void
-  children: ReactNode
-}
-
-const ColorPicker: FC<ColorPickerProps> = ({ value, onChange, children }) => {
-  const refPopover = useRef<Popover>(null)
-
-  const handleConfirm = (color: string): void => {
-    refPopover.current && refPopover.current.apiDoSetActive(false)
-
-    onChange && onChange(color)
-  }
-
-  const handleCancel = (): void => {
-    refPopover.current && refPopover.current.apiDoSetActive(false)
-  }
-
-  return (
-    <Popover
-      ref={refPopover}
-      type='click'
-      showArrow
-      popup={
-        <ColorSelect
-          defaultColor={value}
-          onConfirm={handleConfirm}
-          onCancel={handleCancel}
-        />
-      }
-    >
-      {children}
-    </Popover>
-  )
-}
-
-export default ColorPicker
-export type { ColorPickerProps }
+import React, { FC, ReactNode, useRef } from 'react'
+import { Popover } from '../popover'
+import ColorSelect from './color_select'
+
+interface ColorPickerProps {
+  value?: string
+  onChange?: (color: string) => void
+  children: ReactNode
+}
+
+const ColorPicker: FC<ColorPickerProps> = ({ value, onChange, children }) => {
+  const refPopover = useRef<Popover>(null)
+
+  const handleConfirm = (color: string): void => {
+    refPopover.current && refPopover.current.apiDoSetActive(false)
+
+    onChange && onChange(color)
+  }
+
+  const handleCancel = (): void => {
+    refPopover.current && refPopover.current.apiDoSetActive(false)
+  }
+
+  return (
+    <Popover
+      ref={refPopover}
+      type='click'
+      showArrow
+      popup={
+        <ColorSelect
+          defaultColor={value}
+          onConfirm={handleConfirm}
+          onCancel={handleCancel}
+        />
+      }
+    >
+      {children}
+    </Popover>
+  )
+}
+
+export default ColorPicker
+export type { ColorPickerProps }

package/src/component/color_picker/color_select.tsx

@@ -1,97 +1,97 @@
-import React, { Component, createRef } from 'react'
-import _ from 'lodash'
-import COLOR_LIST from './color_list'
-import { Flex } from '../flex'
-import { Button } from '../button'
-import { getLocale } from '@gm-pc/locales'
-
-interface ColorSelectProps {
-  defaultColor: string
-  onCancel(): void
-  onConfirm(color: string): void
-}
-
-interface ColorSelectState {
-  color: string
-}
-
-class ColorSelect extends Component<ColorSelectProps, ColorSelectState> {
-  static defaultProps = {
-    defaultColor: '#fff',
-    onCancel: _.noop,
-    onConfirm: _.noop,
-  }
-
-  readonly state: ColorSelectState = {
-    color: this.props.defaultColor,
-  }
-
-  private _colorInputRef = createRef<HTMLInputElement>()
-
-  private _handleColorChange = (color: string): void => {
-    this.setState({ color })
-  }
-
-  private _handleCustomColor = (): void => {
-    this._colorInputRef.current!.click()
-  }
-
-  private _handleConfirm = (): void => {
-    this.props.onConfirm(this.state.color)
-  }
-
-  render() {
-    const { onCancel } = this.props
-    const { color } = this.state
-    return (
-      <Flex column className='gm-color-picker'>
-        {_.map(COLOR_LIST, (color) => (
-          <Flex
-            alignCenter
-            key={color.value}
-            className='gm-color-picker-color-default-item gm-bg-hover-primary'
-            onClick={() => this._handleColorChange(color.value)}
-          >
-            <div
-              style={{ background: color.value }}
-              className='gm-color-picker-color-point'
-            />
-            <div className='gm-padding-lr-10'>{color.text}</div>
-          </Flex>
-        ))}
-        <Flex alignCenter>
-          <div style={{ background: color }} className='gm-color-picker-color-point' />
-          <div className='gm-color-picker-addon'>#</div>
-          <input
-            type='text'
-            value={color?.replace('#', '')}
-            onChange={(event) => this._handleColorChange(`#${event.target.value}`)}
-          />
-        </Flex>
-        <input
-          ref={this._colorInputRef}
-          value={color?.slice(0, 7)}
-          defaultValue='#fff'
-          onChange={(event) => this._handleColorChange(event.target.value)}
-          type='color'
-          className='gm-hidden'
-        />
-        <Button onClick={this._handleCustomColor} type='link'>
-          {getLocale('自定义颜色')}
-        </Button>
-        <Flex justifyCenter className='gm-margin-top-10'>
-          <Button block onClick={onCancel}>
-            {getLocale('取消')}
-          </Button>
-          <div className='gm-gap-20' />
-          <Button block onClick={this._handleConfirm} type='primary'>
-            {getLocale('确定')}
-          </Button>
-        </Flex>
-      </Flex>
-    )
-  }
-}
-
-export default ColorSelect
-export type { ColorSelectProps }
+import React, { Component, createRef } from 'react'
+import _ from 'lodash'
+import COLOR_LIST from './color_list'
+import { Flex } from '../flex'
+import { Button } from '../button'
+import { getLocale } from '@gm-pc/locales'
+
+interface ColorSelectProps {
+  defaultColor: string
+  onCancel(): void
+  onConfirm(color: string): void
+}
+
+interface ColorSelectState {
+  color: string
+}
+
+class ColorSelect extends Component<ColorSelectProps, ColorSelectState> {
+  static defaultProps = {
+    defaultColor: '#fff',
+    onCancel: _.noop,
+    onConfirm: _.noop,
+  }
+
+  readonly state: ColorSelectState = {
+    color: this.props.defaultColor,
+  }
+
+  private _colorInputRef = createRef<HTMLInputElement>()
+
+  private _handleColorChange = (color: string): void => {
+    this.setState({ color })
+  }
+
+  private _handleCustomColor = (): void => {
+    this._colorInputRef.current!.click()
+  }
+
+  private _handleConfirm = (): void => {
+    this.props.onConfirm(this.state.color)
+  }
+
+  render() {
+    const { onCancel } = this.props
+    const { color } = this.state
+    return (
+      <Flex column className='gm-color-picker'>
+        {_.map(COLOR_LIST, (color) => (
+          <Flex
+            alignCenter
+            key={color.value}
+            className='gm-color-picker-color-default-item gm-bg-hover-primary'
+            onClick={() => this._handleColorChange(color.value)}
+          >
+            <div
+              style={{ background: color.value }}
+              className='gm-color-picker-color-point'
+            />
+            <div className='gm-padding-lr-10'>{color.text}</div>
+          </Flex>
+        ))}
+        <Flex alignCenter>
+          <div style={{ background: color }} className='gm-color-picker-color-point' />
+          <div className='gm-color-picker-addon'>#</div>
+          <input
+            type='text'
+            value={color?.replace('#', '')}
+            onChange={(event) => this._handleColorChange(`#${event.target.value}`)}
+          />
+        </Flex>
+        <input
+          ref={this._colorInputRef}
+          value={color?.slice(0, 7)}
+          defaultValue='#fff'
+          onChange={(event) => this._handleColorChange(event.target.value)}
+          type='color'
+          className='gm-hidden'
+        />
+        <Button onClick={this._handleCustomColor} type='link'>
+          {getLocale('自定义颜色')}
+        </Button>
+        <Flex justifyCenter className='gm-margin-top-10'>
+          <Button block onClick={onCancel}>
+            {getLocale('取消')}
+          </Button>
+          <div className='gm-gap-20' />
+          <Button block onClick={this._handleConfirm} type='primary'>
+            {getLocale('确定')}
+          </Button>
+        </Flex>
+      </Flex>
+    )
+  }
+}
+
+export default ColorSelect
+export type { ColorSelectProps }

package/src/component/color_picker/index.ts

@@ -1,2 +1,2 @@
-export { default as ColorPicker } from './color_picker'
-export type { ColorPickerProps } from './color_picker'
+export { default as ColorPicker } from './color_picker'
+export type { ColorPickerProps } from './color_picker'

package/src/component/color_picker/stories.tsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import { observable } from 'mobx'
-import ColorPicker from './color_picker'
-
-const store = observable({
-  color: '',
-  setColor(color: string) {
-    this.color = color
-  },
-})
-
-export const ComColorPicker = () => (
-  <ColorPicker value={store.color} onChange={(value) => store.setColor(value)}>
-    <span>选择颜色 {store.color}</span>
-  </ColorPicker>
-)
-
-export default {
-  title: '表单/ColorPicker',
-}
+import React from 'react'
+import { observable } from 'mobx'
+import ColorPicker from './color_picker'
+
+const store = observable({
+  color: '',
+  setColor(color: string) {
+    this.color = color
+  },
+})
+
+export const ComColorPicker = () => (
+  <ColorPicker value={store.color} onChange={(value) => store.setColor(value)}>
+    <span>选择颜色 {store.color}</span>
+  </ColorPicker>
+)
+
+export default {
+  title: '表单/ColorPicker',
+}

package/src/component/color_picker/style.less

@@ -1,41 +1,41 @@
-.gm-color-picker-color-point {
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  margin: 3px;
-  display: inline-block;
-}
-
-.gm-color-picker {
-  padding: 20px;
-  background: white;
-  position: relative;
-
-  .gm-color-picker-color-default-item {
-    padding: 5px 0;
-    cursor: pointer;
-  }
-
-  .gm-color-picker-addon {
-    background: rgb(240, 240, 240);
-    color: rgb(152, 161, 164);
-    font-weight: bolder;
-    line-height: 25px;
-    text-align: center;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    margin-right: 0;
-  }
-
-  input {
-    width: 70px;
-    color: rgb(102, 102, 102);
-    border: 0;
-    outline: none;
-    height: 25px;
-    margin: 3px 3px 3px 0;
-    box-shadow: rgb(240, 240, 240) 0 0 0 1px inset;
-    border-radius: 0 4px 4px 0;
-    padding-left: 8px;
-  }
-}
+.gm-color-picker-color-point {
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  margin: 3px;
+  display: inline-block;
+}
+
+.gm-color-picker {
+  padding: 20px;
+  background: white;
+  position: relative;
+
+  .gm-color-picker-color-default-item {
+    padding: 5px 0;
+    cursor: pointer;
+  }
+
+  .gm-color-picker-addon {
+    background: rgb(240, 240, 240);
+    color: rgb(152, 161, 164);
+    font-weight: bolder;
+    line-height: 25px;
+    text-align: center;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-right: 0;
+  }
+
+  input {
+    width: 70px;
+    color: rgb(102, 102, 102);
+    border: 0;
+    outline: none;
+    height: 25px;
+    margin: 3px 3px 3px 0;
+    box-shadow: rgb(240, 240, 240) 0 0 0 1px inset;
+    border-radius: 0 4px 4px 0;
+    padding-left: 8px;
+  }
+}

package/src/component/config_provider/config_provider.tsx

@@ -1,16 +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
+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

@@ -1,10 +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
+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

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

package/src/component/controlled_form/context.tsx

@@ -1,18 +1,18 @@
-import _ from 'lodash'
-import { ReactNode, createContext } from 'react'
-
-import { FormInstance } from '../../common/hooks'
-export interface ControlledFormContextProps
-  extends Partial<Omit<FormInstance, 'apiDoValidate'>> {
-  values?: { [key: string]: any }
-  hideItems?: { [key: string]: boolean }
-  onChange?(fieldName: string, originValue: any): any
-  setCanSubmit(key: string, message: ReactNode): void
-  didClickSubmit: boolean
-}
-export const ControlledFormContext = createContext<ControlledFormContextProps>({
-  values: {},
-  hideItems: {},
-  setCanSubmit: _.noop,
-  didClickSubmit: false,
-})
+import _ from 'lodash'
+import { ReactNode, createContext } from 'react'
+
+import { FormInstance } from '../../common/hooks'
+export interface ControlledFormContextProps
+  extends Partial<Omit<FormInstance, 'apiDoValidate'>> {
+  values?: { [key: string]: any }
+  hideItems?: { [key: string]: boolean }
+  onChange?(fieldName: string, originValue: any): any
+  setCanSubmit(key: string, message: ReactNode): void
+  didClickSubmit: boolean
+}
+export const ControlledFormContext = createContext<ControlledFormContextProps>({
+  values: {},
+  hideItems: {},
+  setCanSubmit: _.noop,
+  didClickSubmit: false,
+})