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 | 75x 7650x 7650x 7650x 257x 257x 7650x 7650x 7650x 7650x 7650x 204x 7650x 1040x 7650x 75x 1306x 1306x | import * as React from 'react';
import { Box as ReakitBox, BoxProps as ReakitBoxProps } from 'reakit';
import _get from 'lodash/get';
import classNames from 'classnames';
import { ThemeConfig, CSSProperties } from '../types';
import {
useStyle,
useClassName,
omitCSSProps,
pickHTMLProps,
mergeRefs,
createComponent,
createElement,
createHook
} from '../utils';
import * as styles from './styles';
type ComponentType<R> = React.ComponentType<R> & { useProps: any };
export type LocalBoxProps = {
use?: string | ComponentType<any>;
className?: string;
children?: React.ReactNode | ((props: BoxProps) => React.ReactNode);
altitude?: string;
variant?: string;
showBreakpoint?: string;
hiddenBreakpoint?: string;
/* Component-level theme overrides [Read more](TODO) */
overrides?: ThemeConfig;
elementRef?: React.Ref<any>;
themeKey?: string;
};
export type BoxProps = ReakitBoxProps & CSSProperties & LocalBoxProps;
const useProps = createHook<BoxProps>(
(_props, { themeKey, themeKeyOverride }) => {
let props = _props;
const { use } = props;
if (use && typeof use !== 'string' && use.useProps) {
const newProps = use.useProps({ ...props, use: undefined });
props = { ...props, ...newProps };
}
// Convert CSS props to an object.
// Example input:
// props = { color: 'red', backgroundColor: 'blue', isEnabled: true }
//
// Example output:
// style = { color: 'red', backgroundColor: 'blue' }
const style = useStyle(props);
// Append the styles from above as a className on the DOM element (with precedence).
let className = useClassName({
style: styles.style,
styleProps: { ...props, style },
themeKey,
themeKeyOverride,
prevClassName: props.className
});
// Append the Box styles as a className on the DOM element.
className = useClassName({
style: styles.Box,
styleProps: props,
prevClassName: className,
themeKey,
themeKeyOverride
});
// Pick out and invalid HTML props & omit the CSS props.
const htmlProps = omitCSSProps(pickHTMLProps({ ...props, className }));
if (props.elementRef) {
// @ts-ignore
htmlProps.ref = mergeRefs(props.elementRef, props.ref);
}
if (props.wrapElement) {
// @ts-ignore
htmlProps.wrapElement = props.wrapElement;
}
return { ...htmlProps };
},
{ themeKey: 'Box' }
);
export const Box = createComponent<BoxProps>(
props => {
const boxProps = useProps(props);
return createElement({ children: props.children, component: ReakitBox, use: props.use, htmlProps: boxProps });
},
{
attach: { useProps },
themeKey: 'Box'
}
);
|