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

package/src/component/list/style.less

@@ -1,58 +1,58 @@
-// 注意注意
-// gm-list gm-list-item.active 被 Select 使用
-.gm-list {
-  border: 1px solid var(--gm-color-border);
-  background: white;
-  // 注意，overflow-y 会被 FunctionSet 覆盖
-  overflow-y: auto;
-  min-width: 80px;
-
-  .gm-list-item {
-    line-height: 1;
-    cursor: pointer;
-    padding: 10px;
-    background: white;
-
-    &.active {
-      color: var(--gm-color-primary-active);
-    }
-
-    .gmDisabledWith();
-
-    &.will-active {
-      background-color: var(--gm-color-bg-primary-light);
-    }
-
-    &:hover {
-      background-color: var(--gm-color-bg-primary-light);
-    }
-  }
-
-  &.gm-list-group {
-    line-height: 1;
-
-    .gm-list-group-item {
-      border-bottom: 1px solid var(--gm-color-border);
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-
-    .gm-list-label {
-      color: var(--gm-color-secondary);
-      padding: 9px 10px;
-    }
-
-    .gm-list-item {
-      padding: 9px 10px 9px 22px;
-    }
-  }
-
-  /** 字体大小 */
-  &.gm-list-text-sm {
-    .gm-list-item {
-      font-size: var(--gm-size-text-sm);
-    }
-  }
-}
+// 注意注意
+// gm-list gm-list-item.active 被 Select 使用
+.gm-list {
+  border: 1px solid var(--gm-color-border);
+  background: white;
+  // 注意，overflow-y 会被 FunctionSet 覆盖
+  overflow-y: auto;
+  min-width: 80px;
+
+  .gm-list-item {
+    line-height: 1;
+    cursor: pointer;
+    padding: 10px;
+    background: white;
+
+    &.active {
+      color: var(--gm-color-primary-active);
+    }
+
+    .gmDisabledWith();
+
+    &.will-active {
+      background-color: var(--gm-color-bg-primary-light);
+    }
+
+    &:hover {
+      background-color: var(--gm-color-bg-primary-light);
+    }
+  }
+
+  &.gm-list-group {
+    line-height: 1;
+
+    .gm-list-group-item {
+      border-bottom: 1px solid var(--gm-color-border);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .gm-list-label {
+      color: var(--gm-color-secondary);
+      padding: 9px 10px;
+    }
+
+    .gm-list-item {
+      padding: 9px 10px 9px 22px;
+    }
+  }
+
+  /** 字体大小 */
+  &.gm-list-text-sm {
+    .gm-list-item {
+      font-size: var(--gm-size-text-sm);
+    }
+  }
+}

package/src/component/list/types.ts

@@ -1,37 +1,37 @@
-import { CSSProperties, HTMLAttributes, ReactNode } from 'react'
-
-import { ListDataItem, ListGroupDataItem } from '../../types'
-
-interface CommonListProps<V> {
-  multiple?: boolean
-  isGroupList?: boolean
-  renderItem?(item: ListDataItem<V>, index: number): ReactNode | string
-  willActiveIndex?: number
-  isScrollTo?: boolean
-  /* 少用，给与更多 Item 的响应 */
-  getItemProps?(item: ListDataItem<V>): HTMLAttributes<HTMLDivElement>
-  className?: string
-  style?: CSSProperties
-}
-
-interface ListBaseProps<V> extends CommonListProps<V> {
-  data: ListGroupDataItem<V>[]
-  selected: V[]
-  onSelect?(selected: V[]): void
-}
-
-interface ListProps<V> extends CommonListProps<V> {
-  /** 区分 group */
-  data: ListDataItem<V>[] | ListGroupDataItem<V>[]
-  /**
-   * 多选传 value 数组
-   */
-  selected?: V | V[]
-
-  /**
-   * 多选返回 value 数组
-   */
-  onSelect?(selected: V | V[]): void
-}
-
-export type { ListBaseProps, ListProps }
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react'
+
+import { ListDataItem, ListGroupDataItem } from '../../types'
+
+interface CommonListProps<V> {
+  multiple?: boolean
+  isGroupList?: boolean
+  renderItem?(item: ListDataItem<V>, index: number): ReactNode | string
+  willActiveIndex?: number
+  isScrollTo?: boolean
+  /* 少用，给与更多 Item 的响应 */
+  getItemProps?(item: ListDataItem<V>): HTMLAttributes<HTMLDivElement>
+  className?: string
+  style?: CSSProperties
+}
+
+interface ListBaseProps<V> extends CommonListProps<V> {
+  data: ListGroupDataItem<V>[]
+  selected: V[]
+  onSelect?(selected: V[]): void
+}
+
+interface ListProps<V> extends CommonListProps<V> {
+  /** 区分 group */
+  data: ListDataItem<V>[] | ListGroupDataItem<V>[]
+  /**
+   * 多选传 value 数组
+   */
+  selected?: V | V[]
+
+  /**
+   * 多选返回 value 数组
+   */
+  onSelect?(selected: V | V[]): void
+}
+
+export type { ListBaseProps, ListProps }

package/src/component/loading/index.ts

@@ -1,10 +1,10 @@
-export { default as Loading } from './loading'
-export { default as LoadingChunk } from './loading_chunk'
-export { default as LoadingFullScreen } from './loading_full_screen'
-
-export type {
-  LoadingProps,
-  LoadingChunkProps,
-  LoadingFullScreenProps,
-  LoadingFullScreenStatic,
-} from './types'
+export { default as Loading } from './loading'
+export { default as LoadingChunk } from './loading_chunk'
+export { default as LoadingFullScreen } from './loading_full_screen'
+
+export type {
+  LoadingProps,
+  LoadingChunkProps,
+  LoadingFullScreenProps,
+  LoadingFullScreenStatic,
+} from './types'

package/src/component/loading/loading.tsx

@@ -1,26 +1,26 @@
-import React, { FC } from 'react'
-import { LoadingProps } from './types'
-
-const Loading: FC<LoadingProps> = ({ size = '1em', type = 'default' }) => {
-  return (
-    <svg
-      className='gm-loading'
-      style={{
-        width: size,
-        height: size,
-      }}
-      viewBox='0 0 50 50'
-    >
-      <circle
-        className='gm-loading-path'
-        cx='25'
-        cy='25'
-        r='20'
-        fill='none'
-        stroke={type === 'default' ? '#0363ff' : '#fff'}
-      />
-    </svg>
-  )
-}
-
-export default Loading
+import React, { FC } from 'react'
+import { LoadingProps } from './types'
+
+const Loading: FC<LoadingProps> = ({ size = '1em', type = 'default' }) => {
+  return (
+    <svg
+      className='gm-loading'
+      style={{
+        width: size,
+        height: size,
+      }}
+      viewBox='0 0 50 50'
+    >
+      <circle
+        className='gm-loading-path'
+        cx='25'
+        cy='25'
+        r='20'
+        fill='none'
+        stroke={type === 'default' ? '#0363ff' : '#fff'}
+      />
+    </svg>
+  )
+}
+
+export default Loading

package/src/component/loading/loading_chunk.tsx

@@ -1,37 +1,37 @@
-import React, { FC } from 'react'
-import classNames from 'classnames'
-import Loading from './loading'
-import { Flex } from '../flex'
-import { LoadingChunkProps } from './types'
-
-const LoadingChunk: FC<LoadingChunkProps> = ({
-  loading,
-  className,
-  children,
-  size = '40px',
-  style,
-  text,
-  ...rest
-}) => {
-  return (
-    <div
-      {...rest}
-      className={classNames(className, {
-        'gm-loading-chunk': loading,
-      })}
-      style={style}
-    >
-      {children}
-      {loading && (
-        <Flex alignCenter justifyCenter className='gm-loading-mask'>
-          <Flex column alignCenter>
-            <Loading size={size} />
-            {text && <span className='gm-loading-text'>{text}</span>}
-          </Flex>
-        </Flex>
-      )}
-    </div>
-  )
-}
-
-export default LoadingChunk
+import React, { FC } from 'react'
+import classNames from 'classnames'
+import Loading from './loading'
+import { Flex } from '../flex'
+import { LoadingChunkProps } from './types'
+
+const LoadingChunk: FC<LoadingChunkProps> = ({
+  loading,
+  className,
+  children,
+  size = '40px',
+  style,
+  text,
+  ...rest
+}) => {
+  return (
+    <div
+      {...rest}
+      className={classNames(className, {
+        'gm-loading-chunk': loading,
+      })}
+      style={style}
+    >
+      {children}
+      {loading && (
+        <Flex alignCenter justifyCenter className='gm-loading-mask'>
+          <Flex column alignCenter>
+            <Loading size={size} />
+            {text && <span className='gm-loading-text'>{text}</span>}
+          </Flex>
+        </Flex>
+      )}
+    </div>
+  )
+}
+
+export default LoadingChunk

package/src/component/loading/loading_full_screen.tsx

@@ -1,45 +1,45 @@
-import React, { FC, PropsWithChildren } from 'react'
-import Loading from './loading'
-import { LayoutRoot } from '../layout_root'
-import { Flex } from '../flex'
-import EVENT_TYPE from '../../event_type'
-import { LoadingFullScreenProps, LoadingFullScreenStatic } from './types'
-
-const LoadingFullScreen: FC<LoadingFullScreenProps> & LoadingFullScreenStatic = ({
-  text,
-  size = '40px',
-}) => {
-  return (
-    <Flex alignCenter justifyCenter className='gm-loading-full-screen'>
-      <Flex column alignCenter>
-        <Loading size={size} />
-        {text && <span className='gm-loading-text'>{text}</span>}
-      </Flex>
-    </Flex>
-  )
-}
-
-LoadingFullScreen.render = function (
-  props: PropsWithChildren<LoadingFullScreenProps>
-): void {
-  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.FULL_LOADING_SHOW))
-  LayoutRoot.setComponent(LayoutRoot.Type.FULL_LOADING, <LoadingFullScreen {...props} />)
-
-  const documentBody = window.document.body
-
-  if (documentBody) {
-    documentBody.classList.add('gm-loading-body-overflow')
-  }
-}
-
-LoadingFullScreen.hide = function () {
-  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.FULL_LOADING_HIDE))
-  LayoutRoot.removeComponent(LayoutRoot.Type.FULL_LOADING)
-
-  const documentBody = window.document.body
-  if (documentBody) {
-    documentBody.classList.remove('gm-loading-body-overflow')
-  }
-}
-
-export default LoadingFullScreen
+import React, { FC, PropsWithChildren } from 'react'
+import Loading from './loading'
+import { LayoutRoot } from '../layout_root'
+import { Flex } from '../flex'
+import EVENT_TYPE from '../../event_type'
+import { LoadingFullScreenProps, LoadingFullScreenStatic } from './types'
+
+const LoadingFullScreen: FC<LoadingFullScreenProps> & LoadingFullScreenStatic = ({
+  text,
+  size = '40px',
+}) => {
+  return (
+    <Flex alignCenter justifyCenter className='gm-loading-full-screen'>
+      <Flex column alignCenter>
+        <Loading size={size} />
+        {text && <span className='gm-loading-text'>{text}</span>}
+      </Flex>
+    </Flex>
+  )
+}
+
+LoadingFullScreen.render = function (
+  props: PropsWithChildren<LoadingFullScreenProps>
+): void {
+  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.FULL_LOADING_SHOW))
+  LayoutRoot.setComponent(LayoutRoot.Type.FULL_LOADING, <LoadingFullScreen {...props} />)
+
+  const documentBody = window.document.body
+
+  if (documentBody) {
+    documentBody.classList.add('gm-loading-body-overflow')
+  }
+}
+
+LoadingFullScreen.hide = function () {
+  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.FULL_LOADING_HIDE))
+  LayoutRoot.removeComponent(LayoutRoot.Type.FULL_LOADING)
+
+  const documentBody = window.document.body
+  if (documentBody) {
+    documentBody.classList.remove('gm-loading-body-overflow')
+  }
+}
+
+export default LoadingFullScreen

