@douyinfe/semi-ui 2.1.2 → 2.1.5

package/collapsible/index.tsx

@@ -0,0 +1,156 @@
+// @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;
+}
+
+
+const Collapsible = (props: CollapsibleProps) => {
+    const {
+        motion,
+        children,
+        isOpen,
+        duration,
+        keepDOM,
+        collapseHeight,
+        style,
+        className,
+        reCalcKey
+    } = 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>) => {
+        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'}}>{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

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

@@ -0,0 +1,194 @@
+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>
+);