@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/datetimePicker/index.js

@@ -0,0 +1,4 @@
+export { default as DatetimePickerV3 } from './DatetimePickerV3';
+export { default as TimeInput } from './TimeInput';
+export { default as TimePickerV2 } from './TimePickerV2';
+export { default as TimePickerStyle } from './TimePickerStyle';

package/esm/datetimePicker/provider/constant.js

@@ -0,0 +1,38 @@
+const MONTH = [{
+  number: '01',
+  text: 'Jan'
+}, {
+  number: '02',
+  text: 'Feb'
+}, {
+  number: '03',
+  text: 'Mar'
+}, {
+  number: '04',
+  text: 'Apr'
+}, {
+  number: '05',
+  text: 'May'
+}, {
+  number: '06',
+  text: 'Jun'
+}, {
+  number: '07',
+  text: 'Jul'
+}, {
+  number: '08',
+  text: 'Aug'
+}, {
+  number: '09',
+  text: 'Sep'
+}, {
+  number: '10',
+  text: 'Oct'
+}, {
+  number: '11',
+  text: 'Nov'
+}, {
+  number: '12',
+  text: 'Dec'
+}];
+export { MONTH };

package/esm/datetimePicker/subComponent/DateTimePickerContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const DateTimePicker = /*#__PURE__*/createContext(null);
+export default DateTimePicker;

package/esm/datetimePicker/utils/GMTDate.js

@@ -0,0 +1,9 @@
+import { formatDate, datetimeTFormat } from '@cashub/utils';
+const GMTDate = date => {
+  if (!date) return;
+  let newDate = new Date(datetimeTFormat(date));
+  newDate.setTime(newDate.getTime() + newDate.getTimezoneOffset() * 60 * 1000);
+  newDate = formatDate(newDate);
+  return newDate;
+};
+export default GMTDate;

package/esm/datetimePicker/utils/pad.js

@@ -0,0 +1,7 @@
+const pad = (value, length, padString) => {
+  if (!length || !padString) {
+    return value;
+  }
+  return String(value).padStart(length, padString);
+};
+export default pad;

package/esm/datetimePicker/utils/toUTC0.js

@@ -0,0 +1,7 @@
+const toUTC0 = date => {
+  if (!date) return;
+  const newDate = new Date(date);
+  newDate.setTime(newDate.getTime() + newDate.getTimezoneOffset() * 60 * 1000);
+  return newDate;
+};
+export default toUTC0;

package/esm/descriptionList/DescriptionDetail.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+const DescriptionDetail = styled.dd`
+  font-size: var(--font-h3);
+  line-height: 1.25;
+  font-weight: bold;
+  color: var(--font-on-background);
+  word-break: break-all;
+  white-space: pre-line;
+
+  > a {
+    color: var(--color-primary);
+  }
+
+  ${_ref => {
+  let {
+    fontNormal
+  } = _ref;
+  return fontNormal && 'font-weight: normal;';
+}}
+`;
+export default DescriptionDetail;

package/esm/descriptionList/DescriptionList.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+const DescriptionList = styled.dl`
+  flex: 1;
+
+  &:not(:last-child) {
+    border-right: var(--border-width) solid var(--border-color);
+    margin-right: var(--spacing);
+    padding-right: var(--spacing);
+  }
+
+  ${_ref => {
+  let {
+    invisible
+  } = _ref;
+  return invisible && 'visibility: hidden';
+}}
+`;
+export default DescriptionList;

package/esm/descriptionList/DescriptionTerm.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+const DescriptionTerm = styled.dt`
+  font-size: var(--font-h3);
+  color: var(--font-on-mute);
+  padding-bottom: var(--spacing-xs);
+`;
+export default DescriptionTerm;

package/esm/descriptionList/index.js

@@ -0,0 +1,3 @@
+export { default as DescriptionDetail } from './DescriptionDetail';
+export { default as DescriptionList } from './DescriptionList';
+export { default as DescriptionTerm } from './DescriptionTerm';

