Version 1.0.2 mit node_modules Verzeichnis

node_modules/recoil/cjs/contrib/uri_persistence/Recoil_Link.js.flow

@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall recoil
+ */
+
+'use strict';
+
+import type {MutableSnapshot, Snapshot} from '../../core/Recoil_Snapshot';
+
+const {
+  useGotoRecoilSnapshot,
+  useRecoilSnapshot,
+} = require('../../hooks/Recoil_SnapshotHooks');
+const React = require('react');
+const {useCallback} = require('react');
+
+type AnchorProps = {
+  download?: true | string,
+  rel?: string,
+  target?: '_self' | '_blank' | '_parent' | '_top',
+  onClick?: (SyntheticUIEvent<HTMLAnchorElement>) => void,
+  style?: {[string]: string | number, ...},
+  children?: React.Node,
+};
+
+type SerializationProps = {
+  uriFromSnapshot: Snapshot => string,
+};
+
+type LinkToSnapshotProps = {
+  ...AnchorProps,
+  ...SerializationProps,
+  snapshot: Snapshot,
+};
+
+// A Link component based on the provided `uriFromSnapshot` mapping
+// of a URI from a Recoil Snapshot.
+//
+// The Link element renders an anchor element.  But instead of an href, use a
+// `snapshot` property.  When clicked, the Link element updates the current
+// state to the snapshot without loading a new document.
+//
+// The href property of the anchor will set using `uriFromSnapshot`.  This
+// allows users to copy the link, choose to open in a new tab, &c.
+//
+// If an `onClick` handler is provided, it is called before the state transition
+// and may call preventDefault on the event to stop the state transition.
+function LinkToRecoilSnapshot({
+  uriFromSnapshot,
+  snapshot,
+  ...anchorProps
+}: LinkToSnapshotProps): React.Node {
+  const gotoSnapshot = useGotoRecoilSnapshot();
+  const {onClick, target} = anchorProps;
+
+  const onClickWrapper = useCallback(
+    (event: $FlowFixMe) => {
+      onClick?.(event);
+      if (
+        !event.defaultPrevented &&
+        event.button === 0 && // left-click
+        !(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) &&
+        (!target || target === '_self')
+      ) {
+        event.preventDefault();
+        gotoSnapshot(snapshot);
+      }
+    },
+    [target, onClick, gotoSnapshot, snapshot],
+  );
+
+  return (
+    <a
+      {...anchorProps}
+      href={uriFromSnapshot(snapshot)}
+      onClick={onClickWrapper}
+    />
+  );
+}
+
+type LinkToStateChangeProps = {
+  ...AnchorProps,
+  ...SerializationProps,
+  stateChange: MutableSnapshot => void,
+};
+
+// A Link component based on the provided `uriFromSnapshot` mapping
+// of a URI from a Recoil Snapshot.
+//
+// The Link element renders an anchor element.  But instead of an href, use a
+// `stateChange` property.  When clicked, the Link element updates the current
+// state based on the `stateChange` callback without loading a new document.
+// `stateChange` is a function which takes a `MutableSnapshot` that can be used
+// to read the current state and set or update any changes.
+//
+// The href property of the anchor will set using `uriFromSnapshot`.  This
+// allows users to copy the link, choose to open in a new tab, &c.
+//
+// If an `onClick` handler is provided, it is called before the state transition
+// and may call preventDefault on the event to stop the state transition.
+//
+// Note that, because the link renders the href based on the current state
+// snapshot, it is re-rendered whenever any state change is made.  Keep the
+// performance implications of this in mind.
+function LinkToRecoilStateChange({
+  stateChange,
+  ...linkProps
+}: LinkToStateChangeProps): React.Node {
+  const currentSnapshot = useRecoilSnapshot();
+  const snapshot = currentSnapshot.map(stateChange);
+  return <LinkToRecoilSnapshot {...linkProps} snapshot={snapshot} />;
+}
+
+module.exports = {
+  LinkToRecoilSnapshot,
+  LinkToRecoilStateChange,
+};

node_modules/recoil/cjs/contrib/uri_persistence/__tests__/Recoil_Link-test.js.flow

