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

package/_test_/utils/table/index.js

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

@@ -0,0 +1,39 @@
+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/index.ts

@@ -0,0 +1,157 @@
+/* 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';
+/**
+ * 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
+                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`
+                );
+                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) => {
+        const { end, start, highlight } = chunk;
+        const text = sourceString.substr(start, end - start);
+        if (highlight) {
+            return React.createElement(
+                markEle,
+                {
+                    style: highlightStyle,
+                    className: highlightClassName,
+                },
+                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);
+        mediaQueryList.addEventListener('change', handlerMediaChange);
+        return (): void => mediaQueryList.removeEventListener('change', handlerMediaChange);
+    }
+    return null;
+};
+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';

package/anchor/__test__/anchor.test.js

@@ -0,0 +1,59 @@
+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);
+  });
+
+  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')
+  })
+});