package/esm/divider/Divider.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+const Divider = styled.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;';
+}}
+`;
+export default Divider;

package/esm/divider/index.js

@@ -0,0 +1 @@
+export { default as Divider } from './Divider';

package/esm/dropdown/Dropdown.js

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import OutsideClickHandler from 'react-outside-click-handler';
+import { useCustomPopper } from '@cashub/hooks';
+import DropdownContext from './subComponent/DropdownContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Dropdown = _ref => {
+  let {
+    children,
+    fixed
+  } = _ref;
+  const [initialized, setInitialized] = useState(null);
+  const [display, setDisplay] = useState(false);
+  const [toggleElement, setToggleElement] = useState(null);
+  const [contentElement, setContentElement] = useState(null);
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = 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__*/_jsx(DropdownContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(OutsideClickHandler, {
+      onOutsideClick: () => {
+        setDisplay(false);
+      },
+      children: children
+    })
+  });
+};
+export default Dropdown;

package/esm/dropdown/DropdownButtonOption.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+const DropdownButtonOption = styled.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';
+}}
+`;
+export default DropdownButtonOption;

package/esm/dropdown/DropdownContent.js

@@ -0,0 +1,83 @@
+import { useContext, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import DropdownContext from './subComponent/DropdownContext';
+import scrollbar from '../styles/mixin/scrollbar';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DropdownContent = _ref => {
+  let {
+    children,
+    onShow,
+    onClose,
+    showScrollbar = true
+  } = _ref;
+  const {
+    display,
+    setContentElement,
+    styles,
+    attributes,
+    update
+  } = useContext(DropdownContext);
+  const [isToggle, setIsToggle] = useState(false);
+  useEffect(() => {
+    if (isToggle) {
+      if (display && onShow) {
+        onShow();
+      }
+      if (!display && onClose) {
+        onClose();
+      }
+      setIsToggle(false);
+    }
+  }, [isToggle, display, onShow, onClose]);
+  useEffect(() => {
+    setIsToggle(true);
+  }, [display]);
+
+  // rerender時不會更新位置，所以補上children讓rerender時可以更新位置
+  useEffect(() => {
+    if (update) {
+      update();
+    }
+  }, [update, children]);
+  return /*#__PURE__*/_jsx(Wrapper, {
+    ref: setContentElement,
+    $display: display,
+    style: styles.popper,
+    ...attributes.popper,
+    showScrollbar: showScrollbar,
+    children: children
+  });
+};
+const Wrapper = styled.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}
+
+  ${_ref3 => {
+  let {
+    showScrollbar
+  } = _ref3;
+  return showScrollbar && `
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: min(320px, ((50vh - 36px) - 20px) - 36px);
+
+  `;
+}}
+`;
+export default DropdownContent;

package/esm/dropdown/DropdownDivOption.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+const DropdownDivOption = styled.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);
+  }
+`;
+export default DropdownDivOption;

package/esm/dropdown/DropdownItem.js

@@ -0,0 +1,19 @@
+import { useContext, cloneElement } from 'react';
+import DropdownContext from './subComponent/DropdownContext';
+const DropdownItem = _ref => {
+  let {
+    children,
+    onClick
+  } = _ref;
+  const {
+    handleSelect
+  } = useContext(DropdownContext);
+  const handleClick = event => {
+    if (onClick) onClick(event);
+    handleSelect();
+  };
+  return /*#__PURE__*/cloneElement(children, {
+    onClick: handleClick
+  });
+};
+export default DropdownItem;

package/esm/dropdown/DropdownLinkOption.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+const DropdownLinkOption = styled(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);
+  }
+`;
+export default DropdownLinkOption;

package/esm/dropdown/DropdownToggle.js

@@ -0,0 +1,31 @@
+import { useContext, cloneElement } from 'react';
+import DropdownContext from './subComponent/DropdownContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DropdownToggle = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const {
+    display,
+    setDisplay,
+    setInitialized,
+    setToggleElement,
+    update
+  } = useContext(DropdownContext);
+  const handleToggle = () => {
+    setInitialized(true);
+    setDisplay(!display);
+    if (update) {
+      update();
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    onClick: handleToggle,
+    ...props,
+    children: /*#__PURE__*/cloneElement(children, {
+      ref: setToggleElement
+    })
+  });
+};
+export default DropdownToggle;

package/esm/dropdown/index.js

@@ -0,0 +1,11 @@
+import Dropdown from './Dropdown';
+import DropdownToggle from './DropdownToggle';
+import DropdownContent from './DropdownContent';
+export default Object.assign(Dropdown, {
+  Toggle: DropdownToggle,
+  Content: DropdownContent
+});
+export { default as DropdownItem } from './DropdownItem';
+export { default as DropdownButtonOption } from './DropdownButtonOption';
+export { default as DropdownDivOption } from './DropdownDivOption';
+export { default as DropdownLinkOption } from './DropdownLinkOption';

package/esm/dropdown/subComponent/DropdownContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const DropdownContext = /*#__PURE__*/createContext(null);
+export default DropdownContext;