sag_components 1.0.976 → 1.0.978

package/dist/stories/components/Table/Table.js

@@ -1,195 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Table = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Table = require("./Table.style");
-const Table = props => {
-  const {
-    tableKey,
-    data,
-    width,
-    height,
-    onCheckAllInput,
-    onSortClick,
-    onRowClick,
-    onRowInputClick,
-    onPaginationClick,
-    actionsColumn,
-    sizingTable,
-    showPagination,
-    rangePagination
-  } = props;
-  const [sortBy, setSortBy] = (0, _react.useState)(null);
-  const [sortOrder, setSortOrder] = (0, _react.useState)('asc');
-  const [resizing, setResizing] = (0, _react.useState)(false);
-  const [resizeColumn, setResizeColumn] = (0, _react.useState)(null);
-  const checkedRef = (0, _react.useRef)([]);
-  const [checkEvent, setCheckEvent] = (0, _react.useState)({
-    isSelectAll: false,
-    selected: [],
-    unselected: []
-  });
-  const [activePage, setActivePage] = (0, _react.useState)(1);
-  const [arrow, setArrow] = (0, _react.useState)(null);
-  const handleSort = (event, columnName) => {
-    if (!event.target.classList.contains('dragger')) {
-      setSortBy(columnName);
-      setSortOrder(prevSortOrder => prevSortOrder === 'asc' ? 'desc' : 'asc');
-      setArrow(prevArrow => prevArrow === '⭣' ? '⭡' : '⭣');
-      onSortClick({
-        sortType: sortOrder,
-        column: columnName,
-        data: sortedData
-      });
-    }
-  };
-
-  // the Server do the sorting so this function used for displaying Action data
-  const sortedData = [...data].sort((a, b) => {
-    if (sortOrder === 'asc') {
-      return a[sortBy] > b[sortBy] ? 1 : -1;
-    }
-    return a[sortBy] < b[sortBy] ? 1 : -1;
-  });
-  const handleSelectAllChange = event => {
-    setCheckEvent({
-      isSelectAll: event.target.checked,
-      selected: [],
-      unselected: []
-    });
-    checkedRef.current.map(item => {
-      item.checked = event.target.checked;
-    });
-  };
-  const m_pos = (0, _react.useRef)(null);
-  const handleMouseDown = (e, columnName) => {
-    m_pos.current = e.clientX;
-    setResizing(true);
-    setResizeColumn(columnName);
-  };
-  const handleMouseMove = e => {
-    if (resizing) {
-      const th = document.querySelector(`th[data-column="${resizeColumn}"]`);
-      const dx = e.clientX - m_pos.current;
-      m_pos.current = e.clientX;
-      th.style.width = `${parseInt(getComputedStyle(th, '').width) + dx}px`;
-    }
-  };
-  const handleMouseUp = () => {
-    setResizing(false);
-    setResizeColumn(null);
-  };
-  const onRowClickHandler = (event, row) => {
-    if (event.target.type !== 'checkbox') {
-      onRowClick(row);
-    }
-  };
-  const handleCheckboxChange = (event, row) => {
-    if (event.target.checked) {
-      const updatedUnSelected = checkEvent.unselected.filter(item => item.key !== row.key);
-      setCheckEvent({
-        ...checkEvent,
-        unselected: updatedUnSelected,
-        selected: [...checkEvent.selected, row]
-      });
-    } else {
-      const updatedSelected = checkEvent.selected.filter(item => item.key !== row.key);
-      setCheckEvent({
-        ...checkEvent,
-        unselected: [...checkEvent.unselected, row],
-        selected: updatedSelected
-      });
-    }
-  };
-  const onPaginationClickHandler = (event, page) => {
-    setActivePage(page);
-    onPaginationClick(event, page);
-  };
-  (0, _react.useEffect)(() => {
-    onCheckAllInput(checkEvent);
-  }, [checkEvent]);
-  (0, _react.useEffect)(() => {
-    document.addEventListener('mousemove', handleMouseMove, false);
-    document.addEventListener('mouseup', handleMouseUp, false);
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove, false);
-      document.removeEventListener('mouseup', handleMouseUp, false);
-    };
-  }, [resizing]);
-  const pages = Array.from({
-    length: rangePagination
-  }, (_, index) => index + 1);
-  return /*#__PURE__*/_react.default.createElement(_Table.TableWrapper, {
-    key: tableKey
-  }, /*#__PURE__*/_react.default.createElement(_Table.TableTag, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_Table.Thead, null, /*#__PURE__*/_react.default.createElement("tr", null, actionsColumn && /*#__PURE__*/_react.default.createElement("th", {
-    className: "actions-th"
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    type: "checkbox",
-    onChange: handleSelectAllChange
-  })), Object.keys(data[0]).map(column => /*#__PURE__*/_react.default.createElement("th", {
-    key: column,
-    "data-column": column,
-    onClick: event => handleSort(event, column)
-  }, /*#__PURE__*/_react.default.createElement("span", null, column), sortBy === column && /*#__PURE__*/_react.default.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: arrow
-    }
-  }), sizingTable && /*#__PURE__*/_react.default.createElement(_Table.Dragger, {
-    className: "dragger",
-    onMouseDown: e => handleMouseDown(e, column)
-  }))))), /*#__PURE__*/_react.default.createElement(_Table.Tbody, null, data.map(row => /*#__PURE__*/_react.default.createElement("tr", {
-    key: row.key,
-    onClick: event => onRowClickHandler(event, row)
-  }, actionsColumn && /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("input", {
-    ref: el => checkedRef.current[row.key] = el,
-    type: "checkbox",
-    onChange: event => handleCheckboxChange(event, row)
-  })), Object.keys(row).map(column => /*#__PURE__*/_react.default.createElement("td", {
-    key: column
-  }, row[column])))))), showPagination && /*#__PURE__*/_react.default.createElement(_Table.Pagination, null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
-    className: "double-arrow",
-    onClick: event => onPaginationClickHandler(event, 1)
-  }, "\xAB")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
-    className: "single-arrow",
-    onClick: event => onPaginationClickHandler(event, activePage - 1)
-  }, "\u2039")), pages.map(page => /*#__PURE__*/_react.default.createElement("li", {
-    key: page
-  }, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
-    className: page === activePage ? 'active' : '',
-    onClick: event => onPaginationClickHandler(event, page)
-  }, page))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
-    className: "single-arrow",
-    onClick: event => onPaginationClickHandler(event, activePage + 1)
-  }, "\u203A")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
-    className: "double-arrow",
-    onClick: event => onPaginationClickHandler(event, pages.length)
-  }, "\xBB"))));
-};
-exports.Table = Table;
-var _default = exports.default = Table;
-Table.defaultProps = {
-  tableKey: '1',
-  data: [{
-    key: '',
-    name: '',
-    age: 2
-  }],
-  width: '100%',
-  height: 'auto',
-  onCheckAllInput: () => {},
-  onSortClick: () => {},
-  onRowClick: () => {},
-  onRowInputClick: () => {},
-  onPaginationClick: () => {},
-  showPagination: true,
-  sizingTable: true,
-  actionsColumn: true,
-  rangePagination: 5
-};

