@blocklet/launcher-layout 2.3.19 → 2.3.21

package/lib/compact-layout.js

@@ -1,28 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function CompactLayout(_ref) {
-  let {
-    children,
-    bottom,
-    onBottomFix
-  } = _ref;
-  const mainCon = (0, _react.useRef)(null);
-  const childsCon = (0, _react.useRef)(null);
-  const compactCon = (0, _react.useRef)(null);
-  const isFix = (0, _react.useRef)(null);
-  const [scrollMode, setScrollMode] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
+import { useState, useEffect, useRef } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function CompactLayout({
+  children,
+  bottom,
+  onBottomFix
+}) {
+  const mainCon = useRef(null);
+  const childsCon = useRef(null);
+  const compactCon = useRef(null);
+  const isFix = useRef(null);
+  const [scrollMode, setScrollMode] = useState(false);
+  useEffect(() => {
     let inTimer;
     const fixSize = () => {
       if (inTimer) {
@@ -66,28 +56,59 @@ function CompactLayout(_ref) {
       }
     };
   }, [onBottomFix]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+  return /*#__PURE__*/_jsxs(Container, {
     ref: mainCon,
-    className: "".concat(scrollMode ? 'scroll-mode' : ''),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${scrollMode ? 'scroll-mode' : ''}`,
+    children: [/*#__PURE__*/_jsx("div", {
       className: "compact-context",
       ref: childsCon,
       children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "fix-container",
       ref: compactCon,
       children: bottom
     })]
   });
 }
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  animation: fadein ease 0.5s;\n\n  .fix-container {\n    margin-top: auto;\n    width: 100%;\n  }\n\n  &.scroll-mode {\n    .compact-context {\n      flex: 1;\n      overflow-y: auto;\n    }\n    .fix-container {\n      margin-top: auto;\n      flex-shrink: 0;\n    }\n  }\n\n  @keyframes fadein {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n"])));
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  animation: fadein ease 0.5s;
+
+  .fix-container {
+    margin-top: auto;
+    width: 100%;
+  }
+
+  &.scroll-mode {
+    .compact-context {
+      flex: 1;
+      overflow-y: auto;
+    }
+    .fix-container {
+      margin-top: auto;
+      flex-shrink: 0;
+    }
+  }
+
+  @keyframes fadein {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
 CompactLayout.propTypes = {
-  children: _propTypes.default.any,
-  bottom: _propTypes.default.element.isRequired,
-  onBottomFix: _propTypes.default.func
+  children: PropTypes.any,
+  bottom: PropTypes.element.isRequired,
+  onBottomFix: PropTypes.func
 };
 CompactLayout.defaultProps = {
   children: [],
   onBottomFix: () => {}
 };
-var _default = exports.default = CompactLayout;
+export default CompactLayout;

package/lib/content.js

@@ -1,25 +1,72 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function Content(_ref) {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+function Content({
+  children
+}) {
+  return /*#__PURE__*/_jsx(Container, {
     children: children
   });
 }
 Content.propTypes = {
-  children: _propTypes.default.any.isRequired
+  children: PropTypes.any.isRequired
 };
-var _default = exports.default = Content;
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n\n  .center {\n    display: flex;\n    justify-content: center;\n  }\n\n  .page-title {\n    text-align: center;\n  }\n\n  .toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    .toolbar_title {\n      color: ", ";\n      font-size: 16px;\n    }\n  }\n\n  .page-footer {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 100%;\n    background: ", ";\n\n    .create-button {\n      margin-right: 32px;\n    }\n\n    & > button,\n    .button {\n      margin: 0 8px;\n    }\n\n    ", " {\n      padding: 24px;\n      & > button,\n      .button {\n        margin: 0 12px;\n        min-width: 200px;\n      }\n    }\n\n    ", " {\n      margin-top: auto;\n      padding: 16px;\n    }\n  }\n"])), props => props.theme.palette.grey['900'], props => props.theme.palette.common.white, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'));
+export default Content;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
+  .center {
+    display: flex;
+    justify-content: center;
+  }
+
+  .page-title {
+    text-align: center;
+  }
+
+  .toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .toolbar_title {
+      color: ${props => props.theme.palette.grey['900']};
+      font-size: 16px;
+    }
+  }
+
+  .page-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    background: ${props => props.theme.palette.common.white};
+
+    .create-button {
+      margin-right: 32px;
+    }
+
+    & > button,
+    .button {
+      margin: 0 8px;
+    }
+
+    ${props => props.theme.breakpoints.up('md')} {
+      padding: 24px;
+      & > button,
+      .button {
+        margin: 0 12px;
+        min-width: 200px;
+      }
+    }
+
+    ${props => props.theme.breakpoints.down('md')} {
+      margin-top: auto;
+      padding: 16px;
+    }
+  }
+`;

package/lib/context/step.js

@@ -1,20 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StepProvider = StepProvider;
-exports.useStepContext = useStepContext;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StepContext = /*#__PURE__*/(0, _react.createContext)();
+import { createContext, useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StepContext = /*#__PURE__*/createContext();
 const {
   Provider
 } = StepContext;
-const matchPath = function matchPath(path, exact) {
-  let currentPathname = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window.location.pathname.replace(/\/$/, '/');
+const matchPath = (path, exact, currentPathname = window.location.pathname.replace(/\/$/, '/')) => {
   if (!path) {
     return false;
   }
@@ -23,13 +14,12 @@ const matchPath = function matchPath(path, exact) {
   }
   return new RegExp(path).test(currentPathname);
 };
-function StepProvider(_ref) {
-  let {
-    children,
-    steps,
-    mode
-  } = _ref;
-  const [activeStepKey, setActiveStepKey] = (0, _react.useState)('');
+function StepProvider({
+  children,
+  steps,
+  mode
+}) {
+  const [activeStepKey, setActiveStepKey] = useState('');
   if (!activeStepKey && steps.length) {
     setActiveStepKey(steps[0].key);
   }
@@ -91,7 +81,7 @@ function StepProvider(_ref) {
     }
   }
   const activeStep = totalSteps.findIndex(e => e.key === activeStepKey);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (mode === 'history') {
       let stepKey = '';
       steps.some(step => {
@@ -128,19 +118,20 @@ function StepProvider(_ref) {
       return mode === 'memory' && activeStep !== 0 && nodeIndex < activeStep;
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
+  return /*#__PURE__*/_jsx(Provider, {
     value: value,
     children: children
   });
 }
 function useStepContext() {
-  return (0, _react.useContext)(StepContext);
+  return useContext(StepContext);
 }
 StepProvider.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  steps: _propTypes.default.array.isRequired,
-  mode: _propTypes.default.string
+  children: PropTypes.any.isRequired,
+  steps: PropTypes.array.isRequired,
+  mode: PropTypes.string
 };
 StepProvider.defaultProps = {
   mode: 'history'
-};
+};
+export { StepProvider, useStepContext };