From 328b77f963c22805238a93fe3664397b9233e8f9 Mon Sep 17 00:00:00 2001 From: Garrett Weems Date: Wed, 25 Nov 2020 07:09:46 -0600 Subject: [PATCH 1/2] ui updates --- Grid/GridAreas.tsx | 0 Grid/GridControlProperties.tsx | 49 ++--- Grid/GridGapControls.tsx | 35 ++-- components/DraggableListItem.tsx | 68 +++++++ components/Select.tsx | 1 - lib/findIndex.ts | 40 ++++ lib/setCssVariables.ts | 2 +- lib/theme.ts | 12 +- next.config.js | 2 +- package.json | 17 +- pages/_app.tsx | 64 +++++- playground.js | 79 -------- .../android-chrome-192x192.png | Bin 4631 -> 0 bytes public/Original Images/favicon-32x32.png | Bin 611 -> 0 bytes public/Original Images/logo.png | Bin 1594 -> 0 bytes .../android-chrome-512x512.png | Bin .../apple-touch-icon.png | Bin .../{Original Images => }/favicon-16x16.png | Bin yarn.lock | 182 +++++++++++------- 19 files changed, 343 insertions(+), 208 deletions(-) create mode 100644 Grid/GridAreas.tsx create mode 100644 components/DraggableListItem.tsx create mode 100644 lib/findIndex.ts delete mode 100644 playground.js delete mode 100644 public/Original Images/android-chrome-192x192.png delete mode 100644 public/Original Images/favicon-32x32.png delete mode 100644 public/Original Images/logo.png rename public/{Original Images => }/android-chrome-512x512.png (100%) rename public/{Original Images => }/apple-touch-icon.png (100%) rename public/{Original Images => }/favicon-16x16.png (100%) diff --git a/Grid/GridAreas.tsx b/Grid/GridAreas.tsx new file mode 100644 index 0000000..e69de29 diff --git a/Grid/GridControlProperties.tsx b/Grid/GridControlProperties.tsx index dfb1e15..c8a5447 100644 --- a/Grid/GridControlProperties.tsx +++ b/Grid/GridControlProperties.tsx @@ -1,10 +1,9 @@ import Select from '@components/Select'; -import { colors } from '@lib/theme'; +import theme, { colors } from '@lib/theme'; import { gridUnits } from '@lib/utils'; -import { Grid } from '@primer/components'; import { GrabberIcon, XIcon } from '@primer/octicons-react'; import { useShiftKeyPressed } from '@ui/useShftKeyPressed'; -import React, { FC, memo, useCallback } from 'react'; +import React, { CSSProperties, FC, memo, useCallback } from 'react'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { GridControlObjKey } from './GridControlId'; import { gridControlState, selectedControlState } from './gridState'; @@ -29,7 +28,7 @@ const GridControlProperties: FC<{ [setControl] ); const isSelected = selectedIds.includes(id); - const style = isSelected + const style: CSSProperties = isSelected ? id.split('.').includes('rows') ? { background: colors.yellow[4], @@ -43,60 +42,64 @@ const GridControlProperties: FC<{ const onEnter = useCallback(() => { setSelectedIds((ids) => { - // Do nothing if the element is already selected if (isSelected) return ids; - - // Add this element to the selection if shift is pressed if (shiftKeyPressed) return [...ids, id]; - - // Otherwise, make this one the only selected element return [id]; }); }, [id, isSelected, setSelectedIds, shiftKeyPressed]); + const onLeave = useCallback(() => { if (!shiftKeyPressed) setSelectedIds([]); }, [setSelectedIds, shiftKeyPressed]); + return ( -
{ - if (event.target === event.currentTarget) - setGridGap({ - ...gridGap, - [event.currentTarget.name]: event.currentTarget.value, - }); + setGridGap({ + ...gridGap, + [event.currentTarget.name]: event.currentTarget.value, + }); }} /> - + ); }; diff --git a/components/DraggableListItem.tsx b/components/DraggableListItem.tsx new file mode 100644 index 0000000..85b828c --- /dev/null +++ b/components/DraggableListItem.tsx @@ -0,0 +1,68 @@ +import { useMotionValue, motion } from 'framer-motion'; +import React, { useEffect, useRef, useState } from 'react'; + +const Item = ({ color, setPosition, moveItem, i }) => { + const [isDragging, setDragging] = useState(false); + + // We'll use a `ref` to access the DOM element that the `motion.li` produces. + // This will allow us to measure its height and position, which will be useful to + // decide when a dragging element should switch places with its siblings. + const ref = useRef(null); + + // By manually creating a reference to `dragOriginY` we can manipulate this value + // if the user is dragging this DOM element while the drag gesture is active to + // compensate for any movement as the items are re-positioned. + const dragOriginY = useMotionValue(0); + + // Update the measured position of the item so we can calculate when we should rearrange. + useEffect(() => { + setPosition(i, { + height: ref.current.offsetHeight, + top: ref.current.offsetTop, + }); + }); + + return ( + setDragging(true)} + onDragEnd={() => setDragging(false)} + onDrag={(e, { point }) => moveItem(i, point.y)} + positionTransition={({ delta }) => { + if (isDragging) { + // If we're dragging, we want to "undo" the items movement within the list + // by manipulating its dragOriginY. This will keep the item under the cursor, + // even though it's jumping around the DOM. + dragOriginY.set(dragOriginY.get() + delta.y); + } + + // If `positionTransition` is a function and returns `false`, it's telling + // Motion not to animate from its old position into its new one. If we're + // dragging, we don't want any animation to occur. + return !isDragging; + }} + /> + ); +}; +export default Item; +const onTop = { zIndex: 1 }; +const flat = { + zIndex: 0, + transition: { delay: 0.3 }, +}; +const heights = { + '#FF008C': 60, + '#D309E1': 80, + '#9C1AFF': 40, + '#7700FF': 100, +}; diff --git a/components/Select.tsx b/components/Select.tsx index 6042fc0..1b466c9 100644 --- a/components/Select.tsx +++ b/components/Select.tsx @@ -12,7 +12,6 @@ const Select: FC = ({ options, style, ...props }) => { return ( - +