@douyinfe/semi-ui 2.1.3 → 2.1.4-alpha.0

package/typography/copyable.tsx

@@ -0,0 +1,135 @@
+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';
+
+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}>
+                                <a className={`${prefixCls}-action-copy-icon`}>
+                                    <IconCopy onClick={this.copy} />
+                                </a>
+                            </Tooltip>
+                        )}
+                    </span>
+                )}
+            </LocaleConsumer>
+        );
+    }
+}
+
+export default Copyable;

package/typography/index.tsx

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,141 @@
+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.whiteSpace = 'normal';
+    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;