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

package/src/component/label/style.less

@@ -1,34 +1,34 @@
-.gm-label {
-  display: inline-block;
-  vertical-align: middle;
-  border-radius: 2px;
-  font-size: 12px;
-  padding: 1px 8px;
-  white-space: nowrap;
-}
-
-.gm-label-default {
-  background-color: transparent;
-  color: var(--gm-color-default) !important;
-  border: 1px solid var(--gm-label-color-inactive); // 甩锅，设计觉得通用边框颜色太浅，这里做特殊取色
-}
-
-.gm-label-primary {
-  background-color: var(--gm-color-primary);
-  color: white;
-}
-
-.gm-label-danger {
-  background-color: var(--gm-label-color-danger);
-  color: white;
-}
-
-.gm-label-inactive {
-  background-color: var(--gm-label-color-inactive);
-  color: white;
-}
-
-.gm-label-gray {
-  background-color: var(--gm-label-color-gray);
-  color: var(--gm-color-default);
-}
+.gm-label {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 2px;
+  font-size: 12px;
+  padding: 1px 8px;
+  white-space: nowrap;
+}
+
+.gm-label-default {
+  background-color: transparent;
+  color: var(--gm-color-default) !important;
+  border: 1px solid var(--gm-label-color-inactive); // 甩锅，设计觉得通用边框颜色太浅，这里做特殊取色
+}
+
+.gm-label-primary {
+  background-color: var(--gm-color-primary);
+  color: white;
+}
+
+.gm-label-danger {
+  background-color: var(--gm-label-color-danger);
+  color: white;
+}
+
+.gm-label-inactive {
+  background-color: var(--gm-label-color-inactive);
+  color: white;
+}
+
+.gm-label-gray {
+  background-color: var(--gm-label-color-gray);
+  color: var(--gm-color-default);
+}

package/src/component/layout_root/index.ts

@@ -1,2 +1,2 @@
-export { default as LayoutRoot } from './layout_root'
-export { Type } from './types'
+export { default as LayoutRoot } from './layout_root'
+export { Type } from './types'

package/src/component/layout_root/layout_root.tsx

