@lingxiteam/ebe-utils 0.5.6 → 0.5.7

package/lib/public/src/components/pcfactory/src/Divider/components/CenterTabDivider/index.tsx

@@ -0,0 +1,77 @@
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+
+interface CenterTabDividerProps {
+  showTitle?: boolean;
+  dividerText?: string;
+  titleStyle?: React.CSSProperties;
+  className?: string;
+  dividerColor?: string;
+  customStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+}
+
+const dividerClsPrefix = 'ued-divider-centerTab';
+
+const CenterTabDivider: React.FC<CenterTabDividerProps> = (props) => {
+  const {
+    showTitle,
+    dividerText,
+    titleStyle,
+    className,
+    dividerColor = '',
+    style,
+    customStyle,
+    ...restProps
+  } = props;
+  // 高度需为px 分割线的样式才会生效
+  const dividerHeight = useMemo(() => {
+    const heigth = `${style?.height}`;
+    if (heigth && heigth?.match('px')) {
+      return heigth;
+    }
+    // 默认值
+    return '32px';
+  }, [style?.height]);
+  return (
+    <div
+      style={{ ...style, ...customStyle, height: dividerHeight }}
+      className={classnames(dividerClsPrefix, className)}
+      {...restProps}
+    >
+      <div
+        className={`${dividerClsPrefix}-bg`}
+        style={{ backgroundColor: dividerColor }}
+      />
+      <div className={`${dividerClsPrefix}-center`}>
+        <div
+          className={`${dividerClsPrefix}-center-label`}
+          style={{
+            ...titleStyle,
+            backgroundColor: dividerColor,
+            lineHeight: dividerHeight,
+          }}
+        >
+          {showTitle && dividerText ? <span>{dividerText}</span> : null}
+        </div>
+        <div
+          className={`${dividerClsPrefix}-center-left-triangle`}
+          style={{ backgroundColor: dividerColor }}
+        />
+        <div
+          className={`${dividerClsPrefix}-center-left-border`}
+          style={{ backgroundColor: dividerColor }}
+        />
+        <div
+          className={`${dividerClsPrefix}-center-rigth-triangle`}
+          style={{ backgroundColor: dividerColor }}
+        />
+        <div
+          className={`${dividerClsPrefix}-center-rigth-border`}
+          style={{ backgroundColor: dividerColor }}
+        />
+      </div>
+    </div>
+  );
+};
+export default CenterTabDivider;

package/lib/public/src/components/pcfactory/src/Divider/components/LeftCardDivider/index.tsx

@@ -0,0 +1,87 @@
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+
+interface LeftCardDividerProps {
+  showTitle?: boolean;
+  dividerText?: string;
+  titleStyle?: React.CSSProperties;
+  className?: string;
+  dividerColor?: string;
+  customStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+}
+
+const dividerClsPrefix = 'ued-divider-leftCard';
+
+const LeftCardDivider: React.FC<LeftCardDividerProps> = (props) => {
+  const {
+    showTitle,
+    dividerText,
+    titleStyle,
+    className,
+    dividerColor = '',
+    style,
+    customStyle,
+    ...restProps
+  } = props;
+  // 高度需为px 分割线的样式才会生效
+  const dividerHeight = useMemo(() => {
+    const heigth = style?.height ? `${style?.height}` : '';
+    if (heigth && heigth?.match('px')) {
+      return heigth;
+    }
+    // 默认值
+    return '32px';
+  }, [style?.height]);
+  const triangleLeftWidth = useMemo(() => {
+    if (dividerHeight?.match('px')) {
+      const _height: number = parseInt(dividerHeight.split('px')[0], 10);
+      return _height / 2.747; // tan(70°)
+    }
+    return 12;
+  }, [dividerHeight]);
+  return (
+    <div
+      style={{ ...style, ...customStyle, height: dividerHeight }}
+      className={classnames(dividerClsPrefix, className)}
+      {...restProps}
+    >
+      <div
+        className={`${dividerClsPrefix}-lable`}
+        style={{
+          ...titleStyle,
+          backgroundColor: dividerColor,
+          lineHeight: dividerHeight,
+        }}
+      >
+        <div className={`${dividerClsPrefix}-lable-text`}>
+          {showTitle && dividerText ? dividerText : ''}
+        </div>
+      </div>
+      <div
+        className={`${dividerClsPrefix}-parallelogram1`}
+        style={{ backgroundColor: dividerColor }}
+      />
+      <div
+        className={`${dividerClsPrefix}-triangle`}
+        style={
+          dividerColor
+            ? {
+                borderBottomWidth: dividerHeight,
+                borderBottomColor: dividerColor,
+                borderLeft: `${triangleLeftWidth}px solid transparent`,
+              }
+            : {
+                borderBottomWidth: dividerHeight,
+                borderLeft: `${triangleLeftWidth}px solid transparent`,
+              }
+        }
+      />
+      <div
+        className={`${dividerClsPrefix}-parallelogram2`}
+        style={{ backgroundColor: dividerColor }}
+      />
+    </div>
+  );
+};
+export default LeftCardDivider;

