@tellescope/react-components 1.194.0 → 1.196.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.194.0",
+  "version": "1.196.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.194.0",
-    "@tellescope/sdk": "^1.194.0",
-    "@tellescope/types-client": "^1.194.0",
-    "@tellescope/types-models": "^1.194.0",
-    "@tellescope/types-utilities": "^1.194.0",
-    "@tellescope/utilities": "^1.194.0",
-    "@tellescope/validation": "^1.194.0",
+    "@tellescope/constants": "^1.196.0",
+    "@tellescope/sdk": "^1.196.0",
+    "@tellescope/types-client": "^1.196.0",
+    "@tellescope/types-models": "^1.196.0",
+    "@tellescope/types-utilities": "^1.196.0",
+    "@tellescope/utilities": "^1.196.0",
+    "@tellescope/validation": "^1.196.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -84,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "aef702a95cf13209de35fc09eb6a628c10db0007",
+  "gitHead": "5775521d0ee6a92be5139fb0466772d40ab4d0af",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/inputs.tsx

@@ -1589,6 +1589,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
   const [stripePromise, setStripePromise] = useState<ReturnType<typeof loadStripe>>()
   const [, { findById: findProduct }] = useProducts({ dontFetch: true })
   const [answertext, setAnswertext] = useState('')
+  const [error, setError] = useState('')
 
   const fetchRef = useRef(false)
   useEffect(() => {
@@ -1607,7 +1608,12 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
       setBusinessName(businessName)
       setCustomerId(customerId)
     })
-    .catch(console.error)
+    .catch((e: any) => {
+      console.error(e)
+      if (typeof e?.message === 'string') {
+        setError(e.message)
+      }
+    })
   }, [session, value, field.id])
 
   const cost = (
@@ -1615,6 +1621,13 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
     .reduce((t, p) => t + (p?.cost?.amount || 0), 0)
   )
 