@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall recoil
+ */
+'use strict';
+import type {MutableSnapshot, Snapshot} from 'Recoil_Snapshot';
+
+const {Simulate, act} = require('ReactTestUtils');
+
+const {freshSnapshot} = require('../../../core/Recoil_Snapshot');
+const atom = require('../../../recoil_values/Recoil_atom');
+const {
+  LinkToRecoilSnapshot,
+  LinkToRecoilStateChange,
+} = require('../Recoil_Link');
+const React = require('react');
+const {
+  componentThatReadsAndWritesAtom,
+  flushPromisesAndTimers,
+  renderElements,
+} = require('recoil-shared/__test_utils__/Recoil_TestingUtils');
+
+const myAtom = atom<string>({key: 'Link Snapshot', default: 'DEFAULT'});
+const [ReadsAndWritesAtom, setAtom] = componentThatReadsAndWritesAtom(myAtom);
+
+const LinkToSnapshot = ({
+  snapshot,
+  children,
+}: $TEMPORARY$object<{
+  children: Array<$TEMPORARY$string<'LINK-'> | string>,
+  snapshot: Snapshot,
+}>) => (
+  <LinkToRecoilSnapshot
+    snapshot={snapshot}
+    uriFromSnapshot={({getLoadable}) =>
+      `https://test.com/test?atom="${getLoadable(myAtom)
+        .valueOrThrow()
+        .toString()}`
+    }>
+    {children}
+  </LinkToRecoilSnapshot>
+);
+
+const LinkToStateChange = ({
+  stateChange,
+  children,
+}: $TEMPORARY$object<{
+  children: $TEMPORARY$string<'LINK'>,
+  stateChange: MutableSnapshot => void,
+}>) => (
+  <LinkToRecoilStateChange
+    stateChange={stateChange}
+    uriFromSnapshot={({getLoadable}) =>
+      `https://test.com/test?atom="${getLoadable(myAtom)
+        .valueOrThrow()
+        .toString()}`
+    }>
+    {children}
+  </LinkToRecoilStateChange>
+);
+
+test('Link - snapshot', async () => {
+  const snapshot = freshSnapshot().map(({set}) => set(myAtom, 'MAP'));
+
+  const c = renderElements(
+    <>
+      <ReadsAndWritesAtom />
+      <LinkToSnapshot snapshot={snapshot}>
+        LINK-{snapshot.getLoadable(myAtom).valueOrThrow().toString()}
+      </LinkToSnapshot>
+    </>,
+  );
+
+  expect(c.textContent).toEqual('"DEFAULT"LINK-MAP');
+
+  act(() => setAtom('SET'));
+  expect(c.textContent).toEqual('"SET"LINK-MAP');
+
+  // flowlint-next-line unclear-type:off
+  expect(((c.children[0]: any): HTMLAnchorElement).href).toEqual(
+    'https://test.com/test?atom=%22MAP',
+  );
+
+  act(() => {
+    Simulate.click(c.children[0], {button: 0});
+  });
+  await flushPromisesAndTimers();
+  expect(c.textContent).toEqual('"MAP"LINK-MAP');
+});
+
+test('Link - stateChange', async () => {
+  const c = renderElements(
+    <>
+      <ReadsAndWritesAtom />
+      <LinkToStateChange stateChange={({set}) => set(myAtom, 'MAP')}>
+        LINK
+      </LinkToStateChange>
+    </>,
+  );
+  expect(c.textContent).toEqual('"DEFAULT"LINK');
+
+  act(() => setAtom('SET'));
+  expect(c.textContent).toEqual('"SET"LINK');
+
+  // flowlint-next-line unclear-type:off
+  expect(((c.children[0]: any): HTMLAnchorElement).href).toEqual(
+    'https://test.com/test?atom=%22MAP',
+  );
+
+  act(() => {
+    Simulate.click(c.children[0], {button: 0});
+  });
+  await flushPromisesAndTimers();
+  expect(c.textContent).toEqual('"MAP"LINK');
+});
+
+test('Link - state update', async () => {
+  const c = renderElements(
+    <>
+      <ReadsAndWritesAtom />
+      <LinkToStateChange
+        stateChange={({set}) => set(myAtom, value => 'MAP ' + value)}>
+        LINK
+      </LinkToStateChange>
+    </>,
+  );
+  expect(c.textContent).toEqual('"DEFAULT"LINK');
+
+  act(() => setAtom('SET'));
+  expect(c.textContent).toEqual('"SET"LINK');
+
+  // flowlint-next-line unclear-type:off
+  expect(((c.children[0]: any): HTMLAnchorElement).href).toEqual(
+    'https://test.com/test?atom=%22MAP%20SET',
+  );
+
+  act(() => {
+    Simulate.click(c.children[0], {button: 0});
+  });
+  await flushPromisesAndTimers();
+  expect(c.textContent).toEqual('"MAP SET"LINK');
+});