@ledgerhq/native-ui 0.33.0-nightly.0 → 0.33.0
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/lib/components/cta/QuickAction/QuickActionButton/index.d.ts +3 -1
- package/lib/components/cta/QuickAction/QuickActionButton/index.d.ts.map +1 -1
- package/lib/components/cta/QuickAction/QuickActionButton/index.js +14 -6
- package/lib/components/cta/QuickAction/QuickActionList/index.d.ts +2 -1
- package/lib/components/cta/QuickAction/QuickActionList/index.d.ts.map +1 -1
- package/lib/components/cta/QuickAction/QuickActionList/index.js +2 -2
- package/package.json +2 -2
|
@@ -10,12 +10,14 @@ export type QuickActionButtonProps = TouchableOpacityProps & BaseStyledProps & {
|
|
|
10
10
|
onPressWhenDisabled?: TouchableOpacityProps["onPress"];
|
|
11
11
|
textVariant?: TextVariants;
|
|
12
12
|
variant?: Variant;
|
|
13
|
+
isActive?: boolean;
|
|
13
14
|
};
|
|
14
15
|
export declare const StyledText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../../Text").BaseTextProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
15
16
|
export declare const Base: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<import("react-native").View>>, import("styled-components").DefaultTheme, TouchableOpacityProps & {
|
|
16
17
|
visuallyDisabled?: boolean | undefined;
|
|
17
18
|
variant: Variant;
|
|
19
|
+
isActive?: boolean | undefined;
|
|
18
20
|
}, never>;
|
|
19
|
-
declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant, variant, testID, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
|
|
21
|
+
declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant, variant, testID, isActive, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
|
|
20
22
|
export default QuickActionButton;
|
|
21
23
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAmB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GACxD,eAAe,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAmB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GACxD,eAAe,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,eAAO,MAAM,UAAU,oNAGtB,CAAC;AAEF,eAAO,MAAM,IAAI;;aACgD,OAAO;;SAmBvE,CAAC;AAEF,QAAA,MAAM,iBAAiB,sHAWpB,sBAAsB,KAAG,MAAM,YA8BjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -12,18 +12,26 @@ export const Base = baseStyled(TouchableOpacity) `
|
|
|
12
12
|
text-align: center;
|
|
13
13
|
align-items: center;
|
|
14
14
|
justify-content: center;
|
|
15
|
-
border-radius: ${(
|
|
15
|
+
border-radius: ${({ isActive, theme }) => (isActive ? 14 : theme.radii[2])}px;
|
|
16
16
|
padding: ${({ theme, variant }) => variant === "small" ? `${theme.space[3]}px ${theme.space[2]}px` : `0 ${theme.space[6]}px`};
|
|
17
|
-
${({ visuallyDisabled, theme }) =>
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
${({ visuallyDisabled, isActive, theme }) => {
|
|
18
|
+
if (visuallyDisabled) {
|
|
19
|
+
return `border: 1px solid ${theme.colors.neutral.c30};`;
|
|
20
|
+
}
|
|
21
|
+
else if (isActive) {
|
|
22
|
+
return `background-color: ${theme.colors.neutral.c30};`;
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
return `background-color: ${theme.colors.neutral.c20};`;
|
|
26
|
+
}
|
|
27
|
+
}}
|
|
20
28
|
`;
|
|
21
|
-
const QuickActionButton = ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant = "body", variant = "large", testID, ...otherProps }) => {
|
|
29
|
+
const QuickActionButton = ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant = "body", variant = "large", testID, isActive = true, ...otherProps }) => {
|
|
22
30
|
const text = // Extract the text to use it as a testID
|
|
23
31
|
React.isValidElement(children) && children.props?.i18nKey
|
|
24
32
|
? children.props.i18nKey.split(".").pop() // Extract the last part of the key
|
|
25
33
|
: children?.toString().toLowerCase();
|
|
26
|
-
return (React.createElement(Base, { disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled, variant: variant, ...otherProps, testID: `${testID}-${text}` },
|
|
34
|
+
return (React.createElement(Base, { disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled, variant: variant, isActive: !disabled && isActive, ...otherProps, testID: `${testID}-${text}` },
|
|
27
35
|
React.createElement(Icon, { size: variant === "small" ? 20 : 24, color: disabled ? "neutral.c50" : "neutral.c100" }),
|
|
28
36
|
React.createElement(StyledText, { numberOfLines: 1, variant: textVariant, fontWeight: "semiBold", color: disabled ? "neutral.c50" : "neutral.c100", mt: 2 }, children)));
|
|
29
37
|
};
|
|
@@ -4,7 +4,8 @@ import { QuickActionButtonProps } from "../QuickActionButton";
|
|
|
4
4
|
export type QuickActionListProps = Omit<FlatListProps<QuickActionButtonProps>, "renderItem"> & {
|
|
5
5
|
id: string;
|
|
6
6
|
testID?: string;
|
|
7
|
+
isActive?: boolean;
|
|
7
8
|
};
|
|
8
|
-
declare const QuickActionList: ({ numColumns, data, id, testID, ...otherProps }: QuickActionListProps) => React.ReactElement;
|
|
9
|
+
declare const QuickActionList: ({ numColumns, data, id, testID, isActive, ...otherProps }: QuickActionListProps) => React.ReactElement;
|
|
9
10
|
export default QuickActionList;
|
|
10
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AAEvD,OAA0B,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,GAAG;IAC7F,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AAEvD,OAA0B,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,GAAG;IAC7F,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,eAAe,8DAOlB,oBAAoB,KAAG,MAAM,YA2B/B,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { useCallback } from "react";
|
|
2
2
|
import { FlatList } from "react-native";
|
|
3
3
|
import QuickActionButton from "../QuickActionButton";
|
|
4
|
-
const QuickActionList = ({ numColumns = 3, data, id, testID, ...otherProps }) => {
|
|
4
|
+
const QuickActionList = ({ numColumns = 3, data, id, testID, isActive = false, ...otherProps }) => {
|
|
5
5
|
const renderItem = useCallback(({ item, index }) => {
|
|
6
|
-
return (React.createElement(QuickActionButton, { ...item, flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: data?.length && index + numColumns < data.length ? 4 : 0, testID: testID }));
|
|
6
|
+
return (React.createElement(QuickActionButton, { ...item, isActive: isActive, flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: data?.length && index + numColumns < data.length ? 4 : 0, testID: testID }));
|
|
7
7
|
}, []);
|
|
8
8
|
return (React.createElement(FlatList, { ...otherProps, data: data, keyExtractor: (_item, index) => `${id}${index}`, horizontal: false, renderItem: renderItem, numColumns: numColumns }));
|
|
9
9
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/native-ui",
|
|
3
|
-
"version": "0.33.0
|
|
3
|
+
"version": "0.33.0",
|
|
4
4
|
"description": "Ledger Live - Mobile UI",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"react-native-modal": "^13.0.0",
|
|
40
40
|
"rn-range-slider": "2.1.1",
|
|
41
41
|
"styled-system": "^5.1.5",
|
|
42
|
-
"@ledgerhq/icons-ui": "^0.9.0",
|
|
43
42
|
"@ledgerhq/crypto-icons-ui": "^1.12.0",
|
|
43
|
+
"@ledgerhq/icons-ui": "^0.9.0",
|
|
44
44
|
"@ledgerhq/ui-shared": "^0.3.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|