react-toolkits 2.13.19 → 2.13.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/lib/index.d.ts +12 -41
- package/lib/index.js +218 -203
- package/lib/index.js.map +1 -1
- package/locale/hooks.js +9 -1
- package/locale/hooks.js.map +1 -1
- package/locale/index.js +9 -1
- package/locale/index.js.map +1 -1
- package/package.json +3 -3
package/locale/hooks.js
CHANGED
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import { has, template, get } from 'lodash-es';
|
|
2
2
|
import { createContext, useMemo, useContext } from 'react';
|
|
3
3
|
import 'antd';
|
|
4
|
-
import { useStore } from 'zustand';
|
|
4
|
+
import { create, useStore } from 'zustand';
|
|
5
5
|
import 'zustand/middleware';
|
|
6
6
|
import 'axios';
|
|
7
7
|
import 'jwt-decode';
|
|
8
|
+
import 'react-router-dom';
|
|
9
|
+
import 'swr';
|
|
8
10
|
import 'react/jsx-runtime';
|
|
9
11
|
|
|
10
12
|
// src/components/locale/hooks.ts
|
|
13
|
+
create()((set) => ({
|
|
14
|
+
unregistered: false,
|
|
15
|
+
setUnregistered() {
|
|
16
|
+
set({ unregistered: true });
|
|
17
|
+
}
|
|
18
|
+
}));
|
|
11
19
|
var ToolkitsContext = createContext(null);
|
|
12
20
|
function useToolkitsStore(selector) {
|
|
13
21
|
const store = useContext(ToolkitsContext);
|
package/locale/hooks.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/toolkitsProvider/ToolkitsProvider.tsx","../src/components/locale/hooks.ts"],"names":["locale"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/pages/signIn/index.tsx","../src/components/toolkitsProvider/ToolkitsProvider.tsx","../src/components/locale/hooks.ts"],"names":["locale"],"mappings":";;;;;;;;;;;;AAkB8B,MAG3B,EAAA,CAAE,CAAQ,GAAA,MAAA;AAAA,EACX,YAAc,EAAA,KAAA;AAAA,EACd,eAAkB,GAAA;AAChB,IAAI,GAAA,CAAA,EAAE,YAAc,EAAA,IAAA,EAAM,CAAA;AAAA;AAE9B,CAAE,CAAA;ACdF,IAAM,eAAA,GAAkB,cAAoC,IAAI,CAAA;AAEzD,SAAS,iBAAoB,QAA0C,EAAA;AAC5E,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA;AACxC,EAAA,IAAI,CAAC,KAAA,EAAa,MAAA,IAAI,MAAM,sCAAsC,CAAA;AAClE,EAAO,OAAA,QAAA,CAAS,OAAO,QAAQ,CAAA;AACjC;AAuCA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;;;ACtCpC,SAAS,cAAiB,GAAA;AAC/B,EAAA,MAAMA,OAAS,GAAA,gBAAA,CAAiB,CAAS,KAAA,KAAA,KAAA,CAAM,MAAM,CAAA;AAErD,EAAA,MAAM,CAAI,GAAA,OAAA;AAAA,IACR,MAAM,CAAC,GAAoB,EAAA,IAAA,KACzB,IAAIA,OAAQ,EAAA,GAAG,CAAI,GAAA,QAAA,CAAS,IAAIA,OAAQ,EAAA,GAAa,CAAC,CAAA,CAAE,IAAI,CAAI,GAAA,GAAA;AAAA,IAClE,CAACA,OAAM;AAAA,GACT;AAEA,EAAA,OAAO,EAAE,CAAE,EAAA;AACb","file":"hooks.js","sourcesContent":["import { Alert, Button, Divider, Form, Input, Space, Spin, Typography } from 'antd'\nimport type { FC, ReactNode } from 'react'\nimport { Navigate } from 'react-router-dom'\nimport useSWR from 'swr'\nimport { create } from 'zustand'\nimport { useTranslation } from '../../components/locale'\nimport { Logo } from '../../components/logo'\nimport { useToolkitsStore } from '../../components/toolkitsProvider'\nimport { SSO_URL } from '../../constants'\nimport type { JsonData } from '../../types'\nimport backgroundUrl from './background.svg'\n\ninterface SignInProps {\n title?: ReactNode\n successRedirectUrl: string\n extra?: ReactNode\n}\n\nexport const useSignInStore = create<{\n unregistered: boolean // 是否是未注册用户\n setUnregistered: () => void\n}>()(set => ({\n unregistered: false,\n setUnregistered() {\n set({ unregistered: true })\n },\n}))\n\nconst SignIn: FC<SignInProps> = props => {\n const { title, successRedirectUrl, extra } = props\n const { unregistered } = useSignInStore()\n\n // 当路由模式为 hash 模式时，Idaas 重定向会把 ticket 放到 hash 前面，此时的登录页的地址为标准的 URL 结构 \"/?ticket=xxx#/sign_in\"。\n // 然而 react-router-dom 无法从这种地址中获取到查询字符串，需要使用原生的 window.location.search。\n const queryParams = new URLSearchParams(window.location.search)\n const { token, setToken, axios } = useToolkitsStore(state => state)\n const { t } = useTranslation()\n\n const { isLoading } = useSWR(\n queryParams.has('ticket') ? `/api/usystem/user/login?ticket=${queryParams.get('ticket')}` : null,\n url => axios.get<JsonData<{ token: string }>>(url).then(res => res.data.data),\n {\n onSuccess: data => {\n if (data) {\n setToken(data.token)\n }\n },\n },\n )\n\n if (isLoading) {\n return (\n <div className=\"w-screen h-screen flex justify-center items-center\">\n <Spin />\n </div>\n )\n }\n\n if (token) {\n const hashMode = !!window.location.hash\n const path = successRedirectUrl\n\n if (!hashMode) {\n return <Navigate replace to={path} />\n }\n\n // 移除 ticket\n window.location.href = `${window.location.origin}${window.location.pathname}#${path}`\n\n return null\n }\n\n return (\n <div className=\"w-screen h-screen relative flex overflow-hidden\">\n <div className=\"absolute top-16 right-16 z-10\">{extra}</div>\n <div className=\"absolute left-14 top-6\">\n <Space align=\"center\">\n <Logo width={48} />\n {title}\n </Space>\n </div>\n <div className=\"flex-1 flex justify-center items-center bg-slate-50\">\n <img src={backgroundUrl} alt=\"background\" className=\"w-10/12\" />\n </div>\n <div className=\"w-[650px] relative top-0 left-0 right-0 bottom-0\">\n <div className=\"absolute top-1/2 -translate-y-1/2 left-0 right-0\">\n <div className=\"-translate-y-10 px-36\">\n <div className=\"flex flex-col justify-center\">\n <div className=\"h-10\">\n {unregistered && <Alert banner closable message={t('SignIn.unregistered')} type=\"error\" />}\n </div>\n <Typography.Title level={2}>{t('SignIn.welcome')}</Typography.Title>\n <div className=\"mt-4\">\n <Form layout=\"vertical\" autoComplete=\"off\">\n <Form.Item label={t('global.username')} name=\"username\" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n <Form.Item label={t('global.password')} name=\"password\" rules={[{ required: true }]}>\n <Input.Password />\n </Form.Item>\n <Form.Item>\n <Button block type=\"primary\" shape=\"round\" htmlType=\"submit\">\n {t('global.signIn')}\n </Button>\n </Form.Item>\n </Form>\n </div>\n <Divider plain dashed>\n {t('SignIn.thirdParty')}\n </Divider>\n <div className=\"flex justify-center items-center\">\n <Button\n block\n shape=\"round\"\n href={`${SSO_URL}/logout?service=${SSO_URL}/login?service=${window.location.href}`}\n target=\"_self\"\n >\n <Logo width={18} />\n {t('SignIn.signInWithIDass')}\n </Button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nexport default SignIn\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { App } from 'antd'\nimport type { ComponentType, FC, PropsWithChildren } from 'react'\nimport { createContext, useContext, useRef } from 'react'\nimport { useStore } from 'zustand'\nimport type { ToolkitsState } from '../../stores'\nimport { createToolkitsStore } from '../../stores'\nimport type { ContextSlice } from '../../stores/context'\nimport { Interceptors } from '../interceptors'\n\ntype ToolkitsStore = ReturnType<typeof createToolkitsStore>\n\nconst ToolkitsContext = createContext<ToolkitsStore | null>(null)\n\nexport function useToolkitsStore<T>(selector: (state: ToolkitsState) => T): T {\n const store = useContext(ToolkitsContext)\n if (!store) throw new Error('Missing ToolkitsProvider in the tree')\n return useStore(store, selector)\n}\n\nexport type ToolkitsProviderProps = PropsWithChildren<Partial<ContextSlice>>\n\nconst ToolkitsProvider: FC<ToolkitsProviderProps> = props => {\n const { children, ...restProps } = props\n const storeRef = useRef<ToolkitsStore>()\n const parentState = useContext(ToolkitsContext)?.getState()\n\n if (!storeRef.current) {\n storeRef.current = createToolkitsStore({\n ...parentState,\n ...restProps,\n })\n }\n\n if (!storeRef.current.getState().signInPath) {\n throw new Error('ToolkitsProvider: 请配置 \"signInPath\"')\n }\n\n return (\n <ToolkitsContext.Provider value={storeRef.current}>\n <App>\n <Interceptors>{children}</Interceptors>\n </App>\n </ToolkitsContext.Provider>\n )\n}\n\nexport const withContext = (Component: ComponentType, providerProps: Omit<ToolkitsProviderProps, 'children'>) => {\n return (props: any) => {\n return (\n <ToolkitsProvider {...providerProps}>\n <Component {...props} />\n </ToolkitsProvider>\n )\n }\n}\n\nif (process.env.NODE_ENV !== 'production') {\n ToolkitsProvider.displayName = 'ToolkitsProvider'\n}\n\nexport default ToolkitsProvider\n","import { get, has, template } from 'lodash-es'\nimport { useMemo } from 'react'\nimport { useToolkitsStore } from '../toolkitsProvider'\nimport type { Locale } from './index'\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never\n\ntype Paths<T, D extends number = 10> = [D] extends [never]\n ? never\n : T extends object\n ? {\n [K in keyof T]-?: K extends string | number ? `${K}` | Join<K, Paths<T[K]>> : never\n }[keyof T]\n : ''\n\nexport function useTranslation() {\n const locale = useToolkitsStore(state => state.locale)\n\n const t = useMemo(\n () => (key: Paths<Locale>, data?: Record<string, unknown>) =>\n has(locale, key) ? template(get(locale, key as string))(data) : key,\n [locale],\n )\n\n return { t }\n}\n"]}
|
package/locale/index.js
CHANGED
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import { has, template, get } from 'lodash-es';
|
|
2
2
|
import { createContext, useMemo, useContext } from 'react';
|
|
3
3
|
import 'antd';
|
|
4
|
-
import { useStore } from 'zustand';
|
|
4
|
+
import { create, useStore } from 'zustand';
|
|
5
5
|
import 'zustand/middleware';
|
|
6
6
|
import 'axios';
|
|
7
7
|
import 'jwt-decode';
|
|
8
|
+
import 'react-router-dom';
|
|
9
|
+
import 'swr';
|
|
8
10
|
import 'react/jsx-runtime';
|
|
9
11
|
|
|
10
12
|
// src/components/locale/hooks.ts
|
|
13
|
+
create()((set) => ({
|
|
14
|
+
unregistered: false,
|
|
15
|
+
setUnregistered() {
|
|
16
|
+
set({ unregistered: true });
|
|
17
|
+
}
|
|
18
|
+
}));
|
|
11
19
|
var ToolkitsContext = createContext(null);
|
|
12
20
|
function useToolkitsStore(selector) {
|
|
13
21
|
const store = useContext(ToolkitsContext);
|
package/locale/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/toolkitsProvider/ToolkitsProvider.tsx","../src/components/locale/hooks.ts"],"names":["locale"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/pages/signIn/index.tsx","../src/components/toolkitsProvider/ToolkitsProvider.tsx","../src/components/locale/hooks.ts"],"names":["locale"],"mappings":";;;;;;;;;;;;AAkB8B,MAG3B,EAAA,CAAE,CAAQ,GAAA,MAAA;AAAA,EACX,YAAc,EAAA,KAAA;AAAA,EACd,eAAkB,GAAA;AAChB,IAAI,GAAA,CAAA,EAAE,YAAc,EAAA,IAAA,EAAM,CAAA;AAAA;AAE9B,CAAE,CAAA;ACdF,IAAM,eAAA,GAAkB,cAAoC,IAAI,CAAA;AAEzD,SAAS,iBAAoB,QAA0C,EAAA;AAC5E,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA;AACxC,EAAA,IAAI,CAAC,KAAA,EAAa,MAAA,IAAI,MAAM,sCAAsC,CAAA;AAClE,EAAO,OAAA,QAAA,CAAS,OAAO,QAAQ,CAAA;AACjC;AAuCA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;;;ACtCpC,SAAS,cAAiB,GAAA;AAC/B,EAAA,MAAMA,OAAS,GAAA,gBAAA,CAAiB,CAAS,KAAA,KAAA,KAAA,CAAM,MAAM,CAAA;AAErD,EAAA,MAAM,CAAI,GAAA,OAAA;AAAA,IACR,MAAM,CAAC,GAAoB,EAAA,IAAA,KACzB,IAAIA,OAAQ,EAAA,GAAG,CAAI,GAAA,QAAA,CAAS,IAAIA,OAAQ,EAAA,GAAa,CAAC,CAAA,CAAE,IAAI,CAAI,GAAA,GAAA;AAAA,IAClE,CAACA,OAAM;AAAA,GACT;AAEA,EAAA,OAAO,EAAE,CAAE,EAAA;AACb","file":"index.js","sourcesContent":["import { Alert, Button, Divider, Form, Input, Space, Spin, Typography } from 'antd'\nimport type { FC, ReactNode } from 'react'\nimport { Navigate } from 'react-router-dom'\nimport useSWR from 'swr'\nimport { create } from 'zustand'\nimport { useTranslation } from '../../components/locale'\nimport { Logo } from '../../components/logo'\nimport { useToolkitsStore } from '../../components/toolkitsProvider'\nimport { SSO_URL } from '../../constants'\nimport type { JsonData } from '../../types'\nimport backgroundUrl from './background.svg'\n\ninterface SignInProps {\n title?: ReactNode\n successRedirectUrl: string\n extra?: ReactNode\n}\n\nexport const useSignInStore = create<{\n unregistered: boolean // 是否是未注册用户\n setUnregistered: () => void\n}>()(set => ({\n unregistered: false,\n setUnregistered() {\n set({ unregistered: true })\n },\n}))\n\nconst SignIn: FC<SignInProps> = props => {\n const { title, successRedirectUrl, extra } = props\n const { unregistered } = useSignInStore()\n\n // 当路由模式为 hash 模式时，Idaas 重定向会把 ticket 放到 hash 前面，此时的登录页的地址为标准的 URL 结构 \"/?ticket=xxx#/sign_in\"。\n // 然而 react-router-dom 无法从这种地址中获取到查询字符串，需要使用原生的 window.location.search。\n const queryParams = new URLSearchParams(window.location.search)\n const { token, setToken, axios } = useToolkitsStore(state => state)\n const { t } = useTranslation()\n\n const { isLoading } = useSWR(\n queryParams.has('ticket') ? `/api/usystem/user/login?ticket=${queryParams.get('ticket')}` : null,\n url => axios.get<JsonData<{ token: string }>>(url).then(res => res.data.data),\n {\n onSuccess: data => {\n if (data) {\n setToken(data.token)\n }\n },\n },\n )\n\n if (isLoading) {\n return (\n <div className=\"w-screen h-screen flex justify-center items-center\">\n <Spin />\n </div>\n )\n }\n\n if (token) {\n const hashMode = !!window.location.hash\n const path = successRedirectUrl\n\n if (!hashMode) {\n return <Navigate replace to={path} />\n }\n\n // 移除 ticket\n window.location.href = `${window.location.origin}${window.location.pathname}#${path}`\n\n return null\n }\n\n return (\n <div className=\"w-screen h-screen relative flex overflow-hidden\">\n <div className=\"absolute top-16 right-16 z-10\">{extra}</div>\n <div className=\"absolute left-14 top-6\">\n <Space align=\"center\">\n <Logo width={48} />\n {title}\n </Space>\n </div>\n <div className=\"flex-1 flex justify-center items-center bg-slate-50\">\n <img src={backgroundUrl} alt=\"background\" className=\"w-10/12\" />\n </div>\n <div className=\"w-[650px] relative top-0 left-0 right-0 bottom-0\">\n <div className=\"absolute top-1/2 -translate-y-1/2 left-0 right-0\">\n <div className=\"-translate-y-10 px-36\">\n <div className=\"flex flex-col justify-center\">\n <div className=\"h-10\">\n {unregistered && <Alert banner closable message={t('SignIn.unregistered')} type=\"error\" />}\n </div>\n <Typography.Title level={2}>{t('SignIn.welcome')}</Typography.Title>\n <div className=\"mt-4\">\n <Form layout=\"vertical\" autoComplete=\"off\">\n <Form.Item label={t('global.username')} name=\"username\" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n <Form.Item label={t('global.password')} name=\"password\" rules={[{ required: true }]}>\n <Input.Password />\n </Form.Item>\n <Form.Item>\n <Button block type=\"primary\" shape=\"round\" htmlType=\"submit\">\n {t('global.signIn')}\n </Button>\n </Form.Item>\n </Form>\n </div>\n <Divider plain dashed>\n {t('SignIn.thirdParty')}\n </Divider>\n <div className=\"flex justify-center items-center\">\n <Button\n block\n shape=\"round\"\n href={`${SSO_URL}/logout?service=${SSO_URL}/login?service=${window.location.href}`}\n target=\"_self\"\n >\n <Logo width={18} />\n {t('SignIn.signInWithIDass')}\n </Button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nexport default SignIn\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { App } from 'antd'\nimport type { ComponentType, FC, PropsWithChildren } from 'react'\nimport { createContext, useContext, useRef } from 'react'\nimport { useStore } from 'zustand'\nimport type { ToolkitsState } from '../../stores'\nimport { createToolkitsStore } from '../../stores'\nimport type { ContextSlice } from '../../stores/context'\nimport { Interceptors } from '../interceptors'\n\ntype ToolkitsStore = ReturnType<typeof createToolkitsStore>\n\nconst ToolkitsContext = createContext<ToolkitsStore | null>(null)\n\nexport function useToolkitsStore<T>(selector: (state: ToolkitsState) => T): T {\n const store = useContext(ToolkitsContext)\n if (!store) throw new Error('Missing ToolkitsProvider in the tree')\n return useStore(store, selector)\n}\n\nexport type ToolkitsProviderProps = PropsWithChildren<Partial<ContextSlice>>\n\nconst ToolkitsProvider: FC<ToolkitsProviderProps> = props => {\n const { children, ...restProps } = props\n const storeRef = useRef<ToolkitsStore>()\n const parentState = useContext(ToolkitsContext)?.getState()\n\n if (!storeRef.current) {\n storeRef.current = createToolkitsStore({\n ...parentState,\n ...restProps,\n })\n }\n\n if (!storeRef.current.getState().signInPath) {\n throw new Error('ToolkitsProvider: 请配置 \"signInPath\"')\n }\n\n return (\n <ToolkitsContext.Provider value={storeRef.current}>\n <App>\n <Interceptors>{children}</Interceptors>\n </App>\n </ToolkitsContext.Provider>\n )\n}\n\nexport const withContext = (Component: ComponentType, providerProps: Omit<ToolkitsProviderProps, 'children'>) => {\n return (props: any) => {\n return (\n <ToolkitsProvider {...providerProps}>\n <Component {...props} />\n </ToolkitsProvider>\n )\n }\n}\n\nif (process.env.NODE_ENV !== 'production') {\n ToolkitsProvider.displayName = 'ToolkitsProvider'\n}\n\nexport default ToolkitsProvider\n","import { get, has, template } from 'lodash-es'\nimport { useMemo } from 'react'\nimport { useToolkitsStore } from '../toolkitsProvider'\nimport type { Locale } from './index'\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never\n\ntype Paths<T, D extends number = 10> = [D] extends [never]\n ? never\n : T extends object\n ? {\n [K in keyof T]-?: K extends string | number ? `${K}` | Join<K, Paths<T[K]>> : never\n }[keyof T]\n : ''\n\nexport function useTranslation() {\n const locale = useToolkitsStore(state => state.locale)\n\n const t = useMemo(\n () => (key: Paths<Locale>, data?: Record<string, unknown>) =>\n has(locale, key) ? template(get(locale, key as string))(data) : key,\n [locale],\n )\n\n return { t }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-toolkits",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.13.
|
|
4
|
+
"version": "2.13.21",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"*.css"
|
|
7
7
|
],
|
|
@@ -67,8 +67,8 @@
|
|
|
67
67
|
"tsup": "^8.3.5",
|
|
68
68
|
"typescript": "^5.6.3",
|
|
69
69
|
"@flow97/eslint-config-react": "1.0.5",
|
|
70
|
-
"
|
|
71
|
-
"
|
|
70
|
+
"tsconfig": "0.0.6",
|
|
71
|
+
"tailwind-config": "0.1.2"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
74
|
"antd": "^5.12.2",
|