Updating images and columns sidebars. Adding width/height to block-im…

…age. (#35)
usewaypoint · Feb 28, 2024 · c29fa02 · c29fa02
1 parent 07f5dca
commit c29fa02
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 4 deletions.
diff --git a/packages/block-image/package.json b/packages/block-image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@usewaypoint/block-image",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "@usewaypoint/document compatible Image component",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/block-image/src/index.tsx b/packages/block-image/src/index.tsx
@@ -29,6 +29,8 @@ export const ImagePropsSchema = z.object({
     .nullable(),
   props: z
     .object({
+      width: z.number().optional().nullable(),
+      height: z.number().optional().nullable(),
       url: z.string().optional().nullable(),
       alt: z.string().optional().nullable(),
       linkHref: z.string().optional().nullable(),
@@ -48,11 +50,18 @@ export function Image({ style, props }: ImageProps) {
   };
 
   const linkHref = props?.linkHref ?? null;
+  const width = props?.width ?? undefined;
+  const height = props?.height ?? undefined;
+
   const imageElement = (
     <img
       alt={props?.alt ?? ''}
       src={props?.url ?? ''}
+      width={width}
+      height={height}
       style={{
+        width,
+        height,
         outline: 'none',
         border: 'none',
         textDecoration: 'none',

diff --git a/.../src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx b/.../src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx
@@ -1,5 +1,11 @@
 import React, { useState } from 'react';
 
+import {
+  SpaceBarOutlined,
+  VerticalAlignBottomOutlined,
+  VerticalAlignCenterOutlined,
+  VerticalAlignTopOutlined,
+} from '@mui/icons-material';
 import { ToggleButton } from '@mui/material';
 
 import ColumnsContainerPropsSchema, {
@@ -8,6 +14,7 @@ import ColumnsContainerPropsSchema, {
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import RadioGroupInput from './helpers/inputs/RadioGroupInput';
+import SliderInput from './helpers/inputs/SliderInput';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';
 
 type ColumnsContainerPanelProps = {
@@ -30,16 +37,45 @@ export default function ColumnsContainerPanel({ data, setData }: ColumnsContaine
     <BaseSidebarPanel title="Columns block">
       <RadioGroupInput
         label="Number of columns"
-        defaultValue={data.props.columnsCount === 2 ? '2' : '3'}
+        defaultValue={data.props?.columnsCount === 2 ? '2' : '3'}
         onChange={(v) => {
           updateData({ ...data, props: { ...data.props, columnsCount: v === '2' ? 2 : 3 } });
         }}
       >
         <ToggleButton value="2">2</ToggleButton>
         <ToggleButton value="3">3</ToggleButton>
       </RadioGroupInput>
+      <SliderInput
+        label="Columns gap"
+        iconLabel={<SpaceBarOutlined sx={{ color: 'text.secondary' }} />}
+        units="px"
+        step={4}
+        marks
+        min={0}
+        max={80}
+        defaultValue={data.props?.columnsGap ?? 0}
+        onChange={(columnsGap) => updateData({ ...data, props: { ...data.props, columnsGap } })}
+      />
+      <RadioGroupInput
+        label="Alignment"
+        defaultValue={data.props?.contentAlignment ?? 'middle'}
+        onChange={(contentAlignment) => {
+          updateData({ ...data, props: { ...data.props, contentAlignment } });
+        }}
+      >
+        <ToggleButton value="top">
+          <VerticalAlignTopOutlined fontSize="small" />
+        </ToggleButton>
+        <ToggleButton value="middle">
+          <VerticalAlignCenterOutlined fontSize="small" />
+        </ToggleButton>
+        <ToggleButton value="bottom">
+          <VerticalAlignBottomOutlined fontSize="small" />
+        </ToggleButton>
+      </RadioGroupInput>
+
       <MultiStylePropertyPanel
-        names={['backgroundColor', 'borderColor', 'borderRadius', 'padding']}
+        names={['backgroundColor', 'padding']}
         value={data.style}
         onChange={(style) => updateData({ ...data, style })}
       />

diff --git a/...itor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx b/...itor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx
@@ -5,11 +5,12 @@ import {
   VerticalAlignCenterOutlined,
   VerticalAlignTopOutlined,
 } from '@mui/icons-material';
-import { ToggleButton } from '@mui/material';
+import { Stack, ToggleButton } from '@mui/material';
 import { ImageProps, ImagePropsSchema } from '@usewaypoint/block-image';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import RadioGroupInput from './helpers/inputs/RadioGroupInput';
+import TextDimensionInput from './helpers/inputs/TextDimensionInput';
 import TextInput from './helpers/inputs/TextInput';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';
 
@@ -32,6 +33,19 @@ export default function ImageSidebarPanel({ data, setData }: ImageSidebarPanelPr
 
   return (
     <BaseSidebarPanel title="Image block">
+      <Stack direction="row" spacing={2}>
+        <TextDimensionInput
+          label="Width"
+          defaultValue={30}
+          onChange={(width) => updateData({ ...data, props: { ...data.props, width } })}
+        />
+        <TextDimensionInput
+          label="Height"
+          defaultValue={30}
+          onChange={(height) => updateData({ ...data, props: { ...data.props, height } })}
+        />
+      </Stack>
+
       <RadioGroupInput
         label="Alignment"
         defaultValue={data.props?.contentAlignment ?? 'middle'}

diff --git a/...App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextDimensionInput.tsx b/...App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextDimensionInput.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { TextField, Typography } from '@mui/material';
+
+type TextDimensionInputProps = {
+  label: string;
+  defaultValue: number | null | undefined;
+  onChange: (v: number | null) => void;
+};
+export default function TextDimensionInput({ label, defaultValue, onChange }: TextDimensionInputProps) {
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (ev) => {
+    const value = parseInt(ev.target.value);
+    onChange(isNaN(value) ? null : value);
+  };
+  return (
+    <TextField
+      fullWidth
+      onChange={handleChange}
+      defaultValue={defaultValue}
+      label={label}
+      variant="standard"
+      placeholder="auto"
+      size="small"
+      InputProps={{
+        endAdornment: (
+          <Typography variant="body2" color="text.secondary">
+            px
+          </Typography>
+        ),
+      }}
+    />
+  );
+}