@cloudtower/eagle 0.28.0-dry → 0.28.0

package/dist/cjs/core/TableForm/Columns/FormItem.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var antd = require('antd');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const FormItemStyle = "E_f16blduf";
+const FormItem = props => {
+  const {
+    validateStatus,
+    message,
+    children
+  } = props;
+  return /* @__PURE__ */React__default.default.createElement(antd.Form.Item, {
+    className: FormItemStyle,
+    validateStatus,
+    help: validateStatus && message ? message : void 0
+  }, children);
+};
+
+exports.FormItem = FormItem;

package/dist/cjs/core/TableForm/Columns/InputColumn.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var icons = require('@ant-design/icons');
+var React = require('react');
+var index = require('../../Input/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const InputPassword = (props) => {
+  const [showPassword, setShowPassword] = React.useState(false);
+  React.useEffect(() => {
+    if (props.visible !== void 0) {
+      setShowPassword(props.visible);
+    }
+  }, [props.visible]);
+  const toggleShowPassword = () => {
+    var _a;
+    setShowPassword(!showPassword);
+    (_a = props == null ? void 0 : props.onVisibleChange) == null ? void 0 : _a.call(props, !showPassword);
+  };
+  const inputType = showPassword ? "text" : "password";
+  return /* @__PURE__ */ React__default.default.createElement(
+    index,
+    __spreadProps(__spreadValues({}, props), {
+      type: inputType,
+      suffix: showPassword ? /* @__PURE__ */ React__default.default.createElement(
+        icons.EyeOutlined,
+        {
+          className: "ant-input-password-icon",
+          onClick: toggleShowPassword
+        }
+      ) : /* @__PURE__ */ React__default.default.createElement(
+        icons.EyeInvisibleOutlined,
+        {
+          className: "ant-input-password-icon",
+          onClick: toggleShowPassword
+        }
+      )
+    })
+  );
+};
+const CustomInput = (props) => {
+  if (props.type === "password") {
+    return /* @__PURE__ */ React__default.default.createElement(InputPassword, __spreadValues({}, props));
+  }
+  return /* @__PURE__ */ React__default.default.createElement(index, __spreadValues({}, props));
+};
+const InputColumnHeaderCell = ({ disabled, column, onChange, onBlur, onVisibleChange }) => {
+  const _onChange = (e) => {
+    const newValue = e.target.value;
+    onChange(newValue);
+  };
+  return /* @__PURE__ */ React__default.default.createElement(
+    CustomInput,
+    {
+      type: column.type,
+      placeholder: column.placeholder,
+      disabled,
+      size: "small",
+      onChange: _onChange,
+      onBlur,
+      onVisibleChange
+    }
+  );
+};
+const InputColumnBodyCell = ({
+  data,
+  latestData,
+  column,
+  index,
+  disabled,
+  onChange,
+  onBlur,
+  visible,
+  error
+}) => {
+  const placeHolderValue = column.type === "password" ? "" : latestData[index][column.key];
+  const _onChange = (e) => {
+    const newValue = e.target.value;
+    onChange(newValue);
+  };
+  return /* @__PURE__ */ React__default.default.createElement(
+    CustomInput,
+    {
+      size: "small",
+      value: data[index][column.key],
+      type: column.type,
+      defaultValue: column.defaultValue,
+      disabled,
+      placeholder: placeHolderValue || column.placeholder,
+      onChange: _onChange,
+      onBlur,
+      visible,
+      error
+    }
+  );
+};
+
+exports.InputColumnBodyCell = InputColumnBodyCell;
+exports.InputColumnHeaderCell = InputColumnHeaderCell;

