Merge 63a7ae0 into b982899

jest.config.js

@@ -21,10 +21,11 @@ module.exports = {
     '<rootDir>/dist/'
   ],
   transformIgnorePatterns: [
-    'node_modules/(?!(ol|antd|(rc-[a-z-]*)|css-animation)/)'
+    'node_modules/(?!(ol|antd|(rc-[a-z-]*)|@ant-design\/css-animation|@babel\/runtime)/)'
   ],
   setupFiles: [
     '<rootDir>/jest/__mocks__/shim.js',
+    '<rootDir>/jest/__mocks__/matchMediaMock.js',
     '<rootDir>/jest/setup.js'
   ],
   transform: {

jest/__mocks__/matchMediaMock.js

@@ -0,0 +1,15 @@
+// https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});

package.json

@@ -71,14 +71,15 @@
   },
   "peerDependencies": {
     "@types/react": "^16.0",
-    "antd": "^3.0",
+    "antd": "^4.0",
     "ol": "^6.0",
-    "react": "^16.3"
+    "react": "^16.9"
   },
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "^23.2.1",
     "@ag-grid-community/core": "^23.2.1",
     "@ag-grid-community/react": "^23.2.1",
+    "@ant-design/icons": "^4.2.1",
     "@terrestris/base-util": "^0.2.3",
     "@terrestris/ol-util": "^4.0.1",
     "@types/lodash": "^4.14.155",
@@ -111,7 +112,7 @@
     "@typescript-eslint/eslint-plugin": "^3.4.0",
     "@typescript-eslint/eslint-plugin-tslint": "^3.4.0",
     "@typescript-eslint/parser": "^3.4.0",
-    "antd": "^3.26.6",
+    "antd": "^4.3.4",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.0.6",

src/Button/DigitizeButton/DigitizeButton.tsx

@@ -1119,7 +1119,7 @@ class DigitizeButton extends React.Component<DigitizeButtonProps, DigitizeButton
               <TextArea
                 value={this.state.textLabel}
                 onChange={this.onLabelChange}
-                autosize
+                autoSize
               />
             </Modal>
             : null

src/Button/SimpleButton/SimpleButton.example.md

@@ -6,7 +6,9 @@ Just a SimpleButton without any configuration:
 ```jsx
 import SimpleButton from '@terrestris/react-geo/Button/SimpleButton/SimpleButton';
 
-<SimpleButton />
+<SimpleButton>
+  Click me
+</SimpleButton>
 ```
 
 A SimpleButton with a `tooltip` and a `tooltipPlacement`:
@@ -17,7 +19,9 @@ import SimpleButton from '@terrestris/react-geo/Button/SimpleButton/SimpleButton
 <SimpleButton
   tooltip="bottom tooltip"
   tooltipPlacement="bottom"
-/>
+>
+  Click me
+</SimpleButton>
 ```
 
 A SimpleButton with an icon. Just use the font-awesome name:
@@ -26,7 +30,7 @@ A SimpleButton with an icon. Just use the font-awesome name:
 import SimpleButton from '@terrestris/react-geo/Button/SimpleButton/SimpleButton';
 
 <SimpleButton
-  icon="bullhorn"
+  iconName="bullhorn"
 />
 ```
 
@@ -36,7 +40,7 @@ A round SimpleButton using shape config:
 import SimpleButton from '@terrestris/react-geo/Button/SimpleButton/SimpleButton';
 
 <SimpleButton
