@ebscn/ui 0.0.11 → 1.0.0-beta.0

package/es/components/skeleton/skeleton.css

@@ -0,0 +1,65 @@
+.ebscn-skeleton {
+  --width: 100%;
+  --height: 0;
+  --border-radius: 3px;
+  background-color: rgba(190, 190, 190, 0.2);
+  border-radius: var(--border-radius);
+  width: var(--width);
+  height: var(--height);
+  display: block;
+}
+.ebscn-skeleton.ebscn-skeleton-animated {
+  background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
+  background-size: 400% 100%;
+  animation: ebscn-skeleton-loading 1.3s ease infinite;
+}
+.ebscn-skeleton.ebscn-skeleton-primary {
+  background-color: rgba(232, 66, 37, 0.2);
+}
+.ebscn-skeleton.ebscn-skeleton-primary.ebscn-skeleton.ebscn-skeleton-primary-animated {
+  background: linear-gradient(90deg, rgba(232, 66, 37, 0.2) 25%, rgba(231, 44, 23, 0.24) 37%, rgba(232, 66, 37, 0.2) 63%);
+  background-size: 400% 100%;
+  animation: ebscn-skeleton-loading 1.3s ease infinite;
+}
+.ebscn-skeleton.ebscn-skeleton-title {
+  --width: 45%;
+  --height: 32px;
+  --border-radius: 2px;
+  margin-bottom: 16px;
+  margin-top: 16px;
+}
+.ebscn-skeleton.ebscn-skeleton-circle {
+  --width: 18px;
+  height: var(--width);
+  border-radius: var(--width);
+}
+.ebscn-skeleton.ebscn-skeleton-img {
+  --width: 100%;
+  --height: 100px;
+  --border-radius: 6px;
+  margin-bottom: 16px;
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ebscn-skeleton.ebscn-skeleton-paragraph-line {
+  --height: 18px;
+  --border-radius: 3px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.ebscn-skeleton.ebscn-skeleton-paragraph-line:last-child {
+  --width: 65%;
+}
+@keyframes ebscn-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  38% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}

package/es/components/skeleton/skeleton.d.ts

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type SkeletonProps = {
+    animated?: boolean;
+} & NativeProps<'--width' | '--height' | '--border-radius'>;
+export declare const Skeleton: FC<SkeletonProps>;
+export type SkeletonPrimaryProps = {
+    animated?: boolean;
+} & NativeProps<'--width' | '--height' | '--border-radius'>;
+export declare const SkeletonPrimary: FC<SkeletonPrimaryProps>;
+export type SkeletonTitleProps = {
+    animated?: boolean;
+} & NativeProps;
+export declare const SkeletonTitle: FC<SkeletonTitleProps>;
+export type SkeletonCircleProps = {
+    animated?: boolean;
+} & NativeProps<'--width'>;
+export declare const SkeletonCircle: FC<SkeletonCircleProps>;
+export type SkeletonImgProps = {
+    animated?: boolean;
+    icon?: boolean;
+    defaultIconSize?: number;
+} & NativeProps;
+export declare const SkeletonImg: FC<SkeletonImgProps>;
+export type SkeletonParagraphProps = {
+    animated?: boolean;
+    lineCount?: number;
+} & NativeProps;
+export declare const SkeletonParagraph: FC<SkeletonParagraphProps>;

package/es/components/skeleton/skeleton.js

@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import React from 'react';
+import { generateIntArray } from '../../utils/generate-int-array';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import GdlogoIcon from '../icons/gdlogo-icon';
+var classPrefix = 'ebscn-skeleton';
+export var Skeleton = function (props) {
+  var _a;
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, (_a = {}, _a["".concat(classPrefix, "-animated")] = props.animated === false ? false : true, _a))
+  }));
+};
+export var SkeletonPrimary = function (props) {
+  var _a;
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, "".concat(classPrefix, "-primary"), (_a = {}, _a["".concat(classPrefix, "-primary-animated")] = props.animated === false ? false : true, _a))
+  }));
+};
+export var SkeletonTitle = function (props) {
+  return withNativeProps(props, React.createElement(Skeleton, {
+    animated: props.animated,
+    className: "".concat(classPrefix, "-title")
+  }));
+};
+export var SkeletonCircle = function (props) {
+  return withNativeProps(props, React.createElement(Skeleton, {
+    animated: props.animated,
+    className: "".concat(classPrefix, "-circle")
+  }));
+};
+export var SkeletonImg = function (props) {
+  var _a;
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, "".concat(classPrefix, "-img"), (_a = {}, _a["".concat(classPrefix, "-animated")] = props.animated === false ? false : true, _a))
+  }, (props === null || props === void 0 ? void 0 : props.icon) ? props === null || props === void 0 ? void 0 : props.icon : React.createElement(GdlogoIcon, {
+    style: {
+      fontSize: "".concat((props === null || props === void 0 ? void 0 : props.defaultIconSize) || 40, "px")
+    }
+  })));
+};
+var defaultSkeletonParagraphProps = {
+  lineCount: 3
+};
+export var SkeletonParagraph = function (p) {
+  var props = mergeProps(defaultSkeletonParagraphProps, p);
+  var keys = generateIntArray(1, props.lineCount);
+  var node = React.createElement("div", {
+    className: "".concat(classPrefix, "-paragraph")
+  }, keys.map(function (key) {
+    return React.createElement(Skeleton, {
+      key: key,
+      animated: props.animated,
+      className: "".concat(classPrefix, "-paragraph-line")
+    });
+  }));
+  return withNativeProps(props, node);
+};

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