package/dist/cjs/core/TableForm/Columns/TextColumn.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var core = require('@linaria/core');
+var React = require('react');
+var index = require('../../Typo/index.js');
+var style = require('../style.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const TextColumnHeaderCell = ({
+  column
+}) => {
+  return /* @__PURE__ */ React__default.default.createElement(
+    "p",
+    {
+      className: core.cx(index.Typo.Label.l4_regular, style.SubtitleStyle, column.subTitleColor)
+    },
+    column.subTitle
+  );
+};
+const TextColumnBodyCell = ({ data, column, index: index$1 }) => {
+  const text = column.displayText || data[index$1][column.key];
+  const CellDescription = React.useMemo(() => {
+    var _a, _b;
+    const Result = (_b = (_a = column.renderDescription) == null ? void 0 : _a.call(column, {
+      rowIndex: index$1,
+      rowData: data[index$1]
+    })) != null ? _b : null;
+    return typeof Result === "string" ? /* @__PURE__ */ React__default.default.createElement("p", { className: core.cx(index.Typo.Label.l4_regular, "cell-description") }, Result) : Result;
+  }, [index$1, data, column]);
+  const Text = React.useMemo(
+    () => /* @__PURE__ */ React__default.default.createElement("p", { className: core.cx(index.Typo.Label.l3_regular, style.BodyCellTextStyle) }, text),
+    [text]
+  );
+  return /* @__PURE__ */ React__default.default.createElement(
+    style.BodyCellTextWrapper,
+    {
+      className: !!CellDescription ? "with-description" : void 0
+    },
+    Text,
+    CellDescription
+  );
+};
+
+exports.TextColumnBodyCell = TextColumnBodyCell;
+exports.TextColumnHeaderCell = TextColumnHeaderCell;

package/dist/cjs/core/TableForm/Columns/index.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var AffixColumn = require('./AffixColumn.js');
+var CheckboxColumn = require('./CheckboxColumn.js');
+var InputColumn = require('./InputColumn.js');
+var TextColumn = require('./TextColumn.js');
+
+const ColumnHeaderImpls = {
+  text: TextColumn.TextColumnHeaderCell,
+  input: InputColumn.InputColumnHeaderCell,
+  password: InputColumn.InputColumnHeaderCell,
+  affix: AffixColumn.AffixColumnHeaderCell,
+  checkbox: CheckboxColumn.CheckboxColumnHeaderCell
+};
+const ColumnBodyImpls = {
+  text: TextColumn.TextColumnBodyCell,
+  input: InputColumn.InputColumnBodyCell,
+  password: InputColumn.InputColumnBodyCell,
+  affix: InputColumn.InputColumnBodyCell,
+  checkbox: CheckboxColumn.CheckboxColumnBodyCell
+};
+
+exports.ColumnBodyImpls = ColumnBodyImpls;
+exports.ColumnHeaderImpls = ColumnHeaderImpls;

package/dist/cjs/core/TableForm/TableFormBodyCell.js

