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

package/src/component/progress/progress.tsx

@@ -1,53 +1,53 @@
-import React, { FC, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-import SVGSuccessCircle from '../../svg/success-circle.svg'
-import SVGCloseCircle from '../../svg/close-circle.svg'
-import { Flex } from '../flex'
-
-interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
-  percentage: number
-  type?: 'success' | 'danger'
-  disabledText?: boolean
-}
-
-const Progress: FC<ProgressProps> = ({
-  percentage,
-  type,
-  disabledText,
-  className,
-  ...rest
-}) => {
-  return (
-    <Flex
-      alignCenter
-      {...rest}
-      className={classNames(
-        'gm-progress',
-        {
-          [`gm-progress-${type}`]: type,
-        },
-        className
-      )}
-    >
-      <Flex flex block className='gm-progress-bar'>
-        <div className='gm-progress-bar-outer'>
-          <div
-            className={classNames('gm-progress-bar-inner')}
-            style={{ width: `${percentage}%` }}
-          />
-        </div>
-      </Flex>
-      <div className='gm-gap-5' />
-      <div className='gm-progress-icon'>
-        {type === 'success' && <SVGSuccessCircle className='gm-text-success' />}
-        {type === 'danger' && <SVGCloseCircle className='gm-text-danger' />}
-      </div>
-      {!type && !disabledText && (
-        <div className='gm-progress-text'>{`${percentage}%`}</div>
-      )}
-    </Flex>
-  )
-}
-
-export default Progress
-export type { ProgressProps }
+import React, { FC, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+import SVGSuccessCircle from '../../svg/success-circle.svg'
+import SVGCloseCircle from '../../svg/close-circle.svg'
+import { Flex } from '../flex'
+
+interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  percentage: number
+  type?: 'success' | 'danger'
+  disabledText?: boolean
+}
+
+const Progress: FC<ProgressProps> = ({
+  percentage,
+  type,
+  disabledText,
+  className,
+  ...rest
+}) => {
+  return (
+    <Flex
+      alignCenter
+      {...rest}
+      className={classNames(
+        'gm-progress',
+        {
+          [`gm-progress-${type}`]: type,
+        },
+        className
+      )}
+    >
+      <Flex flex block className='gm-progress-bar'>
+        <div className='gm-progress-bar-outer'>
+          <div
+            className={classNames('gm-progress-bar-inner')}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+      </Flex>
+      <div className='gm-gap-5' />
+      <div className='gm-progress-icon'>
+        {type === 'success' && <SVGSuccessCircle className='gm-text-success' />}
+        {type === 'danger' && <SVGCloseCircle className='gm-text-danger' />}
+      </div>
+      {!type && !disabledText && (
+        <div className='gm-progress-text'>{`${percentage}%`}</div>
+      )}
+    </Flex>
+  )
+}
+
+export default Progress
+export type { ProgressProps }

package/src/component/progress/stories.tsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import Progress from './progress'
-
-export const ComProgress = () => (
-  <div style={{ width: '400px' }}>
-    <Progress percentage={10} />
-    <Progress percentage={100} />
-
-    <div>type</div>
-    <Progress percentage={100} type='success' />
-    <Progress percentage={50} type='danger' />
-
-    <div>disabledText</div>
-    <Progress percentage={20} disabledText />
-  </div>
-)
-
-export default {
-  title: '反馈/Progress',
-}
+import React from 'react'
+import Progress from './progress'
+
+export const ComProgress = () => (
+  <div style={{ width: '400px' }}>
+    <Progress percentage={10} />
+    <Progress percentage={100} />
+
+    <div>type</div>
+    <Progress percentage={100} type='success' />
+    <Progress percentage={50} type='danger' />
+
+    <div>disabledText</div>
+    <Progress percentage={20} disabledText />
+  </div>
+)
+
+export default {
+  title: '反馈/Progress',
+}

package/src/component/progress/style.less