package/lib/public/src/components/pcfactory/src/Divider/components/LeftLineDivider/index.tsx

@@ -0,0 +1,106 @@
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+
+interface LeftLineDividerProps {
+  showTitle?: boolean;
+  dividerText?: string;
+  titleStyle?: React.CSSProperties;
+  className?: string;
+  dividerColor?: string;
+  customStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+}
+
+const dividerClsPrefix = 'ued-divider-leftLine';
+
+const LeftLineDivider: React.FC<LeftLineDividerProps> = (props) => {
+  const {
+    showTitle,
+    dividerText,
+    titleStyle,
+    className,
+    dividerColor = '',
+    style,
+    customStyle,
+    ...restProps
+  } = props;
+  // 高度需为px 分割线的样式才会生效
+  const dividerHeight = useMemo(() => {
+    const heigth = style?.height ? `${style?.height}` : '';
+    if (heigth?.match('px')) {
+      const _height = parseInt(heigth?.split('px')[0], 10);
+      // 按照设计稿，标题后面3块区域和组件的高度相差10，所以最低高度应当为10
+      if (_height < 10) {
+        return '10px';
+      }
+      return style?.height;
+    }
+    // 默认值
+    return '32px;';
+  }, [style?.height]);
+  const rigthView = (classNameStr: string) => {
+    const heigth = `${dividerHeight}`;
+    const _height = heigth?.indexOf('px')
+      ? parseInt(heigth?.split('px')[0], 10) - 5
+      : 27;
+    if (classNameStr === 'triangle') {
+      return (
+        <div
+          className={`${dividerClsPrefix}-right-${classNameStr}`}
+          style={
+            dividerColor
+              ? {
+                  borderBottomColor: dividerColor,
+                  borderBottomWidth: _height,
+                }
+              : { borderBottomWidth: _height }
+          }
+        />
+      );
+    }
+    if (classNameStr === 'line') {
+      return (
+        <div
+          className={`${dividerClsPrefix}-right-${classNameStr}`}
+          style={{ borderColor: dividerColor }}
+        />
+      );
+    }
+    // 标题右侧三块区域
+    return (
+      <div
+        className={`${dividerClsPrefix}-right-${classNameStr}`}
+        style={{
+          backgroundColor: dividerColor,
+          height: _height <= 5 ? 0 : `${_height - 5}px`,
+        }}
+      />
+    );
+  };
+  return (
+    <div
+      style={{ ...style, ...customStyle, height: dividerHeight }}
+      className={classnames(dividerClsPrefix, className)}
+      {...restProps}
+    >
+      <div
+        className={`${dividerClsPrefix}-label`}
+        style={{
+          ...titleStyle,
+          backgroundColor: dividerColor,
+          lineHeight: dividerHeight,
+        }}
+      >
+        {showTitle && dividerText ? <span>{dividerText}</span> : null}
+      </div>
+      <div className={`${dividerClsPrefix}-right`}>
+        {rigthView('triangle')}
+        {rigthView('line')}
+        {rigthView('parallelogram1')}
+        {rigthView('parallelogram2')}
+        {rigthView('parallelogram3')}
+      </div>
+    </div>
+  );
+};
+export default LeftLineDivider;

