@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/Image/Image.tsx

@@ -1,302 +1,302 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import styles from './Image.styl';
-
-export interface IImageProps {
-  withLoader?: boolean;
-  withAnimation?: boolean;
-
-  src?: string;
-  srcSmall?: string;
-  srcLarge?: string;
-
-  className?: string;
-  alt?: string;
-  title?: string;
-
-  width: number | string;
-  height?: number | string;
-
-  // Ratio is more important than height in current setup
-  // So if you pass height manually it will be ignored.
-  ratioH?: number;
-  ratioW?: number;
-
-  style?: { [key: string]: string | number };
-
-  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-  onClick?: (event: React.MouseEvent<HTMLImageElement>) => void;
-}
-
-interface IImageState {
-  error: boolean;
-  fit: boolean;
-  className: string;
-
-  src: string;
-  srcSmall: string;
-  srcLarge: string;
-
-  srcLoaded: boolean;
-  srcSmallLoaded: boolean;
-  srcLargeLoaded: boolean;
-}
-
-class ImageComponent extends React.Component<IImageProps, IImageState> {
-  private image: React.RefObject<HTMLImageElement> = null;
-  private container: React.RefObject<HTMLDivElement> = null;
-
-  public static defaultProps = {
-    width: 100,
-    height: 100,
-    withLoader: true,
-    withAnimation: true,
-
-    onLoad: () => { },
-    onError: () => { },
-    onClick: () => { }
-  };
-
-  constructor(props: IImageProps) {
-    super(props);
-
-    this.state = {
-      src: this.props.src,
-      srcSmall: this.props.srcSmall,
-      srcLarge: this.props.srcLarge,
-      srcLoaded: false,
-      srcSmallLoaded: false,
-      srcLargeLoaded: false,
-      error: false,
-      fit: false,
-      className: ''
-    };
-
-    this.image = React.createRef();
-    this.container = React.createRef();
-  }
-
-  componentDidMount() {
-    const { src, srcSmall } = this.props;
-
-    if (this.image && this.image.current && !!this.image.current.complete) {
-      if (!!src) {
-        this.setState(({
-          srcLoaded: true
-        }));
-      } else if (!!srcSmall) {
-        this.setState(({
-          srcSmallLoaded: true
-        }));
-      }
-    }
-  }
-
-  componentDidUpdate(prevProps: IImageProps) {
-    const { srcLoaded, error, fit, srcSmallLoaded, srcLargeLoaded } = this.state;
-
-    if ((srcLoaded || srcSmallLoaded || srcLargeLoaded) && !error && this.image && !fit) {
-      this.resizeImage();
-    }
-
-    if (prevProps.src !== this.props.src) {
-      this.setState({ src: this.props.src });
-    }
-
-    if (prevProps.srcSmall !== this.props.srcSmall) {
-      this.setState({ srcSmall: this.props.srcSmall });
-    }
-
-    if (prevProps.srcLarge !== this.props.srcLarge) {
-      this.setState({ srcLarge: this.props.srcLarge });
-    }
-  }
-
-  renderLoader = () => {
-    const { withLoader, src, srcSmall } = this.props;
-    const { error, srcLoaded, srcSmallLoaded } = this.state;
-
-    let imageLoaded = false;
-    if (!!src) {
-      imageLoaded = srcLoaded;
-    } else if (!!srcSmall) {
-      imageLoaded = srcSmallLoaded;
-    }
-
-    return (
-      withLoader && !error && !imageLoaded && <div className={styles.loader}>Loading...</div>
-    );
-  };
-
-  renderReload = () => {
-    const { src, srcSmall } = this.props;
-    const { error, srcLoaded, srcSmallLoaded } = this.state;
-
-    let imageLoaded = false;
-    if (!!src) {
-      imageLoaded = srcLoaded;
-    } else if (!!srcSmall) {
-      imageLoaded = srcSmallLoaded;
-    }
-
-    return (
-      error && imageLoaded && <span key='reload' className={styles.reload} onClick={this.onReloadClick}>Error...</span>
-    );
-  };
-
-  resizeImage = () => {
-    const { naturalWidth: imageWidth = 0, naturalHeight: imageHeight = 0 } = this.image.current;
-    const { clientWidth: containerWidth = 0, clientHeight: containerHeight = 0 } = this.container.current;
-
-    let className = '';
-
-    const wRatio = imageWidth / containerWidth;
-    const hRatio = imageHeight / containerHeight;
-
-    if (wRatio >= hRatio) {
-      className = 'ww';
-    } else {
-      className = 'wh';
-    }
-
-    this.setState(() => ({ className, fit: true }));
-  };
-
-  onSrcLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
-    this.setState(({ srcLoaded: true }));
-    this.props.onLoad(event);
-  };
-
-  onSrcSmallLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
-    this.setState(({ srcSmallLoaded: true }));
-    this.props.onLoad(event);
-
-    const inMemoryLargeImage = new Image();
-    inMemoryLargeImage.onload = this.onSrcLargeLoad;
-    inMemoryLargeImage.onerror = this.onSrcLargeError;
-    inMemoryLargeImage.src = this.state.srcLarge;
-  }
-
-  onSrcLargeLoad = () => {
-    this.setState(({ srcLargeLoaded: true }));
-  };
-
-  onSrcError = (event: React.SyntheticEvent<HTMLImageElement>) => {
-    this.setState(() => ({
-      srcLoaded: true,
-      error: true
-    }));
-
-    this.props.onError(event);
-  };
-
-  onSrcSmallError = (event: React.SyntheticEvent<HTMLImageElement>) => {
-    this.setState(() => ({
-      srcSmallLoaded: true,
-      error: true
-    }));
-
-    this.props.onError(event);
-  };
-
-  onSrcLargeError = () => {
-    this.setState(() => ({
-      srcLargeLoaded: true,
-      error: true
-    }));
-  };
-
-  onReloadClick = (event: React.MouseEvent<HTMLSpanElement>) => {
-    const { src, srcLarge, srcSmall } = this.state;
-
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-
-    this.setState(() => ({
-      error: false,
-      srcLoaded: false,
-      src: `${src}?_=${new Date().getTime()}`,
-      srcSmall: `${srcSmall}?_=${new Date().getTime()}`,
-      srcLarge: `${srcLarge}?_=${new Date().getTime()}`
-    }));
-  };
-
-  renderImage = () => {
-    const { alt, title, onClick, withAnimation } = this.props;
-    const { srcLoaded, src, className: imgClass } = this.state;
-    const imageClassNames = classnames(
-      styles.image, styles[imgClass], { [styles.loaded]: srcLoaded }, { [styles.withAnimation]: withAnimation }
-    );
-    const imageProps = {
-      title, alt, onClick, src,
-      ref: this.image,
-      className: imageClassNames,
-      onLoad: this.onSrcLoad,
-      onError: this.onSrcError,
-      draggable: false
-    };
-
-    return <img {...imageProps} />;
-  };
-
-  renderWithSmallImagePreload = () => {
-    const { alt, title, onClick } = this.props;
-    const { className: imgClass, srcLargeLoaded, srcSmallLoaded, error, srcSmall, srcLarge, fit } = this.state;
-    const imageSmallClassNames = classnames(styles.image, styles.imageSmall, styles[imgClass], { [styles.loaded]: srcSmallLoaded && fit });
-    const imageLargeClassNames = classnames(styles.image, styles[imgClass], styles.largeImage);
-    const smallImageProps = {
-      title, alt, onClick,
-      src: srcSmall,
-      ref: this.image,
-      className: imageSmallClassNames,
-      onLoad: this.onSrcSmallLoad,
-      onError: this.onSrcSmallError,
-      draggable: false
-    };
-    const largeImageProps = {
-      src: srcLarge,
-      className: imageLargeClassNames,
-      draggable: false
-    };
-    const inlineStyle = srcSmallLoaded ? { backgroundImage: `url('${srcSmall}')` } : null;
-
-    return (
-      <>
-        <div className={styles.preloadImageWrapper} style={inlineStyle}>
-          <img {...smallImageProps} />
-        </div>
-        {srcLargeLoaded && !error && <img {...largeImageProps} />}
-      </>
-    );
-  };
-
-  render() {
-    const { className, ratioH, ratioW, height, width, style, src: propsSrc, srcSmall } = this.props;
-    const { error, srcLoaded, srcSmallLoaded, srcLarge } = this.state;
-
-    const classNames = classnames(styles.container, className, { [styles.loaded]: (!error && (srcLoaded || srcSmallLoaded)) });
-    const withRatio = ratioW && ratioH;
-    const paddingTop = 100 * ratioH / ratioW; // tslint:disable-line
-    const withSmallImagePreload = !propsSrc && srcSmall && srcLarge;
-
-    const inlineStyles = {
-      ...style,
-      width,
-      height: withRatio ? 0 : height,
-      paddingTop: withRatio ? `${paddingTop}%` : 0
-    };
-
-    return (
-      <div className={classNames} style={inlineStyles} ref={this.container}>
-        {this.renderLoader()}
-        {propsSrc && this.renderImage()}
-        {withSmallImagePreload && this.renderWithSmallImagePreload()}
-        {this.renderReload()}
-      </div>
-    );
-  }
-}
-
-export default ImageComponent;
+import * as React from 'react';
+import classnames from 'classnames';
+
+import styles from './Image.styl';
+
+export interface IImageProps {
+  withLoader?: boolean;
+  withAnimation?: boolean;
+
+  src?: string;
+  srcSmall?: string;
+  srcLarge?: string;
+
+  className?: string;
+  alt?: string;
+  title?: string;
+
+  width: number | string;
+  height?: number | string;
+
+  // Ratio is more important than height in current setup
+  // So if you pass height manually it will be ignored.
+  ratioH?: number;
+  ratioW?: number;
+
+  style?: { [key: string]: string | number };
+
+  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  onClick?: (event: React.MouseEvent<HTMLImageElement>) => void;
+}
+
+interface IImageState {
+  error: boolean;
+  fit: boolean;
+  className: string;
+
+  src: string;
+  srcSmall: string;
+  srcLarge: string;
+
+  srcLoaded: boolean;
+  srcSmallLoaded: boolean;
+  srcLargeLoaded: boolean;
+}
+
+class ImageComponent extends React.Component<IImageProps, IImageState> {
+  private image: React.RefObject<HTMLImageElement> = null;
+  private container: React.RefObject<HTMLDivElement> = null;
+
+  public static defaultProps = {
+    width: 100,
+    height: 100,
+    withLoader: true,
+    withAnimation: true,
+
+    onLoad: () => { },
+    onError: () => { },
+    onClick: () => { }
+  };
+
+  constructor(props: IImageProps) {
+    super(props);
+
+    this.state = {
+      src: this.props.src,
+      srcSmall: this.props.srcSmall,
+      srcLarge: this.props.srcLarge,
+      srcLoaded: false,
+      srcSmallLoaded: false,
+      srcLargeLoaded: false,
+      error: false,
+      fit: false,
+      className: ''
+    };
+
+    this.image = React.createRef();
+    this.container = React.createRef();
+  }
+
+  componentDidMount() {
+    const { src, srcSmall } = this.props;
+
+    if (this.image && this.image.current && !!this.image.current.complete) {
+      if (!!src) {
+        this.setState(({
+          srcLoaded: true
+        }));
+      } else if (!!srcSmall) {
+        this.setState(({
+          srcSmallLoaded: true
+        }));
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps: IImageProps) {
+    const { srcLoaded, error, fit, srcSmallLoaded, srcLargeLoaded } = this.state;
+
+    if ((srcLoaded || srcSmallLoaded || srcLargeLoaded) && !error && this.image && !fit) {
+      this.resizeImage();
+    }
+
+    if (prevProps.src !== this.props.src) {
+      this.setState({ src: this.props.src });
+    }
+
+    if (prevProps.srcSmall !== this.props.srcSmall) {
+      this.setState({ srcSmall: this.props.srcSmall });
+    }
+
+    if (prevProps.srcLarge !== this.props.srcLarge) {
+      this.setState({ srcLarge: this.props.srcLarge });
+    }
+  }
+
+  renderLoader = () => {
+    const { withLoader, src, srcSmall } = this.props;
+    const { error, srcLoaded, srcSmallLoaded } = this.state;
+
+    let imageLoaded = false;
+    if (!!src) {
+      imageLoaded = srcLoaded;
+    } else if (!!srcSmall) {
+      imageLoaded = srcSmallLoaded;
+    }
+
+    return (
+      withLoader && !error && !imageLoaded && <div className={styles.loader}>Loading...</div>
+    );
+  };
+
+  renderReload = () => {
+    const { src, srcSmall } = this.props;
+    const { error, srcLoaded, srcSmallLoaded } = this.state;
+
+    let imageLoaded = false;
+    if (!!src) {
+      imageLoaded = srcLoaded;
+    } else if (!!srcSmall) {
+      imageLoaded = srcSmallLoaded;
+    }
+
+    return (
+      error && imageLoaded && <span key='reload' className={styles.reload} onClick={this.onReloadClick}>Error...</span>
+    );
+  };
+
+  resizeImage = () => {
+    const { naturalWidth: imageWidth = 0, naturalHeight: imageHeight = 0 } = this.image.current;
+    const { clientWidth: containerWidth = 0, clientHeight: containerHeight = 0 } = this.container.current;
+
+    let className = '';
+
+    const wRatio = imageWidth / containerWidth;
+    const hRatio = imageHeight / containerHeight;
+
+    if (wRatio >= hRatio) {
+      className = 'ww';
+    } else {
+      className = 'wh';
+    }
+
+    this.setState(() => ({ className, fit: true }));
+  };
+
+  onSrcLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
+    this.setState(({ srcLoaded: true }));
+    this.props.onLoad(event);
+  };
+
+  onSrcSmallLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
+    this.setState(({ srcSmallLoaded: true }));
+    this.props.onLoad(event);
+
+    const inMemoryLargeImage = new Image();
+    inMemoryLargeImage.onload = this.onSrcLargeLoad;
+    inMemoryLargeImage.onerror = this.onSrcLargeError;
+    inMemoryLargeImage.src = this.state.srcLarge;
+  }
+
+  onSrcLargeLoad = () => {
+    this.setState(({ srcLargeLoaded: true }));
+  };
+
+  onSrcError = (event: React.SyntheticEvent<HTMLImageElement>) => {
+    this.setState(() => ({
+      srcLoaded: true,
+      error: true
+    }));
+
+    this.props.onError(event);
+  };
+
+  onSrcSmallError = (event: React.SyntheticEvent<HTMLImageElement>) => {
+    this.setState(() => ({
+      srcSmallLoaded: true,
+      error: true
+    }));
+
+    this.props.onError(event);
+  };
+
+  onSrcLargeError = () => {
+    this.setState(() => ({
+      srcLargeLoaded: true,
+      error: true
+    }));
+  };
+
+  onReloadClick = (event: React.MouseEvent<HTMLSpanElement>) => {
+    const { src, srcLarge, srcSmall } = this.state;
+
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+
+    this.setState(() => ({
+      error: false,
+      srcLoaded: false,
+      src: `${src}?_=${new Date().getTime()}`,
+      srcSmall: `${srcSmall}?_=${new Date().getTime()}`,
+      srcLarge: `${srcLarge}?_=${new Date().getTime()}`
+    }));
+  };
+
+  renderImage = () => {
+    const { alt, title, onClick, withAnimation } = this.props;
+    const { srcLoaded, src, className: imgClass } = this.state;
+    const imageClassNames = classnames(
+      styles.image, styles[imgClass], { [styles.loaded]: srcLoaded }, { [styles.withAnimation]: withAnimation }
+    );
+    const imageProps = {
+      title, alt, onClick, src,
+      ref: this.image,
+      className: imageClassNames,
+      onLoad: this.onSrcLoad,
+      onError: this.onSrcError,
+      draggable: false
+    };
+
+    return <img {...imageProps} />;
+  };
+
+  renderWithSmallImagePreload = () => {
+    const { alt, title, onClick } = this.props;
+    const { className: imgClass, srcLargeLoaded, srcSmallLoaded, error, srcSmall, srcLarge, fit } = this.state;
+    const imageSmallClassNames = classnames(styles.image, styles.imageSmall, styles[imgClass], { [styles.loaded]: srcSmallLoaded && fit });
+    const imageLargeClassNames = classnames(styles.image, styles[imgClass], styles.largeImage);
+    const smallImageProps = {
+      title, alt, onClick,
+      src: srcSmall,
+      ref: this.image,
+      className: imageSmallClassNames,
+      onLoad: this.onSrcSmallLoad,
+      onError: this.onSrcSmallError,
+      draggable: false
+    };
+    const largeImageProps = {
+      src: srcLarge,
+      className: imageLargeClassNames,
+      draggable: false
+    };
+    const inlineStyle = srcSmallLoaded ? { backgroundImage: `url('${srcSmall}')` } : null;
+
+    return (
+      <>
+        <div className={styles.preloadImageWrapper} style={inlineStyle}>
+          <img {...smallImageProps} />
+        </div>
+        {srcLargeLoaded && !error && <img {...largeImageProps} />}
+      </>
+    );
+  };
+
+  render() {
+    const { className, ratioH, ratioW, height, width, style, src: propsSrc, srcSmall } = this.props;
+    const { error, srcLoaded, srcSmallLoaded, srcLarge } = this.state;
+
+    const classNames = classnames(styles.container, className, { [styles.loaded]: (!error && (srcLoaded || srcSmallLoaded)) });
+    const withRatio = ratioW && ratioH;
+    const paddingTop = 100 * ratioH / ratioW; // tslint:disable-line
+    const withSmallImagePreload = !propsSrc && srcSmall && srcLarge;
+
+    const inlineStyles = {
+      ...style,
+      width,
+      height: withRatio ? 0 : height,
+      paddingTop: withRatio ? `${paddingTop}%` : 0
+    };
+
+    return (
+      <div className={classNames} style={inlineStyles} ref={this.container}>
+        {this.renderLoader()}
+        {propsSrc && this.renderImage()}
+        {withSmallImagePreload && this.renderWithSmallImagePreload()}
+        {this.renderReload()}
+      </div>
+    );
+  }
+}
+
+export default ImageComponent;