@@ -0,0 +1,4 @@
+import './space.less';
+import { Space } from './space';
+export type { SpaceProps } from './space';
+export default Space;

package/es/components/space/index.js

@@ -0,0 +1,3 @@
+import "./space.css";
+import { Space } from './space';
+export default Space;

package/es/components/space/space.css

@@ -0,0 +1,70 @@
+.ebscn-space-item {
+  flex: none;
+}
+.ebscn-space {
+  display: inline-flex;
+  --gap: 8px;
+  --gap-vertical: var(--gap);
+  --gap-horizontal: var(--gap);
+}
+.ebscn-space-vertical {
+  flex-direction: column;
+}
+.ebscn-space-vertical > .ebscn-space-item {
+  margin-bottom: var(--gap-vertical);
+}
+.ebscn-space-vertical > .ebscn-space-item:last-child {
+  margin-bottom: 0;
+}
+.ebscn-space-horizontal {
+  flex-direction: row;
+}
+.ebscn-space-horizontal > .ebscn-space-item {
+  margin-right: var(--gap-horizontal);
+}
+.ebscn-space-horizontal > .ebscn-space-item:last-child {
+  margin-right: 0;
+}
+.ebscn-space-horizontal.ebscn-space-wrap {
+  flex-wrap: wrap;
+  margin-bottom: calc(var(--gap-vertical) * -1);
+}
+.ebscn-space-horizontal.ebscn-space-wrap > .ebscn-space-item {
+  padding-bottom: var(--gap-vertical);
+}
+.ebscn-space.ebscn-space-block {
+  display: flex;
+}
+.ebscn-space-align-center {
+  align-items: center;
+}
+.ebscn-space-align-start {
+  align-items: flex-start;
+}
+.ebscn-space-align-end {
+  align-items: flex-end;
+}
+.ebscn-space-align-baseline {
+  align-items: baseline;
+}
+.ebscn-space-justify-center {
+  justify-content: center;
+}
+.ebscn-space-justify-start {
+  justify-content: flex-start;
+}
+.ebscn-space-justify-end {
+  justify-content: flex-end;
+}
+.ebscn-space-justify-between {
+  justify-content: space-between;
+}
+.ebscn-space-justify-around {
+  justify-content: space-around;
+}
+.ebscn-space-justify-evenly {
+  justify-content: space-evenly;
+}
+.ebscn-space-justify-stretch {
+  justify-content: stretch;
+}