package/lib/public/src/components/pcfactory/src/Divider/components/LeftTabDivider/index.tsx

@@ -0,0 +1,60 @@
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+
+interface LeftTabDividerProps {
+  showTitle?: boolean;
+  dividerText?: string;
+  titleStyle?: React.CSSProperties;
+  className?: string;
+  dividerColor?: string;
+  customStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+}
+
+const dividerClsPrefix = 'ued-divider-leftTab';
+
+const LeftTabDivider: React.FC<LeftTabDividerProps> = (props) => {
+  const {
+    showTitle,
+    dividerText,
+    titleStyle,
+    className,
+    dividerColor = '',
+    style,
+    customStyle,
+    ...restProps
+  } = props;
+  // 高度需为px 分割线的样式才会生效
+  const dividerHeight = useMemo(() => {
+    const heigth = style?.height ? `${style?.height}` : '';
+    if (heigth && heigth?.match('px')) {
+      return style?.height;
+    }
+    return '32px';
+  }, [style?.height]);
+  return (
+    <div
+      style={{ ...style, ...customStyle, height: dividerHeight }}
+      className={classnames(dividerClsPrefix, className)}
+      {...restProps}
+    >
+      <div className={`${dividerClsPrefix}-bg-wrapper`}>
+        <div
+          className={`${dividerClsPrefix}-bg-wrapper-bg`}
+          style={{ backgroundColor: dividerColor }}
+        />
+      </div>
+      <div
+        className={`${dividerClsPrefix}-lable`}
+        style={{
+          backgroundColor: dividerColor,
+          lineHeight: dividerHeight,
+          ...titleStyle,
+        }}
+      >
+        {showTitle && dividerText ? <span>{dividerText}</span> : null}
+      </div>
+    </div>
+  );
+};
+export default LeftTabDivider;

package/lib/public/src/components/pcfactory/src/Divider/components/LeftTopDivider/index.tsx