@@ -1,116 +1,116 @@
-import React, { FC, ReactElement, useEffect, useState } from 'react'
-import _ from 'lodash'
-import {
-  Type,
-  SetComponentFunc,
-  State,
-  LayoutRootStatic,
-  ComponentListItem,
-} from './types'
-
-let setComponentFunc: SetComponentFunc = null
-
-const LayoutRoot: FC & LayoutRootStatic = () => {
-  const [state, setState] = useState<State>({})
-
-  useEffect(() => {
-    setComponentFunc = (type, component) => {
-      setState((s) => ({
-        ...s,
-        [type]: component,
-      }))
-    }
-
-    return () => {
-      setComponentFunc = null
-    }
-  })
-
-  const { popover, right_side_modal, modal, tip, full_loading, n_progress } = state
-
-  return (
-    <div>
-      {popover && popover.length > 0 && (
-        <div>
-          {_.map(popover, (v: ComponentListItem) =>
-            React.cloneElement(v.com as ReactElement, {
-              key: v.id,
-            })
-          )}
-        </div>
-      )}
-
-      {right_side_modal && <div>{right_side_modal}</div>}
-      {modal && <div>{modal}</div>}
-
-      {tip && tip.length > 0 && (
-        <div className='gm-tips'>
-          {_.map(tip, (v: ComponentListItem) =>
-            React.cloneElement(v.com as ReactElement, {
-              key: v.id,
-            })
-          )}
-        </div>
-      )}
-
-      {full_loading && <div>{full_loading}</div>}
-
-      {n_progress && <div>{n_progress}</div>}
-    </div>
-  )
-}
-
-const componentListMap: {
-  popover: ComponentListItem[]
-  tip: ComponentListItem[]
-} = {
-  popover: [],
-  tip: [],
-}
-
-LayoutRoot.setComponentArray = (type, id, com) => {
-  // @ts-ignore
-  const list: ComponentListItem[] = componentListMap[type]
-
-  if (setComponentFunc) {
-    const index = _.findIndex(list, (v) => v.id === id)
-
-    if (com) {
-      if (index === -1) {
-        list.push({ id, com })
-      } else {
-        list[index] = { id, com }
-      }
-    } else {
-      _.remove(list, (v) => v.id === id)
-    }
-
-    setComponentFunc(type, list)
-  } else {
-    console.warn('LayoutRoot is uninitialized')
-  }
-}
-
-LayoutRoot.removeComponentArray = (type, id) => {
-  LayoutRoot.setComponentArray(type, id, undefined)
-}
-
-LayoutRoot.clearComponentArray = (type) => {
-  LayoutRoot.setComponent(type, [])
-}
-
-LayoutRoot.setComponent = (type, com) => {
-  if (setComponentFunc) {
-    setComponentFunc(type, com)
-  } else {
-    console.warn('LayoutRoot is uninitialized')
-  }
-}
-
-LayoutRoot.removeComponent = (type) => {
-  LayoutRoot.setComponent(type, undefined)
-}
-
-LayoutRoot.Type = Type
-
-export default LayoutRoot
+import React, { FC, ReactElement, useEffect, useState } from 'react'
+import _ from 'lodash'
+import {
+  Type,
+  SetComponentFunc,
+  State,
+  LayoutRootStatic,
+  ComponentListItem,
+} from './types'
+
+let setComponentFunc: SetComponentFunc = null
+
+const LayoutRoot: FC & LayoutRootStatic = () => {
+  const [state, setState] = useState<State>({})
+
+  useEffect(() => {
+    setComponentFunc = (type, component) => {
+      setState((s) => ({
+        ...s,
+        [type]: component,
+      }))
+    }
+
+    return () => {
+      setComponentFunc = null
+    }
+  })
+
+  const { popover, right_side_modal, modal, tip, full_loading, n_progress } = state
+
+  return (
+    <div>
+      {popover && popover.length > 0 && (
+        <div>
+          {_.map(popover, (v: ComponentListItem) =>
+            React.cloneElement(v.com as ReactElement, {
+              key: v.id,
+            })
+          )}
+        </div>
+      )}
+
+      {right_side_modal && <div>{right_side_modal}</div>}
+      {modal && <div>{modal}</div>}
+
+      {tip && tip.length > 0 && (
+        <div className='gm-tips'>
+          {_.map(tip, (v: ComponentListItem) =>
+            React.cloneElement(v.com as ReactElement, {
+              key: v.id,
+            })
+          )}
+        </div>
+      )}
+
+      {full_loading && <div>{full_loading}</div>}
+
+      {n_progress && <div>{n_progress}</div>}
+    </div>
+  )
+}
+
+const componentListMap: {
+  popover: ComponentListItem[]
+  tip: ComponentListItem[]
+} = {
+  popover: [],
+  tip: [],
+}
+
+LayoutRoot.setComponentArray = (type, id, com) => {
+  // @ts-ignore
+  const list: ComponentListItem[] = componentListMap[type]
+
+  if (setComponentFunc) {
+    const index = _.findIndex(list, (v) => v.id === id)
+
+    if (com) {
+      if (index === -1) {
+        list.push({ id, com })
+      } else {
+        list[index] = { id, com }
+      }
+    } else {
+      _.remove(list, (v) => v.id === id)
+    }
+
+    setComponentFunc(type, list)
+  } else {
+    console.warn('LayoutRoot is uninitialized')
+  }
+}
+
+LayoutRoot.removeComponentArray = (type, id) => {
+  LayoutRoot.setComponentArray(type, id, undefined)
+}
+
+LayoutRoot.clearComponentArray = (type) => {
+  LayoutRoot.setComponent(type, [])
+}
+
+LayoutRoot.setComponent = (type, com) => {
+  if (setComponentFunc) {
+    setComponentFunc(type, com)
+  } else {
+    console.warn('LayoutRoot is uninitialized')
+  }
+}
+
+LayoutRoot.removeComponent = (type) => {
+  LayoutRoot.setComponent(type, undefined)
+}
+
+LayoutRoot.Type = Type
+
+export default LayoutRoot

