Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | 17x 17x 17x 17x 17x 17x 17x 17x 17x 60x 60x 60x 60x 17x 17x 17x 17x 17x | /* eslint-disable react/prop-types */ import React from 'react'; import PropTypes from 'prop-types'; import _ from 'lodash'; import { lucidClassNames } from '../../util/style-helpers'; import { getFirst, rejectTypes, StandardProps, } from '../../util/component-types'; import { CSSTransition } from 'react-transition-group'; const cx = lucidClassNames.bind('&-OverlayWrapper'); const { bool, node, oneOf, string } = PropTypes; /** Overlay Wrapper Message */ export interface IMessageProps extends StandardProps {} export const OverlayWrapperMessage = (_props: IMessageProps): null => null; OverlayWrapperMessage.displayName = 'OverlayWrapper.Message'; OverlayWrapperMessage.peek = { description: `The Message to display in the overlay.`, }; OverlayWrapperMessage.propName = 'Message'; OverlayWrapperMessage.propTypes = { children: node, }; /** Overlay Wrapper */ export interface IOverlayWrapperProps extends StandardProps, React.DetailedHTMLProps< React.HTMLAttributes<HTMLDivElement>, HTMLDivElement > { /** Controls whether the message should be displayed over the wrapped content. */ isVisible?: boolean; /** Set this to \`false\` if you don't want the semi-transparent overlay over * the wrapped content. * * @default true */ hasOverlay: boolean; /** Style variations for the overlay behind the message. * * @default 'light' * */ overlayKind: 'light' | 'dark'; /** By default, the OverlayMessage is vertically aligned to the middle of the * OverlayWrapper. Set this to true to position the `OverlayMessage` near the top of * the `OverlayWrapper`. * * @default false */ anchorMessage: boolean; /** By default, the OverlayMessage is vertically aligned to the middle of the * OverlayWrapper, and the `OverlayWrapper` is the height of the entire content. * Set this to true to position the `OverlayMessage` near the center of the * `OverlayWrapper`, and fix the `OverlayWrapper` to the screen height and width. * * @default false */ fixedMessage: boolean; /** *Child Element* The Message to display in the overlay. */ Message?: React.ReactNode & { props: IMessageProps }; } const defaultProps = { hasOverlay: true, overlayKind: 'light' as const, anchorMessage: false, fixedMessage: false, isVisible: false, }; export const OverlayWrapper = ( props: IOverlayWrapperProps ): React.ReactElement => { const { hasOverlay, isVisible, className, children, overlayKind, anchorMessage, fixedMessage, ...passThroughs } = props; const messageElementProp = _.get( getFirst<IMessageProps>(props, OverlayWrapperMessage), 'props', {} ); const otherChildren = rejectTypes(children, [OverlayWrapperMessage]); return ( <div {...passThroughs} className={cx('&', className)}> {otherChildren} <CSSTransition in={isVisible} classNames={cx('&-message-container')} timeout={300} unmountOnExit > <div className={cx('&-message-container', { '&-has-overlay': hasOverlay, '&-kind-light': hasOverlay && overlayKind === 'light', '&-anchored-message': anchorMessage, '&-fixed-message': fixedMessage, })} > <div {...messageElementProp} /> </div> </CSSTransition> </div> ); }; OverlayWrapper.defaultProps = defaultProps; OverlayWrapper.displayName = 'OverlayWrapper'; OverlayWrapper.peek = { description: `A wrapper with optional overlay to wrap content. \`OverlayWrapper\` is meant to wrap another component and cover its content, while \`Overlay\` is meant for overlaying an entire page.`, categories: ['utility'], }; OverlayWrapper.propTypes = { /** Controls whether the message should be displayed over the wrapped content. */ isVisible: bool, /** Set this to \`false\` if you don't want the semi-transparent overlay over the wrapped content. */ hasOverlay: bool, /** Class names that are appended to the defaults. */ className: string, /** Any valid React children. */ children: node, /** Style variations for the overlay behind the message. */ overlayKind: oneOf(['light', 'dark']), /** By default, the \`OverlayMessage\` is vertically aligned to the middle of the OverlayWrapper. Set this to true to position the \`OverlayMessage\` near the top of the \`OverlayWrapper\`. */ anchorMessage: bool, /** By default, the OverlayMessage is vertically aligned to the middle of the \`OverlayWrapper\` and the \`OverlayWrapper\` is the height of the entire content. Set this to true to position the \`OverlayMessage\` near the center of the \`OverlayWrapper\`, and fix the \`OverlayWrapper\` to the screen height and width. */ fixedMessage: bool, /* *Child Element* The Message to display in the overlay. */ Message: node, }; OverlayWrapper.Message = OverlayWrapperMessage; export default OverlayWrapper; |