DSLib 软件

这是Atlassian设计系统小组使用的具有共同功能的内部软件包。 这个 软件包来时没有支持和组合保证, 如果您直接使用, 您的应用程序会崩溃 !

安装

yarn add @atlaskit/ds-lib

公用事业

noop()

import noop from '@atlaskit/ds-lib/noop';

noop();

once()

创建新 function 只允许存在 function 被调用一次.

import once from '@atlaskit/ds-lib/once';

function getGreeting(name: string): string {
    return `Hello ${name}`;
}
const getGreetingOnce = once(getGreeting);

getGreetingOnce('Alex');
// getGreeting called and "Hello Alex" is returned
// "Hello Alex" is put into the cache.
// returns "Hello Alex"

getGreetingOnce('Sam');
// getGreeting is not called
// "Hello Alex" is returned from the cache.

getGreetingOnce('Greg');
// getGreeting is not called
// "Hello Alex" is returned from the cache.

注释:

• 如果 onced 函数抛出,然后函数的返回值不会被缓存
• 尊重呼叫站点环境( R)this) 当执行已确认的函数时

warnOnce()

import warnOnce from '@atlaskit/ds-lib/warn-once';

function Component() {
    // Print the warning messagein in the Web console only once per session.
    if (process.env.NODE_ENV !== 'production') {
        warnOnce('This component has been deprecated.');
    }

    return <div>This component has been deprecated</div>;
}

mergeRefs()

import mergeRefs from '@atlaskit/ds-lib/merge-refs';

const Component = forwardRef((props, ref) => {
  const customRef = useRef<HTMLElement | null>(null);

  return (
    // Use the utility function to merge the forwarded ref
    // with the created ref.
    <div ref={mergeRefs[ref, customRef]} />
  );
}

device-check

import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
isAppleDevice();
isSafari();

反应钩

useLazyRef()

import useLazyRef from '@atlaskit/ds-lib/use-lazy-ref';

function Component({ onClick }) {
    // Initialize the ref
    const ref = useLazyRef(() => {
        /* Return initial data */
    });

    // Access like a normal ref
    return <button onClick={() => onClick(ref.current)}>Click me!</button>;
}

useControlled()

import useControlled from '@atlaskit/ds-lib/use-controlled';

function ControlledComponent({ value, defaultValue = 0 }) {
    const [uncontrolledState, setUncontrolledState] = useControlled(value, () => defaultValue);
    return <button onClick={() => setUncontrolledState(uncontrolledState + 1)}>Update state</button>;
}

usePreviousValue()

function Component() {
    const [currentValue] = useState(1);
    const previousValue = usePreviousValue(currentValue);

    previousValue; // undefined
    currentValue; // 1

    return null;
}

useStableRef()

function Component({ canShow }: { canShow: () => boolean }) {
    const stableRef = useStableRef({ canShow });

    useEffect(
        () => {
            stableRef.current.canShow();
        },
        // Able to use the last render value of `canShow` without needing
        // to invalidate the effect. Useful for lazy usage of props.
        [],
    );

    return null;
}

useLazyCallback()

import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';

function Component() {
    // `callback` always has the same reference.
    const callback = useLazyCallback(() => {
        // Watch out for its stale closure however!
    });

    return null;
}

useStateRef()

import useStateRef from '@atlaskit/ds-lib/use-state-ref';

function Component() {
  const [valueRef, setState] = useStateRef(0);

  // Access the latest value, even inside stale closures.
  console.log(valueRef.current);

  // Update state as you would with use state
  return <div onClick={() => setState(prev => prev + 1)} />;

useScrollbarWidth()

import useScrollbarWidth from '@atlaskit/ds-lib/use-scrollbar-width';

function Component() {
    const scrollbar = useScrollbarWidth();

    return (
        // Use the scrollbar width in your styles/as you wish.
        // The ref should be attached to the scrollable element.
        <div id="container" style={{ padding: scrollbar.width }}>
            <div id="scrollable" ref={scrollbar.ref} />
        </div>
    );
}

useCloseOnEscapePress()

通知 : useCloseOnEscapePress() 已贬值,请使用 useCloseOnEscapePress 从 @atlaskit/layering 换句话说.

import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';

// Will callback when escape is pressed
useCloseOnEscapePress({
    onClose: () => {},
    isDisabled: false,
});

useAutoFocus()

import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';

const elementRef = useRef();
useAutoFocus(elementRef, true);

<div ref={elementRef} />;