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

package/collapsible/index.tsx

@@ -1,165 +0,0 @@
-// @ts-ignore  currently no type definition for @douyinfe/semi-animation-react
-import { Transition } from '@douyinfe/semi-animation-react';
-import PropTypes from 'prop-types';
-import cls from 'classnames';
-import React, { useRef, useState, useCallback, useMemo } from 'react';
-import { cssClasses } from '@douyinfe/semi-foundation/collapsible/constants';
-import { Motion } from '../_base/base';
-import getMotionObjFromProps from '@douyinfe/semi-foundation/utils/getMotionObjFromProps';
-
-const ease = 'cubicBezier(.25,.1,.25,1)';
-
-export interface CollapsibleProps {
-    motion?: Motion;
-    children?: React.ReactNode;
-    isOpen?: boolean;
-    duration?: number;
-    keepDOM?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    collapseHeight?: number;
-    reCalcKey?: number | string;
-    id?:string,
-}
-
-
-const Collapsible = (props: CollapsibleProps) => {
-    const {
-        motion,
-        children,
-        isOpen,
-        duration,
-        keepDOM,
-        collapseHeight,
-        style,
-        className,
-        reCalcKey,
-        id
-    } = props;
-
-    const ref = useRef(null);
-    const [maxHeight, setMaxHeight] = useState(0);
-    const [open, setOpen] = useState(props.isOpen);
-    const [isFirst, setIsFirst] = useState(true);
-    const [transitionImmediate, setTransitionImmediate] = useState(open && isFirst);
-    const [left, setLeft] = useState(!props.isOpen);
-    if (isOpen !== open) {
-        setOpen(isOpen);
-        if (isFirst) {
-            setIsFirst(false);
-            setTransitionImmediate(false);
-        }
-        isOpen && setLeft(!isOpen);
-    }
-
-    const setHeight = useCallback(node => {
-        const currHeight = node && node.scrollHeight;
-        if (currHeight && maxHeight !== currHeight) {
-            setMaxHeight(currHeight);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [left, reCalcKey, maxHeight]);
-
-    const resetHeight = () => {
-        ref.current.style.maxHeight = 'none';
-    };
-
-    const formatStyle = ({ maxHeight: maxHeightInTransitionStyle }: any) => ({ maxHeight: maxHeightInTransitionStyle });
-
-    const shouldKeepDOM = () => keepDOM || collapseHeight !== 0;
-
-    const defaultMaxHeight = useMemo(() => {
-        return isOpen || !shouldKeepDOM() && !motion ? 'none' : collapseHeight;
-    }, [collapseHeight, motion, isOpen, shouldKeepDOM]);
-
-    const renderChildren = (transitionStyle: Record<string, any> | null) => {
-        const transition =
-            transitionStyle && typeof transitionStyle === 'object' ?
-                formatStyle(transitionStyle) :
-                {};
-
-        const wrapperstyle = {
-            overflow: 'hidden',
-            maxHeight: defaultMaxHeight,
-            ...style,
-            ...transition,
-        };
-
-        if (isFirst) {
-            wrapperstyle.maxHeight = defaultMaxHeight;
-        }
-
-        const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, className);
-        return (
-            <div style={wrapperstyle} className={wrapperCls} ref={ref}>
-                <div
-                    ref={setHeight}
-                    style={{ overflow: 'hidden' }} 
-                    id={id}
-                    x-semi-prop="children"
-                >
-                    {children}
-                </div>
-            </div>
-        );
-    };
-
-    const didLeave = () => {
-        setLeft(true);
-        !shouldKeepDOM() && setMaxHeight(collapseHeight);
-    };
-
-    const renderContent = () => {
-        if (left && !shouldKeepDOM()) {
-            return null;
-        }
-
-        const mergedMotion = getMotionObjFromProps({
-            didEnter: resetHeight,
-            didLeave,
-            motion,
-        });
-
-        return (
-            <Transition
-                state={isOpen ? 'enter' : 'leave'}
-                immediate={transitionImmediate}
-                from={{ maxHeight: 0 }}
-                enter={{ maxHeight: { val: maxHeight, easing: ease, duration } }}
-                leave={{ maxHeight: { val: collapseHeight, easing: ease, duration } }}
-                {...mergedMotion}
-            >
-                {(transitionStyle: Record<string, any>) =>
-                    renderChildren(motion ? transitionStyle : null)
-                }
-            </Transition>
-        );
-    };
-
-    return renderContent();
-};
-
-Collapsible.propType = {
-    motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
-    children: PropTypes.node,
-    isOpen: PropTypes.bool,
-    duration: PropTypes.number,
-    keepDOM: PropTypes.bool,
-    collapseHeight: PropTypes.number,
-    style: PropTypes.object,
-    className: PropTypes.string,
-    reCalcKey: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number
-    ]),
-};
-
-Collapsible.defaultProps = {
-    isOpen: false,
-    duration: 250,
-    motion: true,
-    keepDOM: false,
-    collapseHeight: 0
-};
-
-export default Collapsible;