package/dist/stories/components/Table/Table.stories.js

@@ -1,104 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MainTable = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Table = require("./Table");
-const theData = [{
-  key: '1',
-  name: 'oren',
-  age: 35
-}, {
-  key: '2',
-  name: 'dror',
-  age: 16
-}, {
-  key: '3',
-  name: 'andrey',
-  age: 22
-}, {
-  key: '4',
-  name: 'hai',
-  age: 46
-}];
-var _default = exports.default = {
-  title: 'Sag Campaign Tool/Table',
-  component: _Table.Table,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      name: 'Width',
-      control: {
-        type: 'text'
-      },
-      description: 'Table width'
-    },
-    height: {
-      name: 'Height',
-      control: {
-        type: 'text'
-      },
-      description: 'Table height'
-    },
-    onCheckAllInput: {
-      name: 'Check all input event',
-      action: 'onClick',
-      description: 'Click on check all'
-    },
-    onSortClick: {
-      name: 'Table head sorting event',
-      action: 'onClick',
-      description: 'Click on table head sorting'
-    },
-    onRowClick: {
-      name: 'Click on row event',
-      action: 'onClick',
-      description: 'Click on a certain row in table'
-    },
-    onRowInputClick: {
-      name: 'Checkbox row event',
-      action: 'onClick',
-      description: 'Click on a certain row checkbox '
-    },
-    actionsColumn: {
-      name: 'Show action column',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show/hide action column',
-      defaultValue: true
-    },
-    sizingTable: {
-      name: 'Sizing table columns',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Sizing table columns ability',
-      defaultValue: true
-    },
-    showPagination: {
-      name: 'Show Pagination',
-      control: {
-        type: 'boolean'
-      },
-      description: 'hide/show pagination',
-      defaultValue: true
-    },
-    rangePagination: {
-      name: 'Range Pagination',
-      control: {
-        type: 'number'
-      },
-      description: 'How many button representing pages will shown in the range'
-    }
-  }
-};
-const MainTable = exports.MainTable = {
-  args: {
-    data: theData,
-    rangePagination: 5
-  }
-};