-  icon="bullhorn"
+  iconName="bullhorn"
   shape="circle"
 />
 ```

src/Button/SimpleButton/SimpleButton.spec.tsx

@@ -17,14 +17,14 @@ describe('<SimpleButton />', () => {
 
     wrapper.setProps({
       type: 'secondary',
-      icon: 'bath',
+      iconName: 'bath',
       shape: 'circle',
       size: 'small',
       disabled: true
     });
 
     expect(wrapper.props().type).toBe('secondary');
-    expect(wrapper.props().icon).toBe('bath');
+    expect(wrapper.props().iconName).toBe('bath');
     expect(wrapper.props().shape).toBe('circle');
     expect(wrapper.props().size).toBe('small');
     expect(wrapper.props().disabled).toBe(true);

src/Button/SimpleButton/SimpleButton.tsx

@@ -1,13 +1,18 @@
 import * as React from 'react';
-import { Button, Tooltip } from 'antd';
-import Icon from 'react-fa/lib/Icon';
 
-import './SimpleButton.less';
+import { Button, Tooltip } from 'antd';
 
-import { CSS_PREFIX } from '../../constants';
 import { TooltipPlacement, AbstractTooltipProps } from 'antd/lib/tooltip';
 import { ButtonProps } from 'antd/lib/button';
 
+import Icon from 'react-fa/lib/Icon';
+
+import { CSS_PREFIX } from '../../constants';
+
+import logger from '@terrestris/base-util/dist/Logger';
+
+import './SimpleButton.less';
+
 interface DefaultProps {
   type: 'default' | 'primary' | 'ghost' | 'dashed' | 'danger' | 'link';
   /**
@@ -22,13 +27,13 @@ interface DefaultProps {
 interface BaseProps {
   className?: string;
   /**
-   * The font awesome icon name.
+   * The icon to render. See https://ant.design/components/icon/.
    */
-  icon?: string;
+  icon?: React.ReactNode;
   /**
-   * The classname of an icon of an iconFont. Use either this or icon.
+   * The name of the fa icon. Set either the icon node or the name of the icon.
    */
-  fontIcon?: string;
+  iconName?: string;
   /**
    * The tooltip to be shown on hover.
    */
@@ -72,7 +77,7 @@ class SimpleButton extends React.Component<SimpleButtonProps> {
     const {
       className,
       icon,
-      fontIcon,
+      iconName,
       tooltip,
       tooltipPlacement,
       tooltipProps,
@@ -83,6 +88,19 @@ class SimpleButton extends React.Component<SimpleButtonProps> {
       ? `${className} ${this.className}`
       : this.className;
 
+    if (icon && iconName) {
+      logger.warn('Provide either an icon node or the name of a fa icon. ' +
+        'If both are provided the fa icon will be rendered.');
+    }
+
+    let iconToRender;
+    if (icon) {
+      iconToRender = icon;
+    }
+    if (iconName) {
+      iconToRender = <Icon name={iconName}/>;
+    }
+
     return (
       <Tooltip
         title={tooltip}
@@ -91,15 +109,9 @@ class SimpleButton extends React.Component<SimpleButtonProps> {
       >
         <Button
           className={finalClassName}
+          icon={iconToRender}
           {...antBtnProps}
         >
-          {
-            icon || fontIcon ?
-              <Icon
-                name={icon ? icon : ''}
-                className={fontIcon}
-              /> : null
-          }
           {antBtnProps.children}
         </Button>
       </Tooltip>

src/Button/ToggleButton/ToggleButton.example.md

@@ -7,7 +7,9 @@ import ToggleButton from '@terrestris/react-geo/Button/ToggleButton/ToggleButton
 
 <ToggleButton
   onToggle={()=>{}}
-/>
+>
+  Toggle me
+</ToggleButton>
 ```
 
 A ToggleButton initially pressed:
@@ -18,7 +20,9 @@ import ToggleButton from '@terrestris/react-geo/Button/ToggleButton/ToggleButton
 <ToggleButton
   pressed={true}
   onToggle={()=>{}}
-/>
+>
+  Toggle me
+</ToggleButton>
 ```
 
 A ToggleButton with an icon and a pressedIcon:
@@ -27,8 +31,8 @@ A ToggleButton with an icon and a pressedIcon:
 import ToggleButton from '@terrestris/react-geo/Button/ToggleButton/ToggleButton';
 
 <ToggleButton
-  icon="frown-o"
-  pressedIcon="smile-o"
+  iconName="frown-o"
+  pressedIconName="smile-o"
   onToggle={()=>{}}
 />
 ```

src/Button/ToggleButton/ToggleButton.tsx

@@ -14,6 +14,7 @@ import './ToggleButton.less';
 import { CSS_PREFIX } from '../../constants';
 import { AbstractTooltipProps, TooltipPlacement } from 'antd/lib/tooltip';
 import { SimpleButtonProps } from '../SimpleButton/SimpleButton';
