@ebscn/ui 1.0.0 → 1.0.1-beta.0

package/es/components/notice-bar/notice-bar.css

@@ -0,0 +1,109 @@
+.ebscn-notice-bar {
+  --background-color: #F8F8F8;
+  --border-color: #F8F8F8;
+  --text-color: var(--ebscn-color-orange);
+  --font-size: var(--ebscn-font-size-7);
+  --icon-font-size: var(--ebscn-font-size-10);
+  --height: 40px;
+  height: var(--height);
+  box-sizing: border-box;
+  font-size: var(--font-size);
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: solid 1px var(--border-color);
+  border-left: none;
+  border-right: none;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+.ebscn-notice-bar > span[role='img'] {
+  color: var(--text-color);
+}
+.ebscn-notice-bar.ebscn-notice-bar-alert {
+  --background-color: #FFEFE5;
+  --border-color: #FFEFE5;
+  --text-color: var(--ebscn-color-orange);
+}
+.ebscn-notice-bar.ebscn-notice-bar-error {
+  --background-color: #fcece9;
+  --border-color: #fcece9;
+  --text-color: #e84225;
+}
+.ebscn-notice-bar .ebscn-notice-bar-left {
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+.ebscn-notice-bar .ebscn-notice-bar-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.ebscn-notice-bar .ebscn-notice-bar-content .ebscn-notice-bar-content-inner {
+  width: auto;
+  transition-timing-function: linear;
+  white-space: nowrap;
+}
+.ebscn-notice-bar-wrap.ebscn-notice-bar .ebscn-notice-bar-content .ebscn-notice-bar-content-inner {
+  white-space: normal;
+}
+.ebscn-notice-bar .ebscn-notice-bar-content.ebscn-notice-bar-content-slide {
+  align-items: baseline;
+}
+.ebscn-notice-bar .ebscn-notice-bar-right {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: 12px;
+  gap: 6px;
+}
+.ebscn-notice-bar-close,
+.ebscn-notice-bar-jump-right {
+  margin-right: -3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ebscn-notice-bar-close,
+.ebscn-notice-bar-right,
+.ebscn-notice-bar-left {
+  font-size: var(--ebscn-font-size-8);
+}
+.ebscn-notice-bar-close .ebscn-ui-icon,
+.ebscn-notice-bar-right .ebscn-ui-icon,
+.ebscn-notice-bar-left .ebscn-ui-icon {
+  vertical-align: -0.2em;
+}
+.ebscn-notice-bar-wrap {
+  height: auto;
+  align-items: flex-start;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  line-height: 22px;
+}
+.ebscn-notice-bar-align-center {
+  justify-content: center;
+}
+.ebscn-notice-bar-content-inner-slide {
+  flex-direction: column;
+  display: flex;
+  top: 0;
+  position: relative;
+  height: var(--height);
+}
+.ebscn-notice-bar-track-inner {
+  height: var(--height);
+  line-height: var(--height);
+  width: -webkit-min-content;
+  width: min-content;
+  position: relative;
+}
+.ebscn-notice-bar-graph-item {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}

package/es/components/notice-bar/notice-bar.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type NoticeBarProps = {
+    color?: 'default' | 'alert' | 'error';
+    delay?: number;
+    speed?: number;
+    content: ReactNode;
+    closeable?: boolean;
+    onClose?: () => void;
+    jumpable?: boolean;
+    onJump?: () => void;
+    onClick?: () => void;
+    extra?: ReactNode;
+    icon?: ReactNode;
+    wrap?: boolean;
+    alignCenter?: boolean;
+} & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;
+export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;

package/es/components/notice-bar/notice-bar.js

@@ -0,0 +1,123 @@
+import { useTimeout } from 'ahooks';
+import classNames from 'classnames';
+import React, { memo, useRef, useState } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { useMutationEffect } from '../../utils/use-mutation-effect';
+import { useResizeEffect } from '../../utils/use-resize-effect';
+import { mergeProps } from '../../utils/with-default-props';
+import { CloseIcon, NoticeIcon, RightIcon, WarningIcon } from '../icons';
+var classPrefix = "ebscn-notice-bar";
+var defaultProps = {
+  color: 'alert',
+  delay: 2000,
+  speed: 50,
+  wrap: false
+};
+export var NoticeBar = memo(function (p) {
+  var _a, _b;
+  var props = mergeProps(defaultProps, p);
+  if ((props === null || props === void 0 ? void 0 : props.icon) === undefined) {
+    props.icon = props.color === 'error' ? React.createElement(WarningIcon, {
+      className: "".concat(classPrefix, "-close-icon")
+    }) : React.createElement(NoticeIcon, {
+      className: "".concat(classPrefix, "-close-icon")
+    });
+  }
+  var containerRef = useRef(null);
+  var textRef = useRef(null);
+  var _c = useState(true),
+    visible = _c[0],
+    setVisible = _c[1];
+  var _d = useState('text'),
+    jumpIconPos = _d[0],
+    setJumpIconPos = _d[1];
+  var speed = props.speed;
+  var delayLockRef = useRef(true);
+  var animatingRef = useRef(false);
+  function start() {
+    if (delayLockRef.current || props.wrap) return;
+    var container = containerRef.current;
+    var text = textRef.current;
+    if (!container || !text) return;
+    if (container.offsetWidth >= text.offsetWidth) {
+      animatingRef.current = false;
+      text.style.removeProperty('transition-duration');
+      text.style.removeProperty('transform');
+      if (props.jumpable && !jumpIconPos) {
+        setJumpIconPos('text');
+      }
+      return;
+    }
+    if (animatingRef.current) return;
+    if (props.jumpable && jumpIconPos !== 'right') {
+      setJumpIconPos('right');
+    }
+    var initial = !text.style.transform;
+    text.style.transitionDuration = '0s';
+    if (initial) {
+      text.style.transform = 'translateX(0)';
+    } else {
+      text.style.transform = "translateX(".concat(container.offsetWidth, "px)");
+    }
+    var distance = initial ? text.offsetWidth : container.offsetWidth + text.offsetWidth;
+    animatingRef.current = true;
+    text.style.transitionDuration = "".concat(Math.round(distance / speed), "s");
+    text.style.transform = "translateX(-".concat(text.offsetWidth, "px)");
+  }
+  useTimeout(function () {
+    delayLockRef.current = false;
+    start();
+  }, props.delay);
+  useResizeEffect(function () {
+    start();
+  }, containerRef);
+  useMutationEffect(function () {
+    start();
+  }, textRef, {
+    subtree: true,
+    childList: true,
+    characterData: true
+  });
+  if (!visible) return null;
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, "".concat(classPrefix, "-").concat(props.color), (_a = {}, _a["".concat(classPrefix, "-wrap")] = props.wrap, _a)),
+    onClick: props.onClick
+  }, props.icon && React.createElement("span", {
+    className: "".concat(classPrefix, "-left")
+  }, props.icon), React.createElement("span", {
+    ref: containerRef,
+    className: classNames("".concat(classPrefix, "-content"), (_b = {}, _b["".concat(classPrefix, "-align-center")] = props.alignCenter, _b))
+  }, React.createElement("span", {
+    onTransitionEnd: function () {
+      animatingRef.current = false;
+      start();
+    },
+    ref: textRef,
+    className: "".concat(classPrefix, "-content-inner"),
+    onClick: function () {
+      var _a;
+      (_a = props.onJump) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, props.content, props.jumpable && jumpIconPos === 'text' ? React.createElement(RightIcon, {
+    className: "".concat(classPrefix, "-right-icon")
+  }) : null)), (props.closeable || props.jumpable || props.extra) && React.createElement("span", {
+    className: "".concat(classPrefix, "-right")
+  }, props.extra, props.jumpable && jumpIconPos === 'right' ? React.createElement("div", {
+    className: "".concat(classPrefix, "-jump-right"),
+    onClick: function () {
+      var _a;
+      (_a = props.onJump) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, React.createElement(RightIcon, {
+    className: "".concat(classPrefix, "-right-icon")
+  })) : null, props.closeable && React.createElement("div", {
+    className: "".concat(classPrefix, "-close"),
+    onClick: function () {
+      var _a;
+      setVisible(false);
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, React.createElement(CloseIcon, {
+    className: "".concat(classPrefix, "-close-icon")
+  })))));
+});

package/es/components/number-keyboard/number-keyboard.css

@@ -47,11 +47,11 @@
   background: #CACBD0;
 }
 .ebscn-number-keyboard-delete {
-  background: url(./images/delete.png) #e1e3e8 no-repeat center;
+  background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
   background-size: 24px 24px;
 }
 .ebscn-number-keyboard-delete:active {
-  background: url(./images/delete.png) #CACBD0 no-repeat center;
+  background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
   background-size: 24px 24px;
 }
 .ebscn-number-keyboard-confirmKey {

package/es/components/page-indicator/index.d.ts

@@ -0,0 +1,4 @@
+import './page-indicator.less';
+import { PageIndicator } from './page-indicator';
+export type { PageIndicatorProps } from './page-indicator';
+export default PageIndicator;

package/es/components/page-indicator/index.js

@@ -0,0 +1,3 @@
+import "./page-indicator.css";
+import { PageIndicator } from './page-indicator';
+export default PageIndicator;

package/es/components/page-indicator/page-indicator.css

@@ -0,0 +1,47 @@
+.ebscn-page-indicator {
+  display: flex;
+  width: auto;
+  --dot-color: #d8d8d8;
+  --active-dot-color: var(--ebscn-color-primary);
+  --dot-size: 4px;
+  --active-dot-size: 9px;
+  --dot-border-radius: 2px;
+  --active-dot-border-radius: var(--dot-border-radius);
+  --dot-spacing: 3px;
+}
+.ebscn-page-indicator-dot {
+  display: block;
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: var(--dot-border-radius);
+  background: var(--dot-color);
+}
+.ebscn-page-indicator-dot:last-child {
+  margin-right: 0;
+}
+.ebscn-page-indicator-dot-active {
+  border-radius: var(--active-dot-border-radius);
+  background: var(--active-dot-color);
+}
+.ebscn-page-indicator-color-white {
+  --dot-color: rgba(255, 255, 255, 0.5);
+  --active-dot-color: var(--ebscn-color-text-light-solid);
+}
+.ebscn-page-indicator-horizontal {
+  flex-direction: row;
+}
+.ebscn-page-indicator-horizontal .ebscn-page-indicator-dot {
+  margin-right: var(--dot-spacing);
+}
+.ebscn-page-indicator-horizontal .ebscn-page-indicator-dot-active {
+  width: var(--active-dot-size);
+}
+.ebscn-page-indicator-vertical {
+  flex-direction: column;
+}
+.ebscn-page-indicator-vertical .ebscn-page-indicator-dot {
+  margin-bottom: var(--dot-spacing);
+}
+.ebscn-page-indicator-vertical .ebscn-page-indicator-dot-active {
+  height: var(--active-dot-size);
+}

package/es/components/page-indicator/page-indicator.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type PageIndicatorProps = {
+    total: number;
+    current: number;
+    direction?: 'horizontal' | 'vertical';
+    color?: 'primary' | 'white';
+} & NativeProps<'--dot-color' | '--active-dot-color' | '--dot-size' | '--active-dot-size' | '--dot-border-radius' | '--active-dot-border-radius' | '--dot-spacing'>;
+export declare const PageIndicator: React.NamedExoticComponent<PageIndicatorProps>;

package/es/components/page-indicator/page-indicator.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import classNames from 'classnames';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-page-indicator";
+var defaultProps = {
+  color: 'primary',
+  direction: 'horizontal'
+};
+export var PageIndicator = memo(function (p) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var dots = [];
+  for (var i = 0; i < props.total; i++) {
+    dots.push(React.createElement("div", {
+      key: i,
+      className: classNames("".concat(classPrefix, "-dot"), (_a = {}, _a["".concat(classPrefix, "-dot-active")] = props.current === i, _a))
+    }));
+  }
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, "".concat(classPrefix, "-").concat(props.direction), "".concat(classPrefix, "-color-").concat(props.color))
+  }, dots));
+});

