linear-react-components-ui 2.0.0-rc.4 → 2.0.0-rc.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Currency.js","sources":["../../../src/lib/inputs/number/Currency.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport _ from 'lodash';\nimport { useIMask } from 'react-imask';\nimport { ICurrencyProps } from './types';\nimport { numberToEnUS, numberToPtBR } from './format_number';\nimport InputTextBase from '../base/InputTextBase';\nimport { mergeRefs } from '../../form2/helpers';\nimport type { CustomInputEvent } from '../base/types';\n\nconst CurrencyField = (props: ICurrencyProps) => {\n const {\n inputRef = undefined, textAlign = 'left', themePopover = 'light', popoverAlign = 'left',\n min = undefined, max = undefined, allowNegative = false, scale = 2, normalizeZeros = true,\n padFractionalZeros =
|
|
1
|
+
{"version":3,"file":"Currency.js","sources":["../../../src/lib/inputs/number/Currency.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport _ from 'lodash';\nimport { useIMask } from 'react-imask';\nimport { ICurrencyProps } from './types';\nimport { numberToEnUS, numberToPtBR } from './format_number';\nimport InputTextBase from '../base/InputTextBase';\nimport { mergeRefs } from '../../form2/helpers';\nimport type { CustomInputEvent } from '../base/types';\n\nconst CurrencyField = (props: ICurrencyProps) => {\n const {\n inputRef = undefined, textAlign = 'left', themePopover = 'light', popoverAlign = 'left',\n min = undefined, max = undefined, allowNegative = false, scale = 2, normalizeZeros = true,\n padFractionalZeros = true, unmask = true, currencySymbol = 'R$', displayCurrencySymbol = true,\n } = props;\n const currencyNumberInputRef = useRef<HTMLInputElement | null>(null);\n const isResetting = useRef(false);\n const leftElements = displayCurrencySymbol ?\n <span className=\"currency-symbol\">{currencySymbol}</span>\n : [];\n\n const { value: maskedValue, setValue: setMaskedValue } = useIMask({\n mask: Number,\n unmask,\n scale,\n normalizeZeros,\n padFractionalZeros,\n max,\n min: !_.isNil(min) ? min : (allowNegative ? undefined : 0),\n radix: ',',\n mapToRadix: ['.'],\n thousandsSeparator: '.',\n }, {\n ref: currencyNumberInputRef,\n onAccept: (__, options, event) => {\n if (isResetting.current) {\n isResetting.current = false;\n return;\n }\n const parsedValue = numberToEnUS(options.unmaskedValue);\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: parsedValue as any,\n },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n });\n\n /**\n * Função sobrescrevendo o evento onBlur para tratar o valor mínimo ao sair do campo, \n * garantindo que o valor não seja menor que o mínimo definido.\n */\n const handleBlur = (event: CustomInputEvent) => {\n if (!_.isNil(min)) {\n const currentValue = numberToEnUS(maskedValue) as number;\n if (_.isNaN(currentValue) || currentValue < min) {\n setMaskedValue(numberToPtBR(min) ?? _.toString(min));\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: min as any,\n },\n } as CustomInputEvent);\n }\n }\n props?.onBlur?.(event);\n };\n\n useEffect(() => {\n if (_.isNil(props?.value)) {\n if (maskedValue !== '') {\n isResetting.current = true;\n setMaskedValue('');\n }\n return;\n }\n const valueToPtBR = numberToPtBR(props?.value) ?? '';\n if (!_.isEqual(\n parseFloat(_.toString(props?.value)), numberToEnUS(maskedValue),\n )) {\n setMaskedValue(valueToPtBR);\n }\n }, [props?.value]);\n\n return (\n <InputTextBase\n {...props}\n inputRef={mergeRefs(currencyNumberInputRef, inputRef) as any}\n type=\"text\"\n onChange={() => { }}\n leftElements={leftElements}\n onBlur={handleBlur}\n value={maskedValue}\n textAlign={textAlign}\n themePopover={themePopover}\n popoverAlign={popoverAlign} />\n );\n};\n\nexport default CurrencyField;\n"],"names":["CurrencyField","props","inputRef","undefined","textAlign","themePopover","popoverAlign","min","max","allowNegative","scale","normalizeZeros","padFractionalZeros","unmask","currencySymbol","displayCurrencySymbol","currencyNumberInputRef","useRef","isResetting","leftElements","value","maskedValue","setValue","setMaskedValue","useIMask","mask","Number","_","isNil","radix","mapToRadix","thousandsSeparator","ref","onAccept","__","options","event","current","parsedValue","numberToEnUS","unmaskedValue","onChange","target","name","handleBlur","currentValue","isNaN","numberToPtBR","toString","onBlur","useEffect","valueToPtBR","isEqual","parseFloat","mergeRefs"],"mappings":";;;;;;;AASA,MAAMA,gBAAgBA,CAACC,UAA0B;AAC/C,QAAM;AAAA,IACJC,WAAWC;AAAAA,IAAWC,YAAY;AAAA,IAAQC,eAAe;AAAA,IAASC,eAAe;AAAA,IACjFC,MAAMJ;AAAAA,IAAWK,MAAML;AAAAA,IAAWM,gBAAgB;AAAA,IAAOC,QAAQ;AAAA,IAAGC,iBAAiB;AAAA,IACrFC,qBAAqB;AAAA,IAAMC,SAAS;AAAA,IAAMC,iBAAiB;AAAA,IAAMC,wBAAwB;AAAA,EAAA,IACvFd;AACJ,QAAMe,yBAAyBC,OAAgC,IAAI;AACnE,QAAMC,cAAcD,OAAO,KAAK;AAChC,QAAME,eAAeJ,wBACnB,oBAAC,QAAA,EAAK,WAAU,mBAAmBD,UAAAA,eAAAA,CAAe,IAChD,CAAA;AAEJ,QAAM;AAAA,IAAEM,OAAOC;AAAAA,IAAaC,UAAUC;AAAAA,EAAAA,IAAmBC,SAAS;AAAA,IAChEC,MAAMC;AAAAA,IACNb;AAAAA,IACAH;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAJ;AAAAA,IACAD,KAAK,CAACoB,EAAEC,MAAMrB,GAAG,IAAIA,MAAOE,gBAAgBN,SAAY;AAAA,IACxD0B,OAAO;AAAA,IACPC,YAAY,CAAC,GAAG;AAAA,IAChBC,oBAAoB;AAAA,EAAA,GACnB;AAAA,IACDC,KAAKhB;AAAAA,IACLiB,UAAUA,CAACC,IAAIC,SAASC,UAAU;AAChC,UAAIlB,YAAYmB,SAAS;AACvBnB,oBAAYmB,UAAU;AACtB;AAAA,MACF;AACA,YAAMC,cAAcC,aAAaJ,QAAQK,aAAa;AACtDvC,aAAOwC,WAAW;AAAA,QAChB,GAAGL;AAAAA,QACHM,QAAQ;AAAA,UACN,GAAGN,OAAOM;AAAAA,UACVC,MAAM1C,OAAO0C;AAAAA,UACbvB,OAAOkB;AAAAA,QAAAA;AAAAA,MACT,CACsC;AAAA,IAC1C;AAAA,EAAA,CACD;AAMD,QAAMM,aAAaA,CAACR,YAA4B;AAC9C,QAAI,CAACT,EAAEC,MAAMrB,GAAG,GAAG;AACjB,YAAMsC,eAAeN,aAAalB,WAAW;AAC7C,UAAIM,EAAEmB,MAAMD,YAAY,KAAKA,eAAetC,KAAK;AAC/CgB,uBAAewB,aAAaxC,GAAG,KAAKoB,EAAEqB,SAASzC,GAAG,CAAC;AACnDN,eAAOwC,WAAW;AAAA,UAChB,GAAGL;AAAAA,UACHM,QAAQ;AAAA,YACN,GAAGN,SAAOM;AAAAA,YACVC,MAAM1C,OAAO0C;AAAAA,YACbvB,OAAOb;AAAAA,UAAAA;AAAAA,QACT,CACmB;AAAA,MACvB;AAAA,IACF;AACAN,WAAOgD,SAASb,OAAK;AAAA,EACvB;AAEAc,YAAU,MAAM;AACd,QAAIvB,EAAEC,MAAM3B,OAAOmB,KAAK,GAAG;AACzB,UAAIC,gBAAgB,IAAI;AACtBH,oBAAYmB,UAAU;AACtBd,uBAAe,EAAE;AAAA,MACnB;AACA;AAAA,IACF;AACA,UAAM4B,cAAcJ,aAAa9C,OAAOmB,KAAK,KAAK;AAClD,QAAI,CAACO,EAAEyB,QACLC,WAAW1B,EAAEqB,SAAS/C,OAAOmB,KAAK,CAAC,GAAGmB,aAAalB,WAAW,CAChE,GAAG;AACDE,qBAAe4B,WAAW;AAAA,IAC5B;AAAA,EACF,GAAG,CAAClD,OAAOmB,KAAK,CAAC;AAEjB,SACE,oBAAC,eAAA,EACC,GAAInB,OACJ,UAAUqD,UAAUtC,wBAAwBd,QAAQ,GACpD,MAAK,QACL,UAAU,MAAM;AAAA,EAAE,GAClB,cACA,QAAQ0C,YACR,OAAOvB,aACP,WACA,cACA,cAA2B;AAEjC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.js","sources":["../../src/lib/tooltip/useTooltip.ts"],"sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react';\nimport { Position } from '../@types/Position';\n\nconst TOOLTIP_INITIAL_HEIGHT = 40;\n\ninterface UseTooltipProps {\n text?: string;\n width?: number | string;\n space?: number;\n position?: Exclude<Position, 'center'>;\n errorMessage?: string;\n targetRef: RefObject<HTMLElement | null>;\n onDeniedText?: string;\n}\n\nexport function useTooltip({\n targetRef, \n text,\n width: widthProp = 'auto', \n space = 0,\n position: positionProp = 'bottom',\n errorMessage,\n onDeniedText,\n}: UseTooltipProps) {\n const [stateTooltipPosition, setStateTooltipPosition] = useState(positionProp);\n const [tooltipStyle, setTooltipStyle] = useState('');\n const [showTooltip, setShowTooltip] = useState(false);\n const [tooltipDimensions, setTooltipDimensions] = useState({\n width: widthProp,\n height: TOOLTIP_INITIAL_HEIGHT,\n });\n const targetElement = targetRef;\n const tooltipElement = useRef<HTMLElement | null>(null);\n\n const onMouseOver = (e: Event) => {\n if (targetElement.current && targetElement.current.contains(e.target as Node)) {\n setShowTooltip(true);\n } else setShowTooltip(false);\n };\n\n const onMouseOut = () => {\n setShowTooltip(false);\n };\n\n const onAnyScroll = () => {\n setShowTooltip(false);\n };\n\n useEffect(() => {\n if (text || onDeniedText) {\n if (errorMessage) {\n setShowTooltip(true);\n } else {\n setShowTooltip(false);\n document.addEventListener('mouseover', onMouseOver);\n document.addEventListener('scroll', onAnyScroll, true);\n \n if (targetElement && targetElement.current) {\n targetElement.current.addEventListener('mouseout', onMouseOut);\n }\n }\n }\n \n return () => {\n if (text || onDeniedText) {\n document.removeEventListener('mouseover', onMouseOver);\n document.removeEventListener('scroll', onAnyScroll, true);\n \n if (targetElement && targetElement.current) {\n targetElement.current.removeEventListener('mouseout', onMouseOut);\n }\n }\n };\n }, [errorMessage, text, onDeniedText]);\n\n useEffect(() => {\n if (targetElement.current && tooltipElement.current) {\n const { width, height } = tooltipDimensions;\n const targetDimensions = targetElement.current.getBoundingClientRect();\n const targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;\n const tooltipClientWidth = tooltipElement.current.clientWidth;\n let style = `width: ${typeof width === 'string' ? width : `${width}px`}`;\n let left = (targetDimensions.left + (targetDimensions.width / 2)) -\n (tooltipClientWidth / 2);\n left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);\n style += `; left: ${Math.max(space, left)}px`;\n\n switch (stateTooltipPosition) {\n case 'top':\n if (targetDimensions.top < height) {\n setStateTooltipPosition('bottom');\n } else {\n style += `; top: ${targetDimensions.top + window.scrollY - height - space - 5}px`;\n }\n break;\n case 'bottom':\n if (window.innerHeight - targetDimensions.bottom < height) {\n setStateTooltipPosition('top');\n } else {\n style += `; top: ${targetDimensions.top + window.scrollY + targetDimensions.height + space + 5}px`;\n }\n break;\n case 'left':\n if (targetDimensions.left < tooltipClientWidth) {\n if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {\n setStateTooltipPosition('bottom');\n } else {\n setStateTooltipPosition('right');\n }\n } else {\n style += `; top: ${(targetVerticalCenter + window.scrollY) - (height / 2)}px`;\n style += `; left: ${(targetDimensions.left - tooltipClientWidth) - 6 - space}px`;\n }\n break;\n case 'right':\n if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {\n setStateTooltipPosition('left');\n } else {\n style += `; top: ${(targetVerticalCenter + window.scrollY) - (height / 2)}px`;\n style += `; left: ${targetDimensions.left + targetDimensions.width + 5 + space}px`;\n }\n break;\n default:\n style += '';\n }\n setTooltipStyle(style);\n }\n }, [tooltipDimensions, stateTooltipPosition]);\n\n useEffect(() => {\n if (targetElement.current && tooltipElement.current && showTooltip) {\n const targetRect = targetElement.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n const elementHorizontalPosition = targetRect.x;\n const widthElement = targetRect.width;\n const centerOfElement = elementHorizontalPosition + (widthElement / 2);\n\n requestAnimationFrame(() => {\n const tooltipRect = tooltipElement.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n const tooltipHorizontalPosition = tooltipRect.x;\n const widthTooltip = tooltipRect.width;\n const centerOfTooltip = tooltipHorizontalPosition + (widthTooltip / 2);\n \n const centerDifferenceBetweenElementAndTooltip = Number(\n (((centerOfElement - centerOfTooltip) / widthTooltip) * 100).toFixed(2),\n );\n \n const sumDifference = (0.5 + centerDifferenceBetweenElementAndTooltip / 100) * 100;\n tooltipElement.current?.style.setProperty('--arrow-position', `${sumDifference}%`);\n });\n }\n }, [showTooltip, tooltipElement.current, targetElement.current]);\n\n useEffect(() => {\n setStateTooltipPosition(positionProp);\n }, [window.scrollY, window.scrollX, window.innerWidth]);\n\n return {\n text: onDeniedText || text,\n tooltipRef: tooltipElement,\n style: tooltipStyle,\n className: stateTooltipPosition,\n handlerSetDimensions: setTooltipDimensions,\n tooltipDimensions: tooltipDimensions,\n showTooltip,\n };\n}\n"],"names":["TOOLTIP_INITIAL_HEIGHT","useTooltip","targetRef","text","width","widthProp","space","position","positionProp","errorMessage","onDeniedText","stateTooltipPosition","setStateTooltipPosition","useState","tooltipStyle","setTooltipStyle","showTooltip","setShowTooltip","tooltipDimensions","setTooltipDimensions","height","targetElement","tooltipElement","useRef","onMouseOver","e","current","contains","target","onMouseOut","onAnyScroll","useEffect","document","addEventListener","removeEventListener","targetDimensions","getBoundingClientRect","targetVerticalCenter","top","bottom","tooltipClientWidth","clientWidth","style","left","Math","min","body","max","window","scrollY","innerHeight","innerWidth","right","targetRect","x","elementHorizontalPosition","widthElement","centerOfElement","requestAnimationFrame","tooltipRect","tooltipHorizontalPosition","widthTooltip","centerOfTooltip","centerDifferenceBetweenElementAndTooltip","Number","toFixed","sumDifference","setProperty","scrollX","tooltipRef","className","handlerSetDimensions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../../src/lib/tooltip/useTooltip.ts"],"sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react';\nimport { Position } from '../@types/Position';\n\nconst TOOLTIP_INITIAL_HEIGHT = 40;\n\ninterface UseTooltipProps {\n text?: string;\n width?: number | string;\n space?: number;\n position?: Exclude<Position, 'center'>;\n errorMessage?: string;\n targetRef: RefObject<HTMLElement | null>;\n onDeniedText?: string;\n}\n\nexport function useTooltip({\n targetRef, \n text,\n width: widthProp = 'auto', \n space = 0,\n position: positionProp = 'bottom',\n errorMessage,\n onDeniedText,\n}: UseTooltipProps) {\n const [stateTooltipPosition, setStateTooltipPosition] = useState(positionProp);\n const [tooltipStyle, setTooltipStyle] = useState('');\n const [showTooltip, setShowTooltip] = useState(false);\n const [tooltipDimensions, setTooltipDimensions] = useState({\n width: widthProp,\n height: TOOLTIP_INITIAL_HEIGHT,\n });\n const targetElement = targetRef;\n const tooltipElement = useRef<HTMLElement | null>(null);\n\n const onMouseOver = (e: Event) => {\n if (targetElement.current && targetElement.current.contains(e.target as Node)) {\n setShowTooltip(true);\n } else setShowTooltip(false);\n };\n\n const onMouseOut = () => {\n setShowTooltip(false);\n };\n\n const onAnyScroll = () => {\n setShowTooltip(false);\n };\n\n useEffect(() => {\n if (text || onDeniedText) {\n if (errorMessage) {\n setShowTooltip(true);\n } else {\n setShowTooltip(false);\n document.addEventListener('mouseover', onMouseOver);\n document.addEventListener('scroll', onAnyScroll, true);\n \n if (targetElement && targetElement.current) {\n targetElement.current.addEventListener('mouseout', onMouseOut);\n }\n }\n }\n \n return () => {\n if (text || onDeniedText) {\n document.removeEventListener('mouseover', onMouseOver);\n document.removeEventListener('scroll', onAnyScroll, true);\n \n if (targetElement && targetElement.current) {\n targetElement.current.removeEventListener('mouseout', onMouseOut);\n }\n }\n };\n }, [errorMessage, text, onDeniedText]);\n\n useEffect(() => {\n if (targetElement.current && tooltipElement.current) {\n const { width, height } = tooltipDimensions;\n const targetDimensions = targetElement.current.getBoundingClientRect();\n const targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;\n const tooltipClientWidth = tooltipElement.current.clientWidth;\n let style = `width: ${typeof width === 'string' ? width : `${width}px`}`;\n let left = (targetDimensions.left + (targetDimensions.width / 2)) -\n (tooltipClientWidth / 2);\n left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);\n style += `; left: ${Math.max(space, left)}px`;\n\n switch (stateTooltipPosition) {\n case 'top':\n if (targetDimensions.top < height) {\n setStateTooltipPosition('bottom');\n } else {\n style += `; top: ${targetDimensions.top + window.scrollY - height - space - 5}px`;\n }\n break;\n case 'bottom':\n if (window.innerHeight - targetDimensions.bottom < height) {\n setStateTooltipPosition('top');\n } else {\n style += `; top: ${targetDimensions.top + window.scrollY + targetDimensions.height + space + 5}px`;\n }\n break;\n case 'left':\n if (targetDimensions.left < tooltipClientWidth) {\n if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {\n setStateTooltipPosition('bottom');\n } else {\n setStateTooltipPosition('right');\n }\n } else {\n style += `; top: ${(targetVerticalCenter + window.scrollY) - (height / 2)}px`;\n style += `; left: ${(targetDimensions.left - tooltipClientWidth) - 6 - space}px`;\n }\n break;\n case 'right':\n if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {\n setStateTooltipPosition('left');\n } else {\n style += `; top: ${(targetVerticalCenter + window.scrollY) - (height / 2)}px`;\n style += `; left: ${targetDimensions.left + targetDimensions.width + 5 + space}px`;\n }\n break;\n default:\n style += '';\n }\n setTooltipStyle(style);\n }\n }, [tooltipDimensions, stateTooltipPosition]);\n\n useEffect(() => {\n if (targetElement.current && tooltipElement.current && showTooltip) {\n const targetRect = targetElement.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n const elementHorizontalPosition = targetRect.x;\n const widthElement = targetRect.width;\n const centerOfElement = elementHorizontalPosition + (widthElement / 2);\n\n requestAnimationFrame(() => {\n const tooltipRect = tooltipElement.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n const tooltipHorizontalPosition = tooltipRect.x;\n const widthTooltip = tooltipRect.width;\n const centerOfTooltip = tooltipHorizontalPosition + (widthTooltip / 2);\n \n const centerDifferenceBetweenElementAndTooltip = Number(\n (((centerOfElement - centerOfTooltip) / widthTooltip) * 100).toFixed(2),\n );\n \n const sumDifference = (0.5 + centerDifferenceBetweenElementAndTooltip / 100) * 100;\n tooltipElement.current?.style.setProperty('--arrow-position', `${sumDifference}%`);\n });\n }\n }, [showTooltip, tooltipElement.current, targetElement.current]);\n\n useEffect(() => {\n setStateTooltipPosition(positionProp);\n }, [window.scrollY, window.scrollX, window.innerWidth]);\n\n return {\n text: onDeniedText || text,\n tooltipRef: tooltipElement,\n style: tooltipStyle,\n className: stateTooltipPosition,\n handlerSetDimensions: setTooltipDimensions,\n tooltipDimensions: tooltipDimensions,\n showTooltip,\n textError: errorMessage,\n };\n}\n"],"names":["TOOLTIP_INITIAL_HEIGHT","useTooltip","targetRef","text","width","widthProp","space","position","positionProp","errorMessage","onDeniedText","stateTooltipPosition","setStateTooltipPosition","useState","tooltipStyle","setTooltipStyle","showTooltip","setShowTooltip","tooltipDimensions","setTooltipDimensions","height","targetElement","tooltipElement","useRef","onMouseOver","e","current","contains","target","onMouseOut","onAnyScroll","useEffect","document","addEventListener","removeEventListener","targetDimensions","getBoundingClientRect","targetVerticalCenter","top","bottom","tooltipClientWidth","clientWidth","style","left","Math","min","body","max","window","scrollY","innerHeight","innerWidth","right","targetRect","x","elementHorizontalPosition","widthElement","centerOfElement","requestAnimationFrame","tooltipRect","tooltipHorizontalPosition","widthTooltip","centerOfTooltip","centerDifferenceBetweenElementAndTooltip","Number","toFixed","sumDifference","setProperty","scrollX","tooltipRef","className","handlerSetDimensions","textError"],"mappings":"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"}
|