@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/Image/Image.tsx

@@ -0,0 +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;

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

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

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

@@ -0,0 +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);

package/compat/ImageSettings/EditableOptionsTable/EditableOptionsTable.styl

@@ -0,0 +1,122 @@
+@import '../../legacy-theme/theme.styl'
+
+.table
+  font-family: $font-style-arial
+  font-size: 14px
+  border-collapse: collapse
+  background-color: white
+
+  &, & th, & td
+    border: 1px solid #C4C4C4;
+
+  & th:first-child,
+  & th.description
+    background-color: rgba(196, 196, 196, .3)
+
+  & th.description
+    padding: 6px
+    font-size: 10px
+    font-weight: $font-weight-normal
+    word-break: break-word;
+    color: $grey-3
+
+  & th.counts
+    padding: 4px
+    font-size: 10px
+    font-weight: $font-weight-normal
+    color: $grey-3
+    border-top-color: transparent
+
+    &:nth-child(2n)
+      border-left-color: transparent
+
+    &:nth-child(2n + 1)
+      border-right-color: transparent
+
+    &.basic
+      background-color: #C4C4C4
+
+    &.premium
+      background-color: #71CBF4
+
+    &.auto_de_premium
+      color: white
+      background-color: $skyBlue
+
+  & th.packageTitle
+    padding: 10px
+    font-size: 16px
+    font-weight: $font-weight-bold
+    white-space nowrap
+    border-bottom-color: transparent
+
+    &.basic
+      color: white
+      background-color: #C4C4C4
+
+    &.premium
+      color: white
+      background-color: #71CBF4
+
+    &.auto_de_premium
+      color: white
+      background-color: $skyBlue
+
+.checkboxCell
+  padding: 10px
+  text-align: center
+
+  &.basic
+    background-color: rgba(196, 196, 196, .07)
+
+  &.premium
+    background-color: rgba(113, 203, 244, .07)
+
+  &.auto_de_premium
+    background-color: rgba(173, 213, 108, .07)
+
+.categoryRow
+  cursor: pointer
+
+  & td:nth-child(2)
+    width: 40%
+    border-right-color: transparent
+
+  & td:nth-child(3)
+    border-left-color: transparent
+
+.categoryCell
+  width: 46px
+  white-space: nowrap
+  border-right-color: transparent !important
+  padding: 10px
+
+.categoryContainer
+  display: flex
+  width: 46px
+  white-space: nowrap
+  align-items: center
+
+.category
+  font-size: 15px
+  font-weight: $font-weight-bold
+  color: $skyBlue
+
+.triangleIcon
+  width: 0
+  height: 0
+  margin-right: 10px
+  border-left: 6px solid transparent
+  border-right: 6px solid transparent
+  border-bottom: 9px solid $skyBlue
+  transition: transform 0.2s
+
+  &.down
+    transform: rotate(180deg);
+
+.imageCode
+  margin: 0 8px
+  font-size: 13px
+
+.imageIconCell
+  width: 64px

package/compat/ImageSettings/EditableOptionsTable/EditableOptionsTable.tsx

