@truedat/df 7.5.9 → 7.5.10

package/src/components/widgets/CopyField/CopyField.js

@@ -1,270 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { Button, Icon, Modal } from "semantic-ui-react";
-import {
-  SortableContainer,
-  SortableElement,
-  arrayMove,
-} from "react-sortable-hoc";
-import { useIntl } from "react-intl";
-import {
-  definitionTableStyle,
-  addColumnStyle,
-  copyFieldsStyle,
-  mainContainerStyle,
-  lastSortableItemStyle,
-  buttonDisplayFieldsStyle,
-} from "./CustomStyles";
-import { CopyFieldColumn } from "./CopyFieldColumn";
-
-export const CopyField = ({
-  fields: { value: tableContent = [] },
-  onChange,
-}) => {
-  // eslint-disable-next-line fp/no-let
-  let scrollLeft = 0;
-  const errorModalMessage = React.createRef();
-  const errorMessage = React.createRef();
-  const { formatMessage } = useIntl();
-
-  const [open, setOpen] = useState(false);
-  const tableDefs = [
-    { definition: "Type", fieldType: "type" },
-    { definition: "Size", fieldType: "size" },
-    { definition: "Format", fieldType: "format" },
-    { definition: "Scale", fieldType: "scale" },
-    { definition: "Precision", fieldType: "precision" },
-  ].filter((tableDef) =>
-    tableContent.some((content) => content[tableDef.fieldType])
-  );
-
-  const onChangeTableContent = (tableContent) => {
-    const value = tableContent.map(
-      ({ name, type, size, scale, precision, format }) => {
-        const tableColumn = { name, type };
-        if (scale && precision) {
-          Object.assign(tableColumn, { scale, precision });
-        }
-        if (size) {
-          Object.assign(tableColumn, { size });
-        }
-        if (format) {
-          Object.assign(tableColumn, { format });
-        }
-        return tableColumn;
-      }
-    );
-    onFieldInvalid("");
-    onChange(null, { name: "fields", value });
-  };
-
-  const addColumn = () => {
-    onChangeTableContent([
-      { name: getColumnName(), type: "string", size: 40 },
-      ...tableContent,
-    ]);
-  };
-
-  const getColumnName = () => {
-    const getIndex = (index = tableContent.length) => {
-      if (!tableContent.find((column) => column.name === `New${index}`)) {
-        return index;
-      }
-      return getIndex(index + 1);
-    };
-    return `New${getIndex()}`;
-  };
-
-  const onChangeColumn = (colIndex, fieldType, cellValue) => {
-    if (
-      fieldType === "name" &&
-      !!tableContent.find(
-        (column, idx) => idx !== colIndex && column[fieldType] === cellValue
-      )
-    ) {
-      onFieldInvalid("widget.copy.error.duplicated.field");
-      return;
-    }
-    Object.assign(tableContent[colIndex], { [fieldType]: cellValue });
-    onChangeTableContent(tableContent);
-    setTimeout(
-      () =>
-        Object.assign(
-          document.getElementsByClassName("copyFields" + (open ? "1" : "0"))[0],
-          {
-            scrollLeft,
-          }
-        ),
-      0
-    );
-  };
-
-  const deleteColumn = (index) => {
-    tableContent.splice(index, 1);
-    onChangeTableContent(tableContent);
-    setTimeout(
-      () =>
-        Object.assign(
-          document.getElementsByClassName("copyFields" + (open ? "1" : "0"))[0],
-          {
-            scrollLeft: scrollLeft - 150,
-          }
-        ),
-      0
-    );
-  };
-
-  const SortableItem = SortableElement(({ value }) => (
-    <CopyFieldColumn
-      headerName={value["name"]}
-      row={value}
-      colIndex={value.index}
-      isModalOpened={open}
-      tableDefs={tableDefs}
-      onFieldInvalid={onFieldInvalid.bind(this)}
-      onDeleteColumn={deleteColumn.bind(this)}
-      onChangeColumn={onChangeColumn.bind(this)}
-    />
-  ));
-
-  const SortableList = SortableContainer(({ items, containerIdx }) => {
-    return (
-      <div
-        className={"copyFields copyFields" + containerIdx}
-        onScroll={(e) => {
-          // eslint-disable-next-line fp/no-mutation
-          scrollLeft = e.target.scrollLeft;
-        }}
-        style={{
-          ...copyFieldsStyle,
-          display: items.length ? "inline-flex" : "none",
-        }}
-      >
-        {items.map((value, index) => (
-          <SortableItem
-            key={`item-${index}`}
-            index={index}
-            value={{ ...value, index }}
-          />
-        ))}
-        <div style={{ ...lastSortableItemStyle }}></div>
-      </div>
-    );
-  });
-
-  const onSortEnd = ({ oldIndex, newIndex }) => {
-    const newTableContent = arrayMove(tableContent, oldIndex, newIndex);
-    onChangeTableContent(newTableContent);
-    Object.assign(
-      document.getElementsByClassName("copyFields" + (open ? "1" : "0"))[0],
-      {
-        scrollLeft,
-      }
-    );
-  };
-
-  const onFieldInvalid = (textMessage) => {
-    if (open) {
-      Object.assign(
-        errorModalMessage.current || {},
-        textMessage
-          ? { textContent: formatMessage({ id: textMessage }) }
-          : { textContent: "" }
-      );
-    } else {
-      Object.assign(
-        errorMessage.current || {},
-        textMessage
-          ? { textContent: formatMessage({ id: textMessage }) }
-          : { textContent: "" }
-      );
-    }
-  };
-
-  const getModalContent = (containerIdx) => {
-    return (
-      <div style={{ ...mainContainerStyle }}>
-        <div>
-          <div>
-            <Button
-              className="add-column"
-              icon
-              size="small"
-              style={{ ...addColumnStyle }}
-              onClick={addColumn.bind(this)}
-            >
-              <Icon name="plus" />
-            </Button>
-          </div>
-          {tableDefs.map(({ definition }, key) => (
-            <div key={key} style={{ ...definitionTableStyle }}>
-              {definition}
-            </div>
-          ))}
-        </div>
-
-        <SortableList
-          containerIdx={containerIdx}
-          distance={5}
-          axis="x"
-          lockAxis="x"
-          items={tableContent}
-          onSortEnd={onSortEnd.bind(this)}
-        />
-      </div>
-    );
-  };
-
-  return (
-    <>
-      <Modal
-        onClose={() => setOpen(false)}
-        onOpen={() => setOpen(true)}
-        open={open}
-        size="fullscreen"
-        trigger={
-          <div style={{ ...buttonDisplayFieldsStyle }}>
-            <Button
-              icon="expand"
-              content={formatMessage({ id: "widget.copy.button.open.fields" })}
-              labelPosition="left"
-              onClick={() => {
-                if (errorMessage.current) {
-                  errorMessage.current.textContent = "";
-                }
-              }}
-            />
-          </div>
-        }
-      >
-        <Modal.Header>
-          {formatMessage({ id: "widget.copy.modaltitle" })}
-        </Modal.Header>
-        <Modal.Content>
-          {
-            <>
-              {getModalContent("1")}
-              <div style={{ color: "red" }} ref={errorModalMessage} />
-            </>
-          }
-        </Modal.Content>
-        <Modal.Actions>
-          <Button
-            content={formatMessage({ id: "widget.copy.button.back" })}
-            secondary
-            onClick={() => setOpen(false)}
-          />
-        </Modal.Actions>
-      </Modal>
-      {getModalContent("0")}
-      <div style={{ color: "red" }} ref={errorMessage} />
-    </>
-  );
-};
-
-CopyField.propTypes = {
-  fields: PropTypes.object,
-  onChange: PropTypes.func,
-};
-
-export default CopyField;