@@ -0,0 +1,169 @@
+'use strict';
+
+var core = require('@linaria/core');
+var index$1 = require('./Columns/index.js');
+var FormItem = require('./Columns/FormItem.js');
+var types = require('./types.js');
+var index = require('../Typo/index.js');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const TableFormBodyCell = (props) => {
+  const {
+    column,
+    index: rowIndex,
+    data,
+    latestData,
+    validateTriggerType,
+    isRowError,
+    getRowValidateResult,
+    disabled,
+    onChange,
+    onBlur,
+    validateAll,
+    error
+  } = props;
+  const [validateResult, setValidateResult] = React.useState();
+  const [isTouched, setIsTouched] = React.useState(false);
+  const width = typeof column.width === "number" ? column.width + "px" : column.width;
+  const isCellErrorStyle = Boolean((validateResult == null ? void 0 : validateResult.isError) || isRowError);
+  React.useEffect(() => {
+    if (isTouched)
+      setValidateResult(
+        error ? {
+          msg: error,
+          isError: true
+        } : void 0
+      );
+  }, [error, isTouched]);
+  const triggerValidate = React.useCallback(
+    (currentValue) => {
+      var _a;
+      const value = currentValue != null ? currentValue : data[rowIndex][column.key];
+      const rowData = __spreadProps(__spreadValues({}, data[rowIndex]), { [column.key]: value });
+      const rowValidateRes = getRowValidateResult(rowData);
+      if (rowValidateRes) {
+        return;
+      }
+      if (column.validator) {
+        const result = (_a = column.validator) == null ? void 0 : _a.call(column, {
+          value,
+          rowIndex,
+          rowData: data[rowIndex]
+        });
+        const isError = result ? typeof result === "string" : false;
+        setValidateResult({ msg: result || "", isError });
+        return;
+      }
+    },
+    [data, rowIndex, column, getRowValidateResult]
+  );
+  React.useEffect(() => {
+    if (validateAll) {
+      setIsTouched(true);
+      triggerValidate();
+    }
+  }, [validateAll, triggerValidate, setIsTouched]);
+  const _onChange = (value, data2) => {
+    const newData = data2.map(
+      (row, i) => i === rowIndex ? __spreadProps(__spreadValues({}, row), { [column.key]: value }) : row
+    );
+    onChange == null ? void 0 : onChange(newData, rowIndex, column.key);
+    if (validateTriggerType === types.ValidateTriggerType.Normal && isTouched || validateTriggerType === types.ValidateTriggerType.Aggressive) {
+      triggerValidate(value);
+    }
+  };
+  const _onBlur = React.useCallback(() => {
+    setIsTouched(true);
+    triggerValidate();
+    onBlur == null ? void 0 : onBlur(data, rowIndex, column.key);
+  }, [rowIndex, column, onBlur, data, triggerValidate, setIsTouched]);
+  const renderDefaultComponent = () => {
+    if (!column.type)
+      return null;
+    const CellComponent = index$1.ColumnBodyImpls[column.type];
+    return /* @__PURE__ */ React__default.default.createElement(
+      CellComponent,
+      {
+        disabled,
+        data,
+        index: rowIndex,
+        latestData,
+        column,
+        visible: props.visible,
+        error: isCellErrorStyle,
+        onChange: (val) => {
+          _onChange(val, data);
+        },
+        onBlur: _onBlur
+      }
+    );
+  };
+  const Cell = column.render ? column.render({
+    isHeader: false,
+    disabled,
+    placeholder: props.placeholderValue || latestData[rowIndex][column.key],
+    value: data[rowIndex][column.key],
+    onChange: (val) => {
+      _onChange(val, data);
+    },
+    onBlur: _onBlur,
+    rowIndex,
+    error: isCellErrorStyle
+  }) : renderDefaultComponent();
+  const CellDescription = React.useMemo(() => {
+    var _a;
+    if (column.type === "text")
+      return null;
+    const Result = ((_a = column.renderDescription) == null ? void 0 : _a.call(column, {
+      rowIndex,
+      rowData: data[rowIndex],
+      latestData
+    })) || null;
+    return typeof Result === "string" ? /* @__PURE__ */ React__default.default.createElement("p", { className: core.cx(index.Typo.Label.l4_regular, "cell-description") }, Result) : Result;
+  }, [rowIndex, data, latestData, column]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    "div",
+    {
+      className: core.cx("eagle-table-form-cell", `align-${column.align || "left"}`),
+      style: {
+        maxWidth: column.width ? width : "",
+        minWidth: column.width ? width : "",
+        visibility: column.hidden ? "hidden" : "visible"
+      }
+    },
+    /* @__PURE__ */ React__default.default.createElement(
+      FormItem.FormItem,
+      {
+        validateStatus: isCellErrorStyle ? "error" : "",
+        message: isRowError ? "" : validateResult == null ? void 0 : validateResult.msg
+      },
+      Cell
+    ),
+    CellDescription
+  );
+};
+
+exports.TableFormBodyCell = TableFormBodyCell;

package/dist/cjs/core/TableForm/TableFormBodyRows.js

