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

package/compat/ImageSettings/EditableOptionsTable/EditableOptionsTable.styl

@@ -1,122 +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
+@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

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

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