package/src/component/layout_root/types.ts

@@ -1,38 +1,38 @@
-import { ReactNode } from 'react'
-
-enum Type {
-  POPOVER = 'popover',
-  RIGHT_SIDE_MODAL = 'right_side_modal',
-  MODAL = 'modal',
-  TIP = 'tip',
-  FULL_LOADING = 'full_loading',
-  N_PROGRESS = 'n_progress',
-}
-
-type SetComponentFunc = ((type: Type, component: ReactNode) => void) | null
-
-interface State {
-  popover?: ReactNode[]
-  right_side_modal?: ReactNode
-  modal?: ReactNode
-  tip?: ReactNode[]
-  full_loading?: ReactNode
-  n_progress?: ReactNode
-}
-
-interface LayoutRootStatic {
-  Type: typeof Type
-  setComponent(type: Type, component?: ReactNode): void
-  removeComponent(type: Type): void
-  setComponentArray(type: Type, id: string, Component?: ReactNode): void
-  removeComponentArray(type: Type, id: string): void
-  clearComponentArray(type: Type): void
-}
-
-interface ComponentListItem {
-  id: string
-  com: ReactNode
-}
-
-export { Type }
-export type { SetComponentFunc, State, LayoutRootStatic, ComponentListItem }
+import { ReactNode } from 'react'
+
+enum Type {
+  POPOVER = 'popover',
+  RIGHT_SIDE_MODAL = 'right_side_modal',
+  MODAL = 'modal',
+  TIP = 'tip',
+  FULL_LOADING = 'full_loading',
+  N_PROGRESS = 'n_progress',
+}
+
+type SetComponentFunc = ((type: Type, component: ReactNode) => void) | null
+
+interface State {
+  popover?: ReactNode[]
+  right_side_modal?: ReactNode
+  modal?: ReactNode
+  tip?: ReactNode[]
+  full_loading?: ReactNode
+  n_progress?: ReactNode
+}
+
+interface LayoutRootStatic {
+  Type: typeof Type
+  setComponent(type: Type, component?: ReactNode): void
+  removeComponent(type: Type): void
+  setComponentArray(type: Type, id: string, Component?: ReactNode): void
+  removeComponentArray(type: Type, id: string): void
+  clearComponentArray(type: Type): void
+}
+
+interface ComponentListItem {
+  id: string
+  com: ReactNode
+}
+
+export { Type }
+export type { SetComponentFunc, State, LayoutRootStatic, ComponentListItem }

package/src/component/level_list/index.ts

@@ -1,2 +1,2 @@
-export { default as LevelList } from './level_list'
-export type { LevelListProps } from './types'
+export { default as LevelList } from './level_list'
+export type { LevelListProps } from './types'

package/src/component/level_list/level_item.tsx

