@web-fuse/wf-components 1.0.5 → 1.0.7

Sign up to get free protection for your applications and to get access to all the features.
@@ -1 +1,2 @@
1
1
  export * from "./wfDarkAlgorithm";
2
+ export * from "./useMessageApi";
@@ -0,0 +1,5 @@
1
+ /**
2
+ * returns a random string with the desired length
3
+ */
4
+ declare const getRandomString: (length: number) => string;
5
+ export default getRandomString;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import type { MessageInstance } from "antd/es/message/interface";
3
+ export declare const MessageProvider: ({ children }: React.PropsWithChildren) => import("react").FunctionComponentElement<import("react").ProviderProps<MessageInstance | null>>;
4
+ export declare const useMessageApi: () => MessageInstance | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@web-fuse/wf-components",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "A library containing common form and display components",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",
package/readme.md CHANGED
@@ -17,6 +17,12 @@ To make changes in the repository you should first run storybook as explained in
17
17
 
18
18
  Each component must always be exported using `export default` and each component must always be assigned to a `const` variable before it is exported. If this is not done vite may have problems rebuilding the component and React will not know the name of the component.
19
19
 
20
+ ## Ant design global message API
21
+
22
+ You can create a global context for the ant design message API by using the `MessageProvider` component. The messages can be styled by placing the `ConfigurationProvider` higher in the component tree and [customizing the theme](https://ant.design/components/message#design-token). Use the `useMessageApi` hook to access the message API and show message to the user.
23
+
24
+ It is currently not possible to create nested MessageProviders.
25
+
20
26
  ## Custom theme algorithm for antd
21
27
 
22
28
  If you are using the `theme.darkAlgorithm` in your antd `ConfigProvider` you may notice that your primary color is not preserved. Therefor this package includes the `wfDarkAlgorithm` export. The only change, compared the the darkAlgorithm exported by antd, is that it takes retains your primary color.
@@ -1,16 +0,0 @@
1
- /// <reference types="react" />
2
- import { InputProps as AntProps, InputRef } from "antd";
3
- export declare const HtmlInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<AntProps & import("react").RefAttributes<InputRef>, "ref"> & {
4
- ref?: ((instance: InputRef | null) => void) | import("react").RefObject<InputRef> | null | undefined;
5
- }, never>> & Omit<import("react").ForwardRefExoticComponent<AntProps & import("react").RefAttributes<InputRef>> & {
6
- Group: import("react").FC<import("antd/es/input").GroupProps>;
7
- Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<InputRef>>;
8
- TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
9
- Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<InputRef>>;
10
- OTP: import("react").ForwardRefExoticComponent<import("antd/es/input/OTP").OTPProps & import("react").RefAttributes<import("antd/es/input/OTP").OTPRef>>;
11
- }, keyof import("react").Component<any, {}, any>>;
12
- interface InputProps extends AntProps {
13
- label?: React.ReactNode;
14
- }
15
- declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<InputRef>>;
16
- export default Input;