@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.21

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js

@@ -1,157 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-// @flow
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from '@carbon/react';
-import { isColumnVisible } from './common';
-import Columns from './Columns';
-import Actions from './Actions';
-import { pkg } from '../../../../../settings';
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-
-var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
-  var isOpen = _ref.isOpen,
-      setIsModalOpen = _ref.setIsModalOpen,
-      onSaveColumnPrefs = _ref.onSaveColumnPrefs,
-      columnDefinitions = _ref.columnDefinitions,
-      originalColumnDefinitions = _ref.originalColumnDefinitions,
-      _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
-      customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize display' : _ref$customizeModalHe,
-      _ref$primaryButtonTex = _ref.primaryButtonTextLabel,
-      primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
-      _ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
-      secondaryButtonTextLabel = _ref$secondaryButtonT === void 0 ? 'Cancel' : _ref$secondaryButtonT,
-      _ref$instructionsLabe = _ref.instructionsLabel,
-      instructionsLabel = _ref$instructionsLabe === void 0 ? 'Deselect columns to hide them. Click and drag the white box to reorder the columns. These specifications will be saved and persist if you leave and return to the data table.' : _ref$instructionsLabe;
-
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      searchText = _useState2[0],
-      setSearchText = _useState2[1];
-
-  var _useState3 = useState(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
-  .filter(function (colDef) {
-    return !!colDef.Header.props;
-  }) // only sort the hidden column to the end when modal reopen
-  .sort(function (defA, defB) {
-    var isVisibleA = isColumnVisible(defA);
-    var isVisibleB = isColumnVisible(defB);
-
-    if (isVisibleA && !isVisibleB) {
-      return -1;
-    }
-
-    if (!isVisibleA && isVisibleB) {
-      return 1;
-    }
-
-    return 0;
-  })),
-      _useState4 = _slicedToArray(_useState3, 2),
-      columnObjects = _useState4[0],
-      _setColumnsObject = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isDirty = _useState6[0],
-      setIsDirty = _useState6[1];
-
-  var onRequestClose = function onRequestClose() {
-    setIsModalOpen(false);
-  };
-
-  var onRequestSubmit = function onRequestSubmit() {
-    setIsModalOpen(false);
-    var updatedColumns = columnObjects.map(function (colDef) {
-      return {
-        id: colDef.id,
-        isVisible: colDef.isVisible
-      };
-    });
-    onSaveColumnPrefs(updatedColumns);
-  };
-
-  var onCheckboxCheck = function onCheckboxCheck(col, value) {
-    var changedDefinitions = columnObjects.map(function (definition) {
-      if (definition.id === col.id) {
-        return _objectSpread(_objectSpread({}, definition), {}, {
-          isVisible: value
-        });
-      }
-
-      return definition;
-    });
-
-    _setColumnsObject(changedDefinitions);
-
-    setDirty();
-  };
-
-  var setDirty = function setDirty() {
-    if (!isDirty) {
-      setIsDirty(true);
-    }
-  };
-
-  var string = searchText.trim().toLowerCase();
-  return /*#__PURE__*/React.createElement(Modal, {
-    className: "".concat(blockClass, "__customize-columns-modal"),
-    open: isOpen,
-    modalHeading: customizeModalHeadingLabel,
-    primaryButtonText: primaryButtonTextLabel,
-    secondaryButtonText: secondaryButtonTextLabel,
-    selectorPrimaryFocus: ".".concat(blockClass, "__customize-columns-column-list--focus"),
-    primaryButtonDisabled: !isDirty,
-    onRequestClose: onRequestClose,
-    onRequestSubmit: onRequestSubmit,
-    size: "sm",
-    hasForm: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-instructions")
-  }, instructionsLabel), /*#__PURE__*/React.createElement(Actions, {
-    columns: columnObjects,
-    originalColumnDefinitions: originalColumnDefinitions,
-    searchText: searchText,
-    setColumnsObject: function setColumnsObject(cols) {
-      _setColumnsObject(cols);
-
-      setDirty();
-    },
-    setSearchText: setSearchText
-  }), isOpen && /*#__PURE__*/React.createElement(Columns, {
-    columns: columnObjects,
-    filterString: string,
-    onSelectColumn: onCheckboxCheck,
-    setColumnsObject: function setColumnsObject(cols) {
-      _setColumnsObject(cols);
-
-      setDirty();
-    }
-  }));
-};
-
-CustomizeColumnsModal.propTypes = {
-  columnDefinitions: PropTypes.array.isRequired,
-  customizeModalHeadingLabel: PropTypes.string,
-  instructionsLabel: PropTypes.string,
-  isOpen: PropTypes.bool.isRequired,
-  onSaveColumnPrefs: PropTypes.func.isRequired,
-  originalColumnDefinitions: PropTypes.array.isRequired,
-  primaryButtonTextLabel: PropTypes.string,
-  secondaryButtonTextLabel: PropTypes.string,
-  setIsModalOpen: PropTypes.func.isRequired
-};
-export default CustomizeColumnsModal;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js

