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

package/src/component/input/stories.tsx

@@ -1,56 +1,56 @@
-import React from 'react'
-import Input from './input'
-import InputClose from './input_close'
-import { observable } from 'mobx'
-
-const store = observable({
-  value: 'a',
-})
-
-export const ComInput = () => {
-  return (
-    <div className='gm-padding-10' style={{ width: '200px' }}>
-      <Input
-        placeholder='请输入'
-        value={store.value}
-        onChange={(e) => {
-          store.value = e.target.value
-        }}
-      />
-      <Input
-        placeholder='请输入'
-        value={store.value}
-        onChange={(e) => {
-          store.value = e.target.value
-        }}
-        disabled
-      />
-    </div>
-  )
-}
-
-export const ComInputClose = () => {
-  return (
-    <div className='gm-padding-10' style={{ width: '200px' }}>
-      <InputClose
-        placeholder='请输入'
-        value={store.value}
-        onChange={(value: string) => {
-          store.value = value
-        }}
-      />
-      <InputClose
-        placeholder='请输入'
-        value={store.value}
-        onChange={(value: string) => {
-          store.value = value
-        }}
-        disabled
-      />
-    </div>
-  )
-}
-
-export default {
-  title: '表单/Input',
-}
+import React from 'react'
+import Input from './input'
+import InputClose from './input_close'
+import { observable } from 'mobx'
+
+const store = observable({
+  value: 'a',
+})
+
+export const ComInput = () => {
+  return (
+    <div className='gm-padding-10' style={{ width: '200px' }}>
+      <Input
+        placeholder='请输入'
+        value={store.value}
+        onChange={(e) => {
+          store.value = e.target.value
+        }}
+      />
+      <Input
+        placeholder='请输入'
+        value={store.value}
+        onChange={(e) => {
+          store.value = e.target.value
+        }}
+        disabled
+      />
+    </div>
+  )
+}
+
+export const ComInputClose = () => {
+  return (
+    <div className='gm-padding-10' style={{ width: '200px' }}>
+      <InputClose
+        placeholder='请输入'
+        value={store.value}
+        onChange={(value: string) => {
+          store.value = value
+        }}
+      />
+      <InputClose
+        placeholder='请输入'
+        value={store.value}
+        onChange={(value: string) => {
+          store.value = value
+        }}
+        disabled
+      />
+    </div>
+  )
+}
+
+export default {
+  title: '表单/Input',
+}

package/src/component/input/style.less

@@ -1,33 +1,33 @@
-.gm-input {
-  .gmFormControl();
-
-  .gmDisabledBgWith();
-
-  /** 字体大小 */
-  &.gm-input-sm {
-    font-size: var(--gm-size-text-sm);
-  }
-}
-
-.gm-input-close {
-  position: relative;
-
-  .gm-input {
-    padding-right: 20px;
-  }
-
-  .gm-input-close-icon {
-    cursor: pointer;
-    position: absolute;
-    right: 5px;
-    top: 9px;
-    color: var(--gm-color-desc);
-    font-size: 12px;
-  }
-
-  &.disabled {
-    .gm-input-close-icon {
-      display: none;
-    }
-  }
-}
+.gm-input {
+  .gmFormControl();
+
+  .gmDisabledBgWith();
+
+  /** 字体大小 */
+  &.gm-input-sm {
+    font-size: var(--gm-size-text-sm);
+  }
+}
+
+.gm-input-close {
+  position: relative;
+
+  .gm-input {
+    padding-right: 20px;
+  }
+
+  .gm-input-close-icon {
+    cursor: pointer;
+    position: absolute;
+    right: 5px;
+    top: 9px;
+    color: var(--gm-color-desc);
+    font-size: 12px;
+  }
+
+  &.disabled {
+    .gm-input-close-icon {
+      display: none;
+    }
+  }
+}

package/src/component/input_number/index.ts

@@ -1,2 +1,2 @@
-export { default as InputNumber } from './input_number'
-export type { InputNumberProps } from './input_number'
+export { default as InputNumber } from './input_number'
+export type { InputNumberProps } from './input_number'

package/src/component/input_number/input_number.tsx

