@ledgerhq/native-ui 0.6.4 → 0.6.5

package/components/Form/Slider/index.native.d.ts

@@ -4,7 +4,9 @@ export declare type SliderProps = {
     max: number;
     value: number;
     onChange: (low: number, high: number) => void;
+    onTouchStart?: (low: number, high: number) => void;
+    onTouchEnd?: (low: number, high: number) => void;
     disabled?: boolean;
 };
-declare const Slider: ({ value, min, max, step, onChange, disabled }: SliderProps) => JSX.Element;
+declare const Slider: ({ value, min, max, step, onChange, onTouchEnd, onTouchStart, disabled, }: SliderProps) => JSX.Element;
 export default Slider;

package/components/Form/Slider/index.native.js

@@ -10,7 +10,7 @@ const SliderContainer = styled.View `
   align-items: center;
   width: 100%;
 `;
-const Slider = ({ value, min, max, step, onChange, disabled }) => {
+const Slider = ({ value, min, max, step, onChange, onTouchEnd, onTouchStart, disabled, }) => {
     const renderRail = useCallback(() => React.createElement(Rail, null), []);
     const renderRailSelected = useCallback(() => React.createElement(RailSelected, null), []);
     const renderLabel = useCallback((value) => React.createElement(Label, null, value), []);
@@ -18,7 +18,7 @@ const Slider = ({ value, min, max, step, onChange, disabled }) => {
     return (React.createElement(SliderContainer, null,
         React.createElement(RnRangeSlider, { style: {
                 width: "100%",
-            }, min: min, max: max, low: value, disabled: disabled, step: step, disableRange: true, floatingLabel: true, renderThumb: Thumb, renderRail: renderRail, renderRailSelected: renderRailSelected, renderLabel: renderLabel, renderNotch: renderNotch, onValueChanged: onChange }),
+            }, min: min, max: max, low: value, disabled: disabled, step: step, disableRange: true, floatingLabel: true, renderThumb: Thumb, renderRail: renderRail, renderRailSelected: renderRailSelected, renderLabel: renderLabel, renderNotch: renderNotch, onValueChanged: onChange, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd }),
         React.createElement(MinMaxTextContainer, null,
             React.createElement(Text, { variant: "small", fontWeight: "medium", color: "neutral.c70" }, min),
             React.createElement(Text, { variant: "small", fontWeight: "medium", color: "neutral.c70" }, max))));

package/components/Layout/Modals/BaseModal/index.d.ts

@@ -1,20 +1,18 @@
 import React from "react";
 import { ModalProps } from "react-native-modal";
 import { StyleProp, ViewStyle } from "react-native";
