@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/h5public/src/components/factory/src/BasicComponents/Spin/index.less

@@ -0,0 +1,107 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@keyframes rotate {
+  to {
+    transform: rotate(405deg);
+  }
+}
+
+@keyframes spinmove {
+  to {
+    opacity: 1;
+  }
+}
+
+@prefixCls: lcdp-spin;
+.@{prefixCls} {
+  position: absolute;
+  display: none;
+  box-sizing: border-box;
+  font-size: 14 * @hd;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  text-align: center;
+  vertical-align: middle;
+  opacity: 0;
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  &-small {
+    transform: scale(0.6);
+  }
+  &-default {
+    transform: scale(1);
+  }
+  &-large {
+    transform: scale(1.4);
+  }
+  &-spinning {
+    position: static;
+    display: inline-block;
+    opacity: 1;
+    &-dotSpin {
+      animation: rotate 1.2s infinite linear;
+    }
+  }
+  &-dotSpin {
+    position: relative;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    font-size: 20 * @hd;
+    transform: rotate(45deg);
+    &-spinDotItem {
+      position: absolute;
+      display: block;
+      width: 9 * @hd;
+      height: 9 * @hd;
+      background-color: @brand-primary;
+      border-radius: 100%;
+      transform: scale(0.75);
+      transform-origin: 50% 50%;
+      opacity: 0.3;
+      -webkit-animation: spinmove 1s infinite linear alternate;
+      animation: spinmove 1s infinite linear alternate;
+
+      &:nth-child(1) {
+        top: 0;
+        left: 0;
+      }
+
+      &:nth-child(2) {
+        top: 0;
+        right: 0;
+        animation-delay: 0.4s;
+      }
+
+      &:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        animation-delay: 0.8s;
+      }
+
+      &:nth-child(4) {
+        bottom: 0;
+        left: 0;
+        animation-delay: 1.2s;
+      }
+    }
+  }
+}
+
+.@{prefixCls}-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 15 * @hd 0;
+  &-tips {
+    display: block;
+    width: 100%;
+    padding-top: 5 * @hd;
+    color: @brand-primary;
+    text-align: center;
+    text-shadow: 0 1px 2 * @hd #fff;
+  }
+}

package/lib/h5public/src/components/factory/src/BasicComponents/Spin/index.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import type { FC } from 'react';
+import './index.less';
+
+interface SpinProps {
+  spinning: boolean;
+  // eslint-disable-next-line react/no-unused-prop-types
+  tip?: string;
+  size?: 'small' | 'large' | 'default';
+}
+
+const prefixCls = 'lcdp-spin';
+const SpinItem = (props: SpinProps) => {
+  const { spinning = true, size } = props;
+  return (
+    <div
+      className={classNames(prefixCls, {
+        [`${prefixCls}-spinning`]: spinning,
+        [`${prefixCls}-small`]: size === 'small',
+        [`${prefixCls}-large`]: size === 'large',
+        [`${prefixCls}-default`]: size === 'default',
+      })}
+    >
+      <span
+        className={classNames(
+          `${prefixCls}-dotSpin`,
+          `${prefixCls}-spinning-dotSpin`,
+        )}
+      >
+        <i className={`${prefixCls}-dotSpin-spinDotItem`} />
+        <i className={`${prefixCls}-dotSpin-spinDotItem`} />
+        <i className={`${prefixCls}-dotSpin-spinDotItem`} />
+        <i className={`${prefixCls}-dotSpin-spinDotItem`} />
+      </span>
+    </div>
+  );
+};
+
+const Spin: FC<SpinProps> = (props) => {
+  const { spinning = true, tip, children, size = 'default' } = props;
+
+  const SpinWrapper = (
+    <div className={`${prefixCls}-wrapper`}>
+      <SpinItem spinning={spinning} size={size} />
+      {tip && <div className={`${prefixCls}-wrapper-tips`}>{tip}</div>}
+    </div>
+  );
+
+  return spinning ? SpinWrapper : <>{children}</>;
+};
+
+export default Spin;

package/lib/h5public/src/components/factory/src/BasicComponents/SpinComp/index.tsx

