@cashub/ui-elv 1.0.0

package/divider/Divider.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Divider = _styledComponents.default.hr`
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: var(--spacing-s);
+
+  ${_ref => {
+  let {
+    noMarginX
+  } = _ref;
+  return noMarginX && `
+        margin-left: 0;
+        margin-right: 0;
+      `;
+}}
+
+  ${_ref2 => {
+  let {
+    dashed
+  } = _ref2;
+  return dashed && 'border-top-style: dashed;';
+}}
+`;
+var _default = exports.default = Divider;

package/divider/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function () {
+    return _Divider.default;
+  }
+});
+var _Divider = _interopRequireDefault(require("./Divider"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dropdown/Dropdown.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+var _hooks = require("@cashub/hooks");
+var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Dropdown = _ref => {
+  let {
+    children,
+    fixed
+  } = _ref;
+  const [initialized, setInitialized] = (0, _react.useState)(null);
+  const [display, setDisplay] = (0, _react.useState)(false);
+  const [toggleElement, setToggleElement] = (0, _react.useState)(null);
+  const [contentElement, setContentElement] = (0, _react.useState)(null);
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
+    strategy: fixed ? 'fixed' : 'absolute'
+  });
+  const handleSelect = () => {
+    setDisplay(false);
+  };
+  const context = {
+    display,
+    setDisplay,
+    handleSelect,
+    setInitialized,
+    setToggleElement: initialized ? setToggleElement : null,
+    setContentElement: initialized ? setContentElement : null,
+    styles,
+    attributes,
+    state,
+    update
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContext.default.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
+      onOutsideClick: () => {
+        setDisplay(false);
+      },
+      children: children
+    })
+  });
+};
+var _default = exports.default = Dropdown;

package/dropdown/DropdownButtonOption.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DropdownButtonOption = _styledComponents.default.button`
+  display: flex;
+  padding: 12px var(--spacing-s);
+  color: var(--font-on-background);
+  background: var(--color-background2);
+  width: 100%;
+  border: none;
+  cursor: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'no-drop' : 'pointer';
+}};
+
+  &:hover {
+    ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return !disabled && 'background: var(--color-hover);';
+}}
+  }
+
+  > svg {
+    margin-right: var(--spacing-s);
+  }
+
+  ${_ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled && 'opacity: 0.5';
+}}
+`;
+var _default = exports.default = DropdownButtonOption;

package/dropdown/DropdownContent.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DropdownContent = _ref => {
+  let {
+    children,
+    onShow,
+    onClose,
+    showScrollbar = true
+  } = _ref;
+  const {
+    display,
+    setContentElement,
+    styles,
+    attributes,
+    update
+  } = (0, _react.useContext)(_DropdownContext.default);
+  const [isToggle, setIsToggle] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (isToggle) {
+      if (display && onShow) {
+        onShow();
+      }
+      if (!display && onClose) {
+        onClose();
+      }
+      setIsToggle(false);
+    }
+  }, [isToggle, display, onShow, onClose]);
+  (0, _react.useEffect)(() => {
+    setIsToggle(true);
+  }, [display]);
+
+  // rerender時不會更新位置，所以補上children讓rerender時可以更新位置
+  (0, _react.useEffect)(() => {
+    if (update) {
+      update();
+    }
+  }, [update, children]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    ref: setContentElement,
+    $display: display,
+    style: styles.popper,
+    ...attributes.popper,
+    showScrollbar: showScrollbar,
+    children: children
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  visibility: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display === true ? 'visible' : 'hidden';
+}};
+  min-width: 160px;
+  max-width: 320px;
+  border: 1px solid var(--border-color);
+  color: var(--font-on-background);
+  background: var(--color-background2);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-s) 0;
+  z-index: 20;
+  margin: 0 !important;
+
+  ${_scrollbar.default}
+
+  ${_ref3 => {
+  let {
+    showScrollbar
+  } = _ref3;
+  return showScrollbar && `
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: min(320px, ((50vh - 36px) - 20px) - 36px);
+
+  `;
+}}
+`;
+var _default = exports.default = DropdownContent;

package/dropdown/DropdownDivOption.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DropdownDivOption = _styledComponents.default.div`
+  display: flex;
+  padding: 12px var(--spacing-s);
+  color: var(--font-on-background);
+  background: var(--color-background2);
+  width: 100%;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  > svg {
+    margin-right: var(--spacing-s);
+  }
+`;
+var _default = exports.default = DropdownDivOption;

package/dropdown/DropdownItem.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DropdownItem = _ref => {
+  let {
+    children,
+    onClick
+  } = _ref;
+  const {
+    handleSelect
+  } = (0, _react.useContext)(_DropdownContext.default);
+  const handleClick = event => {
+    if (onClick) onClick(event);
+    handleSelect();
+  };
+  return /*#__PURE__*/(0, _react.cloneElement)(children, {
+    onClick: handleClick
+  });
+};
+var _default = exports.default = DropdownItem;

package/dropdown/DropdownLinkOption.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactRouterDom = require("react-router-dom");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DropdownLinkOption = (0, _styledComponents.default)(_reactRouterDom.Link)`
+  display: flex;
+  padding: 12px var(--spacing-s);
+  color: var(--font-on-background);
+  background: var(--color-background2);
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  > svg {
+    margin-right: var(--spacing-s);
+  }
+`;
+var _default = exports.default = DropdownLinkOption;

package/dropdown/DropdownToggle.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DropdownToggle = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const {
+    display,
+    setDisplay,
+    setInitialized,
+    setToggleElement,
+    update
+  } = (0, _react.useContext)(_DropdownContext.default);
+  const handleToggle = () => {
+    setInitialized(true);
+    setDisplay(!display);
+    if (update) {
+      update();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    onClick: handleToggle,
+    ...props,
+    children: /*#__PURE__*/(0, _react.cloneElement)(children, {
+      ref: setToggleElement
+    })
+  });
+};
+var _default = exports.default = DropdownToggle;

package/dropdown/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DropdownButtonOption", {
+  enumerable: true,
+  get: function () {
+    return _DropdownButtonOption.default;
+  }
+});
+Object.defineProperty(exports, "DropdownDivOption", {
+  enumerable: true,
+  get: function () {
+    return _DropdownDivOption.default;
+  }
+});
+Object.defineProperty(exports, "DropdownItem", {
+  enumerable: true,
+  get: function () {
+    return _DropdownItem.default;
+  }
+});
+Object.defineProperty(exports, "DropdownLinkOption", {
+  enumerable: true,
+  get: function () {
+    return _DropdownLinkOption.default;
+  }
+});
+exports.default = void 0;
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _DropdownToggle = _interopRequireDefault(require("./DropdownToggle"));
+var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
+var _DropdownItem = _interopRequireDefault(require("./DropdownItem"));
+var _DropdownButtonOption = _interopRequireDefault(require("./DropdownButtonOption"));
+var _DropdownDivOption = _interopRequireDefault(require("./DropdownDivOption"));
+var _DropdownLinkOption = _interopRequireDefault(require("./DropdownLinkOption"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = Object.assign(_Dropdown.default, {
+  Toggle: _DropdownToggle.default,
+  Content: _DropdownContent.default
+});

package/dropdown/subComponent/DropdownContext.js

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