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 };