2.0.4 - fix style issues, upgrade deps, etc

reearth · Oct 28, 2021 · 916789f · 916789f
1 parent a380fff
commit 916789f
Show file tree

Hide file tree

Showing 7 changed files with 972 additions and 2,218 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -23,7 +23,7 @@ const initAlignments: Record<string, Alignment> = {
 
 const hoz = (l: string) => l === "4" || l === "6";
 const ver = (l: string) => l === "2" || l === "8";
-const ItemCompoent = (item: Item, i: number) => (
+const ItemComponent = (item: Item, i: number) => (
   <GridItem id={item.id} index={i} key={item.id} extendable={item.extendable} extended={item.extended}>
     <div
       style={{
@@ -87,8 +87,9 @@ function App() {
             end={l === "3"}
             vertical={l === "2"}
             stretch={l === "2"}
-            editorStyle={{ background: l === "2" ? "blue" : "red" }}>
-            {items.filter(i => i.location === l).sort((a, b) => a.index - b.index).map(ItemCompoent)}
+            editorStyle={{ background: l === "2" ? "blue" : "red" }}
+            iconColor={l === "2" ? "red" : "blue"}>
+            {items.filter(i => i.location === l).sort((a, b) => a.index - b.index).map(ItemComponent)}
           </GridArea>
         ))}
       </GridSection>
@@ -105,8 +106,9 @@ function App() {
             key={l}
             align={alignments[l]}
             end={l === "6"}
-            editorStyle={{ background: "red" }}>
-            {items.filter(i => i.location === l).sort((a, b) => a.index - b.index).map(ItemCompoent)}
+            editorStyle={{ background: "red" }}
+            iconColor={"blue"}>
+            {items.filter(i => i.location === l).sort((a, b) => a.index - b.index).map(ItemComponent)}
           </GridArea>
         ))}
       </GridSection>
@@ -119,8 +121,9 @@ function App() {
             end
             vertical={l === "8"}
             stretch={l === "8"}
-            editorStyle={{ background: l === "8" ? "blue" : "red" }}>
-            {items.filter(i => i.location === l).sort((a, b) => a.index - b.index).map(ItemCompoent)}
+            editorStyle={{ background: l === "8" ? "blue" : "red" }}
+            iconColor={l === "8" ? "red" : "blue"}>
+            {items.filter(i => i.location === l).sort((a, b) => a.index - b.index).map(ItemComponent)}
           </GridArea>
         ))}
       </GridSection>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-align",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "author": "KaWaite",
   "module": "dist/react-align.esm.js",
   "license": "MIT",
@@ -49,27 +49,27 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@size-limit/preset-small-lib": "^4.11.0",
+    "@babel/core": "^7.15.8",
+    "@size-limit/preset-small-lib": "^6.0.3",
     "@svgr/rollup": "^5.5.0",
-    "@types/react": "^17.0.8",
+    "@types/react": "^17.0.33",
     "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^17.0.5",
-    "babel-loader": "^8.2.2",
-    "cssnano": "^5.0.7",
-    "husky": "^6.0.0",
-    "postcss": "^8.3.6",
+    "@types/react-dom": "^17.0.10",
+    "babel-loader": "^8.2.3",
+    "cssnano": "^5.0.8",
+    "husky": "^7.0.4",
+    "postcss": "^8.3.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
-    "rollup-plugin-postcss": "^4.0.0",
-    "size-limit": "^4.11.0",
+    "rollup-plugin-postcss": "^4.0.1",
+    "size-limit": "^6.0.3",
     "tsdx": "^0.14.1",
-    "tslib": "^2.2.0",
-    "typescript": "^4.2.4"
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.4"
   },
   "dependencies": {
     "glamor": "^2.20.40",
     "react-beautiful-dnd": "^13.1.0"
   }