@@ -1,35 +1,35 @@
-.gm-progress {
-  .gm-progress-bar {
-    .gm-progress-bar-outer {
-      height: 10px;
-      border-radius: 100px;
-      background-color: #e4e8f1;
-      overflow: hidden;
-      vertical-align: middle;
-    }
-
-    .gm-progress-bar-inner {
-      height: 100%;
-      background-color: var(--gm-color-primary);
-      border-radius: 100px;
-      line-height: 1;
-      white-space: nowrap;
-    }
-  }
-
-  .gm-progress-text {
-    min-width: 30px;
-  }
-
-  &.gm-progress-success {
-    .gm-progress-bar-inner {
-      background-color: var(--gm-color-success);
-    }
-  }
-
-  &.gm-progress-danger {
-    .gm-progress-bar-inner {
-      background-color: var(--gm-color-danger);
-    }
-  }
-}
+.gm-progress {
+  .gm-progress-bar {
+    .gm-progress-bar-outer {
+      height: 10px;
+      border-radius: 100px;
+      background-color: #e4e8f1;
+      overflow: hidden;
+      vertical-align: middle;
+    }
+
+    .gm-progress-bar-inner {
+      height: 100%;
+      background-color: var(--gm-color-primary);
+      border-radius: 100px;
+      line-height: 1;
+      white-space: nowrap;
+    }
+  }
+
+  .gm-progress-text {
+    min-width: 30px;
+  }
+
+  &.gm-progress-success {
+    .gm-progress-bar-inner {
+      background-color: var(--gm-color-success);
+    }
+  }
+
+  &.gm-progress-danger {
+    .gm-progress-bar-inner {
+      background-color: var(--gm-color-danger);
+    }
+  }
+}

package/src/component/progress_circle/index.ts

@@ -1,2 +1,2 @@
-export { default as ProgressCircle } from './progress_circle'
-export type { ProgressCircleProps } from './progress_circle'
+export { default as ProgressCircle } from './progress_circle'
+export type { ProgressCircleProps } from './progress_circle'

package/src/component/progress_circle/progress_circle.tsx

@@ -1,85 +1,85 @@
-import React, { FC, HTMLAttributes } from 'react'
-import { Flex } from '../flex'
-import classNames from 'classnames'
-
-const radius = 110 // 半径r
-const diameter = Math.round(Math.PI * radius * 2) // 周长(路径长度)
-const getOffset = (val = 0): number =>
-  Math.round(((100 - Math.min(val, 100)) / 100) * diameter)
-
-interface ProgressCircleProps extends HTMLAttributes<HTMLDivElement> {
-  percentage: number
-  type?: 'success' | 'danger'
-  size?: number
-  lineWidth?: number
-  disabledText?: boolean
-}
-
-const ProgressCircle: FC<ProgressCircleProps> = ({
-  type,
-  percentage,
-  size = 40,
-  lineWidth = 60,
-  disabledText,
-  className,
-  ...rest
-}) => {
-  const { centerColor, animate, animationDuration, roundedStroke } = {
-    centerColor: 'transparent',
-    animate: false,
-    animationDuration: '1s',
-    roundedStroke: false,
-  }
-
-  const strokeDashoffset = getOffset(percentage)
-  const transition = animate
-    ? `stroke-dashoffset ${animationDuration} ease-out`
-    : undefined
-  const strokeLinecap = roundedStroke ? 'round' : 'butt'
-
-  return (
-    <Flex
-      alignCenter
-      {...rest}
-      className={classNames(
-        'gm-progress-circle',
-        {
-          [`gm-progress-circle-${type}`]: !!type,
-        },
-        className
-      )}
-    >
-      <svg width={size} height={size} viewBox='0 0 300 300'>
-        <circle cx='150' cy='150' r={radius} strokeWidth={lineWidth} fill={centerColor} />
-        <circle
-          className='gm-progress-circle-color'
-          transform='rotate(-90 150 150)'
-          cx='150'
-          cy='150'
-          r={radius}
-          strokeDasharray={diameter}
-          strokeWidth={lineWidth}
-          strokeDashoffset={diameter}
-          strokeLinecap={strokeLinecap}
-          fill='none'
-          style={{ strokeDashoffset, transition }}
-        />
-        {!disabledText && (
-          <text
-            fill='currentColor'
-            fontSize='70'
-            x='150'
-            y='150'
-            textAnchor='middle'
-            dominantBaseline='central'
-          >
-            {percentage + '%'}
-          </text>
-        )}
-      </svg>
-    </Flex>
-  )
-}
-
-export default ProgressCircle
-export type { ProgressCircleProps }
+import React, { FC, HTMLAttributes } from 'react'
+import { Flex } from '../flex'
+import classNames from 'classnames'
+
+const radius = 110 // 半径r
+const diameter = Math.round(Math.PI * radius * 2) // 周长(路径长度)
+const getOffset = (val = 0): number =>
+  Math.round(((100 - Math.min(val, 100)) / 100) * diameter)
+
+interface ProgressCircleProps extends HTMLAttributes<HTMLDivElement> {
+  percentage: number
+  type?: 'success' | 'danger'
+  size?: number
+  lineWidth?: number
+  disabledText?: boolean
+}
+
+const ProgressCircle: FC<ProgressCircleProps> = ({
+  type,
+  percentage,
+  size = 40,
+  lineWidth = 60,
+  disabledText,
+  className,
+  ...rest
+}) => {
+  const { centerColor, animate, animationDuration, roundedStroke } = {
+    centerColor: 'transparent',
+    animate: false,
+    animationDuration: '1s',
+    roundedStroke: false,
+  }
+
+  const strokeDashoffset = getOffset(percentage)
+  const transition = animate
+    ? `stroke-dashoffset ${animationDuration} ease-out`
+    : undefined
+  const strokeLinecap = roundedStroke ? 'round' : 'butt'
+
+  return (
+    <Flex
+      alignCenter
+      {...rest}
+      className={classNames(
+        'gm-progress-circle',
+        {
+          [`gm-progress-circle-${type}`]: !!type,
+        },
+        className
+      )}
+    >
+      <svg width={size} height={size} viewBox='0 0 300 300'>
+        <circle cx='150' cy='150' r={radius} strokeWidth={lineWidth} fill={centerColor} />
+        <circle
+          className='gm-progress-circle-color'
+          transform='rotate(-90 150 150)'
+          cx='150'
+          cy='150'
+          r={radius}
+          strokeDasharray={diameter}
+          strokeWidth={lineWidth}
+          strokeDashoffset={diameter}
+          strokeLinecap={strokeLinecap}
+          fill='none'
+          style={{ strokeDashoffset, transition }}
+        />
+        {!disabledText && (
+          <text
+            fill='currentColor'
+            fontSize='70'
+            x='150'
+            y='150'
+            textAnchor='middle'
+            dominantBaseline='central'
+          >
+            {percentage + '%'}
+          </text>
+        )}
+      </svg>
+    </Flex>
+  )
+}
+
+export default ProgressCircle
+export type { ProgressCircleProps }