+  if (error) {
+    return (
+      <Typography color="error">
+        {error}
+      </Typography>
+    )
+  }
   if (value) {
     return (
       <Grid container alignItems="center" wrap="nowrap">
@@ -3384,7 +3397,7 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
 }
 
 export const RichTextInput = ({ field, value, onChange }: FormInputProps<'Rich Text'>) => (
-  <WYSIWYG initialHTML={value} onChange={v => onChange(v, field.id)} style={{ width: '100%' }} editorStyle={{ width: '100%' }} />
+  <WYSIWYG stopEnterPropagation initialHTML={value} onChange={v => onChange(v, field.id)} style={{ width: '100%' }} editorStyle={{ width: '100%' }} />
 )
 
 export const ChargeebeeInput = ({ field, value, onChange, setCustomerId }: FormInputProps<'Chargebee'> & { 

package/src/Forms/wysiwyg.tsx

@@ -167,11 +167,12 @@ const getToolbar = ({ hideEmoji } : { hideEmoji?: boolean }) => ({
 
 
 
-export const WYSIWYG = ({ updateHtml, initialHTML: _initialHTML='', autoFocus, onChange, style, editorStyle, hideEmoji } : { 
+export const WYSIWYG = ({ stopEnterPropagation, updateHtml, initialHTML: _initialHTML='', autoFocus, onChange, style, editorStyle, hideEmoji } : { 
   initialHTML?: string, onChange: (html: string) => void, autoFocus?: boolean,
   editorStyle?: React.CSSProperties,
   hideEmoji?: boolean,
   updateHtml?: string,
+  stopEnterPropagation?: boolean,
 } & Styled) => {
   const trimmed = _initialHTML.trim()
   const initialHTML = (
@@ -228,6 +229,12 @@ export const WYSIWYG = ({ updateHtml, initialHTML: _initialHTML='', autoFocus, o
         editorClassName="demo-editor"
         onEditorStateChange={setEditorState}
         toolbar={toolbar} 
+        handleReturn={e => {
+          if (stopEnterPropagation) {
+            e.stopPropagation()
+          }
+          return false // not handled (allow editor to update)
+        }}
       />
     </Paper>
   )  

package/src/state.tsx

@@ -543,6 +543,7 @@ export const lastDataSync = { current : { numResults: 0, at: new Date(0), from:
 export const useDataSync____internal = () => {
   const session = useSession()
   const lastFetch = React.useRef(new Date())
+  const lastError = React.useRef(0)
   const loadTimings = React.useRef({ } as { [index: string]: number })
   const loaded = React.useRef({ } as { [K in string]?: ClientModelForName[keyof ClientModelForName][] })
   const deleted = React.useRef({ } as { [K in string]?: string[] })
@@ -596,6 +597,11 @@ export const useDataSync____internal = () => {
         return
       }
 
+      // 5 second delay when hitting errors intead of immediate retry
+      if (lastError.current > Date.now() - 1000 * 5) {
+        return
+      }
+
       // ensure we don't miss updates due to latency
       const from = new Date(lastFetch.current.getTime() - 3000) // large leeway could result in same data being fetched twice, but helps ensure nothing is dropped
       lastFetch.current = new Date() // update before syncing, not after it returns
@@ -631,6 +637,7 @@ export const useDataSync____internal = () => {
       .catch(err => {
         console.error('Sync error', err)
         lastFetch.current = from // don't skip this interval yet
+        lastError.current = Date.now()
       })
     }, 1000)
 

package/src/table.tsx

@@ -105,6 +105,8 @@ type LocalFilter = {
   valuesQualifier?: ListQueryQualifier,
 }
 
+const COLUMN_RESIZE_HANDLE_WIDTH = 3
+
 // export type SortType = 'infer'
 export type Sorting = {
   field: string,
@@ -358,7 +360,7 @@ export const TableHeader = <T extends Item>({
                 }}
               >
                 <div style={{ 
-                  width: '3px',
+                  width: COLUMN_RESIZE_HANDLE_WIDTH, marginLeft: -COLUMN_RESIZE_HANDLE_WIDTH,
                   height: '30px', 
                   backgroundColor: '#22222266', 
                   cursor: 'col-resize', 
@@ -457,7 +459,7 @@ export const TableRow = <T extends Item>({
         />
         </Flex>
       }
-      <Flex flex={1} wrap="nowrap">
+      <Flex flex={1} wrap="nowrap" style={{ overflow: 'hidden'}}>
       {fields.map(({ key, width, textAlign='left', render, hidden, style }, i) => hidden ? null : (
         <Flex key={key} flex={width !== undefined ? 0 : 1} style={{ 
           alignItems: 'center',
@@ -497,6 +499,7 @@ export interface PaginationOptions<T> {
   pageSize?: number;
   initialPage?: number;
   pageMemoryId?: string,
+  showLoadAll?: boolean,
 }
 export interface PaginationProps<T> extends PaginationOptions<T> {
   items: T[];
@@ -566,6 +569,7 @@ export const usePagination = <T,>({ paginated=true, items, pageMemoryId, pageSiz
 
 export interface TableFooterProps <T> extends Styled, HorizontalPadded, Partial<LoadMoreFunctions<T>>, ReturnType<typeof usePagination> {
   loadMoreOptions?: LoadMoreOptions<T>,
+  showLoadAll?: boolean,
 }
 export const TableFooter = <T,>({ horizontalPadding, style, previousDisabled, nextDisabled, selectedPage, numPages, goToNext, goToPrevious } : TableFooterProps<T>) => {
   return (
@@ -606,7 +610,7 @@ const resolve_middle_page_numbers = (selectedPage: number, numPages: number): [u
 }
 
 const FOOTER_BUTTON_SIZE = 30
-export const TableFooterNumbered = <T,>({ horizontalPadding, loadMore, loadMoreOptions, doneLoading, style, previousDisabled, nextDisabled, selectedPage, numPages, goToNext, goToPrevious, goToPage } : TableFooterProps<T>) => {
+export const TableFooterNumbered = <T,>({ showLoadAll, horizontalPadding, loadMore, loadMoreOptions, doneLoading, style, previousDisabled, nextDisabled, selectedPage, numPages, goToNext, goToPrevious, goToPage } : TableFooterProps<T>) => {
   const [middleLeft, middle, middleRight] = resolve_middle_page_numbers(selectedPage, numPages)
 
   const buttonProps = { 
@@ -677,6 +681,18 @@ export const TableFooterNumbered = <T,>({ horizontalPadding, loadMore, loadMoreO
           <NavigateNextIcon/>
         </Button>
 
+        {showLoadAll &&
+          <LoadingButton variant="outlined" submitText="Load All" submittingText="Loading..."
+            style={{ width: 175, height: 32, marginLeft: 5 }}
+            disabled={doneLoading?.()} 
+            onClick={async () => {
+              while (!doneLoading?.()) {
+                await loadMore?.(loadMoreOptions)
+              }
+            }} 
+          />
+        }
+
 
         <Typography style={{ fontSize: 12, marginLeft: 'auto' }}>
           Page {selectedPage + 1} of {numPages}
@@ -1143,7 +1159,7 @@ export const Table = <T extends Item>({
       } />
 
       {paginated && FooterComponent && items.length > 0 && // avoid displaying footer / unnecessary border when no items
-        <FooterComponent doneLoading={doneLoading} loadMore={loadMore} loadMoreOptions={loadMoreOptions} {...paginationProps } {...pageOptions} horizontalPadding={horizontalPadding}/>
+        <FooterComponent showLoadAll={pageOptions.showLoadAll} doneLoading={doneLoading} loadMore={loadMore} loadMoreOptions={loadMoreOptions} {...paginationProps } {...pageOptions} horizontalPadding={horizontalPadding}/>
       }
     </Flex>
   )