react-align 2.0.3 → 2.1.0

package/src/Icon/icons.ts

@@ -1,14 +1,14 @@
-import HorizontalExtend from './Icons/horizontalExtend.svg';
-import HorizontalNormal from './Icons/horizontalNormal.svg';
-import VerticalExtend from './Icons/verticalExtend.svg';
-import VerticalNormal from './Icons/verticalNormal.svg';
-import MoveArrows from './Icons/moveArrows.svg';
-import AlignStart from './Icons/alignStart.svg';
-import AlignCenter from './Icons/alignCenter.svg';
-import AlignEnd from './Icons/alignEnd.svg';
-import AlignStartV from './Icons/alignStartV.svg';
-import AlignCenterV from './Icons/alignCenterV.svg';
-import AlignEndV from './Icons/alignEndV.svg';
+import { ReactComponent as HorizontalExtend } from "./Icons/horizontalExtend.svg";
+import { ReactComponent as HorizontalNormal } from "./Icons/horizontalNormal.svg";
+import { ReactComponent as VerticalExtend } from "./Icons/verticalExtend.svg";
+import { ReactComponent as VerticalNormal } from "./Icons/verticalNormal.svg";
+import { ReactComponent as MoveArrows } from "./Icons/moveArrows.svg";
+import { ReactComponent as AlignStart } from "./Icons/alignStart.svg";
+import { ReactComponent as AlignCenter } from "./Icons/alignCenter.svg";
+import { ReactComponent as AlignEnd } from "./Icons/alignEnd.svg";
+import { ReactComponent as AlignStartV } from "./Icons/alignStartV.svg";
+import { ReactComponent as AlignCenterV } from "./Icons/alignCenterV.svg";
+import { ReactComponent as AlignEndV } from "./Icons/alignEndV.svg";
 
 export default {
   horizontalExtend: HorizontalExtend,

package/src/Icon/index.tsx

@@ -1,45 +1,18 @@
-import React, { CSSProperties } from 'react';
-import { css } from 'glamor';
+import React from "react";
 
-import Icons from './icons';
+import Icons from "./icons";
 
-export type Icons = keyof typeof Icons;
+export type IconKeys = keyof typeof Icons;
 
 export type IconProps = {
   className?: string;
-  name: string | Icons;
-  size?: number;
-  style?: CSSProperties;
+  name: string | IconKeys;
   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 LocalIconComponent = Icons[name as Icons];
-  return (
-    <LocalIconComponent
-      className={className}
-      {...IconStyles(size)}
-      style={style}
-      onClick={onClick}
-    />
-  );
+const Icon: React.FC<IconProps> = ({ className, name, onClick }) => {
+  const LocalIconComponent = Icons[name as IconKeys];
+  return <LocalIconComponent className={className} onClick={onClick} />;
 };
 
 export default Icon;

package/src/context.tsx

@@ -1,5 +1,5 @@
-import { createContext, useContext } from 'react';
-import { Alignment } from '.';
+import { createContext, useContext } from "react";
+import { Alignment } from ".";
 
 export const Context = createContext<{
   editing: boolean;

package/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

package/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);
 }

package/src/{index.tsx → index.ts}

@@ -4,5 +4,4 @@ export { default as GridArea } from "./GridArea";
 export { default as GridItem } from "./GridItem";
 export { default as Icon } from "./Icon";
 
-// eslint-disable-next-line prettier/prettier
 export type { Alignment } from "./GridArea";

package/dist/GridArea.d.ts

@@ -1,18 +0,0 @@
-import { CSSProperties, PropsWithChildren } from 'react';
-import './grid.css';
-export declare type Alignment = 'start' | 'centered' | 'end';
-export declare type AreaProps = {
-    id: string;
-    className?: string;
-    vertical?: boolean;
-    stretch?: boolean;
-    end?: boolean;
-    align?: Alignment;
-    disabled?: boolean;
-    /** Extra customizable parts only for the really picky */
-    style?: CSSProperties;
-    editorStyle?: CSSProperties;
-    iconColor?: string;
-    onAlignChange?: (alignment: Alignment) => void;
-};
-export default function GridArea({ id, className, vertical, stretch, end, disabled, align, onAlignChange, children, style, editorStyle, iconColor, }: PropsWithChildren<AreaProps>): JSX.Element;

package/dist/GridItem.d.ts

@@ -1,27 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import './grid.css';
-export declare type ItemProps = {
-    className?: string;
-    id: string;
-    index: number;
-    extendable?: boolean;
-    extended?: boolean;
-    disabled?: boolean;
-    onExtend?: (extended: boolean) => void;
-    children?: ReactNode | ((context: {
-        id: string;
-        editing: boolean;
-        isDragging: boolean;
-        isHovered: boolean;
-        extended: boolean;
-        extendable: boolean;
-        disabled: boolean;
-        index: number;
-    }) => ReactNode);
-    /** Extra customizable parts only for the really picky */
-    style?: CSSProperties;
-    editorStyle?: CSSProperties;
-    iconSize?: number;
-    iconColor?: string;
-};
-export default function GridItem({ className, children, id, index, extendable, extended, disabled, style, editorStyle, iconSize, iconColor, ...props }: ItemProps): JSX.Element;

package/dist/GridSection.d.ts

@@ -1,14 +0,0 @@
-import React, { CSSProperties } from 'react';
-import './grid.css';
-export declare type GridSectionProps = {
-    className?: string;
-    horizontal?: boolean;
-    stretch?: boolean;
-    fixedWidth?: number;
-    fixedHeight?: number;
-    /** Extra customizable parts only for the really picky */
-    style?: CSSProperties;
-    editorStyle?: CSSProperties;
-};
-declare const GridSection: React.FC<GridSectionProps>;
-export default GridSection;

package/dist/GridWrapper.d.ts

@@ -1,17 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { Alignment } from './GridArea';
-import './grid.css';
-export declare type GridWrapperProps = {
-    className?: string;
-    editing?: boolean;
-    vertical?: boolean;
-    stretch?: boolean;
-    /** Extra customizable parts only for the really picky */
-    style?: CSSProperties;
-    editorStyle?: CSSProperties;
-    onMove?: (id: string, destAreaId: string, destIndex: number, prevAreaId: string, prevIndex: number) => void;
-    onAlignChange?: (areaId: string, align: Alignment) => void;
-    onExtend?: (id: string, extended: boolean) => void;
-};
-declare const GridWrapper: React.FC<GridWrapperProps>;
-export default GridWrapper;

package/dist/Icon/icons.d.ts

@@ -1,14 +0,0 @@
-declare const _default: {
-    horizontalExtend: any;
-    horizontalNormal: any;
-    verticalExtend: any;
-    verticalNormal: any;
-    moveArrows: any;
-    alignStart: any;
-    alignCenter: any;
-    alignEnd: any;
-    alignStartV: any;
-    alignCenterV: any;
-    alignEndV: any;
-};
-export default _default;

package/dist/Icon/index.d.ts

@@ -1,12 +0,0 @@
-import React, { CSSProperties } from 'react';
-import Icons from './icons';
-export declare type Icons = keyof typeof Icons;
-export declare type IconProps = {
-    className?: string;
-    name: string | Icons;
-    size?: number;
-    style?: CSSProperties;
-    onClick?: () => void;
-};
-declare const Icon: React.FC<IconProps>;
-export default Icon;

package/dist/context.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { Alignment } from '.';
-export declare const Context: import("react").Context<{
-    editing: boolean;
-    isDragging: boolean;
-    onAlignChange?: ((areaId: string, align: Alignment) => void) | undefined;
-    onExtend?: ((id: string, extended: boolean) => void) | undefined;
-}>;
-export declare const useAlignContext: () => {
-    editing: boolean;
-    isDragging: boolean;
-    onAlignChange?: ((areaId: string, align: Alignment) => void) | undefined;
-    onExtend?: ((id: string, extended: boolean) => void) | undefined;
-};

package/dist/index.js

@@ -1,8 +0,0 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./react-align.cjs.production.min.js')
-} else {
-  module.exports = require('./react-align.cjs.development.js')
-}