@deephaven/iris-grid 0.9.4-plugins.9 → 0.10.1-beta.0

package/dist/sidebar/conditional-formatting/ConditionalFormatEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/sidebar/conditional-formatting/ConditionalFormatEditor.tsx"],"names":["React","useCallback","useState","classNames","Button","Log","FormatColumnWhereIcon","FormatRowWhereIcon","ColumnFormatEditor","RowFormatEditor","FormatterType","log","module","DEFAULT_CALLBACK","undefined","getFormatterTypeIcon","option","CONDITIONAL","ROWS","getFormatterTypeLabel","formatterTypes","ConditionalFormatEditor","props","columns","onSave","onUpdate","onCancel","rule","defaultRule","selectedFormatter","setFormatter","type","setRule","isValid","setIsValid","handleCancel","handleSave","error","handleFormatterChange","value","debug","handleRuleChange","ruleConfig","isRuleValid","updatedRule","config","map","index","active"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport { Button } from '@deephaven/components';\nimport Log from '@deephaven/log';\nimport { FormatColumnWhereIcon, FormatRowWhereIcon } from '../icons';\nimport ColumnFormatEditor from './ColumnFormatEditor';\nimport RowFormatEditor from './RowFormatEditor';\nimport {\n  BaseFormatConfig,\n  FormatterType,\n  FormattingRule,\n  ModelColumn,\n} from './ConditionalFormattingUtils';\nimport './ConditionalFormatEditor.scss';\n\nconst log = Log.module('ConditionalFormatEditor');\n\nexport type SaveCallback = (rule: FormattingRule) => void;\n\nexport type UpdateCallback = (rule?: FormattingRule) => void;\n\nexport type CancelCallback = () => void;\n\nexport interface ConditionalFormatEditorProps {\n  columns: ModelColumn[];\n  rule?: FormattingRule;\n  onCancel?: CancelCallback;\n  onSave?: SaveCallback;\n  onUpdate?: UpdateCallback;\n}\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction getFormatterTypeIcon(option: FormatterType): JSX.Element | undefined {\n  switch (option) {\n    case FormatterType.CONDITIONAL:\n      return <FormatColumnWhereIcon />;\n    case FormatterType.ROWS:\n      return <FormatRowWhereIcon />;\n  }\n}\n\nfunction getFormatterTypeLabel(option: FormatterType): string {\n  switch (option) {\n    case FormatterType.CONDITIONAL:\n      return 'Conditional';\n    case FormatterType.ROWS:\n      return 'Rows';\n  }\n}\n\nconst formatterTypes = [FormatterType.CONDITIONAL, FormatterType.ROWS];\n\nconst ConditionalFormatEditor = (\n  props: ConditionalFormatEditorProps\n): JSX.Element => {\n  const {\n    columns,\n    onSave = DEFAULT_CALLBACK,\n    onUpdate = DEFAULT_CALLBACK,\n    onCancel = DEFAULT_CALLBACK,\n    rule: defaultRule,\n  } = props;\n\n  const [selectedFormatter, setFormatter] = useState(\n    defaultRule?.type ?? formatterTypes[0]\n  );\n  const [rule, setRule] = useState(defaultRule);\n  const [isValid, setIsValid] = useState(false);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleSave = useCallback(() => {\n    if (rule === undefined) {\n      log.error('Rule is not defined.');\n      return;\n    }\n    onSave(rule);\n  }, [onSave, rule]);\n\n  const handleFormatterChange = useCallback(value => {\n    log.debug('handleFormatterChange', value);\n    setFormatter(value);\n  }, []);\n\n  const handleRuleChange = useCallback(\n    (ruleConfig, isRuleValid) => {\n      log.debug('handleRuleChange', ruleConfig, isRuleValid, selectedFormatter);\n      const updatedRule = {\n        type: selectedFormatter,\n        config: ruleConfig as BaseFormatConfig,\n      };\n      setRule(updatedRule);\n      setIsValid(isRuleValid);\n      onUpdate(isRuleValid ? updatedRule : undefined);\n    },\n    [onUpdate, selectedFormatter]\n  );\n\n  return (\n    <div className=\"conditional-format-editor form\">\n      <div className=\"mb-2\">\n        <label className=\"mb-0\" htmlFor=\"formatter-select\">\n          Select Formatter\n        </label>\n\n        <div className=\"formatter-list\">\n          {formatterTypes.map((type, index) => (\n            <div key={type} className=\"formatter-type\">\n              <button\n                type=\"button\"\n                className={classNames('btn', 'btn-icon', 'btn-formatter-type', {\n                  active: type === selectedFormatter,\n                })}\n                data-index={index}\n                onClick={() => handleFormatterChange(type)}\n              >\n                {getFormatterTypeIcon(type)}\n                {getFormatterTypeLabel(type)}\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n      {selectedFormatter === FormatterType.CONDITIONAL && (\n        <ColumnFormatEditor\n          columns={columns}\n          config={rule?.config}\n          onChange={handleRuleChange}\n        />\n      )}\n      {selectedFormatter === FormatterType.ROWS && (\n        <RowFormatEditor\n          columns={columns}\n          config={rule?.config}\n          onChange={handleRuleChange}\n        />\n      )}\n      <hr />\n      <div className=\"d-flex justify-content-end my-3\">\n        <Button kind=\"secondary\" onClick={handleCancel} className=\"mr-2\">\n          Cancel\n        </Button>\n        <Button\n          kind=\"primary\"\n          onClick={handleSave}\n          disabled={rule === undefined || !isValid}\n        >\n          Done\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default ConditionalFormatEditor;\n"],"file":"ConditionalFormatEditor.js"}

package/dist/sidebar/conditional-formatting/ConditionalFormattingAPIUtils.d.ts

@@ -0,0 +1,6 @@
+import { Column, CustomColumn } from '@deephaven/jsapi-shim';
+import { BaseFormatConfig } from './ConditionalFormattingUtils';
+export declare function makeTernaryFormatRule(config: BaseFormatConfig, prevRule: string): string | undefined;
+export declare function makeRowFormatColumn(rule: string): CustomColumn;
+export declare function makeColumnFormatColumn(col: Column, rule: string): CustomColumn;
+//# sourceMappingURL=ConditionalFormattingAPIUtils.d.ts.map