package/configProvider/_story/ChangeTimeZone/index.js

@@ -1,183 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { ConfigProvider, Select, DatePicker, TimePicker } from '@douyinfe/semi-ui';
-import { IANAOffsetMap, zonedTimeToUtc, utcToZonedTime, format as tzFormat } from '@douyinfe/semi-foundation/utils/date-fns-extra';
-import { parse, format, addDays, addWeeks, startOfMonth, endOfMonth, addMonths } from 'date-fns';
-
-import zh_CN from '@douyinfe/semi-ui/locale/source/zh_CN';
-import en_GB from '@douyinfe/semi-ui/locale/source/en_GB';
-import ko_KR from '@douyinfe/semi-ui/locale/source/ko_KR';
-import ja_JP from '@douyinfe/semi-ui/locale/source/ja_JP';
-
-const { Option } = Select;
-
-const presets = [
-    {
-        text: 'Today',
-        start: new Date(),
-        end: new Date(),
-    },
-    {
-        text: 'Tomorrow',
-        start: addDays(new Date(), 1),
-        end: addDays(new Date(), 1),
-    },
-    {
-        text: 'Next Week',
-        start: addWeeks(new Date(), 1),
-        end: addWeeks(new Date(), 2),
-    },
-    {
-        text: 'Next Month',
-        start: startOfMonth(addMonths(new Date(), 1)),
-        end: endOfMonth(addMonths(new Date(), 1)),
-    },
-    {
-        text: 'Today',
-        start: new Date(),
-        end: new Date(),
-    },
-    {
-        text: 'Tomorrow',
-        start: addDays(new Date(), 1),
-        end: addDays(new Date(), 1),
-    },
-    {
-        text: 'Next Week',
-        start: addWeeks(new Date(), 1),
-        end: addWeeks(new Date(), 2),
-    },
-    {
-        text: 'Next Month',
-        start: startOfMonth(addMonths(new Date(), 1)),
-        end: endOfMonth(addMonths(new Date(), 1)),
-    },
-];
-
-const Demo = () => {
-    const [timeZone, setTimeZone] = useState('GMT-08:00');
-    const [localeCode, setLocaleCode] = useState(zh_CN.code);
-    const defaultTimestamp = 1581599305265;
-    const defaultTimestampEnd = defaultTimestamp + 3600 * 24 * 2 + 1600 * 2;
-    const formatToken = 'yyyy-MM-dd HH:mm:ss';
-    const defaultDate = parse(`2020-02-13 21:08:25`, formatToken, Date.now());
-    const gmtList = useMemo(
-        () =>
-            IANAOffsetMap.map(([hourOffset, [iana]]) => {
-                const hOffset = Math.abs(parseInt(hourOffset, 10));
-                const mOffset = Math.abs(Math.abs(hourOffset) - hOffset);
-                const prefix = hourOffset >= 0 ? '+' : '-';
-                return `GMT${prefix}${String(hOffset).padStart(2, '0')}:${String(mOffset * 60).padStart(2, '0')}`;
-            }),
-        []
-    );
-    const localeList = useMemo(() => [zh_CN, en_GB, ko_KR, ja_JP], []);
-
-    const [timeDate, setTimeDate] = useState(new Date(defaultTimestamp));
-    const [date, setDate] = useState(new Date(defaultTimestamp));
-
-    const Item = useMemo(() => (props = {}) => <div {...props} style={{ marginBottom: 20, ...props.style }} />, []);
-
-    return (
-        <ConfigProvider timeZone={timeZone} locale={localeList.find(locale => locale.code === localeCode)}>
-            <div style={{ width: 300 }}>
-                <Item>
-                    <Select
-                        placeholder={'Select time zone'}
-                        style={{ width: 300 }}
-                        value={timeZone}
-                        onSelect={value => setTimeZone(value)}
-                    >
-                        {gmtList.map(gmt => (
-                            <Option key={gmt} value={gmt}>
-                                {gmt}
-                            </Option>
-                        ))}
-                    </Select>
-                    <Select placeholder={'Select locale'} value={localeCode} onSelect={value => setLocaleCode(value)}>
-                        {localeList.map(locale => (
-                            <Option key={locale.code} value={locale.code}>
-                                {locale.code}
-                            </Option>
-                        ))}
-                    </Select>
-                </Item>
-                <Item>
-                    <strong>Same UTC Time</strong>
-                    <ul>
-                        {gmtList.map(gmt => (
-                            <li key={gmt}>
-                                <strong style={{ marginRight: 5 }}>{gmt}</strong>
-                                <span>{tzFormat(defaultTimestamp, formatToken, { timeZone: gmt })}</span>
-                            </li>
-                        ))}
-                    </ul>
-                    <strong>Same Time String</strong>
-                    <ul>
-                        {gmtList.map(gmt => (
-                            <li key={gmt}>
-                                <strong style={{ marginRight: 5 }}>{gmt}</strong>
-                                <span>
-                                    {tzFormat(zonedTimeToUtc(format(defaultTimestamp, formatToken), gmt), formatToken)}
-                                </span>
-                            </li>
-                        ))}
-                    </ul>
-                </Item>
-                <Item>
-                    <h2>Uncontrolled DatePicker</h2>
-                    <DatePicker
-                        type={'dateTime'}
-                        defaultValue={new Date(defaultTimestamp)}
-                        format={formatToken}
-                        onChange={(date, dateString) => console.log('DatePicker changed: ', date, dateString)}
-                    />
-                </Item>
-                <Item>
-                    <h2>Controlled DatePicker</h2>
-                    <DatePicker
-                        type={'dateTime'}
-                        value={date}
-                        format={formatToken}
-                        onChange={(date, dateString) => {
-                            console.log('DatePicker changed: ', date, dateString);
-                            setDate(date);
-                        }}
-                    />
-                </Item>
-                <Item>
-                    <h2>With Confirm and Persets</h2>
-                    <DatePicker
-                        type="dateTime"
-                        needConfirm
-                        presets={presets.map(preset => ({
-                            text: preset.text,
-                            start: preset.start,
-                        }))}
-                        onChange={(...args) => console.log(...args)}
-                    />
-                </Item>
-                <Item>
-                    <h2>Uncontrolled TimePicker</h2>
-                    <TimePicker
-                        defaultValue={new Date(defaultTimestamp)}
-                        onChange={(time, timeString) => console.log('TimePicker changed: ', time, timeString)}
-                    />
-                </Item>
-
-                <Item>
-                    <h2>Controlled TimePicker</h2>
-                    <TimePicker
-                        value={timeDate}
-                        onChange={(time, timeString) => {
-                            console.log('TimePicker changed: ', time, timeString);
-                            // setTimeDate(time);
-                            setTimeDate(timeString);
-                        }}
-                    />
-                </Item>
-            </div>
-        </ConfigProvider>
-    );
-};
-
-export default Demo;

