@douyinfe/semi-ui 2.1.2 → 2.1.5

package/modal/_story/modal.stories.js

@@ -0,0 +1,251 @@
+import React, { useState } from 'react';
+import { Select, Modal, Button, Tooltip, Popover } from '../../index';
+import CollapsibleInModal from './CollapsibleInModal';
+import DynamicContextDemo from './DynamicContext';
+
+export default {
+  title: 'Modal',
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+}
+
+export {
+  CollapsibleInModal,
+  DynamicContextDemo
+}
+
+const Option = Select.Option;
+
+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}
+      >
+        <input autoFocus />
+        <p>basic modal</p>
+        <Button onClick={handleCancel}>hide dialog</Button>
+      </Modal>
+    </React.Fragment>
+  );
+};
+
+export const Default = () => <DialogComponent />;
+
+Default.story = {
+  name: 'default',
+};
+
+export const ClickMaskClosableFalse = () => <DialogComponent maskClosable={false} />;
+
+ClickMaskClosableFalse.story = {
+  name: 'click mask closable false',
+};
+
+function useLoading() {
+  const [loading, setLoading] = useState(false);
+  function startQuery() {
+    setLoading(true);
+  }
+  return [loading, { startQuery }];
+}
+
+function DialogComponentWithLoading() {
+  const [loading, actions] = useLoading();
+  return <DialogComponent confirmLoading={loading} onOk={actions.startQuery} />;
+}
+
+export const WithLoadingTodo = () => <DialogComponentWithLoading />;
+
+WithLoadingTodo.story = {
+  name: 'with loading todo',
+};
+
+function success() {
+  Modal.success('bla bla bla...');
+}
+
+function info() {
+  Modal.info('info');
+}
+
+function error() {
+  Modal.error({ title: 'Unfortunately, there is an error', content: 'bla bla bla...' });
+}
+
+function warning() {
+  Modal.warning({ title: 'Warning: be cautious ahead', content: 'bla bla bla...' });
+}
+
+function confirm() {
+  Modal.confirm({ title: 'Are you sure ?', content: 'bla bla bla...' });
+}
+
+export const ConfirmModal = () => (
+  <div>
+    <Button onClick={info}>Info</Button>
+    <Button onClick={success}>Success</Button>
+    <Button onClick={error}>Error</Button>
+    <Button onClick={warning}>Warning</Button>
+    <Button onClick={confirm}>Confirm</Button>
+  </div>
+);
+
+ConfirmModal.story = {
+  name: 'confirm modal',
+};
+
+const Test = () => {
+  let modal;
+
+  const showModal = () => {
+    modal = Modal.info({
+      title: '修改的标题',
+      content: (
+        <>
+          <Button onClick={() => modal && modal.destroy()}>close</Button>
+          <Button onClick={() => modal && modal.update({ title: 'lalala updating' })}>
+            update
+          </Button>
+        </>
+      ),
+    });
+  };
+
+  return <Button onClick={() => showModal()}>Info</Button>;
+};
+
+export const ModalDestroy = () => <Test />;
+
+ModalDestroy.story = {
+  name: 'modal.destroy',
+};
+
+const ScrollComponent = props => {
+  const [visible, setVisible] = useState(true);
+
+  const handleOk = e => {
+    setVisible(false);
+  };
+
+  const handleCancel = e => {
+    setVisible(false);
+  };
+
+  return (
+    <div style={{ paddingTop: 900, paddingBotttom: 800 }}>
+      <Button onClick={() => setVisible(true)}>show dialog</Button>
+      <Modal
+        id="modal-test"
+        title="对话框标题"
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        {...props}
+      >
+        <Select>
+          <Option value={1}>opt1</Option>
+          <Option value={2}>opt2</Option>
+          <Option value={3}>opt3</Option>
+          <Option value={4}>opt4</Option>
+          <Option value={5}>opt5</Option>
+          <Option value={6}>opt6</Option>
+        </Select>
+        <Tooltip content="fefefefeef">test tooltip in modal</Tooltip>
+        <Button onClick={handleCancel}>hide dialog</Button>
+        <Popover content={'1,2,3'}>
+          <Button>hover</Button>
+        </Popover>
+      </Modal>
+      <Select>
+        <Option value={1}>opt1</Option>
+        <Option value={2}>opt2</Option>
+        <Option value={3}>opt3</Option>
+        <Option value={4}>opt4</Option>
+        <Option value={5}>opt5</Option>
+        <Option value={6}>opt6</Option>
+      </Select>
+    </div>
+  );
+};
+
+export const Scroll = () => <ScrollComponent />;
+
+Scroll.story = {
+  name: 'scroll',
+};
+
+const Popup = () => {
+  const [visible, setVisible] = useState(false);
+  const getContainer = () => {
+    return document.querySelector('.modal-container');
+  };
+  return (
+    <div
+      style={{
+        height: 320,
+        overflow: 'hidden',
+        position: 'relative',
+        border: '1px solid var(--semi-color-border)',
+        borderRadius: 2,
+        padding: 24,
+        textAlign: 'center',
+        background: 'var(--semi-color-fill-0)',
+      }}
+      className="modal-container"
+    >
+      <span>Render in this</span>
+      <br />
+      <br />
+      <Button onClick={() => setVisible(true)}>Open Modal</Button>
+      <Modal
+        title="渲染在指定容器内部"
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        width={200}
+        // centered
+        // style={{ top: '10px' }}
+        getPopupContainer={getContainer}
+      >
+        <p>This is the content of a basic sidesheet.</p>
+        <p>Here is more content...</p>
+      </Modal>
+    </div>
+  );
+};
+
+export const RenderInCustomContainer = () => <Popup />;
+
+RenderInCustomContainer.story = {
+  name: 'render in custom container',
+};
+
+export const KeepDom = () => <DialogComponent keepDOM />;
+
+KeepDom.story = {
+  name: 'keepDOM',
+};
+
+export const KeepDomNotLazy = () => <DialogComponent keepDOM lazyRender={false} />;
+
+KeepDomNotLazy.story = {
+  name: 'keepDOM && not lazy',
+};
+
+