package/dist/sidebar/conditional-formatting/ConditionalFormattingAPIUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalFormattingAPIUtils.d.ts","sourceRoot":"","sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingAPIUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EACL,gBAAgB,EAGjB,MAAM,8BAA8B,CAAC;AAMtC,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,gBAAgB,EACxB,QAAQ,EAAE,MAAM,GACf,MAAM,GAAG,SAAS,CAOpB;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,CAE9D;AAED,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,GACX,YAAY,CAEd"}

package/dist/sidebar/conditional-formatting/ConditionalFormattingAPIUtils.js

@@ -0,0 +1,21 @@
+import { getConditionDBString, getStyleDBString } from "./ConditionalFormattingUtils.js"; // Conditional formatting API utils in a separate file
+// to make ConditionalFormattingUtils.ts easier to test.
+// https://github.com/facebook/jest/issues/936#issuecomment-545080082
+
+export function makeTernaryFormatRule(config, prevRule) {
+  var styleDBString = getStyleDBString(config);
+
+  if (styleDBString === undefined) {
+    return undefined;
+  }
+
+  var conditionDBString = getConditionDBString(config);
+  return "".concat(conditionDBString, " ? ").concat(styleDBString, " : ").concat(prevRule);
+}
+export function makeRowFormatColumn(rule) {
+  return dh.Column.formatRowColor(rule);
+}
+export function makeColumnFormatColumn(col, rule) {
+  return col.formatColor(rule);
+}
+//# sourceMappingURL=ConditionalFormattingAPIUtils.js.map

package/dist/sidebar/conditional-formatting/ConditionalFormattingAPIUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingAPIUtils.ts"],"names":["getConditionDBString","getStyleDBString","makeTernaryFormatRule","config","prevRule","styleDBString","undefined","conditionDBString","makeRowFormatColumn","rule","dh","Column","formatRowColor","makeColumnFormatColumn","col","formatColor"],"mappings":"SAGEA,oB,EACAC,gB,2CAGF;AACA;AACA;;AAEA,OAAO,SAASC,qBAAT,CACLC,MADK,EAELC,QAFK,EAGe;AACpB,MAAMC,aAAa,GAAGJ,gBAAgB,CAACE,MAAD,CAAtC;;AACA,MAAIE,aAAa,KAAKC,SAAtB,EAAiC;AAC/B,WAAOA,SAAP;AACD;;AACD,MAAMC,iBAAiB,GAAGP,oBAAoB,CAACG,MAAD,CAA9C;AACA,mBAAUI,iBAAV,gBAAiCF,aAAjC,gBAAoDD,QAApD;AACD;AAED,OAAO,SAASI,mBAAT,CAA6BC,IAA7B,EAAyD;AAC9D,SAAOC,EAAE,CAACC,MAAH,CAAUC,cAAV,CAAyBH,IAAzB,CAAP;AACD;AAED,OAAO,SAASI,sBAAT,CACLC,GADK,EAELL,IAFK,EAGS;AACd,SAAOK,GAAG,CAACC,WAAJ,CAAgBN,IAAhB,CAAP;AACD","sourcesContent":["import { Column, CustomColumn } from '@deephaven/jsapi-shim';\nimport {\n  BaseFormatConfig,\n  getConditionDBString,\n  getStyleDBString,\n} from './ConditionalFormattingUtils';\n\n// Conditional formatting API utils in a separate file\n// to make ConditionalFormattingUtils.ts easier to test.\n// https://github.com/facebook/jest/issues/936#issuecomment-545080082\n\nexport function makeTernaryFormatRule(\n  config: BaseFormatConfig,\n  prevRule: string\n): string | undefined {\n  const styleDBString = getStyleDBString(config);\n  if (styleDBString === undefined) {\n    return undefined;\n  }\n  const conditionDBString = getConditionDBString(config);\n  return `${conditionDBString} ? ${styleDBString} : ${prevRule}`;\n}\n\nexport function makeRowFormatColumn(rule: string): CustomColumn {\n  return dh.Column.formatRowColor(rule);\n}\n\nexport function makeColumnFormatColumn(\n  col: Column,\n  rule: string\n): CustomColumn {\n  return col.formatColor(rule);\n}\n"],"file":"ConditionalFormattingAPIUtils.js"}

package/dist/sidebar/conditional-formatting/ConditionalFormattingMenu.css

@@ -0,0 +1,56 @@
+.conditional-formatting-rules {
+  padding: 0.25rem;
+}
+
+.conditional-formatting-list-item {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 2px;
+  padding: 0 0.25rem;
+}
+.conditional-formatting-list-item:first-child {
+  padding-top: 0.25rem;
+}
+.conditional-formatting-list-item .formatting-item {
+  border-radius: 4px;
+  display: flex;
+  padding: 0.25rem;
+  flex-grow: 1;
+  align-items: center;
+  user-select: none;
+  transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
+  border: 1px solid transparent;
+  line-height: 1.5;
+  cursor: pointer;
+}
+.conditional-formatting-list-item .formatting-item .btn-drag-handle {
+  cursor: grab;
+}
+.conditional-formatting-list-item .formatting-item .rule-icon {
+  padding-right: 0.5rem;
+}
+.conditional-formatting-list-item .formatting-item .rule-icon-bg {
+  min-width: 2rem;
+  height: 2rem;
+  display: flex;
+  font-size: x-small;
+  justify-content: center;
+  align-items: center;
+}
+.conditional-formatting-list-item .formatting-item .rule-title {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  padding-right: 2px;
+  display: flex;
+  flex-grow: 1;
+}
+.conditional-formatting-list-item .formatting-item:focus {
+  outline: 0;
+  border: 1px solid rgba(72, 120, 234, 0.85);
+  box-shadow: 0 0 0 0.2rem rgba(72, 120, 234, 0.35);
+}
+.conditional-formatting-list-item .formatting-item:hover {
+  background: #5b5a5c;
+}
+
+/*# sourceMappingURL=ConditionalFormattingMenu.css.map */

package/dist/sidebar/conditional-formatting/ConditionalFormattingMenu.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingMenu.scss","../../../../components/scss/new_variables.scss","../../../../components/scss/bootstrap_overrides.scss","../../../../../node_modules/bootstrap/scss/_variables.scss"],"names":[],"mappings":"AAEA;EACE,SCDS;;;ADIX;EACE;EACA;EACA;EACA;;AAEA;EACE,aCXO;;ADcT;EACE,eEwGY;EFvGZ;EACA,SCjBO;EDkBP;EACA;EACA;EACA,YEyGa;EFxGb;EACA,aG+Q0B;EH9Q1B;;AAEA;EACE;;AAGF;EACE,eC9BK;;ADiCP;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,YEsFuB;;AFnFzB;EACE,YEtCK","file":"ConditionalFormattingMenu.css"}

