UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

1 lines 6.35 kB
{"version":3,"file":"assign-aside-variables.cjs","names":["isPrimitiveSize","rem","getBaseSize","isResponsiveSize","getBreakpointValue"],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignAsideVariablesInput {\n baseStyles: CSSVariables;\n minMediaStyles: MediaQueryVariables;\n maxMediaStyles: MediaQueryVariables;\n aside: AppShellProps['aside'] | undefined;\n theme: MantineTheme;\n mode: 'fixed' | 'static';\n}\n\nexport function assignAsideVariables({\n baseStyles,\n minMediaStyles,\n maxMediaStyles,\n aside,\n theme,\n mode,\n}: AssignAsideVariablesInput) {\n const asideWidth = aside?.width;\n const collapsedAsideTransform = 'translateX(var(--app-shell-aside-width))';\n const collapsedAsideTransformRtl = 'translateX(calc(var(--app-shell-aside-width) * -1))';\n\n if (aside?.breakpoint && !aside?.collapsed?.mobile) {\n maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};\n if (mode === 'fixed') {\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '100%';\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n } else {\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '0px';\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n }\n }\n\n if (isPrimitiveSize(asideWidth)) {\n const baseSize = rem(getBaseSize(asideWidth));\n baseStyles['--app-shell-aside-width'] = baseSize;\n baseStyles['--app-shell-aside-offset'] = baseSize;\n }\n\n if (isResponsiveSize(asideWidth)) {\n if (typeof asideWidth.base !== 'undefined') {\n baseStyles['--app-shell-aside-width'] = rem(asideWidth.base);\n baseStyles['--app-shell-aside-offset'] = rem(asideWidth.base);\n }\n\n keys(asideWidth).forEach((key) => {\n if (key !== 'base') {\n minMediaStyles[key] = minMediaStyles[key] || {};\n minMediaStyles[key]['--app-shell-aside-width'] = rem(asideWidth![key]);\n minMediaStyles[key]['--app-shell-aside-offset'] = rem(asideWidth![key]);\n }\n });\n }\n\n if (aside?.breakpoint && mode === 'static') {\n minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};\n minMediaStyles[aside.breakpoint]['--app-shell-aside-position'] = 'sticky';\n minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-row'] = '2';\n minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-column'] = '3';\n // Adjust main column end when aside is visible\n minMediaStyles[aside.breakpoint]['--app-shell-main-column-end'] = '3';\n }\n\n if (aside?.collapsed?.desktop) {\n const breakpointValue = aside!.breakpoint;\n minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n minMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n minMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n if (mode === 'fixed') {\n minMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px !important';\n } else {\n minMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n minMediaStyles[breakpointValue]['--app-shell-aside-display'] = 'none';\n minMediaStyles[breakpointValue]['--app-shell-main-column-end'] = '-1';\n }\n minMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n }\n\n if (aside?.collapsed?.mobile) {\n const breakpointValue = getBreakpointValue(aside!.breakpoint, theme.breakpoints) - 0.1;\n maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n if (mode === 'fixed') {\n maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '100%';\n maxMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px';\n } else {\n maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n }\n maxMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n maxMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n maxMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,qBAAqB,EACnC,YACA,gBACA,gBACA,OACA,OACA,QAC4B;CAC5B,MAAM,aAAa,OAAO;CAC1B,MAAM,0BAA0B;CAChC,MAAM,6BAA6B;CAEnC,IAAI,OAAO,cAAc,CAAC,OAAO,WAAW,QAAQ;EAClD,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,IAAI,SAAS,SAAS;GACpB,eAAe,OAAO,YAAY,6BAA6B;GAC/D,eAAe,OAAO,YAAY,8BAA8B;EAClE,OAAO;GACL,eAAe,OAAO,YAAY,6BAA6B;GAC/D,eAAe,OAAO,YAAY,8BAA8B;EAClE;CACF;CAEA,IAAIA,0BAAAA,gBAAgB,UAAU,GAAG;EAC/B,MAAM,WAAWC,YAAAA,IAAIC,sBAAAA,YAAY,UAAU,CAAC;EAC5C,WAAW,6BAA6B;EACxC,WAAW,8BAA8B;CAC3C;CAEA,IAAIC,2BAAAA,iBAAiB,UAAU,GAAG;EAChC,IAAI,OAAO,WAAW,SAAS,aAAa;GAC1C,WAAW,6BAA6BF,YAAAA,IAAI,WAAW,IAAI;GAC3D,WAAW,8BAA8BA,YAAAA,IAAI,WAAW,IAAI;EAC9D;EAEA,aAAA,KAAK,UAAU,EAAE,SAAS,QAAQ;GAChC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,KAAK,6BAA6BA,YAAAA,IAAI,WAAY,IAAI;IACrE,eAAe,KAAK,8BAA8BA,YAAAA,IAAI,WAAY,IAAI;GACxE;EACF,CAAC;CACH;CAEA,IAAI,OAAO,cAAc,SAAS,UAAU;EAC1C,eAAe,MAAM,cAAc,eAAe,MAAM,eAAe,CAAC;EACxE,eAAe,MAAM,YAAY,gCAAgC;EACjE,eAAe,MAAM,YAAY,gCAAgC;EACjE,eAAe,MAAM,YAAY,mCAAmC;EAEpE,eAAe,MAAM,YAAY,iCAAiC;CACpE;CAEA,IAAI,OAAO,WAAW,SAAS;EAC7B,MAAM,kBAAkB,MAAO;EAC/B,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,iBAAiB,iCAAiC;EACjE,eAAe,iBAAiB,qCAAqC;EACrE,IAAI,SAAS,SACX,eAAe,iBAAiB,8BAA8B;OACzD;GACL,eAAe,iBAAiB,6BAA6B;GAC7D,eAAe,iBAAiB,+BAA+B;GAC/D,eAAe,iBAAiB,iCAAiC;EACnE;EACA,eAAe,iBAAiB,gDAAgD;CAClF;CAEA,IAAI,OAAO,WAAW,QAAQ;EAC5B,MAAM,kBAAkBG,6BAAAA,mBAAmB,MAAO,YAAY,MAAM,WAAW,IAAI;EACnF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,IAAI,SAAS,SAAS;GACpB,eAAe,iBAAiB,6BAA6B;GAC7D,eAAe,iBAAiB,8BAA8B;EAChE,OACE,eAAe,iBAAiB,6BAA6B;EAE/D,eAAe,iBAAiB,iCAAiC;EACjE,eAAe,iBAAiB,qCAAqC;EACrE,eAAe,iBAAiB,gDAAgD;CAClF;AACF"}