package/modal/_story/modal.stories.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Modal from '../index';
+import Button from '../../button';
+
+const stories = storiesOf('Modal', module);
+
+const DialogComponent = (props: any) => {
+    const { maskClosable } = props;
+    const [visible, setVisible] = useState(false);
+
+    const handleOk = () => {
+        setVisible(false);
+    };
+
+    const handleCancel = () => {
+        setVisible(false);
+    };
+
+    return (
+        <React.Fragment>
+            <Button onClick={() => setVisible(true)}>show dialog</Button>
+            <Button onClick={() => {
+                let mod = Modal.info({
+                    title: '123', maskClosable: !!maskClosable
+                });
+                mod.destroy();
+            }}>静态调用</Button>
+            <Modal title="对话框标题" visible={visible} onOk={handleOk} onCancel={handleCancel} {...props}>
+                <input autoFocus />
+                <p>basic modal</p>
+                <Button onClick={handleCancel}>hide dialog</Button>
+            </Modal>
+        </React.Fragment >
+    );
+};
+
+stories.add('模态框默认', () => <DialogComponent />);
+
+stories.add('模态框-点击遮罩层不可关闭', () => <DialogComponent maskClosable={false} />);

package/modal/confirm.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { destroyFns, ModalReactProps } from './Modal';
+import ConfirmModal from './ConfirmModal';
+
+import '@douyinfe/semi-foundation/modal/modal.scss';
+import { get } from 'lodash';
+import { IconAlertTriangle, IconInfoCircle, IconTickCircle, IconHelpCircle, IconAlertCircle } from '@douyinfe/semi-icons';
+import { Motion } from '../_base/base';
+
+export interface ConfirmProps extends ModalReactProps{
+    type: 'success' | 'info' | 'warning' | 'error' | 'confirm';
+}
+
+export default function confirm(props: ConfirmProps) {
+    // create a dom in adapter?
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+
+    let currentConfig = { ...props };
+
+    const destroy = () => {
+        const unmountResult = ReactDOM.unmountComponentAtNode(div);
+        if (unmountResult && div.parentNode) {
+            div.parentNode.removeChild(div);
+        }
+
+        for (let i = 0; i < destroyFns.length; i++) {
+            const fn = destroyFns[i];
+
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            if (fn === close) {
+                destroyFns.splice(i, 1);
+                break;
+            }
+        }
+    };
+
+    const mergedMotion: Motion = typeof (props.motion) === 'undefined' || props.motion ? {
+        ...(props.motion as any),
+        didLeave: (...args: any) => {
+            const didLeave = get(props.motion, 'didLeave');
+
+            if (typeof didLeave === 'function') {
+                didLeave(...args);
+            }
+
+            destroy();
+        }
+
+    } : false;
+
+    function render(renderProps: ConfirmProps) {
+        ReactDOM.render(<ConfirmModal {...renderProps} motion={mergedMotion} />, div);
+    }
+
+    function close() {
+        currentConfig = {
+            ...currentConfig,
+            visible: false,
+        };
+        render(currentConfig);
+    }
+
+    function update(newConfig: ConfirmProps) {
+        currentConfig = {
+            ...currentConfig,
+            ...newConfig,
+        };
+        render(currentConfig);
+    }
+
+    render(currentConfig);
+    destroyFns.push(close);
+    return {
+        destroy: close,
+        update,
+    };
+}
+
+
+
+export function withInfo(props: ModalReactProps) {
+    return {
+        type: 'info' as const,
+        icon: <IconInfoCircle />,
+        ...props
+    };
+}
+
+export function withSuccess(props: ModalReactProps) {
+    return {
+        type: 'success' as const,
+        icon: <IconTickCircle />,
+        ...props
+    };
+}
+
+export function withWarning(props: ModalReactProps) {
+    return {
+        type: 'warning' as const,
+        icon: <IconAlertTriangle />,
+        ...props
+    };
+}
+
+export function withError(props: ModalReactProps) {
+    return {
+        type: 'error' as const,
+        icon: <IconAlertCircle />,
+        ...props
+    };
+}
+
+export function withConfirm(props: ModalReactProps) {
+    return {
+        type: 'confirm' as const,
+        icon: <IconHelpCircle />,
+        ...props
+    };
+}

