ferns-ui 0.33.0 → 0.34.1
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/dist/Common.d.ts +1 -0
- package/dist/Common.js.map +1 -1
- package/dist/IconButton.d.ts +6 -1
- package/dist/IconButton.js +12 -3
- package/dist/IconButton.js.map +1 -1
- package/dist/SideDrawer.d.ts +13 -0
- package/dist/SideDrawer.js +22 -0
- package/dist/SideDrawer.js.map +1 -0
- package/dist/Switch.js +1 -1
- package/dist/Switch.js.map +1 -1
- package/dist/Tooltip.d.ts +1 -1
- package/dist/Tooltip.js +12 -18
- package/dist/Tooltip.js.map +1 -1
- package/dist/WithLabel.d.ts +3 -2
- package/dist/WithLabel.js +2 -2
- package/dist/WithLabel.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +6 -1
- package/src/Common.ts +2 -0
- package/src/IconButton.tsx +27 -1
- package/src/SideDrawer.tsx +62 -0
- package/src/Switch.tsx +1 -1
- package/src/Tooltip.tsx +16 -21
- package/src/WithLabel.tsx +4 -1
- package/src/index.tsx +1 -0
package/dist/Common.d.ts
CHANGED
|
@@ -314,6 +314,7 @@ export interface NavigatorProps {
|
|
|
314
314
|
config?: any;
|
|
315
315
|
}
|
|
316
316
|
export type TooltipDirection = "top" | "bottom" | "left" | "right";
|
|
317
|
+
export type IndicatorDirection = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
|
|
317
318
|
export interface PillProps {
|
|
318
319
|
text: string;
|
|
319
320
|
color: AllColors;
|
package/dist/Common.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAqrDA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAqBzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,GAAG,EAAE,EAAY,EAAE;IACtD,IAAI,QAAkB,CAAC;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM;QACL,QAAQ,GAAG,IAAI,CAAC;KACjB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,OAAgE;IAC9F,OAAO,CAAC;QACN,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB,CAAC,OAAO,CAAC,IAAI,MAAM,CAAU,CAAC;AACjC,CAAC;
|
|
1
|
+
{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAqrDA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAqBzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,GAAG,EAAE,EAAY,EAAE;IACtD,IAAI,QAAkB,CAAC;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM;QACL,QAAQ,GAAG,IAAI,CAAC;KACjB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,OAAgE;IAC9F,OAAO,CAAC;QACN,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB,CAAC,OAAO,CAAC,IAAI,MAAM,CAAU,CAAC;AACjC,CAAC;AAu5BD,MAAM,UAAU,UAAU,CAAC,OAAqB;IAC9C,OAAO,CACL,OAAO;QACP,OAAO,CAAC,KAAK;QACb,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CACrF,CAAC;AACJ,CAAC"}
|
package/dist/IconButton.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { ButtonColor, Color, IconName, IconPrefix, IconSize, ThemeColor, TooltipDirection } from "./Common";
|
|
2
|
+
import { AllColors, ButtonColor, Color, IconName, IconPrefix, IconSize, IndicatorDirection, ThemeColor, TooltipDirection } from "./Common";
|
|
3
3
|
export interface IconButtonProps {
|
|
4
4
|
prefix?: IconPrefix;
|
|
5
5
|
icon: IconName;
|
|
@@ -17,5 +17,10 @@ export interface IconButtonProps {
|
|
|
17
17
|
text: string;
|
|
18
18
|
idealDirection?: TooltipDirection;
|
|
19
19
|
};
|
|
20
|
+
indicator?: boolean;
|
|
21
|
+
indicatorStyle?: {
|
|
22
|
+
position: IndicatorDirection;
|
|
23
|
+
color: AllColors;
|
|
24
|
+
};
|
|
20
25
|
}
|
|
21
26
|
export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;
|
package/dist/IconButton.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useState } from "react";
|
|
2
|
-
import { Platform, Pressable } from "react-native";
|
|
2
|
+
import { Platform, Pressable, View } from "react-native";
|
|
3
3
|
import { iconSizeToNumber, } from "./Common";
|
|
4
4
|
import { Icon } from "./Icon";
|
|
5
5
|
import { Modal } from "./Modal";
|
|
@@ -7,7 +7,7 @@ import { Text } from "./Text";
|
|
|
7
7
|
import { Tooltip } from "./Tooltip";
|
|
8
8
|
import { Unifier } from "./Unifier";
|
|
9
9
|
// eslint-disable-next-line react/display-name
|
|
10
|
-
export const IconButton = forwardRef(({ prefix, icon, iconColor, onClick, size, bgColor = "transparent", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", tooltip, }, ref) => {
|
|
10
|
+
export const IconButton = forwardRef(({ prefix, icon, iconColor, onClick, size, bgColor = "transparent", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", tooltip, indicator, indicatorStyle = { position: "bottomRight", color: "primary" }, }, ref) => {
|
|
11
11
|
const [showConfirmation, setShowConfirmation] = useState(false);
|
|
12
12
|
const opacity = 1;
|
|
13
13
|
let color;
|
|
@@ -20,6 +20,13 @@ export const IconButton = forwardRef(({ prefix, icon, iconColor, onClick, size,
|
|
|
20
20
|
else {
|
|
21
21
|
color = Unifier.theme[bgColor];
|
|
22
22
|
}
|
|
23
|
+
const IndicatorPosition = {
|
|
24
|
+
bottomRight: { bottom: "20%", right: "20%" },
|
|
25
|
+
bottomLeft: { bottom: "20%", left: "20%" },
|
|
26
|
+
topRight: { top: "20%", right: "20%" },
|
|
27
|
+
topLeft: { top: "20%", left: "20%" },
|
|
28
|
+
};
|
|
29
|
+
const indicatorPosition = Object.assign({ position: "absolute" }, IndicatorPosition[indicatorStyle.position]);
|
|
23
30
|
const renderConfirmation = () => {
|
|
24
31
|
return (React.createElement(Modal, { heading: confirmationHeading, primaryButtonOnClick: () => {
|
|
25
32
|
onClick();
|
|
@@ -53,7 +60,9 @@ export const IconButton = forwardRef(({ prefix, icon, iconColor, onClick, size,
|
|
|
53
60
|
onClick();
|
|
54
61
|
}
|
|
55
62
|
} },
|
|
56
|
-
React.createElement(Icon, { color: iconColor, name: icon, prefix: prefix || "fas", size: size })
|
|
63
|
+
React.createElement(Icon, { color: iconColor, name: icon, prefix: prefix || "fas", size: size }),
|
|
64
|
+
indicator && (React.createElement(View, { style: indicatorPosition },
|
|
65
|
+
React.createElement(Icon, { color: indicatorStyle.color, name: "circle", prefix: prefix || "fas", size: "sm" })))),
|
|
57
66
|
Boolean(withConfirmation) && renderConfirmation()));
|
|
58
67
|
}
|
|
59
68
|
// Only add for web. This doesn't make much sense for mobile, since the action would be performed for the button
|
package/dist/IconButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../src/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../src/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAY,MAAM,cAAc,CAAC;AAElE,OAAO,EAOL,gBAAgB,GAIjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAuBlC,8CAA8C;AAC9C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,MAAM,EACN,IAAI,EACJ,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAO,GAAG,aAAa,EACvB,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,GAAG,oCAAoC,EACvD,mBAAmB,GAAG,SAAS,EAC/B,OAAO,EACP,SAAS,EACT,cAAc,GAAG,EAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAC,GAC5C,EAClB,GAAG,EACH,EAAE;IACF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,MAAM,OAAO,GAAG,CAAC,CAAC;IAClB,IAAI,KAAa,CAAC;IAClB,IAAI,OAAO,KAAK,qBAAqB,EAAE;QACrC,KAAK,GAAG,oBAAoB,CAAC;KAC9B;SAAM,IAAI,OAAO,KAAK,aAAa,IAAI,CAAC,OAAO,EAAE;QAChD,KAAK,GAAG,oBAAoB,CAAC;KAC9B;SAAM;QACL,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAChC;IAED,MAAM,iBAAiB,GAAG;QACxB,WAAW,EAAE,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;QAC1C,UAAU,EAAE,EAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC;QACxC,QAAQ,EAAE,EAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;QACpC,OAAO,EAAE,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC;KACnC,CAAC;IAEF,MAAM,iBAAiB,mBAAI,QAAQ,EAAE,UAAU,IAAK,iBAAiB,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEhG,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,OAAO,CACL,oBAAC,KAAK,IACJ,OAAO,EAAE,mBAAmB,EAC5B,oBAAoB,EAAE,GAAG,EAAE;gBACzB,OAAO,EAAE,CAAC;gBACV,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,EACD,iBAAiB,EAAC,SAAS,EAC3B,sBAAsB,EAAE,GAAS,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAC9D,mBAAmB,EAAC,QAAQ,EAC5B,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,GAAS,EAAE;gBACpB,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;YAED,oBAAC,IAAI,QAAE,gBAAgB,CAAQ,CACzB,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,SAAS,gBAAgB;QACvB,OAAO,CACL;YACE,oBAAC,SAAS,IACR,GAAG,EAAE,GAAU,EACf,OAAO,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAC,EACnD,KAAK,EAAE;oBACL,OAAO;oBACP,eAAe,EAAE,KAAK;oBACtB,YAAY,EAAE,GAAG;oBACjB,6CAA6C;oBAC7C,0CAA0C;oBAC1C,2CAA2C;oBAC3C,4CAA4C;oBAC5C,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,GAAG;oBACnC,MAAM,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,GAAG;oBACpC,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,QAAQ;oBACxB,UAAU,EAAE,QAAQ;iBACrB,EACD,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;oBACvB,IAAI,gBAAgB,IAAI,CAAC,gBAAgB,EAAE;wBACzC,mBAAmB,CAAC,IAAI,CAAC,CAAC;qBAC3B;yBAAM,IAAI,OAAO,EAAE;wBAClB,OAAO,EAAE,CAAC;qBACX;gBACH,CAAC;gBAED,oBAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI;gBAC1E,SAAS,IAAI,CACZ,oBAAC,IAAI,IAAC,KAAK,EAAE,iBAA8B;oBACzC,oBAAC,IAAI,IACH,KAAK,EAAE,cAAc,CAAC,KAAK,EAC3B,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,MAAM,IAAI,KAAK,EACvB,IAAI,EAAC,IAAI,GACT,CACG,CACR,CACS;YAEX,OAAO,CAAC,gBAAgB,CAAC,IAAI,kBAAkB,EAAE,CACjD,CACJ,CAAC;IACJ,CAAC;IAED,gHAAgH;IAChH,oCAAoC;IACpC,mEAAmE;IACnE,IAAI,OAAO,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;QACpC,OAAO,CACL,oBAAC,OAAO,IAAC,cAAc,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,IAChE,gBAAgB,EAAE,CACX,CACX,CAAC;KACH;SAAM;QACL,OAAO,gBAAgB,EAAE,CAAC;KAC3B;AACH,CAAC,CACF,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactElement } from "react";
|
|
2
|
+
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
+
export interface SideDrawerProps {
|
|
4
|
+
position?: "right" | "left";
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
renderContent: () => ReactElement | ReactElement[];
|
|
7
|
+
onClose?: () => void;
|
|
8
|
+
onOpen?: () => void;
|
|
9
|
+
drawerType?: "front" | "back" | "slide" | "permanent";
|
|
10
|
+
children?: ReactElement;
|
|
11
|
+
drawerStyles?: StyleProp<ViewStyle>;
|
|
12
|
+
}
|
|
13
|
+
export declare const SideDrawer: ({ position, isOpen, renderContent, onClose, onOpen, drawerType, children, drawerStyles, }: SideDrawerProps) => ReactElement;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Platform, SafeAreaView } from "react-native";
|
|
3
|
+
import { Drawer } from "react-native-drawer-layout";
|
|
4
|
+
import { isMobileDevice } from "./MediaQuery";
|
|
5
|
+
const DEFAULT_STYLES = {
|
|
6
|
+
width: Platform.OS === "web" ? "40%" : "95%",
|
|
7
|
+
backgroundColor: "lightgray",
|
|
8
|
+
borderWidth: 1,
|
|
9
|
+
borderColor: "gray",
|
|
10
|
+
overflow: isMobileDevice() ? undefined : "scroll",
|
|
11
|
+
};
|
|
12
|
+
export const SideDrawer = ({ position = "left", isOpen, renderContent, onClose = () => { }, onOpen = () => { }, drawerType = "front", children, drawerStyles = {}, }) => {
|
|
13
|
+
const renderDrawerContent = () => {
|
|
14
|
+
return React.createElement(SafeAreaView, null, renderContent());
|
|
15
|
+
};
|
|
16
|
+
return (React.createElement(Drawer, { drawerPosition: position, drawerStyle: [
|
|
17
|
+
DEFAULT_STYLES,
|
|
18
|
+
drawerStyles,
|
|
19
|
+
{ display: Platform.OS === "web" && !isOpen ? "none" : "flex" },
|
|
20
|
+
], drawerType: drawerType, open: isOpen, renderDrawerContent: renderDrawerContent, onClose: onClose, onOpen: onOpen }, children));
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=SideDrawer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SideDrawer.js","sourceRoot":"","sources":["../src/SideDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAuB,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAElD,OAAO,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAkB5C,MAAM,cAAc,GAAyB;IAC3C,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;IAC5C,eAAe,EAAE,WAAW;IAC5B,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,MAAM;IACnB,QAAQ,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;CAClD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,GAAG,MAAM,EACjB,MAAM,EACN,aAAa,EACb,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,MAAM,GAAG,GAAG,EAAE,GAAE,CAAC,EACjB,UAAU,GAAG,OAAO,EACpB,QAAQ,EACR,YAAY,GAAG,EAAE,GACD,EAAgB,EAAE;IAClC,MAAM,mBAAmB,GAAG,GAAiB,EAAE;QAC7C,OAAO,oBAAC,YAAY,QAAE,aAAa,EAAE,CAAgB,CAAC;IACxD,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IACL,cAAc,EAAE,QAAQ,EACxB,WAAW,EAAE;YACX,cAAc;YACd,YAAY;YACZ,EAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAC;SAC9D,EACD,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,MAAM,EACZ,mBAAmB,EAAE,mBAAmB,EACxC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,IAEb,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CAAC"}
|
package/dist/Switch.js
CHANGED
|
@@ -3,7 +3,7 @@ import { Switch as NativeSwitch } from "react-native";
|
|
|
3
3
|
import { WithLabel } from "./WithLabel";
|
|
4
4
|
export class Switch extends React.Component {
|
|
5
5
|
render() {
|
|
6
|
-
return (React.createElement(WithLabel, Object.assign({ labelInline: true, labelJustifyContent: "between" }, this.props),
|
|
6
|
+
return (React.createElement(WithLabel, Object.assign({ labelAlignItems: "center", labelInline: true, labelJustifyContent: "between" }, this.props),
|
|
7
7
|
React.createElement(NativeSwitch, { disabled: this.props.disabled, value: this.props.switched, onValueChange: this.props.onChange })));
|
|
8
8
|
}
|
|
9
9
|
}
|
package/dist/Switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,MAAM,OAAO,MAAO,SAAQ,KAAK,CAAC,SAA0B;IAC1D,MAAM;QACJ,OAAO,CACL,oBAAC,SAAS,kBAAC,WAAW,QAAC,mBAAmB,EAAC,SAAS,IAAK,IAAI,CAAC,KAAK;
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,MAAM,OAAO,MAAO,SAAQ,KAAK,CAAC,SAA0B;IAC1D,MAAM;QACJ,OAAO,CACL,oBAAC,SAAS,kBAAC,eAAe,EAAC,QAAQ,EAAC,WAAW,QAAC,mBAAmB,EAAC,SAAS,IAAK,IAAI,CAAC,KAAK;YAC1F,oBAAC,YAAY,IACX,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC1B,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAClC,CACQ,CACb,CAAC;IACJ,CAAC;CACF"}
|
package/dist/Tooltip.d.ts
CHANGED
|
@@ -5,5 +5,5 @@ interface TooltipProps {
|
|
|
5
5
|
idealDirection?: "top" | "bottom" | "left" | "right";
|
|
6
6
|
bgColor?: "white" | "lightGray" | "gray" | "darkGray";
|
|
7
7
|
}
|
|
8
|
-
export declare const Tooltip:
|
|
8
|
+
export declare const Tooltip: (props: TooltipProps) => React.JSX.Element;
|
|
9
9
|
export {};
|
package/dist/Tooltip.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
3
|
-
import { Dimensions, Platform, Pressable, } from "react-native";
|
|
2
|
+
import { Dimensions, Platform, Pressable, View, } from "react-native";
|
|
4
3
|
import { Portal } from "react-native-portalize";
|
|
5
4
|
import { Text } from "./Text";
|
|
6
5
|
import { Unifier } from "./Unifier";
|
|
@@ -70,8 +69,7 @@ const getTooltipPosition = ({ children, tooltip, measured, idealDirection, }) =>
|
|
|
70
69
|
}
|
|
71
70
|
}
|
|
72
71
|
};
|
|
73
|
-
|
|
74
|
-
export const Tooltip = forwardRef((props, _ref) => {
|
|
72
|
+
export const Tooltip = (props) => {
|
|
75
73
|
const { text, children, bgColor, idealDirection } = props;
|
|
76
74
|
const hoverDelay = 500;
|
|
77
75
|
const hoverEndDelay = 1500;
|
|
@@ -152,24 +150,20 @@ export const Tooltip = forwardRef((props, _ref) => {
|
|
|
152
150
|
}
|
|
153
151
|
}, [children.props]),
|
|
154
152
|
};
|
|
155
|
-
const webPressProps = {
|
|
156
|
-
onHoverIn: () => {
|
|
157
|
-
var _a, _b;
|
|
158
|
-
handleHoverIn();
|
|
159
|
-
(_b = (_a = children.props).onHoverIn) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
160
|
-
},
|
|
161
|
-
onHoverOut: () => {
|
|
162
|
-
var _a, _b;
|
|
163
|
-
handleHoverOut();
|
|
164
|
-
(_b = (_a = children.props).onHoverOut) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
165
|
-
},
|
|
166
|
-
};
|
|
167
153
|
return (React.createElement(React.Fragment, null,
|
|
168
154
|
visible && (React.createElement(Portal, null,
|
|
169
155
|
React.createElement(Pressable, { style: Object.assign(Object.assign({ alignSelf: "flex-start", justifyContent: "center", paddingHorizontal: 16, backgroundColor: Unifier.theme[bgColor !== null && bgColor !== void 0 ? bgColor : "darkGray"], borderRadius: 16, paddingVertical: 8, display: "flex", flexShrink: 1, maxWidth: Math.max(Dimensions.get("window").width - 32, 300) }, getTooltipPosition(Object.assign(Object.assign({}, measurement), { idealDirection }))), (measurement.measured ? { opacity: 1 } : { opacity: 0 })), testID: "tooltip-container", onLayout: handleOnLayout, onPress: () => {
|
|
170
156
|
setVisible(false);
|
|
171
157
|
} },
|
|
172
158
|
React.createElement(Text, { color: "white" }, text)))),
|
|
173
|
-
React.createElement(
|
|
174
|
-
|
|
159
|
+
React.createElement(View, Object.assign({ ref: childrenWrapperRef, onPointerEnter: () => {
|
|
160
|
+
var _a, _b;
|
|
161
|
+
handleHoverIn();
|
|
162
|
+
(_b = (_a = children.props).onHoverIn) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
163
|
+
}, onPointerLeave: () => {
|
|
164
|
+
var _a, _b;
|
|
165
|
+
handleHoverOut();
|
|
166
|
+
(_b = (_a = children.props).onHoverOut) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
167
|
+
}, onTouchStart: handleTouchStart }, (!isWeb && mobilePressProps)), children)));
|
|
168
|
+
};
|
|
175
169
|
//# sourceMappingURL=Tooltip.js.map
|
package/dist/Tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"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"}
|
package/dist/WithLabel.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { AllColors, JustifyContent, ReactChildren, TextSize } from "./Common";
|
|
2
|
+
import { AlignItems, AllColors, JustifyContent, ReactChildren, TextSize } from "./Common";
|
|
3
3
|
export interface WithLabelProps {
|
|
4
4
|
children?: ReactChildren;
|
|
5
5
|
show?: boolean;
|
|
@@ -7,7 +7,8 @@ export interface WithLabelProps {
|
|
|
7
7
|
labelInline?: boolean;
|
|
8
8
|
labelColor?: AllColors;
|
|
9
9
|
labelJustifyContent?: JustifyContent;
|
|
10
|
+
labelAlignItems?: AlignItems;
|
|
10
11
|
labelPlacement?: "before" | "after";
|
|
11
12
|
labelSize?: TextSize;
|
|
12
13
|
}
|
|
13
|
-
export declare function WithLabel({ label, labelInline, labelJustifyContent, labelPlacement, labelSize, labelColor, show, children, }: WithLabelProps): React.ReactElement | null;
|
|
14
|
+
export declare function WithLabel({ label, labelInline, labelJustifyContent, labelAlignItems, labelPlacement, labelSize, labelColor, show, children, }: WithLabelProps): React.ReactElement | null;
|
package/dist/WithLabel.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Box } from "./Box";
|
|
3
3
|
import { Text } from "./Text";
|
|
4
|
-
export function WithLabel({ label, labelInline, labelJustifyContent, labelPlacement, labelSize, labelColor, show, children, }) {
|
|
4
|
+
export function WithLabel({ label, labelInline, labelJustifyContent, labelAlignItems, labelPlacement, labelSize, labelColor, show, children, }) {
|
|
5
5
|
if (!children) {
|
|
6
6
|
return null;
|
|
7
7
|
}
|
|
8
|
-
return (React.createElement(Box, { direction: labelInline ? "row" : "column", justifyContent: labelJustifyContent, width: "100%" },
|
|
8
|
+
return (React.createElement(Box, { alignItems: labelAlignItems, direction: labelInline ? "row" : "column", justifyContent: labelJustifyContent, width: "100%" },
|
|
9
9
|
Boolean(label && labelPlacement !== "after") && (React.createElement(Box, { paddingY: 1 },
|
|
10
10
|
React.createElement(Text, { color: labelColor || "darkGray", size: labelSize, weight: "bold" }, show !== false ? label : " "))),
|
|
11
11
|
children,
|
package/dist/WithLabel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WithLabel.js","sourceRoot":"","sources":["../src/WithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"WithLabel.js","sourceRoot":"","sources":["../src/WithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAc5B,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,SAAS,EACT,UAAU,EACV,IAAI,EACJ,QAAQ,GACO;IACf,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CACL,oBAAC,GAAG,IACF,UAAU,EAAE,eAAe,EAC3B,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EACzC,cAAc,EAAE,mBAAmB,EACnC,KAAK,EAAC,MAAM;QAEX,OAAO,CAAC,KAAK,IAAI,cAAc,KAAK,OAAO,CAAC,IAAI,CAC/C,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC;YACd,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,IAAI,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAC,MAAM,IAClE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CACxB,CACH,CACP;QACA,QAAQ;QACR,OAAO,CAAC,KAAK,IAAI,cAAc,KAAK,OAAO,CAAC,IAAI,CAC/C,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC;YACd,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,IAAI,UAAU,EAAE,IAAI,EAAE,SAAS,IACnD,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CACxB,CACH,CACP,CACG,CACP,CAAC;AACJ,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -52,6 +52,7 @@ export * from "./NumberPickerActionSheet";
|
|
|
52
52
|
export * from "./ModalSheet";
|
|
53
53
|
export * from "./ProgressBar";
|
|
54
54
|
export * from "./DateTimeField";
|
|
55
|
+
export * from "./SideDrawer";
|
|
55
56
|
export * from "./Table";
|
|
56
57
|
export * from "./TableHeader";
|
|
57
58
|
export * from "./TableHeaderCell";
|
package/dist/index.js
CHANGED
|
@@ -55,6 +55,7 @@ export * from "./NumberPickerActionSheet";
|
|
|
55
55
|
export * from "./ModalSheet";
|
|
56
56
|
export * from "./ProgressBar";
|
|
57
57
|
export * from "./DateTimeField";
|
|
58
|
+
export * from "./SideDrawer";
|
|
58
59
|
export * from "./Table";
|
|
59
60
|
export * from "./TableHeader";
|
|
60
61
|
export * from "./TableHeaderCell";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ferns-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.34.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"scripts": {
|
|
@@ -112,6 +112,7 @@
|
|
|
112
112
|
"jest-watch-typeahead/testname"
|
|
113
113
|
]
|
|
114
114
|
},
|
|
115
|
+
"dependencies": {},
|
|
115
116
|
"devDependencies": {
|
|
116
117
|
"@expo/vector-icons": "^13.0.0",
|
|
117
118
|
"@react-native-async-storage/async-storage": "1.18.2",
|
|
@@ -154,11 +155,13 @@
|
|
|
154
155
|
"react-native": "0.72.3",
|
|
155
156
|
"react-native-actions-sheet": "^0.8.29",
|
|
156
157
|
"react-native-calendars": "^1.1295.0",
|
|
158
|
+
"react-native-drawer-layout": "^3.2.1",
|
|
157
159
|
"react-native-gesture-handler": "~2.12.1",
|
|
158
160
|
"react-native-modalize": "^2.1.1",
|
|
159
161
|
"react-native-permissions": "^3.7.3",
|
|
160
162
|
"react-native-picker-select": "^8.0.4",
|
|
161
163
|
"react-native-portalize": "^1.0.7",
|
|
164
|
+
"react-native-reanimated": "3.3.0",
|
|
162
165
|
"react-native-svg": "13.9.0",
|
|
163
166
|
"react-native-swiper-flatlist": "^3.1.1",
|
|
164
167
|
"react-native-toast-notifications": "^3.3.1",
|
|
@@ -192,11 +195,13 @@
|
|
|
192
195
|
"react-native": "0.72.3",
|
|
193
196
|
"react-native-actions-sheet": "^0.8.29",
|
|
194
197
|
"react-native-calendars": "^1.1295.0",
|
|
198
|
+
"react-native-drawer-layout": "^3.2.1",
|
|
195
199
|
"react-native-gesture-handler": "~2.12.1",
|
|
196
200
|
"react-native-modalize": "^2.1.1",
|
|
197
201
|
"react-native-permissions": "^3.7.3",
|
|
198
202
|
"react-native-picker-select": "^8.0.4",
|
|
199
203
|
"react-native-portalize": "^1.0.7",
|
|
204
|
+
"react-native-reanimated": "3.3.0",
|
|
200
205
|
"react-native-svg": "13.9.0",
|
|
201
206
|
"react-native-toast-notifications": "^3.3.1",
|
|
202
207
|
"react-router": "^6.11.2",
|
package/src/Common.ts
CHANGED
|
@@ -1997,6 +1997,8 @@ export interface NavigatorProps {
|
|
|
1997
1997
|
|
|
1998
1998
|
export type TooltipDirection = "top" | "bottom" | "left" | "right";
|
|
1999
1999
|
|
|
2000
|
+
export type IndicatorDirection = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
|
|
2001
|
+
|
|
2000
2002
|
export interface PillProps {
|
|
2001
2003
|
text: string;
|
|
2002
2004
|
color: AllColors;
|
package/src/IconButton.tsx
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import React, {forwardRef, useState} from "react";
|
|
2
|
-
import {Platform, Pressable} from "react-native";
|
|
2
|
+
import {Platform, Pressable, View, ViewStyle} from "react-native";
|
|
3
3
|
|
|
4
4
|
import {
|
|
5
|
+
AllColors,
|
|
5
6
|
ButtonColor,
|
|
6
7
|
Color,
|
|
7
8
|
IconName,
|
|
8
9
|
IconPrefix,
|
|
9
10
|
IconSize,
|
|
10
11
|
iconSizeToNumber,
|
|
12
|
+
IndicatorDirection,
|
|
11
13
|
ThemeColor,
|
|
12
14
|
TooltipDirection,
|
|
13
15
|
} from "./Common";
|
|
@@ -34,6 +36,8 @@ export interface IconButtonProps {
|
|
|
34
36
|
text: string;
|
|
35
37
|
idealDirection?: TooltipDirection;
|
|
36
38
|
};
|
|
39
|
+
indicator?: boolean;
|
|
40
|
+
indicatorStyle?: {position: IndicatorDirection; color: AllColors};
|
|
37
41
|
}
|
|
38
42
|
|
|
39
43
|
// eslint-disable-next-line react/display-name
|
|
@@ -50,6 +54,8 @@ export const IconButton = forwardRef(
|
|
|
50
54
|
confirmationText = "Are you sure you want to continue?",
|
|
51
55
|
confirmationHeading = "Confirm",
|
|
52
56
|
tooltip,
|
|
57
|
+
indicator,
|
|
58
|
+
indicatorStyle = {position: "bottomRight", color: "primary"},
|
|
53
59
|
}: IconButtonProps,
|
|
54
60
|
ref
|
|
55
61
|
) => {
|
|
@@ -65,6 +71,15 @@ export const IconButton = forwardRef(
|
|
|
65
71
|
color = Unifier.theme[bgColor];
|
|
66
72
|
}
|
|
67
73
|
|
|
74
|
+
const IndicatorPosition = {
|
|
75
|
+
bottomRight: {bottom: "20%", right: "20%"},
|
|
76
|
+
bottomLeft: {bottom: "20%", left: "20%"},
|
|
77
|
+
topRight: {top: "20%", right: "20%"},
|
|
78
|
+
topLeft: {top: "20%", left: "20%"},
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
const indicatorPosition = {position: "absolute", ...IndicatorPosition[indicatorStyle.position]};
|
|
82
|
+
|
|
68
83
|
const renderConfirmation = () => {
|
|
69
84
|
return (
|
|
70
85
|
<Modal
|
|
@@ -117,7 +132,18 @@ export const IconButton = forwardRef(
|
|
|
117
132
|
}}
|
|
118
133
|
>
|
|
119
134
|
<Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
|
|
135
|
+
{indicator && (
|
|
136
|
+
<View style={indicatorPosition as ViewStyle}>
|
|
137
|
+
<Icon
|
|
138
|
+
color={indicatorStyle.color}
|
|
139
|
+
name="circle"
|
|
140
|
+
prefix={prefix || "fas"}
|
|
141
|
+
size="sm"
|
|
142
|
+
/>
|
|
143
|
+
</View>
|
|
144
|
+
)}
|
|
120
145
|
</Pressable>
|
|
146
|
+
|
|
121
147
|
{Boolean(withConfirmation) && renderConfirmation()}
|
|
122
148
|
</>
|
|
123
149
|
);
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import React, {ReactElement} from "react";
|
|
2
|
+
import {Platform, SafeAreaView, StyleProp, ViewStyle} from "react-native";
|
|
3
|
+
import {Drawer} from "react-native-drawer-layout";
|
|
4
|
+
|
|
5
|
+
import {isMobileDevice} from "./MediaQuery";
|
|
6
|
+
|
|
7
|
+
export interface SideDrawerProps {
|
|
8
|
+
// Position of the drawer relative to the child
|
|
9
|
+
position?: "right" | "left";
|
|
10
|
+
// Used to open/hide drawer. Use the onClose and onOpen props to control state
|
|
11
|
+
isOpen: boolean;
|
|
12
|
+
// Content within the drawer
|
|
13
|
+
renderContent: () => ReactElement | ReactElement[];
|
|
14
|
+
// TODO: Allow the hardware back button on Android to close the SideDrawer
|
|
15
|
+
onClose?: () => void;
|
|
16
|
+
onOpen?: () => void;
|
|
17
|
+
drawerType?: "front" | "back" | "slide" | "permanent";
|
|
18
|
+
// Content that is wrapped by the drawer. The drawer will use the height of the child it wraps. Can be overwritten via styles prop
|
|
19
|
+
children?: ReactElement;
|
|
20
|
+
drawerStyles?: StyleProp<ViewStyle>;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const DEFAULT_STYLES: StyleProp<ViewStyle> = {
|
|
24
|
+
width: Platform.OS === "web" ? "40%" : "95%",
|
|
25
|
+
backgroundColor: "lightgray",
|
|
26
|
+
borderWidth: 1,
|
|
27
|
+
borderColor: "gray",
|
|
28
|
+
overflow: isMobileDevice() ? undefined : "scroll",
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const SideDrawer = ({
|
|
32
|
+
position = "left",
|
|
33
|
+
isOpen,
|
|
34
|
+
renderContent,
|
|
35
|
+
onClose = () => {},
|
|
36
|
+
onOpen = () => {},
|
|
37
|
+
drawerType = "front",
|
|
38
|
+
children,
|
|
39
|
+
drawerStyles = {},
|
|
40
|
+
}: SideDrawerProps): ReactElement => {
|
|
41
|
+
const renderDrawerContent = (): ReactElement => {
|
|
42
|
+
return <SafeAreaView>{renderContent()}</SafeAreaView>;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<Drawer
|
|
47
|
+
drawerPosition={position}
|
|
48
|
+
drawerStyle={[
|
|
49
|
+
DEFAULT_STYLES,
|
|
50
|
+
drawerStyles,
|
|
51
|
+
{display: Platform.OS === "web" && !isOpen ? "none" : "flex"},
|
|
52
|
+
]}
|
|
53
|
+
drawerType={drawerType}
|
|
54
|
+
open={isOpen}
|
|
55
|
+
renderDrawerContent={renderDrawerContent}
|
|
56
|
+
onClose={onClose}
|
|
57
|
+
onOpen={onOpen}
|
|
58
|
+
>
|
|
59
|
+
{children}
|
|
60
|
+
</Drawer>
|
|
61
|
+
);
|
|
62
|
+
};
|
package/src/Switch.tsx
CHANGED
|
@@ -7,7 +7,7 @@ import {WithLabel} from "./WithLabel";
|
|
|
7
7
|
export class Switch extends React.Component<SwitchProps, {}> {
|
|
8
8
|
render() {
|
|
9
9
|
return (
|
|
10
|
-
<WithLabel labelInline labelJustifyContent="between" {...this.props}>
|
|
10
|
+
<WithLabel labelAlignItems="center" labelInline labelJustifyContent="between" {...this.props}>
|
|
11
11
|
<NativeSwitch
|
|
12
12
|
disabled={this.props.disabled}
|
|
13
13
|
value={this.props.switched}
|
package/src/Tooltip.tsx
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {forwardRef} from "react";
|
|
3
2
|
import {
|
|
4
3
|
Dimensions,
|
|
5
4
|
LayoutChangeEvent,
|
|
@@ -124,8 +123,7 @@ interface TooltipProps {
|
|
|
124
123
|
bgColor?: "white" | "lightGray" | "gray" | "darkGray";
|
|
125
124
|
}
|
|
126
125
|
|
|
127
|
-
|
|
128
|
-
export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
|
|
126
|
+
export const Tooltip = (props: TooltipProps) => {
|
|
129
127
|
const {text, children, bgColor, idealDirection} = props;
|
|
130
128
|
const hoverDelay = 500;
|
|
131
129
|
const hoverEndDelay = 1500;
|
|
@@ -180,7 +178,7 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
|
|
|
180
178
|
showTooltipTimer.current = setTimeout(() => {
|
|
181
179
|
touched.current = true;
|
|
182
180
|
setVisible(true);
|
|
183
|
-
}, 100)
|
|
181
|
+
}, 100);
|
|
184
182
|
};
|
|
185
183
|
|
|
186
184
|
const handleHoverIn = () => {
|
|
@@ -191,7 +189,7 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
|
|
|
191
189
|
showTooltipTimer.current = setTimeout(() => {
|
|
192
190
|
touched.current = true;
|
|
193
191
|
setVisible(true);
|
|
194
|
-
}, hoverDelay)
|
|
192
|
+
}, hoverDelay);
|
|
195
193
|
};
|
|
196
194
|
|
|
197
195
|
const handleHoverOut = () => {
|
|
@@ -203,7 +201,7 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
|
|
|
203
201
|
hideTooltipTimer.current = setTimeout(() => {
|
|
204
202
|
setVisible(false);
|
|
205
203
|
setMeasurement({children: {}, tooltip: {}, measured: false});
|
|
206
|
-
}, hoverEndDelay)
|
|
204
|
+
}, hoverEndDelay);
|
|
207
205
|
};
|
|
208
206
|
|
|
209
207
|
const mobilePressProps = {
|
|
@@ -216,17 +214,6 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
|
|
|
216
214
|
}, [children.props]),
|
|
217
215
|
};
|
|
218
216
|
|
|
219
|
-
const webPressProps = {
|
|
220
|
-
onHoverIn: () => {
|
|
221
|
-
handleHoverIn();
|
|
222
|
-
children.props.onHoverIn?.();
|
|
223
|
-
},
|
|
224
|
-
onHoverOut: () => {
|
|
225
|
-
handleHoverOut();
|
|
226
|
-
children.props.onHoverOut?.();
|
|
227
|
-
},
|
|
228
|
-
};
|
|
229
|
-
|
|
230
217
|
return (
|
|
231
218
|
<>
|
|
232
219
|
{visible && (
|
|
@@ -255,13 +242,21 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
|
|
|
255
242
|
</Pressable>
|
|
256
243
|
</Portal>
|
|
257
244
|
)}
|
|
258
|
-
<
|
|
245
|
+
<View
|
|
259
246
|
ref={childrenWrapperRef}
|
|
247
|
+
onPointerEnter={() => {
|
|
248
|
+
handleHoverIn();
|
|
249
|
+
children.props.onHoverIn?.();
|
|
250
|
+
}}
|
|
251
|
+
onPointerLeave={() => {
|
|
252
|
+
handleHoverOut();
|
|
253
|
+
children.props.onHoverOut?.();
|
|
254
|
+
}}
|
|
260
255
|
onTouchStart={handleTouchStart}
|
|
261
|
-
{...(isWeb
|
|
256
|
+
{...(!isWeb && mobilePressProps)}
|
|
262
257
|
>
|
|
263
258
|
{children}
|
|
264
|
-
</
|
|
259
|
+
</View>
|
|
265
260
|
</>
|
|
266
261
|
);
|
|
267
|
-
}
|
|
262
|
+
};
|
package/src/WithLabel.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
3
|
import {Box} from "./Box";
|
|
4
|
-
import {AllColors, JustifyContent, ReactChildren, TextSize} from "./Common";
|
|
4
|
+
import {AlignItems, AllColors, JustifyContent, ReactChildren, TextSize} from "./Common";
|
|
5
5
|
import {Text} from "./Text";
|
|
6
6
|
|
|
7
7
|
export interface WithLabelProps {
|
|
@@ -11,6 +11,7 @@ export interface WithLabelProps {
|
|
|
11
11
|
labelInline?: boolean;
|
|
12
12
|
labelColor?: AllColors;
|
|
13
13
|
labelJustifyContent?: JustifyContent;
|
|
14
|
+
labelAlignItems?: AlignItems;
|
|
14
15
|
labelPlacement?: "before" | "after";
|
|
15
16
|
labelSize?: TextSize;
|
|
16
17
|
}
|
|
@@ -19,6 +20,7 @@ export function WithLabel({
|
|
|
19
20
|
label,
|
|
20
21
|
labelInline,
|
|
21
22
|
labelJustifyContent,
|
|
23
|
+
labelAlignItems,
|
|
22
24
|
labelPlacement,
|
|
23
25
|
labelSize,
|
|
24
26
|
labelColor,
|
|
@@ -30,6 +32,7 @@ export function WithLabel({
|
|
|
30
32
|
}
|
|
31
33
|
return (
|
|
32
34
|
<Box
|
|
35
|
+
alignItems={labelAlignItems}
|
|
33
36
|
direction={labelInline ? "row" : "column"}
|
|
34
37
|
justifyContent={labelJustifyContent}
|
|
35
38
|
width="100%"
|
package/src/index.tsx
CHANGED
|
@@ -56,6 +56,7 @@ export * from "./NumberPickerActionSheet";
|
|
|
56
56
|
export * from "./ModalSheet";
|
|
57
57
|
export * from "./ProgressBar";
|
|
58
58
|
export * from "./DateTimeField";
|
|
59
|
+
export * from "./SideDrawer";
|
|
59
60
|
export * from "./Table";
|
|
60
61
|
export * from "./TableHeader";
|
|
61
62
|
export * from "./TableHeaderCell";
|