@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/typography/copyable.tsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Tooltip from '../tooltip/index';
-import { cssClasses } from '@douyinfe/semi-foundation/typography/constants';
-import copy from 'copy-text-to-clipboard';
-import cls from 'classnames';
-import { noop } from '@douyinfe/semi-foundation/utils/function';
-import LocaleConsumer from '../locale/localeConsumer';
-import { IconCopy, IconTick } from '@douyinfe/semi-icons';
-import { BaseProps } from '../_base/baseComponent';
-import { Locale } from '../locale/interface';
-import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
-
-const prefixCls = cssClasses.PREFIX;
-export interface CopyableProps extends BaseProps {
-    content?: string;
-    copyTip?: React.ReactNode;
-    duration?: number;
-    forwardRef?: React.RefObject<any>;
-    successTip?: React.ReactNode;
-    onCopy?: (e: React.MouseEvent, content: string, res: boolean) => void;
-}
-interface CopyableState {
-    copied: boolean;
-    item: string;
-}
-export class Copyable extends React.PureComponent<CopyableProps, CopyableState> {
-    static propTypes = {
-        content: PropTypes.string,
-        onCopy: PropTypes.func,
-        successTip: PropTypes.node,
-        copyTip: PropTypes.node,
-        duration: PropTypes.number,
-        style: PropTypes.object,
-        className: PropTypes.string,
-    };
-
-    static defaultProps = {
-        content: '',
-        onCopy: noop,
-        duration: 3,
-        style: {},
-        className: '',
-    };
-
-    _timeId: ReturnType<typeof setTimeout>;
-
-    constructor(props: CopyableProps) {
-        super(props);
-        this.state = {
-            copied: false,
-            item: '',
-        };
-    }
-
-    componentWillUnmount() {
-        if (this._timeId) {
-            clearTimeout(this._timeId);
-            this._timeId = null;
-        }
-    }
-
-    copy = (e: React.MouseEvent) => {
-        const { content, duration, onCopy } = this.props;
-        const res = copy(content);
-        onCopy && onCopy(e, content, res);
-        this.setCopied(content, duration);
-    };
-
-    setCopied = (item: string, timer: number) => {
-        this.setState({
-            copied: true,
-            item,
-        });
-        this._timeId = setTimeout(() => {
-            this.resetCopied();
-        }, timer * 1000);
-    };
-
-    resetCopied = () => {
-        if (this._timeId) {
-            clearTimeout(this._timeId);
-            this._timeId = null;
-            this.setState({
-                copied: false,
-                item: '',
-            });
-        }
-    };
-
-    renderSuccessTip = () => {
-        const { successTip } = this.props;
-        if (typeof successTip !== 'undefined') {
-            return successTip;
-        }
-        return (
-            <LocaleConsumer componentName="Typography">
-                {(locale: Locale['Typography']) => (
-                    <span>
-                        <IconTick />
-                        {locale.copied}
-                    </span>
-                )}
-            </LocaleConsumer>
-        );
-    };
-
-    render() {
-        const { style, className, forwardRef, copyTip } = this.props;
-        const { copied } = this.state;
-        const finalCls = cls(className, {
-            [`${prefixCls}-action-copy`]: !copied,
-            [`${prefixCls}-action-copied`]: copied,
-        });
-
-        return (
-            <LocaleConsumer componentName="Typography">
-                {(locale: Locale['Typography']) => (
-                    <span style={{ marginLeft: '4px', ...style }} className={finalCls} ref={forwardRef}>
-                        {copied ? (
-                            this.renderSuccessTip()
-                        ) : (
-                            <Tooltip content={typeof copyTip !== 'undefined' ? copyTip : locale.copy}>
-                                {/* TODO: replace `a` tag with `span` in next major version
-                                NOTE: may have effect on style */}
-                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                                <a className={`${prefixCls}-action-copy-icon`}>
-                                    <IconCopy
-                                        role="button"
-                                        tabIndex={0}
-                                        onClick={this.copy}
-                                        onKeyPress={e => isEnterPress(e) && this.copy(e as any)}
-                                    />
-                                </a>
-                            </Tooltip>
-                        )}
-                    </span>
-                )}
-            </LocaleConsumer>
-        );
-    }
-}
-
-export default Copyable;