package/dist/sidebar/conditional-formatting/ConditionalFormattingMenu.d.ts

@@ -0,0 +1,15 @@
+import './ConditionalFormattingMenu.scss';
+import { FormattingRule } from './ConditionalFormattingUtils';
+export declare type ChangeCallback = (rules: FormattingRule[]) => void;
+export declare type SelectCallback = (index: number) => void;
+export declare type CreateCallback = () => void;
+export declare type ConditionalFormattingMenuProps = {
+    rules: FormattingRule[];
+    selectedColumn?: string;
+    onChange?: ChangeCallback;
+    onCreate?: CreateCallback;
+    onSelect?: SelectCallback;
+};
+declare const ConditionalFormattingMenu: (props: ConditionalFormattingMenuProps) => JSX.Element;
+export default ConditionalFormattingMenu;
+//# sourceMappingURL=ConditionalFormattingMenu.d.ts.map

package/dist/sidebar/conditional-formatting/ConditionalFormattingMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalFormattingMenu.d.ts","sourceRoot":"","sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAEL,cAAc,EAQf,MAAM,8BAA8B,CAAC;AAKtC,oBAAY,cAAc,GAAG,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;AAE/D,oBAAY,cAAc,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAErD,oBAAY,cAAc,GAAG,MAAM,IAAI,CAAC;AAExC,oBAAY,8BAA8B,GAAG;IAC3C,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAoDF,QAAA,MAAM,yBAAyB,UACtB,8BAA8B,KACpC,WA0JF,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/sidebar/conditional-formatting/ConditionalFormattingMenu.js

@@ -0,0 +1,160 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback } from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { dhNewCircleLargeFilled, vsGripper, vsTrash } from '@deephaven/icons';
+import { Button, DragUtils, Tooltip } from '@deephaven/components';
+import Log from '@deephaven/log';
+import "./ConditionalFormattingMenu.css";
+import { FormatterType, getBackgroundForStyleConfig, getColorForStyleConfig, getShortLabelForConditionType, NumberCondition, StringCondition, DateCondition } from "./ConditionalFormattingUtils.js";
+import TableUtils from "../../TableUtils.js";
+var log = Log.module('ConditionalFormattingMenu');
+
+var DEFAULT_CALLBACK = () => undefined;
+
+function getRuleValue(config) {
+  var {
+    column: {
+      type
+    }
+  } = config;
+
+  if (TableUtils.isNumberType(type)) {
+    return config.condition === NumberCondition.IS_NULL || config.condition === NumberCondition.IS_NOT_NULL ? '' : "".concat(config.value);
+  }
+
+  if (TableUtils.isCharType(type)) {
+    return config.condition === DateCondition.IS_NULL || config.condition === DateCondition.IS_NOT_NULL ? '' : "".concat(config.value);
+  }
+
+  if (TableUtils.isTextType(type)) {
+    return config.condition === StringCondition.IS_NULL || config.condition === StringCondition.IS_NOT_NULL ? '' : "\"".concat(config.value, "\"");
+  }
+
+  if (TableUtils.isDateType(type)) {
+    return config.condition === DateCondition.IS_NULL || config.condition === DateCondition.IS_NOT_NULL ? '' : "".concat(config.value);
+  }
+
+  if (TableUtils.isBooleanType(type)) {
+    return '';
+  }
+
+  throw new Error("Invalid column type ".concat(type, " in getRuleValue"));
+}
+
+function getRuleTitle(config) {
+  if (TableUtils.isNumberType(config.column.type) && config.condition === NumberCondition.IS_BETWEEN) {
+    return "".concat(config.start, " < ").concat(config.column.name, " < ").concat(config.end);
+  }
+
+  return "".concat(config.column.name, " ").concat(getShortLabelForConditionType(config.column.type, config.condition), " \n    ").concat(getRuleValue(config));
+}
+
+var ConditionalFormattingMenu = props => {
+  var {
+    rules = [],
+    onChange = DEFAULT_CALLBACK,
+    onCreate = DEFAULT_CALLBACK,
+    onSelect = DEFAULT_CALLBACK
+  } = props;
+  var handleRuleClick = useCallback((e, rule, index) => {
+    e.stopPropagation();
+    log.debug('Rule clicked', rule, index);
+    onSelect(index);
+  }, [onSelect]);
+  var handleDeleteClick = useCallback((e, rule, index) => {
+    e.stopPropagation();
+    log.debug('Delete button clicked', rule, index);
+    var updatedRules = [...rules];
+    updatedRules.splice(index, 1);
+    onChange(updatedRules);
+  }, [onChange, rules]);
+  var handleDragHandlerClick = useCallback(e => {
+    e.stopPropagation();
+  }, []);
+  var handleDragEnd = useCallback(result => {
+    DragUtils.stopDragging(); // if dropped outside the list
+
+    if (!result.destination) {
+      return;
+    }
+
+    var sourceIndex = result.source.index;
+    var destinationIndex = result.destination.index;
+    var updatedRules = [...rules];
+    var sourceInput = rules[sourceIndex];
+    updatedRules.splice(sourceIndex, 1);
+    updatedRules.splice(destinationIndex, 0, sourceInput);
+    onChange(updatedRules);
+  }, [onChange, rules]); // Display list of rules
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "conditional-formatting-rules"
+  }, /*#__PURE__*/React.createElement(DragDropContext, {
+    onDragStart: DragUtils.startDragging,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/React.createElement(Droppable, {
+    droppableId: "droppable-custom-columns"
+  }, (provided, snapshot) => /*#__PURE__*/React.createElement("div", _extends({
+    ref: provided.innerRef // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, provided.droppableProps, {
+    className: classNames('droppable-container', {
+      dragging: snapshot.draggingFromThisWith
+    })
+  }), rules.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "text-muted pl-2"
+  }, "No formats defined"), rules.map((rule, index) => /*#__PURE__*/React.createElement(Draggable // eslint-disable-next-line react/no-array-index-key
+  , {
+    key: "".concat(index, "-").concat(rule.type),
+    draggableId: "".concat(index, "-").concat(rule.type),
+    index: index,
+    disableInteractiveElementBlocking: true
+  }, // eslint-disable-next-line @typescript-eslint/no-shadow
+  (provided, snapshot) => /*#__PURE__*/React.createElement("div", _extends({
+    role: "menuitem",
+    tabIndex: 0,
+    onClick: e => handleRuleClick(e, rule, index),
+    className: classNames('draggable-container', {
+      dragging: snapshot.isDragging
+    }),
+    ref: provided.innerRef // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, provided.draggableProps), /*#__PURE__*/React.createElement("div", {
+    className: "conditional-formatting-list-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "formatting-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "rule-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "rule-icon-bg",
+    style: {
+      backgroundColor: getBackgroundForStyleConfig(rule.config.style),
+      color: getColorForStyleConfig(rule.config.style)
+    }
+  }, rule.type === FormatterType.ROWS ? 'row' : 'col')), /*#__PURE__*/React.createElement("div", {
+    className: "rule-title"
+  }, getRuleTitle(rule.config)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "btn btn-link btn-link-icon ml-1 px-2",
+    onClick: e => handleDeleteClick(e, rule, index)
+  }, /*#__PURE__*/React.createElement(Tooltip, null, "Delete rule"), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsTrash
+  })), /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: "btn btn-link btn-link-icon px-2 btn-drag-handle",
+    onClick: handleDragHandlerClick // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, provided.dragHandleProps), /*#__PURE__*/React.createElement(Tooltip, null, "Drag to re-order"), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsGripper
+  }))))))), provided.placeholder))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    onClick: onCreate,
+    icon: dhNewCircleLargeFilled
+  }, "Add New Rule"));
+};
+
+export default ConditionalFormattingMenu;
+//# sourceMappingURL=ConditionalFormattingMenu.js.map

