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

package/tree/_story/tree.stories.tsx

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import Demo from './Demo';
-
-const stories = storiesOf('Tree', module);
-
-stories.add('Tree', () => <Demo />);

package/tree/autoSizer.tsx

@@ -1,86 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { cssClasses } from '@douyinfe/semi-foundation/tree/constants';
-import ResizeObserver, { ResizeEntry } from '../resizeObserver';
-import { get } from 'lodash';
-
-export interface AutoSizerProps {
-    defaultHeight?: number | string;
-    defaultWidth?: number | string;
-    children?: (info: { width: string | number; height: string | number }) => React.ReactNode;
-}
-
-export interface AutoSizerState {
-    height: number | string;
-}
-
-const prefixcls = cssClasses.PREFIX;
-
-export default class AutoSizer extends PureComponent<AutoSizerProps, AutoSizerState> {
-    static propTypes = {
-        defaultHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        defaultWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    };
-
-    static defaultProps = {
-        defaultHeight: '100%',
-        defaultWidth: '100%',
-    };
-
-    constructor(props: AutoSizerProps) {
-        super(props);
-        this.state = {
-            height: this.props.defaultHeight || 0,
-        };
-    }
-
-    componentDidMount() {
-        const { height } = this.state;
-        // if height is a number, pass it directly to virtual-list
-        if (typeof height === 'number') {
-            return;
-        }
-    }
-
-    _onResize = (entries: ResizeEntry[]) => {
-        // observe parent node height
-        const target = entries && entries[1] && entries[1].target;
-        if (target) {
-            const height = get(target, 'offsetHeight') || 0;
-            const style = window.getComputedStyle(target) || {};
-            const paddingTop = parseInt(get(style, 'paddingTop'), 10) || 0;
-            const paddingBottom = parseInt(get(style, 'paddingBottom'), 10) || 0;
-            const newHeight = height - paddingTop - paddingBottom;
-            if (this.state.height !== newHeight) {
-                this.setState({
-                    height: height - paddingTop - paddingBottom,
-                });
-            }
-        }
-    };
-
-    render() {
-        const { children, defaultWidth, defaultHeight } = this.props;
-        const { height } = this.state;
-        // Avoid rendering children before the initial measurements have been collected.
-        // At best this would just be wasting cycles. Refer to https://github.com/bvaughn/react-virtualized-auto-sizer/
-        let bailoutOnChildren = false;
-
-        if (height === 0 || typeof height !== 'number') {
-            bailoutOnChildren = true;
-        }
-        return (
-            <ResizeObserver observeParent onResize={this._onResize}>
-                <div
-                    style={{
-                        height: defaultHeight,
-                        overflow: 'visible',
-                    }}
-                    className={`${prefixcls}-auto-wrapper`}
-                >
-                    {!bailoutOnChildren && children({ height, width: defaultWidth })}
-                </div>
-            </ResizeObserver>
-        );
-    }
-}

package/tree/collapse.tsx

@@ -1,144 +0,0 @@
-/* eslint-disable arrow-body-style */
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { Transition } from '@douyinfe/semi-animation-react';
-import PropTypes from 'prop-types';
-import { noop } from 'lodash';
-import { cssClasses } from '@douyinfe/semi-foundation/collapsible/constants';
-import getMotionObjFromProps from '@douyinfe/semi-foundation/utils/getMotionObjFromProps';
-
-export interface CollapseProps {
-    [x: string]: any;
-    motion?: boolean;
-    children?: React.ReactNode[];
-    duration?: number;
-    onMotionEnd?: () => void;
-    motionType?: string;
-}
-
-export interface TransitionStyle {
-    [x: string]: any;
-    maxHeight?: number;
-}
-
-const ease = 'cubicBezier(.25,.1,.25,1)';
-
-const Collapse = (props: CollapseProps) => {
-    const {
-        motion,
-        children,
-        duration,
-        onMotionEnd,
-        motionType,
-    } = props;
-
-    const ref = useRef(null);
-    const [maxHeight, setMaxHeight] = useState(0);
-    // cache last state
-    const [open, setOpen] = useState(true);
-    const [left, setLeft] = useState(false);
-    const [immediateAttr, setImmediateAttr] = useState(false);
-
-    useEffect(() => {
-        if (motionType === 'enter') {
-            !open && setOpen(true);
-            left && setLeft(false);
-        } else if (motionType === 'leave') {
-            !open && setOpen(true);
-            !immediateAttr && setImmediateAttr(true);
-            left && setLeft(false);
-        }
-    }, [motionType]);
-
-    const setHeight = useCallback(node => {
-        const currHeight = node && node.scrollHeight;
-        if (currHeight && maxHeight !== currHeight) {
-            setMaxHeight(currHeight);
-        }
-    }, [left]);
-
-    const resetHeight = () => {
-        ref.current.style.maxHeight = 'none';
-    };
-
-    const formatStyle = (style: TransitionStyle) => {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        const { maxHeight } = style;
-        return { maxHeight };
-    };
-
-    const renderChildren = (transitionStyle: TransitionStyle) => {
-        const transition =
-            transitionStyle && typeof transitionStyle === 'object' ? formatStyle(transitionStyle) : {};
-
-        const style = {
-            overflow: 'hidden',
-            maxHeight: open ? 'none' : 0,
-            ...transition,
-        };
-        return (
-            <div style={style} className={`${cssClasses.PREFIX}-wrapper`} ref={ref}>
-                <div ref={setHeight}>{children}</div>
-            </div>
-        );
-    };
-    const didLeave = () => {
-        setLeft(true);
-        setMaxHeight(0);
-        motionType === 'leave' && onMotionEnd();
-    };
-
-    const onImmediateEnter = () => {
-        open && setOpen(false);
-        setImmediateAttr(false);
-    };
-
-    const didEnter = () => {
-        resetHeight();
-        immediateAttr && onImmediateEnter();
-        motionType === 'enter' && onMotionEnd();
-    };
-
-    const renderContent = () => {
-        if (left) {
-            return null;
-        }
-
-        const mergeMotion = getMotionObjFromProps({
-            didEnter,
-            didLeave,
-            motion,
-        });
-
-        return motion ? (
-            <Transition
-                state={open ? 'enter' : 'leave'}
-                immediate={immediateAttr}
-                from={{ maxHeight: 0 }}
-                enter={{ maxHeight: { val: maxHeight, easing: ease, duration } }}
-                leave={{ maxHeight: { val: 0, easing: ease, duration } }}
-                {...mergeMotion}
-            >
-                {(transitionStyle: TransitionStyle) => renderChildren(transitionStyle)}
-            </Transition>
-        ) : (
-            renderChildren(null)
-        );
-    };
-
-    return renderContent();
-};
-
-Collapse.propType = {
-    motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
-    children: PropTypes.node,
-    duration: PropTypes.number,
-    onMotionEnd: PropTypes.func,
-};
-
-Collapse.defaultProps = {
-    duration: 250,
-    motion: true,
-    onMotionEnd: noop,
-};
-
-export default Collapse;