package/dist/stories/components/Table/Table.style.js

@@ -1,86 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Thead = exports.Tbody = exports.TableWrapper = exports.TableTag = exports.PaginationButton = exports.Pagination = exports.Dragger = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const TableWrapper = exports.TableWrapper = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  background-color: white;
-`;
-const TableTag = exports.TableTag = _styledComponents.default.table`
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  margin-bottom: 15px;
-    th,
-    td {
-        position: relative;
-        font-weight: 400;
-        border: 1px solid #ddd;
-        padding: 8px;
-    }
-`;
-const Thead = exports.Thead = _styledComponents.default.thead`
-    color: white;
-    background-color: #000000;
-    tr {
-        > th {
-            position: relative;
-            &.actions-th,
-            &:last-of-type {
-                > div {
-                    display: none;
-                }
-            }
-            
-            &.actions-th {
-                width: 22px;
-            }
-        }
-    }
-`;
-const Tbody = exports.Tbody = _styledComponents.default.tbody`
-    tr {
-        &:nth-child(even) {
-            background-color: #f2f2f2;
-        }
-        &:hover {
-            background-color: #ddd;
-        }
-    }
-`;
-const Dragger = exports.Dragger = _styledComponents.default.div`
-    width: 5px;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: col-resize;
-`;
-const Pagination = exports.Pagination = _styledComponents.default.ul`
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    gap: 5px;
-`;
-const PaginationButton = exports.PaginationButton = _styledComponents.default.button`
-    display: inline-block;
-    padding: 8px 12px;
-    background-color: #ffffff;
-    border: 1px solid #ccc;
-    text-decoration: none;
-    color: #333;
-    border-radius: 4px;
-    cursor: pointer;
-    &:hover, &:focus {
-      background-color: #e0e0e0;
-    }
-    &.active {
-        background-color: #aaa;
-    }
-`;

package/dist/stories/components/TextField/TextField.js

@@ -1,209 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TextField = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
-var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
-var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
-var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
-var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
-var _styles = require("@mui/material/styles");
-var _TextField2 = require("./TextField.style");
-/**
- *  SAG TextField
- */
-const TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    width = '100%',
-    height = '49px',
-    label,
-    focusColor,
-    shape,
-    size,
-    placeHolder = 'Enter your email address',
-    passwordField = false,
-    defaultValue,
-    resetDefaultValue,
-    required,
-    inputRef,
-    allowedInput = 'all',
-    onChange,
-    multiline = false
-  } = _ref;
-  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
-  const [showPassword, setShowPassword] = _react.default.useState(false);
-  const handleClickShowPassword = () => setShowPassword(show => !show);
-  const onChangeHandler = event => {
-    onChange(event);
-    setCurrentInputValue({
-      event,
-      value: event.target.value
-    });
-  };
-  const theme = (0, _styles.createTheme)({
-    components: {
-      MuiFormLabel: {
-        styleOverrides: {
-          asterisk: {
-            color: '#db3131'
-          }
-        }
-      }
-    }
-  });
-  const handleMouseDownPassword = event => {
-    event.preventDefault();
-  };
-
-  // defines shape: squire or round
-  const getTextFieldStyle = () => {
-    if (shape === 'round') {
-      return {
-        '& .MuiOutlinedInput-root': {
-          width: {
-            width
-          },
-          height: {
-            height
-          },
-          paddingTop: multiline ? '12px' : '0',
-          marginTop: 0,
-          borderColor: 'green',
-          borderRadius: '12px',
-          legend: {
-            marginLeft: '6px'
-          },
-          alignItems: multiline ? 'flex-start' : 'center',
-          '&.Mui-focused fieldset': {
-            borderColor: focusColor
-          }
-        },
-        '& label.Mui-focused': {
-          color: focusColor
-        },
-        '& .MuiAutocomplete-inputRoot': {
-          paddingLeft: '10px !important',
-          borderRadius: '12px'
-        },
-        '& .MuiInputLabel-outlined': {
-          paddingLeft: '10px',
-          // color: focusColor,
-          paddingTop: '4px'
-        },
-        '& .MuiInputLabel-shrink': {
-          marginLeft: '1px',
-          paddingLeft: '4px',
-          paddingRight: 0,
-          background: 'white',
-          paddingTop: 0
-        },
-        '& .MuiInputLabel-root': {
-          fontFamily: 'Poppins'
-        },
-        '& .MuiInputBase-inputSizeSmall': {
-          fontFamily: 'Poppins'
-        }
-      };
-    }
-    // square
-    return null;
-  };
-  const isInputAllowed = inputChar => {
-    const NUMERIC_REGEX = /^[0-9-]+$/;
-    const ALPHA_REGEX = /^[a-zA-Z]+$/;
-    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
-    switch (allowedInput) {
-      case 'all':
-        return true;
-      case 'alpha':
-        if (ALPHA_REGEX.test(inputChar)) return true;
-        return false;
-      case 'numeric':
-        if (NUMERIC_REGEX.test(inputChar)) return true;
-        return false;
-      case 'alphaNumeric':
-        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
-        return false;
-      default:
-        return true;
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_TextField2.TextFieldContainer, {
-    id: "TextFieldContainer",
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, null, !passwordField && /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    key: resetDefaultValue,
-    label: label,
-    multiline: multiline,
-    defaultValue: defaultValue,
-    placeholder: placeHolder,
-    id: "outlined-start-adornment",
-    sx: getTextFieldStyle(),
-    size: size,
-    required: required,
-    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
-    ref: ref !== null && ref !== void 0 ? ref : null,
-    onKeyDown: event => {
-      if (!isInputAllowed(event.key)) {
-        event.preventDefault();
-      }
-    },
-    onChange: event => {
-      onChangeHandler(event);
-    },
-    InputProps: {
-      textalign: 'flex-start',
-      alignitems: 'flex-start',
-      aligncontent: 'flex-start',
-      disableunderline: true.toString(),
-      style: {
-        textalign: 'start',
-        '&::placeholder': {
-          color: '#B1B1B1'
-        }
-      }
-    }
-  }), passwordField && /*#__PURE__*/_react.default.createElement(_FormControl.default, {
-    sx: getTextFieldStyle(),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
-    htmlFor: "outlined-adornment-password"
-  }, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, {
-    id: "outlined-adornment-password",
-    type: showPassword ? 'text' : 'password',
-    size: size,
-    endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-      position: "end"
-    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      "aria-label": "toggle password visibility",
-      onClick: handleClickShowPassword,
-      onMouseDown: handleMouseDownPassword,
-      edge: "end"
-    }, showPassword ? /*#__PURE__*/_react.default.createElement(_Visibility.default, null) : /*#__PURE__*/_react.default.createElement(_VisibilityOff.default, null))),
-    defaultValue: defaultValue,
-    label: label,
-    multiline: multiline,
-    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
-    ref: ref !== null && ref !== void 0 ? ref : null,
-    onKeyDown: event => {
-      if (!isInputAllowed(event.key)) {
-        event.preventDefault();
-      }
-    },
-    onChange: event => {
-      onChangeHandler(event);
-    }
-  })))));
-});
-var _default = exports.default = TextField;