diff --git a/package.json b/package.json index 24b14e1..0b8bff8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne-components/components-core", - "version": "0.4.42", + "version": "0.4.43", "files": [ "build" ], @@ -23,7 +23,7 @@ "@kne/ensure-slash": "^0.1.0", "@kne/flex-box": "^0.1.1", "@kne/form-info": "^0.1.1", - "@kne/global-context": "^1.2.0", + "@kne/global-context": "^1.3.2", "@kne/info-page": "^0.2.0", "@kne/is-empty": "^1.0.1", "@kne/phone-number-input": "^0.1.3", diff --git a/src/components/FormInfo/computedModalCommonProps.js b/src/components/FormInfo/computedModalCommonProps.js index 3e33a9b..24af00c 100644 --- a/src/components/FormInfo/computedModalCommonProps.js +++ b/src/components/FormInfo/computedModalCommonProps.js @@ -1,5 +1,5 @@ import {CancelButton, SubmitButton} from "@kne/react-form-antd"; -import {useIntl, FormattedMessage} from '@kne/react-intl'; +import {FormattedMessage} from '@kne/react-intl'; import {Form} from "./formModule"; import classnames from "classnames"; import style from "./style.module.scss"; diff --git a/src/components/Global/index.js b/src/components/Global/index.js index 07014b6..7be264d 100644 --- a/src/components/Global/index.js +++ b/src/components/Global/index.js @@ -2,8 +2,9 @@ import "./polyfill"; import "simplebar/dist/simplebar.min.css"; import "./override.scss"; import classnames from "classnames"; -import {Provider, useGlobalContext as useContext} from "@kne/global-context"; -import {Provider as PresetProvider, usePreset} from "./presetContext"; +import { + Global as GlobalContext, useGlobalContext as useContext, usePreset, GlobalValue, useGlobalValue, GlobalSetting +} from "@kne/global-context"; import {App, ConfigProvider as AntdConfigProvider, Result} from "antd"; import {useEffect, useState, useRef, useMemo} from "react"; import SimpleBar from "simplebar"; @@ -31,12 +32,31 @@ if (!isMobile() && !window.__COMPONENTS_CORE_SIMPLE_BAR_DISABLED) { document.body.classList.add("simplebar-content-wrapper"); } -const ConfigProvider = withFetch(({data: message, themeToken = {colorPrimary: "#4096ff"}, children}) => { +export const containerClassName = style["container"] + .replace(/\+/g, "\\+") + .replace(/\//g, "\\/"); + +const ConfigProvider = withFetch(({data: message, children}) => { const [isInit, setIsInit] = useState(false); - const {colorPrimary, components, ...otherToken} = Object.assign({}, themeToken); + const themeToken = useGlobalValue('themeToken'); + const {colorPrimary, components, ...otherToken} = Object.assign({}, {colorPrimary: "#4096ff"}, themeToken); const colorPrimaryObject = useMemo(() => { return Color(colorPrimary) }, [colorPrimary]); + + const [statusColors, setStatusColors] = useState({}); + + useEffect(() => { + const containerEl = document.querySelector(`.${containerClassName}`); + const styles = getComputedStyle(containerEl); + setStatusColors({ + colorSuccess: styles.getPropertyValue("--state-success-color"), + colorError: styles.getPropertyValue("--state-error-color"), + colorWarning: styles.getPropertyValue("--state-warning-color"), + colorInfo: styles.getPropertyValue("--state-info-color"), + }); + }, []); + useEffect(() => { let styleEl = document.head.querySelector("#component-core-theme"); if (!styleEl) { @@ -56,9 +76,7 @@ const ConfigProvider = withFetch(({data: message, themeToken = {colorPrimary: "# .alpha((i + 1) / 10) .string(); }); - styleEl.textContent = `.${style["container"] - .replace(/\+/g, "\\+") - .replace(/\//g, "\\/")}{${transform(themeProps, (result, value, key) => { + styleEl.textContent = `.${containerClassName}{${transform(themeProps, (result, value, key) => { result.push(`${key}:${value};`); }, []).join("")}}`; setIsInit(true); @@ -79,10 +97,7 @@ const ConfigProvider = withFetch(({data: message, themeToken = {colorPrimary: "# warning={{strict: false}} theme={{ components, token: Object.assign({}, { - colorError: "#f53f3f", - colorInfo: "#165dff", - colorSuccess: "#00b42a", - colorWarning: "#ff7d00", + ...statusColors, colorPrimary: colorPrimary, colorPrimaryBg: colorPrimaryObject.alpha(0.1).string(), colorLink: colorPrimary, @@ -110,41 +125,33 @@ export const GlobalProvider = ({ preset = {locale: "zh-CN", apis: {}}, children, themeToken, init, ...props }) => { const locale = get(preset, "locale", "zh-CN"); - const localMessageRef = useRef({}); - const enumsRef = useRef(new Map()); - const [global, setGlobal] = useState(Object.assign({ - themeToken, localMessageRef, enumsRef, locale, - }, get(preset, "global"))); - return ( - - + {({value: locale}) => { + return {typeof init === "function" ? ( init({ - preset, global, setGlobal, - })} + loader={() => init()} render={() => children} />) : (children)} - - - ); + ; + }} + ); }; export const PureGlobal = ({children, ...props}) => { - const {global: themeToken} = useGlobalContext("themeToken"); + const themeToken = useGlobalValue("themeToken"); return (
{ ); }; -export {usePreset}; +export {usePreset, useGlobalValue, GlobalSetting, GlobalValue}; export const useGlobalContext = (globalKey) => { const contextValue = useContext(); @@ -206,25 +213,6 @@ export const GetGlobal = ({globalKey, children}) => { return children({value: global}); }; -export const GlobalInfo = ({globalKey, value, needReady, children}) => { - const {global, setGlobal} = useGlobalContext(globalKey); - const setGlobalHandler = useRefCallback(setGlobal); - const prevValueRef = useRef(null); - prevValueRef.current = global; - useEffect(() => { - if (isEqual(prevValueRef.current, value)) { - return; - } - prevValueRef.current = value; - setGlobalHandler(value); - }, [value, setGlobalHandler]); - - if (needReady && !global) { - return null; - } - return children({global, setGlobal}); -}; - const Global = ({children, className, ...props}) => { return ( {