🖖

Dmitry Olkhovoi DmitryOlkhovoi

🖖

JavaScript Engineer

DmitryOlkhovoi / index.html

Created May 3, 2020 10:50

JS Bin // source https://jsbin.com/mujivut

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">

DmitryOlkhovoi / index.tsx

Created January 21, 2020 10:53

	import React, { FunctionComponent, ButtonHTMLAttributes, useState } from 'react';
	import uuid from 'uuid/v4';
	import classnames from 'classnames';

	export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
	primary?: boolean,
	accent?: boolean,
	circle?: boolean,
	ripple?: boolean,
	additionalClass?: string,

DmitryOlkhovoi / index.tsx

Created January 21, 2020 10:52

	function onAnimationEnd(key: string) {
	setRippleElements(rippleElements => rippleElements.filter(element => element.key !== key));
	}

DmitryOlkhovoi / index.tsx

Created January 21, 2020 10:51

	function onRippleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
	var rect = event.currentTarget.getBoundingClientRect();

	const d = Math.max(event.currentTarget.clientWidth, event.currentTarget.clientHeight);
	const left = event.clientX - rect.left - d/2 + 'px';
	const top = event.clientY - rect.top - d/2 + 'px';
	const rippleElement = newRippleElement(d, left, top);

	setRippleElements([...rippleElements, rippleElement]);
	}

DmitryOlkhovoi / inde.tsx

Created January 21, 2020 10:50

	...

	const [rippleElements, setRippleElements] = useState<JSX.Element[]>([]);

	...

	function renderRippleElements() {
	return rippleElements;
	}

DmitryOlkhovoi / css.css

Created January 21, 2020 10:49

	.with-ripple {
	@apply relative overflow-hidden;

	@keyframes ripple {
	to {
	@apply opacity-0;
	transform: scale(2.5);
	}
	}

DmitryOlkhovoi / index.tsx

Created January 21, 2020 10:45

	export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
	primary?: boolean,
	accent?: boolean,
	additionalClass?: string,
	}

	...

	const classNames = classnames(
	'btn',

DmitryOlkhovoi / index.tsx

Created January 21, 2020 10:41

	import React, { FunctionComponent } from 'react';

	export interface ButtonProps {
	}

	const Button: FunctionComponent<ButtonProps> = (props) => {
	return (
	<button className="btn">props.children</button>
	);
	}

DmitryOlkhovoi / css.css

Created January 21, 2020 10:39

DmitryOlkhovoi / css.css

Created January 21, 2020 08:37

	.btn {
	@apply text-black text-base leading-snug;
	@apply py-3 px-4 border-none rounded-lg;
	@apply inline-block cursor-pointer no-underline;

	&:focus {
	@apply outline-none;
	}
	}