+import { IconOrElementType } from "../../../Icon/type";
 export declare type BaseModalProps = {
     isOpen?: boolean;
     onClose?: () => void;
     modalStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     preventBackdropClick?: boolean;
-    Icon?: ((props: {
-        size?: number;
-        color?: string;
-    }) => React.ReactNode) | React.ReactNode;
+    Icon?: IconOrElementType;
     iconColor?: string;
     title?: string;
     description?: string;
     subtitle?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 } & Partial<ModalProps>;
 export default function BaseModal({ isOpen, onClose, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;

package/components/Layout/Modals/BaseModal/index.js

@@ -11,12 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import ReactNativeModal from "react-native-modal";
-import styled, { useTheme } from "styled-components/native";
+import styled from "styled-components/native";
 import sizes from "../../../../helpers/getDeviceSize";
 import Link from "../../../cta/Link";
 import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
-import FlexBox from "../../../Layout/Flex";
 import Text from "../../../Text";
+import { BoxedIcon } from "../../../Icon";
+import { Flex } from "../../index";
 const { width, height } = sizes;
 const Container = styled.View `
   background-color: ${(p) => p.theme.colors.background.main};
@@ -45,7 +46,6 @@ const StyledDescription = styled(Text).attrs({
     variant: "body",
     color: "neutral.c80",
 }) `
-  text-transform: capitalize;
   margin-top: ${(p) => p.theme.space[2]}px;
 `;
 const StyledSubtitle = styled(Text).attrs({
@@ -53,6 +53,7 @@ const StyledSubtitle = styled(Text).attrs({
     color: "neutral.c80",
 }) `
   text-transform: uppercase;
+  text-align: center;
   margin-bottom: ${(p) => p.theme.space[2]}px;
 `;
 const defaultModalStyle = {
@@ -61,7 +62,6 @@ const defaultModalStyle = {
 };
 export default function BaseModal(_a) {
     var { isOpen, onClose = () => { }, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children } = _a, rest = __rest(_a, ["isOpen", "onClose", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children"]);
-    const { colors } = useTheme();
     const backDropProps = preventBackdropClick
         ? {}
         : {
@@ -74,12 +74,7 @@ export default function BaseModal(_a) {
             React.createElement(CloseContainer, null,
                 React.createElement(Link, { Icon: CloseMedium, onPress: onClose })),
             React.createElement(HeaderContainer, null,
-                Icon && (React.createElement(FlexBox, { mb: 24 }, typeof Icon === "function"
-                    ? Icon({
-                        size: 48,
-                        color: iconColor || colors.neutral.c100,
-                    })
-                    : Icon)),
+                Icon && (React.createElement(Flex, { mb: 7 }, React.isValidElement(Icon) ? (Icon) : (React.createElement(BoxedIcon, { size: 64, Icon: Icon, iconSize: 24, iconColor: iconColor })))),
                 subtitle && React.createElement(StyledSubtitle, null, subtitle),
                 title && React.createElement(StyledTitle, null, title),
                 description && React.createElement(StyledDescription, null, description)),

package/components/Layout/Modals/Popin/index.d.ts

@@ -1,11 +1,7 @@
 import React from "react";
 import { BaseModalProps } from "../BaseModal";
 import { ButtonProps } from "../../../cta/Button";
-export default function Popin({ children, Icon, iconColor, leftButtonText, rightButtonText, onLeftButtonPress, onRightButtonPress, ...restProps }: BaseModalProps & {
-    Icon: (props: {
-        size?: number;
-        color?: string;
-    }) => React.ReactElement;
+export default function Popin({ children, leftButtonText, rightButtonText, onLeftButtonPress, onRightButtonPress, ...restProps }: BaseModalProps & {
     leftButtonText?: string;
     rightButtonText?: string;
     onLeftButtonPress?: ButtonProps["onPress"];

package/components/Layout/Modals/Popin/index.js

@@ -14,7 +14,6 @@ import { StyleSheet } from "react-native";
 import styled from "styled-components/native";
 import BaseModal from "../BaseModal";
 import Text from "../../../Text";
-import IconBox from "../../../Icon/IconBox";
 import Button from "../../../cta/Button";
 const FooterButtonsContainer = styled.View `
   display: flex;
@@ -29,8 +28,8 @@ const modalStyleOverrides = StyleSheet.create({
     },
 });
 export default function Popin(_a) {
-    var { children, Icon, iconColor, leftButtonText = "Cancel", rightButtonText = "Delete", onLeftButtonPress, onRightButtonPress } = _a, restProps = __rest(_a, ["children", "Icon", "iconColor", "leftButtonText", "rightButtonText", "onLeftButtonPress", "onRightButtonPress"]);
-    return (React.createElement(BaseModal, Object.assign({}, restProps, { containerStyle: modalStyleOverrides.container, Icon: Icon ? React.createElement(IconBox, { Icon: Icon, color: iconColor }) : null }),
+    var { children, leftButtonText = "Cancel", rightButtonText = "Delete", onLeftButtonPress, onRightButtonPress } = _a, restProps = __rest(_a, ["children", "leftButtonText", "rightButtonText", "onLeftButtonPress", "onRightButtonPress"]);
+    return (React.createElement(BaseModal, Object.assign({}, restProps, { containerStyle: modalStyleOverrides.container }),
         children,
         React.createElement(FooterButtonsContainer, null,
             React.createElement(Button, { onPress: onLeftButtonPress, outline: true, type: "shade", style: { flex: 1, marginRight: 8 } },

package/components/Layout/ScrollListContainer/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { FlatListProps, NativeSyntheticEvent, NativeScrollEvent } from "react-native";
+import { BaseStyledProps } from "../../styled";
+declare type ScrollListContainerProps = BaseStyledProps & Omit<FlatListProps<any>, "onScroll" | "data" | "renderItem"> & {
+    children: React.ReactNode;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    horizontal?: boolean;
+};
+declare const ScrollListContainer: ({ children, onScroll, horizontal, ...props }: ScrollListContainerProps) => JSX.Element;
+export default ScrollListContainer;

package/components/Layout/ScrollListContainer/index.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { View } from "react-native";
+import Animated from "react-native-reanimated";
+import baseStyled from "../../styled";
+const StyledFlatList = baseStyled.FlatList ``;
+const AnimatedFlatList = Animated.createAnimatedComponent(StyledFlatList);
+/*
+ ** This Layout is a wrapper for FlatList that accepts
+ ** complex onScroll callback for react-native-reanimated.
+ */
+const ScrollListContainer = (_a) => {
+    var { children, onScroll, horizontal = false } = _a, props = __rest(_a, ["children", "onScroll", "horizontal"]);
+    return (React.createElement(AnimatedFlatList, Object.assign({ data: [...React.Children.toArray(children)], renderItem: ({ item }) => React.createElement(View, null, item), onScroll: onScroll, horizontal: horizontal }, props)));
+};
+export default ScrollListContainer;

package/components/Layout/index.d.ts

@@ -4,5 +4,6 @@ export { default as Box } from "./Box";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
+export { default as ScrollListContainer } from "./ScrollListContainer";
 export { default as Row } from "./Table/Row";
 export * from "./List";

package/components/Layout/index.js

@@ -4,5 +4,6 @@ export { default as Box } from "./Box";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
+export { default as ScrollListContainer } from "./ScrollListContainer";
 export { default as Row } from "./Table/Row";
 export * from "./List";

package/components/message/Alert/index.d.ts

@@ -1,8 +1,10 @@
+import React from "react";
 declare type AlertType = "info" | "warning" | "error";
 export interface AlertProps {
     type?: AlertType;
-    title: string;
+    title?: string;
     showIcon?: boolean;
+    children?: React.ReactNode;
 }
-export default function Alert({ type, title, showIcon }: AlertProps): JSX.Element;
+export default function Alert({ type, title, showIcon, children, }: AlertProps): JSX.Element;
 export {};

package/components/message/Alert/index.js

@@ -39,10 +39,11 @@ const StyledAlertContainer = styled(FlexBox).attrs((p) => ({
   flex-direction: row;
   align-items: center;
 `;
-export default function Alert({ type = "info", title, showIcon = true }) {
+export default function Alert({ type = "info", title, showIcon = true, children, }) {
     const theme = useTheme();
     const textColor = getColor(theme, alertColors[type || "info"].color);
     return (React.createElement(StyledAlertContainer, { type: type },
         showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, icons[type || "info"]({ size: 20, color: textColor }))),
-        React.createElement(Text, { color: textColor, flexShrink: 1 }, title)));
+        title && (React.createElement(Text, { color: textColor, flexShrink: 1 }, title)),
+        children));
 }

package/components/tags/Tag/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FlexBoxProps } from "../../Layout/Flex";
+export interface TagProps extends FlexBoxProps {
+    active?: boolean;
+    children: React.ReactNode;
+}
+export default function Tag({ active, children, ...props }: TagProps): JSX.Element;

package/components/tags/Tag/index.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import Flex from "../../Layout/Flex";
+import Text from "../../Text";
+export default function Tag(_a) {
+    var { active, children } = _a, props = __rest(_a, ["active", "children"]);
+    return (React.createElement(Flex, Object.assign({ px: 2, alignItems: "center", justifyContent: "center", borderRadius: 4, borderWidth: 1, borderColor: active ? "primary.c50" : "neutral.c40" }, props),
+        React.createElement(Text, { variant: "tiny", fontWeight: "semiBold", lineHeight: "16px", textTransform: "uppercase", textAlign: "center", color: active ? "primary.c70" : "neutral.c80" }, children)));
+}

package/components/tags/index.d.ts

@@ -1 +1,2 @@
 export { default as Badge } from "./Badge";
+export { default as Tag } from "./Tag";

package/components/tags/index.js

@@ -1 +1,2 @@
 export { default as Badge } from "./Badge";
+export { default as Tag } from "./Tag";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -15,7 +15,7 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.2",
+    "@ledgerhq/icons-ui": "^0.2.3",
     "@ledgerhq/ui-shared": "^0.1.5",
     "@types/color": "^3.0.2",
     "@types/react": "^17.0.37",