package/src/component/loading/stories.tsx

@@ -1,43 +1,43 @@
-import React from 'react'
-import Loading from './loading'
-import LoadingChunk from './loading_chunk'
-import LoadingFullScreen from './loading_full_screen'
-import { Button } from '../button'
-
-export const ComLoading = () => (
-  <div>
-    <Loading />
-    <Loading size='5em' />
-  </div>
-)
-
-export const ComLoadingChunk = () => (
-  <LoadingChunk loading text='加载中...'>
-    <div
-      style={{
-        height: '100px',
-      }}
-    >
-      这是内容
-    </div>
-  </LoadingChunk>
-)
-
-export const ComLoadingFullScreen = () => (
-  <Button
-    onClick={() => {
-      LoadingFullScreen.render({
-        text: '拼命加载中...',
-      })
-      setTimeout(() => {
-        LoadingFullScreen.hide()
-      }, 10000)
-    }}
-  >
-    整页加载
-  </Button>
-)
-
-export default {
-  title: '反馈/Loading',
-}
+import React from 'react'
+import Loading from './loading'
+import LoadingChunk from './loading_chunk'
+import LoadingFullScreen from './loading_full_screen'
+import { Button } from '../button'
+
+export const ComLoading = () => (
+  <div>
+    <Loading />
+    <Loading size='5em' />
+  </div>
+)
+
+export const ComLoadingChunk = () => (
+  <LoadingChunk loading text='加载中...'>
+    <div
+      style={{
+        height: '100px',
+      }}
+    >
+      这是内容
+    </div>
+  </LoadingChunk>
+)
+
+export const ComLoadingFullScreen = () => (
+  <Button
+    onClick={() => {
+      LoadingFullScreen.render({
+        text: '拼命加载中...',
+      })
+      setTimeout(() => {
+        LoadingFullScreen.hide()
+      }, 10000)
+    }}
+  >
+    整页加载
+  </Button>
+)
+
+export default {
+  title: '反馈/Loading',
+}