@@ -1,115 +1,115 @@
-import React, {
-  ChangeEvent,
-  Component,
-  createRef,
-  CSSProperties,
-  InputHTMLAttributes,
-} from 'react'
-import classNames from 'classnames'
-import { checkValue, fixNumber, processPropsValue, text2Number } from './utils'
-import { Input } from '../input'
-
-interface InputNumberProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
-  value: number | null
-  onChange?(value: number | null): void
-  disabled?: boolean
-  placeholder?: string
-  min?: number
-  max?: number
-  precision?: number
-  className?: string
-  style?: CSSProperties
-}
-
-interface InputNumberState {
-  value: string
-}
-
-class InputNumber extends Component<InputNumberProps, InputNumberState> {
-  static defaultProps = {
-    value: null,
-    precision: 2,
-  }
-
-  static getDerivedStateFromProps(
-    props: InputNumberProps,
-    state: InputNumberState
-  ): InputNumberState | null {
-    // 一旦不一致就应该改，要比较 number 形式
-    if (props.value !== text2Number(state.value)) {
-      return {
-        value: processPropsValue(props.value as number),
-      }
-    }
-
-    return null
-  }
-
-  private _inputRef = createRef<HTMLInputElement>()
-  private _isUnmount = false
-
-  readonly state: InputNumberState = {
-    value: processPropsValue(this.props.value as number),
-  }
-
-  componentWillUnmount() {
-    this._isUnmount = true
-  }
-
-  public apiDoFocus(): void {
-    if (this._isUnmount) {
-      return
-    }
-    this._inputRef.current!.focus()
-  }
-
-  public apiDoSelect(): void {
-    if (this._isUnmount) {
-      return
-    }
-    this._inputRef.current!.select()
-  }
-
-  private _handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    const { min, max, precision, onChange } = this.props
-    const eValue = event.target.value
-
-    // 检测是否合法输入
-    if (!checkValue(eValue, precision!, min)) {
-      return
-    }
-
-    const newValue = text2Number(eValue)
-    const newFixValue = fixNumber(newValue, min, max)
-
-    // 如果数据有被修正，则同步下修改的值到 state
-    if (newFixValue !== newValue) {
-      this.setState({
-        value: processPropsValue(newFixValue),
-      })
-    } else {
-      this.setState({
-        value: eValue,
-      })
-    }
-    onChange(newFixValue)
-  }
-
-  render() {
-    const { value, onChange, max, min, precision, className, ...rest } = this.props
-    return (
-      <Input
-        {...rest}
-        ref={this._inputRef}
-        value={this.state.value}
-        type='text'
-        className={classNames('gm-input-number', className)}
-        onChange={this._handleChange}
-      />
-    )
-  }
-}
-
-export default InputNumber
-export type { InputNumberProps }
+import React, {
+  ChangeEvent,
+  Component,
+  createRef,
+  CSSProperties,
+  InputHTMLAttributes,
+} from 'react'
+import classNames from 'classnames'
+import { checkValue, fixNumber, processPropsValue, text2Number } from './utils'
+import { Input } from '../input'
+
+interface InputNumberProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+  value: number | null
+  onChange?(value: number | null): void
+  disabled?: boolean
+  placeholder?: string
+  min?: number
+  max?: number
+  precision?: number
+  className?: string
+  style?: CSSProperties
+}
+
+interface InputNumberState {
+  value: string
+}
+
+class InputNumber extends Component<InputNumberProps, InputNumberState> {
+  static defaultProps = {
+    value: null,
+    precision: 2,
+  }
+
+  static getDerivedStateFromProps(
+    props: InputNumberProps,
+    state: InputNumberState
+  ): InputNumberState | null {
+    // 一旦不一致就应该改，要比较 number 形式
+    if (props.value !== text2Number(state.value)) {
+      return {
+        value: processPropsValue(props.value as number),
+      }
+    }
+
+    return null
+  }
+
+  private _inputRef = createRef<HTMLInputElement>()
+  private _isUnmount = false
+
+  readonly state: InputNumberState = {
+    value: processPropsValue(this.props.value as number),
+  }
+
+  componentWillUnmount() {
+    this._isUnmount = true
+  }
+
+  public apiDoFocus(): void {
+    if (this._isUnmount) {
+      return
+    }
+    this._inputRef.current!.focus()
+  }
+
+  public apiDoSelect(): void {
+    if (this._isUnmount) {
+      return
+    }
+    this._inputRef.current!.select()
+  }
+
+  private _handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    const { min, max, precision, onChange } = this.props
+    const eValue = event.target.value
+
+    // 检测是否合法输入
+    if (!checkValue(eValue, precision!, min)) {
+      return
+    }
+
+    const newValue = text2Number(eValue)
+    const newFixValue = fixNumber(newValue, min, max)
+
+    // 如果数据有被修正，则同步下修改的值到 state
+    if (newFixValue !== newValue) {
+      this.setState({
+        value: processPropsValue(newFixValue),
+      })
+    } else {
+      this.setState({
+        value: eValue,
+      })
+    }
+    onChange(newFixValue)
+  }
+
+  render() {
+    const { value, onChange, max, min, precision, className, ...rest } = this.props
+    return (
+      <Input
+        {...rest}
+        ref={this._inputRef}
+        value={this.state.value}
+        type='text'
+        className={classNames('gm-input-number', className)}
+        onChange={this._handleChange}
+      />
+    )
+  }
+}
+
+export default InputNumber
+export type { InputNumberProps }

