@chayns-components/core 5.0.0-beta.885 → 5.0.0-beta.889
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.
- package/lib/cjs/components/accordion/accordion-content/AccordionContent.js +4 -2
- package/lib/cjs/components/accordion/accordion-content/AccordionContent.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-content/AccordionContent.styles.js +6 -0
- package/lib/cjs/components/accordion/accordion-content/AccordionContent.styles.js.map +1 -1
- package/lib/cjs/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/cjs/components/mention-finder/mention-finder-item/MentionFinderItem.js +4 -3
- package/lib/cjs/components/mention-finder/mention-finder-item/MentionFinderItem.js.map +1 -1
- package/lib/cjs/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js +3 -1
- package/lib/cjs/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map +1 -1
- package/lib/cjs/components/slider/Slider.js +24 -7
- package/lib/cjs/components/slider/Slider.js.map +1 -1
- package/lib/cjs/components/slider/Slider.styles.js +6 -1
- package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-content/AccordionContent.js +4 -2
- package/lib/esm/components/accordion/accordion-content/AccordionContent.js.map +1 -1
- package/lib/esm/components/accordion/accordion-content/AccordionContent.styles.js +12 -3
- package/lib/esm/components/accordion/accordion-content/AccordionContent.styles.js.map +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.js +4 -3
- package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.js.map +1 -1
- package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js +10 -5
- package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map +1 -1
- package/lib/esm/components/slider/Slider.js +24 -7
- package/lib/esm/components/slider/Slider.js.map +1 -1
- package/lib/esm/components/slider/Slider.styles.js +20 -9
- package/lib/esm/components/slider/Slider.styles.js.map +1 -1
- package/lib/types/components/accordion/accordion-content/AccordionContent.d.ts +4 -0
- package/lib/types/components/accordion/accordion-content/AccordionContent.styles.d.ts +1 -0
- package/lib/types/components/mention-finder/MentionFinder.d.ts +1 -0
- package/lib/types/components/mention-finder/mention-finder-item/MentionFinderItem.styles.d.ts +4 -1
- package/lib/types/components/slider/Slider.d.ts +4 -0
- package/lib/types/components/slider/Slider.styles.d.ts +4 -1
- package/package.json +10 -10
|
@@ -15,8 +15,17 @@ export const StyledAccordionContent = styled.div`
|
|
|
15
15
|
|
|
16
16
|
${_ref3 => {
|
|
17
17
|
let {
|
|
18
|
-
$
|
|
18
|
+
$shouldPreventBottomSpace
|
|
19
19
|
} = _ref3;
|
|
20
|
+
return $shouldPreventBottomSpace && css`
|
|
21
|
+
padding-bottom: 0;
|
|
22
|
+
`;
|
|
23
|
+
}}
|
|
24
|
+
|
|
25
|
+
${_ref4 => {
|
|
26
|
+
let {
|
|
27
|
+
$maxHeight
|
|
28
|
+
} = _ref4;
|
|
20
29
|
return typeof $maxHeight === 'number' && css`
|
|
21
30
|
max-height: ${$maxHeight}px;
|
|
22
31
|
overflow-y: scroll;
|
|
@@ -24,11 +33,11 @@ export const StyledAccordionContent = styled.div`
|
|
|
24
33
|
}}
|
|
25
34
|
|
|
26
35
|
// Styles for custom scrollbar
|
|
27
|
-
${
|
|
36
|
+
${_ref5 => {
|
|
28
37
|
let {
|
|
29
38
|
$browser,
|
|
30
39
|
theme
|
|
31
|
-
} =
|
|
40
|
+
} = _ref5;
|
|
32
41
|
return $browser === 'firefox' ? css`
|
|
33
42
|
scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
|
|
34
43
|
scrollbar-width: thin;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContent.styles.js","names":["styled","css","StyledAccordionContent","div","_ref","theme","text","_ref2","$isWrapped","_ref3","$
|
|
1
|
+
{"version":3,"file":"AccordionContent.styles.js","names":["styled","css","StyledAccordionContent","div","_ref","theme","text","_ref2","$isWrapped","_ref3","$shouldPreventBottomSpace","_ref4","$maxHeight","_ref5","$browser"],"sources":["../../../../../src/components/accordion/accordion-content/AccordionContent.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledAccordionContentProps = WithTheme<{\n $isWrapped?: boolean;\n $maxHeight?: number;\n $browser: Browser | 'bot' | null | undefined;\n $shouldPreventBottomSpace: boolean;\n}>;\n\nexport const StyledAccordionContent = styled.div<StyledAccordionContentProps>`\n color: ${({ theme }: StyledAccordionContentProps) => theme.text};\n padding: ${({ $isWrapped }) => ($isWrapped ? '0 9px 18px 26px' : '0 9px 9px 10px')};\n\n ${({ $shouldPreventBottomSpace }) =>\n $shouldPreventBottomSpace &&\n css`\n padding-bottom: 0;\n `}\n\n ${({ $maxHeight }) =>\n typeof $maxHeight === 'number' &&\n css`\n max-height: ${$maxHeight}px;\n overflow-y: scroll;\n `}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledAccordionContentProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,sBAAsB,GAAGF,MAAM,CAACG,GAAgC;AAC7E,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AACnE,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,iBAAiB,GAAG,gBAAgB;AAAA,CAAC;AACtF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAA0B,CAAC,GAAAD,KAAA;EAAA,OAC5BC,yBAAyB,IACzBT,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMU,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACb,OAAOC,UAAU,KAAK,QAAQ,IAC9BX,GAAG;AACX,0BAA0BW,UAAU;AACpC;AACA,SAAS;AAAA;AACT;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAET;EAAmC,CAAC,GAAAQ,KAAA;EAAA,OAC/CC,QAAQ,KAAK,SAAS,GAChBb,GAAG;AACjB,0CAA0CI,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionFinder.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","MentionFinderItem","StyledMentionFinder","StyledMotionMentionFinderPopup","MentionFinder","_ref","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","focusedIndex","setFocusedIndex","ref","fullMatch","searchString","regExpMatchArray","match","toLowerCase","filteredMembers","filter","_ref2","id","info","name","includes","replace","handleKeyDown","event","key","preventDefault","children","current","length","newIndex","prevElement","tabIndex","member","newElement","focus","stopPropagation","handleMemberClick","handleMemberHover","isActiveMemberShown","some","_ref3","items","map","createElement","isActive","onClick","onHover","shouldShowPopup","window","addEventListener","removeEventListener","className","initial","animate","height","opacity","exit","$popupAlignment","transition","duration","displayName"],"sources":["../../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';\n\nexport type MentionMember = {\n id: string;\n info: string;\n imageUrl: string;\n name: string;\n};\n\nexport type MentionFinderProps = {\n /**\n * The text from the input field\n */\n inputValue: string;\n /**\n * Members that can be selected\n */\n members: MentionMember[];\n /**\n * Function to be executed when a member is selected\n */\n onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n /**\n * Alignment of the popup\n */\n popupAlignment: MentionFinderPopupAlignment;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n inputValue,\n members,\n onSelect,\n popupAlignment,\n}) => {\n const [activeMember, setActiveMember] = useState(members[0]);\n const [focusedIndex, setFocusedIndex] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n const [fullMatch, searchString] = useMemo(() => {\n // eslint-disable-next-line no-irregular-whitespace\n const regExpMatchArray = inputValue.match(/@([^\\s]*)/);\n\n return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n }, [inputValue]);\n\n const filteredMembers = useMemo(\n () =>\n searchString !== ''\n ? members.filter(\n ({ id, info, name }) =>\n id.toLowerCase().includes(searchString) ||\n info.replace('chayns', '').toLowerCase().includes(searchString) ||\n name.toLowerCase().includes(searchString),\n )\n : members,\n [members, searchString],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n\n const children = ref.current?.children;\n\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (event.key === 'ArrowUp' ? -1 : 1) +\n children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const member = filteredMembers[newIndex];\n\n setActiveMember(member);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n\n if (fullMatch && activeMember) {\n onSelect({ fullMatch, member: activeMember });\n }\n }\n },\n [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect],\n );\n\n const handleMemberClick = useCallback(\n (member: MentionMember) => {\n if (fullMatch) {\n onSelect({ fullMatch, member });\n }\n },\n [fullMatch, onSelect],\n );\n\n const handleMemberHover = useCallback((member: MentionMember) => {\n setActiveMember(member);\n }, []);\n\n useEffect(() => {\n if (filteredMembers.length > 0) {\n const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n if (!isActiveMemberShown) {\n setActiveMember(filteredMembers[0]);\n }\n }\n }, [activeMember?.id, filteredMembers]);\n\n const items = useMemo(\n () =>\n filteredMembers.map((member) => (\n <MentionFinderItem\n isActive={member.id === activeMember?.id}\n key={member.id}\n member={member}\n onClick={handleMemberClick}\n onHover={handleMemberHover}\n />\n )),\n [activeMember, filteredMembers, handleMemberClick, handleMemberHover],\n );\n\n const shouldShowPopup = useMemo(() => fullMatch && items.length > 0, [fullMatch, items.length]);\n\n useEffect(() => {\n if (shouldShowPopup) {\n window.addEventListener('keydown', handleKeyDown, true);\n }\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown, true);\n };\n }, [handleKeyDown, shouldShowPopup]);\n\n return (\n <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n <AnimatePresence initial={false}>\n {shouldShowPopup && (\n <StyledMotionMentionFinderPopup\n ref={ref}\n animate={{ height: 'auto', opacity: 1 }}\n className=\"prevent-lose-focus\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $popupAlignment={popupAlignment}\n transition={{ duration: 0.15 }}\n tabIndex={0}\n >\n {items}\n </StyledMotionMentionFinderPopup>\n )}\n </AnimatePresence>\n </StyledMentionFinder>\n );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"MentionFinder.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","MentionFinderItem","StyledMentionFinder","StyledMotionMentionFinderPopup","MentionFinder","_ref","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","focusedIndex","setFocusedIndex","ref","fullMatch","searchString","regExpMatchArray","match","toLowerCase","filteredMembers","filter","_ref2","id","info","name","includes","replace","handleKeyDown","event","key","preventDefault","children","current","length","newIndex","prevElement","tabIndex","member","newElement","focus","stopPropagation","handleMemberClick","handleMemberHover","isActiveMemberShown","some","_ref3","items","map","createElement","isActive","onClick","onHover","shouldShowPopup","window","addEventListener","removeEventListener","className","initial","animate","height","opacity","exit","$popupAlignment","transition","duration","displayName"],"sources":["../../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';\n\nexport type MentionMember = {\n id: string;\n info: string;\n imageUrl: string;\n name: string;\n shouldShowRoundImage?: boolean;\n};\n\nexport type MentionFinderProps = {\n /**\n * The text from the input field\n */\n inputValue: string;\n /**\n * Members that can be selected\n */\n members: MentionMember[];\n /**\n * Function to be executed when a member is selected\n */\n onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n /**\n * Alignment of the popup\n */\n popupAlignment: MentionFinderPopupAlignment;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n inputValue,\n members,\n onSelect,\n popupAlignment,\n}) => {\n const [activeMember, setActiveMember] = useState(members[0]);\n const [focusedIndex, setFocusedIndex] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n const [fullMatch, searchString] = useMemo(() => {\n // eslint-disable-next-line no-irregular-whitespace\n const regExpMatchArray = inputValue.match(/@([^\\s]*)/);\n\n return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n }, [inputValue]);\n\n const filteredMembers = useMemo(\n () =>\n searchString !== ''\n ? members.filter(\n ({ id, info, name }) =>\n id.toLowerCase().includes(searchString) ||\n info.replace('chayns', '').toLowerCase().includes(searchString) ||\n name.toLowerCase().includes(searchString),\n )\n : members,\n [members, searchString],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n\n const children = ref.current?.children;\n\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (event.key === 'ArrowUp' ? -1 : 1) +\n children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const member = filteredMembers[newIndex];\n\n setActiveMember(member);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n\n if (fullMatch && activeMember) {\n onSelect({ fullMatch, member: activeMember });\n }\n }\n },\n [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect],\n );\n\n const handleMemberClick = useCallback(\n (member: MentionMember) => {\n if (fullMatch) {\n onSelect({ fullMatch, member });\n }\n },\n [fullMatch, onSelect],\n );\n\n const handleMemberHover = useCallback((member: MentionMember) => {\n setActiveMember(member);\n }, []);\n\n useEffect(() => {\n if (filteredMembers.length > 0) {\n const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n if (!isActiveMemberShown) {\n setActiveMember(filteredMembers[0]);\n }\n }\n }, [activeMember?.id, filteredMembers]);\n\n const items = useMemo(\n () =>\n filteredMembers.map((member) => (\n <MentionFinderItem\n isActive={member.id === activeMember?.id}\n key={member.id}\n member={member}\n onClick={handleMemberClick}\n onHover={handleMemberHover}\n />\n )),\n [activeMember, filteredMembers, handleMemberClick, handleMemberHover],\n );\n\n const shouldShowPopup = useMemo(() => fullMatch && items.length > 0, [fullMatch, items.length]);\n\n useEffect(() => {\n if (shouldShowPopup) {\n window.addEventListener('keydown', handleKeyDown, true);\n }\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown, true);\n };\n }, [handleKeyDown, shouldShowPopup]);\n\n return (\n <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n <AnimatePresence initial={false}>\n {shouldShowPopup && (\n <StyledMotionMentionFinderPopup\n ref={ref}\n animate={{ height: 'auto', opacity: 1 }}\n className=\"prevent-lose-focus\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $popupAlignment={popupAlignment}\n transition={{ duration: 0.15 }}\n tabIndex={0}\n >\n {items}\n </StyledMotionMentionFinderPopup>\n )}\n </AnimatePresence>\n </StyledMentionFinder>\n );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,11 +11,12 @@ const MentionFinderItem = _ref => {
|
|
|
11
11
|
const handleItemMouseEnter = useCallback(() => onHover(member), [member, onHover]);
|
|
12
12
|
return /*#__PURE__*/React.createElement(StyledMentionFinderItem, {
|
|
13
13
|
className: "prevent-lose-focus",
|
|
14
|
-
$isActive: isActive,
|
|
15
14
|
onClick: handleItemClick,
|
|
16
|
-
onMouseEnter: handleItemMouseEnter
|
|
15
|
+
onMouseEnter: handleItemMouseEnter,
|
|
16
|
+
$isActive: isActive
|
|
17
17
|
}, /*#__PURE__*/React.createElement(StyledMentionFinderItemImage, {
|
|
18
|
-
src: member.imageUrl
|
|
18
|
+
src: member.imageUrl,
|
|
19
|
+
$shouldShowRoundImage: member.shouldShowRoundImage
|
|
19
20
|
}), /*#__PURE__*/React.createElement(StyledMentionFinderItemContent, null, /*#__PURE__*/React.createElement(StyledMentionFinderItemContentName, null, member.name), /*#__PURE__*/React.createElement(StyledMentionFinderItemContentInfo, null, member.info)));
|
|
20
21
|
};
|
|
21
22
|
MentionFinderItem.displayName = 'MentionFinderItem';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionFinderItem.js","names":["React","useCallback","StyledMentionFinderItem","StyledMentionFinderItemContent","StyledMentionFinderItemContentInfo","StyledMentionFinderItemContentName","StyledMentionFinderItemImage","MentionFinderItem","_ref","isActive","member","onClick","onHover","handleItemClick","handleItemMouseEnter","createElement","className","
|
|
1
|
+
{"version":3,"file":"MentionFinderItem.js","names":["React","useCallback","StyledMentionFinderItem","StyledMentionFinderItemContent","StyledMentionFinderItemContentInfo","StyledMentionFinderItemContentName","StyledMentionFinderItemImage","MentionFinderItem","_ref","isActive","member","onClick","onHover","handleItemClick","handleItemMouseEnter","createElement","className","onMouseEnter","$isActive","src","imageUrl","$shouldShowRoundImage","shouldShowRoundImage","name","info","displayName"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport type { MentionMember } from '../MentionFinder';\nimport {\n StyledMentionFinderItem,\n StyledMentionFinderItemContent,\n StyledMentionFinderItemContentInfo,\n StyledMentionFinderItemContentName,\n StyledMentionFinderItemImage,\n} from './MentionFinderItem.styles';\n\nexport type MentionFinderItemProps = {\n isActive: boolean;\n member: MentionMember;\n onClick: (member: MentionMember) => void;\n onHover: (member: MentionMember) => void;\n};\n\nconst MentionFinderItem: FC<MentionFinderItemProps> = ({ isActive, member, onClick, onHover }) => {\n const handleItemClick = useCallback(() => onClick(member), [member, onClick]);\n\n const handleItemMouseEnter = useCallback(() => onHover(member), [member, onHover]);\n\n return (\n <StyledMentionFinderItem\n className=\"prevent-lose-focus\"\n onClick={handleItemClick}\n onMouseEnter={handleItemMouseEnter}\n $isActive={isActive}\n >\n <StyledMentionFinderItemImage\n src={member.imageUrl}\n $shouldShowRoundImage={member.shouldShowRoundImage}\n />\n <StyledMentionFinderItemContent>\n <StyledMentionFinderItemContentName>\n {member.name}\n </StyledMentionFinderItemContentName>\n <StyledMentionFinderItemContentInfo>\n {member.info}\n </StyledMentionFinderItemContentInfo>\n </StyledMentionFinderItemContent>\n </StyledMentionFinderItem>\n );\n};\n\nMentionFinderItem.displayName = 'MentionFinderItem';\n\nexport default MentionFinderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAE9C,SACIC,uBAAuB,EACvBC,8BAA8B,EAC9BC,kCAAkC,EAClCC,kCAAkC,EAClCC,4BAA4B,QACzB,4BAA4B;AASnC,MAAMC,iBAA6C,GAAGC,IAAA,IAA4C;EAAA,IAA3C;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,OAAO;IAAEC;EAAQ,CAAC,GAAAJ,IAAA;EACzF,MAAMK,eAAe,GAAGZ,WAAW,CAAC,MAAMU,OAAO,CAACD,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEC,OAAO,CAAC,CAAC;EAE7E,MAAMG,oBAAoB,GAAGb,WAAW,CAAC,MAAMW,OAAO,CAACF,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEE,OAAO,CAAC,CAAC;EAElF,oBACIZ,KAAA,CAAAe,aAAA,CAACb,uBAAuB;IACpBc,SAAS,EAAC,oBAAoB;IAC9BL,OAAO,EAAEE,eAAgB;IACzBI,YAAY,EAAEH,oBAAqB;IACnCI,SAAS,EAAET;EAAS,gBAEpBT,KAAA,CAAAe,aAAA,CAACT,4BAA4B;IACzBa,GAAG,EAAET,MAAM,CAACU,QAAS;IACrBC,qBAAqB,EAAEX,MAAM,CAACY;EAAqB,CACtD,CAAC,eACFtB,KAAA,CAAAe,aAAA,CAACZ,8BAA8B,qBAC3BH,KAAA,CAAAe,aAAA,CAACV,kCAAkC,QAC9BK,MAAM,CAACa,IACwB,CAAC,eACrCvB,KAAA,CAAAe,aAAA,CAACX,kCAAkC,QAC9BM,MAAM,CAACc,IACwB,CACR,CACX,CAAC;AAElC,CAAC;AAEDjB,iBAAiB,CAACkB,WAAW,GAAG,mBAAmB;AAEnD,eAAelB,iBAAiB","ignoreList":[]}
|
|
@@ -44,12 +44,17 @@ export const StyledMentionFinderItemImage = styled.img`
|
|
|
44
44
|
}},
|
|
45
45
|
0.1
|
|
46
46
|
);
|
|
47
|
-
border-radius:
|
|
47
|
+
border-radius: ${_ref5 => {
|
|
48
|
+
let {
|
|
49
|
+
$shouldShowRoundImage
|
|
50
|
+
} = _ref5;
|
|
51
|
+
return $shouldShowRoundImage ? '50%' : 'initial';
|
|
52
|
+
}};
|
|
48
53
|
box-shadow: 0 0 0 1px
|
|
49
|
-
rgba(${
|
|
54
|
+
rgba(${_ref6 => {
|
|
50
55
|
let {
|
|
51
56
|
theme
|
|
52
|
-
} =
|
|
57
|
+
} = _ref6;
|
|
53
58
|
return theme['009-rgb'];
|
|
54
59
|
}}, 0.08) inset;
|
|
55
60
|
flex: 0 0 auto;
|
|
@@ -59,10 +64,10 @@ export const StyledMentionFinderItemImage = styled.img`
|
|
|
59
64
|
width: 40px;
|
|
60
65
|
`;
|
|
61
66
|
export const StyledMentionFinderItemContent = styled.div`
|
|
62
|
-
color: ${
|
|
67
|
+
color: ${_ref7 => {
|
|
63
68
|
let {
|
|
64
69
|
theme
|
|
65
|
-
} =
|
|
70
|
+
} = _ref7;
|
|
66
71
|
return theme.text;
|
|
67
72
|
}};
|
|
68
73
|
display: flex;
|
package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionFinderItem.styles.js","names":["styled","css","StyledMentionFinderItem","div","_ref","theme","_ref2","_ref3","$isActive","StyledMentionFinderItemImage","img","_ref4","_ref5","
|
|
1
|
+
{"version":3,"file":"MentionFinderItem.styles.js","names":["styled","css","StyledMentionFinderItem","div","_ref","theme","_ref2","_ref3","$isActive","StyledMentionFinderItemImage","img","_ref4","_ref5","$shouldShowRoundImage","_ref6","StyledMentionFinderItemContent","_ref7","text","StyledMentionFinderItemContentName","StyledMentionFinderItemContentInfo"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMentionFinderItemProps = WithTheme<{ $isActive: boolean }>;\n\nexport const StyledMentionFinderItem = styled.div<StyledMentionFinderItemProps>`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding: 10px 8px;\n\n &:not(:last-child) {\n border-bottom: 1px solid\n rgba(${({ theme }: StyledMentionFinderItemProps) => theme['text-rgb']}, 0.15);\n }\n\n &:nth-child(even) {\n background-color: ${({ theme }: StyledMentionFinderItemProps) => theme['101']};\n }\n\n ${({ $isActive, theme }) =>\n $isActive &&\n css`\n background-color: ${theme['102']} !important;\n `}\n`;\n\ntype StyledMentionFinderItemImageProps = WithTheme<{\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledMentionFinderItemImage = styled.img<StyledMentionFinderItemImageProps>`\n background-color: rgba(\n ${({ theme }: StyledMentionFinderItemImageProps) => theme['text-rgb']},\n 0.1\n );\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : 'initial')};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledMentionFinderItemImageProps) => theme['009-rgb']}, 0.08) inset;\n flex: 0 0 auto;\n height: 40px;\n overflow: hidden;\n transition: border-radius 0.3s ease;\n width: 40px;\n`;\n\ntype StyledMentionFinderItemContentProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemContent = styled.div`\n color: ${({ theme }: StyledMentionFinderItemContentProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n justify-content: center;\n line-height: normal;\n margin-left: 10px;\n min-width: 0;\n`;\n\nexport const StyledMentionFinderItemContentName = styled.div``;\n\nexport const StyledMentionFinderItemContentInfo = styled.div`\n font-size: 85%;\n margin-top: 2px;\n opacity: 0.75;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,uBAAuB,GAAGF,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmBC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA;AACjF;AACA;AACA;AACA,4BAA4BC,KAAA;EAAA,IAAC;IAAED;EAAoC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,KAAK,CAAC;AAAA;AACrF;AACA;AACA,MAAME,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACnBC,SAAS,IACTP,GAAG;AACX,gCAAgCI,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAMI,4BAA4B,GAAGT,MAAM,CAACU,GAAsC;AACzF;AACA,UAAUC,KAAA;EAAA,IAAC;IAAEN;EAAyC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAAC,UAAU,CAAC;AAAA;AAC7E;AACA;AACA,qBAAqBO,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAG,SAAS;AAAA,CAAC;AAC/F;AACA,eAAeC,KAAA;EAAA,IAAC;IAAET;EAAyC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAAC,SAAS,CAAC;AAAA;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMU,8BAA8B,GAAGf,MAAM,CAACG,GAAG;AACxD,aAAaa,KAAA;EAAA,IAAC;IAAEX;EAA2C,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAACY,IAAI;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGlB,MAAM,CAACG,GAAG,EAAE;AAE9D,OAAO,MAAMgB,kCAAkC,GAAGnB,MAAM,CAACG,GAAG;AAC5D;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -12,6 +12,7 @@ const Slider = _ref => {
|
|
|
12
12
|
onSelect,
|
|
13
13
|
onChange,
|
|
14
14
|
interval,
|
|
15
|
+
isDisabled,
|
|
15
16
|
thumbLabelFormatter,
|
|
16
17
|
shouldShowThumbLabel = false,
|
|
17
18
|
steps = 1
|
|
@@ -58,6 +59,9 @@ const Slider = _ref => {
|
|
|
58
59
|
}
|
|
59
60
|
}, [fromValue, toValue]);
|
|
60
61
|
const handleMouseUp = useCallback(() => {
|
|
62
|
+
if (isDisabled) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
61
65
|
void setRefreshScrollEnabled(true);
|
|
62
66
|
const from = Number(fromSliderRef.current?.value);
|
|
63
67
|
const to = Number(toSliderRef.current?.value);
|
|
@@ -67,7 +71,7 @@ const Slider = _ref => {
|
|
|
67
71
|
minValue: from
|
|
68
72
|
} : undefined);
|
|
69
73
|
}
|
|
70
|
-
}, [interval, onSelect]);
|
|
74
|
+
}, [interval, isDisabled, onSelect]);
|
|
71
75
|
const handleControlFromSlider = useCallback(event => {
|
|
72
76
|
if (!fromSliderRef.current || !toSliderRef.current) {
|
|
73
77
|
return;
|
|
@@ -101,6 +105,9 @@ const Slider = _ref => {
|
|
|
101
105
|
}
|
|
102
106
|
}, [maxValue, minValue, onChange, steps, theme]);
|
|
103
107
|
const handleControlToSlider = useCallback(event => {
|
|
108
|
+
if (isDisabled) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
104
111
|
void setRefreshScrollEnabled(false);
|
|
105
112
|
if (!fromSliderRef.current || !toSliderRef.current) {
|
|
106
113
|
return;
|
|
@@ -132,7 +139,7 @@ const Slider = _ref => {
|
|
|
132
139
|
} else {
|
|
133
140
|
toSliderRef.current.value = String(from);
|
|
134
141
|
}
|
|
135
|
-
}, [maxValue, minValue, onChange, steps, theme]);
|
|
142
|
+
}, [isDisabled, maxValue, minValue, onChange, steps, theme]);
|
|
136
143
|
useEffect(() => {
|
|
137
144
|
if (!fromSliderRef.current || !toSliderRef.current || !interval) {
|
|
138
145
|
return;
|
|
@@ -154,6 +161,9 @@ const Slider = _ref => {
|
|
|
154
161
|
* This function updates the value
|
|
155
162
|
*/
|
|
156
163
|
const handleInputChange = useCallback(event => {
|
|
164
|
+
if (isDisabled) {
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
157
167
|
void setRefreshScrollEnabled(false);
|
|
158
168
|
let newValue = Number(event.target.value);
|
|
159
169
|
if (newValue > maxValue || newValue > maxValue - maxValue % steps) {
|
|
@@ -171,7 +181,7 @@ const Slider = _ref => {
|
|
|
171
181
|
if (onChange) {
|
|
172
182
|
onChange(newValue);
|
|
173
183
|
}
|
|
174
|
-
}, [handleControlFromSlider, interval, maxValue, minValue, onChange, steps]);
|
|
184
|
+
}, [handleControlFromSlider, interval, isDisabled, maxValue, minValue, onChange, steps]);
|
|
175
185
|
const fromSliderThumbPosition = useMemo(() => {
|
|
176
186
|
if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {
|
|
177
187
|
return calculateGradientOffset({
|
|
@@ -209,11 +219,17 @@ const Slider = _ref => {
|
|
|
209
219
|
popupWidth: thumbWidth
|
|
210
220
|
}), [fromValue, maxValue, minValue, thumbWidth]);
|
|
211
221
|
const handleTouchStart = useCallback(() => {
|
|
222
|
+
if (isDisabled) {
|
|
223
|
+
return;
|
|
224
|
+
}
|
|
212
225
|
if (shouldShowThumbLabel) {
|
|
213
226
|
setIsBigSlider(true);
|
|
214
227
|
}
|
|
215
|
-
}, [shouldShowThumbLabel]);
|
|
228
|
+
}, [isDisabled, shouldShowThumbLabel]);
|
|
216
229
|
const handleTouchEnd = useCallback(() => {
|
|
230
|
+
if (isDisabled) {
|
|
231
|
+
return;
|
|
232
|
+
}
|
|
217
233
|
const from = Number(fromSliderRef.current?.value);
|
|
218
234
|
const to = Number(toSliderRef.current?.value);
|
|
219
235
|
if (typeof onSelect === 'function') {
|
|
@@ -225,9 +241,10 @@ const Slider = _ref => {
|
|
|
225
241
|
if (shouldShowThumbLabel) {
|
|
226
242
|
setIsBigSlider(false);
|
|
227
243
|
}
|
|
228
|
-
}, [interval, onSelect, shouldShowThumbLabel]);
|
|
244
|
+
}, [interval, isDisabled, onSelect, shouldShowThumbLabel]);
|
|
229
245
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledSlider, {
|
|
230
|
-
ref: sliderWrapperRef
|
|
246
|
+
ref: sliderWrapperRef,
|
|
247
|
+
$isDisabled: isDisabled
|
|
231
248
|
}, /*#__PURE__*/React.createElement(StyledSliderInput, {
|
|
232
249
|
animate: {
|
|
233
250
|
height: isBigSlider ? 30 : 10
|
|
@@ -296,7 +313,7 @@ const Slider = _ref => {
|
|
|
296
313
|
onTouchEnd: handleTouchEnd,
|
|
297
314
|
onChange: handleControlToSlider,
|
|
298
315
|
onMouseUp: handleMouseUp
|
|
299
|
-
})), [isBigSlider, interval, fromValue, maxValue, minValue, handleTouchStart, handleTouchEnd, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbWidth, fromSliderThumbContentPosition, thumbLabelFormatter, toSliderThumbPosition, toSliderThumbContentPosition, toValue, handleControlToSlider]);
|
|
316
|
+
})), [isDisabled, isBigSlider, interval, fromValue, maxValue, minValue, handleTouchStart, handleTouchEnd, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbWidth, fromSliderThumbContentPosition, thumbLabelFormatter, toSliderThumbPosition, toSliderThumbContentPosition, toValue, handleControlToSlider]);
|
|
300
317
|
};
|
|
301
318
|
Slider.displayName = 'Slider';
|
|
302
319
|
export default Slider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","calculateGradientOffset","calculatePopupPosition","fillSlider","getThumbMaxWidth","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","theme","maxNumber","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","newValue","target","Math","round","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","fromSliderThumbPosition","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","createElement","ref","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","$position","$isBigSlider","$width","displayName"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n calculateGradientOffset,\n calculatePopupPosition,\n fillSlider,\n getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /**\n * The range that can be selected with two thumbs..\n */\n interval?: SliderInterval;\n /**\n * The maximum value of the slider.\n */\n maxValue: number;\n /**\n * The minimum value of the slider.\n */\n minValue: number;\n /**\n * Function that will be executed when the value is selected.\n */\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Function that will be executed when the value is changed.\n */\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Whether the current value should be displayed inside the slider thumb.\n */\n shouldShowThumbLabel?: boolean;\n /**\n * The steps of the slider.\n */\n steps?: number;\n /**\n * A function to format the thumb label.\n */\n thumbLabelFormatter?: (value: number) => string;\n /**\n * the Value that the slider should have.\n */\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n maxValue,\n minValue,\n value,\n onSelect,\n onChange,\n interval,\n thumbLabelFormatter,\n shouldShowThumbLabel = false,\n steps = 1,\n}) => {\n const [fromValue, setFromValue] = useState(0);\n const [toValue, setToValue] = useState(maxValue);\n const [thumbWidth, setThumbWidth] = useState(20);\n const [isBigSlider, setIsBigSlider] = useState(false);\n\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n const theme = useTheme();\n\n useEffect(() => {\n if (shouldShowThumbLabel) {\n setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n }\n }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n /**\n * This function sets the value\n */\n useEffect(() => {\n if (typeof value !== 'number') {\n return;\n }\n\n if (value >= minValue && value <= maxValue) {\n setFromValue(value);\n }\n }, [maxValue, minValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n setFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n setToValue(fromValue);\n }\n }, [fromValue, toValue]);\n\n const handleMouseUp = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n let newValue = Number(event.target.value);\n\n if (newValue > maxValue || newValue > maxValue - (maxValue % steps)) {\n newValue = maxValue;\n } else if (newValue < minValue) {\n newValue = minValue;\n } else {\n newValue = Math.round(newValue / steps) * steps;\n }\n\n setFromValue(newValue);\n\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: newValue });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n fromValue: newValue,\n theme,\n });\n\n if (newValue > to) {\n fromSliderRef.current.value = String(to);\n } else {\n fromSliderRef.current.value = String(newValue);\n }\n },\n [maxValue, minValue, onChange, steps, theme],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n let newValue = Number(event.target.value);\n\n if (newValue > maxValue || newValue > maxValue - (maxValue % steps)) {\n newValue = maxValue;\n } else if (newValue < minValue) {\n newValue = minValue;\n } else {\n newValue = Math.round(newValue / steps) * steps;\n }\n\n setToValue(newValue);\n\n const from = Number(fromSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: newValue, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n toValue: newValue,\n theme,\n });\n\n if (from <= newValue) {\n toSliderRef.current.value = String(newValue);\n } else {\n toSliderRef.current.value = String(from);\n }\n },\n [maxValue, minValue, onChange, steps, theme],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n return;\n }\n\n setFromValue(interval.minValue);\n setToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: interval can´t be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /**\n * This function updates the value\n */\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n let newValue = Number(event.target.value);\n\n if (newValue > maxValue || newValue > maxValue - (maxValue % steps)) {\n newValue = maxValue;\n } else if (newValue < minValue) {\n newValue = minValue;\n } else {\n newValue = Math.round(newValue / steps) * steps;\n }\n\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n setFromValue(newValue);\n\n if (onChange) {\n onChange(newValue);\n }\n },\n [handleControlFromSlider, interval, maxValue, minValue, onChange, steps],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: fromValue,\n thumbWidth: 20,\n containerWidth: fromSliderRef.current.offsetWidth,\n });\n }\n\n return 0;\n }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: toValue,\n thumbWidth: 20,\n containerWidth: toSliderRef.current.offsetWidth,\n });\n }\n return 0;\n }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n const toSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: toValue,\n popupWidth: thumbWidth,\n }),\n [maxValue, minValue, thumbWidth, toValue],\n );\n\n const fromSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: fromValue,\n popupWidth: thumbWidth,\n }),\n [fromValue, maxValue, minValue, thumbWidth],\n );\n\n const handleTouchStart = useCallback(() => {\n if (shouldShowThumbLabel) {\n setIsBigSlider(true);\n }\n }, [shouldShowThumbLabel]);\n\n const handleTouchEnd = useCallback(() => {\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(false);\n }\n }, [interval, onSelect, shouldShowThumbLabel]);\n\n return useMemo(\n () => (\n <StyledSlider ref={sliderWrapperRef}>\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={0.01}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $max={maxValue}\n $min={minValue}\n $value={fromValue}\n />\n <StyledSliderThumb\n ref={fromSliderThumbRef}\n $position={fromSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={fromSliderThumbContentPosition}\n ref={fromSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb\n ref={toSliderThumbRef}\n $position={toSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={toSliderThumbContentPosition}\n ref={toSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n $max={maxValue}\n $min={minValue}\n $value={toValue}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={0.01}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n />\n )}\n </StyledSlider>\n ),\n [\n isBigSlider,\n interval,\n fromValue,\n maxValue,\n minValue,\n handleTouchStart,\n handleTouchEnd,\n handleInputChange,\n handleMouseUp,\n fromSliderThumbPosition,\n shouldShowThumbLabel,\n thumbWidth,\n fromSliderThumbContentPosition,\n thumbLabelFormatter,\n toSliderThumbPosition,\n toSliderThumbContentPosition,\n toValue,\n handleControlToSlider,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Slider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","calculateGradientOffset","calculatePopupPosition","fillSlider","getThumbMaxWidth","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","isDisabled","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","theme","maxNumber","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","newValue","target","Math","round","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","fromSliderThumbPosition","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","createElement","ref","$isDisabled","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","$position","$isBigSlider","$width","displayName"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n calculateGradientOffset,\n calculatePopupPosition,\n fillSlider,\n getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /**\n * The range that can be selected with two thumbs..\n */\n interval?: SliderInterval;\n /**\n * Whether the slider is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum value of the slider.\n */\n maxValue: number;\n /**\n * The minimum value of the slider.\n */\n minValue: number;\n /**\n * Function that will be executed when the value is selected.\n */\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Function that will be executed when the value is changed.\n */\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Whether the current value should be displayed inside the slider thumb.\n */\n shouldShowThumbLabel?: boolean;\n /**\n * The steps of the slider.\n */\n steps?: number;\n /**\n * A function to format the thumb label.\n */\n thumbLabelFormatter?: (value: number) => string;\n /**\n * the Value that the slider should have.\n */\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n maxValue,\n minValue,\n value,\n onSelect,\n onChange,\n interval,\n isDisabled,\n thumbLabelFormatter,\n shouldShowThumbLabel = false,\n steps = 1,\n}) => {\n const [fromValue, setFromValue] = useState(0);\n const [toValue, setToValue] = useState(maxValue);\n const [thumbWidth, setThumbWidth] = useState(20);\n const [isBigSlider, setIsBigSlider] = useState(false);\n\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n const theme = useTheme();\n\n useEffect(() => {\n if (shouldShowThumbLabel) {\n setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n }\n }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n /**\n * This function sets the value\n */\n useEffect(() => {\n if (typeof value !== 'number') {\n return;\n }\n\n if (value >= minValue && value <= maxValue) {\n setFromValue(value);\n }\n }, [maxValue, minValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n setFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n setToValue(fromValue);\n }\n }, [fromValue, toValue]);\n\n const handleMouseUp = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n void setRefreshScrollEnabled(true);\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, isDisabled, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n let newValue = Number(event.target.value);\n\n if (newValue > maxValue || newValue > maxValue - (maxValue % steps)) {\n newValue = maxValue;\n } else if (newValue < minValue) {\n newValue = minValue;\n } else {\n newValue = Math.round(newValue / steps) * steps;\n }\n\n setFromValue(newValue);\n\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: newValue });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n fromValue: newValue,\n theme,\n });\n\n if (newValue > to) {\n fromSliderRef.current.value = String(to);\n } else {\n fromSliderRef.current.value = String(newValue);\n }\n },\n [maxValue, minValue, onChange, steps, theme],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n\n void setRefreshScrollEnabled(false);\n\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n let newValue = Number(event.target.value);\n\n if (newValue > maxValue || newValue > maxValue - (maxValue % steps)) {\n newValue = maxValue;\n } else if (newValue < minValue) {\n newValue = minValue;\n } else {\n newValue = Math.round(newValue / steps) * steps;\n }\n\n setToValue(newValue);\n\n const from = Number(fromSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: newValue, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n toValue: newValue,\n theme,\n });\n\n if (from <= newValue) {\n toSliderRef.current.value = String(newValue);\n } else {\n toSliderRef.current.value = String(from);\n }\n },\n [isDisabled, maxValue, minValue, onChange, steps, theme],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n return;\n }\n\n setFromValue(interval.minValue);\n setToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: interval can´t be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /**\n * This function updates the value\n */\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n\n void setRefreshScrollEnabled(false);\n\n let newValue = Number(event.target.value);\n\n if (newValue > maxValue || newValue > maxValue - (maxValue % steps)) {\n newValue = maxValue;\n } else if (newValue < minValue) {\n newValue = minValue;\n } else {\n newValue = Math.round(newValue / steps) * steps;\n }\n\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n setFromValue(newValue);\n\n if (onChange) {\n onChange(newValue);\n }\n },\n [handleControlFromSlider, interval, isDisabled, maxValue, minValue, onChange, steps],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: fromValue,\n thumbWidth: 20,\n containerWidth: fromSliderRef.current.offsetWidth,\n });\n }\n\n return 0;\n }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: toValue,\n thumbWidth: 20,\n containerWidth: toSliderRef.current.offsetWidth,\n });\n }\n return 0;\n }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n const toSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: toValue,\n popupWidth: thumbWidth,\n }),\n [maxValue, minValue, thumbWidth, toValue],\n );\n\n const fromSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: fromValue,\n popupWidth: thumbWidth,\n }),\n [fromValue, maxValue, minValue, thumbWidth],\n );\n\n const handleTouchStart = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(true);\n }\n }, [isDisabled, shouldShowThumbLabel]);\n\n const handleTouchEnd = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(false);\n }\n }, [interval, isDisabled, onSelect, shouldShowThumbLabel]);\n\n return useMemo(\n () => (\n <StyledSlider ref={sliderWrapperRef} $isDisabled={isDisabled}>\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={0.01}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $max={maxValue}\n $min={minValue}\n $value={fromValue}\n />\n <StyledSliderThumb\n ref={fromSliderThumbRef}\n $position={fromSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={fromSliderThumbContentPosition}\n ref={fromSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb\n ref={toSliderThumbRef}\n $position={toSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={toSliderThumbContentPosition}\n ref={toSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n $max={maxValue}\n $min={minValue}\n $value={toValue}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={0.01}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n />\n )}\n </StyledSlider>\n ),\n [\n isDisabled,\n isBigSlider,\n interval,\n fromValue,\n maxValue,\n minValue,\n handleTouchStart,\n handleTouchEnd,\n handleInputChange,\n handleMouseUp,\n fromSliderThumbPosition,\n shouldShowThumbLabel,\n thumbWidth,\n fromSliderThumbContentPosition,\n thumbLabelFormatter,\n toSliderThumbPosition,\n toSliderThumbContentPosition,\n toValue,\n handleControlToSlider,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,YAAY;AACpD,OAAOC,KAAK,IAAqBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACjG,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SACIC,uBAAuB,EACvBC,sBAAsB,EACtBC,UAAU,EACVC,gBAAgB,QACb,oBAAoB;AAC3B,SACIC,YAAY,EACZC,iBAAiB,EACjBC,iBAAiB,EACjBC,sBAAsB,QACnB,iBAAiB;AAkDxB,MAAMC,MAAuB,GAAGC,IAAA,IAW1B;EAAA,IAX2B;IAC7BC,QAAQ;IACRC,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,mBAAmB;IACnBC,oBAAoB,GAAG,KAAK;IAC5BC,KAAK,GAAG;EACZ,CAAC,GAAAV,IAAA;EACG,MAAM,CAACW,SAAS,EAAEC,YAAY,CAAC,GAAGxB,QAAQ,CAAC,CAAC,CAAC;EAC7C,MAAM,CAACyB,OAAO,EAAEC,UAAU,CAAC,GAAG1B,QAAQ,CAACa,QAAQ,CAAC;EAChD,MAAM,CAACc,UAAU,EAAEC,aAAa,CAAC,GAAG5B,QAAQ,CAAC,EAAE,CAAC;EAChD,MAAM,CAAC6B,WAAW,EAAEC,cAAc,CAAC,GAAG9B,QAAQ,CAAC,KAAK,CAAC;EAErD,MAAM+B,aAAa,GAAGhC,MAAM,CAAmB,IAAI,CAAC;EACpD,MAAMiC,WAAW,GAAGjC,MAAM,CAAmB,IAAI,CAAC;EAClD,MAAMkC,kBAAkB,GAAGlC,MAAM,CAAiB,IAAI,CAAC;EACvD,MAAMmC,gBAAgB,GAAGnC,MAAM,CAAiB,IAAI,CAAC;EACrD,MAAMoC,yBAAyB,GAAGpC,MAAM,CAAiB,IAAI,CAAC;EAC9D,MAAMqC,uBAAuB,GAAGrC,MAAM,CAAiB,IAAI,CAAC;EAC5D,MAAMsC,gBAAgB,GAAGtC,MAAM,CAAiB,IAAI,CAAC;EAErD,MAAMuC,iBAAiB,GAAGpC,cAAc,CAACmC,gBAAgB,CAAC;EAE1D,MAAME,KAAK,GAAGtC,QAAQ,CAAC,CAAC;EAExBJ,SAAS,CAAC,MAAM;IACZ,IAAIwB,oBAAoB,EAAE;MACtBO,aAAa,CAACtB,gBAAgB,CAAC;QAAEkC,SAAS,EAAE3B,QAAQ;QAAEO;MAAoB,CAAC,CAAC,CAAC;IACjF;EACJ,CAAC,EAAE,CAACP,QAAQ,EAAEQ,oBAAoB,EAAED,mBAAmB,CAAC,CAAC;;EAEzD;AACJ;AACA;EACIvB,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOkB,KAAK,KAAK,QAAQ,EAAE;MAC3B;IACJ;IAEA,IAAIA,KAAK,IAAID,QAAQ,IAAIC,KAAK,IAAIF,QAAQ,EAAE;MACxCW,YAAY,CAACT,KAAK,CAAC;IACvB;EACJ,CAAC,EAAE,CAACF,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,CAAC,CAAC;EAE/BlB,SAAS,CAAC,MAAM;IACZ,IAAI0B,SAAS,GAAGE,OAAO,EAAE;MACrBD,YAAY,CAACC,OAAO,CAAC;IACzB;IAEA,IAAIA,OAAO,GAAGF,SAAS,EAAE;MACrBG,UAAU,CAACH,SAAS,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,SAAS,EAAEE,OAAO,CAAC,CAAC;EAExB,MAAMgB,aAAa,GAAG7C,WAAW,CAAC,MAAM;IACpC,IAAIuB,UAAU,EAAE;MACZ;IACJ;IAEA,KAAKzB,uBAAuB,CAAC,IAAI,CAAC;IAElC,MAAMgD,IAAI,GAAGC,MAAM,CAACZ,aAAa,CAACa,OAAO,EAAE7B,KAAK,CAAC;IACjD,MAAM8B,EAAE,GAAGF,MAAM,CAACX,WAAW,CAACY,OAAO,EAAE7B,KAAK,CAAC;IAE7C,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CACJE,QAAQ,GAAG4B,SAAS,GAAGJ,IAAI,EAC3BxB,QAAQ,GAAG;QAAEL,QAAQ,EAAEgC,EAAE;QAAE/B,QAAQ,EAAE4B;MAAK,CAAC,GAAGI,SAClD,CAAC;IACL;EACJ,CAAC,EAAE,CAAC5B,QAAQ,EAAEC,UAAU,EAAEH,QAAQ,CAAC,CAAC;EAEpC,MAAM+B,uBAAuB,GAAGnD,WAAW,CACtCoD,KAAoC,IAAK;IACtC,IAAI,CAACjB,aAAa,CAACa,OAAO,IAAI,CAACZ,WAAW,CAACY,OAAO,EAAE;MAChD;IACJ;IAEA,IAAIK,QAAQ,GAAGN,MAAM,CAACK,KAAK,CAACE,MAAM,CAACnC,KAAK,CAAC;IAEzC,IAAIkC,QAAQ,GAAGpC,QAAQ,IAAIoC,QAAQ,GAAGpC,QAAQ,GAAIA,QAAQ,GAAGS,KAAM,EAAE;MACjE2B,QAAQ,GAAGpC,QAAQ;IACvB,CAAC,MAAM,IAAIoC,QAAQ,GAAGnC,QAAQ,EAAE;MAC5BmC,QAAQ,GAAGnC,QAAQ;IACvB,CAAC,MAAM;MACHmC,QAAQ,GAAGE,IAAI,CAACC,KAAK,CAACH,QAAQ,GAAG3B,KAAK,CAAC,GAAGA,KAAK;IACnD;IAEAE,YAAY,CAACyB,QAAQ,CAAC;IAEtB,MAAMJ,EAAE,GAAGF,MAAM,CAACX,WAAW,CAACY,OAAO,CAAC7B,KAAK,CAAC;IAE5C,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAAC6B,SAAS,EAAE;QAAEjC,QAAQ,EAAEgC,EAAE;QAAE/B,QAAQ,EAAEmC;MAAS,CAAC,CAAC;IAC7D;IAEA5C,UAAU,CAAC;MACPgD,QAAQ,EAAErB,WAAW,CAACY,OAAO;MAC7BU,UAAU,EAAEvB,aAAa,CAACa,OAAO;MACjCrB,SAAS,EAAE0B,QAAQ;MACnBV;IACJ,CAAC,CAAC;IAEF,IAAIU,QAAQ,GAAGJ,EAAE,EAAE;MACfd,aAAa,CAACa,OAAO,CAAC7B,KAAK,GAAGwC,MAAM,CAACV,EAAE,CAAC;IAC5C,CAAC,MAAM;MACHd,aAAa,CAACa,OAAO,CAAC7B,KAAK,GAAGwC,MAAM,CAACN,QAAQ,CAAC;IAClD;EACJ,CAAC,EACD,CAACpC,QAAQ,EAAEC,QAAQ,EAAEG,QAAQ,EAAEK,KAAK,EAAEiB,KAAK,CAC/C,CAAC;EAED,MAAMiB,qBAAqB,GAAG5D,WAAW,CACpCoD,KAAoC,IAAK;IACtC,IAAI7B,UAAU,EAAE;MACZ;IACJ;IAEA,KAAKzB,uBAAuB,CAAC,KAAK,CAAC;IAEnC,IAAI,CAACqC,aAAa,CAACa,OAAO,IAAI,CAACZ,WAAW,CAACY,OAAO,EAAE;MAChD;IACJ;IAEA,IAAIK,QAAQ,GAAGN,MAAM,CAACK,KAAK,CAACE,MAAM,CAACnC,KAAK,CAAC;IAEzC,IAAIkC,QAAQ,GAAGpC,QAAQ,IAAIoC,QAAQ,GAAGpC,QAAQ,GAAIA,QAAQ,GAAGS,KAAM,EAAE;MACjE2B,QAAQ,GAAGpC,QAAQ;IACvB,CAAC,MAAM,IAAIoC,QAAQ,GAAGnC,QAAQ,EAAE;MAC5BmC,QAAQ,GAAGnC,QAAQ;IACvB,CAAC,MAAM;MACHmC,QAAQ,GAAGE,IAAI,CAACC,KAAK,CAACH,QAAQ,GAAG3B,KAAK,CAAC,GAAGA,KAAK;IACnD;IAEAI,UAAU,CAACuB,QAAQ,CAAC;IAEpB,MAAMP,IAAI,GAAGC,MAAM,CAACZ,aAAa,CAACa,OAAO,CAAC7B,KAAK,CAAC;IAEhD,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAAC6B,SAAS,EAAE;QAAEjC,QAAQ,EAAEoC,QAAQ;QAAEnC,QAAQ,EAAE4B;MAAK,CAAC,CAAC;IAC/D;IAEArC,UAAU,CAAC;MACPgD,QAAQ,EAAErB,WAAW,CAACY,OAAO;MAC7BU,UAAU,EAAEvB,aAAa,CAACa,OAAO;MACjCnB,OAAO,EAAEwB,QAAQ;MACjBV;IACJ,CAAC,CAAC;IAEF,IAAIG,IAAI,IAAIO,QAAQ,EAAE;MAClBjB,WAAW,CAACY,OAAO,CAAC7B,KAAK,GAAGwC,MAAM,CAACN,QAAQ,CAAC;IAChD,CAAC,MAAM;MACHjB,WAAW,CAACY,OAAO,CAAC7B,KAAK,GAAGwC,MAAM,CAACb,IAAI,CAAC;IAC5C;EACJ,CAAC,EACD,CAACvB,UAAU,EAAEN,QAAQ,EAAEC,QAAQ,EAAEG,QAAQ,EAAEK,KAAK,EAAEiB,KAAK,CAC3D,CAAC;EAED1C,SAAS,CAAC,MAAM;IACZ,IAAI,CAACkC,aAAa,CAACa,OAAO,IAAI,CAACZ,WAAW,CAACY,OAAO,IAAI,CAAC1B,QAAQ,EAAE;MAC7D;IACJ;IAEAM,YAAY,CAACN,QAAQ,CAACJ,QAAQ,CAAC;IAC/BY,UAAU,CAACR,QAAQ,CAACL,QAAQ,CAAC;IAE7BkB,aAAa,CAACa,OAAO,CAAC7B,KAAK,GAAGwC,MAAM,CAACrC,QAAQ,CAACJ,QAAQ,CAAC;IACvDkB,WAAW,CAACY,OAAO,CAAC7B,KAAK,GAAGwC,MAAM,CAACrC,QAAQ,CAACL,QAAQ,CAAC;IAErDR,UAAU,CAAC;MACPiD,UAAU,EAAEvB,aAAa,CAACa,OAAO;MACjCS,QAAQ,EAAErB,WAAW,CAACY,OAAO;MAC7BL;IACJ,CAAC,CAAC;IACF;IACA;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;;EAEX;AACJ;AACA;EACI,MAAMkB,iBAAiB,GAAG7D,WAAW,CAChCoD,KAAoC,IAAK;IACtC,IAAI7B,UAAU,EAAE;MACZ;IACJ;IAEA,KAAKzB,uBAAuB,CAAC,KAAK,CAAC;IAEnC,IAAIuD,QAAQ,GAAGN,MAAM,CAACK,KAAK,CAACE,MAAM,CAACnC,KAAK,CAAC;IAEzC,IAAIkC,QAAQ,GAAGpC,QAAQ,IAAIoC,QAAQ,GAAGpC,QAAQ,GAAIA,QAAQ,GAAGS,KAAM,EAAE;MACjE2B,QAAQ,GAAGpC,QAAQ;IACvB,CAAC,MAAM,IAAIoC,QAAQ,GAAGnC,QAAQ,EAAE;MAC5BmC,QAAQ,GAAGnC,QAAQ;IACvB,CAAC,MAAM;MACHmC,QAAQ,GAAGE,IAAI,CAACC,KAAK,CAACH,QAAQ,GAAG3B,KAAK,CAAC,GAAGA,KAAK;IACnD;IAEA,IAAIJ,QAAQ,EAAE;MACV6B,uBAAuB,CAACC,KAAK,CAAC;MAE9B;IACJ;IAEAxB,YAAY,CAACyB,QAAQ,CAAC;IAEtB,IAAIhC,QAAQ,EAAE;MACVA,QAAQ,CAACgC,QAAQ,CAAC;IACtB;EACJ,CAAC,EACD,CAACF,uBAAuB,EAAE7B,QAAQ,EAAEC,UAAU,EAAEN,QAAQ,EAAEC,QAAQ,EAAEG,QAAQ,EAAEK,KAAK,CACvF,CAAC;EAED,MAAMoC,uBAAuB,GAAG5D,OAAO,CAAC,MAAM;IAC1C,IAAIiC,aAAa,CAACa,OAAO,IAAIX,kBAAkB,CAACW,OAAO,IAAIN,iBAAiB,EAAE;MAC1E,OAAOnC,uBAAuB,CAAC;QAC3BwD,GAAG,EAAE9C,QAAQ;QACb+C,GAAG,EAAE9C,QAAQ;QACbC,KAAK,EAAEQ,SAAS;QAChBI,UAAU,EAAE,EAAE;QACdkC,cAAc,EAAE9B,aAAa,CAACa,OAAO,CAACkB;MAC1C,CAAC,CAAC;IACN;IAEA,OAAO,CAAC;EACZ,CAAC,EAAE,CAACvC,SAAS,EAAEV,QAAQ,EAAEC,QAAQ,EAAEwB,iBAAiB,CAAC,CAAC;EAEtD,MAAMyB,qBAAqB,GAAGjE,OAAO,CAAC,MAAM;IACxC,IAAIkC,WAAW,CAACY,OAAO,IAAIV,gBAAgB,CAACU,OAAO,IAAIN,iBAAiB,EAAE;MACtE,OAAOnC,uBAAuB,CAAC;QAC3BwD,GAAG,EAAE9C,QAAQ;QACb+C,GAAG,EAAE9C,QAAQ;QACbC,KAAK,EAAEU,OAAO;QACdE,UAAU,EAAE,EAAE;QACdkC,cAAc,EAAE7B,WAAW,CAACY,OAAO,CAACkB;MACxC,CAAC,CAAC;IACN;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAACrC,OAAO,EAAEX,QAAQ,EAAED,QAAQ,EAAEyB,iBAAiB,CAAC,CAAC;EAEpD,MAAM0B,4BAA4B,GAAGlE,OAAO,CACxC,MACIM,sBAAsB,CAAC;IACnBwD,GAAG,EAAE9C,QAAQ;IACb6C,GAAG,EAAE9C,QAAQ;IACboD,WAAW,EAAExC,OAAO;IACpByC,UAAU,EAAEvC;EAChB,CAAC,CAAC,EACN,CAACd,QAAQ,EAAEC,QAAQ,EAAEa,UAAU,EAAEF,OAAO,CAC5C,CAAC;EAED,MAAM0C,8BAA8B,GAAGrE,OAAO,CAC1C,MACIM,sBAAsB,CAAC;IACnBwD,GAAG,EAAE9C,QAAQ;IACb6C,GAAG,EAAE9C,QAAQ;IACboD,WAAW,EAAE1C,SAAS;IACtB2C,UAAU,EAAEvC;EAChB,CAAC,CAAC,EACN,CAACJ,SAAS,EAAEV,QAAQ,EAAEC,QAAQ,EAAEa,UAAU,CAC9C,CAAC;EAED,MAAMyC,gBAAgB,GAAGxE,WAAW,CAAC,MAAM;IACvC,IAAIuB,UAAU,EAAE;MACZ;IACJ;IAEA,IAAIE,oBAAoB,EAAE;MACtBS,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,CAACX,UAAU,EAAEE,oBAAoB,CAAC,CAAC;EAEtC,MAAMgD,cAAc,GAAGzE,WAAW,CAAC,MAAM;IACrC,IAAIuB,UAAU,EAAE;MACZ;IACJ;IAEA,MAAMuB,IAAI,GAAGC,MAAM,CAACZ,aAAa,CAACa,OAAO,EAAE7B,KAAK,CAAC;IACjD,MAAM8B,EAAE,GAAGF,MAAM,CAACX,WAAW,CAACY,OAAO,EAAE7B,KAAK,CAAC;IAE7C,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CACJE,QAAQ,GAAG4B,SAAS,GAAGJ,IAAI,EAC3BxB,QAAQ,GAAG;QAAEL,QAAQ,EAAEgC,EAAE;QAAE/B,QAAQ,EAAE4B;MAAK,CAAC,GAAGI,SAClD,CAAC;IACL;IAEA,IAAIzB,oBAAoB,EAAE;MACtBS,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EAAE,CAACZ,QAAQ,EAAEC,UAAU,EAAEH,QAAQ,EAAEK,oBAAoB,CAAC,CAAC;EAE1D,OAAOvB,OAAO,CACV,mBACIH,KAAA,CAAA2E,aAAA,CAAC/D,YAAY;IAACgE,GAAG,EAAElC,gBAAiB;IAACmC,WAAW,EAAErD;EAAW,gBACzDxB,KAAA,CAAA2E,aAAA,CAAC9D,iBAAiB;IACdiE,OAAO,EAAE;MAAEC,MAAM,EAAE7C,WAAW,GAAG,EAAE,GAAG;IAAG,CAAE;IAC3C8C,OAAO,EAAE;MAAED,MAAM,EAAE;IAAG,CAAE;IACxBE,IAAI,EAAE;MAAEF,MAAM,EAAE;IAAG,CAAE;IACrBG,WAAW,EAAE,EAAG;IAChBN,GAAG,EAAExC,aAAc;IACnB+C,WAAW,EAAE,CAAC,CAAC5D,QAAS;IACxB6D,IAAI,EAAC,OAAO;IACZhE,KAAK,EAAEQ,SAAU;IACjByD,IAAI,EAAE,IAAK;IACXrB,GAAG,EAAE9C,QAAS;IACd+C,GAAG,EAAE9C,QAAS;IACdmE,YAAY,EAAEb,gBAAiB;IAC/Bc,UAAU,EAAEb,cAAe;IAC3BpD,QAAQ,EAAEwC,iBAAkB;IAC5B0B,SAAS,EAAE1C,aAAc;IACzB2C,IAAI,EAAEvE,QAAS;IACfwE,IAAI,EAAEvE,QAAS;IACfwE,MAAM,EAAE/D;EAAU,CACrB,CAAC,eACF5B,KAAA,CAAA2E,aAAA,CAAC7D,iBAAiB;IACd8D,GAAG,EAAEtC,kBAAmB;IACxBsD,SAAS,EAAE7B,uBAAwB;IACnC8B,YAAY,EAAE3D;EAAY,GAEzBR,oBAAoB,iBACjB1B,KAAA,CAAA2E,aAAA,CAAC5D,sBAAsB;IACnB+E,MAAM,EAAE9D,UAAW;IACnB6D,YAAY,EAAE3D,WAAY;IAC1B0D,SAAS,EAAEpB,8BAA+B;IAC1CI,GAAG,EAAEpC;EAA0B,GAE9B,OAAOf,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,CAACG,SAAS,CAAC,GAC9BA,SACc,CAEb,CAAC,EACnBL,QAAQ,iBACLvB,KAAA,CAAA2E,aAAA,CAAC7D,iBAAiB;IACd8D,GAAG,EAAErC,gBAAiB;IACtBqD,SAAS,EAAExB,qBAAsB;IACjCyB,YAAY,EAAE3D;EAAY,GAEzBR,oBAAoB,iBACjB1B,KAAA,CAAA2E,aAAA,CAAC5D,sBAAsB;IACnB+E,MAAM,EAAE9D,UAAW;IACnB6D,YAAY,EAAE3D,WAAY;IAC1B0D,SAAS,EAAEvB,4BAA6B;IACxCO,GAAG,EAAEnC;EAAwB,GAE5B,OAAOhB,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,CAACK,OAAO,CAAC,GAC5BA,OACc,CAEb,CACtB,EACAP,QAAQ,iBACLvB,KAAA,CAAA2E,aAAA,CAAC9D,iBAAiB;IACdiE,OAAO,EAAE;MAAEC,MAAM,EAAE7C,WAAW,GAAG,EAAE,GAAG;IAAG,CAAE;IAC3C8C,OAAO,EAAE;MAAED,MAAM,EAAE;IAAG,CAAE;IACxBE,IAAI,EAAE;MAAEF,MAAM,EAAE;IAAG,CAAE;IACrBG,WAAW,EAAE,EAAG;IAChBO,IAAI,EAAEvE,QAAS;IACfwE,IAAI,EAAEvE,QAAS;IACfwE,MAAM,EAAE7D,OAAQ;IAChB8C,GAAG,EAAEvC,WAAY;IACjB8C,WAAW,EAAE,CAAC,CAAC5D,QAAS;IACxB6D,IAAI,EAAC,OAAO;IACZhE,KAAK,EAAEU,OAAQ;IACfuD,IAAI,EAAE,IAAK;IACXrB,GAAG,EAAE9C,QAAS;IACd+C,GAAG,EAAE9C,QAAS;IACdmE,YAAY,EAAEb,gBAAiB;IAC/Bc,UAAU,EAAEb,cAAe;IAC3BpD,QAAQ,EAAEuC,qBAAsB;IAChC2B,SAAS,EAAE1C;EAAc,CAC5B,CAEK,CACjB,EACD,CACItB,UAAU,EACVU,WAAW,EACXX,QAAQ,EACRK,SAAS,EACTV,QAAQ,EACRC,QAAQ,EACRsD,gBAAgB,EAChBC,cAAc,EACdZ,iBAAiB,EACjBhB,aAAa,EACbiB,uBAAuB,EACvBrC,oBAAoB,EACpBM,UAAU,EACVwC,8BAA8B,EAC9B/C,mBAAmB,EACnB2C,qBAAqB,EACrBC,4BAA4B,EAC5BvC,OAAO,EACP+B,qBAAqB,CAE7B,CAAC;AACL,CAAC;AAED7C,MAAM,CAAC+E,WAAW,GAAG,QAAQ;AAE7B,eAAe/E,MAAM","ignoreList":[]}
|
|
@@ -3,15 +3,26 @@ import styled from 'styled-components';
|
|
|
3
3
|
export const StyledSlider = styled.div`
|
|
4
4
|
width: 100%;
|
|
5
5
|
height: 30px;
|
|
6
|
-
cursor:
|
|
6
|
+
cursor: ${_ref => {
|
|
7
|
+
let {
|
|
8
|
+
$isDisabled
|
|
9
|
+
} = _ref;
|
|
10
|
+
return $isDisabled ? 'default' : 'pointer';
|
|
11
|
+
}} !important;
|
|
7
12
|
position: relative;
|
|
8
13
|
display: flex;
|
|
9
14
|
align-items: center;
|
|
10
15
|
justify-content: center;
|
|
11
16
|
touch-action: none;
|
|
12
17
|
user-select: none;
|
|
18
|
+
opacity: ${_ref2 => {
|
|
19
|
+
let {
|
|
20
|
+
$isDisabled
|
|
21
|
+
} = _ref2;
|
|
22
|
+
return $isDisabled ? 0.5 : 1;
|
|
23
|
+
}};
|
|
13
24
|
`;
|
|
14
|
-
export const StyledSliderInput = styled(motion.input).attrs(
|
|
25
|
+
export const StyledSliderInput = styled(motion.input).attrs(_ref3 => {
|
|
15
26
|
let {
|
|
16
27
|
$isInterval,
|
|
17
28
|
$value,
|
|
@@ -19,7 +30,7 @@ export const StyledSliderInput = styled(motion.input).attrs(_ref => {
|
|
|
19
30
|
$min,
|
|
20
31
|
$max,
|
|
21
32
|
theme
|
|
22
|
-
} =
|
|
33
|
+
} = _ref3;
|
|
23
34
|
return {
|
|
24
35
|
style: {
|
|
25
36
|
pointerEvents: $isInterval ? 'none' : 'all',
|
|
@@ -68,11 +79,11 @@ export const StyledSliderInput = styled(motion.input).attrs(_ref => {
|
|
|
68
79
|
position: relative;
|
|
69
80
|
}
|
|
70
81
|
`;
|
|
71
|
-
export const StyledSliderThumb = styled.div.attrs(
|
|
82
|
+
export const StyledSliderThumb = styled.div.attrs(_ref4 => {
|
|
72
83
|
let {
|
|
73
84
|
$position,
|
|
74
85
|
$isBigSlider
|
|
75
|
-
} =
|
|
86
|
+
} = _ref4;
|
|
76
87
|
return {
|
|
77
88
|
style: {
|
|
78
89
|
left: `${$position}px`,
|
|
@@ -98,12 +109,12 @@ export const StyledSliderThumb = styled.div.attrs(_ref2 => {
|
|
|
98
109
|
|
|
99
110
|
transition: top 0.2s ease 0s;
|
|
100
111
|
`;
|
|
101
|
-
export const StyledSliderThumbLabel = styled.span.attrs(
|
|
112
|
+
export const StyledSliderThumbLabel = styled.span.attrs(_ref5 => {
|
|
102
113
|
let {
|
|
103
114
|
$position,
|
|
104
115
|
$isBigSlider,
|
|
105
116
|
$width
|
|
106
|
-
} =
|
|
117
|
+
} = _ref5;
|
|
107
118
|
return {
|
|
108
119
|
style: {
|
|
109
120
|
minWidth: `${$width}px`,
|
|
@@ -140,10 +151,10 @@ export const StyledSliderThumbLabel = styled.span.attrs(_ref3 => {
|
|
|
140
151
|
position: absolute;
|
|
141
152
|
width: 14px;
|
|
142
153
|
z-index: -2;
|
|
143
|
-
left: ${
|
|
154
|
+
left: ${_ref6 => {
|
|
144
155
|
let {
|
|
145
156
|
$position
|
|
146
|
-
} =
|
|
157
|
+
} = _ref6;
|
|
147
158
|
return $position * -1;
|
|
148
159
|
}}px;
|
|
149
160
|
transform: rotate(225deg);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.styles.js","names":["motion","styled","StyledSlider","div","StyledSliderInput","input","attrs","
|
|
1
|
+
{"version":3,"file":"Slider.styles.js","names":["motion","styled","StyledSlider","div","_ref","$isDisabled","_ref2","StyledSliderInput","input","attrs","_ref3","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","_ref4","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","_ref5","$width","minWidth","top","_ref6"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSlider = styled.div<StyledSliderProps>`\n width: 100%;\n height: 30px;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')} !important;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n ({ $position, $isBigSlider, $width }) => ({\n style: {\n minWidth: `${$width}px`,\n top: `-${$isBigSlider ? 56 : 48}px`,\n left: `${$position}px`,\n },\n }),\n)`\n pointer-events: none;\n color: #222;\n\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -12,6 +12,10 @@ export type AccordionContentProps = {
|
|
|
12
12
|
* Function that is executed when the element will be scrolled
|
|
13
13
|
*/
|
|
14
14
|
onScroll?: (event: UIEvent<HTMLDivElement>) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the bottom space should be removed.
|
|
17
|
+
*/
|
|
18
|
+
shouldPreventBottomSpace?: boolean;
|
|
15
19
|
};
|
|
16
20
|
declare const AccordionContent: FC<AccordionContentProps>;
|
|
17
21
|
export default AccordionContent;
|
|
@@ -4,6 +4,7 @@ type StyledAccordionContentProps = WithTheme<{
|
|
|
4
4
|
$isWrapped?: boolean;
|
|
5
5
|
$maxHeight?: number;
|
|
6
6
|
$browser: Browser | 'bot' | null | undefined;
|
|
7
|
+
$shouldPreventBottomSpace: boolean;
|
|
7
8
|
}>;
|
|
8
9
|
export declare const StyledAccordionContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAccordionContentProps>> & string;
|
|
9
10
|
export {};
|
package/lib/types/components/mention-finder/mention-finder-item/MentionFinderItem.styles.d.ts
CHANGED
|
@@ -3,7 +3,10 @@ type StyledMentionFinderItemProps = WithTheme<{
|
|
|
3
3
|
$isActive: boolean;
|
|
4
4
|
}>;
|
|
5
5
|
export declare const StyledMentionFinderItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledMentionFinderItemProps>> & string;
|
|
6
|
-
|
|
6
|
+
type StyledMentionFinderItemImageProps = WithTheme<{
|
|
7
|
+
$shouldShowRoundImage?: boolean;
|
|
8
|
+
}>;
|
|
9
|
+
export declare const StyledMentionFinderItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledMentionFinderItemImageProps>> & string;
|
|
7
10
|
export declare const StyledMentionFinderItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
11
|
export declare const StyledMentionFinderItemContentName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
9
12
|
export declare const StyledMentionFinderItemContentInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|