package/typography/index.tsx

@@ -1,24 +0,0 @@
-import BaseTypography from './typography';
-import Text from './text';
-import Title from './title';
-import Paragraph from './paragraph';
-
-export type TypographyType = typeof BaseTypography & {
-    Text: typeof Text;
-    Title: typeof Title;
-    Paragraph: typeof Paragraph;
-};
-
-const Typography = BaseTypography as TypographyType;
-Typography.Text = Text;
-Typography.Title = Title;
-Typography.Paragraph = Paragraph;
-
-
-export { BaseTypographyProps } from './base';
-export { CopyableProps } from './copyable';
-export { TitleProps } from './title';
-export { TextProps } from './text';
-export { ParagraphProps } from './paragraph';
-export * from './interface';
-export default Typography;

package/typography/interface.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-import { PopoverProps } from '../popover';
-import { TooltipProps } from '../tooltip';
-import { ArrayElement } from '../_base/base';
-import { strings } from '@douyinfe/semi-foundation/typography/constants';
-
-export type EllipsisPos = 'end' | 'middle';
-export type ShowTooltip = {
-    type?: string;
-    opts?: Partial<PopoverProps> & Partial<TooltipProps>;
-};
-
-export type Ellipsis = {
-    collapseText?: string;
-    collapsible?: boolean;
-    expandText?: string;
-    expandable?: boolean;
-    pos?: EllipsisPos;
-    rows?: number;
-    showTooltip?: boolean | ShowTooltip;
-    suffix?: string;
-    onExpand?: (expanded: boolean, event: React.MouseEvent<HTMLAnchorElement>) => void;
-};
-export type OmitTypographyProps = 'dangerouslySetInnerHTML';
-export type TypographyBaseType = ArrayElement<typeof strings.TYPE>;
-export type TypographyBaseSize = ArrayElement<typeof strings.SIZE>;
-export type TypographyBaseSpacing = ArrayElement<typeof strings.SPACING>;

package/typography/paragraph.tsx

@@ -1,77 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import cls from 'classnames';
-import { strings, cssClasses } from '@douyinfe/semi-foundation/typography/constants';
-import Base from './base';
-import {
-    Ellipsis,
-    TypographyBaseSize,
-    TypographyBaseSpacing,
-    TypographyBaseType,
-    OmitTypographyProps
-} from './interface';
-import { CopyableConfig, LinkType } from './title';
-
-
-type OmitParagraphProps = OmitTypographyProps;
-
-export interface ParagraphProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, OmitParagraphProps>{
-    className?: string;
-    component?: React.ElementType;
-    copyable?: CopyableConfig | boolean;
-    delete?: boolean;
-    disabled?: boolean;
-    ellipsis?: Ellipsis | boolean;
-    link?: LinkType;
-    mark?: boolean;
-    size?: TypographyBaseSize;
-    spacing?: TypographyBaseSpacing;
-    strong?: boolean;
-    style?: React.CSSProperties;
-    type?: TypographyBaseType;
-    underline?: boolean;
-}
-
-const prefixCls = cssClasses.PREFIX;
-export default class Paragraph extends PureComponent<ParagraphProps> {
-    static propTypes = {
-        copyable: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        delete: PropTypes.bool,
-        disabled: PropTypes.bool,
-        // editable: PropTypes.bool,
-        ellipsis: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        mark: PropTypes.bool,
-        link: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        underline: PropTypes.bool,
-        strong: PropTypes.bool,
-        type: PropTypes.oneOf(strings.TYPE),
-        size: PropTypes.oneOf(strings.SIZE),
-        spacing: PropTypes.oneOf(strings.SPACING),
-        style: PropTypes.object,
-        className: PropTypes.string,
-        component: PropTypes.string,
-    };
-
-    static defaultProps = {
-        copyable: false,
-        delete: false,
-        disabled: false,
-        // editable: false,
-        ellipsis: false,
-        mark: false,
-        underline: false,
-        strong: false,
-        link: false,
-        type: 'primary',
-        size: 'normal',
-        spacing: 'normal',
-        style: {},
-        className: '',
-    };
-
-    render() {
-        const { className } = this.props;
-        const paragraphCls = cls(className, `${prefixCls}-paragraph`);
-        return <Base component={'p'} {...this.props} className={paragraphCls} />;
-    }
-}