package/modal/index.tsx

@@ -0,0 +1,13 @@
+
+import '@douyinfe/semi-foundation/modal/modal.scss';
+import { ModalState } from '@douyinfe/semi-foundation/modal/modalFoundation';
+import Modal from './Modal';
+import　{ ModalReactProps } from './Modal';
+
+export { ConfirmProps } from './confirm';
+
+export type Directions = 'ltr' | 'rtl';
+
+export { ModalReactProps, ModalState };
+
+export default Modal;

package/modal/useModal/HookModal.tsx

@@ -0,0 +1,62 @@
+import React, { PropsWithChildren } from 'react';
+import ConfirmModal from '../ConfirmModal';
+import { get } from 'lodash';
+import { ConfirmProps } from '../confirm';
+import { Motion } from '../../_base/base';
+
+interface HookModalProps {
+    afterClose: (...args: any[]) => void;
+    config: ConfirmProps;
+    motion?: Motion;
+}
+
+export interface HookModalRef {
+    destroy: () => void;
+    update: (newConfig: ConfirmProps) => void
+}
+
+// eslint-disable-next-line max-len
+const HookModal = ({ afterClose, config, ...props }: PropsWithChildren<HookModalProps>, ref: React.Ref<any>) => {
+    const [innerConfig, setInnerConfig] = React.useState(config);
+
+    React.useImperativeHandle(ref, () => ({
+        destroy: () => {
+            setInnerConfig(originConfig => ({
+                ...originConfig,
+                visible: false,
+            }));
+        },
+        update: newConfig => {
+            setInnerConfig(originConfig => ({
+                ...originConfig,
+                ...newConfig,
+            }));
+        },
+    }));
+
+    const { motion } = props;
+    const mergedMotion =
+        typeof motion === 'undefined' || motion ?
+            {
+                ...(motion as any),
+                didLeave: (...args: any[]) => {
+                    const didLeave = get(props.motion, 'didLeave');
+
+                    if (typeof didLeave === 'function') {
+                        didLeave(...args);
+                    }
+                    afterClose();
+                },
+            } :
+            false;
+
+    return (
+        <ConfirmModal
+            {...innerConfig}
+            // visible={!visible ? visible : undefined}
+            motion={mergedMotion}
+        />
+    );
+};
+
+export default React.forwardRef<HookModalRef, HookModalProps>(HookModal);

package/modal/useModal/index.tsx

@@ -0,0 +1,72 @@
+import React, { ReactNode } from 'react';
+import HookModal, { HookModalRef } from './HookModal';
+import { ConfirmProps, withConfirm, withError, withInfo, withSuccess, withWarning } from '../confirm';
+import { ModalReactProps } from '../Modal';
+
+let uuid = 0;
+
+function usePatchElement(): ([ReactNode[], (element: ReactNode) => () => void]) {
+    const [elements, setElements] = React.useState<ReactNode[]>([]);
+
+    function patchElement(element: ReactNode) {
+        setElements(originElements => [...originElements, element]);
+
+        return () => {
+            setElements(originElements => originElements.filter(ele => ele !== element));
+        };
+    }
+
+    return [elements, patchElement];
+}
+
+export default function useModal() {
+    const [elements, patchElement] = usePatchElement();
+
+    // eslint-disable-next-line max-len
+    function getConfirmFunc(withFunc: (typeof withConfirm | typeof withInfo | typeof withSuccess | typeof withError | typeof withWarning)) {
+        return function hookConfirm(config: ModalReactProps) {
+            uuid += 1;
+
+            const modalRef = React.createRef<HookModalRef>();
+
+            // eslint-disable-next-line prefer-const
+            let closeFunc: () => void;
+            const modal = (
+                <HookModal
+                    key={`semi-modal-${uuid}`}
+                    config={withFunc(config)}
+                    ref={modalRef}
+                    afterClose={() => {
+                        closeFunc();
+                    }}
+                />
+            );
+
+            closeFunc = patchElement(modal);
+
+            return {
+                destroy: () => {
+                    if (modalRef.current) {
+                        modalRef.current.destroy();
+                    }
+                },
+                update: (newConfig: ConfirmProps) => {
+                    if (modalRef.current) {
+                        modalRef.current.update(newConfig);
+                    }
+                },
+            };
+        };
+    }
+
+    return [
+        {
+            info: getConfirmFunc(withInfo),
+            success: getConfirmFunc(withSuccess),
+            error: getConfirmFunc(withError),
+            warning: getConfirmFunc(withWarning),
+            confirm: getConfirmFunc(withConfirm),
+        },
+        <>{elements}</>,
+    ];
+}

