feat(dashboardeditor): onclick selects card, onmousedown drags card

carbon-design-system · Oct 14, 2020 · 1bccce2 · 1bccce2
1 parent cb6af79
commit 1bccce2
Show file tree

Hide file tree

Showing 13 changed files with 529 additions and 618 deletions.
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -41,9 +41,6 @@ const CardWrapper = ({
   onMouseUp,
   onTouchEnd,
   onTouchStart,
-  onMouseOver,
-  onFocus,
-  onBlur,
   tabIndex,
   testID,
   ...others
@@ -60,9 +57,6 @@ const CardWrapper = ({
       onTouchEnd={onTouchEnd}
       onTouchStart={onTouchStart}
       onScroll={onScroll}
-      onMouseOver={onMouseOver}
-      onFocus={onFocus}
-      onBlur={onBlur}
       tabIndex={tabIndex}
       className={classnames(className, `${iotPrefix}--card--wrapper`)}
       {...validOthers}
@@ -123,12 +117,6 @@ CardWrapper.propTypes = {
   onTouchEnd: PropTypes.func,
   onTouchStart: PropTypes.func,
   onScroll: PropTypes.func,
-  /** Allows custom mouse over event handlers, such as changing the style */
-  onMouseOver: PropTypes.func,
-  /** Allows custom keyboard event handlers, such as changing the style */
-  onFocus: PropTypes.func,
-  /** Allows custom keyboard event handlers, such as changing the style */
-  onBlur: PropTypes.func,
   /** Optionally sets a keyboard tab index for the container */
   tabIndex: PropTypes.number,
 };
@@ -141,9 +129,6 @@ CardWrapper.defaultProps = {
   onTouchEnd: undefined,
   onTouchStart: undefined,
   onScroll: undefined,
-  onMouseOver: undefined,
-  onFocus: undefined,
-  onBlur: undefined,
   tabIndex: undefined,
 };
 CardContent.propTypes = {

diff --git a/src/components/CardEditor/CardEditor.jsx b/src/components/CardEditor/CardEditor.jsx
@@ -37,11 +37,11 @@ const defaultProps = {
   supportedTypes: ['BAR', 'TIMESERIES', 'VALUE', 'IMAGE', 'TABLE'],
 };
 
+const baseClassName = `${iotPrefix}--card-editor`;
+
 const CardEditor = ({ cardJson, onShowGallery, onChange, onAddCard, supportedTypes, i18n }) => {
   const mergedI18N = { ...defaultProps.i18n, ...i18n };
 
-  const baseClassName = `${iotPrefix}--card-editor`;
-
   // show the gallery if no card is being edited
   const showGallery = cardJson === null || cardJson === undefined;
 

diff --git a/src/components/CardEditor/CardEditor.story.jsx b/src/components/CardEditor/CardEditor.story.jsx
@@ -24,7 +24,7 @@ const CardEditorInteractive = () => {
       </div>
       <div style={{ position: 'absolute', right: 0, height: 'calc(100vh - 6rem)' }}>
         <CardEditor
-          value={data}
+          cardJson={data}
           onShowGallery={() => setData(null)}
           onAddCard={type => {
             setData({ ...defaultCard, id: `card-${counter + 1}`, type });
@@ -42,7 +42,7 @@ storiesOf('Watson IoT Experimental/CardEditor', module)
   .add('default', () => (
     <div style={{ position: 'absolute', right: 0, height: 'calc(100vh - 6rem)' }}>
       <CardEditor
-        value={object('value', {
+        cardJson={object('cardJson', {
           content: {
             attributes: [
               {

diff --git a/src/components/CardEditor/CardEditor.test.jsx b/src/components/CardEditor/CardEditor.test.jsx
@@ -27,15 +27,15 @@ describe('CardEditor', () => {
         onAddCard={actions.onAddCard}
       />
     );
-    const addTableCardBtn = screen.getByTestId('card-gallery-list-TABLE-add');
+    const addTableCardBtn = screen.getByTitle('Data table');
     userEvent.click(addTableCardBtn);
     expect(actions.onAddCard).toHaveBeenCalledTimes(1);
   });
 
   it('fires onChange when user edits title in form', () => {
     render(
       <CardEditor
-        value={defaultCard}
+        cardJson={defaultCard}
         onShowGallery={actions.onShowGallery}
         onChange={actions.onChange}
         onAddCard={actions.onAddCard}
@@ -59,7 +59,7 @@ describe('CardEditor', () => {
   it('fires onChange when user edits description in form', () => {
     render(
       <CardEditor
-        value={defaultCard}
+        cardJson={defaultCard}
         onShowGallery={actions.onShowGallery}
         onChange={actions.onChange}
         onAddCard={actions.onAddCard}
@@ -77,7 +77,7 @@ describe('CardEditor', () => {
   it('fires onShowGallery when user clicks button', () => {
     render(
       <CardEditor
-        value={defaultCard}
+        cardJson={defaultCard}
         onShowGallery={actions.onShowGallery}
         onChange={actions.onChange}
         onAddCard={actions.onAddCard}
@@ -94,7 +94,7 @@ describe('CardEditor', () => {
   it('opens and closes JSON code modal through button clicks', () => {
     render(
       <CardEditor
-        value={defaultCard}
+        cardJson={defaultCard}
         onShowGallery={actions.onShowGallery}
         onChange={actions.onChange}
         onAddCard={actions.onAddCard}