package/es/components/pdfLink/pdfLink.js

@@ -8,8 +8,7 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-import { Button } from '@ebscn/ui';
-import { Popup } from 'antd-mobile';
+import { Button, Popup } from '../..';
 import React, { useEffect, useRef, useState } from 'react';
 var id = 'pdflink';
 var PdfLink = function (props) {

package/es/components/picker/index.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import './picker.less';
+import { prompt } from './prompt';
+export type { PickerProps, PickerRef, PickerActions } from './picker';
+export type { PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from '../picker-view';
+declare const _default: import("react").NamedExoticComponent<{
+    columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
+    value?: import("../picker-view").PickerValue[] | undefined;
+    defaultValue?: import("../picker-view").PickerValue[] | undefined;
+    loading?: boolean | undefined;
+    loadingContent?: import("react").ReactNode;
+    onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+    onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    visible?: boolean | undefined;
+    title?: import("react").ReactNode;
+    confirmText?: import("react").ReactNode;
+    cancelText?: import("react").ReactNode;
+    children?: ((items: (import("../picker-view").PickerColumnItem | null)[], actions: import("./picker").PickerActions) => import("react").ReactNode) | undefined;
+    renderLabel?: ((item: import("../picker-view").PickerColumnItem) => import("react").ReactNode) | undefined;
+    mouseWheel?: boolean | undefined;
+    popupClassName?: string | undefined;
+    popupStyle?: import("react").CSSProperties | undefined;
+} & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>> & {
+    readonly type: import("react").ForwardRefExoticComponent<{
+        columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
+        value?: import("../picker-view").PickerValue[] | undefined;
+        defaultValue?: import("../picker-view").PickerValue[] | undefined;
+        loading?: boolean | undefined;
+        loadingContent?: import("react").ReactNode;
+        onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+        onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        onClose?: (() => void) | undefined;
+        closeOnMaskClick?: boolean | undefined;
+        visible?: boolean | undefined;
+        title?: import("react").ReactNode;
+        confirmText?: import("react").ReactNode;
+        cancelText?: import("react").ReactNode;
+        children?: ((items: (import("../picker-view").PickerColumnItem | null)[], actions: import("./picker").PickerActions) => import("react").ReactNode) | undefined;
+        renderLabel?: ((item: import("../picker-view").PickerColumnItem) => import("react").ReactNode) | undefined;
+        mouseWheel?: boolean | undefined;
+        popupClassName?: string | undefined;
+        popupStyle?: import("react").CSSProperties | undefined;
+    } & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+        className?: string | undefined;
+        style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
+        tabIndex?: number | undefined;
+    } & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>>;
+} & {
+    prompt: typeof prompt;
+};
+export default _default;

package/es/components/picker/index.js

@@ -0,0 +1,7 @@
+import "./picker.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Picker } from './picker';
+import { prompt } from './prompt';
+export default attachPropertiesToComponent(Picker, {
+  prompt: prompt
+});

package/es/components/picker/picker-utils.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PickerColumnItem } from '../picker-view';
+export declare const defaultRenderLabel: (item: PickerColumnItem) => import("react").ReactNode;