@@ -0,0 +1,55 @@
+import classnames from 'classnames';
+import React from 'react';
+
+interface LeftTopDividerProps {
+  showTitle?: boolean;
+  dividerText?: string;
+  titleStyle?: React.CSSProperties;
+  className?: string;
+  dividerColor?: string;
+  customStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+}
+
+const dividerClsPrefix = 'ued-divider-leftTop-line';
+
+const LeftTopDivider: React.FC<LeftTopDividerProps> = (props) => {
+  const {
+    showTitle,
+    dividerText,
+    titleStyle,
+    className,
+    dividerColor = '',
+    style,
+    customStyle,
+    ...restProps
+  } = props;
+  return (
+    <div
+      style={{ ...style, ...customStyle }}
+      className={classnames('ued-divider-leftTop', className)}
+      {...restProps}
+    >
+      {showTitle && dividerText ? (
+        <div style={titleStyle} className="ued-divider-leftTop-text">
+          {dividerText}
+        </div>
+      ) : null}
+      <div className={dividerClsPrefix}>
+        <div className={`${dividerClsPrefix}-bg-wrapper`}>
+          <div
+            className={`${dividerClsPrefix}-bg-wrapper-bg`}
+            style={{ borderColor: dividerColor }}
+          />
+        </div>
+        <div
+          className={`${dividerClsPrefix}-label`}
+          style={{ backgroundColor: dividerColor }}
+        >
+          {showTitle && dividerText ? <span>{dividerText}</span> : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default LeftTopDivider;

package/lib/public/src/components/pcfactory/src/Divider/components/LxDashed/index.module.less

@@ -0,0 +1,10 @@
+.dashedDivider {
+  display: flex;
+  align-items: center;
+  height: auto;
+
+  .dividerText {
+    padding: 0 8px;
+    white-space: nowrap;
+  }
+}

package/lib/public/src/components/pcfactory/src/Divider/components/LxDashed/index.tsx

@@ -0,0 +1,143 @@
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import styles from './index.module.less';
+
+interface MyDashedProps {
+  showTitle?: boolean;
+  dividerText?: string;
+  titleStyle?: React.CSSProperties;
+  dashedWidth?: number;
+  dashedMargin?: number;
+  customStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  orientation?: string;
+  className?: string;
+  dividerColor?: string; // 新增属性
+}
+
+export const dividerClsPrefix = 'ued-divider';
+
+const LxDashed: React.FC<MyDashedProps> = (props) => {
+  const {
+    showTitle,
+    dividerText,
+    dashedMargin = 4,
+    dashedWidth = 4,
+    customStyle,
+    style,
+    titleStyle,
+    orientation = 'center',
+    className,
+    dividerColor,
+    ...restProps
+  } = props;
+  // 虚线的颜色
+  const dashedColor = useMemo(() => {
+    const color =
+      dividerColor || style?.borderColor || customStyle?.borderColor || ''; // customStyle 旧数据
+    return color;
+  }, [
+    customStyle?.borderColor,
+    style?.borderColor,
+    style?.height,
+    dividerColor,
+  ]);
+  const backgroundStyle: React.CSSProperties = useMemo(() => {
+    const bWidth = dashedWidth + dashedMargin;
+    const widthPercent = `${((dashedWidth / bWidth) as any).toFixed(6) * 100}%`;
+    // const height = style?.height && String(style?.height).match('px') ? style?.height : '1px';
+    const height = '1px';
+    const curStyle = {
+      height,
+      backgroundSize: `${bWidth}px ${height}`,
+      backgroundRepeat: 'repeat-x',
+    };
+    return dashedColor
+      ? {
+          ...curStyle,
+          backgroundImage: `linear-gradient(90deg, ${dashedColor} 0%, ${dashedColor} ${widthPercent}, transparent ${widthPercent}, transparent 100%)`,
+        }
+      : {
+          ...curStyle,
+          backgroundImage: `linear-gradient(90deg, #fff 0%, #fff ${widthPercent}, transparent ${widthPercent}, transparent 100%)`,
+        };
+  }, [dashedMargin, dashedWidth, dashedColor]);
+  if (showTitle !== false && dividerText) {
+    // 显示标题
+    let leftFlex = 1;
+    let rightFlex = 1;
+    switch (orientation) {
+      case 'left':
+        leftFlex = 1;
+        rightFlex = 11;
+        break;
+      case 'center':
+        leftFlex = 1;
+        rightFlex = 1;
+        break;
+      case 'right':
+        leftFlex = 11;
+        rightFlex = 1;
+        break;
+      default:
+        break;
+    }
+    return (
+      <div
+        style={{ width: style?.width || 'auto', ...style }}
+        className={classnames(
+          dividerClsPrefix,
+          `${dividerClsPrefix}-dashed`,
+          styles.dashedDivider,
+          className,
+        )}
+        {...restProps}
+      >
+        <div
+          className={classnames(
+            `${dividerClsPrefix}-line`,
+            `${dividerClsPrefix}-line-left`,
+            dashedColor ? '' : `${dividerClsPrefix}-defautl-bg`,
+          )}
+          style={{ ...backgroundStyle, flex: leftFlex }}
+        />
+        <div
+          className={classnames(
+            `${dividerClsPrefix}-title`,
+            styles.dividerText,
+          )}
+          style={titleStyle}
+        >
+          {dividerText}
+        </div>
+        <div
+          className={classnames(
+            `${dividerClsPrefix}-line`,
+            `${dividerClsPrefix}-line-right`,
+            dashedColor ? '' : `${dividerClsPrefix}-defautl-bg`,
+          )}
+          style={{ ...backgroundStyle, flex: rightFlex }}
+        />
+      </div>
+    );
+  }
+  return (
+    <div
+      style={{ width: style?.width || 'auto', ...style }}
+      className={classnames(
+        `${dividerClsPrefix}`,
+        `${dividerClsPrefix}-solid`,
+        styles.solidDivider,
+        className,
+      )}
+      {...restProps}
+    >
+      <div
+        className={`${dividerClsPrefix}-line`}
+        style={{ height: '1px', width: '100%', ...backgroundStyle }}
+        {...restProps}
+      />
+    </div>
+  );
+};
+export default LxDashed;

package/lib/public/src/components/pcfactory/src/Divider/components/LxSolid/index.module.less

@@ -0,0 +1,10 @@
+.solidDivider {
+  display: flex;
+  align-items: center;
+  height: auto;
+
+  .dividerText {
+    padding: 0 8px;
+    white-space: nowrap;
+  }
+}

package/lib/public/src/components/pcfactory/src/Divider/components/LxSolid/index.tsx

@@ -0,0 +1,126 @@
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import styles from './index.module.less';
+
+interface LxSolidProps {
+  type?: string;
+  dividerText?: string;
+  showTitle?: boolean;
+  style?: React.CSSProperties;
+  customStyle?: React.CSSProperties; // 兼容旧数据
+  orientation?: string;
+  titleStyle?: React.CSSProperties;
+  className?: string;
+  dividerColor?: string;
+}
+
+export const dividerClsPrefix = 'ued-divider';
+
+const LxSolid: React.FC<LxSolidProps> = (props) => {
+  const {
+    type = 'horizontal',
+    dividerText,
+    showTitle,
+    style,
+    customStyle,
+    orientation,
+    titleStyle,
+    className,
+    dividerColor,
+    ...restProps
+  } = props;
+  const borderColor = useMemo(() => {
+    if (dividerColor || style?.borderColor || customStyle?.borderColor) {
+      return dividerColor || style?.borderColor || customStyle?.borderColor;
+    }
+    return '';
+  }, [style?.borderColor, customStyle?.borderColor, dividerColor]);
+  const lHeight = useMemo(() => {
+    if (style?.height && String(style?.height).match('px')) {
+      return style?.height;
+    }
+    if (type === 'horizontal') {
+      // 水平默认1px
+      return '1px';
+    }
+    return '20px';
+  }, [style?.height, type]);
+  if (type === 'horizontal' && dividerText && showTitle !== false) {
+    // 有文字的情况
+    let leftFlex = 1;
+    let rightFlex = 1;
+    switch (orientation) {
+      case 'left':
+        leftFlex = 1;
+        rightFlex = 11;
+        break;
+      case 'center':
+        leftFlex = 1;
+        rightFlex = 1;
+        break;
+      case 'right':
+        leftFlex = 11;
+        rightFlex = 1;
+        break;
+      default:
+        break;
+    }
+    return (
+      <div
+        style={{ ...style, ...customStyle }}
+        className={classnames(
+          `${dividerClsPrefix}`,
+          `${dividerClsPrefix}-solid`,
+          styles.solidDivider,
+          className,
+        )}
+        {...restProps}
+      >
+        <div
+          className={`${dividerClsPrefix}-line ${dividerClsPrefix}-line-left`}
+          style={{
+            flex: leftFlex,
+            backgroundColor: borderColor,
+            height: '1px',
+          }}
+        />
+        <div
+          className={classnames(
+            `${dividerClsPrefix}-title`,
+            styles.dividerText,
+          )}
+          style={titleStyle}
+        >
+          {dividerText}
+        </div>
+        <div
+          className={`${dividerClsPrefix}-line ${dividerClsPrefix}-line-right`}
+          style={{
+            flex: rightFlex,
+            backgroundColor: borderColor,
+            height: '1px',
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{ ...style, ...customStyle }}
+      className={classnames(
+        `${dividerClsPrefix}`,
+        `${dividerClsPrefix}-solid`,
+        styles.solidDivider,
+        className,
+      )}
+      {...restProps}
+    >
+      <div
+        className={`${dividerClsPrefix}-line`}
+        style={{ backgroundColor: borderColor, height: lHeight, width: '100%' }}
+      />
+    </div>
+  );
+};
+export default LxSolid;