package/es/components/space/space.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type SpaceProps = {
+    direction?: 'horizontal' | 'vertical';
+    align?: 'start' | 'end' | 'center' | 'baseline';
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
+    wrap?: boolean;
+    block?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: ReactNode;
+} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
+export declare const Space: FC<SpaceProps>;

package/es/components/space/space.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-space";
+var defaultProps = {
+  direction: 'horizontal'
+};
+export var Space = function (p) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var direction = props.direction,
+    onClick = props.onClick;
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, (_a = {}, _a["".concat(classPrefix, "-wrap")] = props.wrap, _a["".concat(classPrefix, "-block")] = props.block, _a["".concat(classPrefix, "-").concat(direction)] = true, _a["".concat(classPrefix, "-align-").concat(props.align)] = !!props.align, _a["".concat(classPrefix, "-justify-").concat(props.justify)] = !!props.justify, _a)),
+    onClick: onClick
+  }, React.Children.map(props.children, function (child) {
+    return child !== null && child !== undefined && React.createElement("div", {
+      className: "".concat(classPrefix, "-item")
+    }, child);
+  })));
+};

package/es/components/squared-grid/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './squared-grid.less';
+export type { SquaredGridItemProps, SquaredGridProps } from './squared-grid';
+declare const _default: import("react").FC<import("./squared-grid").SquaredGridProps> & {
+    Item: import("react").FC<import("./squared-grid").SquaredGridItemProps>;
+};
+export default _default;

package/es/components/squared-grid/index.js

@@ -0,0 +1,6 @@
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { SquaredGrid, SquaredGridItem } from './squared-grid';
+import "./squared-grid.css";
+export default attachPropertiesToComponent(SquaredGrid, {
+  Item: SquaredGridItem
+});

package/es/components/squared-grid/squared-grid.css

@@ -0,0 +1,30 @@
+.ebscn-squared-grid {
+  --flex-basic: 20%;
+  --icon-size: 32px;
+  --item-flex-direction: column;
+  --row-gap: 6px;
+}
+.ebscn-squared-grid-page {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: var(--row-gap);
+}
+.ebscn-squared-grid-item {
+  flex: 0 0 var(--flex-basic);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: var(--item-flex-direction);
+}
+.ebscn-squared-grid-item-icon {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  font-size: var(--icon-size);
+  margin: 5px;
+}
+.ebscn-squared-grid-item-label {
+  font-size: var(--ebscn-font-size-5);
+}
+.ebscn-squared-grid.ebscn-squared-grid.ebscn-squared-grid-page {
+  padding-bottom: 20px;
+}

package/es/components/squared-grid/squared-grid.d.ts

@@ -0,0 +1,17 @@
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PageIndicatorProps } from '../page-indicator';
+export type SquaredGridProps = {
+    maxColumns?: number;
+    maxRow?: number;
+    children?: ReactNode;
+    indicatorProps?: Pick<PageIndicatorProps, 'color' | 'style' | 'className'>;
+} & NativeProps<'--row-gap' | '--icon-size'>;
+export declare const SquaredGrid: FC<SquaredGridProps>;
+export type SquaredGridItemProps = {
+    icon: ReactNode;
+    label?: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+} & NativeProps;
+export declare const SquaredGridItem: FC<SquaredGridItemProps>;

package/es/components/squared-grid/squared-grid.js

