Vladimir Porton portons

portons / use-togglable-grid.js

Created September 1, 2019 06:41

	export const useToggleableGrid = ({ items, minItemWidth, maxItemWidth }) => {
	const containerRef = useRef();

	const [itemsConfig, setCardsConfig] = useState({
	originalItems: items,
	items: items,
	openItemId: null
	});

	const { width: containerWidth } = useElementDimensions(containerRef);

portons / async-reducer.js

Created June 2, 2019 19:26

Async reducer

	const newPromises = () => {
	const newDataArray = mapping.reduce(async(acc, data) => {
	const accumulator = await acc.resolve();
	const newThings = await createNewData(data);
	return Promise.resolve([...accumulator, ...newThings])
	}, Promise.resolve([]));
	return newDataArray;
	}

portons / persist-gate.js

Last active April 28, 2019 09:27

Reusable.js persist

	import { useReuse } from 'reusable';

	import { persisUnit } from 'src/units/persist.unit';

	const PersistGate = ({ children, loading = null }) => {
	const { persistedState } = useReuse(persisUnit);

	return !persistedState ? loading : children;
	};

portons / childrenRefs.js

Created February 9, 2019 12:15

Add refs to children components

	import React, { forwardRef, createRef } from 'react';

	const Child = forwardRef((props, ref = noop) => (
	<div>Child</div>
	))

	class Parent extends React.Component {
	constructor(props) {
	super(props);

portons / shared-transition.js

Created January 30, 2019 06:33

Shared transition example

	# Lets say we've got Screen A and Screen B, and we want to make a shared transition from A to B.
	# We first create a 'manager', or a 'service', call it however you like :) It's a simple class:

	class SomeAnimationManager {
	constructor(navigation) {
	// We pass the navigation bc we'd want to create transitions from the manager,
	// as it's also the one responsible for the animations
	this.navigation = navigation;

	// This is going to be a reference to the original element we're 'sharing'