package/motions/Rotate.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState, Children, cloneElement, isValidElement } from 'react';
+import { Transition } from '@douyinfe/semi-animation-react';
+import PropTypes from 'prop-types';
+
+const formatStyle = function formatStyle({ rotate = 0 }) {
+    return ({
+        transform: `rotate(${rotate}deg)`,
+    });
+};
+
+export interface TransitionStyle {
+    rotate?: number;
+}
+
+export interface OpenIconTransitionProps {
+    isOpen?: boolean;
+    children?: React.ReactNode;
+    enterDeg?: number;
+    fromDeg?: number;
+    duration?: number;
+}
+
+function OpenIconTransition(props: OpenIconTransitionProps = {}): React.ReactElement {
+    const { children, isOpen, enterDeg = 180, fromDeg = 0, duration = 150 } = props;
+
+    const [immediate, setImmediate] = useState(true);
+
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-implied-eval
+        setImmediate(false);
+    }, [isOpen]);
+
+    return (
+        <Transition
+            immediate={immediate}
+            state={isOpen ? 'enter' : 'leave'}
+            from={{ rotate: fromDeg }}
+            enter={{ rotate: { val: enterDeg, duration, easing: 'cubic-bezier(.62, .05, .36, .95)' } }}
+            leave={{ rotate: { val: fromDeg, duration, easing: 'cubic-bezier(.62, .05, .36, .95)' } }}
+        >
+            {(transitionStyle: TransitionStyle) =>
+                Children.map(children, child => (isValidElement(child) ?
+                    cloneElement(child, {
+                        ...child.props,
+                        style: {
+                            ...child.props.style,
+                            ...formatStyle(transitionStyle),
+                        },
+                    }) :
+                    child))
+            }
+        </Transition>
+    );
+}
+
+OpenIconTransition.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    children: PropTypes.any.isRequired,
+    enterDeg: PropTypes.number,
+    fromDeg: PropTypes.number,
+    duration: PropTypes.number,
+};
+
+export default OpenIconTransition;

package/navigation/CollapseButton.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { noop } from 'lodash';
+import { IconSidebar } from '@douyinfe/semi-icons';
+import Button from '../button';
+import Tooltip from '../tooltip';
+import { Locale } from '../locale/interface';
+
+export interface CollapseButtonProps {
+    prefixCls?: string;
+    locale?: Locale['Navigation'];
+    collapseText?(isCollapsed: boolean): React.ReactNode;
+    isCollapsed?: boolean;
+    onClick?(e: boolean): void;
+}
+
+export default function CollapseButton({ prefixCls, locale, collapseText, isCollapsed, onClick = noop }: CollapseButtonProps) {
+    const handleClick = () => {
+        if (typeof onClick === 'function') {
+            onClick(!isCollapsed);
+        }
+    };
+
+    const btnProps = {
+        icon: <IconSidebar />,
+        type: 'tertiary',
+        theme: 'borderless',
+        onClick: handleClick,
+    };
+
+    let finalCollapseText: React.ReactNode = isCollapsed ? locale?.expandText : locale?.collapseText;
+
+    if (typeof collapseText === 'function') {
+        finalCollapseText = collapseText(isCollapsed);
+    }
+
+    return (
+        <div className={`${prefixCls}-collapse-btn`}>
+            {isCollapsed ? (
+                <Tooltip content={finalCollapseText} position="right">
+                    <Button {...(btnProps as any)} />
+                </Tooltip>
+            ) : (
+                <Button {...(btnProps as any)}>{finalCollapseText}</Button>
+            )}
+        </div>
+    );
+}