@pushwoosh/smart-components-kit 1.0.89 → 1.1.0

package/LanguagesSelector/LanguagesSelector.js

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { Button, Modal, DropdownMenu, DropdownMenuItem, DropdownMenuSection } from '@pushwoosh/dumb-components';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { ArrowIcon, ChevronIcon, LanguageIcon, PlusIcon } from '@pushwoosh/kit-icons';
@@ -23,84 +24,97 @@ export const LanguagesSelector = ({
     }));
     return ['default', ...sorted];
   }, [getLangName, languages]);
-  return React.createElement(Horizontal, {
-    "$gap": 8
-  }, React.createElement(DropdownMenu, {
-    isScrollable: true,
-    renderHandler: handlerProps => React.createElement(Button, {
-      style: {
-        minWidth: 200
-      },
-      color: "secondary",
-      icon: React.createElement(LanguageIcon, {
-        size: "medium",
-        view: "lined"
+  return _jsxs(Horizontal, {
+    "$gap": 8,
+    children: [_jsx(DropdownMenu, {
+      isScrollable: true,
+      renderHandler: handlerProps => _jsx(Button, {
+        style: {
+          minWidth: 200
+        },
+        color: "secondary",
+        icon: _jsx(LanguageIcon, {
+          size: "medium",
+          view: "lined"
+        }),
+        rightIcon: _jsx(ChevronIcon, {
+          size: "medium",
+          direction: "down"
+        }),
+        onClick: handlerProps.onClick,
+        boxRef: handlerProps.ref,
+        isOpen: handlerProps.isOpen,
+        isDisabled: isDisabled,
+        children: getLangName(value)
       }),
-      rightIcon: React.createElement(ChevronIcon, {
-        size: "medium",
-        direction: "down"
+      children: () => _jsxs(_Fragment, {
+        children: [_jsx(DropdownMenuSection, {
+          children: _jsx(DropdownMenuItem, {
+            onClick: () => setShowLanguagesModal(true),
+            children: lang({
+              message: 'SMART.LANGUAGES_SELECTOR.CHOOSE_LANGUAGES'
+            })
+          })
+        }), _jsx(DropdownMenuSection, {
+          children: sortedLanguages.map(code => _jsx(DropdownMenuItem, {
+            isActive: code === value,
+            onClick: () => onChange(code),
+            children: getLangName(code)
+          }, code))
+        })]
+      })
+    }), sortedLanguages.length > 1 && _jsxs(ButtonGroup, {
+      children: [_jsx(Button, {
+        color: "secondary",
+        isDisabled: isDisabled,
+        icon: _jsx(ArrowIcon, {
+          size: "medium",
+          direction: "left"
+        }),
+        onClick: () => {
+          const index = sortedLanguages.indexOf(value);
+          if (index > 0) {
+            onChange(sortedLanguages[index - 1]);
+          } else {
+            onChange(sortedLanguages[sortedLanguages.length - 1]);
+          }
+        }
+      }), _jsx(Button, {
+        color: "secondary",
+        isDisabled: isDisabled,
+        icon: _jsx(ArrowIcon, {
+          size: "medium",
+          direction: "right"
+        }),
+        onClick: () => {
+          const index = sortedLanguages.indexOf(value);
+          if (index < sortedLanguages.length - 1) {
+            onChange(sortedLanguages[index + 1]);
+          } else {
+            onChange(sortedLanguages[0]);
+          }
+        }
+      })]
+    }), sortedLanguages.length <= 1 && _jsx(Button, {
+      color: "secondary",
+      icon: _jsx(PlusIcon, {
+        size: "medium"
       }),
-      onClick: handlerProps.onClick,
-      boxRef: handlerProps.ref,
-      isOpen: handlerProps.isOpen,
-      isDisabled: isDisabled
-    }, getLangName(value))
-  }, () => React.createElement(React.Fragment, null, React.createElement(DropdownMenuSection, null, React.createElement(DropdownMenuItem, {
-    onClick: () => setShowLanguagesModal(true)
-  }, lang({
-    message: 'SMART.LANGUAGES_SELECTOR.CHOOSE_LANGUAGES'
-  }))), React.createElement(DropdownMenuSection, null, sortedLanguages.map(code => React.createElement(DropdownMenuItem, {
-    key: code,
-    isActive: code === value,
-    onClick: () => onChange(code)
-  }, getLangName(code)))))), sortedLanguages.length > 1 && React.createElement(ButtonGroup, null, React.createElement(Button, {
-    color: "secondary",
-    isDisabled: isDisabled,
-    icon: React.createElement(ArrowIcon, {
-      size: "medium",
-      direction: "left"
-    }),
-    onClick: () => {
-      const index = sortedLanguages.indexOf(value);
-      if (index > 0) {
-        onChange(sortedLanguages[index - 1]);
-      } else {
-        onChange(sortedLanguages[sortedLanguages.length - 1]);
-      }
-    }
-  }), React.createElement(Button, {
-    color: "secondary",
-    isDisabled: isDisabled,
-    icon: React.createElement(ArrowIcon, {
+      onClick: () => setShowLanguagesModal(true)
+    }), _jsx(Modal, {
       size: "medium",
-      direction: "right"
-    }),
-    onClick: () => {
-      const index = sortedLanguages.indexOf(value);
-      if (index < sortedLanguages.length - 1) {
-        onChange(sortedLanguages[index + 1]);
-      } else {
-        onChange(sortedLanguages[0]);
-      }
-    }
-  })), sortedLanguages.length <= 1 && React.createElement(Button, {
-    color: "secondary",
-    icon: React.createElement(PlusIcon, {
-      size: "medium"
-    }),
-    onClick: () => setShowLanguagesModal(true)
-  }), React.createElement(Modal, {
-    size: "medium",
-    isOpen: showLanguagesModal
-  }, React.createElement(LanguagesModal, {
-    applicationCode: applicationCode,
-    initialLanguages: languages,
-    onSubmit: langs => {
-      onChangeLanguages(langs);
-      setShowLanguagesModal(false);
-    },
-    onClose: () => {
-      setShowLanguagesModal(false);
-    }
-  })));
+      isOpen: showLanguagesModal,
+      children: _jsx(LanguagesModal, {
+        applicationCode: applicationCode,
+        initialLanguages: languages,
+        onSubmit: langs => {
+          onChangeLanguages(langs);
+          setShowLanguagesModal(false);
+        },
+        onClose: () => {
+          setShowLanguagesModal(false);
+        }
+      })
+    })]
+  });
 };

package/MediaStore/CreateVariantDrawer.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { Button, Drawer, DrawerBody, DrawerHeader, DrawerTitle, NativeInput, useToast } from '@pushwoosh/dumb-components';
 import { Columns, Vertical } from '@pushwoosh/kit-helpers';
 import { CloseIcon } from '@pushwoosh/kit-icons';
@@ -127,90 +128,138 @@ export const CreateVariantDrawer = ({
       setIsCreating(false);
     }
   };
-  return React.createElement(Drawer, {
+  return _jsxs(Drawer, {
     size: "medium",
     isOpen: isOpen,
-    onClose: onClose
-  }, React.createElement(DrawerHeader, null, React.createElement(DrawerTitle, null, React.createElement("span", null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE'
-  })), React.createElement(Button, {
-    view: "ghost",
-    color: "secondary",
-    size: "compact",
-    icon: React.createElement(CloseIcon, {
-      size: "small"
-    }),
-    "aria-label": lang({
-      message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE'
-    }),
-    onClick: onClose
-  }))), React.createElement(DrawerBody, null, original && React.createElement(Vertical, {
-    "$gap": 20
-  }, React.createElement("div", null, React.createElement(FieldLabel, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL'
-  })), React.createElement(Chips, null, RATIOS.map(item => React.createElement(Chip, {
-    key: item.value,
-    type: "button",
-    "$active": item.value === ratio,
-    onClick: () => setRatio(item.value)
-  }, item.label)))), React.createElement("div", null, React.createElement(FieldLabel, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL'
-  })), React.createElement(Columns, {
-    "$sizes": "auto 1fr",
-    "$gap": 8,
-    "$alignItems": "center"
-  }, React.createElement(Segment, null, React.createElement(SegmentItem, {
-    type: "button",
-    "$active": dimension === 'width',
-    onClick: () => setDimension('width')
-  }, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH'
-  })), React.createElement(SegmentItem, {
-    type: "button",
-    "$active": dimension === 'height',
-    onClick: () => setDimension('height')
-  }, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT'
-  }))), React.createElement(NativeInput, {
-    type: "number",
-    min: 1,
-    value: size,
-    "$isErrored": !isSizeValid,
-    onChange: event => setSize(event.target.value)
-  }))), React.createElement(Vertical, {
-    "$gap": 6
-  }, React.createElement(PreviewStage, null, React.createElement(PreviewFrame, {
-    "$ratio": selectedRatio.ar
-  }, React.createElement(PreviewImage, {
-    src: original.url,
-    alt: original.filename
-  }))), isSizeValid && React.createElement(Text, null, selectedRatio.label, ' · ', outputWidth, ' × ', outputHeight)), isJpeg && React.createElement("div", null, React.createElement(FieldLabel, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL'
-  })), React.createElement(NativeInput, {
-    type: "number",
-    min: 1,
-    max: 100,
-    value: quality,
-    "$isErrored": !isQualityValid,
-    onChange: event => setQuality(event.target.value)
-  })), ratioExists && React.createElement(Text, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS'
-  })), React.createElement(Button, {
-    color: "primary",
-    size: "field",
-    isDisabled: !isSizeValid || !isQualityValid || ratioExists,
-    isLoading: isCreating,
-    onClick: () => void handleCreate()
-  }, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON'
-  })), React.createElement("div", null, React.createElement(FieldLabel, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL'
-  })), existingVariants.length === 0 ? React.createElement(Text, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS'
-  })) : React.createElement(VariantStrip, null, existingVariants.map(variant => React.createElement(VariantThumb, {
-    key: variant.uuid
-  }, React.createElement(TileImage, {
-    src: getThumbUrl(variant),
-    alt: variant.filename
-  }), React.createElement(VariantThumbCaption, null, getRatioLabel(variant) || variant.filename))))))));
+    onClose: onClose,
+    children: [_jsx(DrawerHeader, {
+      children: _jsxs(DrawerTitle, {
+        children: [_jsx("span", {
+          children: lang({
+            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE'
+          })
+        }), _jsx(Button, {
+          view: "ghost",
+          color: "secondary",
+          size: "compact",
+          icon: _jsx(CloseIcon, {
+            size: "small"
+          }),
+          "aria-label": lang({
+            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE'
+          }),
+          onClick: onClose
+        })]
+      })
+    }), _jsx(DrawerBody, {
+      children: original && _jsxs(Vertical, {
+        "$gap": 20,
+        children: [_jsxs("div", {
+          children: [_jsx(FieldLabel, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL'
+            })
+          }), _jsx(Chips, {
+            children: RATIOS.map(item => _jsx(Chip, {
+              type: "button",
+              "$active": item.value === ratio,
+              onClick: () => setRatio(item.value),
+              children: item.label
+            }, item.value))
+          })]
+        }), _jsxs("div", {
+          children: [_jsx(FieldLabel, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL'
+            })
+          }), _jsxs(Columns, {
+            "$sizes": "auto 1fr",
+            "$gap": 8,
+            "$alignItems": "center",
+            children: [_jsxs(Segment, {
+              children: [_jsx(SegmentItem, {
+                type: "button",
+                "$active": dimension === 'width',
+                onClick: () => setDimension('width'),
+                children: lang({
+                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH'
+                })
+              }), _jsx(SegmentItem, {
+                type: "button",
+                "$active": dimension === 'height',
+                onClick: () => setDimension('height'),
+                children: lang({
+                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT'
+                })
+              })]
+            }), _jsx(NativeInput, {
+              type: "number",
+              min: 1,
+              value: size,
+              "$isErrored": !isSizeValid,
+              onChange: event => setSize(event.target.value)
+            })]
+          })]
+        }), _jsxs(Vertical, {
+          "$gap": 6,
+          children: [_jsx(PreviewStage, {
+            children: _jsx(PreviewFrame, {
+              "$ratio": selectedRatio.ar,
+              children: _jsx(PreviewImage, {
+                src: original.url,
+                alt: original.filename
+              })
+            })
+          }), isSizeValid && _jsxs(Text, {
+            children: [selectedRatio.label, ' · ', outputWidth, ' × ', outputHeight]
+          })]
+        }), isJpeg && _jsxs("div", {
+          children: [_jsx(FieldLabel, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL'
+            })
+          }), _jsx(NativeInput, {
+            type: "number",
+            min: 1,
+            max: 100,
+            value: quality,
+            "$isErrored": !isQualityValid,
+            onChange: event => setQuality(event.target.value)
+          })]
+        }), ratioExists && _jsx(Text, {
+          children: lang({
+            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS'
+          })
+        }), _jsx(Button, {
+          color: "primary",
+          size: "field",
+          isDisabled: !isSizeValid || !isQualityValid || ratioExists,
+          isLoading: isCreating,
+          onClick: () => void handleCreate(),
+          children: lang({
+            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON'
+          })
+        }), _jsxs("div", {
+          children: [_jsx(FieldLabel, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL'
+            })
+          }), existingVariants.length === 0 ? _jsx(Text, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS'
+            })
+          }) : _jsx(VariantStrip, {
+            children: existingVariants.map(variant => _jsxs(VariantThumb, {
+              children: [_jsx(TileImage, {
+                src: getThumbUrl(variant),
+                alt: variant.filename
+              }), _jsx(VariantThumbCaption, {
+                children: getRatioLabel(variant) || variant.filename
+              })]
+            }, variant.uuid))
+          })]
+        })]
+      })
+    })]
+  });
 };