@startlibs/components 1.0.3 → 1.1.0

package/src/ErrorBoundary.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import _ from 'lodash/fp'
+import {useUpdateEffect} from '@startlibs/core'
+import {postFetcher} from '@startlibs/utils'
+import {useLocation} from './Link'
+
+const ResetOnLocationChange = ({children,reset}) => {
+   const location = useLocation()
+  useUpdateEffect(() => {
+    reset()
+  }, [location]);
+  return children
+}
+export class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+      this.setState({hasError:false})
+    }
+    if (this.props.resetOn !== prevProps.resetOn) {
+      this.setState({hasError:false})
+    }
+  }
+
+  componentDidCatch(e, info) {
+    if (_.get([0],e) === 'login' && _.get([1,'status'],e) === 401) {
+      window.location = "/login"
+    }
+    if (e?.notFound) {
+      return;
+    }
+    var error = e && e.stack
+    try {
+      if (!e || !e.stack) {
+        error = JSON.stringify(e)
+      }
+    } catch (exception) {
+      error = e.toString()
+    }
+    if (!(/bot|spider|crawl/i.test(window.navigator.userAgent))) {
+      postFetcher("/log/errorBoundary", {
+        error,
+        message: e?.message,
+        name: e?.name,
+        componentStack: info?.componentStack,
+        url: window.location.href,
+      })
+    }
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error};
+  }
+
+  render() {
+    const {Error,children,...props} = this.props
+    const {hasError,error} = this.state
+    const reset =() => this.setState({hasError:false,error:null})
+    if (hasError) {
+      if (React.isValidElement(Error)) {
+        return <ResetOnLocationChange reset={reset}>{Error}</ResetOnLocationChange>
+      }
+      // You can render any custom fallback UI
+      return <ResetOnLocationChange reset={reset}><Error {...props} error={error} fixed={reset}/></ResetOnLocationChange>;
+    }
+    return children;
+  }
+}
+
+// StartlibsProvider.registerInternal('ErrorBoundary',ErrorBoundary)

package/src/FillLastLineResizer.jsx