package/typography/text.tsx

@@ -1,68 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { strings } from '@douyinfe/semi-foundation/typography/constants';
-import Base from './base';
-import { Ellipsis, TypographyBaseSize, TypographyBaseType, OmitTypographyProps } from './interface';
-import { CopyableConfig, LinkType } from './title';
-
-type OmitTextProps = OmitTypographyProps;
-
-export interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, OmitTextProps> {
-    children?: React.ReactNode;
-    className?: string;
-    code?: boolean;
-    component?: React.ElementType;
-    copyable?: CopyableConfig | boolean;
-    delete?: boolean;
-    disabled?: boolean;
-    ellipsis?: Ellipsis | boolean;
-    icon?: React.ReactNode | string;
-    link?: LinkType;
-    mark?: boolean;
-    size?: TypographyBaseSize;
-    strong?: boolean;
-    style?: React.CSSProperties;
-    type?: TypographyBaseType;
-    underline?: boolean;
-}
-
-export default class Text extends PureComponent<TextProps> {
-    static propTypes = {
-        copyable: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        delete: PropTypes.bool,
-        disabled: PropTypes.bool,
-        icon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-        ellipsis: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        mark: PropTypes.bool,
-        underline: PropTypes.bool,
-        link: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        strong: PropTypes.bool,
-        type: PropTypes.oneOf(strings.TYPE),
-        size: PropTypes.oneOf(strings.SIZE),
-        style: PropTypes.object,
-        className: PropTypes.string,
-        code: PropTypes.bool,
-        component: PropTypes.string,
-    };
-
-    static defaultProps = {
-        copyable: false,
-        delete: false,
-        disabled: false,
-        icon: '',
-        // editable: false,
-        ellipsis: false,
-        mark: false,
-        underline: false,
-        strong: false,
-        link: false,
-        type: 'primary',
-        style: {},
-        size: 'normal',
-        className: '',
-    };
-
-    render() {
-        return <Base component={'span'} {...this.props} />;
-    }
-}

package/typography/title.tsx

