@cashub/ui-elv 1.0.0

package/Tab/Tab.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _TabContext = _interopRequireDefault(require("./subComponent/TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Tab = _ref => {
+  let {
+    children,
+    selected,
+    onChange,
+    mode = 'view',
+    onTitleChange
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabContext.default.Provider, {
+    value: {
+      selected,
+      onChange,
+      mode,
+      onTitleChange
+    },
+    children: children
+  });
+};
+var _default = exports.default = Tab;

package/Tab/TabList.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _fa = require("react-icons/fa");
+var _button = require("../button");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MAX_MOVE_PIXEL = 300;
+const TabList = _ref => {
+  let {
+    children,
+    wrap = true,
+    ...props
+  } = _ref;
+  const wrapperRef = (0, _react.useRef)(null);
+  const [exceedContainerWidth, setExceedContainerWidth] = (0, _react.useState)(false);
+  const [hasPrevious, setHasPrevious] = (0, _react.useState)(false);
+  const [hasNext, setHasNext] = (0, _react.useState)(false);
+  const checkExceedContainerWidth = (0, _react.useCallback)(() => {
+    if (wrapperRef.current) {
+      const {
+        offsetWidth,
+        scrollWidth
+      } = wrapperRef.current;
+      let {
+        marginLeft
+      } = getComputedStyle(wrapperRef.current);
+      const currentMarginLeft = Math.abs(parseInt(marginLeft));
+      setHasPrevious(currentMarginLeft > 0);
+      setHasNext(scrollWidth - offsetWidth > 0);
+      setExceedContainerWidth(scrollWidth > offsetWidth - currentMarginLeft);
+    }
+  }, []);
+  const handleResize = (0, _react.useCallback)(() => {
+    checkExceedContainerWidth();
+  }, []);
+  const handleTransitionend = (0, _react.useCallback)(event => {
+    // only allow margin-left transition event
+    if (event && event.propertyName !== 'margin-left') {
+      return;
+    }
+    checkExceedContainerWidth();
+  }, []);
+  const getMovePixel = offsetWidth => {
+    // move 1/3 pixel as default
+    const defaultMovePixel = Math.ceil(offsetWidth / 3);
+    return defaultMovePixel > MAX_MOVE_PIXEL ? MAX_MOVE_PIXEL : defaultMovePixel;
+  };
+  const updateScrollPosition = marginLeft => {
+    wrapperRef.current.style.marginLeft = marginLeft;
+  };
+  const handlePrevious = () => {
+    const {
+      offsetWidth
+    } = wrapperRef.current;
+    const {
+      marginLeft
+    } = getComputedStyle(wrapperRef.current);
+    const currentMarginLeft = Math.abs(parseInt(marginLeft));
+    const availableMovePixel = currentMarginLeft;
+    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
+    if (movePixel > availableMovePixel) {
+      // exceed edge, so move to edge only
+      updateScrollPosition('0px');
+    } else {
+      updateScrollPosition(`-${currentMarginLeft - movePixel}px`);
+    }
+  };
+  const handleNext = () => {
+    const {
+      offsetWidth,
+      scrollWidth
+    } = wrapperRef.current;
+    const {
+      marginLeft
+    } = getComputedStyle(wrapperRef.current);
+    const currentMarginLeft = Math.abs(parseInt(marginLeft));
+    const availableMovePixel = scrollWidth - offsetWidth;
+    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
+    if (movePixel > availableMovePixel) {
+      // exceed edge, so move to edge only
+      updateScrollPosition(`-${currentMarginLeft + availableMovePixel}px`);
+    } else {
+      updateScrollPosition(`-${currentMarginLeft + movePixel}px`);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [wrap, children]);
+  (0, _react.useEffect)(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.addEventListener('transitionend', handleTransitionend);
+    }
+  }, [wrap]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    role: "tablist",
+    $wrap: wrap,
+    ...props,
+    children: wrap ? children : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabWrapper, {
+        ref: wrapperRef,
+        children: children
+      }), exceedContainerWidth && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Paginate, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+          "aria-label": "Previous",
+          reverse: true,
+          onClick: handlePrevious,
+          iconOnly: true,
+          disabled: !hasPrevious,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleLeft, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+          "aria-label": "Next",
+          reverse: true,
+          onClick: handleNext,
+          iconOnly: true,
+          disabled: !hasNext,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleRight, {})
+        })]
+      })]
+    })
+  });
+};
+const Container = _styledComponents.default.div`
+  position: relative;
+  border-bottom: var(--border-width) solid var(--border-color);
+  margin-bottom: var(--spacing);
+
+  ${_ref2 => {
+  let {
+    $wrap
+  } = _ref2;
+  return !$wrap && 'white-space: nowrap;';
+}}
+
+  ${_ref3 => {
+  let {
+    noMargin
+  } = _ref3;
+  return noMargin && 'margin-bottom: 0;';
+}}
+`;
+const TabWrapper = _styledComponents.default.div`
+  margin-right: calc(1rem * 2 + 10px * 4 + var(--spacing-xs) * 2);
+  overflow: hidden;
+  margin-left: 0;
+  transition: margin-left 0.3s;
+`;
+const Paginate = _styledComponents.default.div`
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  > :not(:last-child) {
+    margin-right: var(--spacing-xs);
+  }
+`;
+var _default = exports.default = TabList;

