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

package/_test_/utils/table/index.js

@@ -1,310 +0,0 @@
-import React from 'react';
-import {Table, Tag, Tooltip} from '../../../index';
-
-const {Column} = Table;
-
-function getRandomNumber(end = 100, start = 0) {
-    const number = Math.ceil(Math.random() * (end - start)) + start;
-    return number;
-}
-
-function getData(total = 25) {
-    const _data = [];
-    for (let i = 0; i < total; i++) {
-        let age = (i * 1000) % 149;
-        let name = `Edward King ${i}`;
-        _data.push({
-            key: String(i),
-            name,
-            age,
-            address: `London, Park Lane no. ${i} Lake Park`,
-            description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
-        });
-    }
-    return _data;
-}
-
-function getGroupData() {
-    const data = [
-        {city: 'Beijing', job: 'FE', department: 'IES'},
-        {city: 'Beijing', job: 'BE', department: 'IES'},
-        {city: 'Shanghai', job: 'Android', department: 'IES'},
-        {city: 'Tokyo', job: 'Android', department: 'IES'},
-        {city: 'Shanghai', job: 'IOS', department: 'EE'},
-        {city: 'LA', job: 'SE', department: 'EE'},
-        {city: 'Beijing', job: 'Android', department: 'EE'},
-        {city: 'Tokyo', job: 'IOS', department: 'EE'},
-        {city: 'Tokyo', job: 'SE', department: 'DATA'},
-        {city: 'Shanghai', job: 'BE', department: 'DATA'},
-        {city: 'LA', job: 'Android', department: 'DATA'},
-        {city: 'LA', job: 'IOS', department: 'DATA'},
-    ];
-    return data;
-}
-
-function getColumns() {
-    const columns = [
-        {
-            title: 'Name',
-            dataIndex: 'name',
-            width: 150,
-            fixed: 'left',
-        },
-        {
-            title: 'Age',
-            dataIndex: 'age',
-            width: 150,
-        },
-        {
-            title: 'Description',
-            dataIndex: 'description',
-        },
-        {
-            title: 'Address',
-            dataIndex: 'address',
-        },
-        {
-            render: (text, record) => (
-                <Tooltip content={record.description}>
-                    <Tag color="green">Show Info</Tag>
-                </Tooltip>
-            ),
-            width: 150,
-            fixed: 'right',
-        },
-    ];
-    return columns;
-}
-
-function getJSXColumns() {
-    const jsxColumns = (
-        <>
-            <Column title={'Name'} dataIndex={'name'} width={150}/>
-            <Column title={'Age'} dataIndex={'age'} width={150}/>
-            <Column title={'Address'} dataIndex={'address'}/>
-            <Column
-                render={(text, record) => (
-                    <Tooltip content={record.description}>
-                        <Tag color="green">Show Info</Tag>
-                    </Tooltip>
-                )}
-                width={150}
-            />
-        </>
-    );
-    return jsxColumns;
-}
-
-function getGroupColumns() {
-    const columns = [
-        {dataIndex: 'city', title: 'City', width: 400, sorter: (a, b) => (a.city > b.city ? 1 : -1)},
-        {
-            dataIndex: 'job',
-            title: 'Job',
-            width: 200,
-            filters: [
-                {text: 'IOS', value: 'IOS'},
-                {text: 'Android', value: 'Android'},
-            ],
-            onFilter: (value, record) => record.job && record.job.indexOf(value) === 0,
-        },
-        {dataIndex: 'department', title: 'Department'},
-    ];
-    return columns;
-}
-
-function getNestColumns() {
-    const nestColumns = ([
-        {
-            title: 'Base Information',
-            fixed: 'left',
-            children: [
-                {
-                    title: 'Name',
-                    dataIndex: 'name',
-                    fixed: 'left',
-                    width: 200,
-                    filters: [
-                        {
-                            text: 'Code 45',
-                            value: '45',
-                        },
-                        {
-                            text: 'King 4',
-                            value: 'King 4',
-                        },
-                    ],
-                    onFilter: (value, record) => record.name.includes(value),
-                },
-                {
-                    title: 'Age',
-                    dataIndex: 'age',
-                    fixed: 'left',
-                    width: 100,
-                    sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
-                },
-            ],
-        },
-        {
-            title: 'Company Information',
-            children: [
-                {
-                    title: 'Company Name',
-                    dataIndex: 'company.name',
-                },
-                {
-                    title: 'Company Address',
-                    dataIndex: 'company.address',
-                },
-            ],
-        },
-        {
-            title: 'Address',
-            width: 250,
-            dataIndex: 'address',
-            fixed: 'right',
-        },
-    ]);
-    return nestColumns;
-}
-
-function getNestData(total = 25) {
-    const data = [];
-    for (let i = 0; i < total; i++) {
-        let age = (i * 1000) % 149;
-        let name = `Edward King ${i}`;
-        data.push({
-            key: String(i),
-            company: {
-                name: 'ByteDance',
-                address: 'No. 48, Zhichun Road',
-            },
-            name,
-            age,
-            address: `No ${i + 1}, Zhongguancun Street`,
-            description: `My name is ${name}, I am ${age} years old, living in No ${i + 1}, Zhongguancun Street`,
-        });
-    }
-    return data;
-}
-
-function getTreeData() {
-    const childrenData = [
-        {
-            key: 1,
-            name: 'ZhangSan',
-            age: 30,
-            address: 'bytedance 1',
-            children: [
-                {
-                    key: 11,
-                    name: 'LiSi',
-                    age: 40,
-                    address: 'bytedance 2',
-                },
-                {
-                    key: 12,
-                    name: 'WangWu',
-                    age: 30,
-                    address: 'bytedance 2',
-                    children: [
-                        {
-                            key: 121,
-                            name: 'XiaoMing',
-                            age: 50,
-                            address: 'bytedance 3',
-                        },
-                    ],
-                },
-                {
-                    key: 13,
-                    name: 'XiaoZhang',
-                    age: 60,
-                    address: 'bytedance 4',
-                    children: [
-                        {
-                            key: 131,
-                            name: 'XiaoLi',
-                            age: 50,
-                            address: 'bytedance 5',
-                            children: [
-                                {
-                                    key: 1311,
-                                    name: 'XiaoGuo',
-                                    age: 40,
-                                    address: 'bytedance 6',
-                                },
-                                {
-                                    key: 1312,
-                                    name: 'XiaoHong',
-                                    age: 30,
-                                    address: 'bytedance 7',
-                                },
-                            ],
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            key: 2,
-            name: 'XiaoGang',
-            age: 80,
-            address: 'bytedance 8',
-        },
-    ];
-    return childrenData;
-}
-
-function getJSXNestColumns() {
-    const filters = [
-        {
-            text: 'Code 45',
-            value: '45',
-        },
-        {
-            text: 'King 4',
-            value: 'King 4',
-        },
-    ];
-    const jsxNestColumns = (
-        <>
-            <Column title={'Base Information'} dataIndex={'base'} fixed="left">
-                <Column
-                    title={'Name'}
-                    dataIndex={'name'}
-                    fixed="left"
-                    width={200}
-                    filters={filters}
-                    onFilter={(value, record) => record.name.includes(value)}
-                />
-                <Column
-                    title={'Age'}
-                    dataIndex={'age'}
-                    width={100}
-                    fixed="left"
-                    sorter={(a, b) => (a.age - b.age > 0 ? 1 : -1)}
-                />
-            </Column>
-            <Column title={'Company Information'} dataIndex={'company'}>
-                <Column title={'Company Name'} dataIndex={'company.name'}/>
-                <Column title={'Company Address'} dataIndex={'company.address'}/>
-            </Column>
-            <Column title={'Address'} dataIndex={'address'} width={250} fixed="right"/>
-        </>
-    );
-    return jsxNestColumns;
-}
-
-export {
-    getRandomNumber,
-    getData,
-    getGroupData,
-    getNestData,
-    getTreeData,
-    getColumns,
-    getJSXColumns,
-    getGroupColumns,
-    getJSXNestColumns,
-    getNestColumns
-};

package/_test_/utils/tooltip/index.js

@@ -1,39 +0,0 @@
-import { mount as baseMount, ReactWrapper } from 'enzyme';
-import { ReactNode } from 'react';
-
-export const CONTAINER_ID = `__container`;
-
-/**
- *
- * @param {ReactNode} reactNode
- * @param {string} [containerSelector]
- * @returns {ReactWrapper}
- */
-export function mount(reactNode, containerSelector = `#${CONTAINER_ID}`) {
-    return baseMount(reactNode, {
-        attachTo: document.querySelector(containerSelector),
-    });
-}
-
-export const genBeforeEach = cb => () => {
-    document.body.innerHTML = '';
-    // Avoid `attachTo: document.body` Warning
-    const div = document.createElement('div');
-    div.setAttribute('id', CONTAINER_ID);
-    document.body.appendChild(div);
-
-    if (typeof cb === 'function') {
-        cb();
-    }
-};
-
-export const genAfterEach = cb => () => {
-    const div = document.getElementById(CONTAINER_ID);
-    if (div) {
-        document.body.removeChild(div);
-    }
-
-    if (typeof cb === 'function') {
-        cb();
-    }
-};

package/_utils/hooks/usePrevFocus.ts

@@ -1,17 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getActiveElement } from '../index';
-import { get, isFunction } from 'lodash';
-
-/* istanbul ignore next */
-export function usePrevFocus() {
-    const [prevFocusElement, setPrevFocus] = useState<HTMLElement>(getActiveElement());
-
-    useEffect(() => {
-        return function cleanup() {
-            const blur = get(prevFocusElement, 'blur');
-            isFunction(blur) && blur();
-        };
-    }, [prevFocusElement]);
-
-    return [prevFocusElement, setPrevFocus];
-}

package/_utils/index.ts

@@ -1,198 +0,0 @@
-/* eslint-disable max-len */
-/* argus-disable unPkgSensitiveInfo */
-import React from 'react';
-import { cloneDeepWith, set, get } from 'lodash';
-import warning from '@douyinfe/semi-foundation/utils/warning';
-import { findAll } from '@douyinfe/semi-foundation/utils/getHighlight';
-import { isHTMLElement } from '@douyinfe/semi-foundation/utils/dom';
-/**
- * stop propagation
- *
- * @param {React.MouseEvent<HTMLElement>} e React mouse event object
- * @param {boolean} noImmediate Skip stopping immediate propagation
- */
-export function stopPropagation(e: React.MouseEvent, noImmediate?: boolean) {
-    if (e && typeof e.stopPropagation === 'function') {
-        e.stopPropagation();
-    }
-
-    if (!noImmediate && e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
-        e.nativeEvent.stopImmediatePropagation();
-    }
-}
-
-/**
- *
- * @param {any} value
- * @param {Function} customizer
- * @returns {any}
- * use in Table, Form, Navigation
- */
-export function cloneDeep(value: any, customizer?: (value: any) => void) {
-    return cloneDeepWith(value, v => {
-        if (typeof customizer === 'function') {
-            return customizer(v);
-        }
-        if (typeof v === 'function' || React.isValidElement(v)) {
-            return v;
-        }
-        if (Object.prototype.toString.call(v) === '[object Error]') {
-            return v;
-        }
-        if (Array.isArray(v) && v.length === 0) {
-            const keys: string[] = Object.keys(v);
-            if (keys.length) {
-                const newArray: any[] = [];
-                keys.forEach(key => {
-                    set(newArray, key, v[key]);
-                });
-                // internal-issues:887
-                try {
-                    warning(
-                        get(process, 'env.NODE_ENV') !== 'production',
-                        `[Semi] You may use an out-of-bounds array. In some cases, your program may not behave as expected.
-                    The maximum length of an array is 4294967295.
-                    Please check whether the array subscript in your data exceeds the maximum value of the JS array subscript`
-                    );
-                } catch (e){
-
-                }
-                return newArray;
-            } else {
-                return undefined;
-            }
-        }
-        return undefined;
-    });
-}
-
-/**
- * [getHighLightTextHTML description]
- *
- * @param   {string} sourceString [source content text]
- * @param   {Array<string>} searchWords [keywords to be highlighted]
- * @param   {object} option
- * @param   {true}      option.highlightTag [The tag wrapped by the highlighted content, mark is used by default]
- * @param   {true}      option.highlightClassName
- * @param   {true}      option.highlightStyle
- * @param   {boolean}   option.caseSensitive
- *
- * @return  {Array<object>}
- */
-export const getHighLightTextHTML = ({
-    sourceString = '',
-    searchWords = [],
-    option = { autoEscape: true, caseSensitive: false }
-}: GetHighLightTextHTMLProps) => {
-    const chunks: HighLightTextHTMLChunk[] = findAll({ sourceString, searchWords, ...option });
-    const markEle = option.highlightTag || 'mark';
-    const highlightClassName = option.highlightClassName || '';
-    const highlightStyle = option.highlightStyle || {};
-    return chunks.map((chunk: HighLightTextHTMLChunk, index: number) => {
-        const { end, start, highlight } = chunk;
-        const text = sourceString.substr(start, end - start);
-        if (highlight) {
-            return React.createElement(
-                markEle,
-                {
-                    style: highlightStyle,
-                    className: highlightClassName,
-                    key: text + index
-                },
-                text
-            );
-        } else {
-            return text;
-        }
-    });
-};
-
-export interface RegisterMediaQueryOption {
-    match?: (e: MediaQueryList | MediaQueryListEvent) => void;
-    unmatch?: (e: MediaQueryList | MediaQueryListEvent) => void;
-    callInInit?: boolean;
-}
-
-/**
- * register matchFn and unMatchFn callback while media query
- * @param {string} media media string
- * @param {object} param param object
- * @returns function
- */
-export const registerMediaQuery = (media: string, { match, unmatch, callInInit = true }: RegisterMediaQueryOption): () => void => {
-    if (typeof window !== 'undefined') {
-        const mediaQueryList = window.matchMedia(media);
-        function handlerMediaChange(e: MediaQueryList | MediaQueryListEvent): void {
-            if (e.matches) {
-                match && match(e);
-            } else {
-                unmatch && unmatch(e);
-            }
-        }
-        callInInit && handlerMediaChange(mediaQueryList);
-        if (Object.prototype.hasOwnProperty.call(mediaQueryList, 'addEventListener')) {
-            mediaQueryList.addEventListener('change', handlerMediaChange);
-            return (): void => mediaQueryList.removeEventListener('change', handlerMediaChange);
-        }
-        mediaQueryList.addListener(handlerMediaChange);
-        return (): void => mediaQueryList.removeListener(handlerMediaChange);
-    }
-    return () => undefined;
-};
-export interface GetHighLightTextHTMLProps {
-    sourceString?: string;
-    searchWords?: any[];
-    option: HighLightTextHTMLOption;
-}
-
-export interface HighLightTextHTMLOption {
-    highlightTag?: string;
-    highlightClassName?: string;
-    highlightStyle?: Record<string, any>;
-    caseSensitive: boolean;
-    autoEscape: boolean;
-}
-
-export interface HighLightTextHTMLChunk {
-    start?: number;
-    end?: number;
-    highlight?: any;
-}
-
-/**
- * Determine whether the incoming element is a built-in icon
- * @param icon 元素
- * @returns boolean
- */
-export const isSemiIcon = (icon: any): boolean => React.isValidElement(icon) && get(icon.type, 'elementType') === 'Icon';
-
-export function getActiveElement(): HTMLElement | null {
-    return document ? document.activeElement as HTMLElement : null;
-}
-
-export function isNodeContainsFocus(node: HTMLElement) {
-    const activeElement = getActiveElement();
-    return activeElement === node || node.contains(activeElement);
-}
-
-export function getFocusableElements(node: HTMLElement) {
-    if (!isHTMLElement(node)) {
-        return [];
-    }
-    const focusableSelectorsList = [
-        "input:not([disabled]):not([tabindex='-1'])",
-        "textarea:not([disabled]):not([tabindex='-1'])",
-        "button:not([disabled]):not([tabindex='-1'])",
-        "a[href]:not([tabindex='-1'])",
-        "select:not([disabled]):not([tabindex='-1'])",
-        "area[href]:not([tabindex='-1'])",
-        "iframe:not([tabindex='-1'])",
-        "object:not([tabindex='-1'])",
-        "*[tabindex]:not([tabindex='-1'])",
-        "*[contenteditable]:not([tabindex='-1'])",
-    ];
-    const focusableSelectorsStr = focusableSelectorsList.join(',');
-    // we are not filtered elements which are invisible
-    const focusableElements = Array.from(node.querySelectorAll<HTMLElement>(focusableSelectorsStr));
-    return focusableElements;
-}

package/anchor/__test__/anchor.test.js

@@ -1,60 +0,0 @@
-import Anchor from '../index';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-import { mount } from 'enzyme';
-
-const {Link} = Anchor;
-
-function mountAnchor(props = {}) {
-  return mount(
-        <Anchor {...props}>
-            <Link href="#welcome" title="welcome" />
-            <Link href="#api" title="api too much to show">
-                <Link href="#docs" title="docs">
-                    <Link href="#doc1" title="doc1" />
-                    <Link href="#doc2" title="doc2" />
-                </Link>
-            </Link>
-            <Link href="#contact" title="contact" />
-        </Anchor>
-  );
-}
-
-describe('Anchor', () => {
-  it('anchor small size', () => {
-    const smallAnchor = mount(<Anchor size="small" />);
-    expect(smallAnchor.find(`.${BASE_CLASS_PREFIX}-anchor-size-small`)).toHaveLength(1);
-    smallAnchor.unmount();
-  });
-
-  it('anchor rail theme', () => {
-    const smallAnchor = mount(<Anchor railTheme="primary" />);
-    expect(smallAnchor.find(`.${BASE_CLASS_PREFIX}-anchor-slide-bar-primary`)).toHaveLength(1);
-  });
-
-  it('anchor with custom className & style', () => {
-    const wrapper = mount(<Anchor className="test" style={{ color: 'red' }} />);
-    expect(wrapper.hasClass('test')).toEqual(true);
-    expect(wrapper.find('div.test')).toHaveStyle('color', 'red');
-  });
-
-  it('simulate click event', () => {
-    const wrapper = mountAnchor({autoCollapse: true})
-    const links = wrapper.find('.semi-anchor-link-title');
-    expect(wrapper.find('.semi-anchor-link-title-active').length).toEqual(0)
-    expect(wrapper.exists('.semi-anchor-link .semi-anchor-link')).toEqual(false);
-    const secondLink = links.at(1);
-    secondLink.simulate('click')
-    expect(wrapper.find('.semi-anchor-link-title-active').length).toEqual(1)
-    expect(wrapper.exists('.semi-anchor-link .semi-anchor-link')).toEqual(true);
-    const firstLink = links.at(0);
-    firstLink.simulate('click')
-    expect(wrapper.find('.semi-anchor-link-title-active').length).toEqual(1)
-    expect(wrapper.exists('.semi-anchor-link .semi-anchor-link')).toEqual(false);
-  });
-
-  it('anchor max height and max width', () => {
-    const wrapper = mountAnchor({maxHeight: 50, maxWidth: 100})
-    expect(wrapper.find('.semi-anchor').instance().style.maxHeight).toBe('50px')
-    expect(wrapper.find('.semi-anchor').instance().style.maxWidth).toBe('100px')
-  })
-});