@@ -0,0 +1,82 @@
+import { Swiper } from '../..';
+import classnames from 'classnames';
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-squared-grid";
+var defaultProps = {
+  maxColumns: 5,
+  maxRow: 2,
+  indicatorProps: {
+    style: {
+      '--active-dot-color': 'var(--ebscn-color-primary, #e84225)',
+      '--dot-color': '#d8d8d8'
+    }
+  }
+};
+var chunkArray = function (array, chunkSize) {
+  var index = 0;
+  var chunks = [];
+  while (index < array.length) {
+    chunks.push(array.slice(index, index + chunkSize));
+    index += chunkSize;
+  }
+  return chunks;
+};
+export var SquaredGrid = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var maxColumns = props.maxColumns,
+    maxRow = props.maxRow,
+    indicatorProps = props.indicatorProps;
+  var children = React.Children.toArray(props === null || props === void 0 ? void 0 : props.children);
+  var pageSize = maxColumns * maxRow;
+  var overPage = pageSize < children.length;
+  var style = {
+    '--flex': "".concat(100 / maxColumns, "%")
+  };
+  var renderSwiperItems = function () {
+    var pages = chunkArray(children, pageSize);
+    return React.createElement(Swiper, {
+      style: {
+        '--track-padding': '0 0 15px'
+      },
+      autoplay: false,
+      indicatorProps: indicatorProps,
+      loop: false
+    }, pages.map(function (items, index) {
+      return React.createElement(Swiper.Item, {
+        key: index
+      }, React.createElement("div", {
+        className: classnames("".concat(classPrefix, "-page"), "".concat(classPrefix, "-page-swiper")),
+        style: style
+      }, items));
+    }));
+  };
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    style: style
+  }, overPage ? renderSwiperItems() : React.createElement("div", {
+    className: "".concat(classPrefix, "-page"),
+    style: style
+  }, children)));
+};
+export var SquaredGridItem = function (p) {
+  var props = mergeProps({
+    label: '功能名称',
+    icon: ''
+  }, p);
+  return withNativeProps(props, React.createElement("div", {
+    className: "".concat(classPrefix, "-item"),
+    onClick: props.onClick
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-item-icon")
+  }, withNativeProps({
+    style: {
+      width: 'var(--icon-size)',
+      height: 'var(--icon-size)',
+      fontSize: 'var(--icon-size)'
+    }
+  }, props.icon)), React.createElement("div", {
+    className: "".concat(classPrefix, "-item-label")
+  }, props.label)));
+};

package/es/components/stock-count-keyboard/index.d.ts

@@ -0,0 +1,4 @@
+import "./stock-count-keyboard.less";
+import { StockCountKeyboard } from "./stock-count-keyboard";
+export type { StockCountKeyboardProps } from "./stock-count-keyboard";
+export default StockCountKeyboard;

package/es/components/stock-count-keyboard/index.js

@@ -0,0 +1,3 @@
+import "./stock-count-keyboard.css";
+import { StockCountKeyboard } from "./stock-count-keyboard";
+export default StockCountKeyboard;

package/es/components/stock-count-keyboard/stock-count-keyboard.css

@@ -0,0 +1,74 @@
+.ebscn-stock-count-keyboard {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  transform: translateY(101%);
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 216px;
+  transition: all 0.5s;
+  align-content: flex-start;
+}
+.ebscn-stock-count-keyboard :last-child {
+  background: var(--ebscn-color-primary);
+  color: var(--ebscn-color-background);
+}
+.ebscn-stock-count-keyboard-key {
+  width: 20%;
+  height: 54px;
+  text-align: center;
+  line-height: 54px;
+  font-size: 24px;
+  color: var(--ebscn-color-text-dark-solid);
+  font-weight: 300;
+  box-shadow: 0 0 0 1px #cccccc;
+  background: var(--ebscn-color-background);
+}
+.ebscn-stock-count-keyboard-key:active {
+  width: 20%;
+  height: 54px;
+  text-align: center;
+  font-size: 24px;
+  color: var(--ebscn-color-text-dark-solid);
+  font-weight: 300;
+  box-shadow: 0 0 0 1px #cccccc;
+  background: var(--ebscn-color-border);
+}
+.ebscn-stock-count-keyboard-option {
+  font-size: var(--ebscn-font-size-11);
+  background: #e1e3e8;
+}
+.ebscn-stock-count-keyboard-option:active {
+  font-size: var(--ebscn-font-size-11);
+  background: #CACBD0;
+}
+.ebscn-stock-count-keyboard-delete {
+  background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
+  background-size: 24px 24px;
+}
+.ebscn-stock-count-keyboard-delete:active {
+  background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
+  background-size: 24px 24px;
+}
+.ebscn-stock-count-keyboard-confirmKey {
+  background-color: var(--ebscn-color-primary);
+  width: 20%;
+  height: 54px;
+  line-height: 54px;
+  text-align: center;
+  font-size: var(--ebscn-font-size-11);
+  color: var(--ebscn-color-text-dark-solid);
+  font-weight: 300;
+  box-shadow: 0 0 0 1px #cccccc;
+}
+.ebscn-stock-count-keyboard-confirmKey:active {
+  background-color: #D03B21;
+  color: var(--ebscn-color-background);
+}
+@supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
+  .keyboard {
+    height: calc(216px + env(safe-area-inset-bottom));
+    height: calc(216px + constant(safe-area-inset-bottom));
+  }
+}