package/src/component/progress_circle/stories.tsx

@@ -1,31 +1,31 @@
-import React from 'react'
-import ProgressCircle from './progress_circle'
-import { observable } from 'mobx'
-
-const store = observable({
-  percentage: 0,
-  setPercentage(percentage: any) {
-    this.percentage = percentage
-  },
-})
-
-setTimeout(() => {
-  store.setPercentage(80)
-}, 1000)
-
-export const ComProgressCircle = () => (
-  <div>
-    <ProgressCircle percentage={store.percentage} />
-    <div>type</div>
-    <ProgressCircle percentage={store.percentage} type='success' />
-    <ProgressCircle percentage={store.percentage} type='danger' />
-    <div>size</div>
-    <ProgressCircle percentage={store.percentage} size={100} />
-    <div>lineWidth</div>
-    <ProgressCircle percentage={store.percentage} size={100} lineWidth={20} />
-  </div>
-)
-
-export default {
-  title: '反馈/ProgressCircle',
-}
+import React from 'react'
+import ProgressCircle from './progress_circle'
+import { observable } from 'mobx'
+
+const store = observable({
+  percentage: 0,
+  setPercentage(percentage: any) {
+    this.percentage = percentage
+  },
+})
+
+setTimeout(() => {
+  store.setPercentage(80)
+}, 1000)
+
+export const ComProgressCircle = () => (
+  <div>
+    <ProgressCircle percentage={store.percentage} />
+    <div>type</div>
+    <ProgressCircle percentage={store.percentage} type='success' />
+    <ProgressCircle percentage={store.percentage} type='danger' />
+    <div>size</div>
+    <ProgressCircle percentage={store.percentage} size={100} />
+    <div>lineWidth</div>
+    <ProgressCircle percentage={store.percentage} size={100} lineWidth={20} />
+  </div>
+)
+
+export default {
+  title: '反馈/ProgressCircle',
+}

package/src/component/progress_circle/style.less