package/src/component/loading/style.less

@@ -1,69 +1,69 @@
-.gm-loading {
-  animation: gm-loading-rotate 2s linear infinite;
-
-  .gm-loading-path {
-    animation: gm-loading-dash 1.5s ease-in-out infinite;
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: 0;
-    stroke-width: 2;
-    // stroke: var(--gm-color-primary);
-    stroke-linecap: round;
-  }
-}
-
-.gm-loading-text {
-  color: var(--gm-color-primary);
-  word-break: keep-all;
-}
-
-@keyframes gm-loading-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes gm-loading-dash {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -40px;
-  }
-
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -120px;
-  }
-}
-
-.gm-loading-body-overflow {
-  overflow: hidden;
-}
-
-.gm-loading-full-screen {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba(255, 255, 255, 0.8);
-  z-index: 8000;
-}
-
-.gm-loading-chunk {
-  position: relative;
-
-  .gm-loading-mask {
-    position: absolute;
-    background-color: rgba(255, 255, 255, 0.8);
-    margin: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 90;
-  }
-}
+.gm-loading {
+  animation: gm-loading-rotate 2s linear infinite;
+
+  .gm-loading-path {
+    animation: gm-loading-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    stroke-width: 2;
+    // stroke: var(--gm-color-primary);
+    stroke-linecap: round;
+  }
+}
+
+.gm-loading-text {
+  color: var(--gm-color-primary);
+  word-break: keep-all;
+}
+
+@keyframes gm-loading-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes gm-loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
+  }
+}
+
+.gm-loading-body-overflow {
+  overflow: hidden;
+}
+
+.gm-loading-full-screen {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 8000;
+}
+
+.gm-loading-chunk {
+  position: relative;
+
+  .gm-loading-mask {
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.8);
+    margin: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 90;
+  }
+}