|
@@ -53,35 +53,48 @@ const ToolsUsage = () => {
|
|
|
localize
|
|
localize
|
|
|
]);
|
|
]);
|
|
|
|
|
|
|
|
- const codeTheme = `import { NCoreUIKitTheme } from "ncore-ui-kit";
|
|
|
|
|
|
|
+ const codeTheme = `import {
|
|
|
|
|
+ NCoreUIKitTheme
|
|
|
|
|
+} from "ncore-ui-kit";
|
|
|
|
|
|
|
|
const MyComponent = () => {
|
|
const MyComponent = () => {
|
|
|
- // Access current theme colors, spaces, and active preferences
|
|
|
|
|
|
|
+ // ${localize("toolsUsage-codeThemeComment")}
|
|
|
const {
|
|
const {
|
|
|
- colors,
|
|
|
|
|
- spaces,
|
|
|
|
|
|
|
+ activePalette,
|
|
|
activeTheme,
|
|
activeTheme,
|
|
|
- activePalette
|
|
|
|
|
|
|
+ spaces,
|
|
|
|
|
+ colors
|
|
|
} = NCoreUIKitTheme.useContext();
|
|
} = NCoreUIKitTheme.useContext();
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
- <View style={[
|
|
|
|
|
|
|
+ <View
|
|
|
|
|
+ style={[
|
|
|
stylesheet.borderedCard,
|
|
stylesheet.borderedCard,
|
|
|
- { backgroundColor: colors.content.container.default, padding: spaces.spacingMd
|
|
|
|
|
|
|
+ {
|
|
|
|
|
+ backgroundColor: colors.content.container.default, padding: spaces.spacingMd
|
|
|
}
|
|
}
|
|
|
- ]}>
|
|
|
|
|
- <Text style={{ color: colors.content.text.high }}>Current Theme: {activeTheme}</Text>
|
|
|
|
|
|
|
+ ]}
|
|
|
|
|
+ >
|
|
|
|
|
+ <Text
|
|
|
|
|
+ style={{
|
|
|
|
|
+ color: colors.content.text.high
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ Current Theme: {activeTheme}
|
|
|
|
|
+ </Text>
|
|
|
</View>
|
|
</View>
|
|
|
);
|
|
);
|
|
|
};`;
|
|
};`;
|
|
|
|
|
|
|
|
- const codeLocale = `import { NCoreUIKitLocalize } from "ncore-ui-kit";
|
|
|
|
|
|
|
+ const codeLocale = `import {
|
|
|
|
|
+ NCoreUIKitLocalize
|
|
|
|
|
+} from "ncore-ui-kit";
|
|
|
|
|
|
|
|
const MyComponent = () => {
|
|
const MyComponent = () => {
|
|
|
- // Access current localization translations and active language
|
|
|
|
|
|
|
+ // ${localize("toolsUsage-codeLocaleComment")}
|
|
|
const {
|
|
const {
|
|
|
- localize,
|
|
|
|
|
- activeLocale
|
|
|
|
|
|
|
+ activeLocale,
|
|
|
|
|
+ localize
|
|
|
} = NCoreUIKitLocalize.useContext();
|
|
} = NCoreUIKitLocalize.useContext();
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
@@ -91,13 +104,13 @@ const MyComponent = () => {
|
|
|
);
|
|
);
|
|
|
};`;
|
|
};`;
|
|
|
|
|
|
|
|
- const codeToast = `import { NCoreUIKitToast } from "ncore-ui-kit";
|
|
|
|
|
|
|
+ const codeToast = `import {
|
|
|
|
|
+ NCoreUIKitToast
|
|
|
|
|
+} from "ncore-ui-kit";
|
|
|
|
|
|
|
|
const MyComponent = () => {
|
|
const MyComponent = () => {
|
|
|
- const { showToast } = NCoreUIKitToast.useContext();
|
|
|
|
|
-
|
|
|
|
|
const handlePress = () => {
|
|
const handlePress = () => {
|
|
|
- showToast({
|
|
|
|
|
|
|
+ NCoreUIKitToast.open({
|
|
|
title: "Success",
|
|
title: "Success",
|
|
|
content: "Action completed successfully!",
|
|
content: "Action completed successfully!",
|
|
|
variant: "success",
|
|
variant: "success",
|
|
@@ -105,7 +118,10 @@ const MyComponent = () => {
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- return <Button title="Show Toast" onPress={handlePress} />;
|
|
|
|
|
|
|
+ return <Button
|
|
|
|
|
+ onPress={handlePress}
|
|
|
|
|
+ title="Show Toast"
|
|
|
|
|
+ />;
|
|
|
};`;
|
|
};`;
|
|
|
|
|
|
|
|
return <PageContainer
|
|
return <PageContainer
|
|
@@ -187,7 +203,7 @@ const MyComponent = () => {
|
|
|
marginTop: spaces.spacingXl
|
|
marginTop: spaces.spacingXl
|
|
|
}}
|
|
}}
|
|
|
>
|
|
>
|
|
|
- NCoreUIKitToast.useContext
|
|
|
|
|
|
|
+ NCoreUIKitToast.open
|
|
|
</Text>
|
|
</Text>
|
|
|
<Text
|
|
<Text
|
|
|
color="mid"
|
|
color="mid"
|