@@ -0,0 +1,34 @@
+import { DotLoading } from 'antd-mobile-5';
+import { FC, useMemo } from 'react';
+// import { LocaleFunction } from '@lingxiteam/types';
+import useCompState from '../../utils/hooks/useCompState';
+
+interface SpinProps {
+  dataState: any;
+  // getLocale?: LocaleFunction;
+}
+
+/**
+ * 根据数据状态dataState设置返回
+ */
+const Spin: FC<SpinProps> = (props) => {
+  const { dataState } = props;
+  const { stateIcon, stateTip } = useCompState({ dataState, type: 'loading' });
+
+  const renderLoadingIcon = useMemo(() => {
+    if (stateIcon) {
+      return stateIcon;
+    }
+    return <DotLoading color="primary" />;
+  }, [stateIcon]);
+
+  return (
+    <span>
+      {renderLoadingIcon}
+      {/* <span>{stateTip || getLocale('loadingText', '加载中')}</span> */}
+      <span>{stateTip}</span>
+    </span>
+  );
+};
+
+export default Spin;

package/lib/h5public/src/components/factory/src/BasicComponents/Sticky/index.less

@@ -0,0 +1,11 @@
+.lcdp-app-sticky {
+  position: relative;
+  overflow: visible;
+  // &-baseline {
+  //   position: absolute;
+  //   z-index: 100;
+  //   width: 100px;
+  //   height: 100px;
+  //   background: "#f40"
+  // }
+}

package/lib/h5public/src/components/factory/src/BasicComponents/Sticky/index.tsx

