feat: support theme in textInput

hosseinmd · Nov 24, 2021 · d59a102 · d59a102
1 parent 7b3a0fa
commit d59a102
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 5 deletions.
diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts
@@ -1,2 +1,3 @@
 export * from "./atoms";
 export * from "./molecules";
+export * from "./muscles";
diff --git a/packages/component/src/molecules/index.ts b/packages/component/src/molecules/index.ts
@@ -1,4 +1,3 @@
 export * from "./loadingView";
 export * from "./scrollView";
 export * from "./text";
-export * from "./textInput";
diff --git a/packages/component/src/muscles/index.ts b/packages/component/src/muscles/index.ts
@@ -0,0 +1 @@
+export * from "./textInput";
diff --git a/...lecules/textInput/TextInputState/index.ts → ...muscles/textInput/TextInputState/index.ts b/...lecules/textInput/TextInputState/index.ts → ...muscles/textInput/TextInputState/index.ts
diff --git a/...mponent/src/molecules/textInput/index.tsx → ...component/src/muscles/textInput/index.tsx b/...mponent/src/molecules/textInput/index.tsx → ...component/src/muscles/textInput/index.tsx
@@ -4,6 +4,7 @@ import jss from "jss";
 import * as React from "react";
 import { composeRef, useElementLayout } from "reactjs-view-core";
 import { flattenStyle } from "../../atoms";
+import { useThemes } from "../../molecules/text/styles";
 import TextInputState from "./TextInputState";
 import { TextInputProps } from "./types";
 
@@ -43,6 +44,7 @@ const TextInput = React.forwardRef<HTMLElement, TextInputProps>(
       blurOnSubmit,
       clearTextOnFocus,
       dir,
+      theme = "regular-fa",
       editable = true,
       keyboardType = "default",
       multiline = false,
@@ -70,6 +72,7 @@ const TextInput = React.forwardRef<HTMLElement, TextInputProps>(
   ) => {
     let type: React.InputHTMLAttributes<HTMLInputElement>["type"];
     let inputMode: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+    const themes = useThemes();
 
     switch (keyboardType) {
       case "email-address":
@@ -277,7 +280,11 @@ const TextInput = React.forwardRef<HTMLElement, TextInputProps>(
     supportedProps.autoCapitalize = autoCapitalize;
     supportedProps.autoComplete = autoComplete || autoCompleteType || "on";
     supportedProps.autoCorrect = autoCorrect ? "on" : "off";
-    supportedProps.className = classNames(classes.textinput, className);
+    supportedProps.className = classNames(
+      classes.textinput,
+      themes[theme],
+      className,
+    );
     // 'auto' by default allows browsers to infer writing direction
     supportedProps.dir = dir !== undefined ? dir : "auto";
     supportedProps.enterKeyHint = returnKeyType;
@@ -318,7 +325,7 @@ const classes = jss
       border: "0 solid black",
       borderRadius: 0,
       boxSizing: "border-box",
-      font: "14px System",
+      fontSize: 14,
       margin: 0,
       padding: 0,
       resize: "none",

diff --git a/...omponent/src/molecules/textInput/types.ts → .../component/src/muscles/textInput/types.ts b/...omponent/src/molecules/textInput/types.ts → .../component/src/muscles/textInput/types.ts
@@ -9,9 +9,11 @@
 
 import React from "react";
 import { ViewProps } from "../../atoms";
+import { TextProps } from "../../molecules";
 
 export interface TextInputProps extends Omit<ViewProps, "autoCorrect"> {
   autoCapitalize?: "characters" | "none" | "sentences" | "words";
+  theme?: TextProps["theme"];
   autoComplete?: string;
   autoCompleteType?: string; // Compat with React Native (Bug react-native#26003)
   autoCorrect?: boolean;

diff --git a/src/stories/src/base/textInput/index.stories.tsx b/src/stories/src/base/textInput/index.stories.tsx
@@ -19,14 +19,14 @@ const Template: Story<TextInputProps> = (args) => (
 export const Regular = Template.bind({});
 
 Regular.args = {
-  placeholder: "placeholder",
+  placeholder: "متن پس زمینه",
   placeholderTextColor: "red",
 };
 
 export const Multiline = Template.bind({});
 
 Multiline.args = {
-  placeholder: "placeholder",
+  placeholder: "متن پس زمینه",
   numberOfLines: 2,
   multiline: true,
 };