initial commit

src/app/molecules/popup-window/PopupWindow.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './PopupWindow.scss';
+
+import Text from '../../atoms/text/Text';
+import IconButton from '../../atoms/button/IconButton';
+import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+import Header, { TitleWrapper } from '../../atoms/header/Header';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import RawModal from '../../atoms/modal/RawModal';
+
+import ChevronLeftIC from '../../../../public/res/ic/outlined/chevron-left.svg';
+
+function PWContentSelector({
+  selected, variant, iconSrc,
+  type, onClick, children,
+}) {
+  const pwcsClass = selected ? ' pw-content-selector--selected' : '';
+  return (
+    <div className={`pw-content-selector${pwcsClass}`}>
+      <MenuItem
+        variant={variant}
+        iconSrc={iconSrc}
+        type={type}
+        onClick={onClick}
+      >
+        {children}
+      </MenuItem>
+    </div>
+  );
+}
+
+PWContentSelector.defaultProps = {
+  selected: false,
+  variant: 'surface',
+  iconSrc: 'none',
+  type: 'button',
+};
+
+PWContentSelector.propTypes = {
+  selected: PropTypes.bool,
+  variant: PropTypes.oneOf(['surface', 'caution', 'danger']),
+  iconSrc: PropTypes.string,
+  type: PropTypes.oneOf(['button', 'submit']),
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.string.isRequired,
+};
+
+function PopupWindow({
+  className, isOpen, title, contentTitle,
+  drawer, drawerOptions, contentOptions,
+  onRequestClose, children,
+}) {
+  const haveDrawer = drawer !== null;
+
+  return (
+    <RawModal
+      className={`${className === null ? '' : `${className} `}pw-model`}
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      size={haveDrawer ? 'large' : 'medium'}
+    >
+      <div className="pw">
+        {haveDrawer && (
+          <div className="pw__drawer">
+            <Header>
+              <IconButton size="small" src={ChevronLeftIC} onClick={onRequestClose} tooltip="Back" />
+              <TitleWrapper>
+                <Text variant="s1">{title}</Text>
+              </TitleWrapper>
+              {drawerOptions}
+            </Header>
+            <div className="pw__drawer__content__wrapper">
+              <ScrollView invisible>
+                <div className="pw__drawer__content">
+                  {drawer}
+                </div>
+              </ScrollView>
+            </div>
+          </div>
+        )}
+        <div className="pw__content">
+          <Header>
+            <TitleWrapper>
+              <Text variant="h2">{contentTitle !== null ? contentTitle : title}</Text>
+            </TitleWrapper>
+            {contentOptions}
+          </Header>
+          <div className="pw__content__wrapper">
+            <ScrollView autoHide>
+              <div className="pw__content-container">
+                {children}
+              </div>
+            </ScrollView>
+          </div>
+        </div>
+      </div>
+    </RawModal>
+  );
+}
+
+PopupWindow.defaultProps = {
+  className: null,
+  drawer: null,
+  contentTitle: null,
+  drawerOptions: null,
+  contentOptions: null,
+  onRequestClose: null,
+};
+
+PopupWindow.propTypes = {
+  className: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  contentTitle: PropTypes.string,
+  drawer: PropTypes.node,
+  drawerOptions: PropTypes.node,
+  contentOptions: PropTypes.node,
+  onRequestClose: PropTypes.func,
+  children: PropTypes.node.isRequired,
+};
+
+export { PopupWindow as default, PWContentSelector };

src/app/molecules/popup-window/PopupWindow.scss

@@ -0,0 +1,100 @@
+.pw-model {
+  --modal-height: 656px;
+  max-height: var(--modal-height) !important;
+  height: 100%;
+}
+
+.pw {
+  --popup-window-drawer-width: 312px;
+
+  width: 100%;
+  height: 100%;
+  background-color: var(--bg-surface);
+
+  display: flex;
+
+  &__drawer {
+    width: var(--popup-window-drawer-width);
+    background-color: var(--bg-surface-low);
+    border-right: 1px solid var(--bg-surface-border);
+
+    [dir=rtl] & {
+      border: {
+        right: none;
+        left: 1px solid var(--bg-surface-border);
+      }
+    }
+  }
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__drawer,
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+
+.pw__drawer__content,
+.pw__content-container {
+  padding-top: var(--sp-extra-tight);
+  padding-bottom: var(--sp-extra-loose);
+}
+.pw__drawer__content__wrapper,
+.pw__content__wrapper {
+  flex: 1;
+  min-height: 0;
+}
+
+.pw__drawer {
+  & .header {
+    padding-left: var(--sp-extra-tight);
+
+    & .ic-btn-surface:first-child {
+      margin-right: var(--sp-ultra-tight);
+    }
+
+    [dir=rtl] & {
+        padding-right: var(--sp-extra-tight);
+      & .ic-btn-surface:first-child {
+        margin-right: 0;
+        margin-left: var(--sp-ultra-tight);
+      }
+    }
+  }
+}
+
+.pw-content-selector {
+  &--selected {
+    border: 1px solid var(--bg-surface-border);
+    border-width: 1px 0;
+    background-color: var(--bg-surface);
+
+    & .context-menu__item > button {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  & .context-menu__item > button {
+    & .text {
+      color: var(--tc-surface-normal);
+    }
+    padding-left: var(--sp-normal);
+    & .ic-raw {
+      margin-right: var(--sp-tight);
+    }
+
+    [dir=rtl] & {
+      padding-right: var(--sp-normal);
+      & .ic-raw {
+        margin-right: 0;
+        margin-left: var(--sp-tight);
+      }
+    }
+  }
+}