package/dist/sidebar/conditional-formatting/ConditionalFormattingMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingMenu.tsx"],"names":["React","useCallback","DragDropContext","Draggable","Droppable","classNames","FontAwesomeIcon","dhNewCircleLargeFilled","vsGripper","vsTrash","Button","DragUtils","Tooltip","Log","FormatterType","getBackgroundForStyleConfig","getColorForStyleConfig","getShortLabelForConditionType","NumberCondition","StringCondition","DateCondition","TableUtils","log","module","DEFAULT_CALLBACK","undefined","getRuleValue","config","column","type","isNumberType","condition","IS_NULL","IS_NOT_NULL","value","isCharType","isTextType","isDateType","isBooleanType","Error","getRuleTitle","IS_BETWEEN","start","name","end","ConditionalFormattingMenu","props","rules","onChange","onCreate","onSelect","handleRuleClick","e","rule","index","stopPropagation","debug","handleDeleteClick","updatedRules","splice","handleDragHandlerClick","handleDragEnd","result","stopDragging","destination","sourceIndex","source","destinationIndex","sourceInput","startDragging","provided","snapshot","innerRef","droppableProps","dragging","draggingFromThisWith","length","map","isDragging","draggableProps","backgroundColor","style","color","ROWS","dragHandleProps","placeholder"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAASC,eAAT,EAA0BC,SAA1B,EAAqCC,SAArC,QAAsD,qBAAtD;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,sBAAT,EAAiCC,SAAjC,EAA4CC,OAA5C,QAA2D,kBAA3D;AACA,SAASC,MAAT,EAAiBC,SAAjB,EAA4BC,OAA5B,QAA2C,uBAA3C;AACA,OAAOC,GAAP,MAAgB,gBAAhB;;SAMEC,a,EACAC,2B,EACAC,sB,EACAC,6B,EACAC,e,EACAC,e,EACAC,a;OAEKC,U;AAEP,IAAMC,GAAG,GAAGT,GAAG,CAACU,MAAJ,CAAW,2BAAX,CAAZ;;AAgBA,IAAMC,gBAAgB,GAAG,MAAMC,SAA/B;;AAEA,SAASC,YAAT,CAAsBC,MAAtB,EAAwD;AACtD,MAAM;AACJC,IAAAA,MAAM,EAAE;AAAEC,MAAAA;AAAF;AADJ,MAEFF,MAFJ;;AAGA,MAAIN,UAAU,CAACS,YAAX,CAAwBD,IAAxB,CAAJ,EAAmC;AACjC,WAAOF,MAAM,CAACI,SAAP,KAAqBb,eAAe,CAACc,OAArC,IACLL,MAAM,CAACI,SAAP,KAAqBb,eAAe,CAACe,WADhC,GAEH,EAFG,aAGAN,MAAM,CAACO,KAHP,CAAP;AAID;;AACD,MAAIb,UAAU,CAACc,UAAX,CAAsBN,IAAtB,CAAJ,EAAiC;AAC/B,WAAOF,MAAM,CAACI,SAAP,KAAqBX,aAAa,CAACY,OAAnC,IACLL,MAAM,CAACI,SAAP,KAAqBX,aAAa,CAACa,WAD9B,GAEH,EAFG,aAGAN,MAAM,CAACO,KAHP,CAAP;AAID;;AACD,MAAIb,UAAU,CAACe,UAAX,CAAsBP,IAAtB,CAAJ,EAAiC;AAC/B,WAAOF,MAAM,CAACI,SAAP,KAAqBZ,eAAe,CAACa,OAArC,IACLL,MAAM,CAACI,SAAP,KAAqBZ,eAAe,CAACc,WADhC,GAEH,EAFG,eAGCN,MAAM,CAACO,KAHR,OAAP;AAID;;AACD,MAAIb,UAAU,CAACgB,UAAX,CAAsBR,IAAtB,CAAJ,EAAiC;AAC/B,WAAOF,MAAM,CAACI,SAAP,KAAqBX,aAAa,CAACY,OAAnC,IACLL,MAAM,CAACI,SAAP,KAAqBX,aAAa,CAACa,WAD9B,GAEH,EAFG,aAGAN,MAAM,CAACO,KAHP,CAAP;AAID;;AACD,MAAIb,UAAU,CAACiB,aAAX,CAAyBT,IAAzB,CAAJ,EAAoC;AAClC,WAAO,EAAP;AACD;;AACD,QAAM,IAAIU,KAAJ,+BAAiCV,IAAjC,sBAAN;AACD;;AAED,SAASW,YAAT,CAAsBb,MAAtB,EAAwD;AACtD,MACEN,UAAU,CAACS,YAAX,CAAwBH,MAAM,CAACC,MAAP,CAAcC,IAAtC,KACAF,MAAM,CAACI,SAAP,KAAqBb,eAAe,CAACuB,UAFvC,EAGE;AACA,qBAAUd,MAAM,CAACe,KAAjB,gBAA4Bf,MAAM,CAACC,MAAP,CAAce,IAA1C,gBAAoDhB,MAAM,CAACiB,GAA3D;AACD;;AACD,mBAAUjB,MAAM,CAACC,MAAP,CAAce,IAAxB,cAAgC1B,6BAA6B,CAC1DU,MAAD,CAA6BC,MAA7B,CAAoCC,IADuB,EAE1DF,MAAD,CAA6BI,SAF8B,CAA7D,oBAIIL,YAAY,CAACC,MAAD,CAJhB;AAKD;;AAED,IAAMkB,yBAAyB,GAC7BC,KADgC,IAEhB;AAChB,MAAM;AACJC,IAAAA,KAAK,GAAG,EADJ;AAEJC,IAAAA,QAAQ,GAAGxB,gBAFP;AAGJyB,IAAAA,QAAQ,GAAGzB,gBAHP;AAIJ0B,IAAAA,QAAQ,GAAG1B;AAJP,MAKFsB,KALJ;AAOA,MAAMK,eAAe,GAAGlD,WAAW,CACjC,CAACmD,CAAD,EAAIC,IAAJ,EAAUC,KAAV,KAAoB;AAClBF,IAAAA,CAAC,CAACG,eAAF;AACAjC,IAAAA,GAAG,CAACkC,KAAJ,CAAU,cAAV,EAA0BH,IAA1B,EAAgCC,KAAhC;AACAJ,IAAAA,QAAQ,CAACI,KAAD,CAAR;AACD,GALgC,EAMjC,CAACJ,QAAD,CANiC,CAAnC;AASA,MAAMO,iBAAiB,GAAGxD,WAAW,CACnC,CAACmD,CAAD,EAAIC,IAAJ,EAAUC,KAAV,KAAoB;AAClBF,IAAAA,CAAC,CAACG,eAAF;AACAjC,IAAAA,GAAG,CAACkC,KAAJ,CAAU,uBAAV,EAAmCH,IAAnC,EAAyCC,KAAzC;AACA,QAAMI,YAAY,GAAG,CAAC,GAAGX,KAAJ,CAArB;AACAW,IAAAA,YAAY,CAACC,MAAb,CAAoBL,KAApB,EAA2B,CAA3B;AACAN,IAAAA,QAAQ,CAACU,YAAD,CAAR;AACD,GAPkC,EAQnC,CAACV,QAAD,EAAWD,KAAX,CARmC,CAArC;AAWA,MAAMa,sBAAsB,GAAG3D,WAAW,CAACmD,CAAC,IAAI;AAC9CA,IAAAA,CAAC,CAACG,eAAF;AACD,GAFyC,EAEvC,EAFuC,CAA1C;AAIA,MAAMM,aAAa,GAAG5D,WAAW,CAC/B6D,MAAM,IAAI;AACRnD,IAAAA,SAAS,CAACoD,YAAV,GADQ,CAGR;;AACA,QAAI,CAACD,MAAM,CAACE,WAAZ,EAAyB;AACvB;AACD;;AACD,QAAMC,WAAW,GAAGH,MAAM,CAACI,MAAP,CAAcZ,KAAlC;AACA,QAAMa,gBAAgB,GAAGL,MAAM,CAACE,WAAP,CAAmBV,KAA5C;AACA,QAAMI,YAAY,GAAG,CAAC,GAAGX,KAAJ,CAArB;AACA,QAAMqB,WAAW,GAAGrB,KAAK,CAACkB,WAAD,CAAzB;AAEAP,IAAAA,YAAY,CAACC,MAAb,CAAoBM,WAApB,EAAiC,CAAjC;AACAP,IAAAA,YAAY,CAACC,MAAb,CAAoBQ,gBAApB,EAAsC,CAAtC,EAAyCC,WAAzC;AAEApB,IAAAA,QAAQ,CAACU,YAAD,CAAR;AACD,GAjB8B,EAkB/B,CAACV,QAAD,EAAWD,KAAX,CAlB+B,CAAjC,CAhCgB,CAqDhB;;AACA,sBACE;AAAK,IAAA,SAAS,EAAC;AAAf,kBACE,oBAAC,eAAD;AACE,IAAA,WAAW,EAAEpC,SAAS,CAAC0D,aADzB;AAEE,IAAA,SAAS,EAAER;AAFb,kBAIE,oBAAC,SAAD;AAAW,IAAA,WAAW,EAAC;AAAvB,KACG,CAACS,QAAD,EAAWC,QAAX,kBACC;AACE,IAAA,GAAG,EAAED,QAAQ,CAACE,QADhB,CAEE;;AAFF,KAGMF,QAAQ,CAACG,cAHf;AAIE,IAAA,SAAS,EAAEpE,UAAU,CAAC,qBAAD,EAAwB;AAC3CqE,MAAAA,QAAQ,EAAEH,QAAQ,CAACI;AADwB,KAAxB;AAJvB,MAQG5B,KAAK,CAAC6B,MAAN,KAAiB,CAAjB,iBACC;AAAK,IAAA,SAAS,EAAC;AAAf,0BATJ,EAWG7B,KAAK,CAAC8B,GAAN,CAAU,CAACxB,IAAD,EAAOC,KAAP,kBACT,oBAAC,SAAD,CACE;AADF;AAEE,IAAA,GAAG,YAAKA,KAAL,cAAcD,IAAI,CAACxB,IAAnB,CAFL;AAGE,IAAA,WAAW,YAAKyB,KAAL,cAAcD,IAAI,CAACxB,IAAnB,CAHb;AAIE,IAAA,KAAK,EAAEyB,KAJT;AAKE,IAAA,iCAAiC;AALnC,KAQI;AACA,GAACgB,QAAD,EAAWC,QAAX,kBACE;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,QAAQ,EAAE,CAFZ;AAGE,IAAA,OAAO,EAAEnB,CAAC,IAAID,eAAe,CAACC,CAAD,EAAIC,IAAJ,EAAUC,KAAV,CAH/B;AAIE,IAAA,SAAS,EAAEjD,UAAU,CAAC,qBAAD,EAAwB;AAC3CqE,MAAAA,QAAQ,EAAEH,QAAQ,CAACO;AADwB,KAAxB,CAJvB;AAOE,IAAA,GAAG,EAAER,QAAQ,CAACE,QAPhB,CAQE;;AARF,KASMF,QAAQ,CAACS,cATf,gBAWE;AAAK,IAAA,SAAS,EAAC;AAAf,kBACE;AAAK,IAAA,SAAS,EAAC;AAAf,kBACE;AAAK,IAAA,SAAS,EAAC;AAAf,kBACE;AACE,IAAA,SAAS,EAAC,cADZ;AAEE,IAAA,KAAK,EAAE;AACLC,MAAAA,eAAe,EAAEjE,2BAA2B,CACzCsC,IAAI,CAAC1B,MAAN,CAAkCsD,KADQ,CADvC;AAILC,MAAAA,KAAK,EAAElE,sBAAsB,CAC1BqC,IAAI,CAAC1B,MAAN,CAAkCsD,KADP;AAJxB;AAFT,KAWG5B,IAAI,CAACxB,IAAL,KAAcf,aAAa,CAACqE,IAA5B,GACG,KADH,GAEG,KAbN,CADF,CADF,eAkBE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG3C,YAAY,CAACa,IAAI,CAAC1B,MAAN,CADf,CAlBF,eAqBE;AACE,IAAA,IAAI,EAAC,QADP;AAEE,IAAA,SAAS,EAAC,sCAFZ;AAGE,IAAA,OAAO,EAAEyB,CAAC,IAAIK,iBAAiB,CAACL,CAAD,EAAIC,IAAJ,EAAUC,KAAV;AAHjC,kBAKE,oBAAC,OAAD,sBALF,eAME,oBAAC,eAAD;AAAiB,IAAA,IAAI,EAAE7C;AAAvB,IANF,CArBF,eA8BE;AACE,IAAA,IAAI,EAAC,QADP;AAEE,IAAA,SAAS,EAAC,iDAFZ;AAGE,IAAA,OAAO,EAAEmD,sBAHX,CAIE;;AAJF,KAKMU,QAAQ,CAACc,eALf,gBAOE,oBAAC,OAAD,2BAPF,eAQE,oBAAC,eAAD;AAAiB,IAAA,IAAI,EAAE5E;AAAvB,IARF,CA9BF,CADF,CAXF,CAVN,CADD,CAXH,EAiFG8D,QAAQ,CAACe,WAjFZ,CAFJ,CAJF,CADF,eA6FE,+BA7FF,eA8FE,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAC,OAAb;AAAqB,IAAA,OAAO,EAAEpC,QAA9B;AAAwC,IAAA,IAAI,EAAE1C;AAA9C,oBA9FF,CADF;AAoGD,CA5JD;;AA8JA,eAAesC,yBAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhNewCircleLargeFilled, vsGripper, vsTrash } from '@deephaven/icons';\nimport { Button, DragUtils, Tooltip } from '@deephaven/components';\nimport Log from '@deephaven/log';\n\nimport './ConditionalFormattingMenu.scss';\nimport {\n  BaseFormatConfig,\n  FormattingRule,\n  FormatterType,\n  getBackgroundForStyleConfig,\n  getColorForStyleConfig,\n  getShortLabelForConditionType,\n  NumberCondition,\n  StringCondition,\n  DateCondition,\n} from './ConditionalFormattingUtils';\nimport TableUtils from '../../TableUtils';\n\nconst log = Log.module('ConditionalFormattingMenu');\n\nexport type ChangeCallback = (rules: FormattingRule[]) => void;\n\nexport type SelectCallback = (index: number) => void;\n\nexport type CreateCallback = () => void;\n\nexport type ConditionalFormattingMenuProps = {\n  rules: FormattingRule[];\n  selectedColumn?: string;\n  onChange?: ChangeCallback;\n  onCreate?: CreateCallback;\n  onSelect?: SelectCallback;\n};\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction getRuleValue(config: BaseFormatConfig): string {\n  const {\n    column: { type },\n  } = config;\n  if (TableUtils.isNumberType(type)) {\n    return config.condition === NumberCondition.IS_NULL ||\n      config.condition === NumberCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isCharType(type)) {\n    return config.condition === DateCondition.IS_NULL ||\n      config.condition === DateCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isTextType(type)) {\n    return config.condition === StringCondition.IS_NULL ||\n      config.condition === StringCondition.IS_NOT_NULL\n      ? ''\n      : `\"${config.value}\"`;\n  }\n  if (TableUtils.isDateType(type)) {\n    return config.condition === DateCondition.IS_NULL ||\n      config.condition === DateCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isBooleanType(type)) {\n    return '';\n  }\n  throw new Error(`Invalid column type ${type} in getRuleValue`);\n}\n\nfunction getRuleTitle(config: BaseFormatConfig): string {\n  if (\n    TableUtils.isNumberType(config.column.type) &&\n    config.condition === NumberCondition.IS_BETWEEN\n  ) {\n    return `${config.start} < ${config.column.name} < ${config.end}`;\n  }\n  return `${config.column.name} ${getShortLabelForConditionType(\n    (config as BaseFormatConfig).column.type,\n    (config as BaseFormatConfig).condition\n  )} \n    ${getRuleValue(config as BaseFormatConfig)}`;\n}\n\nconst ConditionalFormattingMenu = (\n  props: ConditionalFormattingMenuProps\n): JSX.Element => {\n  const {\n    rules = [],\n    onChange = DEFAULT_CALLBACK,\n    onCreate = DEFAULT_CALLBACK,\n    onSelect = DEFAULT_CALLBACK,\n  } = props;\n\n  const handleRuleClick = useCallback(\n    (e, rule, index) => {\n      e.stopPropagation();\n      log.debug('Rule clicked', rule, index);\n      onSelect(index);\n    },\n    [onSelect]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e, rule, index) => {\n      e.stopPropagation();\n      log.debug('Delete button clicked', rule, index);\n      const updatedRules = [...rules];\n      updatedRules.splice(index, 1);\n      onChange(updatedRules);\n    },\n    [onChange, rules]\n  );\n\n  const handleDragHandlerClick = useCallback(e => {\n    e.stopPropagation();\n  }, []);\n\n  const handleDragEnd = useCallback(\n    result => {\n      DragUtils.stopDragging();\n\n      // if dropped outside the list\n      if (!result.destination) {\n        return;\n      }\n      const sourceIndex = result.source.index;\n      const destinationIndex = result.destination.index;\n      const updatedRules = [...rules];\n      const sourceInput = rules[sourceIndex];\n\n      updatedRules.splice(sourceIndex, 1);\n      updatedRules.splice(destinationIndex, 0, sourceInput);\n\n      onChange(updatedRules);\n    },\n    [onChange, rules]\n  );\n\n  // Display list of rules\n  return (\n    <div className=\"conditional-formatting-rules\">\n      <DragDropContext\n        onDragStart={DragUtils.startDragging}\n        onDragEnd={handleDragEnd}\n      >\n        <Droppable droppableId=\"droppable-custom-columns\">\n          {(provided, snapshot) => (\n            <div\n              ref={provided.innerRef}\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...provided.droppableProps}\n              className={classNames('droppable-container', {\n                dragging: snapshot.draggingFromThisWith,\n              })}\n            >\n              {rules.length === 0 && (\n                <div className=\"text-muted pl-2\">No formats defined</div>\n              )}\n              {rules.map((rule, index) => (\n                <Draggable\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={`${index}-${rule.type}`}\n                  draggableId={`${index}-${rule.type}`}\n                  index={index}\n                  disableInteractiveElementBlocking\n                >\n                  {\n                    // eslint-disable-next-line @typescript-eslint/no-shadow\n                    (provided, snapshot) => (\n                      <div\n                        role=\"menuitem\"\n                        tabIndex={0}\n                        onClick={e => handleRuleClick(e, rule, index)}\n                        className={classNames('draggable-container', {\n                          dragging: snapshot.isDragging,\n                        })}\n                        ref={provided.innerRef}\n                        // eslint-disable-next-line react/jsx-props-no-spreading\n                        {...provided.draggableProps}\n                      >\n                        <div className=\"conditional-formatting-list-item\">\n                          <div className=\"formatting-item\">\n                            <div className=\"rule-icon\">\n                              <span\n                                className=\"rule-icon-bg\"\n                                style={{\n                                  backgroundColor: getBackgroundForStyleConfig(\n                                    (rule.config as BaseFormatConfig).style\n                                  ),\n                                  color: getColorForStyleConfig(\n                                    (rule.config as BaseFormatConfig).style\n                                  ),\n                                }}\n                              >\n                                {rule.type === FormatterType.ROWS\n                                  ? 'row'\n                                  : 'col'}\n                              </span>\n                            </div>\n                            <div className=\"rule-title\">\n                              {getRuleTitle(rule.config as BaseFormatConfig)}\n                            </div>\n                            <button\n                              type=\"button\"\n                              className=\"btn btn-link btn-link-icon ml-1 px-2\"\n                              onClick={e => handleDeleteClick(e, rule, index)}\n                            >\n                              <Tooltip>Delete rule</Tooltip>\n                              <FontAwesomeIcon icon={vsTrash} />\n                            </button>\n\n                            <button\n                              type=\"button\"\n                              className=\"btn btn-link btn-link-icon px-2 btn-drag-handle\"\n                              onClick={handleDragHandlerClick}\n                              // eslint-disable-next-line react/jsx-props-no-spreading\n                              {...provided.dragHandleProps}\n                            >\n                              <Tooltip>Drag to re-order</Tooltip>\n                              <FontAwesomeIcon icon={vsGripper} />\n                            </button>\n                          </div>\n                        </div>\n                      </div>\n                    )\n                  }\n                </Draggable>\n              ))}\n              {provided.placeholder}\n            </div>\n          )}\n        </Droppable>\n      </DragDropContext>\n      <hr />\n      <Button kind=\"ghost\" onClick={onCreate} icon={dhNewCircleLargeFilled}>\n        Add New Rule\n      </Button>\n    </div>\n  );\n};\n\nexport default ConditionalFormattingMenu;\n"],"file":"ConditionalFormattingMenu.js"}

