@next-bricks/data-view 1.3.16 → 1.4.0

package/dist/chunks/progress-bar-list.b788a7ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunks/progress-bar-list.b788a7ce.js","mappings":"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","sources":["webpack:///./src/hooks/usePrevious/index.ts","webpack:///./src/hooks/useResizeObserver/index.ts","webpack:///./src/hooks/useResizeObserver/resizeObserverUtil.ts","webpack:///./src/progress-bar-list/index.tsx","webpack:///./src/progress-bar-list/styles.shadow.css"],"sourcesContent":["import {useRef, useEffect} from 'react';\nexport  function usePrevious<T>(data?: T):T|undefined{\n    const ref = useRef<T>();\n    useEffect(()=>{\n        ref.current = data\n    })\n    return ref.current;\n}\n","import {\n  useState,\n  useCallback,\n  useRef,\n  type RefObject,\n  useEffect,\n} from \"react\";\nimport { observe, unobserve } from \"./resizeObserverUtil.js\";\n\ninterface ElementSize {\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport interface ResizeObserveProps<T extends Element = Element> {\n  targetRef?: RefObject<T>;\n  onResize?: (size: ResizeObserverEntry) => void;\n}\n\nexport function useResizeObserver<T extends Element = Element>(\n  props?: ResizeObserveProps<T>\n): [RefObject<T>, ElementSize] {\n  const {\n    targetRef,\n    onResize,\n  } = props || {};\n\n  const localRef = useRef<T>();\n  const ref = targetRef ?? localRef;\n  const [size, setSize] = useState<ElementSize>({ clientWidth: 0, clientHeight: 0 });\n\n  const handleResize = useCallback(\n    (entry: ResizeObserverEntry) => {\n      const { target } = entry;\n      const { clientWidth = 0, clientHeight = 0 } = target;\n\n      setSize((prev) => {\n        // skip if same size\n        if (prev.clientWidth === clientWidth && prev.clientHeight === clientHeight) {\n          return prev;\n        }\n\n        onResize?.(entry);\n\n        return { clientWidth, clientHeight };\n      });\n    },\n    [onResize]\n  );\n\n  useEffect(() => {\n    if (\n      typeof ref !== \"object\" ||\n      ref === null ||\n      !(ref.current instanceof Element)\n    ) {\n      throw new Error(\"ResizeObserver must observe an Element\");\n    }\n\n    const element = ref.current;\n    observe(element, handleResize);\n\n    return () => {\n      unobserve(element, handleResize);\n    };\n  }, [handleResize, ref]);\n\n  return [ref, { ...size }];\n}\n","import ResizeObserver from \"resize-observer-polyfill\";\n\nexport type ResizeCallback = (entry: ResizeObserverEntry) => void;\n\nconst elementListeners = new Map<Element, Set<ResizeCallback>>();\n\nexport const elementListeners_only_for_test =\n  process.env.NODE_ENV === \"test\"\n    ? elementListeners\n    : /* istanbul ignore next */ null;\n\nconst resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {\n  entries.forEach((entry) => {\n    const { target } = entry;\n    elementListeners.get(target)?.forEach((callback) => callback(entry));\n  });\n};\n\nconst resizeObserver: ResizeObserver = new (ResizeObserver as any)(resizeObserverCallback);\n\nexport const observe = (element: Element, callback: ResizeCallback): void => {\n  if (!elementListeners.has(element)) {\n    elementListeners.set(element, new Set());\n    resizeObserver.observe(element);\n  }\n\n  elementListeners.get(element).add(callback);\n};\n\nexport const unobserve = (element: Element, callback: ResizeCallback): void => {\n  if (elementListeners.has(element)) {\n    elementListeners.get(element).delete(callback);\n\n    if (elementListeners.get(element).size === 0) {\n      resizeObserver.unobserve(element);\n      elementListeners.delete(element);\n    }\n  }\n};\n","import React, { useEffect, useState, CSSProperties } from \"react\";\nimport { createDecorators } from \"@next-core/element\";\nimport { ReactNextElement } from \"@next-core/react-element\";\nimport \"@next-core/theme\";\nimport styleText from \"./styles.shadow.css\";\n\nimport { maxBy } from \"lodash\";\nimport { useResizeObserver } from \"../hooks/index.js\";\n\nconst { defineElement, property } = createDecorators();\n\n/**\n * 构件 `data-view.progress-bar-list`\n */\nexport\n@defineElement(\"data-view.progress-bar-list\", {\n  styleTexts: [styleText],\n})\nclass ProgressBarList extends ReactNextElement {\n  /**\n   * @default\n   * @required\n   * @description 数据\n   */\n  @property({\n    attribute: false,\n  })\n  accessor dataSource: Data[];\n  render() {\n    return <ProgressBarListComponent dataSource={this.dataSource} />;\n  }\n}\n\nexport interface ProgressBarListProps {\n  dataSource: Data[];\n  // Define props here.\n}\ninterface Data {\n  title: string;\n  count: number;\n  loopBackground?: CSSProperties[\"background\"];\n  barBackground?: CSSProperties[\"background\"];\n}\nexport function ProgressBarListComponent(props: ProgressBarListProps) {\n  const { dataSource = [] } = props;\n  const [barWidth, setBarWidth] = useState<number>();\n  const [list, setList] = useState<(Data & { width: number })[]>([]);\n  const [containerRef, { clientWidth }] = useResizeObserver<HTMLDivElement>();\n  useEffect(() => {\n    const element = containerRef.current;\n    if (element) {\n      setBarWidth(clientWidth - 225);\n    }\n  }, [clientWidth]);\n  useEffect(() => {\n    if (barWidth && dataSource.length) {\n      const maxData = maxBy(dataSource, \"count\");\n      setList(\n        dataSource.map((i) => ({\n          ...i,\n          width: (barWidth * i.count) / maxData.count,\n        }))\n      );\n    }\n  }, [dataSource, barWidth]);\n  return (\n    <div className=\"container\" ref={containerRef}>\n      {list.map((i, index) => (\n        <div className=\"outermostContainer\" key={index}>\n          <div className=\"titleText\">{i.title}</div>\n          <div className=\"innerBarContainer\">\n            <div\n              className=\"barContainer\"\n              style={{\n                width: i.width,\n                left: -i.width,\n                background:\n                  i.barBackground ||\n                  \"linear-gradient( 90deg, rgba(66,130,237,0) 0%, #4282ED 100%)\",\n              }}\n            >\n              <div\n                className=\"smallLoop\"\n                style={{\n                  background: i.loopBackground || \"#4282ED\",\n                }}\n              ></div>\n\n              <div\n                style={{\n                  border: `1px solid ${i.loopBackground || \"#4282ED\"}`,\n                }}\n                className=\"bigLoop\"\n              ></div>\n            </div>\n            <div\n              className=\"barBgContent\"\n              style={{\n                width: barWidth,\n              }}\n            ></div>\n          </div>\n\n          <div className=\"countText\">{i.count}</div>\n        </div>\n      ))}\n    </div>\n  );\n}\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{display:flex}:host([hidden]){display:none}.countText{width:100px;margin-left:9px;color:#8fabbf;font-size:12px;word-break:break-all}.barBgContent{position:absolute;background:rgba(83,105,128,0.15);top:8px;height:6px}.bigLoop{position:absolute;right:-7.5px;top:-8px;border-radius:50%;width:20px;height:20px;animation:scale 2s infinite}.smallLoop{width:8px;height:8px;border-radius:50%;position:absolute;right:-1px;top:-1px}.barContainer{position:absolute;min-width:14px;top:8px;animation:move 2s linear forwards;height:6px}.container{width:100%;min-width:300px;display:grid}.outermostContainer{display:flex;align-items:center;flex-flow:row wrap;min-height:22px}.titleText{width:100px;text-align:end;color:#8fabbf;font-size:12px;margin-right:9px;word-break:break-all}.innerBarContainer{position:relative;overflow-y:auto;overflow-x:hidden;min-height:22px;flex:1 1 0}@keyframes move{to{left:0%}}@keyframes scale{from{transform:scale(0.5)}to{transform:scale(1)}}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n"],"names":["usePrevious","data","ref","useRef","useEffect","current","useResizeObserver","props","targetRef","onResize","localRef","size","setSize","useState","clientWidth","clientHeight","handleResize","useCallback","entry","target","prev","Element","Error","element","observe","unobserve","elementListeners","Map","resizeObserver","ResizeObserver","entries","forEach","_elementListeners$get","get","callback","has","set","Set","add","delete","defineElement","property","createDecorators","_ProgressBarList","_A","WeakMap","ProgressBarList","ReactNextElement","constructor","arguments","_classPrivateFieldInitSpec","_init_dataSource","_init_extra_dataSource","dataSource","_classPrivateFieldGet","v","_classPrivateFieldSet","render","React","ProgressBarListComponent","this","barWidth","setBarWidth","list","setList","containerRef","length","maxData","maxBy","map","i","width","count","className","index","key","title","style","left","background","barBackground","loopBackground","border","_ProgressBarList2","e","c","_initClass","_applyDecs","styleTexts","styleText","attribute","___CSS_LOADER_EXPORT___","push","module","id","toString"],"sourceRoot":""}