@@ -1,62 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen"];
-// @flow
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import CustomizeColumnsModal from './CustomizeColumnsModal';
-
-var ModalWrapper = function ModalWrapper(_ref) {
-  var instance = _ref.instance;
-
-  var _instance$customizeCo = instance.customizeColumnsProps,
-      _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
-      isModalOpen = _instance$customizeCo.isModalOpen,
-      setIsModalOpen = _instance$customizeCo.setIsModalOpen,
-      rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
-
-  if (isModalOpen) {
-    return /*#__PURE__*/React.createElement(CustomizeColumnsModal, _extends({}, rest, {
-      isOpen: isModalOpen,
-      setIsModalOpen: setIsModalOpen,
-      columnDefinitions: instance.allColumns,
-      originalColumnDefinitions: instance.columns,
-      onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
-        var hiddenIds = updatedColDefs.filter(function (colDef) {
-          return !colDef.isVisible;
-        }).map(function (colDef) {
-          return colDef.id;
-        });
-        instance.setHiddenColumns(hiddenIds);
-
-        if (typeof instance.setColumnOrder === 'function') {
-          instance.setColumnOrder(updatedColDefs.map(function (colDef) {
-            return colDef.id;
-          }));
-        } else {
-          // eslint-disable-next-line no-console
-          console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
-        }
-
-        if (typeof _onSaveColumnPrefs === 'function') {
-          _onSaveColumnPrefs(updatedColDefs);
-        }
-      }
-    }));
-  }
-
-  return null;
-};
-
-ModalWrapper.propTypes = {
-  instance: PropTypes.object.isRequired
-};
-export default ModalWrapper;

package/es/components/Datagrid/Datagrid.stories-helpers/LeftPanelStory.js

@@ -1,6 +0,0 @@
-var notes = "\n# Access left side panel in data grid\nAllow users to access left panel in datagrid.\n\n## Documentation:\n\n- (required) Implement `options.leftPanel` which has the following props\n  - `options.leftPanel.isOpen` value is toggled by the Button onClick from DatagridActions\n  - render `options.leftPanel.panelContent` inside the panel container of data grid when isOpen is true\n\ncode snippet:\n\n```js\nconst columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(10));\n  const [isPanelOpen, setIsPanelOpen] = useState(false);\n  const DatagridActions = (datagridState) => (\n    <TableToolbarContent>\n      <Button onClick={() => { setIsPanelOpen(!isPanelOpen); }}>Click to toggle left panel</Button>\n      <TableToolbarSearch ... />\n      <Button ... />\n      <datagridState.CustomizeColumnsButton />\n    </TableToolbarContent>\n  )\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      leftPanel: {\n        isOpen: isPanelOpen,\n        panelContent: <div>Panel content will go here along with any button interactions</div>,\n      },\n      initialState: {\n        hiddenColumns: ['age'],\n        columnOrder: [],\n      },\n      customizeColumnsProps: {\n        onSaveColumnPrefs: (newColDefs) => {\n          console.log(newColDefs);\n        },\n      },\n      DatagridActions,\n    },\n  );\n\nreturn (\n  <Wrapper>\n    <IntlProvider locale=\"en\">\n      <Datagrid {...datagridState} />\n    </IntlProvider>\n  </Wrapper>\n);\n```\n";
-export var story = {
-  parameters: {
-    notes: notes
-  }
-};

package/lib/components/Datagrid/Datagrid.stories-helpers/LeftPanelStory.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.story = void 0;
-var notes = "\n# Access left side panel in data grid\nAllow users to access left panel in datagrid.\n\n## Documentation:\n\n- (required) Implement `options.leftPanel` which has the following props\n  - `options.leftPanel.isOpen` value is toggled by the Button onClick from DatagridActions\n  - render `options.leftPanel.panelContent` inside the panel container of data grid when isOpen is true\n\ncode snippet:\n\n```js\nconst columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(10));\n  const [isPanelOpen, setIsPanelOpen] = useState(false);\n  const DatagridActions = (datagridState) => (\n    <TableToolbarContent>\n      <Button onClick={() => { setIsPanelOpen(!isPanelOpen); }}>Click to toggle left panel</Button>\n      <TableToolbarSearch ... />\n      <Button ... />\n      <datagridState.CustomizeColumnsButton />\n    </TableToolbarContent>\n  )\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      leftPanel: {\n        isOpen: isPanelOpen,\n        panelContent: <div>Panel content will go here along with any button interactions</div>,\n      },\n      initialState: {\n        hiddenColumns: ['age'],\n        columnOrder: [],\n      },\n      customizeColumnsProps: {\n        onSaveColumnPrefs: (newColDefs) => {\n          console.log(newColDefs);\n        },\n      },\n      DatagridActions,\n    },\n  );\n\nreturn (\n  <Wrapper>\n    <IntlProvider locale=\"en\">\n      <Datagrid {...datagridState} />\n    </IntlProvider>\n  </Wrapper>\n);\n```\n";
-var story = {
-  parameters: {
-    notes: notes
-  }
-};
-exports.story = story;

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss

@@ -1,52 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021, 2022
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '../../../../global/styles/project-settings' as c4p-settings;
-@use '../variables';
-
-.#{variables.$block-class}__customize-columns-modal {
-  .#{c4p-settings.$carbon-prefix}--modal-content {
-    position: inherit;
-    display: flex;
-    flex-flow: column;
-    /* stylelint-disable-next-line declaration-no-important */
-    padding-top: 0 !important;
-  }
-}
-
-.#{variables.$block-class}__customize-columns-checkbox {
-  display: flex;
-  justify-content: center;
-  /* stylelint-disable-next-line declaration-no-important */
-  margin-bottom: 0 !important; // reset the bottom provided by carbon
-}
-
-.#{variables.$block-class}__customize-columns-modal--actions {
-  display: flex;
-  flex-flow: row;
-  margin-bottom: $spacing-06;
-}
-
-.#{variables.$block-class}__customize-columns-modal--actions > button {
-  margin-left: $spacing-05;
-}
-
-.#{variables.$block-class}__customize-columns-instructions {
-  margin-bottom: $spacing-06;
-  @include type.type-style('body-long-01');
-
-  color: $text-primary;
-}
-
-.#{variables.$block-class}__customize-columns-column-list {
-  position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
-  overflow: auto;
-}