package/es/components/stock-count-keyboard/stock-count-keyboard.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { NativeProps } from '../../utils/native-props';
+export type StockCountKeyboardProps = {
+    visible?: boolean;
+    onInput: Function;
+    onDelete: Function;
+    onConfirm: Function;
+} & NativeProps;
+export declare function StockCountKeyboard(p: StockCountKeyboardProps): JSX.Element;

package/es/components/stock-count-keyboard/stock-count-keyboard.js

@@ -0,0 +1,74 @@
+import cns from "classnames";
+import { useEffect, useRef } from "react";
+import React from "react";
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = 'ebscn-stock-count-keyboard';
+var defaultProps = {
+  visible: false
+};
+export function StockCountKeyboard(p) {
+  var keyboardRef = useRef(null);
+  var props = mergeProps(defaultProps, p);
+  var visible = props.visible,
+    onInput = props.onInput,
+    onConfirm = props.onConfirm,
+    onDelete = props.onDelete;
+  var keys = ['全部', 1, 2, 3, 'X', '1/2', 4, 5, 6, '+100', '1/3', 7, 8, 9, '-100', '1/4', '00', 0, '', '确定'];
+  var hideTimer = useRef(null);
+  var appearTimer = useRef(null);
+  var lastVisible = useRef(null);
+  var keyFlag = useRef(0);
+  useEffect(function () {
+    if (!visible) {
+      if (lastVisible.current) {
+        // 键盘已实例化，调用隐藏即可
+        hideKeyBoard();
+      }
+      // 未实例化，为初始化，不需处理
+    } else {
+      showKeyBoard();
+      lastVisible.current = visible; // 记录当前键盘状态
+    }
+  }, [visible]);
+  function hideKeyBoard() {
+    keyboardRef.current.style.transform = 'translateY(100%)';
+    if (appearTimer.current) clearTimeout(appearTimer.current);
+    if (!hideTimer.current) {
+      hideTimer.current = setTimeout(function () {
+        keyboardRef.current.style.display = 'none';
+      }, 500);
+    }
+  }
+  function showKeyBoard() {
+    keyboardRef.current.style.display = '';
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    appearTimer.current = setTimeout(function () {
+      keyboardRef.current.style.transform = 'translateY(0)';
+    }, 20);
+  }
+  function onKeyPress(key) {
+    switch (key) {
+      case 'X':
+        return onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+      case '确定':
+        return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+      default:
+        return onInput === null || onInput === void 0 ? void 0 : onInput(key);
+    }
+  }
+  return withNativeProps(props, React.createElement("div", {
+    ref: keyboardRef,
+    className: "".concat(classPrefix)
+  }, keys.map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: cns(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, item !== 'X' ? item : '');
+  })));
+}

package/es/components/stock-keyboard/index.d.ts

@@ -0,0 +1,4 @@
+import "./stock-keyboard.less";
+import { StockKeyboard } from "./stock-keyboard";
+export type { StockKeyboardProps } from "./stock-keyboard";
+export default StockKeyboard;

package/es/components/stock-keyboard/index.js

@@ -0,0 +1,3 @@
+import "./stock-keyboard.css";
+import { StockKeyboard } from "./stock-keyboard";
+export default StockKeyboard;