@@ -0,0 +1,199 @@
+import React from 'react';
+import classnames from 'classnames';
+import CustomCheckbox from './CustomCheckbox/CustomCheckbox';
+import ImageIcon from './ImageIcon/ImageIcon';
+
+import { DisabledImage, ImageCounts, ImagePackage, ImagePackageConfig, ImageType } from '../index';
+
+import styles from './EditableOptionsTable.styl';
+
+interface IProps {
+  t: (key: string, options?: object) => string;
+  parentImagePackages: ImagePackage[];
+  customImagePackages: ImagePackage[];
+  countsByParentImagePackages: WeakMap<ImagePackage, ImageCounts>;
+  countsByCustomImagePackages: WeakMap<ImagePackage, ImageCounts>;
+  imageCodesByCategories: Map<string, Set<string>>;
+  disabledImages?: DisabledImage[];
+  onShowImage: (imageCode: string) => void;
+  onChangeConfig: (imagePackage: ImagePackage, config: ImagePackageConfig) => void;
+  className?: string;
+}
+
+interface IState {
+  activeCategory: string;
+}
+
+class EditableOptionsTable extends React.Component<IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      activeCategory: undefined
+    };
+  }
+
+  setActiveCategory = (activeCategory: string): void => {
+    this.setState({
+      activeCategory
+    });
+  };
+
+  isDisabledImage = (config: ImagePackageConfig, selected: ImageCounts, possible: ImageCounts, imageCode: string, imagePackageType: string, imageType: ImageType): boolean => {
+    const { disabledImages } = this.props;
+
+    const checked: boolean = config[imageType];
+    const isDisabled: boolean = Array.isArray(disabledImages) && disabledImages.some((disabledImage) => {
+      if (disabledImage[imageType]) {
+        if (disabledImage.imagePackageType === imagePackageType && disabledImage.imageCode === imageCode) return true;
+        if (disabledImage.imagePackageType === imagePackageType && disabledImage.imageCode === undefined) return true;
+        if (disabledImage.imagePackageType === undefined && disabledImage.imageCode === imageCode) return true;
+      }
+
+      return false;
+    });
+
+    let selectedCount: number;
+    let possibleCount: number;
+
+    switch (imageType) {
+      case 'mandatory':
+        selectedCount = selected.mandatoryCount;
+        possibleCount = possible.mandatoryCount;
+        break;
+      case 'postProcess':
+        selectedCount = selected.postProcessCount;
+        possibleCount = possible.postProcessCount;
+        break;
+      default:
+    }
+
+    return isDisabled || (!checked && selectedCount === possibleCount) || (imageType === 'postProcess' && (!config.mandatory && config.image_code !== 'gen_feature'));
+  };
+
+  render(): React.ReactNode {
+    const { t, parentImagePackages, customImagePackages, countsByParentImagePackages, countsByCustomImagePackages, imageCodesByCategories, onShowImage, onChangeConfig, className } = this.props;
+    const { activeCategory } = this.state;
+
+    return (
+      <table className={classnames(styles.table, className)}>
+        <thead>
+        <tr>
+          <th colSpan={2} rowSpan={2}/>
+          {parentImagePackages.map(({ id, type }) => (
+            <th key={id} colSpan={2} className={classnames(styles.packageTitle, styles[type])}>
+              {t(`editableTable.packages`, { context: type })}
+            </th>
+          ))}
+        </tr>
+        <tr>
+          {parentImagePackages.map((parentImagePackage) => {
+            const { id, type } = parentImagePackage;
+            const customImagePackage: ImagePackage = customImagePackages.find(({ parentId }) => parentId === id);
+            const possible: ImageCounts = countsByParentImagePackages.get(parentImagePackage);
+            const selected: ImageCounts = customImagePackage !== undefined
+              ? countsByCustomImagePackages.get(customImagePackage)
+              : countsByParentImagePackages.get(parentImagePackage);
+
+            return (
+              <React.Fragment key={id}>
+                <th className={classnames(styles.counts, styles[type])}>
+                  {t('editableTable.counts', { context: type, selected: selected.mandatoryCount, possible: possible.mandatoryCount })}
+                </th>
+                <th className={classnames(styles.counts, styles[type])}>
+                  {t('editableTable.counts', { context: type, selected: selected.postProcessCount, possible: possible.postProcessCount })}
+                </th>
+              </React.Fragment>
+            );
+          })}
+        </tr>
+        <tr>
+          <th colSpan={2}/>
+          {parentImagePackages.map(({ id }) => (
+            <React.Fragment key={id}>
+              <th className={styles.description}>{t('editableTable.choose')}</th>
+              <th className={styles.description}>{t('editableTable.release')}</th>
+            </React.Fragment>
+          ))}
+        </tr>
+        </thead>
+        <tbody>
+        {Array.from(imageCodesByCategories).map(([category, imageCodes]) => {
+          const isActiveCategory: boolean = category === activeCategory;
+          const onClick = () => {
+            this.setActiveCategory(isActiveCategory ? undefined : category);
+          };
+
+          return (
+            <React.Fragment key={category}>
+              <tr className={styles.categoryRow} onClick={onClick}>
+                <td className={styles.categoryCell}>
+                  <div className={styles.categoryContainer}>
+                    <div className={classnames(styles.triangleIcon, { [styles.down]: isActiveCategory })}/>
+                    <div className={styles.category}>{t('editableTable.category', { context: category, count: imageCodes.size })}</div>
+                  </div>
+                </td>
+                <td/>
+                <td colSpan={parentImagePackages.length * 2}/>
+              </tr>
+              {isActiveCategory && Array.from(imageCodes).map(imageCode => (
+                <tr key={imageCode}>
+                  <td>
+                    <ImageIcon imageCode={imageCode} onShowImage={onShowImage}/>
+                  </td>
+                  <td className={styles.imageCodeCell}>
+                    <div className={styles.imageCode}>{t(`imageCodes.${imageCode}`, { defaultValue: imageCode })}</div>
+                  </td>
+                  {parentImagePackages.map((parentImagePackage) => {
+                    const { id, type } = parentImagePackage;
+                    const possible: ImageCounts = countsByParentImagePackages.get(parentImagePackage);
+
+                    let selected: ImageCounts;
+                    let imagePackage: ImagePackage = customImagePackages.find(({ parentId }) => parentId === id);
+
+                    if (imagePackage !== undefined) {
+                      selected = countsByCustomImagePackages.get(imagePackage);
+                    } else {
+                      selected = countsByParentImagePackages.get(parentImagePackage);
+                      imagePackage = parentImagePackage;
+                    }
+
+                    const config: ImagePackageConfig = imagePackage.imagePackageConfigs.find((config) => {
+                      return config.category === category && config.image_code === imageCode;
+                    });
+
+                    return (
+                      <React.Fragment key={id}>
+                        <td className={classnames(styles.checkboxCell, styles[type])}>
+                          <CustomCheckbox imageType='mandatory' {...{
+                            imagePackage,
+                            config,
+                            onChangeConfig,
+                            checked: config.mandatory,
+                            disabled: this.isDisabledImage(config, selected, possible, imageCode, type, 'mandatory')
+                          }}/>
+                        </td>
+                        <td className={classnames(styles.checkboxCell, styles[type])}>
+                          <CustomCheckbox imageType='postProcess' {...{
+                            imagePackage,
+                            config,
+                            onChangeConfig,
+                            checked: config.postProcess,
+                            disabled: this.isDisabledImage(config, selected, possible, imageCode, type, 'postProcess')
+                          }}/>
+                        </td>
+                      </React.Fragment>
+                    );
+                  })}
+                </tr>
+              ))}
+            </React.Fragment>
+          );
+        })}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default EditableOptionsTable;

package/compat/ImageSettings/EditableOptionsTable/ImageIcon/ImageIcon.styl

@@ -0,0 +1,3 @@
+.icon
+  margin: 2px 20px 0
+  cursor: pointer

package/compat/ImageSettings/EditableOptionsTable/ImageIcon/ImageIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import IconSVG from '../../../../iconsvg/IconSVG';
+
+import styles from './ImageIcon.styl';
+
+interface IProps {
+  imageCode: string;
+  onShowImage: (imageCode: string) => void;
+}
+
+const ImageIcon: React.FunctionComponent<IProps> = ({ imageCode, onShowImage }) => (
+  <IconSVG className={styles.icon} name='picture' onClick={() => onShowImage(imageCode)}/>
+);
+
+export default React.memo(ImageIcon);