@gm-pc/react 1.24.9-beta.5 → 1.24.9-beta.9

package/src/component/multiple_selection/stories.tsx

@@ -1,37 +1,37 @@
-import React from 'react'
-import MultipleSelection from './multiple_selection'
-import { observable } from 'mobx'
-
-const store = observable({
-  selected: [
-    { value: 1, text: '小明' },
-    { value: 2, text: '小红' },
-  ],
-  setSelected(selected: any) {
-    console.log(selected)
-    this.selected = selected
-  },
-})
-
-export const ComMultipleSelection = () => (
-  <div>
-    <MultipleSelection
-      selected={[]}
-      onSelect={(selected) => {
-        store.setSelected(selected)
-      }}
-      placeholder='请选择'
-    />
-    <MultipleSelection
-      selected={store.selected.slice()}
-      onSelect={(selected) => {
-        store.setSelected(selected)
-      }}
-      placeholder='请选择'
-    />
-  </div>
-)
-
-export default {
-  title: '其他/MultipleSelection',
-}
+import React from 'react'
+import MultipleSelection from './multiple_selection'
+import { observable } from 'mobx'
+
+const store = observable({
+  selected: [
+    { value: 1, text: '小明' },
+    { value: 2, text: '小红' },
+  ],
+  setSelected(selected: any) {
+    console.log(selected)
+    this.selected = selected
+  },
+})
+
+export const ComMultipleSelection = () => (
+  <div>
+    <MultipleSelection
+      selected={[]}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+      placeholder='请选择'
+    />
+    <MultipleSelection
+      selected={store.selected.slice()}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+      placeholder='请选择'
+    />
+  </div>
+)
+
+export default {
+  title: '其他/MultipleSelection',
+}

package/src/component/multiple_selection/style.less

@@ -1,57 +1,57 @@
-.gm-multiple-selection {
-  position: relative;
-  vertical-align: middle;
-  min-height: var(--gm-size-form-height);
-  border: 1px solid var(--gm-color-border);
-
-  .gm-multiple-selection-selected {
-    padding-left: 10px;
-    padding-right: 20px;
-    cursor: pointer;
-    line-height: 18px;
-    min-height: var(--gm-size-form-height);
-  }
-
-  .gm-multiple-selection-item {
-    background-color: var(--gm-color-bg-primary-more-light);
-    padding: 0 2px;
-    border-radius: 2px;
-    margin-right: 5px;
-
-    .gm-multiple-selection-item-close {
-      margin-left: 2px;
-      color: var(--gm-color-desc);
-      cursor: pointer;
-      opacity: 0.5;
-    }
-  }
-
-  .gm-multiple-selection-icon {
-    position: absolute;
-    display: block;
-    line-height: 1;
-    top: 9px;
-    right: 6px;
-    color: var(--gm-color-desc);
-    cursor: pointer;
-  }
-
-  .gm-multiple-selection-close-icon {
-    display: none;
-    right: 6px;
-  }
-
-  .gm-multiple-selection-down-up {
-    right: 6px;
-  }
-
-  &:hover {
-    .gm-multiple-selection-close-icon {
-      display: block;
-    }
-
-    .gm-multiple-selection-fun-icon {
-      display: none;
-    }
-  }
-}
+.gm-multiple-selection {
+  position: relative;
+  vertical-align: middle;
+  min-height: var(--gm-size-form-height);
+  border: 1px solid var(--gm-color-border);
+
+  .gm-multiple-selection-selected {
+    padding-left: 10px;
+    padding-right: 20px;
+    cursor: pointer;
+    line-height: 18px;
+    min-height: var(--gm-size-form-height);
+  }
+
+  .gm-multiple-selection-item {
+    background-color: var(--gm-color-bg-primary-more-light);
+    padding: 0 2px;
+    border-radius: 2px;
+    margin-right: 5px;
+
+    .gm-multiple-selection-item-close {
+      margin-left: 2px;
+      color: var(--gm-color-desc);
+      cursor: pointer;
+      opacity: 0.5;
+    }
+  }
+
+  .gm-multiple-selection-icon {
+    position: absolute;
+    display: block;
+    line-height: 1;
+    top: 9px;
+    right: 6px;
+    color: var(--gm-color-desc);
+    cursor: pointer;
+  }
+
+  .gm-multiple-selection-close-icon {
+    display: none;
+    right: 6px;
+  }
+
+  .gm-multiple-selection-down-up {
+    right: 6px;
+  }
+
+  &:hover {
+    .gm-multiple-selection-close-icon {
+      display: block;
+    }
+
+    .gm-multiple-selection-fun-icon {
+      display: none;
+    }
+  }
+}