@@ -1,21 +1,21 @@
-.gm-progress-circle {
-  circle {
-    stroke: #e4e8f1;
-  }
-
-  .gm-progress-circle-color {
-    stroke: var(--gm-color-primary);
-  }
-
-  &.gm-progress-circle-success {
-    .gm-progress-circle-color {
-      stroke: var(--gm-color-success);
-    }
-  }
-
-  &.gm-progress-circle-danger {
-    .gm-progress-circle-color {
-      stroke: var(--gm-color-danger);
-    }
-  }
-}
+.gm-progress-circle {
+  circle {
+    stroke: #e4e8f1;
+  }
+
+  .gm-progress-circle-color {
+    stroke: var(--gm-color-primary);
+  }
+
+  &.gm-progress-circle-success {
+    .gm-progress-circle-color {
+      stroke: var(--gm-color-success);
+    }
+  }
+
+  &.gm-progress-circle-danger {
+    .gm-progress-circle-color {
+      stroke: var(--gm-color-danger);
+    }
+  }
+}

package/src/component/radio/index.ts

@@ -1,5 +1,5 @@
-export { default as Radio } from './radio'
-export { default as RadioGroup } from './radio_group'
-
-export type { RadioProps } from './radio'
-export type { RadioGroupProps } from './radio_group'
+export { default as Radio } from './radio'
+export { default as RadioGroup } from './radio_group'
+
+export type { RadioProps } from './radio'
+export type { RadioGroupProps } from './radio_group'

package/src/component/radio/radio.tsx

@@ -1,72 +1,72 @@
-import React, { ChangeEvent, HTMLAttributes, useContext } from 'react'
-import classNames from 'classnames'
-import { RadioGroupContext } from './util'
-
-interface RadioProps<V> extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'> {
-  value?: V
-  checked?: boolean
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
-  disabled?: boolean
-  name?: string
-}
-
-function Radio<V = any>({
-  value,
-  checked,
-  onChange,
-  onClick,
-  children,
-  name,
-  disabled,
-  className,
-  ...rest
-}: RadioProps<V>) {
-  const radioGroupContext = useContext(RadioGroupContext)
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange && onChange(event)
-
-    if (radioGroupContext.isInRadioGroup) {
-      radioGroupContext.onChange(value!)
-    }
-  }
-
-  let oName = name
-  let oChecked = checked
-
-  if (radioGroupContext.isInRadioGroup) {
-    oName = radioGroupContext.name
-    oChecked = radioGroupContext.value === value
-
-    if (checked !== undefined || name !== undefined || onChange !== undefined) {
-      console.warn('在 RadioGroup 下，不能提供 checked name onChange')
-    }
-  }
-
-  return (
-    <label
-      {...rest}
-      className={classNames(
-        'gm-radio',
-        {
-          disabled,
-        },
-        className
-      )}
-    >
-      <input
-        type='radio'
-        className='gm-radio-input'
-        name={oName}
-        checked={oChecked}
-        disabled={disabled}
-        onChange={handleChange}
-      />
-      <span className='gm-radio-span' />
-      <span className='gm-padding-lr-5'>{children}</span>
-    </label>
-  )
-}
-
-export default Radio
-export type { RadioProps }
+import React, { ChangeEvent, HTMLAttributes, useContext } from 'react'
+import classNames from 'classnames'
+import { RadioGroupContext } from './util'
+
+interface RadioProps<V> extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'> {
+  value?: V
+  checked?: boolean
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
+  disabled?: boolean
+  name?: string
+}
+
+function Radio<V = any>({
+  value,
+  checked,
+  onChange,
+  onClick,
+  children,
+  name,
+  disabled,
+  className,
+  ...rest
+}: RadioProps<V>) {
+  const radioGroupContext = useContext(RadioGroupContext)
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange && onChange(event)
+
+    if (radioGroupContext.isInRadioGroup) {
+      radioGroupContext.onChange(value!)
+    }
+  }
+
+  let oName = name
+  let oChecked = checked
+
+  if (radioGroupContext.isInRadioGroup) {
+    oName = radioGroupContext.name
+    oChecked = radioGroupContext.value === value
+
+    if (checked !== undefined || name !== undefined || onChange !== undefined) {
+      console.warn('在 RadioGroup 下，不能提供 checked name onChange')
+    }
+  }
+
+  return (
+    <label
+      {...rest}
+      className={classNames(
+        'gm-radio',
+        {
+          disabled,
+        },
+        className
+      )}
+    >
+      <input
+        type='radio'
+        className='gm-radio-input'
+        name={oName}
+        checked={oChecked}
+        disabled={disabled}
+        onChange={handleChange}
+      />
+      <span className='gm-radio-span' />
+      <span className='gm-padding-lr-5'>{children}</span>
+    </label>
+  )
+}
+
+export default Radio
+export type { RadioProps }