| / | elements with colspans.\n SOLUTION: making individual \n ,\n )\n }\n\n _handleScrollerEl(scrollerEl: HTMLElement | null, key: string) {\n let section = getSectionByKey(this.props.sections, key)\n\n if (section) {\n setRef(section.chunk.scrollerElRef, scrollerEl)\n }\n }\n\n // TODO: can do a really simple print-view. dont need to join rows\n handleSizing = () => {\n this.setState({\n shrinkWidth: this.computeShrinkWidth(), // will create each chunk's \n {innerContent}\n \n {hookProps.isStartResizable &&\n }\n {hookProps.isEndResizable &&\n }\n \n )}\n \n )\n }\n}\n\nfunction renderInnerContent(innerProps: EventContentArg) {\n return (\n \n {innerProps.timeText && (\n \n )\n}\n","import { RenderHook, RenderHookPropsChildren, MountArg } from './render-hook'\nimport { DateMarker } from '../datelib/marker'\nimport { ViewContext, ViewContextType } from '../ViewContext'\nimport { createElement } from '../vdom'\nimport { ViewApi } from '../ViewApi'\n\nexport interface NowIndicatorRootProps {\n isAxis: boolean\n date: DateMarker\n children: RenderHookPropsChildren\n}\n\nexport interface NowIndicatorContentArg {\n isAxis: boolean\n date: Date\n view: ViewApi\n}\n\nexport type NowIndicatorMountArg = MountArg{innerProps.timeText} \n )}\n \n \n \n {innerProps.event.title || \n {props.event.title} \n )\n}\n","import { ViewContext, ViewContextType } from '../ViewContext'\nimport { DateMarker } from '../datelib/marker'\nimport { RenderHook, RenderHookPropsChildren, MountArg } from './render-hook'\nimport { createElement } from '../vdom'\nimport { DateFormatter } from '../datelib/DateFormatter'\n\nexport interface WeekNumberRootProps {\n date: DateMarker\n defaultFormat: DateFormatter\n children: RenderHookPropsChildren\n}\n\nexport interface WeekNumberContentArg {\n num: number\n text: string\n date: Date\n}\nexport type WeekNumberMountArg = MountArg\n \n {props.title}\n \n \n \n {props.children}\n \n ,\n props.parentEl,\n )\n }\n\n componentDidMount() {\n document.addEventListener('mousedown', this.handleDocumentMouseDown)\n document.addEventListener('keydown', this.handleDocumentKeyDown)\n this.updateSize()\n }\n\n componentWillUnmount() {\n document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n document.removeEventListener('keydown', this.handleDocumentKeyDown)\n }\n\n handleRootEl = (el: HTMLElement | null) => {\n this.rootEl = el\n\n if (this.props.elRef) {\n setRef(this.props.elRef, el)\n }\n }\n\n // Triggered when the user clicks *anywhere* in the document, for the autoHide feature\n handleDocumentMouseDown = (ev) => {\n // only hide the popover if the click happened outside the popover\n const target = getEventTargetViaRoot(ev) as HTMLElement\n if (!this.rootEl.contains(target)) {\n this.handleCloseClick()\n }\n }\n\n handleDocumentKeyDown = (ev) => {\n if (ev.key === 'Escape') {\n this.handleCloseClick()\n }\n }\n\n handleCloseClick = () => {\n let { onClose } = this.props\n if (onClose) {\n onClose()\n }\n }\n\n private updateSize() {\n let { isRtl } = this.context\n let { alignmentEl, alignGridTop } = this.props\n let { rootEl } = this\n\n let alignmentRect = computeClippedClientRect(alignmentEl)\n if (alignmentRect) {\n let popoverDims = rootEl.getBoundingClientRect()\n\n // position relative to viewport\n let popoverTop = alignGridTop\n ? elementClosest(alignmentEl, '.fc-scrollgrid').getBoundingClientRect().top\n : alignmentRect.top\n let popoverLeft = isRtl ? alignmentRect.right - popoverDims.width : alignmentRect.left\n\n // constrain\n popoverTop = Math.max(popoverTop, PADDING_FROM_VIEWPORT)\n popoverLeft = Math.min(popoverLeft, document.documentElement.clientWidth - PADDING_FROM_VIEWPORT - popoverDims.width)\n popoverLeft = Math.max(popoverLeft, PADDING_FROM_VIEWPORT)\n\n let origin = rootEl.offsetParent.getBoundingClientRect()\n applyStyle(rootEl, {\n top: popoverTop - origin.top,\n left: popoverLeft - origin.left,\n })\n }\n }\n}\n","import { DateComponent } from '../component/DateComponent'\nimport { DateRange } from '../datelib/date-range'\nimport { DateMarker } from '../datelib/marker'\nimport { DateProfile } from '../DateProfileGenerator'\nimport { Hit } from '../interactions/hit'\nimport { Dictionary } from '../options'\nimport { createElement, ComponentChildren } from '../vdom'\nimport { DayCellContent } from './DayCellContent'\nimport { DayCellRoot } from './DayCellRoot'\nimport { Popover } from './Popover'\n\nexport interface MorePopoverProps {\n id: string\n startDate: DateMarker\n endDate: DateMarker\n dateProfile: DateProfile\n parentEl: HTMLElement\n alignmentEl: HTMLElement\n alignGridTop?: boolean\n todayRange: DateRange\n extraDateSpan: Dictionary\n children: ComponentChildren\n onClose?: () => void\n}\n\nexport class MorePopover extends DateComponent{innerContent} \n )}\n \n * Overflown Content\n * \n * ```\n * ```ts\n * // This is how the style set would look in Component.styles.ts\n * const { bodyBackground } = theme.semanticColors;\n * const { neutralLighter } = theme.palette;\n *\n * // The second argument of getFadedOverflowStyle function is a string representing a key of\n * // ISemanticColors or IPalette.\n *\n * const styles = {\n * parent: [\n * backgroundColor: bodyBackground,\n * selectors: {\n * '&:hover: {\n * backgroundColor: neutralLighter\n * },\n * '$content:after': {\n * ...getFadedOverflowStyle(theme, 'bodyBackground')\n * },\n * '&:hover $content:after': {\n * ...getFadedOverflowStyle(theme, 'neutralLighter')\n * }\n * }\n * ],\n * content: [\n * width: '100%',\n * display: 'inline-block',\n * position: 'relative',\n * overflow: 'hidden'\n * ]\n * }\n * ```\n * @param theme - The theme object to use.\n * @param color - The background color to fade out to. Accepts only keys of ISemanticColors or IPalette.\n * Defaults to 'bodyBackground'.\n * @param direction - The direction of the overflow. Defaults to horizontal.\n * @param width - The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal.\n * @param height - The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal.\n * @returns The style object.\n */\nexport function getFadedOverflowStyle(\n theme: ITheme,\n color: keyof ISemanticColors | keyof IPalette = 'bodyBackground',\n direction: 'horizontal' | 'vertical' = 'horizontal',\n width: string | number = getDefaultValue('width', direction),\n height: string | number = getDefaultValue('height', direction),\n): IRawStyle {\n // Get the color value string from the theme semanticColors or palette.\n const colorValue: string =\n theme.semanticColors[color as keyof ISemanticColors] || theme.palette[color as keyof IPalette];\n // Get the red, green, blue values of the colorValue.\n const rgbColor: IRGB = color2rgb(colorValue);\n // Apply opacity 0 to serve as a start color of the gradient.\n const rgba = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0)`;\n // Get the direction of the gradient. (mergeStyles takes care of RTL direction)\n const gradientDirection = direction === 'vertical' ? 'to bottom' : 'to right';\n\n return {\n content: '\"\"',\n position: 'absolute',\n right: 0,\n bottom: 0,\n width: width,\n height: height,\n pointerEvents: 'none',\n backgroundImage: `linear-gradient(${gradientDirection}, ${rgba} 0%, ${colorValue} 100%)`,\n };\n}\n\n// TODO consider moving this to a separate module along with some more color functions from OUFR/utilities.\n/**\n * Helper function to convert a string hex color to an RGB object.\n *\n * @param colorValue - Color to be converted from hex to rgba.\n */\nfunction color2rgb(colorValue: string): IRGB {\n if (colorValue[0] === '#') {\n // If it's a hex code\n return {\n r: parseInt(colorValue.slice(1, 3), 16),\n g: parseInt(colorValue.slice(3, 5), 16),\n b: parseInt(colorValue.slice(5, 7), 16),\n };\n } else if (colorValue.indexOf('rgba(') === 0) {\n // If it's an rgba color string\n colorValue = colorValue.match(/rgba\\(([^)]+)\\)/)![1];\n const parts = colorValue.split(/ *, */).map(Number);\n\n return {\n r: parts[0],\n g: parts[1],\n b: parts[2],\n };\n }\n // The only remaining possibility is transparent.\n return {\n r: 255,\n g: 255,\n b: 255,\n };\n}\n\n/**\n * Helper function to get the default values for parameters of main function.\n *\n * @param style - Which style to get the default value for.\n * @param direction - What direction to take into consideration.\n */\nfunction getDefaultValue(style: 'width' | 'height', direction: string): number | string {\n if (style === 'width') {\n return direction === 'horizontal' ? DEFAULT_WIDTH : '100%';\n } else {\n return direction === 'vertical' ? DEFAULT_HEIGHT : '100%';\n }\n}\n","import type { IStyle } from '@fluentui/merge-styles';\n\n/**\n * Generates placeholder style for each of the browsers supported by `@fluentui/react`.\n * @param styles - The style to use.\n * @returns The placeholder style object for each browser depending on the placeholder directive it uses.\n */\nexport function getPlaceholderStyles(styles: IStyle): IStyle {\n return {\n selectors: {\n '::placeholder': styles, // Chrome, Safari, Opera, Firefox\n ':-ms-input-placeholder': styles, // IE 10+\n '::-ms-input-placeholder': styles, // Edge\n },\n };\n}\n","import { GlobalSettings, warn } from '@fluentui/utilities';\nimport { fontFace, mergeStyles, Stylesheet } from '@fluentui/merge-styles';\nimport type { IRawStyle, IFontFace } from '@fluentui/merge-styles';\n\nexport interface IIconSubset {\n fontFace?: IFontFace;\n icons: {\n [key: string]: string | JSX.Element;\n };\n\n style?: IRawStyle;\n /**\n * Indicates to the icon renderer that it is safe to merge any props on the original `Icon` element\n * onto the child content element registered for the icon which are valid for HTML images.\n */\n mergeImageProps?: boolean;\n}\n\nexport interface IIconSubsetRecord extends IIconSubset {\n isRegistered?: boolean;\n className?: string;\n}\n\nexport interface IIconRecord {\n code: string | undefined;\n subset: IIconSubsetRecord;\n}\n\nexport interface IIconOptions {\n /**\n * By default, registering the same set of icons will generate a console warning per duplicate icon\n * registered, because this scenario can create unexpected consequences.\n *\n * Some scenarios include:\n *\n * Icon set was previously registered using a different base url.\n * Icon set was previously registered but a different version was provided.\n * Icons in a previous registered set overlap with a new set.\n *\n * To simply ignore previously registered icons, you can specify to disable warnings. This means\n * that if an icon which was previous registered is registered again, it will be silently ignored.\n * However, consider whether the problems listed above will cause issues.\n **/\n disableWarnings: boolean;\n\n /**\n * @deprecated Use `disableWarnings` instead.\n */\n warnOnMissingIcons?: boolean;\n}\n\nexport interface IIconRecords {\n __options: IIconOptions;\n __remapped: { [key: string]: string };\n [key: string]: IIconRecord | {};\n}\n\nconst ICON_SETTING_NAME = 'icons';\n\nconst _iconSettings = GlobalSettings.getValue |
|---|