Adding fixed widths to block-columns (#43)

packages/block-columns-container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usewaypoint/block-columns-container",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "@usewaypoint/document compatible ColumnsContainer component",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/block-columns-container/src/index.tsx

@@ -17,6 +17,11 @@ const PADDING_SCHEMA = z
   .optional()
   .nullable();
 
+const FIXED_WIDTHS_SCHEMA = z
+  .tuple([z.number().nullish(), z.number().nullish(), z.number().nullish()])
+  .optional()
+  .nullable();
+
 const getPadding = (padding: z.infer<typeof PADDING_SCHEMA>) =>
   padding ? `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px` : undefined;
 
@@ -30,6 +35,7 @@ export const ColumnsContainerPropsSchema = z.object({
     .nullable(),
   props: z
     .object({
+      fixedWidths: FIXED_WIDTHS_SCHEMA,
       columnsCount: z
         .union([z.literal(2), z.literal(3)])
         .optional()
@@ -62,6 +68,7 @@ export function ColumnsContainer({ style, columns, props }: ColumnsContainerProp
     columnsCount: props?.columnsCount ?? ColumnsContainerPropsDefaults.columnsCount,
     columnsGap: props?.columnsGap ?? ColumnsContainerPropsDefaults.columnsGap,
     contentAlignment: props?.contentAlignment ?? ColumnsContainerPropsDefaults.contentAlignment,
+    fixedWidths: props?.fixedWidths,
   };
 
   return (
@@ -87,6 +94,7 @@ export function ColumnsContainer({ style, columns, props }: ColumnsContainerProp
 
 type Props = {
   props: {
+    fixedWidths: z.infer<typeof FIXED_WIDTHS_SCHEMA>;
     columnsCount: 2 | 3;
     columnsGap: number;
     contentAlignment: 'top' | 'middle' | 'bottom';
@@ -107,6 +115,7 @@ function TableCell({ index, props, columns }: Props) {
     verticalAlign: contentAlignment,
     paddingLeft: getPaddingBefore(index, props),
     paddingRight: getPaddingAfter(index, props),
+    width: props.fixedWidths?.[index] ?? undefined,
   };
   const children = (columns && columns[index]) ?? null;
   return <td style={style}>{children}</td>;

packages/editor-sample/package.json

@@ -14,7 +14,7 @@
     "@mui/material": "^5.15.10",
     "@usewaypoint/block-avatar": "^0.0.1",
     "@usewaypoint/block-button": "^0.0.1",
-    "@usewaypoint/block-columns-container": "^0.0.1",
+    "@usewaypoint/block-columns-container": "^0.0.2",
     "@usewaypoint/block-container": "^0.0.1",
     "@usewaypoint/block-divider": "^0.0.3",
     "@usewaypoint/block-heading": "^0.0.2",

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx

@@ -13,6 +13,7 @@ import ColumnsContainerPropsSchema, {
 } from '../../../../documents/blocks/ColumnsContainer/ColumnsContainerPropsSchema';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
+import ColumnWidthsInput from './helpers/inputs/ColumnWidthsInput';
 import RadioGroupInput from './helpers/inputs/RadioGroupInput';
 import SliderInput from './helpers/inputs/SliderInput';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';
@@ -45,6 +46,12 @@ export default function ColumnsContainerPanel({ data, setData }: ColumnsContaine
         <ToggleButton value="2">2</ToggleButton>
         <ToggleButton value="3">3</ToggleButton>
       </RadioGroupInput>
+      <ColumnWidthsInput
+        defaultValue={null}
+        onChange={(fixedWidths) => {
+          updateData({ ...data, props: { ...data.props, fixedWidths } });
+        }}
+      />
       <SliderInput
         label="Columns gap"
         iconLabel={<SpaceBarOutlined sx={{ color: 'text.secondary' }} />}

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColumnWidthsInput.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+
+import { Stack } from '@mui/material';
+
+import TextDimensionInput from './TextDimensionInput';
+
+export const DEFAULT_2_COLUMNS = [6] as [number];
+export const DEFAULT_3_COLUMNS = [4, 8] as [number, number];
+
+type TWidthValue = number | null | undefined;
+type FixedWidths = [
+  //
+  number | null | undefined,
+  number | null | undefined,
+  number | null | undefined,
+];
+type ColumnsLayoutInputProps = {
+  defaultValue: FixedWidths | null | undefined;
+  onChange: (v: FixedWidths | null | undefined) => void;
+};
+export default function ColumnWidthsInput({ defaultValue, onChange }: ColumnsLayoutInputProps) {
+  const [currentValue, setCurrentValue] = useState<[TWidthValue, TWidthValue, TWidthValue]>(() => {
+    if (defaultValue) {
+      return defaultValue;
+    }
+    return [null, null, null];
+  });
+
+  const setIndexValue = (index: 0 | 1 | 2, value: number | null | undefined) => {
+    const nValue: FixedWidths = [...currentValue];
+    nValue[index] = value;
+    setCurrentValue(nValue);
+    onChange(nValue);
+  };
+
+  const columnsCountValue = 3;
+  let column3 = null;
+  if (columnsCountValue === 3) {
+    column3 = (
+      <TextDimensionInput
+        label="Column 3"
+        defaultValue={currentValue?.[2]}
+        onChange={(v) => {
+          setIndexValue(2, v);
+        }}
+      />
+    );
+  }
+  return (
+    <Stack direction="row" spacing={1}>
+      <TextDimensionInput
+        label="Column 1"
+        defaultValue={currentValue?.[0]}
+        onChange={(v) => {
+          setIndexValue(0, v);
+        }}
+      />
+      <TextDimensionInput
+        label="Column 2"
+        defaultValue={currentValue?.[1]}
+        onChange={(v) => {
+          setIndexValue(1, v);
+        }}
+      />
+      {column3}
+    </Stack>
+  );
+}