package/src/component/input_number/stories.tsx

@@ -1,27 +1,27 @@
-import React from 'react'
-import InputNumber from './input_number'
-import { observable } from 'mobx'
-
-const store = observable({
-  value: null,
-  setValue(value: number | null) {
-    // @ts-ignore
-    this.value = value
-  },
-})
-
-export const ComInputNumber = () => (
-  <div style={{ width: '200px' }}>
-    <InputNumber
-      value={store.value}
-      onChange={(value) => {
-        store.setValue(value)
-      }}
-      min={0}
-    />
-  </div>
-)
-
-export default {
-  title: '表单/InputNumber',
-}
+import React from 'react'
+import InputNumber from './input_number'
+import { observable } from 'mobx'
+
+const store = observable({
+  value: null,
+  setValue(value: number | null) {
+    // @ts-ignore
+    this.value = value
+  },
+})
+
+export const ComInputNumber = () => (
+  <div style={{ width: '200px' }}>
+    <InputNumber
+      value={store.value}
+      onChange={(value) => {
+        store.setValue(value)
+      }}
+      min={0}
+    />
+  </div>
+)
+
+export default {
+  title: '表单/InputNumber',
+}

package/src/component/input_number/style.less

@@ -1,10 +1,10 @@
-.gm-input-number {
-  /* Firefox */
-  -moz-appearance: textfield;
-}
-
-.gm-input-number::-webkit-outer-spin-button,
-.gm-input-number::-webkit-inner-spin-button {
-  margin: 0;
-  -webkit-appearance: none !important;
-}
+.gm-input-number {
+  /* Firefox */
+  -moz-appearance: textfield;
+}
+
+.gm-input-number::-webkit-outer-spin-button,
+.gm-input-number::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none !important;
+}

package/src/component/input_number/utils.ts

