From 95f3cf428c3aebb9b344dd751aeda989756449b5 Mon Sep 17 00:00:00 2001
From: sieu-db <sieu@draftbit.com>
Date: Sun, 18 Aug 2024 23:22:13 +0700
Subject: [PATCH] add selectable text component

---
 example/src/App.tsx                           |  2 +
 example/src/SelectableTextExample.tsx         | 24 +++++++++
 .../core/src/components/SelectableText.tsx    | 50 +++++++++++++++++++
 packages/core/src/index.tsx                   |  1 +
 packages/ui/src/index.tsx                     |  1 +
 5 files changed, 78 insertions(+)
 create mode 100644 example/src/SelectableTextExample.tsx
 create mode 100644 packages/core/src/components/SelectableText.tsx

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 6727af133..390b258a2 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -74,8 +74,10 @@ import PinInputExample from "./PinInputExample";
 import KeyboardAvoidingViewExample from "./KeyboardAvoidingViewExample";
 import ThemeExample from "./ThemeExample";
 import LoadingIndicatorExample from "./LoadingIndicatorExample";
+import SelectableTextExample from "./SelectableTextExample";
 
 const ROUTES = {
+  SelectableText: SelectableTextExample,
   LoadingIndicator: LoadingIndicatorExample,
   Theme: ThemeExample,
   AudioPlayer: AudioPlayerExample,
diff --git a/example/src/SelectableTextExample.tsx b/example/src/SelectableTextExample.tsx
new file mode 100644
index 000000000..93b8b12da
--- /dev/null
+++ b/example/src/SelectableTextExample.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { SelectableText, withTheme } from "@draftbit/ui";
+import Section, { Container } from "./Section";
+
+const SelectableTextExample: React.FC = () => {
+  return (
+    <Container style={{}}>
+      <Section style={{}} title="Default">
+        <SelectableText text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." />
+      </Section>
+      <Section style={{}} title="With styling">
+        <SelectableText
+          text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+          style={{
+            fontSize: 30,
+            fontWeight: "bold",
+          }}
+        />
+      </Section>
+    </Container>
+  );
+};
+
+export default withTheme(SelectableTextExample);
diff --git a/packages/core/src/components/SelectableText.tsx b/packages/core/src/components/SelectableText.tsx
new file mode 100644
index 000000000..9aca3796c
--- /dev/null
+++ b/packages/core/src/components/SelectableText.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import {
+  Platform,
+  TextInput,
+  Text,
+  TextStyle,
+  I18nManager,
+  StyleSheet,
+  TextInputProps,
+  TextProps,
+  StyleProp,
+} from "react-native";
+
+type Props = {
+  style?: StyleProp<TextStyle>;
+  text?: string;
+} & (TextInputProps | TextProps);
+
+const SelectableText: React.FC<Props> = ({ style, text, ...rest }) => {
+  const writingDirection: "auto" | "ltr" | "rtl" = I18nManager.isRTL
+    ? "rtl"
+    : "ltr";
+
+  const baseStyle = [styles.baseText, { writingDirection }, style];
+  if (Platform.OS === "ios") {
+    return (
+      <TextInput
+        {...rest}
+        value={text}
+        editable={false}
+        scrollEnabled={false}
+        multiline
+        style={baseStyle}
+      />
+    );
+  }
+  return (
+    <Text {...rest} selectable style={baseStyle}>
+      {text}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  baseText: {
+    textAlign: "left",
+  },
+});
+
+export default SelectableText;
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
index d520e40ae..1427e346a 100644
--- a/packages/core/src/index.tsx
+++ b/packages/core/src/index.tsx
@@ -80,6 +80,7 @@ export { default as SimpleStyleScrollView } from "./components/SimpleStyleScroll
 export { default as SimpleStyleSectionList } from "./components/SimpleStyleScrollables/SimpleStyleSectionList";
 export { default as SimpleStyleSwipeableList } from "./components/SimpleStyleScrollables/SimpleStyleSwipeableList";
 export { default as LoadingIndicator } from "./components/LoadingIndicator";
+export { default as SelectableText } from "./components/SelectableText";
 
 /* Deprecated: Fix or Delete!  */
 export { default as AccordionItem } from "./deprecated-components/AccordionItem";
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index cba761dd6..3af2cfd62 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -76,6 +76,7 @@ export {
   SimpleStyleSectionList,
   SimpleStyleSwipeableList,
   LoadingIndicator,
+  SelectableText,
 } from "@draftbit/core";
 
 export {