@@ -1,79 +1,79 @@
-import React, { HTMLAttributes, useCallback, useMemo } from 'react'
-import classNames from 'classnames'
-import { LevelItemProps } from './types'
-import SVGRightSmall from '../../svg/right-small.svg'
-import { List } from '../list'
-import { TreeDataItem } from '../../types'
-import { Flex } from '../flex'
-import _ from 'lodash'
-
-function Item<V>({ item }: { item: TreeDataItem<V> }) {
-  const hasChildren = item.children && !!item.children.length
-  return (
-    <Flex alignCenter>
-      <Flex
-        flex
-        block
-        className={classNames({ 'gm-margin-right-10 gm-text-ellipsis': hasChildren })}
-      >
-        {item.text}
-      </Flex>
-      {hasChildren && <SVGRightSmall className='gm-level-list-item-right' />}
-    </Flex>
-  )
-}
-
-function LevelItem<V>({
-  title,
-  data,
-  selected,
-  onSelect,
-  onListItemMouseEnter,
-  willActiveSelected,
-  onlySelectLeaf,
-  className,
-  style,
-}: LevelItemProps<V>) {
-  const willActiveIndex = useMemo(
-    () => data.findIndex((value) => value.value === willActiveSelected),
-    [data, willActiveSelected]
-  )
-
-  const renderItem = useCallback((item: TreeDataItem<V>) => {
-    return <Item item={item} />
-  }, [])
-  const getItemProps = useCallback(
-    (item: TreeDataItem<V>): HTMLAttributes<HTMLDivElement> => ({
-      onMouseEnter: () => onListItemMouseEnter && onListItemMouseEnter(item),
-    }),
-    [onListItemMouseEnter]
-  )
-
-  const handleSelect = (selected: V) => {
-    const item = _.find<TreeDataItem<V>>(data, (v) => v.value === selected)
-
-    if (onlySelectLeaf) {
-      if (!item!.children) {
-        onSelect(selected)
-      }
-    } else {
-      onSelect(selected)
-    }
-  }
-
-  return (
-    <div className={classNames('gm-level-list-item', className)} style={style}>
-      {title && <div className='gm-level-list-item-title'>{title}</div>}
-      <List
-        data={data}
-        selected={selected}
-        onSelect={handleSelect}
-        renderItem={renderItem}
-        getItemProps={getItemProps}
-        willActiveIndex={willActiveIndex}
-      />
-    </div>
-  )
-}
-
-export default LevelItem
+import React, { HTMLAttributes, useCallback, useMemo } from 'react'
+import classNames from 'classnames'
+import { LevelItemProps } from './types'
+import SVGRightSmall from '../../svg/right-small.svg'
+import { List } from '../list'
+import { TreeDataItem } from '../../types'
+import { Flex } from '../flex'
+import _ from 'lodash'
+
+function Item<V>({ item }: { item: TreeDataItem<V> }) {
+  const hasChildren = item.children && !!item.children.length
+  return (
+    <Flex alignCenter>
+      <Flex
+        flex
+        block
+        className={classNames({ 'gm-margin-right-10 gm-text-ellipsis': hasChildren })}
+      >
+        {item.text}
+      </Flex>
+      {hasChildren && <SVGRightSmall className='gm-level-list-item-right' />}
+    </Flex>
+  )
+}
+
+function LevelItem<V>({
+  title,
+  data,
+  selected,
+  onSelect,
+  onListItemMouseEnter,
+  willActiveSelected,
+  onlySelectLeaf,
+  className,
+  style,
+}: LevelItemProps<V>) {
+  const willActiveIndex = useMemo(
+    () => data.findIndex((value) => value.value === willActiveSelected),
+    [data, willActiveSelected]
+  )
+
+  const renderItem = useCallback((item: TreeDataItem<V>) => {
+    return <Item item={item} />
+  }, [])
+  const getItemProps = useCallback(
+    (item: TreeDataItem<V>): HTMLAttributes<HTMLDivElement> => ({
+      onMouseEnter: () => onListItemMouseEnter && onListItemMouseEnter(item),
+    }),
+    [onListItemMouseEnter]
+  )
+
+  const handleSelect = (selected: V) => {
+    const item = _.find<TreeDataItem<V>>(data, (v) => v.value === selected)
+
+    if (onlySelectLeaf) {
+      if (!item!.children) {
+        onSelect(selected)
+      }
+    } else {
+      onSelect(selected)
+    }
+  }
+
+  return (
+    <div className={classNames('gm-level-list-item', className)} style={style}>
+      {title && <div className='gm-level-list-item-title'>{title}</div>}
+      <List
+        data={data}
+        selected={selected}
+        onSelect={handleSelect}
+        renderItem={renderItem}
+        getItemProps={getItemProps}
+        willActiveIndex={willActiveIndex}
+      />
+    </div>
+  )
+}
+
+export default LevelItem