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

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;
-}