package/dist/sidebar/conditional-formatting/ConditionalFormattingUtils.d.ts

@@ -0,0 +1,119 @@
+import { Column, CustomColumn } from '@deephaven/jsapi-shim';
+export declare type ModelColumn = {
+    name: string;
+    type: string;
+};
+export declare type Condition = NumberCondition | StringCondition | DateCondition | BooleanCondition | CharCondition;
+export interface BaseFormatConfig {
+    column: ModelColumn;
+    condition: Condition;
+    value?: string;
+    start?: string;
+    end?: string;
+    style: FormatStyleConfig;
+}
+export interface ConditionConfig {
+    condition: Condition;
+    value?: string;
+    start?: string;
+    end?: string;
+}
+export declare type ChangeCallback = (ruleConfig: BaseFormatConfig, isValid: boolean) => void;
+export declare enum FormatterType {
+    CONDITIONAL = "conditional",
+    ROWS = "rows"
+}
+export interface FormattingRule {
+    type: FormatterType;
+    config: BaseFormatConfig;
+}
+export declare enum NumberCondition {
+    IS_EQUAL = "is-equal",
+    IS_NOT_EQUAL = "is-not-equal",
+    IS_BETWEEN = "is-between",
+    GREATER_THAN = "greater-than",
+    GREATER_THAN_OR_EQUAL = "greater-than-or-equal",
+    LESS_THAN = "less-than",
+    LESS_THAN_OR_EQUAL = "less-than-or-equal",
+    IS_NULL = "is-null",
+    IS_NOT_NULL = "is-not-null"
+}
+export declare enum StringCondition {
+    IS_EXACTLY = "is-exactly",
+    IS_NOT_EXACTLY = "is-not-exactly",
+    CONTAINS = "contains",
+    DOES_NOT_CONTAIN = "does-not-contain",
+    STARTS_WITH = "starts-with",
+    ENDS_WITH = "ends-with",
+    IS_NULL = "is-null",
+    IS_NOT_NULL = "is-not-null"
+}
+export declare enum DateCondition {
+    IS_EXACTLY = "is-exactly",
+    IS_NOT_EXACTLY = "is-not-exactly",
+    IS_BEFORE = "is-before",
+    IS_BEFORE_OR_EQUAL = "is-before-or-equal",
+    IS_AFTER = "is-after",
+    IS_AFTER_OR_EQUAL = "is-after-or-equal",
+    IS_NULL = "is-null",
+    IS_NOT_NULL = "is-not-null"
+}
+export declare enum BooleanCondition {
+    IS_TRUE = "is-true",
+    IS_FALSE = "is-false",
+    IS_NULL = "is-null",
+    IS_NOT_NULL = "is-not-null"
+}
+export declare enum CharCondition {
+    IS_EQUAL = "is-equal",
+    IS_NOT_EQUAL = "is-not-equal",
+    IS_NULL = "is-null",
+    IS_NOT_NULL = "is-not-null"
+}
+export declare enum FormatStyleType {
+    NO_FORMATTING = "no-formatting",
+    POSITIVE = "positive",
+    NEGATIVE = "negative",
+    WARN = "warn",
+    NEUTRAL = "neutral",
+    ACCENT_1 = "accent-1",
+    ACCENT_2 = "accent-2",
+    CUSTOM = "custom"
+}
+export interface FormatStyleConfig {
+    type: FormatStyleType;
+    customConfig?: {
+        color: string;
+        background: string;
+    };
+}
+export declare function getLabelForStyleType(option: FormatStyleType): string;
+export declare function getBackgroundForStyleConfig(config: FormatStyleConfig): string | undefined;
+export declare function getColorForStyleConfig(config: FormatStyleConfig): string | undefined;
+export declare function getStyleDBString(config: BaseFormatConfig): string | undefined;
+export declare function getConditionDBString(config: BaseFormatConfig): string;
+export declare function getLabelForNumberCondition(condition: NumberCondition): string;
+export declare function getLabelForStringCondition(condition: StringCondition): string;
+export declare function getLabelForDateCondition(condition: DateCondition): string;
+export declare function getLabelForBooleanCondition(condition: BooleanCondition): string;
+export declare function getLabelForCharCondition(condition: CharCondition): string;
+export declare function getDefaultConditionForType(columnType: string): Condition;
+export declare function getDefaultValueForType(columnType: string): string | undefined;
+export declare function getConditionConfig(config: BaseFormatConfig): ConditionConfig;
+export declare function getDefaultConditionConfigForType(type: string): ConditionConfig;
+export declare function getDefaultStyleConfig(): FormatStyleConfig;
+export declare function getShortLabelForNumberCondition(condition: NumberCondition): string;
+export declare function getTextForNumberCondition(columnName: string, condition: NumberCondition, value: unknown, start: unknown, end: unknown): string;
+export declare function getTextForStringCondition(columnName: string, condition: StringCondition, value: unknown): string;
+export declare function getTextForDateCondition(columnName: string, condition: DateCondition, value: unknown): string;
+export declare function getTextForBooleanCondition(columnName: string, condition: BooleanCondition): string;
+export declare function getTextForCharCondition(columnName: string, condition: CharCondition, value: unknown): string;
+export declare function getShortLabelForConditionType(columnType: string, condition: Condition): string;
+/**
+ * Get format columns array for the given columns and formatting rules
+ * @param columns Available columns
+ * @param rules Formatting rules to build the format columns from
+ * @returns Array of format columns
+ */
+export declare function getFormatColumns(columns: Column[], rules: FormattingRule[]): CustomColumn[];
+//# sourceMappingURL=ConditionalFormattingUtils.d.ts.map

