surface/drawer and friends

.prettierrc

@@ -0,0 +1,10 @@
+{
+	"parser": "typescript",
+	"semi": true,
+	"printWidth": 96,
+	"useTabs": true,
+	"tabWidth": 4,
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"jsxBracketSameLine": false
+}

package.json

@@ -36,6 +36,7 @@
     "react": "^16.x.x",
     "react-create-ref": "^1.0.1",
     "react-dom": "^16.x.x",
+    "react-onclickoutside": "^6.9.0",
     "react-scripts": "3.4.0",
     "react-slick": "^0.25.2",
     "reset-css": "^5.0.1",
@@ -50,6 +51,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.x.x",
     "@types/react-dom": "^16.x.x",
+    "@types/react-onclickoutside": "^6.7.3",
     "@types/react-slick": "^0.23.4",
     "@types/sinon": "^7.5.1",
     "chai": "^4.2.0",
@@ -86,7 +88,7 @@
                   "compilerOptions": {
                     "target": "ES5",
                     "module": "CommonJS",
-                    "inlineSourceMap": true, 
+                    "inlineSourceMap": true,
                     "removeComments": false,
                     "experimentalDecorators": true
                   }

src/surfaces/abs-container/abs-container.module.scss

@@ -0,0 +1,12 @@
+.container {
+	position: relative;
+}
+
+.containee {
+	position: absolute;
+
+	display: none;
+	[data-open='true'] & {
+		display: initial;
+	}
+}

src/surfaces/abs-container/containee/containee.tsx

@@ -0,0 +1,42 @@
+import React, { Component, RefObject } from 'react';
+import classNames from 'classnames';
+//@ts-ignore
+import createRef from 'react-create-ref';
+
+import styles from '../abs-container.module.scss';
+import positionStyles from './positions.module.scss';
+
+export type Position =
+	| 'top'
+	| 'right'
+	| 'bottom'
+	| 'left'
+	| 'cover'
+	| 'none'
+	| 'top-start'
+	| 'right-start'
+	| 'bottom-start'
+	| 'left-start'
+	| 'top-end'
+	| 'right-end'
+	| 'bottom-end'
+	| 'left-end';
+
+export type ContaineeProps = { position?: Position } & React.HTMLAttributes<HTMLDivElement>;
+
+export class Containee extends Component<ContaineeProps> {
+	private ref: RefObject<HTMLDivElement> = createRef();
+
+	render() {
+		const { className, position = 'bottom', ...rest } = this.props;
+		const positionClass = positionStyles[position];
+
+		return (
+			<div
+				ref={this.ref}
+				className={classNames(styles.containee, positionClass, className)}
+				{...rest}
+			/>
+		);
+	}
+}

src/surfaces/abs-container/containee/index.ts

@@ -0,0 +1 @@
+export * from './containee';

src/surfaces/abs-container/containee/positions.module.scss

@@ -0,0 +1,62 @@
+.top {
+	bottom: 100%;
+
+	&-start {
+		bottom: 100%;
+		left: 0%;
+	}
+
+	&-end {
+		bottom: 100%;
+		right: 0%;
+	}
+}
+
+.right {
+	left: 100%;
+
+	&-start {
+		left: 100%;
+		top: 0%;
+	}
+
+	&-end {
+		left: 100%;
+		bottom: 0%;
+	}
+}
+
+.bottom {
+	top: 100%;
+
+	&-start {
+		top: 100%;
+		left: 0%;
+	}
+
+	&-end {
+		top: 100%;
+		right: 0%;
+	}
+}
+
+.left {
+	right: 100%;
+
+	&-start {
+		right: 100%;
+		top: 0%;
+	}
+
+	&-end {
+		right: 100%;
+		bottom: 0%;
+	}
+}
+
+.cover {
+	top: 0%;
+	left: 0%;
+}
+
+// .none {}

src/surfaces/abs-container/container/container.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from '../abs-container.module.scss';
+
+export type ContainerProps = { open?: boolean } & React.HTMLAttributes<HTMLDivElement>;
+
+export function Container(props: ContainerProps) {
+	const { className, open, ...rest } = props;
+
+	return <div className={cn(styles.container, className)} data-open={open} {...rest} />;
+}

src/surfaces/abs-container/container/index.ts

@@ -0,0 +1 @@
+export * from './container';

src/surfaces/abs-container/index.ts

@@ -0,0 +1,7 @@
+import styles from './abs-container.module.scss';
+
+export * from './containee';
+export * from './container';
+
+export const containerClass = styles.container;
+export const containeeClass = styles.containee;

src/surfaces/click-outside/click-outside.tsx

@@ -0,0 +1,35 @@
+import React, { Component, ReactNode } from 'react';
+import onClickOutside, {
+	OnClickOutProps,
+	InjectedOnClickOutProps,
+} from 'react-onclickoutside';
+
+type Props = {
+	children: ReactNode;
+	disable?: boolean;
+	onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+} & InjectedOnClickOutProps;
+
+class MyComponent extends Component<Props> implements OnClickOutProps<any> {
+	componentDidUpdate(prevProps: Props) {
+		const nextProps = this.props;
+
+		if (prevProps.disable !== nextProps.disable) {
+			if (nextProps.disable) {
+				this.props.disableOnClickOutside();
+			} else {
+				this.props.enableOnClickOutside();
+			}
+		}
+	}
+
+	handleClickOutside = (evt: React.MouseEvent<HTMLElement, MouseEvent>) => {
+		this.props.onClick(evt);
+	};
+
+	render() {
+		return this.props.children;
+	}
+}
+
+export const ClickOutside = onClickOutside(MyComponent);

src/surfaces/click-outside/index.ts

@@ -0,0 +1 @@
+export * from './click-outside';

src/surfaces/drawer/default-placeholder.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './drawer.module.scss';
+
+export type DrawerPlaceholderProps =  React.HTMLAttributes<HTMLDivElement>;
+
+export function DefaultPlaceholder(props: DrawerPlaceholderProps) {
+	return (
+		<div {...props} className={classNames(props.className, styles.placeholder)}/>
+	);
+}

src/surfaces/drawer/drawer.module.scss

@@ -0,0 +1,4 @@
+.placeholder {
+	cursor: pointer;
+	user-select: none;
+}