package/Tab/TabPanel.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TabContext = _interopRequireDefault(require("./subComponent/TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabPanel = _ref => {
+  let {
+    children,
+    name,
+    ...props
+  } = _ref;
+  const {
+    selected
+  } = (0, _react.useContext)(_TabContext.default);
+  const [rendered, setRendered] = (0, _react.useState)(false);
+  const tabContent = (0, _react.useMemo)(() => {
+    if (rendered) {
+      return children;
+    }
+    return null;
+  }, [rendered, children]);
+  (0, _react.useEffect)(() => {
+    if (name === selected) {
+      setRendered(true);
+    }
+  }, [selected, name]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
+    role: "tabpanel",
+    $display: selected === name,
+    ...props,
+    children: tabContent
+  });
+};
+const Panel = _styledComponents.default.div`
+  display: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'block' : 'none';
+}};
+  position: relative;
+`;
+var _default = exports.default = TabPanel;

package/Tab/TabTab.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("@cashub/utils");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TabContext = _interopRequireDefault(require("./subComponent/TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabTab = _ref => {
+  let {
+    children,
+    name,
+    title,
+    onClick,
+    ...props
+  } = _ref;
+  const {
+    selected,
+    onChange,
+    mode,
+    onTitleChange
+  } = (0, _react.useContext)(_TabContext.default);
+  const [isModify, setIsModify] = (0, _react.useState)(false);
+  const [currentTitle, setCurrentTitle] = (0, _react.useState)(title);
+  const handleClick = (0, _react.useCallback)(() => {
+    if (selected !== name) {
+      onChange(name);
+    }
+    if (onClick && typeof onClick === 'function') {
+      onClick();
+    }
+  }, [name, selected, onChange, onClick]);
+  const handleDoubleClick = () => {
+    if (mode !== 'modify') return;
+    setIsModify(true);
+  };
+  const handleBlur = () => {
+    onTitleChange(name, currentTitle);
+    setIsModify(false);
+  };
+  const handleKeyUp = event => {
+    const key = event.keyCode;
+    if (key === _utils.KEY_CODE.ENTER) {
+      onTitleChange(name, currentTitle);
+      setIsModify(false);
+    }
+  };
+  return isModify ? /*#__PURE__*/(0, _jsxRuntime.jsx)(InputTab, {
+    role: "tab",
+    type: "text",
+    value: currentTitle,
+    onChange: event => {
+      setCurrentTitle(event.target.value);
+    },
+    onBlur: handleBlur,
+    onKeyUp: handleKeyUp,
+    autoFocus: true
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonTab, {
+    role: "tab",
+    onClick: handleClick,
+    onDoubleClick: handleDoubleClick,
+    active: selected === name,
+    ...props,
+    children: children
+  });
+};
+const Tab = _styledComponents.default.div`
+  background: transparent;
+  padding: 10px var(--spacing-s);
+  border: none;
+  border-bottom: 4px solid transparent;
+`;
+const ButtonTab = (0, _styledComponents.default)(Tab).attrs({
+  as: 'button'
+})`
+  color: var(--font-on-mute);
+  transition: color 0.3s, border 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--font-on-background);
+  }
+
+  ${_ref2 => {
+  let {
+    active
+  } = _ref2;
+  return active && `
+      border-color: var(--color-primary);
+      color: var(--font-on-background);
+    `;
+}}
+`;
+const InputTab = (0, _styledComponents.default)(Tab).attrs({
+  as: 'input'
+})`
+  color: var(--font-on-background);
+  border-color: var(--color-primary);
+  outline: none;
+`;
+var _default = exports.default = TabTab;

package/Tab/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TabV2 = void 0;
+var _Tab = _interopRequireDefault(require("./Tab"));
+var _TabList = _interopRequireDefault(require("./TabList"));
+var _TabTab = _interopRequireDefault(require("./TabTab"));
+var _TabPanel = _interopRequireDefault(require("./TabPanel"));
+var _TabListV = _interopRequireDefault(require("./subComponent/TabListV2"));
+var _TabTabV = _interopRequireDefault(require("./subComponent/TabTabV2"));
+var _TabPanelV = _interopRequireDefault(require("./subComponent/TabPanelV2"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = Object.assign(_Tab.default, {
+  List: _TabList.default,
+  Tab: _TabTab.default,
+  Panel: _TabPanel.default
+});
+const TabV2Base = props => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
+    ...props
+  });
+};
+const TabV2 = exports.TabV2 = Object.assign(TabV2Base, {
+  List: _TabListV.default,
+  Tab: _TabTabV.default,
+  Panel: _TabPanelV.default
+});

package/Tab/subComponent/TabContext.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const TabContext = /*#__PURE__*/(0, _react.createContext)(null);
+var _default = exports.default = TabContext;

package/Tab/subComponent/TabListV2.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabListV2 = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    role: "tablist",
+    ...props,
+    children: children
+  });
+};
+const Container = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+var _default = exports.default = TabListV2;