package/configProvider/_story/GetPopupContainer/index.js

@@ -1,194 +0,0 @@
-import React, { useState, useLayoutEffect, useRef } from 'react';
-import { Select, Button, Modal, Toast, ConfigProvider, Notification } from '@douyinfe/semi-ui';
-import en_GB from '@douyinfe/semi-ui/locale/source/en_GB';
-import { createPortal } from "react-dom";
-
-const Option = Select.Option;
-let ind = 0;
-const ReachableContext = React.createContext();
-
-const useCreatePortalInBody = () => {
-    const wrapperRef = useRef(null);
-    if (wrapperRef.current === null && typeof document !== 'undefined') {
-        const div = document.createElement('div');
-        div.setAttribute('data-body-portal', '');
-        wrapperRef.current = div;
-    }
-    useLayoutEffect(() => {
-        const wrapper = wrapperRef.current;
-        if (!wrapper || typeof document === 'undefined') {
-            return;
-        }
-        document.querySelector('.test').appendChild(wrapper);
-        return () => {
-            document.querySelector('.test').appendChild(wrapper);
-        }
-    }, [])
-    return (children => wrapperRef.current && createPortal(children, wrapperRef.current));
-}
-
-const DialogComponent = props => {
-    const [visible, setVisible] = useState(false);
-
-    const handleOk = e => {
-        setVisible(false);
-    };
-
-    const handleCancel = e => {
-        setVisible(false);
-    };
-
-    return (
-        <React.Fragment>
-            <Button onClick={() => setVisible(true)}>show dialog</Button>
-            <Modal title="对话框标题" visible={visible} onOk={handleOk} onCancel={handleCancel} {...props}>
-                <Button onClick={handleCancel}>hide dialog</Button>
-            </Modal>
-        </React.Fragment>
-    );
-};
-
-const UseModalDemo = () => {
-    const [modal, contextHolder] = Modal.useModal();
-    const config = { 'title': 'This is a success message', 'content': `${ind}` }
-    return (
-        <ConfigProvider
-            getPopupContainer={() => document.getElementById("modal-container")}
-            locale={en_GB}
-
-        >
-            <div id="modal-container" />
-            <Button
-                onClick={() => {
-                    modal.confirm(config);
-                }}
-            >
-                Confirm
-            </Button>
-            <Button
-                onClick={() => {
-                    modal.warning(config);
-                }}
-            >
-                Warning
-            </Button>
-            <Button
-                onClick={() => {
-                    modal.info(config);
-                }}
-            >
-                Info
-            </Button>
-            <Button
-                onClick={() => {
-                    modal.error(config);
-                }}
-            >
-                Error
-            </Button>
-            {/* `contextHolder` should always under the context you want to access */}
-            {contextHolder}
-        </ConfigProvider>
-    );
-};
-
-const UseNotiDemo = () => {
-    const [noti, holder] = Notification.useNotification();
-    const config = { 'title': 'This is a success message', position: 'bottomLeft', 'content': `${ind}` }
-    return (
-        <div>
-            <div id="noti-container" >{holder}</div>
-            <Button
-                onClick={() => {
-                    let id = noti.success(config);
-                    ind++;
-                    setTimeout(() => {
-                        console.log('closing')
-                        noti.close(id)
-                    }, 3000)
-                }}
-            >
-                useNotification demo - left
-            </Button>
-            <Button
-                onClick={() => {
-                    let id = noti.error({ ...config, position: 'topRight' });
-                    ind++;
-                }}
-            >
-                useNotification demo - topRight
-            </Button>
-        </div>
-    );
-}
-
-const UseToastDemo = () => {
-    const [toast, holder] = Toast.useToast();
-    const createBodyPortal = useCreatePortalInBody();
-
-    const config = { 'content': <ReachableContext.Consumer>{name => `ReachableContext: ${name}-${ind}`}</ReachableContext.Consumer>, duration: 0 }
-    return (
-        <ReachableContext.Provider value="Light">
-            <div>
-                {/* <div id="noti-container" >{holder}</div> */}
-                <Button
-                    onClick={() => {
-                        let id = toast.success(config);
-                        ind++
-                        setTimeout(() => {
-                            console.log('closing')
-                            toast.close(id)
-                        }, 3000)
-                    }}
-                >
-                    useToast demo
-                </Button>
-                {createBodyPortal(
-                    <div>
-                        {holder}
-                    </div>
-                )}
-            </div>
-        </ReachableContext.Provider>
-    );
-}
-
-
-
-export default () => (
-    <ConfigProvider getPopupContainer={() => document.querySelector('.test')} locale={en_GB}>
-        <div className="test">
-            <Select defaultValue='dy' style={{ width: 120 }}>
-                <Option value='dy'>抖音</Option>
-                <Option value='hotsoon'>火山</Option>
-                <Option value='pipixia' disabled>皮皮虾</Option>
-                <Option value='xigua'>西瓜视频</Option>
-            </Select>
-            <Button
-                onClick={() => Toast.info({
-                    content: 'Hi, Bytedance dance dance',
-                    duration: 3,
-                })}
-            >
-                Display Toast
-            </Button>
-            <DialogComponent />
-            <UseModalDemo />
-            <Button
-                type='primary'
-                onClick={() => api.success({
-                    title: 'Hi, Bytedance',
-                    content: 'ies dance dance dance',
-                    duration: 0,
-                })}
-                style={{ margin: 4 }}
-            >
-                Success
-            </Button>
-            <br />
-            <UseNotiDemo />
-            <br />
-            <UseToastDemo />
-        </div>
-    </ConfigProvider>
-);