@@ -0,0 +1,70 @@
+import { useInViewport } from 'ahooks';
+import React, { FC, useMemo, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import './index.less';
+
+const prefixCls = 'lcdp-app-sticky';
+
+interface StickyChildProps {
+  style: React.CSSProperties;
+  isSticky: boolean;
+}
+
+interface StickyProps {
+  top: React.CSSProperties['top'];
+  isOpenSticky?: boolean;
+  children: (opts: StickyChildProps) => React.ReactElement;
+}
+
+const StickyHeader: FC<StickyProps> = (props) => {
+  const { children, isOpenSticky = false, top = 0 } = props;
+  const ref = useRef(null);
+  const contentRef = useRef<Element>();
+  const [inViewPort] = useInViewport(ref);
+
+  const childParams: StickyChildProps = useMemo(() => {
+    if (!isOpenSticky) {
+      return { style: {}, isSticky: false };
+    }
+
+    if (inViewPort) {
+      return { style: {}, isSticky: false };
+    }
+
+    const dom = contentRef.current;
+
+    if (!dom) {
+      return { style: {}, isSticky: false };
+    }
+    const { x, width } = dom?.getBoundingClientRect() || {};
+
+    return {
+      style: {
+        position: 'fixed',
+        top: `${top || 0}px`,
+        left: x,
+        width,
+      },
+      isSticky: true,
+    };
+  }, [inViewPort, isOpenSticky]);
+
+  const element = React.cloneElement(children(childParams), {
+    ref: (content: React.ReactInstance | null | undefined) => {
+      // eslint-disable-next-line react/no-find-dom-node
+      const contentNode = ReactDOM.findDOMNode(content);
+      if (contentNode) {
+        contentRef.current = contentNode as Element;
+      }
+    },
+  });
+
+  return (
+    <>
+      {isOpenSticky && <div ref={ref} className={`${prefixCls}-baseline`} />}
+      {element}
+    </>
+  );
+};
+
+export default StickyHeader;

package/lib/h5public/src/components/factory/src/BasicComponents/index.ts

@@ -0,0 +1,8 @@
+export { default as DFormWrapper } from './DFormWrapper';
+export { default as Empty } from './Empty';
+export { default as FormItem } from './FormItem';
+export { default as AppForwardRef } from './ForwardRef';
+export { default as Image } from './Image';
+export { default as Spin } from './Spin';
+export { default as SpinComp } from './SpinComp';
+export { default as StickyHeader } from './Sticky';

package/lib/h5public/src/components/factory/src/BlockSelect/assets/index.tsx

@@ -0,0 +1,91 @@
+export const circleNormalIcon = (onClick: any, className: any) => {
+  return (
+    <span onClick={onClick} className={className}>
+      <svg
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        // eslint-disable-next-line react/no-unknown-property
+        p-id="6455"
+        width="64"
+        height="64"
+      >
+        <path
+          d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448S759.04 960 512 960zM512 128C300.256 128 128 300.256 128 512c0 211.744 172.256 384 384 384 211.744 0 384-172.256 384-384C896 300.256 723.744 128 512 128z"
+          // eslint-disable-next-line react/no-unknown-property
+          p-id="6456"
+          fill="#e5e5e5"
+        />
+      </svg>
+    </span>
+  );
+};
+
+export const circleSelectedIcon = (onClick: any, className: any) => {
+  return (
+    <span onClick={onClick} className={className}>
+      <svg
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        // eslint-disable-next-line react/no-unknown-property
+        p-id="6301"
+        width="64"
+        height="64"
+      >
+        <path
+          d="M512 65.984C266.08 65.984 65.984 266.08 65.984 512c0 245.952 200.064 446.016 446.016 446.016 245.952 0 446.016-200.064 446.016-446.016C958.016 266.08 757.952 65.984 512 65.984zM727.232 438.432l-256.224 259.008c-0.064 0.064-0.192 0.096-0.256 0.192-0.096 0.064-0.096 0.192-0.192 0.256-2.048 1.984-4.576 3.2-6.944 4.544-1.184 0.672-2.144 1.696-3.392 2.176-3.84 1.536-7.904 2.336-11.968 2.336-4.096 0-8.224-0.8-12.096-2.4-1.28-0.544-2.304-1.632-3.52-2.304-2.368-1.344-4.832-2.528-6.88-4.544-0.064-0.064-0.096-0.192-0.16-0.256-0.064-0.096-0.192-0.096-0.256-0.192l-126.016-129.504c-12.32-12.672-12.032-32.928 0.64-45.248 12.672-12.288 32.896-12.064 45.248 0.64l103.264 106.112 233.28-235.84c12.416-12.576 32.704-12.704 45.248-0.256C739.52 405.6 739.648 425.856 727.232 438.432z"
+          // eslint-disable-next-line react/no-unknown-property
+          p-id="6302"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  );
+};
+
+export const squareNormalIcon = (onClick: any, className: any) => {
+  return (
+    <span onClick={onClick} className={className}>
+      <svg
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        // eslint-disable-next-line react/no-unknown-property
+        p-id="6657"
+        width="64"
+        height="64"
+      >
+        <path
+          d="M832 928 192 928c-52.928 0-96-43.072-96-96L96 192c0-52.928 43.072-96 96-96l640 0c52.928 0 96 43.072 96 96l0 640C928 884.928 884.928 928 832 928zM192 160C174.368 160 160 174.368 160 192l0 640c0 17.664 14.368 32 32 32l640 0c17.664 0 32-14.336 32-32L864 192c0-17.632-14.336-32-32-32L192 160z"
+          // eslint-disable-next-line react/no-unknown-property
+          p-id="6658"
+          fill="#e5e5e5"
+        />
+      </svg>
+    </span>
+  );
+};
+
+export const squareSelectedIcon = (onClick: any, className: any) => {
+  return (
+    <span onClick={onClick} className={className}>
+      <svg
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        // eslint-disable-next-line react/no-unknown-property
+        p-id="6859"
+        width="64"
+        height="64"
+      >
+        <path
+          d="M832 96 192 96C139.072 96 96 139.072 96 192l0 640c0 52.928 43.072 96 96 96l640 0c52.928 0 96-43.072 96-96L928 192C928 139.072 884.928 96 832 96zM727.232 438.432l-256.224 259.008c-0.064 0.064-0.192 0.096-0.256 0.192-0.096 0.064-0.096 0.192-0.192 0.256-2.048 1.984-4.576 3.2-6.944 4.544-1.184 0.672-2.144 1.696-3.392 2.176-3.84 1.536-7.904 2.336-11.968 2.336-4.096 0-8.224-0.8-12.096-2.4-1.28-0.544-2.304-1.632-3.52-2.304-2.368-1.344-4.832-2.528-6.88-4.544-0.064-0.064-0.096-0.192-0.16-0.256-0.064-0.096-0.192-0.096-0.256-0.192l-126.016-129.504c-12.32-12.672-12.032-32.928 0.64-45.248 12.672-12.288 32.896-12.064 45.248 0.64l103.264 106.112 233.28-235.808c12.416-12.576 32.704-12.672 45.248-0.256C739.52 405.632 739.648 425.888 727.232 438.432z"
+          // eslint-disable-next-line react/no-unknown-property
+          p-id="6860"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  );
+};