package/es/components/picker/picker-utils.js

@@ -0,0 +1,3 @@
+export var defaultRenderLabel = function (item) {
+  return item.label;
+};

package/es/components/picker/picker.css

@@ -0,0 +1,55 @@
+.ebscn-picker {
+  --header-button-font-size: var(--ebscn-font-size-7);
+  --title-font-size: var(--ebscn-font-size-7);
+  --item-font-size: var(--ebscn-font-size-8);
+  --item-height: 34px;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  ---item-font-size: var(--item-font-size);
+  ---item-height: var(--item-height);
+}
+.ebscn-picker .ebscn-picker-view.ebscn-picker-view {
+  --item-font-size: var(---item-font-size);
+  --item-height: var(---item-height);
+}
+.ebscn-picker-header {
+  flex-shrink: 0;
+  border-bottom: solid 1px var(--ebscn-color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 4px;
+}
+.ebscn-picker-header-button {
+  font-size: var(--header-button-font-size);
+  display: inline-block;
+  padding: 8px 8px;
+}
+.ebscn-picker-header-button-disabled,
+.ebscn-picker-header-button-disabled:active {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.ebscn-picker-header-title {
+  padding: 4px 4px;
+  font-size: var(--title-font-size);
+  color: var(--ebscn-color-text);
+  text-align: center;
+  flex: 1;
+}
+.ebscn-picker-body {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-picker-body > .ebscn-picker-view {
+  --height: 100%;
+}
+.ebscn-picker-popup .ebscn-popup-body {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}

package/es/components/picker/picker.d.ts

@@ -0,0 +1,57 @@
+import type { CSSProperties, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PopupProps } from '../popup';
+import { PickerColumn, PickerColumnItem, PickerValue, PickerValueExtend } from './index';
+export type PickerActions = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export type PickerRef = PickerActions;
+export type PickerProps = {
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[];
+    defaultValue?: PickerValue[];
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    onSelect?: (value: PickerValue[], extend: PickerValueExtend) => void;
+    onConfirm?: (value: PickerValue[], extend: PickerValueExtend) => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    closeOnMaskClick?: boolean;
+    visible?: boolean;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: (items: (PickerColumnItem | null)[], actions: PickerActions) => ReactNode;
+    renderLabel?: (item: PickerColumnItem) => ReactNode;
+    mouseWheel?: boolean;
+    popupClassName?: string;
+    popupStyle?: CSSProperties;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'forceRender' | 'destroyOnClose'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
+export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[] | undefined;
+    defaultValue?: PickerValue[] | undefined;
+    loading?: boolean | undefined;
+    loadingContent?: ReactNode;
+    onSelect?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
+    onConfirm?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    visible?: boolean | undefined;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: ((items: (PickerColumnItem | null)[], actions: PickerActions) => ReactNode) | undefined;
+    renderLabel?: ((item: PickerColumnItem) => ReactNode) | undefined;
+    mouseWheel?: boolean | undefined;
+    popupClassName?: string | undefined;
+    popupStyle?: CSSProperties | undefined;
+} & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<PickerActions>>>;