package/Tab/subComponent/TabPanelV2.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TabContext = _interopRequireDefault(require("./TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabPanelV2 = _ref => {
+  let {
+    children,
+    name,
+    ...props
+  } = _ref;
+  const {
+    selected
+  } = (0, _react.useContext)(_TabContext.default);
+  const [rendered, setRendered] = (0, _react.useState)(false);
+  const tabContent = (0, _react.useMemo)(() => {
+    if (rendered) {
+      return children;
+    }
+    return null;
+  }, [rendered, children]);
+  (0, _react.useEffect)(() => {
+    if (name === selected) {
+      setRendered(true);
+    }
+  }, [selected, name]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
+    role: "tabpanel",
+    $display: selected === name,
+    ...props,
+    children: tabContent
+  });
+};
+const Panel = _styledComponents.default.div`
+  display: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'block' : 'none';
+}};
+  position: relative;
+  background: var(--color-background2);
+  border-bottom-left-radius: var(--border-radius-s);
+  border-bottom-right-radius: var(--border-radius-s);
+`;
+var _default = exports.default = TabPanelV2;

package/Tab/subComponent/TabTabV2.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TabContext = _interopRequireDefault(require("./TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabTabV2 = _ref => {
+  let {
+    children,
+    name,
+    ...props
+  } = _ref;
+  const {
+    selected,
+    onChange
+  } = (0, _react.useContext)(_TabContext.default);
+  const handleClick = (0, _react.useCallback)(() => {
+    if (selected !== name) {
+      onChange(name);
+    }
+  }, [name, selected, onChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tab, {
+    role: "tab",
+    onClick: handleClick,
+    active: selected === name,
+    ...props,
+    children: children
+  });
+};
+const Tab = _styledComponents.default.button`
+  background: transparent;
+  color: var(--font-on-mute);
+  font-weight: bold;
+  padding: 10px var(--spacing-s);
+  border: none;
+  border-top-left-radius: var(--border-radius-s);
+  border-top-right-radius: var(--border-radius-s);
+  transition:
+    color 0.3s,
+    border 0.3s;
+  cursor: pointer;
+  flex: 1;
+
+  &:hover {
+    color: var(--font-on-background);
+  }
+
+  ${_ref2 => {
+  let {
+    active
+  } = _ref2;
+  return active && `
+      background: var(--color-background2);
+      color: var(--font-on-background);
+    `;
+}}
+`;
+var _default = exports.default = TabTabV2;

package/VerticalTab/TabList.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabList = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    role: "tablist",
+    ...props,
+    children: children
+  });
+};
+const Container = _styledComponents.default.div`
+  height: 100%;
+  width: 316px;
+  background: var(--color-background2);
+  overflow-y: auto;
+`;
+var _default = exports.default = TabList;

package/VerticalTab/TabPanel.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TabContext = _interopRequireDefault(require("./subComponent/TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabPanel = _ref => {
+  let {
+    children,
+    name,
+    ...props
+  } = _ref;
+  const {
+    selected
+  } = (0, _react.useContext)(_TabContext.default);
+  const [rendered, setRendered] = (0, _react.useState)(false);
+  const tabContent = (0, _react.useMemo)(() => {
+    if (rendered) {
+      return children;
+    }
+    return null;
+  }, [rendered, children]);
+  (0, _react.useEffect)(() => {
+    if (name === selected) {
+      setRendered(true);
+    }
+  }, [selected, name]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
+    role: "tabpanel",
+    $display: selected === name,
+    ...props,
+    children: tabContent
+  });
+};
+const Panel = _styledComponents.default.div`
+  display: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'block' : 'none';
+}};
+  position: relative;
+  flex: 1;
+  padding: var(--spacing-s);
+  overflow-y: auto;
+`;
+var _default = exports.default = TabPanel;

package/VerticalTab/TabTab.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TabContext = _interopRequireDefault(require("./subComponent/TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabTab = _ref => {
+  let {
+    children,
+    name,
+    ...props
+  } = _ref;
+  const {
+    selected,
+    onChange
+  } = (0, _react.useContext)(_TabContext.default);
+  const handleClick = (0, _react.useCallback)(() => {
+    if (selected !== name) {
+      onChange(name);
+    }
+  }, [name, selected, onChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tab, {
+    role: "tab",
+    onClick: handleClick,
+    active: selected === name,
+    ...props,
+    children: children
+  });
+};
+const Tab = _styledComponents.default.button`
+  width: 100%;
+  padding: 12px var(--spacing-s);
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: var(--font-on-background);
+  transition: 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-active);
+    color: var(--color-primary);
+    font-weight: var(--font-bold);
+
+    span {
+      color: var(--color-primary);
+    }
+  }
+
+  ${_ref2 => {
+  let {
+    active
+  } = _ref2;
+  return active && `
+      background: var(--color-active);
+      color: var(--color-primary);
+      font-weight: var(--font-bold);
+
+      span {
+        color: var(--color-primary);
+      }
+    `;
+}}
+`;
+var _default = exports.default = TabTab;