feat(platform): add Marker. MarkerCluster and InfoWindow

Author: xiejay97

packages/hooks/src/useForkRef.ts

@@ -1,7 +1,7 @@
 import { isFunction, isObject } from 'lodash';
 import { useCallback } from 'react';
 
-export function setRef(ref: any, value: any): void {
+function setRef(ref: any, value: any): void {
   if (isFunction(ref)) {
     ref(value);
   } else if (isObject(ref) && 'current' in ref) {

packages/icons/src/CustomIcon.tsx

@@ -2,8 +2,8 @@ import type { DIconBaseProps } from './useIconDefinition';
 
 import React from 'react';
 
+import { useIconProps } from './hooks';
 import { useIconDefinition } from './useIconDefinition';
-import { useIconProps } from './useIconProps';
 
 export type DCustomIconeProps = DIconBaseProps;
 

packages/icons/src/Icon.tsx

@@ -1,10 +1,10 @@
 import type { DIconBaseProps } from './useIconDefinition';
 import type { AbstractNode, IconDefinition } from '@ant-design/icons-svg/es/types';
 
-import React, { useContext } from 'react';
+import React from 'react';
 
+import { useIconContext, useIconProps } from './hooks';
 import { useIconDefinition } from './useIconDefinition';
-import { useIconProps } from './useIconProps';
 
 interface DRenderIconOptions {
   placeholders: {
@@ -33,16 +33,10 @@ function renderAbstractNode(node: AbstractNode, options: DRenderIconOptions): JS
 
 export interface DIconContextData {
   props?: Omit<DIconProps, 'dIcon'>;
-  namespace: string;
-  twoToneColor: (theme?: DIconProps['dTheme']) => [string, string];
+  className: (theme: DIconProps['dTheme']) => string;
+  twoToneColor: (theme: DIconProps['dTheme']) => [string, string];
 }
-export const DIconContext = React.createContext<DIconContextData>({
-  namespace: 'd',
-  twoToneColor: (theme) => [
-    theme ? `var(--d-color-${theme})` : `var(--d-text-color)`,
-    theme ? `var(--d-background-color-${theme})` : `rgb(var(--d-text-color-rgb) / 10%)`,
-  ],
-});
+export const DIconContext = React.createContext<DIconContextData | null>(null);
 
 export interface DIconProps extends Omit<DIconBaseProps, 'children'> {
   dTwoToneColor?: [string, string];
@@ -58,7 +52,9 @@ function Icon(props: DIconProps, ref: React.ForwardedRef<SVGSVGElement>): JSX.El
     ...restProps
   } = useIconProps(props);
 
-  const twoToneColorByTheme = useContext(DIconContext).twoToneColor;
+  const context = useIconContext();
+
+  const twoToneColorByTheme = context.twoToneColor;
   const twoToneColor = dTwoToneColor ?? twoToneColorByTheme(dTheme);
 
   const svgProps = useIconDefinition({ ...restProps, dTheme });

packages/icons/src/useIconProps.ts renamed to packages/icons/src/hooks.ts

@@ -1,10 +1,22 @@
-import { isUndefined } from 'lodash';
+import type { DIconContextData } from './Icon';
+
+import { isNull, isUndefined } from 'lodash';
 import { useContext } from 'react';
 
 import { DIconContext } from './Icon';
 
-export function useIconProps<T extends object>(props: T): T {
+export function useIconContext(): DIconContextData {
   const context = useContext(DIconContext);
+  if (isNull(context)) {
+    throw new Error('Please provide `DIconContext`!');
+  }
+
+  return context;
+}
+
+export function useIconProps<T extends object>(props: T): T {
+  const context = useIconContext();
+
   const gProps = context.props ?? {};
   const noUndefinedProps: any = {};
   Object.keys(props).forEach((key) => {

packages/icons/src/useIconDefinition.ts

@@ -1,9 +1,8 @@
 import { isUndefined, isNumber, isArray } from 'lodash';
-import { useContext } from 'react';
 
 import { getClassName } from '@react-devui/utils';
 
-import { DIconContext } from './Icon';
+import { useIconContext } from './hooks';
 
 export interface DIconBaseProps extends React.SVGAttributes<SVGElement> {
   dSize?: number | string | [number | string, number | string];
@@ -24,15 +23,13 @@ export function useIconDefinition(props: DIconBaseProps) {
     ...restProps
   } = props;
 
-  const prefix = `${useContext(DIconContext).namespace}-`;
+  const context = useIconContext();
 
   const [width, height] = isArray(dSize) ? dSize : [dSize, dSize];
 
   const svgProps: React.SVGAttributes<SVGElement> = {
     ...restProps,
-    className: getClassName(restProps.className, `${prefix}icon`, {
-      [`t-${dTheme}`]: dTheme,
-    }),
+    className: getClassName(restProps.className, context.className(dTheme)),
     style: {
       ...restProps.style,
       transform: isUndefined(dRotate) ? undefined : `rotate(${dRotate}deg)`,

packages/platform/src/app/App.tsx

@@ -1,4 +1,4 @@
-import type { UserState } from '../config/state';
+import type { UserState } from '../core/state';
 import type { DRootProps } from '@react-devui/ui';
 import type { DLang } from '@react-devui/ui/utils/types';
 

packages/platform/src/app/Routes.guard.tsx

@@ -4,8 +4,7 @@ import { isNull, isObject } from 'lodash';
 import { Navigate, useLocation } from 'react-router-dom';
 
 import { LOGIN_PATH, PREV_ROUTE_KEY } from '../config/other';
-import { TOKEN, TOKEN_EXPIRATION_OFFSET } from '../config/token';
-import { useACL } from '../core';
+import { TOKEN, useACL } from '../core';
 
 export function useACLGuard(): CanActivateFn {
   const acl = useACL();
@@ -35,11 +34,8 @@ export function useTokenGuard(): CanActivateFn {
       return <Navigate to={LOGIN_PATH} state={{ [PREV_ROUTE_KEY]: location }} replace />;
     }
 
-    const expiration = TOKEN.expiration;
-    if (!isNull(expiration)) {
-      if (expiration - TOKEN_EXPIRATION_OFFSET <= Date.now()) {
-        return <Navigate to={LOGIN_PATH} state={{ [PREV_ROUTE_KEY]: location }} replace />;
-      }
+    if (TOKEN.expired) {
+      return <Navigate to={LOGIN_PATH} state={{ [PREV_ROUTE_KEY]: location }} replace />;
     }
 
     return true;

packages/platform/src/app/components/amap/AMap.tsx

@@ -2,10 +2,9 @@ import type { AppTheme } from '../../App';
 
 import * as echarts from 'echarts';
 import { cloneDeep, merge } from 'lodash';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 
 import { useAsync, useResize, useStorage } from '@react-devui/hooks';
-import { setRef } from '@react-devui/hooks/useForkRef';
 import { getClassName } from '@react-devui/utils';
 
 import { STORAGE_KEY } from '../../../config/storage';
@@ -14,11 +13,11 @@ import chartTheme from './theme.json';
 echarts.registerTheme('light', chartTheme.light);
 echarts.registerTheme('dark', merge(cloneDeep(chartTheme.light), chartTheme.dark));
 
-export interface AppEChartsProps<O extends echarts.EChartsOption> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface AppChartProps<O extends echarts.EChartsOption> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   aOption: O | null;
 }
 
-function ECharts<O extends echarts.EChartsOption>(props: AppEChartsProps<O>, ref: React.ForwardedRef<echarts.ECharts>): JSX.Element | null {
+function Chart<O extends echarts.EChartsOption>(props: AppChartProps<O>, ref: React.ForwardedRef<echarts.ECharts>): JSX.Element | null {
   const {
     aOption,
 
@@ -27,6 +26,7 @@ function ECharts<O extends echarts.EChartsOption>(props: AppEChartsProps<O>, ref
 
   //#region Ref
   const elRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   //#endregion
 
   const dataRef = useRef<{
@@ -38,17 +38,14 @@ function ECharts<O extends echarts.EChartsOption>(props: AppEChartsProps<O>, ref
   const themeStorage = useStorage<AppTheme>(...STORAGE_KEY.theme);
 
   const [instance, setInstance] = useState<echarts.ECharts | null>(null);
-  const containerRef = useCallback(
-    (el: HTMLElement | null) => {
-      setInstance((draft) => {
-        draft?.dispose();
-        const instance = el ? echarts.init(el, themeStorage.value, { renderer: 'svg' }) : null;
-        setRef(ref, instance);
-        return instance;
-      });
-    },
-    [ref, themeStorage.value]
-  );
+
+  useEffect(() => {
+    const instance = containerRef.current ? echarts.init(containerRef.current, themeStorage.value, { renderer: 'svg' }) : null;
+    setInstance(instance);
+    return () => {
+      instance?.dispose();
+    };
+  }, [themeStorage.value]);
 
   useEffect(() => {
     if (instance && aOption) {
@@ -66,11 +63,13 @@ function ECharts<O extends echarts.EChartsOption>(props: AppEChartsProps<O>, ref
     }
   });
 
+  useImperativeHandle<echarts.ECharts | null, echarts.ECharts | null>(ref, () => instance, [instance]);
+
   return (
-    <div {...restProps} ref={elRef} className={getClassName(restProps.className, 'app-echarts')}>
-      <div ref={containerRef} className="app-echarts__container"></div>
+    <div {...restProps} ref={elRef} className={getClassName(restProps.className, 'app-chart')}>
+      <div ref={containerRef} className="app-chart__container"></div>
     </div>
   );
 }
 
-export const AppECharts = React.forwardRef(ECharts);
+export const AppChart = React.forwardRef(Chart);