+import logger from '@terrestris/base-util/dist/Logger';
 
 interface DefaultProps {
   type: 'default' | 'primary' | 'ghost' | 'dashed' | 'danger' | 'link';
@@ -32,22 +33,20 @@ interface DefaultProps {
    * The toggle handler
    */
   onToggle: (pressed: boolean, lastClickEvt: any) => void;
-  /**
-   * The font awesome icon name.
-   */
-  icon: string;
 }
 
 interface BaseProps {
   className?: string;
   /**
-   * The classname of an icon of an iconFont. Use either this or icon.
+   * The icon to render for the pressed state. See
+   * https://ant.design/components/icon/.
    */
-  fontIcon?: string;
+  pressedIcon?: React.ReactNode;
   /**
-   * The font awesome icon name.
+   * The name of the fa icon for the pressed state. Set either the icon node or
+   * the name of the icon.
    */
-  pressedIcon?: string;
+  pressedIconName?: string;
   /**
    * The tooltip to be shown on hover.
    */
@@ -91,7 +90,6 @@ class ToggleButton extends React.Component<ToggleButtonProps, ToggleButtonState>
    */
   static defaultProps: DefaultProps = {
     type: 'primary',
-    icon: '',
     pressed: false,
     tooltipProps: {
       mouseEnterDelay: 1.5
@@ -238,11 +236,16 @@ class ToggleButton extends React.Component<ToggleButtonProps, ToggleButtonState>
    * The render function.
    */
   render() {
+    const {
+      overallPressed
+    } = this.state;
+
     const {
       className,
       icon,
+      iconName,
       pressedIcon,
-      fontIcon,
+      pressedIconName,
       pressed,
       onToggle,
       tooltip,
@@ -260,12 +263,37 @@ class ToggleButton extends React.Component<ToggleButtonProps, ToggleButtonState>
       ? `${className} ${this._className}`
       : this._className;
 
-    let iconName = icon;
     let pressedClass = '';
-    if (this.state.overallPressed) {
-      iconName = pressedIcon || icon;
+    if (overallPressed) {
       pressedClass = ` ${this.pressedClass} `;
     }
+
+    if (icon && iconName) {
+      logger.warn('Provide either an icon node or the name of a fa icon. ' +
+        'If both are provided the fa icon will be rendered.');
+    }
+
+    let iconToRender;
+    if (icon) {
+      iconToRender = icon;
+    }
+    if (iconName) {
+      iconToRender = <Icon name={iconName}/>;
+    }
+
+    if (pressedIcon && pressedIconName) {
+      logger.warn('Provide either a pressed icon node or the name of a fa ' +
+       'icon. If both are provided the fa icon will be rendered.');
+    }
+
+    let pressedIconToRender;
+    if (pressedIcon) {
+      pressedIconToRender = pressedIcon;
+    }
+    if (pressedIconName) {
+      pressedIconToRender = <Icon name={pressedIconName}/>;
+    }
+
     return (
       <Tooltip
         title={tooltip}
@@ -275,12 +303,12 @@ class ToggleButton extends React.Component<ToggleButtonProps, ToggleButtonState>
         <Button
           className={`${finalClassName}${pressedClass}`}
           onClick={this.onClick.bind(this)}
+          icon={overallPressed ?
+            pressedIconToRender :
+            iconToRender
+          }
           {...filteredAntBtnProps}
         >
-          <Icon
-            name={iconName}
-            className={fontIcon}
-          />
           {antBtnProps.children}
         </Button>
       </Tooltip>

src/Button/ToggleGroup/ToggleGroup.example.md

@@ -15,20 +15,20 @@ const onChange = (pressed, evt) => {
 >
   <ToggleButton
     name="one"
-    icon="frown-o"
-    pressedIcon="smile-o"
+    iconName="frown-o"
+    pressedIconName="smile-o"
     onToggle={()=>{}}
   />
   <ToggleButton
     name="two"
-    icon="frown-o"
-    pressedIcon="smile-o"
+    iconName="frown-o"
+    pressedIconName="smile-o"
     onToggle={()=>{}}
   />
   <ToggleButton
     name="three"
-    icon="frown-o"
-    pressedIcon="smile-o"
+    iconName="frown-o"
+    pressedIconName="smile-o"
     onToggle={()=>{}}
   />
 </ToggleGroup>

src/Button/UploadButton/UploadButton.example.md

@@ -9,7 +9,7 @@ import UploadButton from '@terrestris/react-geo/Button/UploadButton/UploadButton
   onChange={e => {
     alert('You uploaded ' + e.target.files[0].name);
   }}
-  icon="upload"
+  iconName="upload"
 />
 ```