package/src/component/n_progress/index.ts

@@ -1 +1 @@
-export { default as NProgress } from './n_progress'
+export { default as NProgress } from './n_progress'

package/src/component/n_progress/n_progress.tsx

@@ -1,39 +1,39 @@
-import React, { FC } from 'react'
-import { LayoutRoot } from '../layout_root'
-
-interface NProgressFC extends FC {
-  start(): void
-  done(): void
-}
-
-const NProgress: NProgressFC = () => (
-  <div className='gm-n-progress gm-n-progress-loading' />
-)
-
-let timer: number | null
-let reqLength = 0
-
-NProgress.start = function () {
-  reqLength = reqLength + 1
-  if (reqLength === 1) {
-    if (timer) {
-      clearTimeout(timer)
-      timer = null
-    }
-    LayoutRoot.setComponent(LayoutRoot.Type.N_PROGRESS, <NProgress />)
-  }
-}
-
-NProgress.done = function () {
-  reqLength = reqLength - 1
-  const nProgress = document.querySelector('.gm-n-progress')
-  if (!reqLength && !timer) {
-    nProgress && (nProgress.className = 'gm-n-progress gm-n-progress-completed')
-    timer = window.setTimeout(function () {
-      LayoutRoot.removeComponent(LayoutRoot.Type.N_PROGRESS)
-      timer = null
-    }, 250)
-  }
-}
-
-export default NProgress
+import React, { FC } from 'react'
+import { LayoutRoot } from '../layout_root'
+
+interface NProgressFC extends FC {
+  start(): void
+  done(): void
+}
+
+const NProgress: NProgressFC = () => (
+  <div className='gm-n-progress gm-n-progress-loading' />
+)
+
+let timer: number | null
+let reqLength = 0
+
+NProgress.start = function () {
+  reqLength = reqLength + 1
+  if (reqLength === 1) {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+    LayoutRoot.setComponent(LayoutRoot.Type.N_PROGRESS, <NProgress />)
+  }
+}
+
+NProgress.done = function () {
+  reqLength = reqLength - 1
+  const nProgress = document.querySelector('.gm-n-progress')
+  if (!reqLength && !timer) {
+    nProgress && (nProgress.className = 'gm-n-progress gm-n-progress-completed')
+    timer = window.setTimeout(function () {
+      LayoutRoot.removeComponent(LayoutRoot.Type.N_PROGRESS)
+      timer = null
+    }, 250)
+  }
+}
+
+export default NProgress

package/src/component/n_progress/stories.tsx

@@ -1,25 +1,25 @@
-import React from 'react'
-import NProgress from './n_progress'
-
-export const ComNProgress = () => (
-  <div>
-    <button
-      onClick={() => {
-        NProgress.start()
-      }}
-    >
-      start
-    </button>
-    <button
-      onClick={() => {
-        NProgress.done()
-      }}
-    >
-      end
-    </button>
-  </div>
-)
-
-export default {
-  title: '反馈/NProgress',
-}
+import React from 'react'
+import NProgress from './n_progress'
+
+export const ComNProgress = () => (
+  <div>
+    <button
+      onClick={() => {
+        NProgress.start()
+      }}
+    >
+      start
+    </button>
+    <button
+      onClick={() => {
+        NProgress.done()
+      }}
+    >
+      end
+    </button>
+  </div>
+)
+
+export default {
+  title: '反馈/NProgress',
+}

package/src/component/n_progress/style.less

@@ -1,39 +1,39 @@
-.gm-n-progress {
-  transition: all 200ms ease;
-  height: 2px;
-  background: var(--gm-color-primary);
-  width: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 9999;
-}
-
-.gm-n-progress-loading {
-  animation: gm-n-progress-loading 1s linear;
-  animation-fill-mode: forwards;
-}
-
-.gm-n-progress-completed {
-  transform: translateX(0);
-  visibility: hidden;
-}
-
-@keyframes gm-n-progress-loading {
-  0% {
-    transform: translateX(-100%);
-  }
-
-  20% {
-    transform: translateX(-50%);
-  }
-
-  50% {
-    transform: translateX(-20%);
-  }
-
-  100% {
-    transform: translateX(-10%);
-  }
-}
+.gm-n-progress {
+  transition: all 200ms ease;
+  height: 2px;
+  background: var(--gm-color-primary);
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+}
+
+.gm-n-progress-loading {
+  animation: gm-n-progress-loading 1s linear;
+  animation-fill-mode: forwards;
+}
+
+.gm-n-progress-completed {
+  transform: translateX(0);
+  visibility: hidden;
+}
+
+@keyframes gm-n-progress-loading {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  20% {
+    transform: translateX(-50%);
+  }
+
+  50% {
+    transform: translateX(-20%);
+  }
+
+  100% {
+    transform: translateX(-10%);
+  }
+}