-}
+}
diff --git a/src/GridArea.tsx b/src/GridArea.tsx
@@ -123,6 +123,7 @@ export default function GridArea({
               onClick={handleAlignChange}
               style={{
                 cursor: 'pointer',
+                color: iconColor,
               }}
             >
               <Icon
@@ -139,9 +140,6 @@ export default function GridArea({
                     ? 'alignStartV'
                     : 'alignStart'
                 }
-                style={{
-                  color: iconColor,
-                }}
               />
             </div>
           </div>

diff --git a/src/GridItem.tsx b/src/GridItem.tsx
@@ -34,7 +34,6 @@ export type ItemProps = {
   /** Extra customizable parts only for the really picky */
   style?: CSSProperties;
   editorStyle?: CSSProperties;
-  iconSize?: number;
   iconColor?: string;
 };
 
@@ -49,11 +48,10 @@ export default function GridItem({
   // Picky stuff.
   style,
   editorStyle,
-  iconSize,
   iconColor = 'rgb(255, 255, 255)',
   ...props
 }: ItemProps) {
-  const { end, vertical } = props as {
+  const { vertical } = props as {
     end?: boolean;
     vertical?: boolean;
   };
@@ -67,10 +65,11 @@ export default function GridItem({
 
   const buttonStyles: CSSProperties = useMemo(
     () => ({
-      alignItems: end ? 'end' : 'start',
-      float: end ? 'right' : 'left',
+      alignItems: 'start',
+      float: 'left',
+      color: iconColor,
     }),
-    [end]
+    [iconColor]
   );
 
   const ctx = useMemo(
@@ -100,50 +99,52 @@ export default function GridItem({
             ...(editing ? editorStyle : style),
             ...provided.draggableProps.style,
           }}
-          onMouseEnter={() => setHovered(true)}
-          onMouseLeave={() => setHovered(false)}
         >
           <div
             style={{
-              width: '100%',
-              height: '100%',
-              pointerEvents: editing ? 'none' : undefined,
+              display: 'inline-block',
+              position: 'relative',
+              minHeight: isHovered && !disabled ? '35px' : undefined,
+              width: !vertical && extended ? '100%' : undefined,
+              minWidth:
+                isHovered && !disabled
+                  ? extendable
+                    ? '70px'
+                    : '35px'
+                  : undefined,
+              height: vertical && extended ? '100%' : undefined,
             }}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
           >
             {typeof children === 'function' ? children(ctx) : children}
-          </div>
-          <div
-            className="overlay"
-            style={{
-              display:
-                !disabled &&
-                editing &&
-                isHovered &&
-                (snapshot.isDragging || !isDragging)
-                  ? 'block'
-                  : 'none',
-            }}
-          >
-            <div className="overlay-buttons" style={buttonStyles}>
-              <div {...provided.dragHandleProps}>
-                <Icon
-                  name="moveArrows"
-                  size={iconSize}
-                  style={{ color: iconColor }}
-                />
-              </div>
-              {extendable && (
-                <div
-                  style={{ cursor: 'pointer', marginLeft: '8px' }}
-                  onClick={handleExtend}
-                >
-                  <Icon
-                    name={vertical ? 'verticalExtend' : 'horizontalExtend'}
-                    size={iconSize}
-                    style={{ color: iconColor }}
-                  />
+            <div
+              className="overlay"
+              style={{
+                display:
+                  !disabled &&
+                  editing &&
+                  isHovered &&
+                  (snapshot.isDragging || !isDragging)
+                    ? 'block'
+                    : 'none',
+              }}
+            >
+              <div className="overlay-buttons" style={buttonStyles}>
+                <div {...provided.dragHandleProps}>
+                  <Icon name="moveArrows" />
                 </div>
-              )}
+                {extendable && (
+                  <div
+                    style={{ cursor: 'pointer', marginLeft: '8px' }}
+                    onClick={handleExtend}
+                  >
+                    <Icon
+                      name={vertical ? 'verticalExtend' : 'horizontalExtend'}
+                    />
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/Icon/index.tsx b/src/Icon/index.tsx
@@ -1,5 +1,4 @@
-import React, { CSSProperties } from 'react';
-import { css } from 'glamor';
+import React from 'react';
 
 import Icons from './icons';
 
@@ -8,38 +7,12 @@ export type Icons = keyof typeof Icons;
 export type IconProps = {
   className?: string;
   name: string | Icons;
-  size?: number;
-  style?: CSSProperties;
   onClick?: () => void;
 };
 
-const IconStyles = (size?: number) =>
-  css({
-    cursor: 'pointer',
-    width: size || 24 + 'px',
-    height: size || 24 + 'px',
-    ' svg': {
-      height: size || 24 + 'px',
-      width: size || 24 + 'px',
-    },
-  });
-
-const Icon: React.FC<IconProps> = ({
-  className,
-  name,
-  size,
-  style,
-  onClick,
-}) => {
+const Icon: React.FC<IconProps> = ({ className, name, onClick }) => {
   const LocalIconComponent = Icons[name as Icons];
-  return (
-    <LocalIconComponent
-      className={className}
-      {...IconStyles(size)}
-      style={style}
-      onClick={onClick}
-    />
-  );
+  return <LocalIconComponent className={className} onClick={onClick} />;
 };
 
 export default Icon;
diff --git a/src/grid.css b/src/grid.css
@@ -13,7 +13,7 @@
 
 .area {
   display: flex;
-  border: 1px solid transparent;
+  border: 0 solid transparent;
   box-sizing: border-box;
   border-radius: 8px;
   position: relative;
@@ -29,12 +29,9 @@
 
 .item {
   position: relative;
-  border: 1px solid transparent;
-  box-sizing: border-box;
+  border: 0 solid transparent;
   margin: 6px;
   border-radius: 6px;
-  min-width: 70px;
-  min-height: 40px;
 }
 
 .stretch {
@@ -66,8 +63,8 @@
   position: absolute;
   top: 0;
   left: 0;
-  bottom: 0;
-  right: 0;
+  width: 100%;
+  height: 100%;
   box-sizing: border-box;
   background: rgba(0,0,0,0.6);
 }