@draftbit/core 49.3.2-dd8f44.2 → 49.4.0

package/src/components/SimpleStyleScrollables/useSplitContentContainerStyles.ts

@@ -0,0 +1,60 @@
+import { StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { pick, omit } from "lodash";
+import { useDeepCompareMemo } from "../../utilities";
+
+interface Styles {
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export const contentContainerStyleNames = [
+  "padding",
+  "paddingBottom",
+  "paddingEnd",
+  "paddingHorizontal",
+  "paddingLeft",
+  "paddingRight",
+  "paddingStart",
+  "paddingTop",
+  "paddingVertical",
+  "justifyContent",
+  "alignItems",
+  "alignContent",
+  "flexDirection",
+  "flexWrap",
+];
+
+export default function useSplitContentContainerStyles(
+  originalStyle: StyleProp<ViewStyle>,
+  measuredWidth?: number,
+  measuredHeight?: number
+) {
+  return useDeepCompareMemo<Styles>(() => {
+    const flattenedStyle = StyleSheet.flatten(originalStyle);
+
+    let contentContainerStyle = pick(
+      flattenedStyle,
+      contentContainerStyleNames
+    );
+
+    // contentContainerStyle should always at least fill the parent to ensure sizing changes reflects properly on component and children
+    if (measuredWidth) {
+      contentContainerStyle.minWidth = measuredWidth;
+    }
+    if (measuredHeight) {
+      contentContainerStyle.minHeight = measuredHeight;
+    }
+
+    let style = omit(flattenedStyle, contentContainerStyleNames);
+
+    // ScrollView's implementation defaults flexGrow to 1, which prevents the ability to set a static size or use a flex larger than 1
+    // See: https://github.com/facebook/react-native/issues/3422
+    if (style.flex === undefined) {
+      style = { flexGrow: 0, ...style };
+    } else if (style.flexGrow === undefined) {
+      style = { flexGrow: style.flex, ...style };
+    }
+
+    return { style, contentContainerStyle };
+  }, [originalStyle, measuredWidth, measuredHeight]);
+}

package/src/components/TextInput.js

@@ -1,14 +1,18 @@
 import React from "react";
-import { TextInput as NativeTextInput, } from "react-native";
+import { TextInput as NativeTextInput, Platform, } from "react-native";
 import { useDebounce, useOnUpdate } from "../hooks";
-const TextInput = React.forwardRef(({ onChangeTextDelayed, changeTextDelay = 500, value, ...rest }, ref) => {
+const TextInput = React.forwardRef(({ onChangeTextDelayed, changeTextDelay = 500, webShowOutline = true, style, value, ...rest }, ref) => {
     const delayedValue = useDebounce(value, changeTextDelay);
     useOnUpdate(() => {
         if (delayedValue !== undefined) {
             onChangeTextDelayed === null || onChangeTextDelayed === void 0 ? void 0 : onChangeTextDelayed(delayedValue);
         }
     }, [delayedValue]);
-    return (React.createElement(NativeTextInput, { testID: "native-text-input", ref: ref, value: value, ...rest }));
+    return (React.createElement(NativeTextInput, { testID: "native-text-input", ref: ref, value: value, style: [
+            //@ts-ignore Web specific prop. Removes default blue outline that appears on the hidden TextInput
+            Platform.OS === "web" && !webShowOutline ? { outlineWidth: 0 } : {},
+            style,
+        ], ...rest }));
 });
 export default TextInput;
 //# sourceMappingURL=TextInput.js.map

package/src/components/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,SAAS,IAAI,eAAe,GAE7B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAOpD,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAChC,CAAC,EAAE,mBAAmB,EAAE,eAAe,GAAG,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IAEzD,WAAW,CAAC,GAAG,EAAE;QACf,IAAI,YAAY,KAAK,SAAS,EAAE;YAC9B,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,YAAY,CAAC,CAAC;SACrC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,oBAAC,eAAe,IACd,MAAM,EAAC,mBAAmB,EAC1B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,KACR,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,SAAS,IAAI,eAAe,EAE5B,QAAQ,GACT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQpD,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAChC,CACE,EACE,mBAAmB,EACnB,eAAe,GAAG,GAAG,EACrB,cAAc,GAAG,IAAI,EACrB,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IAEzD,WAAW,CAAC,GAAG,EAAE;QACf,IAAI,YAAY,KAAK,SAAS,EAAE;YAC9B,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,YAAY,CAAC,CAAC;SACrC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,oBAAC,eAAe,IACd,MAAM,EAAC,mBAAmB,EAC1B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;YACL,iGAAiG;YACjG,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;YACnE,KAAK;SACN,KACG,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/src/components/TextInput.tsx

@@ -2,16 +2,28 @@ import React from "react";
 import {
   TextInput as NativeTextInput,
   TextInputProps as NativeTextInputProps,
+  Platform,
 } from "react-native";
 import { useDebounce, useOnUpdate } from "../hooks";
 
 export interface TextInputProps extends NativeTextInputProps {
+  webShowOutline?: boolean;
   onChangeTextDelayed?: (text: string) => void;
   changeTextDelay?: number;
 }
 
 const TextInput = React.forwardRef<NativeTextInput, TextInputProps>(
-  ({ onChangeTextDelayed, changeTextDelay = 500, value, ...rest }, ref) => {
+  (
+    {
+      onChangeTextDelayed,
+      changeTextDelay = 500,
+      webShowOutline = true,
+      style,
+      value,
+      ...rest
+    },
+    ref
+  ) => {
     const delayedValue = useDebounce(value, changeTextDelay);
 
     useOnUpdate(() => {
@@ -25,6 +37,11 @@ const TextInput = React.forwardRef<NativeTextInput, TextInputProps>(
         testID="native-text-input"
         ref={ref}
         value={value}
+        style={[
+          //@ts-ignore Web specific prop. Removes default blue outline that appears on the hidden TextInput
+          Platform.OS === "web" && !webShowOutline ? { outlineWidth: 0 } : {},
+          style,
+        ]}
         {...rest}
       />
     );

package/lib/commonjs/components/SimpleStyleScrollables/splitContentContainerStyles.js

@@ -1 +0,0 @@
-import{StyleSheet}from"react-native";import{pick,omit}from"lodash";export var contentContainerStyleNames=["padding","paddingBottom","paddingEnd","paddingHorizontal","paddingLeft","paddingRight","paddingStart","paddingTop","paddingVertical","justifyContent","alignItems","alignContent","flexDirection","flexWrap"];export default function splitContentContainerStyles(originalStyle){var flattenedStyle=StyleSheet.flatten(originalStyle);var contentContainerStyle=pick(flattenedStyle,contentContainerStyleNames);contentContainerStyle=Object.assign({minHeight:"100%",minWidth:"100%"},contentContainerStyle);var style=omit(flattenedStyle,contentContainerStyleNames);style=Object.assign({flexGrow:0},style);return{style:style,contentContainerStyle:contentContainerStyle};}

package/lib/typescript/src/components/SimpleStyleScrollables/splitContentContainerStyles.d.ts

@@ -1,6 +0,0 @@
-import { StyleProp, ViewStyle } from "react-native";
-export declare const contentContainerStyleNames: string[];
-export default function splitContentContainerStyles(originalStyle: StyleProp<ViewStyle>): {
-    style: Partial<ViewStyle>;
-    contentContainerStyle: Partial<ViewStyle>;
-};

package/lib/typescript/src/components/SimpleStyleScrollables/splitContentContainerStyles.js

@@ -1,34 +0,0 @@
-import { StyleSheet } from "react-native";
-import { pick, omit } from "lodash";
-export const contentContainerStyleNames = [
-    "padding",
-    "paddingBottom",
-    "paddingEnd",
-    "paddingHorizontal",
-    "paddingLeft",
-    "paddingRight",
-    "paddingStart",
-    "paddingTop",
-    "paddingVertical",
-    "justifyContent",
-    "alignItems",
-    "alignContent",
-    "flexDirection",
-    "flexWrap",
-];
-export default function splitContentContainerStyles(originalStyle) {
-    const flattenedStyle = StyleSheet.flatten(originalStyle);
-    let contentContainerStyle = pick(flattenedStyle, contentContainerStyleNames);
-    // contentContainerStyle should always at least fill the parent to ensure sizing changes reflects properly on component and children
-    contentContainerStyle = {
-        minHeight: "100%",
-        minWidth: "100%",
-        ...contentContainerStyle,
-    };
-    let style = omit(flattenedStyle, contentContainerStyleNames);
-    // ScrollView's implementation defaults flexGrow to 1, which prevents the ability to set a static size
-    // See: https://github.com/facebook/react-native/issues/3422
-    style = { flexGrow: 0, ...style };
-    return { style, contentContainerStyle };
-}
-//# sourceMappingURL=splitContentContainerStyles.js.map

package/lib/typescript/src/components/SimpleStyleScrollables/splitContentContainerStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"splitContentContainerStyles.js","sourceRoot":"","sources":["../../../../../src/components/SimpleStyleScrollables/splitContentContainerStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,UAAU,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEpC,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,SAAS;IACT,eAAe;IACf,YAAY;IACZ,mBAAmB;IACnB,aAAa;IACb,cAAc;IACd,cAAc;IACd,YAAY;IACZ,iBAAiB;IACjB,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,eAAe;IACf,UAAU;CACX,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,2BAA2B,CACjD,aAAmC;IAEnC,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAEzD,IAAI,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,0BAA0B,CAAC,CAAC;IAC7E,oIAAoI;IACpI,qBAAqB,GAAG;QACtB,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,MAAM;QAChB,GAAG,qBAAqB;KACzB,CAAC;IAEF,IAAI,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,0BAA0B,CAAC,CAAC;IAC7D,sGAAsG;IACtG,4DAA4D;IAC5D,KAAK,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IAElC,OAAO,EAAE,KAAK,EAAE,qBAAqB,EAAE,CAAC;AAC1C,CAAC"}

package/src/components/SimpleStyleScrollables/splitContentContainerStyles.js

@@ -1,34 +0,0 @@
-import { StyleSheet } from "react-native";
-import { pick, omit } from "lodash";
-export const contentContainerStyleNames = [
-    "padding",
-    "paddingBottom",
-    "paddingEnd",
-    "paddingHorizontal",
-    "paddingLeft",
-    "paddingRight",
-    "paddingStart",
-    "paddingTop",
-    "paddingVertical",
-    "justifyContent",
-    "alignItems",
-    "alignContent",
-    "flexDirection",
-    "flexWrap",
-];
-export default function splitContentContainerStyles(originalStyle) {
-    const flattenedStyle = StyleSheet.flatten(originalStyle);
-    let contentContainerStyle = pick(flattenedStyle, contentContainerStyleNames);
-    // contentContainerStyle should always at least fill the parent to ensure sizing changes reflects properly on component and children
-    contentContainerStyle = {
-        minHeight: "100%",
-        minWidth: "100%",
-        ...contentContainerStyle,
-    };
-    let style = omit(flattenedStyle, contentContainerStyleNames);
-    // ScrollView's implementation defaults flexGrow to 1, which prevents the ability to set a static size
-    // See: https://github.com/facebook/react-native/issues/3422
-    style = { flexGrow: 0, ...style };
-    return { style, contentContainerStyle };
-}
-//# sourceMappingURL=splitContentContainerStyles.js.map

package/src/components/SimpleStyleScrollables/splitContentContainerStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"splitContentContainerStyles.js","sourceRoot":"","sources":["splitContentContainerStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,UAAU,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEpC,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,SAAS;IACT,eAAe;IACf,YAAY;IACZ,mBAAmB;IACnB,aAAa;IACb,cAAc;IACd,cAAc;IACd,YAAY;IACZ,iBAAiB;IACjB,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,eAAe;IACf,UAAU;CACX,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,2BAA2B,CACjD,aAAmC;IAEnC,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAEzD,IAAI,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,0BAA0B,CAAC,CAAC;IAC7E,oIAAoI;IACpI,qBAAqB,GAAG;QACtB,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,MAAM;QAChB,GAAG,qBAAqB;KACzB,CAAC;IAEF,IAAI,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,0BAA0B,CAAC,CAAC;IAC7D,sGAAsG;IACtG,4DAA4D;IAC5D,KAAK,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IAElC,OAAO,EAAE,KAAK,EAAE,qBAAqB,EAAE,CAAC;AAC1C,CAAC"}

package/src/components/SimpleStyleScrollables/splitContentContainerStyles.ts

@@ -1,40 +0,0 @@
-import { StyleProp, ViewStyle, StyleSheet } from "react-native";
-import { pick, omit } from "lodash";
-
-export const contentContainerStyleNames = [
-  "padding",
-  "paddingBottom",
-  "paddingEnd",
-  "paddingHorizontal",
-  "paddingLeft",
-  "paddingRight",
-  "paddingStart",
-  "paddingTop",
-  "paddingVertical",
-  "justifyContent",
-  "alignItems",
-  "alignContent",
-  "flexDirection",
-  "flexWrap",
-];
-
-export default function splitContentContainerStyles(
-  originalStyle: StyleProp<ViewStyle>
-) {
-  const flattenedStyle = StyleSheet.flatten(originalStyle);
-
-  let contentContainerStyle = pick(flattenedStyle, contentContainerStyleNames);
-  // contentContainerStyle should always at least fill the parent to ensure sizing changes reflects properly on component and children
-  contentContainerStyle = {
-    minHeight: "100%",
-    minWidth: "100%",
-    ...contentContainerStyle,
-  };
-
-  let style = omit(flattenedStyle, contentContainerStyleNames);
-  // ScrollView's implementation defaults flexGrow to 1, which prevents the ability to set a static size
-  // See: https://github.com/facebook/react-native/issues/3422
-  style = { flexGrow: 0, ...style };
-
-  return { style, contentContainerStyle };
-}