@plurid/plurid-ui-components-react 0.0.0-15 → 0.0.0-18
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/distribution/components/pluridal/head/Head/index.d.ts +38 -0
- package/distribution/components/pluridal/head/index.d.ts +5 -0
- package/distribution/components/pluridal/index.d.ts +3 -0
- package/distribution/components/pluridal/notifications/Notification/index.d.ts +1 -1
- package/distribution/components/pluridal/notifications/Notifications/index.d.ts +1 -1
- package/distribution/components/universal/inputs/InputSwitch/index.d.ts +2 -0
- package/distribution/index.es.js +145 -4
- package/distribution/index.es.js.map +1 -1
- package/distribution/index.js +145 -4
- package/distribution/index.js.map +1 -1
- package/package.json +21 -21
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StateOfAny, head } from '@plurid/plurid-ui-state-react';
|
|
3
|
+
export declare type HeadState = StateOfAny & {
|
|
4
|
+
head: head.HeadState;
|
|
5
|
+
};
|
|
6
|
+
export declare type HeadSelectors = StateOfAny & {
|
|
7
|
+
head: typeof head.selectors;
|
|
8
|
+
};
|
|
9
|
+
export interface HeadDefaults {
|
|
10
|
+
robots?: string;
|
|
11
|
+
viewport?: string;
|
|
12
|
+
faviconIcon?: string;
|
|
13
|
+
favicon16?: string;
|
|
14
|
+
favicon32?: string;
|
|
15
|
+
manifest?: string;
|
|
16
|
+
themeColor?: string;
|
|
17
|
+
apiDomain?: string;
|
|
18
|
+
canonicalURL?: string;
|
|
19
|
+
ogImageWidth?: string;
|
|
20
|
+
ogImageHeight?: string;
|
|
21
|
+
ogSiteName?: string;
|
|
22
|
+
appleTouchIcon?: string;
|
|
23
|
+
}
|
|
24
|
+
export interface HeadOwnProperties {
|
|
25
|
+
Helmet: any;
|
|
26
|
+
defaults?: Partial<head.HeadState> & HeadDefaults;
|
|
27
|
+
selectors: HeadSelectors;
|
|
28
|
+
context: React.Context<any>;
|
|
29
|
+
children?: React.ReactNode;
|
|
30
|
+
}
|
|
31
|
+
export interface HeadStateProperties {
|
|
32
|
+
stateHead: head.HeadState;
|
|
33
|
+
}
|
|
34
|
+
export interface HeadDispatchProperties {
|
|
35
|
+
}
|
|
36
|
+
export declare type HeadProperties = HeadOwnProperties & HeadStateProperties & HeadDispatchProperties;
|
|
37
|
+
declare const ConnectedHead: import("react-redux").ConnectedComponent<React.FC<HeadProperties>, Omit<HeadProperties, "stateHead"> & HeadOwnProperties & import("react-redux").ConnectProps>;
|
|
38
|
+
export default ConnectedHead;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const head: {
|
|
3
|
+
Head: import("react-redux").ConnectedComponent<import("react").FC<import("./Head").HeadProperties>, Omit<import("./Head").HeadProperties, "stateHead"> & import("./Head").HeadOwnProperties & import("react-redux").ConnectProps>;
|
|
4
|
+
};
|
|
5
|
+
export default head;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
declare const pluridal: {
|
|
3
|
+
head: {
|
|
4
|
+
Head: import("react-redux").ConnectedComponent<import("react").FC<import("./head/Head").HeadProperties>, Omit<import("./head/Head").HeadProperties, "stateHead"> & import("./head/Head").HeadOwnProperties & import("react-redux").ConnectProps>;
|
|
5
|
+
};
|
|
3
6
|
notifications: {
|
|
4
7
|
Notification: import("react").FC<import("./notifications/Notification").NotificationOwnProperties>;
|
|
5
8
|
Notifications: import("react-redux").ConnectedComponent<import("react").FC<import("./notifications/Notifications").NotificationsProperties>, Omit<import("./notifications/Notifications").NotificationsProperties, "stateGeneralTheme" | "stateNotifications" | "dispatchRemoveNotification"> & import("./notifications/Notifications").NotificationsOwnProperties & import("react-redux").ConnectProps>;
|
|
@@ -4,7 +4,7 @@ import { DispatchAction, Notification, notifications } from '@plurid/plurid-ui-s
|
|
|
4
4
|
export interface NotificationOwnProperties {
|
|
5
5
|
data: Notification;
|
|
6
6
|
theme: Theme;
|
|
7
|
-
remove: DispatchAction<typeof notifications.actions.
|
|
7
|
+
remove: DispatchAction<typeof notifications.actions.remove>;
|
|
8
8
|
elements?: Record<string, JSX.Element>;
|
|
9
9
|
style?: React.CSSProperties;
|
|
10
10
|
className?: string;
|
|
@@ -19,7 +19,7 @@ export interface NotificationsStateProperties {
|
|
|
19
19
|
stateNotifications: INotification[];
|
|
20
20
|
}
|
|
21
21
|
export interface NotificationsDispatchProperties {
|
|
22
|
-
dispatchRemoveNotification: DispatchAction<typeof notificationsStateService.actions.
|
|
22
|
+
dispatchRemoveNotification: DispatchAction<typeof notificationsStateService.actions.remove>;
|
|
23
23
|
}
|
|
24
24
|
export declare type NotificationsProperties = NotificationsOwnProperties & NotificationsStateProperties & NotificationsDispatchProperties;
|
|
25
25
|
declare const ConnectedNotifications: import("react-redux").ConnectedComponent<React.FC<NotificationsProperties>, Omit<NotificationsProperties, "stateGeneralTheme" | "stateNotifications" | "dispatchRemoveNotification"> & NotificationsOwnProperties & import("react-redux").ConnectProps>;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Theme } from '@plurid/plurid-themes';
|
|
3
|
+
import { SwitchProperties } from '../Switch';
|
|
3
4
|
export interface InputSwitchProperties {
|
|
4
5
|
name: string;
|
|
5
6
|
checked: boolean;
|
|
6
7
|
atChange: () => void;
|
|
7
8
|
theme?: Theme;
|
|
8
9
|
compact?: boolean;
|
|
10
|
+
switch?: SwitchProperties;
|
|
9
11
|
style?: React.CSSProperties;
|
|
10
12
|
className?: string;
|
|
11
13
|
}
|
package/distribution/index.es.js
CHANGED
|
@@ -1781,7 +1781,7 @@ const StyledInputSwitch = styled.div`
|
|
|
1781
1781
|
`;
|
|
1782
1782
|
|
|
1783
1783
|
const InputSwitch = properties => {
|
|
1784
|
-
const {name: name, checked: checked, atChange: atChange, theme: themeProperty, compact: compact, style: style, className: className} = properties;
|
|
1784
|
+
const {name: name, checked: checked, atChange: atChange, theme: themeProperty, compact: compact, switch: switchProperties, style: style, className: className} = properties;
|
|
1785
1785
|
const theme = themeProperty || plurid;
|
|
1786
1786
|
return React.createElement(StyledInputSwitch, {
|
|
1787
1787
|
compact: compact,
|
|
@@ -1791,13 +1791,13 @@ const InputSwitch = properties => {
|
|
|
1791
1791
|
style: {
|
|
1792
1792
|
marginLeft: "0.9rem"
|
|
1793
1793
|
}
|
|
1794
|
-
}, name), React.createElement(Switch, {
|
|
1794
|
+
}, name), React.createElement(Switch, Object.assign({
|
|
1795
1795
|
checked: checked,
|
|
1796
1796
|
level: 2,
|
|
1797
1797
|
exclusive: true,
|
|
1798
1798
|
theme: theme,
|
|
1799
1799
|
atChange: () => atChange()
|
|
1800
|
-
})));
|
|
1800
|
+
}, switchProperties))));
|
|
1801
1801
|
};
|
|
1802
1802
|
|
|
1803
1803
|
const StyledItemsline = styled.div`
|
|
@@ -2567,6 +2567,146 @@ const universal = {
|
|
|
2567
2567
|
varia: varia
|
|
2568
2568
|
};
|
|
2569
2569
|
|
|
2570
|
+
const Head = properties => {
|
|
2571
|
+
var _a, _b, _c, _d;
|
|
2572
|
+
const {Helmet: Helmet, defaults: defaults, children: children, stateHead: stateHead} = properties;
|
|
2573
|
+
const robots = (defaults === null || defaults === void 0 ? void 0 : defaults.robots) || "index,follow";
|
|
2574
|
+
const viewport = (defaults === null || defaults === void 0 ? void 0 : defaults.viewport) || "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no";
|
|
2575
|
+
const faviconIcon = (_a = defaults === null || defaults === void 0 ? void 0 : defaults.faviconIcon) !== null && _a !== void 0 ? _a : "/favicon.ico";
|
|
2576
|
+
const favicon16 = (_b = defaults === null || defaults === void 0 ? void 0 : defaults.favicon16) !== null && _b !== void 0 ? _b : "/favicon-32x32.png";
|
|
2577
|
+
const favicon32 = (_c = defaults === null || defaults === void 0 ? void 0 : defaults.favicon32) !== null && _c !== void 0 ? _c : "/favicon-16x16.png";
|
|
2578
|
+
const manifest = (_d = defaults === null || defaults === void 0 ? void 0 : defaults.manifest) !== null && _d !== void 0 ? _d : "/site.webmanifest";
|
|
2579
|
+
const themeColor = (defaults === null || defaults === void 0 ? void 0 : defaults.themeColor) || "";
|
|
2580
|
+
const titleValue = stateHead.title || (defaults === null || defaults === void 0 ? void 0 : defaults.title) || "";
|
|
2581
|
+
const descriptionValue = stateHead.description || (defaults === null || defaults === void 0 ? void 0 : defaults.description) || "";
|
|
2582
|
+
const canonicalURL = stateHead.canonicalURL || (defaults === null || defaults === void 0 ? void 0 : defaults.canonicalURL) || "";
|
|
2583
|
+
const ogTitleValue = stateHead.ogTitle || titleValue;
|
|
2584
|
+
const ogDescriptionValue = stateHead.ogDescription || titleValue;
|
|
2585
|
+
const ogImageValue = stateHead.ogImage || (defaults === null || defaults === void 0 ? void 0 : defaults.ogImage) || "";
|
|
2586
|
+
const ogURLValue = stateHead.ogURL || (defaults === null || defaults === void 0 ? void 0 : defaults.ogURL) || "";
|
|
2587
|
+
const apiDomain = (defaults === null || defaults === void 0 ? void 0 : defaults.apiDomain) || "";
|
|
2588
|
+
const ogImageWidth = (defaults === null || defaults === void 0 ? void 0 : defaults.ogImageWidth) || "1200";
|
|
2589
|
+
const ogImageHeight = (defaults === null || defaults === void 0 ? void 0 : defaults.ogImageHeight) || "630";
|
|
2590
|
+
const ogSiteName = (defaults === null || defaults === void 0 ? void 0 : defaults.ogSiteName) || "";
|
|
2591
|
+
const appleTouchIcon = (defaults === null || defaults === void 0 ? void 0 : defaults.appleTouchIcon) || "";
|
|
2592
|
+
const {styles: styles, scripts: scripts} = stateHead;
|
|
2593
|
+
return React.createElement(Helmet, null, React.createElement("meta", {
|
|
2594
|
+
charSet: "utf-8"
|
|
2595
|
+
}), React.createElement("meta", {
|
|
2596
|
+
name: "robots",
|
|
2597
|
+
content: robots
|
|
2598
|
+
}), React.createElement("meta", {
|
|
2599
|
+
name: "viewport",
|
|
2600
|
+
content: viewport
|
|
2601
|
+
}), React.createElement("title", null, titleValue), React.createElement("meta", {
|
|
2602
|
+
name: "title",
|
|
2603
|
+
content: titleValue
|
|
2604
|
+
}), React.createElement("meta", {
|
|
2605
|
+
name: "description",
|
|
2606
|
+
content: descriptionValue
|
|
2607
|
+
}), apiDomain && React.createElement(React.Fragment, null, React.createElement("link", {
|
|
2608
|
+
rel: "preconnect",
|
|
2609
|
+
href: apiDomain
|
|
2610
|
+
}), React.createElement("link", {
|
|
2611
|
+
rel: "dns-prefetch",
|
|
2612
|
+
href: apiDomain
|
|
2613
|
+
})), faviconIcon && React.createElement("link", {
|
|
2614
|
+
rel: "icon",
|
|
2615
|
+
sizes: "64x64",
|
|
2616
|
+
href: faviconIcon
|
|
2617
|
+
}), favicon32 && React.createElement("link", {
|
|
2618
|
+
rel: "icon",
|
|
2619
|
+
type: "image/png",
|
|
2620
|
+
sizes: "32x32",
|
|
2621
|
+
href: favicon32
|
|
2622
|
+
}), favicon16 && React.createElement("link", {
|
|
2623
|
+
rel: "icon",
|
|
2624
|
+
type: "image/png",
|
|
2625
|
+
sizes: "16x16",
|
|
2626
|
+
href: favicon16
|
|
2627
|
+
}), manifest && React.createElement("link", {
|
|
2628
|
+
rel: "manifest",
|
|
2629
|
+
href: manifest
|
|
2630
|
+
}), themeColor && React.createElement("meta", {
|
|
2631
|
+
name: "theme-color",
|
|
2632
|
+
content: themeColor
|
|
2633
|
+
}), canonicalURL && React.createElement("link", {
|
|
2634
|
+
rel: "canonical",
|
|
2635
|
+
href: canonicalURL
|
|
2636
|
+
}), React.createElement("meta", {
|
|
2637
|
+
property: "og:type",
|
|
2638
|
+
content: "website"
|
|
2639
|
+
}), React.createElement("meta", {
|
|
2640
|
+
property: "og:title",
|
|
2641
|
+
content: ogTitleValue
|
|
2642
|
+
}), React.createElement("meta", {
|
|
2643
|
+
property: "og:image",
|
|
2644
|
+
content: ogImageValue
|
|
2645
|
+
}), React.createElement("meta", {
|
|
2646
|
+
property: "og:image:width",
|
|
2647
|
+
content: ogImageWidth
|
|
2648
|
+
}), React.createElement("meta", {
|
|
2649
|
+
property: "og:image:height",
|
|
2650
|
+
content: ogImageHeight
|
|
2651
|
+
}), ogSiteName && React.createElement("meta", {
|
|
2652
|
+
property: "og:site_name",
|
|
2653
|
+
content: ogSiteName
|
|
2654
|
+
}), React.createElement("meta", {
|
|
2655
|
+
property: "og:url",
|
|
2656
|
+
content: ogURLValue
|
|
2657
|
+
}), React.createElement("meta", {
|
|
2658
|
+
property: "og:description",
|
|
2659
|
+
content: ogDescriptionValue
|
|
2660
|
+
}), React.createElement("meta", {
|
|
2661
|
+
property: "twitter:card",
|
|
2662
|
+
content: "summary_large_image"
|
|
2663
|
+
}), React.createElement("meta", {
|
|
2664
|
+
property: "twitter:url",
|
|
2665
|
+
content: ogURLValue
|
|
2666
|
+
}), React.createElement("meta", {
|
|
2667
|
+
property: "twitter:title",
|
|
2668
|
+
content: ogTitleValue
|
|
2669
|
+
}), React.createElement("meta", {
|
|
2670
|
+
property: "twitter:description",
|
|
2671
|
+
content: ogDescriptionValue
|
|
2672
|
+
}), React.createElement("meta", {
|
|
2673
|
+
property: "twitter:image",
|
|
2674
|
+
content: ogImageValue
|
|
2675
|
+
}), React.createElement("meta", {
|
|
2676
|
+
name: "apple-mobile-web-app-capable",
|
|
2677
|
+
content: "yes"
|
|
2678
|
+
}), React.createElement("meta", {
|
|
2679
|
+
name: "apple-mobile-web-app-status-bar-style",
|
|
2680
|
+
content: "default"
|
|
2681
|
+
}), React.createElement("meta", {
|
|
2682
|
+
name: "apple-mobile-web-app-title",
|
|
2683
|
+
content: titleValue
|
|
2684
|
+
}), appleTouchIcon && React.createElement("link", {
|
|
2685
|
+
rel: "apple-touch-icon",
|
|
2686
|
+
sizes: "180x180",
|
|
2687
|
+
href: appleTouchIcon
|
|
2688
|
+
}), children, styles === null || styles === void 0 ? void 0 : styles.map((style => React.createElement("link", {
|
|
2689
|
+
rel: "stylesheet",
|
|
2690
|
+
key: "head-style" + style,
|
|
2691
|
+
href: style
|
|
2692
|
+
}))), scripts === null || scripts === void 0 ? void 0 : scripts.map((script => React.createElement("script", {
|
|
2693
|
+
key: "head-script" + script,
|
|
2694
|
+
src: script
|
|
2695
|
+
}))));
|
|
2696
|
+
};
|
|
2697
|
+
|
|
2698
|
+
const mapStateToProperties$7 = (state, ownProperties) => ({
|
|
2699
|
+
stateHead: ownProperties.selectors.head.getHead(state)
|
|
2700
|
+
});
|
|
2701
|
+
|
|
2702
|
+
const mapDispatchToProperties$7 = dispatch => ({});
|
|
2703
|
+
|
|
2704
|
+
const ConnectedHead = connect(mapStateToProperties$7, mapDispatchToProperties$7)(Head);
|
|
2705
|
+
|
|
2706
|
+
const head = {
|
|
2707
|
+
Head: ConnectedHead
|
|
2708
|
+
};
|
|
2709
|
+
|
|
2570
2710
|
const translateUp = keyframes`
|
|
2571
2711
|
from {
|
|
2572
2712
|
transform: translateY(2000px);
|
|
@@ -2684,7 +2824,7 @@ const mapStateToProperties$6 = (state, ownProperties) => ({
|
|
|
2684
2824
|
});
|
|
2685
2825
|
|
|
2686
2826
|
const mapDispatchToProperties$6 = dispatch => ({
|
|
2687
|
-
dispatchRemoveNotification: payload => dispatch(notifications$1.actions.
|
|
2827
|
+
dispatchRemoveNotification: payload => dispatch(notifications$1.actions.remove(payload))
|
|
2688
2828
|
});
|
|
2689
2829
|
|
|
2690
2830
|
const ConnectedNotifications = connect(mapStateToProperties$6, mapDispatchToProperties$6)(Notifications);
|
|
@@ -3554,6 +3694,7 @@ const toolbars = {
|
|
|
3554
3694
|
};
|
|
3555
3695
|
|
|
3556
3696
|
const pluridal = {
|
|
3697
|
+
head: head,
|
|
3557
3698
|
notifications: notifications,
|
|
3558
3699
|
sitting: sitting,
|
|
3559
3700
|
toolbars: toolbars
|