package/compat/ImageSettings/EditableOptionsTable/CustomCheckbox/CustomCheckbox.styl

@@ -1,7 +1,7 @@
-@import '../../../legacy-theme/theme.styl'
-
-.checkbox
-  border-color: $grey-d !important
-
-  &.green svg
-      fill: $mantisGreen
+@import '../../../legacy-theme/theme.styl'
+
+.checkbox
+  border-color: $grey-d !important
+
+  &.green svg
+      fill: $mantisGreen

package/compat/ImageSettings/EditableOptionsTable/CustomCheckbox/CustomCheckbox.tsx

@@ -1,30 +1,30 @@
-import React from 'react';
-import classnames from 'classnames';
-import Checkbox from '../../../Checkbox/Checkbox';
-import { ImagePackage, ImagePackageConfig, ImageType } from '../../index';
-
-import styles from './CustomCheckbox.styl';
-
-interface IProps {
-  imagePackage: ImagePackage;
-  config: ImagePackageConfig;
-  checked: boolean;
-  disabled: boolean;
-  imageType: ImageType;
-  onChangeConfig: (imagePackage: ImagePackage, config: ImagePackageConfig) => void;
-}
-
-const CustomCheckbox: React.FunctionComponent<IProps> = ({ checked, disabled, imagePackage, config, imageType, onChangeConfig }) => {
-  const onChange = (_event: any, checked: boolean) => {
-    onChangeConfig(imagePackage, {
-      ...config,
-      [imageType]: checked
-    });
-  };
-
-  return (
-    <Checkbox checkboxClassName={classnames(styles.checkbox, { [styles.green]: checked && disabled })} disabled={disabled} checked={checked} onChange={onChange}/>
-  );
-};
-
-export default React.memo(CustomCheckbox);
+import React from 'react';
+import classnames from 'classnames';
+import Checkbox from '../../../Checkbox/Checkbox';
+import { ImagePackage, ImagePackageConfig, ImageType } from '../../index';
+
+import styles from './CustomCheckbox.styl';
+
+interface IProps {
+  imagePackage: ImagePackage;
+  config: ImagePackageConfig;
+  checked: boolean;
+  disabled: boolean;
+  imageType: ImageType;
+  onChangeConfig: (imagePackage: ImagePackage, config: ImagePackageConfig) => void;
+}
+
+const CustomCheckbox: React.FunctionComponent<IProps> = ({ checked, disabled, imagePackage, config, imageType, onChangeConfig }) => {
+  const onChange = (_event: any, checked: boolean) => {
+    onChangeConfig(imagePackage, {
+      ...config,
+      [imageType]: checked
+    });
+  };
+
+  return (
+    <Checkbox checkboxClassName={classnames(styles.checkbox, { [styles.green]: checked && disabled })} disabled={disabled} checked={checked} onChange={onChange}/>
+  );
+};
+
+export default React.memo(CustomCheckbox);