package/src/component/nav/a.tsx

@@ -1,7 +1,7 @@
-import React, { AnchorHTMLAttributes, FC } from 'react'
-
-const A: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({ href, ...rest }) => {
-  return <a href={`#${href}`} {...rest} />
-}
-
-export default A
+import React, { AnchorHTMLAttributes, FC } from 'react'
+
+const A: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({ href, ...rest }) => {
+  return <a href={`#${href}`} {...rest} />
+}
+
+export default A

package/src/component/nav/index.ts

@@ -1,10 +1,10 @@
-export { default as Nav } from './nav'
-export { default as NavSingleItem } from './nav_single_item'
-
-export type {
-  NavProps,
-  NavSingleItemProps,
-  NavData,
-  NavDataLevel2,
-  NavDataLevel3,
-} from './types'
+export { default as Nav } from './nav'
+export { default as NavSingleItem } from './nav_single_item'
+
+export type {
+  NavProps,
+  NavSingleItemProps,
+  NavData,
+  NavDataLevel2,
+  NavDataLevel3,
+} from './types'

package/src/component/nav/nav.tsx

@@ -1,114 +1,114 @@
-import React, { FC, useState, MouseEvent, useRef } from 'react'
-import classNames from 'classnames'
-import { NavProps } from './types'
-import { Flex } from '../flex'
-import NavItem from './nav_item'
-import NavSingleItem from './nav_single_item'
-
-const Nav: FC<NavProps> = ({
-  logo,
-  data,
-  selected,
-  onSelect,
-  onPushCreate,
-  showActive,
-  other,
-  className,
-  style,
-  footerImage,
-  footerConfig,
-  ...rest
-}) => {
-  // 根据鼠标点到导航栏右边的线距离，判断移动方向
-  const temp = useRef(0)
-  // 控制hover
-  const canHover = useRef(true)
-  // 优化体验,设置计时器
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const refNav = useRef<HTMLDivElement>(null)
-  // 控制菜单浮层
-  const [hoverLink, setCanHoverLink] = useState(showActive || '')
-
-  // 每个 nav_item 的 mouseMove 的 callback
-  const handleMouseMove = (event: MouseEvent, link: string) => {
-    if (canHover.current) {
-      setCanHoverLink(link)
-    }
-    checkActive(event.clientX)
-  }
-
-  // 根据 navItem 的鼠标 x 坐标变化，控制 hover
-  const checkActive = (mouseX: number) => {
-    // 导航栏右侧 x 边界坐标值
-    const maxX = refNav.current!.getBoundingClientRect().width
-    const nowTemp = maxX - mouseX
-    // 比较前后，两次坐标差值，判断用户鼠标行为，是左滑或右滑
-    if (nowTemp < temp.current) {
-      // 右滑，锁hover
-      canHover.current = false
-      // 用户鼠标停止时，无法触发此事件，所以加入定时器，优化用户悬停情况下，自动解锁 hover
-      clearTimeout(timer.current as ReturnType<typeof setTimeout>)
-      const newTimer = setTimeout(() => {
-        canHover.current = true
-      }, 100)
-      timer.current = newTimer
-    } else {
-      // 左滑，不锁 hover
-      canHover.current = true
-    }
-    temp.current = nowTemp
-  }
-
-  const handleMouseLeave = () => {
-    setCanHoverLink('')
-  }
-  const handleMouseEnter = () => {
-    // 解决重新进入状态初始化问题
-    setCanHoverLink('')
-  }
-
-  return (
-    <Flex
-      column
-      {...rest}
-      ref={refNav}
-      className={classNames('gm-nav', className)}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <div className='gm-nav-logo'>{logo}</div>
-      <Flex flex column className='gm-nav-content'>
-        {data.map((one) => (
-          <NavItem
-            key={one.link}
-            showSub={hoverLink === one.link}
-            onMouseMove={handleMouseMove}
-            data={one}
-            selected={selected}
-            onSelect={onSelect}
-            onPushCreate={onPushCreate}
-          />
-        ))}
-        {other}
-      </Flex>
-      <div className={footerConfig && footerConfig.length > 0 ? 'gm-nav-footer-iot' : ''}>
-        {footerConfig?.map((item) => (
-          <NavItem
-            key={item.link}
-            showSub={hoverLink === item.link}
-            onMouseMove={handleMouseMove}
-            data={item}
-            selected={selected}
-            onSelect={onSelect}
-            onPushCreate={onPushCreate}
-            footerImage={footerImage}
-          />
-        ))}
-      </div>
-      <div id='gmNavPopupContainer' />
-    </Flex>
-  )
-}
-
-export { NavItem, NavSingleItem }
-export default Nav
+import React, { FC, useState, MouseEvent, useRef } from 'react'
+import classNames from 'classnames'
+import { NavProps } from './types'
+import { Flex } from '../flex'
+import NavItem from './nav_item'
+import NavSingleItem from './nav_single_item'
+
+const Nav: FC<NavProps> = ({
+  logo,
+  data,
+  selected,
+  onSelect,
+  onPushCreate,
+  showActive,
+  other,
+  className,
+  style,
+  footerImage,
+  footerConfig,
+  ...rest
+}) => {
+  // 根据鼠标点到导航栏右边的线距离，判断移动方向
+  const temp = useRef(0)
+  // 控制hover
+  const canHover = useRef(true)
+  // 优化体验,设置计时器
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const refNav = useRef<HTMLDivElement>(null)
+  // 控制菜单浮层
+  const [hoverLink, setCanHoverLink] = useState(showActive || '')
+
+  // 每个 nav_item 的 mouseMove 的 callback
+  const handleMouseMove = (event: MouseEvent, link: string) => {
+    if (canHover.current) {
+      setCanHoverLink(link)
+    }
+    checkActive(event.clientX)
+  }
+
+  // 根据 navItem 的鼠标 x 坐标变化，控制 hover
+  const checkActive = (mouseX: number) => {
+    // 导航栏右侧 x 边界坐标值
+    const maxX = refNav.current!.getBoundingClientRect().width
+    const nowTemp = maxX - mouseX
+    // 比较前后，两次坐标差值，判断用户鼠标行为，是左滑或右滑
+    if (nowTemp < temp.current) {
+      // 右滑，锁hover
+      canHover.current = false
+      // 用户鼠标停止时，无法触发此事件，所以加入定时器，优化用户悬停情况下，自动解锁 hover
+      clearTimeout(timer.current as ReturnType<typeof setTimeout>)
+      const newTimer = setTimeout(() => {
+        canHover.current = true
+      }, 100)
+      timer.current = newTimer
+    } else {
+      // 左滑，不锁 hover
+      canHover.current = true
+    }
+    temp.current = nowTemp
+  }
+
+  const handleMouseLeave = () => {
+    setCanHoverLink('')
+  }
+  const handleMouseEnter = () => {
+    // 解决重新进入状态初始化问题
+    setCanHoverLink('')
+  }
+
+  return (
+    <Flex
+      column
+      {...rest}
+      ref={refNav}
+      className={classNames('gm-nav', className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className='gm-nav-logo'>{logo}</div>
+      <Flex flex column className='gm-nav-content'>
+        {data.map((one) => (
+          <NavItem
+            key={one.link}
+            showSub={hoverLink === one.link}
+            onMouseMove={handleMouseMove}
+            data={one}
+            selected={selected}
+            onSelect={onSelect}
+            onPushCreate={onPushCreate}
+          />
+        ))}
+        {other}
+      </Flex>
+      <div className={footerConfig && footerConfig.length > 0 ? 'gm-nav-footer-iot' : ''}>
+        {footerConfig?.map((item) => (
+          <NavItem
+            key={item.link}
+            showSub={hoverLink === item.link}
+            onMouseMove={handleMouseMove}
+            data={item}
+            selected={selected}
+            onSelect={onSelect}
+            onPushCreate={onPushCreate}
+            footerImage={footerImage}
+          />
+        ))}
+      </div>
+      <div id='gmNavPopupContainer' />
+    </Flex>
+  )
+}
+
+export { NavItem, NavSingleItem }
+export default Nav