-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
30 changed files
with
433 additions
and
188 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
import AMapLoader from '@amap/amap-jsapi-loader'; | ||
import { isNull, isUndefined } from 'lodash'; | ||
import React, { useCallback, useRef } from 'react'; | ||
|
||
import { setRef } from '@react-devui/hooks/useForkRef'; | ||
import { getClassName } from '@react-devui/utils'; | ||
|
||
const CONFIG: { | ||
key?: string; | ||
securityJsCode?: string | null; | ||
version?: string; | ||
} = { | ||
version: '2.0', | ||
}; | ||
|
||
export interface AppAMapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> { | ||
aKey?: string; | ||
aSecurityJsCode?: string | null; | ||
aVersion?: string; | ||
aPlugins?: string[]; | ||
aOptions?: AMap.MapOptions; | ||
} | ||
|
||
function AMap(props: AppAMapProps, ref: React.ForwardedRef<AMap.Map>): JSX.Element | null { | ||
const { | ||
aKey = CONFIG.key, | ||
aSecurityJsCode = CONFIG.securityJsCode, | ||
aVersion = CONFIG.version, | ||
aPlugins, | ||
aOptions, | ||
|
||
...restProps | ||
} = props; | ||
|
||
//#region Ref | ||
const elRef = useRef<HTMLDivElement>(null); | ||
//#endregion | ||
|
||
const instanceRef = useRef<AMap.Map | null>(null); | ||
const containerRef = useCallback( | ||
(el: HTMLElement | null) => { | ||
instanceRef.current?.destroy(); | ||
instanceRef.current = null; | ||
setRef(ref, instanceRef.current); | ||
|
||
if (el) { | ||
if (isUndefined(aKey) || isUndefined(aSecurityJsCode) || isUndefined(aVersion)) { | ||
throw new Error('Configs of amap is required!'); | ||
} | ||
|
||
if (!isNull(aSecurityJsCode)) { | ||
window['_AMapSecurityConfig'] = { | ||
// serviceHost: 'http://1.1.1.1:80/_AMapService', | ||
|
||
securityJsCode: aSecurityJsCode, | ||
}; | ||
} | ||
|
||
AMapLoader.load({ | ||
key: aKey, | ||
version: aVersion, | ||
plugins: aPlugins, | ||
}) | ||
.then((AMap) => { | ||
instanceRef.current = new AMap.Map(el, aOptions); | ||
setRef(ref, instanceRef.current); | ||
}) | ||
.catch((e) => { | ||
console.error(e); | ||
}); | ||
} | ||
}, | ||
[aKey, aOptions, aPlugins, aSecurityJsCode, aVersion, ref] | ||
); | ||
|
||
return ( | ||
<div {...restProps} ref={elRef} className={getClassName(restProps.className, 'app-amap')}> | ||
<div ref={containerRef} className="app-amap__container"></div> | ||
</div> | ||
); | ||
} | ||
|
||
export const AppAMap = React.forwardRef(AMap); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './AMap'; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
import type { AppTheme } from '../../App'; | ||
|
||
import * as echarts from 'echarts'; | ||
import { cloneDeep, merge } from 'lodash'; | ||
import React, { useCallback, useEffect, 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'; | ||
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'> { | ||
aOption: O | null; | ||
} | ||
|
||
function ECharts<O extends echarts.EChartsOption>(props: AppEChartsProps<O>, ref: React.ForwardedRef<echarts.ECharts>): JSX.Element | null { | ||
const { | ||
aOption, | ||
|
||
...restProps | ||
} = props; | ||
|
||
//#region Ref | ||
const elRef = useRef<HTMLDivElement>(null); | ||
//#endregion | ||
|
||
const dataRef = useRef<{ | ||
clearTid?: () => void; | ||
}>({}); | ||
|
||
const async = useAsync(); | ||
|
||
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(() => { | ||
if (instance && aOption) { | ||
instance.setOption(aOption); | ||
} | ||
}, [aOption, instance]); | ||
|
||
useResize(elRef, () => { | ||
if (instance) { | ||
dataRef.current.clearTid?.(); | ||
dataRef.current.clearTid = async.setTimeout(() => { | ||
dataRef.current.clearTid = undefined; | ||
instance.resize({ animation: { duration: 200 } }); | ||
}, 100); | ||
} | ||
}); | ||
|
||
return ( | ||
<div {...restProps} ref={elRef} className={getClassName(restProps.className, 'app-echarts')}> | ||
<div ref={containerRef} className="app-echarts__container"></div> | ||
</div> | ||
); | ||
} | ||
|
||
export const AppECharts = React.forwardRef(ECharts); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './ECharts'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
20 changes: 20 additions & 0 deletions
20
packages/platform/src/app/routes/dashboard/amap/AMap.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
@import '~styles/module'; | ||
|
||
@include b(amap) { | ||
@include app-route; | ||
|
||
@include e(empty) { | ||
position: relative; | ||
padding-top: 61.8%; | ||
font-weight: 500; | ||
background-color: var(--d-mask-background-color); | ||
|
||
& > div { | ||
position: absolute; | ||
inset: 0; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import { useTranslation } from 'react-i18next'; | ||
|
||
import { useStorage } from '@react-devui/hooks'; | ||
import { DButton, DForm, DInput, FormControl, FormGroup, useForm, Validators } from '@react-devui/ui'; | ||
|
||
import { STORAGE_KEY } from '../../../../config/storage'; | ||
import { AppAMap } from '../../../components'; | ||
import styles from './AMap.module.scss'; | ||
|
||
export default function AMap(): JSX.Element | null { | ||
const { t } = useTranslation(); | ||
const amapStorage = useStorage<{ key: string; securityJsCode: string | null }>(...STORAGE_KEY.amap); | ||
|
||
const [form, updateForm] = useForm( | ||
() => | ||
new FormGroup({ | ||
key: new FormControl(amapStorage.value?.key ?? '', Validators.required), | ||
securityJsCode: new FormControl(amapStorage.value?.securityJsCode ?? ''), | ||
}) | ||
); | ||
|
||
return ( | ||
<div className={styles['app-amap']}> | ||
<DForm | ||
className="mb-3" | ||
onSubmit={() => { | ||
amapStorage.set({ | ||
key: form.value.key, | ||
securityJsCode: form.value.securityJsCode ? form.value.securityJsCode : null, | ||
}); | ||
}} | ||
dLayout="vertical" | ||
dUpdate={updateForm} | ||
> | ||
<DForm.Group dFormGroup={form}> | ||
<DForm.Item dFormControls={{ key: t('routes.dashboard.amap.Please enter your JSAPI key') }} dLabel="Key"> | ||
{({ key }) => <DInput dFormControl={key} dPlaceholder="Key" />} | ||
</DForm.Item> | ||
<DForm.Item dFormControls={{ securityJsCode: {} }} dLabel={t('routes.dashboard.amap.Security key')}> | ||
{({ securityJsCode }) => <DInput dFormControl={securityJsCode} dPlaceholder={t('routes.dashboard.amap.Security key')} />} | ||
</DForm.Item> | ||
<DForm.Item> | ||
<DButton type="submit" disabled={!form.valid}> | ||
{t('routes.dashboard.amap.OK')} | ||
</DButton> | ||
</DForm.Item> | ||
</DForm.Group> | ||
</DForm> | ||
{amapStorage.value ? ( | ||
<AppAMap style={{ paddingTop: '61.8%' }} aKey={amapStorage.value.key} aSecurityJsCode={amapStorage.value.securityJsCode}></AppAMap> | ||
) : ( | ||
<div className={styles['app-amap__empty']}> | ||
<div>{t('routes.dashboard.amap.No JSAPI key')}</div> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.