@@ -0,0 +1,219 @@
+'use strict';
+
+var iconsReact = require('@cloudtower/icons-react');
+var core = require('@linaria/core');
+var index = require('../Icon/index.js');
+var style = require('./style.js');
+var TableFormBodyCell = require('./TableFormBodyCell.js');
+var types = require('./types.js');
+var utils = require('./utils.js');
+var index$2 = require('../Tooltip/index.js');
+var index$1 = require('../Typo/index.js');
+var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
+var antd = require('antd');
+var React = require('react');
+var reactBeautifulDnd = require('react-beautiful-dnd');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const TableFormRowDeleteAction = (props) => {
+  var _a, _b, _c, _d;
+  const { deleteConfig, row, updateData, rowIndex, data } = props;
+  const { t } = useParrotTranslation();
+  if (typeof (row == null ? void 0 : row.deletable) === "function" && !row.deletable(rowIndex, data)) {
+    return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null);
+  }
+  const disableActionsFromRowConfig = typeof (row == null ? void 0 : row.disableActions) === "object" ? row.disableActions : (_b = (_a = row == null ? void 0 : row.disableActions) == null ? void 0 : _a.call(row, rowIndex, data)) != null ? _b : [];
+  const isRowDeleteDisabled = (_d = disableActionsFromRowConfig.includes("delete") || ((_c = deleteConfig == null ? void 0 : deleteConfig.specifyRowDeleteDisabled) == null ? void 0 : _c.call(deleteConfig, rowIndex, data))) != null ? _d : false;
+  const DeleteIcon = /* @__PURE__ */ React__default.default.createElement(
+    index,
+    {
+      "data-testid": "eagle-table-form-row-action",
+      className: core.cx("delete-row-icon", isRowDeleteDisabled && "disabled"),
+      src: iconsReact.XmarkRemove16SecondaryIcon,
+      hoverSrc: isRowDeleteDisabled ? void 0 : iconsReact.XmarkRemove16RegularRedIcon,
+      onClick: () => {
+        if (isRowDeleteDisabled)
+          return;
+        const newData = [...data];
+        newData.splice(rowIndex, 1);
+        updateData(newData);
+      }
+    }
+  );
+  const DeleteAction = isRowDeleteDisabled ? DeleteIcon : /* @__PURE__ */ React__default.default.createElement(index$2, { title: t("components.remove") }, DeleteIcon);
+  return DeleteAction;
+};
+const TableFormRow = (props) => {
+  var _a;
+  const {
+    data,
+    columns,
+    latestData,
+    disabled,
+    passwordVisible,
+    deleteConfig,
+    draggable,
+    rowIndex,
+    provided,
+    snapshot,
+    validateTriggerType = types.ValidateTriggerType.Normal,
+    row,
+    errors = [],
+    updateData,
+    onBodyBlur,
+    renderRowDescription,
+    validateAll
+  } = props;
+  const rowData = data[rowIndex];
+  const errorFromProps = errors[rowIndex];
+  const rowLevelError = typeof errorFromProps === "string" ? errorFromProps : void 0;
+  const [rowError, setRowError] = React.useState(rowLevelError);
+  const rowValidator = (row == null ? void 0 : row.validator) || props.rowValidator;
+  const cellsLevelError = errorFromProps && typeof errorFromProps === "object" ? errorFromProps : null;
+  React.useEffect(() => {
+    setRowError(rowLevelError);
+  }, [rowLevelError]);
+  const rowDeletable = typeof (row == null ? void 0 : row.deletable) === "boolean" ? row.deletable : (_a = typeof (row == null ? void 0 : row.deletable) === "function" || (deleteConfig == null ? void 0 : deleteConfig.deletable)) != null ? _a : false;
+  const getRowValidateResult = React.useCallback(
+    (rowData2) => {
+      if (!rowValidator)
+        return rowLevelError;
+      const result = rowValidator(rowIndex, rowData2);
+      setRowError(result);
+      return result;
+    },
+    [rowValidator, rowIndex, rowLevelError]
+  );
+  const Cells = columns.map((col) => {
+    const cellError = cellsLevelError == null ? void 0 : cellsLevelError[col.key];
+    return /* @__PURE__ */ React__default.default.createElement(
+      TableFormBodyCell.TableFormBodyCell,
+      {
+        key: col.key,
+        column: col,
+        data,
+        latestData,
+        disabled,
+        index: rowIndex,
+        onChange: updateData,
+        onBlur: onBodyBlur,
+        visible: passwordVisible,
+        validateTriggerType,
+        isRowError: !!rowError,
+        getRowValidateResult,
+        validateAll,
+        error: cellError
+      }
+    );
+  });
+  const DraggableHandle = React.useMemo(
+    () => draggable && provided ? /* @__PURE__ */ React__default.default.createElement(style.DraggableHandleWrapper, __spreadValues({}, provided.dragHandleProps), /* @__PURE__ */ React__default.default.createElement(
+      index,
+      {
+        src: iconsReact.HandlePoint816SecondaryIcon,
+        hoverSrc: iconsReact.HandlePoint816BlueIcon
+      }
+    )) : null,
+    [draggable, provided]
+  );
+  const RowDescription = React.useMemo(() => {
+    const rowDescFuncParams = {
+      rowIndex,
+      rowData,
+      latestData
+    };
+    const DescriptionResult = typeof (row == null ? void 0 : row.descriptions) == "object" ? row.descriptions[rowIndex] : typeof (row == null ? void 0 : row.customizedDescription) === "function" ? row.customizedDescription(rowDescFuncParams) : (renderRowDescription == null ? void 0 : renderRowDescription(rowDescFuncParams)) || null;
+    return typeof DescriptionResult === "string" ? /* @__PURE__ */ React__default.default.createElement("p", { className: core.cx(index$1.Typo.Label.l4_regular, "row-description") }, DescriptionResult) : DescriptionResult;
+  }, [rowIndex, rowData, latestData, renderRowDescription, row]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    antd.List.Item,
+    {
+      key: rowIndex,
+      "data-testid": "eagle-table-form-row-for-test",
+      className: core.cx(
+        "eagle-table-form-row",
+        (snapshot == null ? void 0 : snapshot.isDragging) && "isDragging"
+      ),
+      actions: rowDeletable ? [
+        /* @__PURE__ */ React__default.default.createElement(
+          TableFormRowDeleteAction,
+          {
+            data,
+            rowIndex,
+            deleteConfig,
+            row,
+            updateData
+          }
+        )
+      ] : void 0
+    },
+    DraggableHandle,
+    Cells,
+    rowError ? /* @__PURE__ */ React__default.default.createElement("p", { className: core.cx(index$1.Typo.Label.l4_regular, "row-error-message") }, rowError) : null,
+    RowDescription
+  );
+};
+const TableFormBodyRows = React.memo((props) => {
+  const { data, draggable, updateData } = props;
+  const onDragEnd = React.useCallback(
+    (result) => {
+      var _a;
+      const fromIndex = result.source.index;
+      const toIndex = (_a = result.destination) == null ? void 0 : _a.index;
+      if (typeof toIndex !== "number" || toIndex === fromIndex)
+        return;
+      const newData = utils.moveItemInArray(data, fromIndex, toIndex);
+      updateData(newData);
+    },
+    [data, updateData]
+  );
+  return draggable ? /* @__PURE__ */ React__default.default.createElement(reactBeautifulDnd.DragDropContext, { onDragEnd }, /* @__PURE__ */ React__default.default.createElement(reactBeautifulDnd.Droppable, { droppableId: "droppable" }, (provided) => /* @__PURE__ */ React__default.default.createElement(
+    "div",
+    __spreadValues({
+      className: "draggable-container",
+      ref: provided.innerRef
+    }, provided.droppableProps),
+    data.map((_d, i) => /* @__PURE__ */ React__default.default.createElement(
+      reactBeautifulDnd.Draggable,
+      {
+        draggableId: `draggable-id-${i}`,
+        key: `draggable-id-${i}`,
+        index: i
+      },
+      (provided2, snapshot) => /* @__PURE__ */ React__default.default.createElement("div", __spreadValues({ ref: provided2.innerRef }, provided2.draggableProps), /* @__PURE__ */ React__default.default.createElement(
+        TableFormRow,
+        __spreadProps(__spreadValues({}, props), {
+          rowIndex: i,
+          provided: provided2,
+          snapshot
+        })
+      ))
+    )),
+    provided.placeholder
+  ))) : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, data.map((_d, i) => /* @__PURE__ */ React__default.default.createElement(TableFormRow, __spreadProps(__spreadValues({}, props), { rowIndex: i, key: `table-row-${i}` }))));
+});
+var TableFormBodyRows$1 = TableFormBodyRows;
+
+module.exports = TableFormBodyRows$1;