@planningcenter/chat-react-native 4.3.0-rc.7 → 4.3.0-rc.8

package/build/screens/search/components/search_field.d.ts

@@ -0,0 +1,7 @@
+interface SearchFieldProps {
+    term: string;
+    onChange: (term: string) => void;
+}
+export declare function SearchField({ term, onChange }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=search_field.d.ts.map

package/build/screens/search/components/search_field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_field.d.ts","sourceRoot":"","sources":["../../../../src/screens/search/components/search_field.tsx"],"names":[],"mappings":"AAQA,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAwC/D"}

package/build/screens/search/components/search_field.js

@@ -0,0 +1,152 @@
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Icon } from '../../../components';
+import { AutoFocusAwareTextInput } from '../../../components/display/text_input';
+import { useTheme } from '../../../hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PLACEHOLDER = 'Search titles and messages';
+export function SearchField(t0) {
+  const $ = _c(21);
+  const {
+    term,
+    onChange
+  } = t0;
+  const styles = useStyles();
+  const {
+    colors
+  } = useTheme();
+  const inputRef = useRef(null);
+  let t1;
+  if ($[0] !== onChange) {
+    t1 = () => {
+      onChange("");
+      inputRef.current?.clear();
+      inputRef.current?.focus();
+    };
+    $[0] = onChange;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const clear = t1;
+  let t2;
+  if ($[2] !== colors.iconColorDefaultSecondary) {
+    t2 = /*#__PURE__*/_jsx(Icon, {
+      name: "general.search",
+      size: 16,
+      color: colors.iconColorDefaultSecondary
+    });
+    $[2] = colors.iconColorDefaultSecondary;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== colors.textColorDefaultPlaceholder || $[5] !== onChange || $[6] !== styles.input || $[7] !== term) {
+    t3 = /*#__PURE__*/_jsx(AutoFocusAwareTextInput, {
+      autoFocus: true,
+      autoCorrect: false,
+      inputRef: inputRef,
+      placeholder: PLACEHOLDER,
+      placeholderTextColor: colors.textColorDefaultPlaceholder,
+      accessibilityLabel: PLACEHOLDER,
+      value: term,
+      onChangeText: onChange,
+      returnKeyType: "search",
+      style: styles.input
+    });
+    $[4] = colors.textColorDefaultPlaceholder;
+    $[5] = onChange;
+    $[6] = styles.input;
+    $[7] = term;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== clear || $[10] !== colors.iconColorDefaultSecondary || $[11] !== term.length) {
+    t4 = term.length > 0 && /*#__PURE__*/_jsx(Pressable, {
+      onPress: clear,
+      hitSlop: 8,
+      accessibilityRole: "button",
+      accessibilityLabel: "Clear search",
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "general.x",
+        size: 12,
+        color: colors.iconColorDefaultSecondary
+      })
+    });
+    $[9] = clear;
+    $[10] = colors.iconColorDefaultSecondary;
+    $[11] = term.length;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== styles.field || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+    t5 = /*#__PURE__*/_jsxs(View, {
+      style: styles.field,
+      children: [t2, t3, t4]
+    });
+    $[13] = styles.field;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  let t6;
+  if ($[18] !== styles.container || $[19] !== t5) {
+    t6 = /*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: t5
+    });
+    $[18] = styles.container;
+    $[19] = t5;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  return t6;
+}
+const useStyles = () => {
+  const $ = _c(3);
+  const {
+    colors
+  } = useTheme();
+  let t0;
+  if ($[0] !== colors.borderColorDefaultBase || $[1] !== colors.textColorDefaultPrimary) {
+    t0 = StyleSheet.create({
+      container: {
+        paddingHorizontal: 16,
+        paddingVertical: 8
+      },
+      field: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        borderWidth: 1,
+        borderColor: colors.borderColorDefaultBase,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 8
+      },
+      input: {
+        flex: 1,
+        color: colors.textColorDefaultPrimary,
+        fontSize: 16,
+        paddingVertical: 2
+      }
+    });
+    $[0] = colors.borderColorDefaultBase;
+    $[1] = colors.textColorDefaultPrimary;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+};
+//# sourceMappingURL=search_field.js.map

package/build/screens/search/components/search_field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_field.js","names":["useRef","Pressable","StyleSheet","View","Icon","AutoFocusAwareTextInput","useTheme","jsx","_jsx","jsxs","_jsxs","PLACEHOLDER","SearchField","t0","$","_c","term","onChange","styles","useStyles","colors","inputRef","t1","current","clear","focus","t2","iconColorDefaultSecondary","name","size","color","t3","textColorDefaultPlaceholder","input","autoFocus","autoCorrect","placeholderTextColor","returnKeyType","style","t4","length","hitSlop","accessibilityRole","accessibilityLabel","children","t5","field","t6","container","borderColorDefaultBase","textColorDefaultPrimary","create","paddingHorizontal","paddingVertical","flexDirection","alignItems","gap","borderWidth","borderColor","borderRadius","flex","fontSize"],"sources":["../../../../src/screens/search/components/search_field.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { Pressable, StyleSheet, TextInput, View } from 'react-native'\nimport { Icon } from '../../../components'\nimport { AutoFocusAwareTextInput } from '../../../components/display/text_input'\nimport { useTheme } from '../../../hooks'\n\nconst PLACEHOLDER = 'Search titles and messages'\n\ninterface SearchFieldProps {\n  term: string\n  onChange: (term: string) => void\n}\n\nexport function SearchField({ term, onChange }: SearchFieldProps) {\n  const styles = useStyles()\n  const { colors } = useTheme()\n  const inputRef = useRef<TextInput>(null)\n\n  const clear = () => {\n    onChange('')\n    inputRef.current?.clear()\n    inputRef.current?.focus()\n  }\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.field}>\n        <Icon name=\"general.search\" size={16} color={colors.iconColorDefaultSecondary} />\n        <AutoFocusAwareTextInput\n          autoFocus\n          autoCorrect={false}\n          inputRef={inputRef}\n          placeholder={PLACEHOLDER}\n          placeholderTextColor={colors.textColorDefaultPlaceholder}\n          accessibilityLabel={PLACEHOLDER}\n          value={term}\n          onChangeText={onChange}\n          returnKeyType=\"search\"\n          style={styles.input}\n        />\n        {term.length > 0 && (\n          <Pressable\n            onPress={clear}\n            hitSlop={8}\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Clear search\"\n          >\n            <Icon name=\"general.x\" size={12} color={colors.iconColorDefaultSecondary} />\n          </Pressable>\n        )}\n      </View>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      paddingHorizontal: 16,\n      paddingVertical: 8,\n    },\n    field: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n      borderWidth: 1,\n      borderColor: colors.borderColorDefaultBase,\n      borderRadius: 8,\n      paddingHorizontal: 12,\n      paddingVertical: 8,\n    },\n    input: {\n      flex: 1,\n      color: colors.textColorDefaultPrimary,\n      fontSize: 16,\n      paddingVertical: 2,\n    },\n  })\n}\n"],"mappings":"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","ignoreList":[]}

package/build/screens/search/search_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/search/search_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,EACvB,MAAM,gCAAgC,CAAA;AAQvC,eAAO,MAAM,mBAAmB,GAAI,iBAEjC,sBAAsB,CAAC,aAAa,CAAC,KAAG,4BAIxC,CAAA;AAEH,wBAAgB,YAAY,4CAE3B"}
+{"version":3,"file":"search_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/search/search_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,EACvB,MAAM,gCAAgC,CAAA;AAUvC,eAAO,MAAM,mBAAmB,GAAI,iBAEjC,sBAAsB,CAAC,aAAa,CAAC,KAAG,4BAIxC,CAAA;AAEH,wBAAgB,YAAY,4CAU3B"}

package/build/screens/search/search_screen.js

@@ -1,7 +1,9 @@
 import { c as _c } from "react/compiler-runtime";
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
+import { KeyboardView } from '../../components';
 import { composeOptions, withMinimalBack } from '../../components/display/platform_modal_header_buttons';
+import { SearchField } from './components/search_field';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SearchScreenOptions = ({
   navigation
@@ -12,16 +14,24 @@ export const SearchScreenOptions = ({
   onPress: () => navigation.goBack()
 }));
 export function SearchScreen() {
-  const $ = _c(1);
+  const $ = _c(2);
+  const [term, setTerm] = useState("");
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = /*#__PURE__*/_jsx(View, {
-      style: styles.container,
-      testID: "search-screen"
+  if ($[0] !== term) {
+    t0 = /*#__PURE__*/_jsx(KeyboardView, {
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.container,
+        testID: "search-screen",
+        children: /*#__PURE__*/_jsx(SearchField, {
+          term: term,
+          onChange: setTerm
+        })
+      })
     });
-    $[0] = t0;
+    $[0] = term;
+    $[1] = t0;
   } else {
-    t0 = $[0];
+    t0 = $[1];
   }
   return t0;
 }

package/build/screens/search/search_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"search_screen.js","names":["React","StyleSheet","View","composeOptions","withMinimalBack","jsx","_jsx","SearchScreenOptions","navigation","title","animation","onPress","goBack","SearchScreen","$","_c","t0","Symbol","for","style","styles","container","testID","create","flex"],"sources":["../../../src/screens/search/search_screen.tsx"],"sourcesContent":["import { ParamListBase } from '@react-navigation/native'\nimport {\n  NativeStackNavigationOptions,\n  NativeStackScreenProps,\n} from '@react-navigation/native-stack'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport {\n  composeOptions,\n  withMinimalBack,\n} from '../../components/display/platform_modal_header_buttons'\n\nexport const SearchScreenOptions = ({\n  navigation,\n}: NativeStackScreenProps<ParamListBase>): NativeStackNavigationOptions =>\n  composeOptions(\n    { title: 'Search', animation: 'fade' },\n    withMinimalBack({ onPress: () => navigation.goBack() })\n  )\n\nexport function SearchScreen() {\n  return <View style={styles.container} testID=\"search-screen\" />\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n})\n"],"mappings":";AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SACEC,cAAc,EACdC,eAAe,QACV,wDAAwD;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/D,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC;AACqC,CAAC,KACtCL,cAAc,CACZ;EAAEM,KAAK,EAAE,QAAQ;EAAEC,SAAS,EAAE;AAAO,CAAC,EACtCN,eAAe,CAAC;EAAEO,OAAO,EAAEA,CAAA,KAAMH,UAAU,CAACI,MAAM,CAAC;AAAE,CAAC,CACxD,CAAC;AAEH,OAAO,SAAAC,aAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IACEF,EAAA,gBAAAV,IAAA,CAACJ,IAAI;MAAQiB,KAAgB,EAAhBC,MAAM,CAAAC,SAAU;MAASC,MAAe,EAAf;IAAe,CAAE,CAAC;IAAAR,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAAxDE,EAAwD;AAAA;AAGjE,MAAMI,MAAM,GAAGnB,UAAU,CAACsB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"search_screen.js","names":["React","useState","StyleSheet","View","KeyboardView","composeOptions","withMinimalBack","SearchField","jsx","_jsx","SearchScreenOptions","navigation","title","animation","onPress","goBack","SearchScreen","$","_c","term","setTerm","t0","children","style","styles","container","testID","create","flex"],"sources":["../../../src/screens/search/search_screen.tsx"],"sourcesContent":["import { ParamListBase } from '@react-navigation/native'\nimport {\n  NativeStackNavigationOptions,\n  NativeStackScreenProps,\n} from '@react-navigation/native-stack'\nimport React, { useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { KeyboardView } from '../../components'\nimport {\n  composeOptions,\n  withMinimalBack,\n} from '../../components/display/platform_modal_header_buttons'\nimport { SearchField } from './components/search_field'\n\nexport const SearchScreenOptions = ({\n  navigation,\n}: NativeStackScreenProps<ParamListBase>): NativeStackNavigationOptions =>\n  composeOptions(\n    { title: 'Search', animation: 'fade' },\n    withMinimalBack({ onPress: () => navigation.goBack() })\n  )\n\nexport function SearchScreen() {\n  const [term, setTerm] = useState('')\n\n  return (\n    <KeyboardView>\n      <View style={styles.container} testID=\"search-screen\">\n        <SearchField term={term} onChange={setTerm} />\n      </View>\n    </KeyboardView>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n})\n"],"mappings":";AAKA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SACEC,cAAc,EACdC,eAAe,QACV,wDAAwD;AAC/D,SAASC,WAAW,QAAQ,2BAA2B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEvD,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC;AACqC,CAAC,KACtCN,cAAc,CACZ;EAAEO,KAAK,EAAE,QAAQ;EAAEC,SAAS,EAAE;AAAO,CAAC,EACtCP,eAAe,CAAC;EAAEQ,OAAO,EAAEA,CAAA,KAAMH,UAAU,CAACI,MAAM,CAAC;AAAE,CAAC,CACxD,CAAC;AAEH,OAAO,SAAAC,aAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EACL,OAAAC,IAAA,EAAAC,OAAA,IAAwBnB,QAAQ,CAAC,EAAE,CAAC;EAAA,IAAAoB,EAAA;EAAA,IAAAJ,CAAA,QAAAE,IAAA;IAGlCE,EAAA,gBAAAZ,IAAA,CAACL,YAAY;MAAAkB,QAAA,eACXb,IAAA,CAACN,IAAI;QAAQoB,KAAgB,EAAhBC,MAAM,CAAAC,SAAU;QAASC,MAAe,EAAf,eAAe;QAAAJ,QAAA,eACnDb,IAAA,CAACF,WAAW;UAAOY,IAAI,EAAJA,IAAI;UAAYC,QAAO,EAAPA;QAAO,CAAG;MAAC,CAC1C;IAAC,CACK,CAAC;IAAAH,CAAA,MAAAE,IAAA;IAAAF,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,OAJfI,EAIe;AAAA;AAInB,MAAMG,MAAM,GAAGtB,UAAU,CAACyB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.3.0-rc.7",
+  "version": "4.3.0-rc.8",
   "description": "",
   "repository": {
     "type": "git",
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "0709c9d5b579af4f138ca1fd067b4e7f180768a6"
+  "gitHead": "9d2cec9da1b024a2b572d2b0cd07efd62a9460be"
 }

package/src/screens/search/components/__tests__/search_field.test.tsx

@@ -0,0 +1,29 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { SearchField } from '../search_field'
+
+const inputLabel = 'Search titles and messages'
+const clearLabel = 'Clear search'
+
+describe('SearchField', () => {
+  it('reports typed text through onChange', () => {
+    const onChange = jest.fn()
+    const view = render(<SearchField term="" onChange={onChange} />)
+
+    fireEvent.changeText(view.getByLabelText(inputLabel), 'budget')
+
+    expect(onChange).toHaveBeenCalledWith('budget')
+  })
+
+  it('shows the clear button only for a non-empty term and clears on press', () => {
+    const onChange = jest.fn()
+    const view = render(<SearchField term="" onChange={onChange} />)
+
+    expect(view.queryByLabelText(clearLabel)).toBeNull()
+
+    view.rerender(<SearchField term="budget" onChange={onChange} />)
+    fireEvent.press(view.getByLabelText(clearLabel))
+
+    expect(onChange).toHaveBeenCalledWith('')
+  })
+})

package/src/screens/search/components/search_field.tsx

@@ -0,0 +1,81 @@
+import { useRef } from 'react'
+import { Pressable, StyleSheet, TextInput, View } from 'react-native'
+import { Icon } from '../../../components'
+import { AutoFocusAwareTextInput } from '../../../components/display/text_input'
+import { useTheme } from '../../../hooks'
+
+const PLACEHOLDER = 'Search titles and messages'
+
+interface SearchFieldProps {
+  term: string
+  onChange: (term: string) => void
+}
+
+export function SearchField({ term, onChange }: SearchFieldProps) {
+  const styles = useStyles()
+  const { colors } = useTheme()
+  const inputRef = useRef<TextInput>(null)
+
+  const clear = () => {
+    onChange('')
+    inputRef.current?.clear()
+    inputRef.current?.focus()
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.field}>
+        <Icon name="general.search" size={16} color={colors.iconColorDefaultSecondary} />
+        <AutoFocusAwareTextInput
+          autoFocus
+          autoCorrect={false}
+          inputRef={inputRef}
+          placeholder={PLACEHOLDER}
+          placeholderTextColor={colors.textColorDefaultPlaceholder}
+          accessibilityLabel={PLACEHOLDER}
+          value={term}
+          onChangeText={onChange}
+          returnKeyType="search"
+          style={styles.input}
+        />
+        {term.length > 0 && (
+          <Pressable
+            onPress={clear}
+            hitSlop={8}
+            accessibilityRole="button"
+            accessibilityLabel="Clear search"
+          >
+            <Icon name="general.x" size={12} color={colors.iconColorDefaultSecondary} />
+          </Pressable>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+    },
+    field: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      borderWidth: 1,
+      borderColor: colors.borderColorDefaultBase,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+    },
+    input: {
+      flex: 1,
+      color: colors.textColorDefaultPrimary,
+      fontSize: 16,
+      paddingVertical: 2,
+    },
+  })
+}

package/src/screens/search/search_screen.tsx

@@ -3,12 +3,14 @@ import {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
-import React from 'react'
+import React, { useState } from 'react'
 import { StyleSheet, View } from 'react-native'
+import { KeyboardView } from '../../components'
 import {
   composeOptions,
   withMinimalBack,
 } from '../../components/display/platform_modal_header_buttons'
+import { SearchField } from './components/search_field'
 
 export const SearchScreenOptions = ({
   navigation,
@@ -19,7 +21,15 @@ export const SearchScreenOptions = ({
   )
 
 export function SearchScreen() {
-  return <View style={styles.container} testID="search-screen" />
+  const [term, setTerm] = useState('')
+
+  return (
+    <KeyboardView>
+      <View style={styles.container} testID="search-screen">
+        <SearchField term={term} onChange={setTerm} />
+      </View>
+    </KeyboardView>
+  )
 }
 
 const styles = StyleSheet.create({