package/src/components/widgets/CopyField/CopyFieldCell.js

@@ -1,138 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { Input, Popup, Button, Icon } from "semantic-ui-react";
-import CopyFieldSelectableCell from "./CopyFieldSelectableCell";
-import {
-  cellStyle,
-  headerCellStyle,
-  disabledCellStyle,
-  deleteContainerStyle,
-  deleteButtonStyle,
-  cellContentStyle,
-} from "./CustomStyles";
-
-export const CopyFieldCell = ({
-  field,
-  colIndex,
-  value,
-  isHeader,
-  isModalOpened,
-  ...cellCallbacks
-}) => {
-  const { onFieldInvalid, onChangeCell, onDeleteButtonPressed } = cellCallbacks;
-
-  const disabled = !value;
-  const [isEditable, setIsEditable] = useState(false);
-  const [cellValue, setCellValue] = useState("");
-  const currentCellStyle = isHeader
-    ? { ...cellStyle, ...headerCellStyle }
-    : disabled
-    ? { ...cellStyle, ...disabledCellStyle }
-    : cellStyle;
-
-  const wrongCellCharacters = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
-  const onBlurField = (index, field) => {
-    if (!cellValue) {
-      setIsEditable(false);
-      onFieldInvalid("");
-      return;
-    }
-    if (onFieldInvalid) {
-      if (!isFieldNameValid(index, field)) {
-        onFieldInvalid("widget.copy.error.wrongname");
-        return;
-      }
-    }
-    setIsEditable(false);
-    onFieldInvalid("");
-    onChangeCell(index, field, cellValue);
-  };
-
-  const onKeyDownOnField = (index, field, event) => {
-    if (event.keyCode === 13) {
-      event.preventDefault();
-      onBlurField(index, field);
-    }
-  };
-
-  const isFieldNameValid = (index, field) => {
-    return (
-      field !== "name" ||
-      (!wrongCellCharacters.test(cellValue) &&
-        cellValue.length < 250 &&
-        isNaN(cellValue.substring(0, 1)))
-    );
-  };
-
-  const onChangeField = (event) => {
-    setCellValue(
-      isNaN(event.target.value) ? event.target.value : +event.target.value
-    );
-  };
-
-  const getCellContent = (value) => {
-    const cellContent = (
-      <div
-        className="cellContent"
-        onClick={() => !disabled && setIsEditable(true)}
-        style={{ ...cellContentStyle }}
-      >
-        {value}
-      </div>
-    );
-    return value && value.length > 10 ? (
-      <Popup content={value} trigger={cellContent} />
-    ) : (
-      cellContent
-    );
-  };
-
-  return (
-    <div style={currentCellStyle}>
-      {isEditable ? (
-        <Input
-          size="mini"
-          tabIndex="0"
-          onKeyDown={onKeyDownOnField.bind(this, colIndex, field)}
-          autoFocus
-          onChange={(event) => {
-            event.persist();
-            onChangeField(event);
-          }}
-          onBlur={onBlurField.bind(this, colIndex, field)}
-          style={{ width: "65%" }}
-        />
-      ) : field === "type" ? (
-        <CopyFieldSelectableCell
-          index={colIndex}
-          defaultValue={value}
-          onChangeCell={onChangeCell}
-          isModalOpened={isModalOpened}
-        />
-      ) : (
-        getCellContent(value)
-      )}
-
-      {isHeader && (
-        <div
-          style={{ ...deleteContainerStyle }}
-          onMouseDown={() => onDeleteButtonPressed(colIndex)}
-        >
-          <Button style={{ ...deleteButtonStyle }} size="mini" icon>
-            <Icon name="trash alternate outline" color="red" />
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-CopyFieldCell.propTypes = {
-  field: PropTypes.string,
-  colIndex: PropTypes.number,
-  value: PropTypes.string,
-  isHeader: PropTypes.bool,
-  isModalOpened: PropTypes.bool,
-};
-
-export default CopyFieldCell;

package/src/components/widgets/CopyField/CopyFieldColumn.js

@@ -1,53 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { columnStyle } from "./CustomStyles";
-import CopyFieldCell from "./CopyFieldCell";
-
-export const CopyFieldColumn = ({
-  colIndex,
-  headerName,
-  row,
-  onFieldInvalid,
-  onDeleteColumn,
-  onChangeColumn,
-  tableDefs,
-  isModalOpened,
-}) => {
-  return (
-    <div style={{ ...columnStyle, zIndex: isModalOpened ? 1000 : 9 }}>
-      <CopyFieldCell
-        field="name"
-        value={headerName}
-        colIndex={colIndex}
-        onFieldInvalid={onFieldInvalid.bind(this)}
-        onChangeCell={onChangeColumn.bind(this)}
-        onDeleteButtonPressed={onDeleteColumn.bind(this)}
-        isHeader
-      />
-      {tableDefs.map(({ fieldType }, index) => {
-        return (
-          <CopyFieldCell
-            key={index}
-            field={fieldType}
-            value={row[fieldType]}
-            colIndex={colIndex}
-            onFieldInvalid={onFieldInvalid.bind(this)}
-            onChangeCell={onChangeColumn.bind(this)}
-            isModalOpened={isModalOpened}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-CopyFieldColumn.propTypes = {
-  colIndex: PropTypes.number,
-  headerName: PropTypes.string,
-  row: PropTypes.object,
-  onFieldInvalid: PropTypes.func,
-  onDeleteColumn: PropTypes.func,
-  onChangeColumn: PropTypes.func,
-  tableDefs: PropTypes.array,
-  isModalOpened: PropTypes.bool,
-};

package/src/components/widgets/CopyField/CopyFieldSelectableCell.js

@@ -1,71 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Dropdown } from "semantic-ui-react";
-
-export const CopyFieldSelectableCell = ({
-  index,
-  defaultValue,
-  onChangeCell,
-  isModalOpened
-}) => {
-  const formatOptions = [
-    { text: "string", value: "string" },
-    { text: "integer", value: "integer" },
-    { text: "decimal", value: "decimal" },
-    { text: "boolean", value: "boolean" },
-    { text: "date", value: "date", format: "%d-%m-%Y" },
-    { text: "datetime", value: "datetime", format: "%d-%m-%Y %H:%M:%S" },
-    { text: "time", value: "time", format: "%H:%M:%S" }
-  ];
-
-  const onChangeOption = (event, { value }) => {
-    onChangeCell(index, "type", value);
-    if (value !== "date" || value !== "datetime" || value !== "time") {
-      onChangeCell(index, "format", null);
-    }
-    if (value !== "decimal") {
-      onChangeCell(index, "scale", null);
-      onChangeCell(index, "precision", null);
-    }
-    if (value === "decimal") {
-      onChangeCell(index, "scale", 2);
-      onChangeCell(index, "precision", 10);
-    }
-    if (value === "date" || value === "datetime" || value === "time") {
-      onChangeCell(
-        index,
-        "format",
-        formatOptions.find(format => format.value === value).format
-      );
-    }
-  };
-
-  return (
-    <Dropdown
-      scrolling
-      pointing="top"
-      onOpen={() => {
-        if (!isModalOpened) {
-          // eslint-disable-next-line fp/no-mutation
-          document.getElementsByClassName(
-            "pusher"
-          )[0].scrollTop = document.getElementsByClassName(
-            "pusher"
-          )[0].scrollHeight;
-        }
-      }}
-      options={formatOptions}
-      defaultValue={defaultValue}
-      onChange={onChangeOption.bind(this)}
-    />
-  );
-};
-
-CopyFieldSelectableCell.propTypes = {
-  index: PropTypes.number,
-  defaultValue: PropTypes.string,
-  onChangeCell: PropTypes.func,
-  isModalOpened: PropTypes.bool
-};
-
-export default CopyFieldSelectableCell;

package/src/components/widgets/CopyField/CustomStyles.js

@@ -1,91 +0,0 @@
-const CustomStyles = {
-  columnStyle: {
-    minWidth: "150px",
-    overflow: "hidden",
-    clear: "both",
-    zIndex: 9
-  },
-  definitionTableStyle: {
-    minHeight: "42px",
-    padding: "10px",
-    backgroundColor: "#E8E8E8",
-    color: "rgba(0, 0, 0, 0.6)",
-    userSelect: "none"
-  },
-  addColumnStyle: {
-    color: "white",
-    backgroundColor: "#002057",
-    margin: "4px 20px"
-  },
-  copyFieldsStyle: {
-    minHeight: "300px",
-    overflowX: "auto"
-  },
-  mainContainerStyle: {
-    display: "inline-flex",
-    width: "100%"
-  },
-  lastSortableItemStyle: {
-    minWidth: "1px",
-    height: "1px"
-  },
-  buttonDisplayFieldsStyle: {
-    marginBottom: "20px",
-    float: "right"
-  },
-  headerCellStyle: {
-    fontWeight: "bold",
-    backgroundColor: "#E8E8E8"
-  },
-  disabledCellStyle: {
-    backgroundColor: "#F7F7F7",
-    cursor: "not-allowed"
-  },
-  cellStyle: {
-    backgroundColor: "white",
-    borderColor: "rgb(232, 232, 232)",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    color: "rgba(0, 0, 0, 0.6)",
-    position: "relative",
-    height: "42px",
-    padding: "4px",
-    width: "100%",
-    cursor: "grab",
-    userSelect: "none"
-  },
-  cellContentStyle: {
-    cursor: "pointer",
-    float: "left",
-    padding: "5px",
-    width: "100px",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  deleteContainerStyle: {
-    float: "right",
-    paddingTop: "3px"
-  },
-  deleteButtonStyle: {
-    backgroundColor: "#9F3A38",
-    color: "white"
-  }
-};
-
-export const {
-  columnStyle,
-  definitionTableStyle,
-  addColumnStyle,
-  copyFieldsStyle,
-  mainContainerStyle,
-  lastSortableItemStyle,
-  buttonDisplayFieldsStyle,
-  headerCellStyle,
-  disabledCellStyle,
-  cellStyle,
-  cellContentStyle,
-  deleteContainerStyle,
-  deleteButtonStyle
-} = CustomStyles;
-export default CustomStyles;

package/src/components/widgets/CopyField/__tests__/CopyField.spec.js

@@ -1,82 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import { mountWithIntl } from "@truedat/test/intl-stub";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
-import { CopyField } from "../CopyField";
-import { CopyFieldColumn } from "../CopyFieldColumn";
-
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-describe("<CopyField />", () => {
-  const tableContent = [
-    { name: "New4", type: "string" },
-    { name: "New3", type: "string" },
-    { name: "New2", type: "string" },
-    { name: "New1", type: "string" },
-    { name: "New0", type: "string" }
-  ];
-  const fields = { value: tableContent };
-  const onChange = jest.fn();
-  const props = { fields, onChange };
-
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<CopyField {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("add new column", () => {
-    const wrapper = mountWithIntl(<CopyField {...props} />);
-    wrapper
-      .find(".add-column")
-      .at(1)
-      .simulate("click");
-    expect(_.get("value")(wrapper.prop("fields")).length).toBe(5);
-    expect(onChange.mock.calls.length).toBe(1);
-    expect(onChange).toBeCalledWith(null, {
-      name: "fields",
-      value: [
-        { name: `New${tableContent.length}`, type: "string", size: 40 },
-        ...tableContent
-      ]
-    });
-  });
-
-  it("delete column", () => {
-    const wrapper = mountWithIntl(<CopyField {...props} />);
-    wrapper
-      .find(CopyFieldColumn)
-      .at(1)
-      .props()
-      .onDeleteColumn();
-    expect(onChange.mock.calls.length).toBe(2);
-    expect(onChange).toBeCalledWith(null, {
-      name: "fields",
-      value: [
-        { name: "New3", type: "string" },
-        { name: "New2", type: "string" },
-        { name: "New1", type: "string" },
-        { name: "New0", type: "string" }
-      ]
-    });
-  });
-
-  it("change column", () => {
-    const wrapper = mountWithIntl(<CopyField {...props} />);
-    wrapper
-      .find(CopyFieldColumn)
-      .at(1)
-      .props()
-      .onChangeColumn(1, "name", "New9");
-    expect(onChange.mock.calls.length).toBe(3);
-    expect(onChange).toBeCalledWith(null, {
-      name: "fields",
-      value: [
-        { name: "New3", type: "string" },
-        { name: "New9", type: "string" },
-        { name: "New1", type: "string" },
-        { name: "New0", type: "string" }
-      ]
-    });
-  });
-});