@@ -0,0 +1,226 @@
+import React from 'react'
+import {isMobile} from '@startlibs/utils'
+
+const isNodeJunction = (nextNode) => nextNode && !nextNode.hasChangedLine && nextNode.words[0]!==''
+
+const calculateCanvasFillWidth = (nodes, maxWidth, ctx) => {
+  let lineCount = 0
+  let currentNodeLine = [];
+  let biggestWidth = 0
+
+  let previousWidth = 0;
+  let previousNodesLineWidth = 0
+  let currentMultiNodeWordWidth = 0
+
+  let lineWordsDebug = ''
+
+  nodes.forEach(({font,hasChangedLine,words}, nodeIndex) => {
+    ctx.font = font
+    const nextNode = nodes[nodeIndex+1]
+
+
+    words.forEach((word,wordIndex) => {
+      const {width} = ctx.measureText(currentNodeLine.concat(word || (currentNodeLine.length ? '' : ' ')).join(' '));
+      const realizedWidth = width + previousNodesLineWidth
+      const overflowed = realizedWidth >= maxWidth
+      const lastWord = wordIndex === words.length - 1
+      if (!overflowed) {
+        if (lastWord && (nextNode && !nextNode.hasChangedLine)) {
+          previousNodesLineWidth = realizedWidth
+          currentNodeLine = []
+          if (word!=='' && isNodeJunction(nextNode)) {
+            currentMultiNodeWordWidth +=  ctx.measureText(word || ' ').width
+          }
+        } else {
+          currentNodeLine.push(word);
+          currentMultiNodeWordWidth = 0;
+          biggestWidth = biggestWidth > realizedWidth ? biggestWidth : realizedWidth
+        }
+        lineWordsDebug += ' ' + word
+        previousWidth = realizedWidth;
+      } else {
+        lineCount++;
+        lineWordsDebug = ''
+        if (lastWord) {
+          currentMultiNodeWordWidth += ctx.measureText(word || ' ').width;
+          previousNodesLineWidth = currentMultiNodeWordWidth;
+          currentNodeLine = []
+        } else {
+          previousNodesLineWidth = currentMultiNodeWordWidth;
+          currentMultiNodeWordWidth = 0;
+          currentNodeLine = [word]
+        }
+        previousWidth = 0
+      }
+      if (lastWord && (!nextNode || nextNode?.hasChangedLine)) {
+        lineCount++;
+        currentMultiNodeWordWidth =0;
+        currentNodeLine = [];
+        previousWidth = 0;
+        previousNodesLineWidth=0;
+      }
+    })
+  });
+  return {max: biggestWidth, lines:lineCount}
+}
+
+const getCanvasFillWidth = (nodes, maxWidth, ctx, maxLines) => {
+  const {max, lines} = calculateCanvasFillWidth(nodes, maxWidth-1, ctx)
+  if (lines > maxLines) {
+    return null
+  } else {
+    const smallerResult = getCanvasFillWidth(nodes, max-1, ctx, lines)
+    if (smallerResult === null || max === smallerResult) {
+      return maxLines === undefined ? maxWidth : Math.ceil(max)
+    } else {
+      return smallerResult
+    }
+  }
+}
+
+export class FillLastLineResizer extends React.Component {
+  static defaultProps = {
+    Tag: 'div'
+  }
+  fontIsLoaded = false
+
+
+  setRef = (el) => {
+    this.el = el
+    if (el && parseInt(this.el.style.maxWidth, 10) !== parseInt(this.lastMaxWidth, 10)) {
+      this.resizeEvent()
+    }
+  }
+
+  resizeEvent = (fontLoadedOrEvent) => {
+    const fromDialog = typeof fontLoadedOrEvent === 'object' ? fontLoadedOrEvent.detail && fontLoadedOrEvent.detail.dialog : false
+    if (fromDialog) return;
+    const fontAlreadyLoaded = window.getComputedStyle(this.el).fontWeight === '500' && window.getComputedStyle(this.el).fontFamily.indexOf('Roboto') > 0
+    if (fontAlreadyLoaded) {
+      this.el.style.fontFamily = 'Roboto, sans-serif'
+      this.fontIsLoaded = true
+    }
+    if (this.fontIsLoaded || this.props.resizeOnMount || fontLoadedOrEvent === true || document.readyState === 'complete') {
+      this.fontIsLoaded = true
+    } else {
+      return
+    }
+    this.el.style.removeProperty('max-width')
+    if (this.props.shouldCancelResize === true || (typeof this.props.shouldCancelResize === 'function' && this.props.shouldCancelResize())) {
+      return
+    }
+
+    if (isMobile() && this.el.firstElementChild) {
+      return
+    }
+
+    const {offsetWidth, offsetHeight} = this.el
+    if (offsetWidth && offsetHeight) {
+      const range = document.createRange()
+      range.setStart(this.el, 0)
+      range.setEnd(this.el, this.el.childNodes.length)
+      if (range.getClientRects().length <= 1) {
+        return;
+      }
+      let newMaxWidth = 0;
+      if (this.props.withoutCanvas) {
+        newMaxWidth = this.getMaxWidth(this.el, offsetHeight, offsetWidth, 256, offsetWidth)
+      } else {
+        try {
+          const canvasCtx = document.createElement("canvas").getContext("2d");
+          const nodeIterator = document.createNodeIterator(this.el, NodeFilter.SHOW_TEXT)
+          const text = this.el.innerText
+          let lastIndex = -1
+          let node;
+          const nodes = []
+          while (node = nodeIterator.nextNode()) {
+            const currentText = node.textContent.replace( / +/g, ' ' )
+            const currentIndex = text.indexOf(currentText,lastIndex+1)
+            nodes.push({
+              font:window.getComputedStyle(node.parentElement).font,
+              hasChangedLine:text[currentIndex-1]==='\n',
+              words:currentText.split(' ')
+            })
+            lastIndex = currentIndex
+          }
+          newMaxWidth = getCanvasFillWidth(nodes, offsetWidth, canvasCtx)
+        } catch (e) {
+          console.log(e)
+          newMaxWidth = offsetWidth
+        }
+      }
+
+      this.el.style.maxWidth = newMaxWidth + 'px'
+      const {offsetHeight: newOffsetHeight} = this.el
+
+      // confere se o maxWidth antigo ainda serve, garantir que não haja influencia de um ou outro pixel
+      if (this.lastMaxWidth) {
+        this.el.style.maxWidth = this.lastMaxWidth + 'px'
+        const {offsetHeight: lastOffsetHeight} = this.el
+        if (newOffsetHeight !== lastOffsetHeight || this.lastMaxWidth >= this.el.offsetWidth) {
+          // if (this.el.tagName.toLowerCase()==='ul') {
+          // console.log(newMaxWidth)
+          // }
+          this.lastMaxWidth = newMaxWidth
+          this.el.style.maxWidth = this.lastMaxWidth + 'px'
+        }
+      } else {
+        this.lastMaxWidth = newMaxWidth
+      }
+    }
+  }
+
+  getMaxWidth = (element, prevHeight, prevWidth, window, originalWidth) => {
+    const newWidth = Math.max(1, prevWidth - window)
+    element.style.maxWidth = newWidth + 'px'
+    if (element.offsetHeight === prevHeight && prevWidth > 10) {
+      return this.getMaxWidth(element, prevHeight, newWidth, window, originalWidth)
+    } else if (window > 1) {
+      return this.getMaxWidth(element, prevHeight, prevWidth, window / 2, originalWidth)
+    } else if (prevWidth < 10) {
+      return originalWidth > prevWidth ? originalWidth : 10
+    } else {
+      return prevWidth + 1
+    }
+  }
+
+  componentDidMount() {
+    window.addEventListener('stepResize', this.resizeEvent)
+    if (document.readyState === 'complete') {
+      this.resizeEvent()
+    } else {
+      window.addEventListener('load', this.resizeEvent)
+      if (window.document.fonts && window.document.fonts.ready && window.document.fonts.ready.catch) {
+        window.document.fonts.ready.catch(_ => _).then(() => {
+          window.removeEventListener('load', this.resizeEvent)
+          this.resizeEvent(true)
+        })
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('stepResize', this.resizeEvent)
+    window.removeEventListener('load', this.resizeEvent)
+  }
+
+  componentDidUpdate() {
+    this.resizeEvent()
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const ignoreHtml = nextProps.dangerouslySetInnerHTML && this.props.dangerouslySetInnerHTML &&
+      nextProps.dangerouslySetInnerHTML.__html === this.props.dangerouslySetInnerHTML.__html
+    const isShallowEqual = Object.keys(nextProps).every(key => this.props[key] === nextProps[key] || (ignoreHtml && key === "dangerouslySetInnerHTML"))
+    return !isShallowEqual;
+
+  }
+
+  render() {
+    const {Tag, linkColor, resizeOnMount, shouldCancelResize, ...rest} = this.props
+    return <Tag ref={this.setRef} {...rest}/>
+  }
+}
+
+FillLastLineResizer.ul = (props) => <FillLastLineResizer Tag='ul' {...props}/>
+FillLastLineResizer.h2 = (props) => <FillLastLineResizer Tag='h2' {...props}/>