@@ -1,74 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { strings } from '@douyinfe/semi-foundation/typography/constants';
-import Base from './base';
-import { Ellipsis, TypographyBaseType, OmitTypographyProps } from './interface';
-import { ArrayElement } from '@douyinfe/semi-foundation/utils/type';
-
-type OmitTitleProps = OmitTypographyProps;
-
-export interface CopyableConfig {
-    content?: string;
-    copyTip?: React.ReactNode;
-    successTip?: React.ReactNode;
-    onCopy?(e: React.MouseEvent, content: string, res: boolean): void;
-}
-
-export type LinkType = React.AnchorHTMLAttributes<HTMLAnchorElement> | boolean;
-
-export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, OmitTitleProps>{
-    className?: string;
-    component?: React.ElementType;
-    copyable?: CopyableConfig | boolean;
-    delete?: boolean;
-    disabled?: boolean;
-    ellipsis?: Ellipsis | boolean;
-    heading?: ArrayElement<typeof strings.HEADING>;
-    link?: LinkType;
-    mark?: boolean;
-    strong?: boolean;
-    style?: React.CSSProperties;
-    type?: TypographyBaseType;
-    underline?: boolean;
-}
-export default class Title extends PureComponent<TitleProps> {
-    static propTypes = {
-        copyable: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        delete: PropTypes.bool,
-        disabled: PropTypes.bool,
-        // editable: PropTypes.bool,
-        ellipsis: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        mark: PropTypes.bool,
-        link: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        underline: PropTypes.bool,
-        strong: PropTypes.bool,
-        type: PropTypes.oneOf(strings.TYPE),
-        heading: PropTypes.oneOf(strings.HEADING),
-        style: PropTypes.object,
-        className: PropTypes.string,
-        component: PropTypes.string,
-    };
-
-    static defaultProps = {
-        copyable: false,
-        delete: false,
-        disabled: false,
-        // editable: false,
-        ellipsis: false,
-        mark: false,
-        underline: false,
-        strong: false,
-        link: false,
-        type: 'primary',
-        heading: 1,
-        style: {},
-        className: '',
-    };
-
-    render() {
-        const { heading, ...rest } = this.props;
-        const component = strings.HEADING.indexOf(heading) !== -1 ? `h${heading}` : 'h1';
-        // Passing headings to support custom components
-        return <Base component={component as React.ElementType} heading={component} {...rest} />;
-    }
-}

package/typography/typography.tsx

@@ -1,41 +0,0 @@
-import React, { PureComponent } from 'react';
-import cls from 'classnames';
-import PropTypes from 'prop-types';
-import { cssClasses } from '@douyinfe/semi-foundation/typography/constants';
-import '@douyinfe/semi-foundation/typography/typography.scss';
-import { BaseProps } from '../_base/baseComponent';
-const prefixCls = cssClasses.PREFIX;
-interface TypographyProps extends BaseProps{
-    component?: React.ElementType;
-    forwardRef?: React.RefObject<any>;
-}
-class Typography extends PureComponent<TypographyProps> {
-    static defaultProps = {
-        component: 'article',
-        style: {},
-        className: '',
-    };
-
-    static propTypes = {
-        component: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-    };
-
-    render() {
-        const { component, className, children, forwardRef, ...rest } = this.props;
-        const Component = component;
-        const classNames = cls(prefixCls, className);
-        return (
-            <Component
-                className={classNames}
-                ref={forwardRef}
-                {...rest}
-            >
-                {children}
-            </Component>
-        );
-    }
-}
-
-export default Typography;

package/typography/util.tsx