@@ -1,44 +1,44 @@
-import _ from 'lodash'
-
-function checkValue(value: string, precision: number, min?: number): boolean {
-  // 正则说明：前置无限【1-9】的数字加小数点加精度个数字，前置为「0」加小数点加精度个数字
-  const reg = new RegExp(
-    '(^[1-9]\\d*(\\.\\d{0,' + precision + '})?$)|(^0(\\.\\d{0,' + precision + '})?$)'
-  )
-  // min >= 0 '-' 就是不合法的
-  if ((_.isUndefined(min) || min < 0) && value.startsWith('-')) {
-    value = value.slice(1)
-  }
-  if (value === '') {
-    return true
-  }
-  return reg.test(value)
-}
-
-function text2Number(value: string): number | null {
-  if (value === '') {
-    return null
-  }
-  return _.isNaN(parseFloat(value)) ? null : parseFloat(value)
-}
-
-function fixNumber(value: number | null, min?: number, max?: number): number | null {
-  if (value !== null) {
-    if (max !== undefined && value > max) {
-      value = max
-    } else if (min !== undefined && value < min) {
-      value = min
-    }
-  }
-
-  return value
-}
-
-function processPropsValue(value: number | null): string {
-  if (value === null) {
-    return ''
-  }
-  return `${value}`
-}
-
-export { checkValue, text2Number, fixNumber, processPropsValue }
+import _ from 'lodash'
+
+function checkValue(value: string, precision: number, min?: number): boolean {
+  // 正则说明：前置无限【1-9】的数字加小数点加精度个数字，前置为「0」加小数点加精度个数字
+  const reg = new RegExp(
+    '(^[1-9]\\d*(\\.\\d{0,' + precision + '})?$)|(^0(\\.\\d{0,' + precision + '})?$)'
+  )
+  // min >= 0 '-' 就是不合法的
+  if ((_.isUndefined(min) || min < 0) && value.startsWith('-')) {
+    value = value.slice(1)
+  }
+  if (value === '') {
+    return true
+  }
+  return reg.test(value)
+}
+
+function text2Number(value: string): number | null {
+  if (value === '') {
+    return null
+  }
+  return _.isNaN(parseFloat(value)) ? null : parseFloat(value)
+}
+
+function fixNumber(value: number | null, min?: number, max?: number): number | null {
+  if (value !== null) {
+    if (max !== undefined && value > max) {
+      value = max
+    } else if (min !== undefined && value < min) {
+      value = min
+    }
+  }
+
+  return value
+}
+
+function processPropsValue(value: number | null): string {
+  if (value === null) {
+    return ''
+  }
+  return `${value}`
+}
+
+export { checkValue, text2Number, fixNumber, processPropsValue }

package/src/component/label/index.tsx

@@ -1,19 +1,19 @@
-import React, { FC, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-export type LabelType = 'default' | 'primary' | 'danger' | 'inactive' | 'gray'
-
-interface LabelProps extends HTMLAttributes<HTMLDivElement> {
-  /** 标签样式种类 */
-  type?: LabelType
-}
-
-const Label: FC<LabelProps> = ({ type = 'default', className, children, ...rest }) => {
-  return (
-    <div {...rest} className={classNames('gm-label', className, `gm-label-${type}`)}>
-      {children}
-    </div>
-  )
-}
-
-export default Label
+import React, { FC, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+
+export type LabelType = 'default' | 'primary' | 'danger' | 'inactive' | 'gray'
+
+interface LabelProps extends HTMLAttributes<HTMLDivElement> {
+  /** 标签样式种类 */
+  type?: LabelType
+}
+
+const Label: FC<LabelProps> = ({ type = 'default', className, children, ...rest }) => {
+  return (
+    <div {...rest} className={classNames('gm-label', className, `gm-label-${type}`)}>
+      {children}
+    </div>
+  )
+}
+
+export default Label

package/src/component/label/stories.tsx

@@ -1,26 +1,26 @@
-import React from 'react'
-import Label from './index'
-
-export const ComLabel = () => {
-  return (
-    <div className='gm-padding-10'>
-      <Label className='gm-margin-lr-5'>标签</Label>
-      <Label type='primary' className='gm-margin-lr-5'>
-        标签
-      </Label>
-      <Label type='danger' className='gm-margin-lr-5'>
-        标签
-      </Label>
-      <Label type='inactive' className='gm-margin-lr-5'>
-        标签
-      </Label>
-      <Label type='gray' className='gm-margin-lr-5'>
-        标签
-      </Label>
-    </div>
-  )
-}
-
-export default {
-  title: '其他/Label',
-}
+import React from 'react'
+import Label from './index'
+
+export const ComLabel = () => {
+  return (
+    <div className='gm-padding-10'>
+      <Label className='gm-margin-lr-5'>标签</Label>
+      <Label type='primary' className='gm-margin-lr-5'>
+        标签
+      </Label>
+      <Label type='danger' className='gm-margin-lr-5'>
+        标签
+      </Label>
+      <Label type='inactive' className='gm-margin-lr-5'>
+        标签
+      </Label>
+      <Label type='gray' className='gm-margin-lr-5'>
+        标签
+      </Label>
+    </div>
+  )
+}
+
+export default {
+  title: '其他/Label',
+}