{"remainingRequest":"/Users/csr/workspace/open-component/node_modules/thread-loader/dist/cjs.js??ref--9-1!/Users/csr/workspace/open-component/node_modules/@breezr/plugin-typescript/node_modules/ts-loader/index.js??ref--9-2!/Users/csr/workspace/open-component/packages/rc-truncate/src/TruncateByWidth.tsx","dependencies":[{"path":"/Users/csr/workspace/open-component/packages/rc-truncate/src/TruncateByWidth.tsx","mtime":1571644356721},{"path":"/Users/csr/workspace/open-component/node_modules/cache-loader/dist/cjs.js","mtime":1571812248602},{"path":"/Users/csr/workspace/open-component/node_modules/thread-loader/dist/cjs.js","mtime":1571812248618},{"path":"/Users/csr/workspace/open-component/node_modules/@breezr/plugin-typescript/node_modules/ts-loader/index.js","mtime":1571882237140}],"contextDependencies":[],"result":["import React, { useState, useRef, useLayoutEffect, useCallback } from 'react';\nimport classnames from 'classnames';\nimport { mainClassName, omissionClassName, baseClassName, } from './constants';\nimport { STruncateWidthContainer } from './styles';\nimport { useTooltip } from './utils';\nvar TruncateByWidth = function (_a) {\n    var children = _a.children, threshold = _a.threshold, omission = _a.omission, showTooltip = _a.showTooltip, align = _a.align, className = _a.className, tooltipMaxWidth = _a.tooltipMaxWidth, updaterRef = _a.updaterRef, isOverflowChange = _a.isOverflowChange;\n    var ref = useRef(null);\n    var _b = useState(false), isOverflow = _b[0], setIsOverflow = _b[1];\n    // 通过css`text-overflow: ellipsis;`来渲染省略符，还是用react来渲染\n    // css渲染方式能够以字符为单位进行截断，观感更好\n    var omissionByCSS = omission === '...';\n    var checkOverflow = useCallback(function () {\n        var el = ref.current;\n        if (!el) {\n            // 尚未渲染完成\n            return;\n        }\n        var newIsOverflow = isWidthOverflow(el);\n        if (newIsOverflow !== isOverflow) {\n            setIsOverflow(newIsOverflow);\n            if (typeof isOverflowChange === 'function') {\n                setTimeout(function () {\n                    isOverflowChange(newIsOverflow);\n                }, 0);\n            }\n        }\n    }, [isOverflow, isOverflowChange]);\n    useLayoutEffect(function () {\n        checkOverflow();\n        if (typeof updaterRef === 'object')\n            // eslint-disable-next-line\n            updaterRef.current = checkOverflow;\n    });\n    var truncateContainer = (React.createElement(STruncateWidthContainer, { threshold: Number(threshold) || threshold, omissionByCSS: omissionByCSS, className: classnames(className, baseClassName) },\n        React.createElement(\"span\", { ref: ref, className: mainClassName }, children),\n        isOverflow && !omissionByCSS && (React.createElement(\"span\", { className: omissionClassName }, omission))));\n    return useTooltip({\n        showTooltip: isOverflow && showTooltip,\n        tooltipMaxWidth: tooltipMaxWidth,\n        align: align,\n        originalContent: children,\n        truncatedContent: truncateContainer,\n    });\n};\nexport default TruncateByWidth;\nfunction isWidthOverflow(element) {\n    // debugger\n    return element.scrollWidth > element.clientWidth;\n}\n",{"version":3,"file":"/Users/csr/workspace/open-component/packages/rc-truncate/src/TruncateByWidth.tsx","sourceRoot":"","sources":["/Users/csr/workspace/open-component/packages/rc-truncate/src/TruncateByWidth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC7E,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,aAAa,GAEd,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpC,IAAM,eAAe,GAWhB,UAAC,EAUL;QATC,sBAAQ,EACR,wBAAS,EACT,sBAAQ,EACR,4BAAW,EACX,gBAAK,EACL,wBAAS,EACT,oCAAe,EACf,0BAAU,EACV,sCAAgB;IAEhB,IAAM,GAAG,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAA;IAC1C,IAAA,oBAA6C,EAA5C,kBAAU,EAAE,qBAAgC,CAAA;IACnD,oDAAoD;IACpD,2BAA2B;IAC3B,IAAM,aAAa,GAAG,QAAQ,KAAK,KAAK,CAAA;IAExC,IAAM,aAAa,GAAG,WAAW,CAAC;QAChC,IAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;QACtB,IAAI,CAAC,EAAE,EAAE;YACP,SAAS;YACT,OAAM;SACP;QACD,IAAM,aAAa,GAAG,eAAe,CAAC,EAAE,CAAC,CAAA;QACzC,IAAI,aAAa,KAAK,UAAU,EAAE;YAChC,aAAa,CAAC,aAAa,CAAC,CAAA;YAC5B,IAAI,OAAO,gBAAgB,KAAK,UAAU,EAAE;gBAC1C,UAAU,CAAC;oBACT,gBAAgB,CAAC,aAAa,CAAC,CAAA;gBACjC,CAAC,EAAE,CAAC,CAAC,CAAA;aACN;SACF;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAElC,eAAe,CAAC;QACd,aAAa,EAAE,CAAA;QACf,IAAI,OAAO,UAAU,KAAK,QAAQ;YAChC,2BAA2B;YAC1B,UAAkB,CAAC,OAAO,GAAG,aAAa,CAAA;IAC/C,CAAC,CAAC,CAAA;IAEF,IAAM,iBAAiB,GAAG,CACxB,oBAAC,uBAAuB,IACtB,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,SAAS,EACzC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,aAAa,CAAC;QAE/C,8BAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa,IACrC,QAAQ,CACJ;QACN,UAAU,IAAI,CAAC,aAAa,IAAI,CAC/B,8BAAM,SAAS,EAAE,iBAAiB,IAAG,QAAQ,CAAQ,CACtD,CACuB,CAC3B,CAAA;IAED,OAAO,UAAU,CAAC;QAChB,WAAW,EAAE,UAAU,IAAI,WAAW;QACtC,eAAe,iBAAA;QACf,KAAK,OAAA;QACL,eAAe,EAAE,QAAQ;QACzB,gBAAgB,EAAE,iBAAiB;KACpC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,eAAe,eAAe,CAAA;AAE9B,SAAS,eAAe,CAAC,OAAgB;IACvC,WAAW;IACX,OAAO,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAA;AAClD,CAAC","sourcesContent":["import React, { useState, useRef, useLayoutEffect, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n  mainClassName,\n  omissionClassName,\n  baseClassName,\n  AlignType,\n} from './constants'\nimport { STruncateWidthContainer } from './styles'\nimport { useTooltip } from './utils'\n\nconst TruncateByWidth: React.FC<{\n  children: React.ReactNode\n  // 40 或 '40' 或 '40px'\n  threshold: number | string\n  omission: React.ReactNode\n  showTooltip: boolean\n  align: AlignType\n  className?: string\n  tooltipMaxWidth?: number\n  updaterRef?: React.MutableRefObject<(() => void) | null>\n  isOverflowChange?: (newIsOverflow: boolean) => void\n}> = ({\n  children,\n  threshold,\n  omission,\n  showTooltip,\n  align,\n  className,\n  tooltipMaxWidth,\n  updaterRef,\n  isOverflowChange,\n}) => {\n  const ref = useRef<HTMLSpanElement | null>(null)\n  const [isOverflow, setIsOverflow] = useState(false)\n  // 通过css`text-overflow: ellipsis;`来渲染省略符，还是用react来渲染\n  // css渲染方式能够以字符为单位进行截断，观感更好\n  const omissionByCSS = omission === '...'\n\n  const checkOverflow = useCallback(() => {\n    const el = ref.current\n    if (!el) {\n      // 尚未渲染完成\n      return\n    }\n    const newIsOverflow = isWidthOverflow(el)\n    if (newIsOverflow !== isOverflow) {\n      setIsOverflow(newIsOverflow)\n      if (typeof isOverflowChange === 'function') {\n        setTimeout(() => {\n          isOverflowChange(newIsOverflow)\n        }, 0)\n      }\n    }\n  }, [isOverflow, isOverflowChange])\n\n  useLayoutEffect(() => {\n    checkOverflow()\n    if (typeof updaterRef === 'object')\n      // eslint-disable-next-line\n      (updaterRef as any).current = checkOverflow\n  })\n\n  const truncateContainer = (\n    <STruncateWidthContainer\n      threshold={Number(threshold) || threshold}\n      omissionByCSS={omissionByCSS}\n      className={classnames(className, baseClassName)}\n    >\n      <span ref={ref} className={mainClassName}>\n        {children}\n      </span>\n      {isOverflow && !omissionByCSS && (\n        <span className={omissionClassName}>{omission}</span>\n      )}\n    </STruncateWidthContainer>\n  )\n\n  return useTooltip({\n    showTooltip: isOverflow && showTooltip,\n    tooltipMaxWidth,\n    align,\n    originalContent: children,\n    truncatedContent: truncateContainer,\n  })\n}\n\nexport default TruncateByWidth\n\nfunction isWidthOverflow(element: Element) {\n  // debugger\n  return element.scrollWidth > element.clientWidth\n}\n"]}]}