@bufferapp/analyze-export-picker - npm Package Compare versions

Comparing version 1.33.0 to 1.38.0

components/ExportPicker/index.jsx

@@ -1,74 +0,40 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
+import React from "react";
+import PropTypes from "prop-types";
+import Select from "@bufferapp/ui/Select";
+class ExportPicker extends React.Component {
+  render() {
+    const { exporting, exportToCSV, exportToPNG, filename } = this.props;
 
-import Button from './Button';
-import Dropdown from './Dropdown';
-import List from './List';
-
-const Container = styled.div`
-  position: relative;
-  width: 8rem;
-`;
-
-const Catcher = styled.div`
-  display: none;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 1;
-
-  ${props => props.isOpen && css`
-    display: block;
-  `}
-`;
-
-const ExportPicker = (props) => {
-  const {
-    isOpen,
-    exporting,
-
-    // Actions
-    open,
-    close,
-  } = props;
-
-  return (
-    <Container>
-      <Button
-        isOpen={isOpen}
-        exporting={exporting}
-        handleClick={() => (isOpen ? close() : open())}
+    const exportOptions = [
+      {
+        id: "csv",
+        title: "Export as CSV",
+        onItemClick: () => exportToCSV(filename),
+      },
+      {
+        id: "png",
+        title: "Export as Images",
+        onItemClick: () => exportToPNG(filename),
+      },
+    ];
+    return (
+      <Select
+        onSelectClick={(selectedItem) =>
+          selectedItem.onItemClick()
+        }
+        label={exporting ? "Exporting..." : "Export as..."}
+        items={exportOptions}
+        disabled={exporting}
+        hideSearch
+        xPosition="right"
       />
-      <Dropdown isOpen={isOpen}>
-        <List {...props} />
-      </Dropdown>
+    );
+  }
+}
 
-      <Catcher
-        tabIndex="0"
-        role="button"
-        onClick={close}
-        isOpen={isOpen}
-      />
-    </Container>
-  );
-};
-
-ExportPicker.defaultProps = {
-  exporting: false,
-  isOpen: false,
-};
-
 ExportPicker.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
   exporting: PropTypes.bool.isRequired,
-
-  // Actions
-  open: PropTypes.func.isRequired,
-  close: PropTypes.func.isRequired,
+  filename: PropTypes.node.isRequired,
 };
 
 export default ExportPicker;

components/ExportPicker/story.jsx

@@ -1,9 +0,9 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { checkA11y } from 'storybook-addon-a11y';
-import { Provider } from 'react-redux';
-import { action as actionLogger } from '@storybook/addon-actions';
-import ExportPicker from './index';
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { checkA11y } from "storybook-addon-a11y";
+import { Provider } from "react-redux";
+import { action as actionLogger } from "@storybook/addon-actions";
+import ExportPicker from "./index";
 
-const storeFake = state => ({
+const storeFake = (state) => ({
   default: () => {},
@@ -18,38 +18,12 @@ subscribe: () => {},
   exportAs: {},
-  filename: '',
-  exportPicker: {
-    open: false,
-  },
+  filename: "",
+  exportPicker: {},
 });
 
-storiesOf('ExportPicker')
+storiesOf("ExportPicker")
   .addDecorator(checkA11y)
-  .addDecorator(getStory => (
-    <Provider store={store}>
-      {getStory()}
-    </Provider>
-    ))
-  .add('should not be open', () => (
-    <ExportPicker
-      isOpen={false}
-      filename="TEST"
-      open={actionLogger('open')}
-      close={actionLogger('close')}
-    />
+  .addDecorator((getStory) => <Provider store={store}>{getStory()}</Provider>)
+  .add("should render picker", () => (
+    <ExportPicker exporting={false} filename="TEST" />
   ))
-  .add('should be open', () => (
-    <ExportPicker
-      isOpen
-      filename="TEST"
-      open={actionLogger('open')}
-      close={actionLogger('close')}
-    />
-  ))
-  .add('should show exporting', () => (
-    <ExportPicker
-      exporting
-      filename="TEST"
-      open={actionLogger('open')}
-      close={actionLogger('close')}
-    />
-  ));
+  .add("should render picker exporting", () => <ExportPicker exporting />);

index.js

@@ -1,4 +0,5 @@
-import { connect } from 'react-redux';
-import { actions } from './reducer';
-import ExportPicker from './components/ExportPicker';
+import { connect } from "react-redux";
+import { actions as csvActions } from "@bufferapp/analyze-csv-export";
+import { actions as pngActions } from "@bufferapp/analyze-png-export";
+import ExportPicker from "./components/ExportPicker";
 
@@ -9,13 +10,8 @@ // default export = container
     exporting: state.exportToCSV.exporting || state.exportToPNG.exporting,
-    isOpen: state.exportPicker.open,
     filename: ownProps.filename,
   }),
-  dispatch => ({
-    open: () => dispatch(actions.open()),
-    close: () => dispatch(actions.close()),
-  }),
+  (dispatch) => ({
+    exportToCSV: (filename) => dispatch(csvActions.exportToCSV(filename)),
+    exportToPNG: (filename) => dispatch(pngActions.exportToPNG(filename)),
+  })
 )(ExportPicker);
-
-// export reducer, actions and action types
-export reducer, { actions, actionTypes } from './reducer';
-export middleware from './middleware';

index.test.jsx

@@ -5,8 +5,3 @@ import React from 'react';
 import { Provider } from 'react-redux';
-import ExportPickerContainer, {
-  reducer,
-  actions,
-  actionTypes,
-  middleware,
-} from './index';
+import ExportPickerContainer from './index';
 import ExportPicker from './components/ExportPicker';
@@ -31,5 +26,3 @@
       },
-      exportPicker: {
-        open: false,
-      },
+      exportPicker: {},
     });
@@ -44,22 +37,2 @@ const wrapper = mount(
   });
-
-  it('should export reducer', () => {
-    expect(reducer)
-      .toBeDefined();
-  });
-
-  it('should export actions', () => {
-    expect(actions)
-      .toBeDefined();
-  });
-
-  it('should export actionTypes', () => {
-    expect(actionTypes)
-      .toBeDefined();
-  });
-
-  it('should export middleware', () => {
-    expect(middleware)
-      .toBeDefined();
-  });
 });

package.json

 {
   "name": "@bufferapp/analyze-export-picker",
-  "version": "1.33.0",
+  "version": "1.38.0",
   "description": "Export Dropdown",
@@ -23,4 +23,4 @@ "main": "index.js",
   "dependencies": {
-    "@bufferapp/analyze-csv-export": "^1.33.0",
-    "@bufferapp/analyze-png-export": "^1.33.0",
+    "@bufferapp/analyze-csv-export": "^1.38.0",
+    "@bufferapp/analyze-png-export": "^1.38.0",
     "@bufferapp/components": "3.2.1"
@@ -38,3 +38,3 @@ },
   },
-  "gitHead": "be350de960295f73cc32ba6012b8d9bb9ba663b7"
+  "gitHead": "a622869e2172a308b67b3487cd9a16cb809bb567"
 }

No alert changes

Worsened metrics

Total package byte prevSize

129137

decreased by-4.77%

Number of package files

29

decreased by-19.44%

Lines of code

618

decreased by-31.64%

Dependency changes

• Updated@bufferapp/analyze-csv-export@^1.38.0

• Updated@bufferapp/analyze-png-export@^1.38.0