Publish v1.2.4

yamankatby · Nov 27, 2021 · f02e127 · f02e127 · vercel · Nov 27, 2021
1 parent 44f5bb9
commit f02e127
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 26 deletions.
diff --git a/core/package.json b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-native-material/core",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Modular and customizable Material Design UI components for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

diff --git a/docs/docs/api/text-input.md b/docs/docs/api/text-input.md
@@ -13,18 +13,75 @@ import TextInput from "@react-native-material/core/TextInput";
 ## Props
 
 ```ts
-interface TextInputProps extends NativeTextInputProps {
-  variant?: "flat" | "outlined";
+interface TextInputProps extends RNTextInputProps {
+  /**
+   * The variant to use.
+   *
+   * @default "filled"
+   */
+  variant?: "filled" | "outlined" | "standard";
 
+  /**
+   * The label to display.
+   */
+  label?: string;
+
+  /**
+   * The element placed before the text input.
+   */
+  leading?: React.ReactNode | ((props: { color: string; size: number }) => React.ReactNode | null) | null;
+
+  /**
+   * The element placed after the text input.
+   */
+  trailing?: React.ReactNode | ((props: { color: string; size: number }) => React.ReactNode | null) | null;
+
+  /**
+   * The color of the text input's content (e.g. label, icons, selection).
+   *
+   * @default "primary"
+   */
   color?: PaletteColor;
 
-  label?: string;
+  /**
+   * The helper text to display.
+   */
+  helperText?: string;
+
+  /**
+   * Callback function to call when user moves pointer over the input.
+   */
+  onMouseEnter?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+
+  /**
+   * Callback function to call when user moves pointer away from the input.
+   */
+  onMouseLeave?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+
+  /**
+   * The style of the container view.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * The style of the text input container view.
+   */
+  inputContainerStyle?: StyleProp<ViewStyle>;
 
-  assistiveText?: string;
+  /**
+   * The style of the text input.
+   */
+  inputStyle?: RNTextInputProps["style"];
 
-  leading?: React.ReactElement | ((props: { color: string; size: number }) => React.ReactElement | null) | null;
+  /**
+   * The style of the text input's leading element container.
+   */
+  leadingContainerStyle?: StyleProp<ViewStyle>;
 
-  trailing?: React.ReactElement | ((props: { color: string; size: number }) => React.ReactElement | null) | null;
+  /**
+   * The style of the text input's trailing element container.
+   */
+  trailingContainerStyle?: StyleProp<ViewStyle>;
 }
 
 ```
diff --git a/docs/docs/components/text-input.md b/docs/docs/components/text-input.md
@@ -5,12 +5,24 @@ Text inputs let users enter and edit text.
 ```js with-preview
 import React from "react";
 import { View } from "react-native";
-import { TextInput } from "@react-native-material/core";
+import { TextInput, IconButton } from "@react-native-material/core";
+import Icon from "@expo/vector-icons/MaterialCommunityIcons";
 
 const App = () => (
   <View style={{ flex: 1, padding: 16 }}>
-    <TextInput label="Label"/>
-    <TextInput label="Label" variant="outlined" style={{ marginTop: 8 }}/>
+    <TextInput
+      label="Label"
+      leading={props => <Icon name="account" {...props} />}
+    />
+    <TextInput
+      label="Label"
+      variant="outlined"
+      trailing={props => (
+        <IconButton icon={<Icon name="eye" {...props} />} color={props.color} />
+      )}
+      style={{ marginTop: 8 }}
+    />
+    <TextInput label="Label" variant="standard" style={{ marginTop: 8 }} />
   </View>
 );
 
@@ -26,13 +38,11 @@ Text inputs allow users to enter text into a UI. They typically appear in forms
 
 ## Variants
 
-Text inputs come in two variants:
+Text inputs come in three variants:
 
 - Filled text inputs
 - Outlined text inputs
-
-Both types of text input use a container to provide a clear affordance for interaction, making the fields discoverable
-in layouts.
+- Standard text inputs
 
 ### Filled
 
@@ -56,4 +66,17 @@ const App = () => (
 );
 
 export default App;
-```
+```
+
+### Standard
+
+```js with-preview
+import React from "react";
+import { TextInput } from "@react-native-material/core";
+
+const App = () => (
+  <TextInput variant="standard" label="Label" style={{ margin: 16 }}/>
+);
+
+export default App;
+```
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -76,9 +76,9 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
           },
           {
             type: 'dropdown',
-            label: 'v1.2.3',
+            label: 'v1.2.4',
             items: [
-              { label: 'v1.2.3', to: '/' },
+              { label: 'v1.2.4', to: '/' },
               {
                 label: 'v1.1.0',
                 href: 'https://react-native-material-38lpom7xc-yamankatby.vercel.app/docs/getting-started'

diff --git a/docs/package.json b/docs/package.json
@@ -19,7 +19,7 @@
     "@docusaurus/preset-classic": "2.0.0-beta.9",
     "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.9",
     "@mdx-js/react": "^1.6.21",
-    "@react-native-material/core": "1.2.3",
+    "@react-native-material/core": "1.2.4",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",

diff --git a/docs/preview.js b/docs/preview.js
@@ -1,7 +1,7 @@
 const defaults = {
   name: "Example",
   description: "Simple code example",
-  dependencies: "@react-native-material/[email protected].3",
+  dependencies: "@react-native-material/[email protected].4",
   loading: "lazy",
   supportedPlatforms: "mydevice,ios,android,web",
   platform: "web",

diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -3316,15 +3316,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-material/core@npm:1.2.3":
-  version: 1.2.3
-  resolution: "@react-native-material/core@npm:1.2.3"
+"@react-native-material/core@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@react-native-material/core@npm:1.2.4"
   dependencies:
     chroma-js: ^2.1.2
   peerDependencies:
     react: ^17.0.2
     react-native: ^0.65.1
-  checksum: 443ede4ec0ab1e0804de0b6f12ffe0dca2100932be460bbd931c773b470399fbe99c53181941c80d8ce9250e016857eb81a3b020c2323397a8f3f92e3bc11878
+  checksum: 4d85ad1c3c2e941dae86f155285438c0d45b8eb23f79595440f3ee45b1e839f2010619dd552d6240a7755a066c2751b34fc53dff78c53b90ae09333fd7741580
   languageName: node
   linkType: hard
 
@@ -5758,7 +5758,7 @@ __metadata:
     "@docusaurus/preset-classic": 2.0.0-beta.9
     "@docusaurus/remark-plugin-npm2yarn": ^2.0.0-beta.9
     "@mdx-js/react": ^1.6.21
-    "@react-native-material/core": 1.2.3
+    "@react-native-material/core": 1.2.4
     "@svgr/webpack": ^5.5.0
     clsx: ^1.1.1
     file-loader: ^6.2.0

diff --git a/example/screens/Main.js b/example/screens/Main.js
@@ -5,7 +5,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import { StatusBar } from 'expo-status-bar';
-import TextInputs from "./TextInputs";
 
 const data = [
   { title: "App bars", subtitle: "The app bar provides content and actions related to the current screen." },
@@ -147,4 +146,4 @@ const Demo = () => {
   )
 }
 
-export default TextInputs
+export default Main;