@vuu-ui/vuu-table-extras 0.7.6-debug → 0.8.0-debug

package/esm/index.js

@@ -30,12 +30,12 @@ import {
 import cx from "classnames";
 
 // src/cell-renderers/background-cell/useDirection.ts
-import { useEffect, useRef } from "react";
-import { isTypeDescriptor } from "@vuu-ui/vuu-utils";
 import {
   getMovingValueDirection,
+  isTypeDescriptor,
   isValidNumber
 } from "@vuu-ui/vuu-utils";
+import { useEffect, useRef } from "react";
 var INITIAL_VALUE = [void 0, void 0, void 0, void 0];
 function useDirection(key, value, column) {
   var _a;
@@ -1345,7 +1345,10 @@ import {
   stringOperators,
   toSuggestions
 } from "@vuu-ui/vuu-codemirror";
-import { getTypeaheadParams, useTypeaheadSuggestions } from "@vuu-ui/vuu-data";
+import {
+  getTypeaheadParams,
+  useTypeaheadSuggestions
+} from "@vuu-ui/vuu-data-react";
 import { isNumericColumn, isTextColumn } from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback2, useRef as useRef3 } from "react";
 
@@ -2184,7 +2187,8 @@ var StringColumnPanel = ({
   column,
   dispatchColumnAction
 }) => {
-  return /* @__PURE__ */ jsx7(Fragment2, { children: "String" });
+  console.log({ column, dispatchColumnAction });
+  return /* @__PURE__ */ jsx7(Fragment2, { children: "what" });
 };
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
@@ -2782,7 +2786,7 @@ var DatagridSettingsPanel = ({
     [handleApply]
   );
   const selectedColumn = selectedColumnName === null ? null : (_a = gridSettings.columns.find((col) => col.name === selectedColumnName)) != null ? _a : null;
-  const tabstripProps2 = {
+  const tabstripProps3 = {
     activeTabIndex: selectedTabIndex,
     enableRenameTab: false,
     orientation: "vertical"
@@ -2796,7 +2800,7 @@ var DatagridSettingsPanel = ({
     /* @__PURE__ */ jsxs10(
       Stack2,
       {
-        TabstripProps: tabstripProps2,
+        TabstripProps: tabstripProps3,
         className: `${classBase9}-stack`,
         getTabIcon,
         getTabLabel,
@@ -2881,9 +2885,368 @@ var DataSourceStats = ({
     /* @__PURE__ */ jsx13("span", { className: `${classBase10}-size`, children: value })
   ] });
 };
+
+// src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx
+import { Stack as Stack3 } from "@vuu-ui/vuu-layout";
+import {
+  Checkbox as Checkbox2,
+  FormField as FormField6,
+  Input as Input3,
+  RadioButton as RadioButton3,
+  RadioButtonGroup as RadioButtonGroup3,
+  StepperInput as StepperInput5
+} from "@heswell/salt-lab";
+import { Panel as Panel7, Text as Text7 } from "@salt-ds/core";
+import cx9 from "classnames";
+import {
+  useCallback as useCallback10,
+  useState as useState6
+} from "react";
+
+// src/table-settings/column-type-panel/ColumnTypePanel.tsx
+import { getRegisteredCellRenderers as getRegisteredCellRenderers2 } from "@vuu-ui/vuu-utils";
+import { Dropdown as Dropdown2 } from "@heswell/salt-lab";
+import { Panel as Panel6 } from "@salt-ds/core";
+import cx8 from "classnames";
+import { useMemo as useMemo3 } from "react";
+
+// src/table-settings/column-type-panel/NumericColumnPanel.tsx
+import { FormField as FormField5, StepperInput as StepperInput4, Switch as Switch2 } from "@heswell/salt-lab";
+import { Text as Text6 } from "@salt-ds/core";
+import { useCallback as useCallback9 } from "react";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var defaultValues2 = {
+  alignOnDecimals: false,
+  decimals: 4,
+  zeroPad: false
+};
+var getColumnValues2 = (columnType, gridDefaultValues) => {
+  const columnValue = typeof columnType === "object" && columnType.formatting ? columnType.formatting : {};
+  const properties = ["alignOnDecimals", "decimals", "zeroPad"];
+  return properties.reduce((configValues, property) => {
+    if (columnValue[property] !== void 0) {
+      return {
+        ...configValues,
+        [property]: columnValue[property]
+      };
+    } else if ((gridDefaultValues == null ? void 0 : gridDefaultValues[property]) !== void 0) {
+      return {
+        ...configValues,
+        [property]: gridDefaultValues[property]
+      };
+    }
+    return configValues;
+  }, defaultValues2);
+};
+var NumericColumnPanel2 = ({
+  column,
+  dispatchColumnAction
+}) => {
+  const { decimals, alignOnDecimals, zeroPad } = getColumnValues2(column == null ? void 0 : column.type);
+  const dispatchUpdate = useCallback9(
+    (values) => dispatchColumnAction({
+      type: "updateColumnTypeFormatting",
+      column,
+      ...values
+    }),
+    [column, dispatchColumnAction]
+  );
+  const handleChangeDecimals = useCallback9(
+    (value) => dispatchUpdate({ decimals: parseInt(value.toString(), 10) }),
+    [dispatchUpdate]
+  );
+  const handleChangeAlignOnDecimals = useCallback9(
+    (evt, value) => dispatchUpdate({ alignOnDecimals: value }),
+    [dispatchUpdate]
+  );
+  const handleChangeZeroPad = useCallback9(
+    (evt, value) => dispatchUpdate({ zeroPad: value }),
+    [dispatchUpdate]
+  );
+  switch (column.serverDataType) {
+    case "double":
+      return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+        /* @__PURE__ */ jsx14(FormField5, { label: "No of Decimals", labelPlacement: "top", children: /* @__PURE__ */ jsx14(StepperInput4, { value: decimals, onChange: handleChangeDecimals }) }),
+        /* @__PURE__ */ jsx14(
+          Switch2,
+          {
+            checked: alignOnDecimals,
+            label: "Align on decimals",
+            LabelProps: { className: "vuuColumnPanelSwitch" },
+            onChange: handleChangeAlignOnDecimals
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          Switch2,
+          {
+            checked: zeroPad,
+            label: "Zero pad",
+            LabelProps: { className: "vuuColumnPanelSwitch" },
+            onChange: handleChangeZeroPad
+          }
+        )
+      ] });
+    case "long":
+    case "int":
+      return /* @__PURE__ */ jsx14(Fragment4, { children: /* @__PURE__ */ jsx14(Text6, { children: "Work in progress" }) });
+    default:
+      return null;
+  }
+};
+
+// src/table-settings/column-type-panel/StringColumnPanel.tsx
+import { Fragment as Fragment5, jsx as jsx15 } from "react/jsx-runtime";
+var StringColumnPanel2 = ({
+  column,
+  dispatchColumnAction
+}) => {
+  console.log(column, dispatchColumnAction);
+  return /* @__PURE__ */ jsx15(Fragment5, { children: "what" });
+};
+
+// src/table-settings/column-type-panel/ColumnTypePanel.tsx
+import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+var classBase11 = "vuuColumnTypePanel";
+var integerCellRenderers2 = ["Default Renderer (int, long)"];
+var doubleCellRenderers2 = ["Default Renderer (double)"];
+var stringCellRenderers2 = ["Default Renderer (string)"];
+var getAvailableCellRenderers2 = (column) => {
+  const customCellRenderers = getRegisteredCellRenderers2(column.serverDataType);
+  const customRendererNames = customCellRenderers.map((r) => r.name);
+  console.log({ customRendererNames });
+  switch (column.serverDataType) {
+    case "char":
+    case "string":
+      return stringCellRenderers2;
+    case "int":
+    case "long":
+      return integerCellRenderers2;
+    case "double":
+      return doubleCellRenderers2.concat(customRendererNames);
+    default:
+      return stringCellRenderers2;
+  }
+};
+var ColumnTypePanel2 = ({
+  className,
+  column,
+  dispatchColumnAction,
+  ...props
+}) => {
+  const content = useMemo3(() => {
+    switch (column.serverDataType) {
+      case "double":
+      case "int":
+      case "long":
+        return /* @__PURE__ */ jsx16(
+          NumericColumnPanel2,
+          {
+            column,
+            dispatchColumnAction
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx16(
+          StringColumnPanel2,
+          {
+            column,
+            dispatchColumnAction
+          }
+        );
+    }
+  }, [column, dispatchColumnAction]);
+  const { serverDataType = "string" } = column;
+  const availableRenderers = getAvailableCellRenderers2(column);
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsx16(
+      Dropdown2,
+      {
+        className: cx8(`${classBase11}-renderer`),
+        fullWidth: true,
+        selected: availableRenderers[0],
+        source: availableRenderers
+      }
+    ),
+    /* @__PURE__ */ jsx16(
+      Panel6,
+      {
+        ...props,
+        className: cx8(classBase11, className, `${classBase11}-${serverDataType}`),
+        children: content
+      }
+    )
+  ] });
+};
+
+// src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+var classBase12 = "vuuColumnSettingsPanel";
+var tabstripProps2 = {
+  className: "salt-density-high"
+};
+var NullActivationIndicator3 = () => null;
+var ColumnSettingsPanel2 = ({
+  column,
+  dispatchColumnAction,
+  style: styleProp,
+  ...props
+}) => {
+  var _a, _b, _c, _d;
+  const [activeTab, setActiveTab] = useState6(0);
+  const dispatchUpdate = useCallback10(
+    (values) => dispatchColumnAction({
+      type: "updateColumnProp",
+      column,
+      ...values
+    }),
+    [column, dispatchColumnAction]
+  );
+  const handleChangeAlign = useCallback10(
+    (evt) => dispatchUpdate({ align: evt.target.value }),
+    [dispatchUpdate]
+  );
+  const handleChangePin = useCallback10(
+    (evt) => dispatchUpdate({ pin: evt.target.value }),
+    [dispatchUpdate]
+  );
+  const handleChangeHidden = useCallback10(
+    (evt, value) => dispatchUpdate({ hidden: value }),
+    [dispatchUpdate]
+  );
+  const handleChangeLabel = useCallback10(
+    (evt, value) => dispatchUpdate({ label: value }),
+    [dispatchUpdate]
+  );
+  const handleChangeWidth = useCallback10(
+    (value) => dispatchUpdate({ width: parseInt(value.toString(), 10) }),
+    [dispatchUpdate]
+  );
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: classBase12,
+      ...props,
+      style: {
+        ...styleProp
+      },
+      children: [
+        /* @__PURE__ */ jsx17(Text7, { as: "h4", children: "Column Settings" }),
+        /* @__PURE__ */ jsxs14(
+          Stack3,
+          {
+            active: activeTab,
+            showTabs: true,
+            className: cx9(`${classBase12}-columnTabs`),
+            onTabSelectionChanged: setActiveTab,
+            TabstripProps: tabstripProps2,
+            children: [
+              /* @__PURE__ */ jsxs14(Panel7, { title: "Column", children: [
+                /* @__PURE__ */ jsx17(FormField6, { label: "Hidden", labelPlacement: "left", children: /* @__PURE__ */ jsx17(
+                  Checkbox2,
+                  {
+                    checked: column.hidden === true,
+                    onChange: handleChangeHidden
+                  }
+                ) }),
+                /* @__PURE__ */ jsx17(FormField6, { label: "Label", labelPlacement: "left", children: /* @__PURE__ */ jsx17(
+                  Input3,
+                  {
+                    value: (_a = column.label) != null ? _a : column.name,
+                    onChange: handleChangeLabel
+                  }
+                ) }),
+                /* @__PURE__ */ jsx17(FormField6, { label: "Width", labelPlacement: "left", children: /* @__PURE__ */ jsx17(
+                  StepperInput5,
+                  {
+                    value: (_b = column.width) != null ? _b : 100,
+                    onChange: handleChangeWidth
+                  }
+                ) }),
+                /* @__PURE__ */ jsx17(
+                  FormField6,
+                  {
+                    label: "Align",
+                    labelPlacement: "left",
+                    ActivationIndicatorComponent: NullActivationIndicator3,
+                    children: /* @__PURE__ */ jsxs14(
+                      RadioButtonGroup3,
+                      {
+                        "aria-label": "Column Align",
+                        value: (_c = column.align) != null ? _c : "left",
+                        legend: "Align",
+                        onChange: handleChangeAlign,
+                        children: [
+                          /* @__PURE__ */ jsx17(RadioButton3, { label: "Left", value: "left" }),
+                          /* @__PURE__ */ jsx17(RadioButton3, { label: "Right", value: "right" })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx17(
+                  FormField6,
+                  {
+                    label: "Pin Column",
+                    labelPlacement: "left",
+                    ActivationIndicatorComponent: NullActivationIndicator3,
+                    children: /* @__PURE__ */ jsxs14(
+                      RadioButtonGroup3,
+                      {
+                        "aria-label": "Pin Column",
+                        value: (_d = column.pin) != null ? _d : "",
+                        legend: "Pin Column",
+                        onChange: handleChangePin,
+                        children: [
+                          /* @__PURE__ */ jsx17(RadioButton3, { label: "Do not pin", value: "" }),
+                          /* @__PURE__ */ jsx17(RadioButton3, { label: "Left", value: "left" }),
+                          /* @__PURE__ */ jsx17(RadioButton3, { label: "Right", value: "right" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx17(
+                ColumnTypePanel2,
+                {
+                  column,
+                  dispatchColumnAction,
+                  title: "Data Cell"
+                }
+              ),
+              /* @__PURE__ */ jsxs14(Panel7, { title: "Vuu", variant: "secondary", children: [
+                /* @__PURE__ */ jsx17(
+                  FormField6,
+                  {
+                    label: "Name",
+                    labelPlacement: "top",
+                    readOnly: true,
+                    variant: "secondary",
+                    children: /* @__PURE__ */ jsx17(Input3, { value: column.name })
+                  }
+                ),
+                /* @__PURE__ */ jsx17(
+                  FormField6,
+                  {
+                    label: "Vuu type",
+                    labelPlacement: "top",
+                    readOnly: true,
+                    variant: "secondary",
+                    children: /* @__PURE__ */ jsx17(Input3, { value: column.serverDataType })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 export {
   ColumnExpressionInput,
   ColumnNamedTerms,
+  ColumnSettingsPanel2 as ColumnSettingsPanel,
   DataSourceStats,
   DatagridSettingsPanel,
   columnExpressionLanguageSupport,