@@ -1,140 +0,0 @@
-import ReactDOM from 'react-dom';
-import React from 'react';
-
-/**
- * The logic of JS for text truncation is referenced from antd typography
- * https://github.com/ant-design/ant-design/blob/master/components/typography/util.tsx
- * 
- * For more thinking and analysis about this function, please refer to Feishu document
- * https://bytedance.feishu.cn/docs/doccnqovjjyoKm2U5O13bj30aTh
- */
-
-let ellipsisContainer: HTMLElement;
-
-function pxToNumber(value: string) {
-    if (!value) {
-        return 0;
-    }
-    const match = value.match(/^\d*(\.\d*)?/);
-    return match ? Number(match[0]) : 0;
-}
-
-function styleToString(style: CSSStyleDeclaration): string {
-    // There are some different behavior between Firefox & Chrome.
-    // We have to handle this ourself.
-    const styleNames = Array.prototype.slice.apply(style);
-    return styleNames.map((name: string) => `${name}: ${style.getPropertyValue(name)};`).join('');
-}
-
-
-const getRenderText = (
-    originEle: HTMLElement,
-    rows: number,
-    content = '',
-    fixedContent: any[],
-    ellipsisStr: string,
-    suffix: string,
-    ellipsisPos: string
-// eslint-disable-next-line max-params
-) => {
-    if (!ellipsisContainer) {
-        ellipsisContainer = document.createElement('div');
-        ellipsisContainer.setAttribute('aria-hidden', 'true');
-        document.body.appendChild(ellipsisContainer);
-    }
-
-    // Get origin style
-    const originStyle = window.getComputedStyle(originEle);
-    const originCSS = styleToString(originStyle);
-    const lineHeight = pxToNumber(originStyle.lineHeight);
-    const maxHeight = Math.round(
-        lineHeight * (rows + 1) +
-        pxToNumber(originStyle.paddingTop) +
-        pxToNumber(originStyle.paddingBottom)
-    );
-
-    // Set shadow
-    ellipsisContainer.setAttribute('style', originCSS);
-    ellipsisContainer.style.position = 'fixed';
-    ellipsisContainer.style.left = '0';
-    ellipsisContainer.style.height = 'auto';
-    ellipsisContainer.style.top = '-999999px';
-    ellipsisContainer.style.zIndex = '-1000';
-
-    // clean up css overflow
-    ellipsisContainer.style.textOverflow = 'clip';
-    ellipsisContainer.style.webkitLineClamp = 'none';
-
-    // Render fake container
-    ReactDOM.render(
-        <></>,
-        ellipsisContainer
-    );
-
-    // Check if ellipsis in measure div is height enough for content
-    function inRange() {
-        // console.log('inrange?', ellipsisContainer.scrollHeight, ellipsisContainer.scrollHeight < maxHeight)
-        return ellipsisContainer.scrollHeight < maxHeight;
-    }
-
-    // ========================= Find match ellipsis content =========================
-    // Create origin content holder
-    const ellipsisContentHolder = document.createElement('span');
-    const ellipsisTextNode = document.createTextNode(suffix);
-    ellipsisContentHolder.appendChild(ellipsisTextNode);
-    ellipsisContainer.appendChild(ellipsisContentHolder);
-    fixedContent.map((node: Node) => node && ellipsisContainer.appendChild(node.cloneNode(true)));
-    // Append before fixed nodes
-    function appendChildNode(node: ChildNode) {
-        ellipsisContentHolder.insertBefore(node, ellipsisTextNode);
-    }
-
-    function getCurrentText(text: string, pos: number) {
-        const end = text.length;
-        if (!pos) {
-            return ellipsisStr;
-        }
-        if (ellipsisPos === 'end' || pos > end - pos) {
-            return text.slice(0, pos) + ellipsisStr;
-        }
-        return text.slice(0, pos) + ellipsisStr + text.slice(end - pos, end);
-    }
-
-    // Get maximum text
-    function measureText(
-        textNode: Text,
-        fullText: string,
-        startLoc = 0,
-        endLoc = fullText.length,
-        lastSuccessLoc = 0
-    ): string {
-        const midLoc = Math.floor((startLoc + endLoc) / 2);
-        const currentText = getCurrentText(fullText, midLoc);
-        textNode.textContent = currentText;
-        // console.log('calculating....', currentText);
-        if (startLoc >= endLoc - 1 && endLoc > 0) { // Loop when step is small
-            for (let step = endLoc; step >= startLoc; step -= 1) {
-                const currentStepText = getCurrentText(fullText, step);
-                textNode.textContent = currentStepText;
-                if (inRange() || !currentStepText) {
-                    return step === fullText.length ? fullText : currentStepText;
-                }
-            }
-        } else if (endLoc === 0) {
-            return ellipsisStr;
-        }
-
-        if (inRange()) {
-            return measureText(textNode, fullText, midLoc, endLoc, midLoc);
-        }
-        return measureText(textNode, fullText, startLoc, midLoc, lastSuccessLoc);
-    }
-
-    const textNode = document.createTextNode(content);
-    appendChildNode(textNode);
-    const resText = measureText(textNode, content);
-    ellipsisContainer.innerHTML = '';
-    return resText;
-};
-
-export default getRenderText;