package/dist/sidebar/conditional-formatting/ConditionalFormattingUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalFormattingUtils.d.ts","sourceRoot":"","sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAU7D,oBAAY,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,SAAS,GACjB,eAAe,GACf,eAAe,GACf,aAAa,GACb,gBAAgB,GAChB,aAAa,CAAC;AAElB,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,oBAAY,cAAc,GAAG,CAC3B,UAAU,EAAE,gBAAgB,EAC5B,OAAO,EAAE,OAAO,KACb,IAAI,CAAC;AAEV,oBAAY,aAAa;IACvB,WAAW,gBAAgB;IAC3B,IAAI,SAAS;CACd;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAED,oBAAY,eAAe;IACzB,QAAQ,aAAa;IACrB,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,qBAAqB,0BAA0B;IAC/C,SAAS,cAAc;IACvB,kBAAkB,uBAAuB;IACzC,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,oBAAY,eAAe;IACzB,UAAU,eAAe;IACzB,cAAc,mBAAmB;IACjC,QAAQ,aAAa;IACrB,gBAAgB,qBAAqB;IACrC,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,oBAAY,aAAa;IACvB,UAAU,eAAe;IACzB,cAAc,mBAAmB;IACjC,SAAS,cAAc;IACvB,kBAAkB,uBAAuB;IACzC,QAAQ,aAAa;IACrB,iBAAiB,sBAAsB;IACvC,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,oBAAY,aAAa;IACvB,QAAQ,aAAa;IACrB,YAAY,iBAAiB;IAC7B,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,oBAAY,eAAe;IACzB,aAAa,kBAAkB;IAC/B,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,eAAe,CAAC;IACtB,YAAY,CAAC,EAAE;QACb,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAmBpE;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,GACxB,MAAM,GAAG,SAAS,CAsBpB;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,GACxB,MAAM,GAAG,SAAS,CAsBpB;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAO7E;AAgDD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,gBAAgB,GAAG,MAAM,CAoBrE;AAED,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,eAAe,GAAG,MAAM,CAqB7E;AAED,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,eAAe,GAAG,MAAM,CAmB7E;AAED,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM,CAmBzE;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,gBAAgB,GAC1B,MAAM,CAWR;AAED,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM,CAWzE;AAED,wBAAgB,0BAA0B,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAkBxE;AAED,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ7E;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,gBAAgB,GAAG,eAAe,CAG5E;AAED,wBAAgB,gCAAgC,CAC9C,IAAI,EAAE,MAAM,GACX,eAAe,CAOjB;AAED,wBAAgB,qBAAqB,IAAI,iBAAiB,CAIzD;AAsED,wBAAgB,+BAA+B,CAC7C,SAAS,EAAE,eAAe,GACzB,MAAM,CAqBR;AAED,wBAAgB,yBAAyB,CACvC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,OAAO,EACd,KAAK,EAAE,OAAO,EACd,GAAG,EAAE,OAAO,GACX,MAAM,CAqBR;AAED,wBAAgB,yBAAyB,CACvC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,OAAO,GACb,MAAM,CAmBR;AAED,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,OAAO,GACb,MAAM,CAmBR;AAED,wBAAgB,0BAA0B,CACxC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,gBAAgB,GAC1B,MAAM,CAWR;AAED,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,OAAO,GACb,MAAM,CAWR;AAED,wBAAgB,6BAA6B,CAC3C,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,SAAS,GACnB,MAAM,CAkBR;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,MAAM,EAAE,EACjB,KAAK,EAAE,cAAc,EAAE,GACtB,YAAY,EAAE,CAuChB"}