](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
-
-
- Actions:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- actions[action])}
- builtinPlacements={builtinPlacements}
- forceRender={forceRender}
- popupStyle={{
- border: '1px solid red',
- padding: 10,
- background: 'white',
- boxSizing: 'border-box',
- }}
- popup={
-
- i am a popup
}
- popupMotion={motion ? Motion : null}
- onPopupAlign={() => {
- console.warn('Aligned!');
- }}
- >
-
-
- This is a example of trigger usage.
-You can adjust the value above
-which will also change the behaviour of popup.
-
- i am a click popup{' '}
-
-
-
-
- );
-};
-
-export default Test;
diff --git a/docs/examples/clip.tsx b/docs/examples/clip.tsx
deleted file mode 100644
index 5f096b4..0000000
--- a/docs/examples/clip.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
-import React from 'react';
-import '../../assets/index.less';
-
-const builtinPlacements = {
- top: {
- points: ['bc', 'tc'],
- overflow: {
- adjustX: true,
- adjustY: true,
- },
- offset: [0, 0],
- },
- bottom: {
- points: ['tc', 'bc'],
- overflow: {
- adjustX: true,
- adjustY: true,
- },
- offset: [0, 0],
- },
-};
-
-const popupPlacement = 'top';
-
-export default () => {
- const [scale, setScale] = React.useState('1');
-
- return (
-
-
-
-
-
-
- {/* */}
-
- setScale(e.target.value)}
- />
-
-
-
-
- Popup
-
- }
- getPopupContainer={(n) => n.parentNode as any}
- popupStyle={{ boxShadow: '0 0 5px red' }}
- popupPlacement={popupPlacement}
- builtinPlacements={builtinPlacements}
- stretch="minWidth"
- >
-
- Target
-
-
-
-
-
-
- {/* */}
-
- setScale(e.target.value)}
- />
-
-
-
-
-
-
-
-
- Popup
-
- }
- popupTransitionName="rc-trigger-popup-zoom"
- popupStyle={{ boxShadow: '0 0 5px red' }}
- popupVisible={visible}
- onPopupVisibleChange={(nextVisible) => {
- setVisible(nextVisible);
- }}
- // getPopupContainer={() => popHolderRef.current}
- popupPlacement={popupPlacement}
- builtinPlacements={builtinPlacements}
- stretch="minWidth"
- onPopupAlign={(domNode, align) => {
- console.log('onPopupAlign:', domNode, align);
- }}
- >
-
- Target
-
-
-
+ ) =>
+ setValue(e.target.value)
+ }
+ type="text"
+ placeholder="The value of qrcode"
+ style={{ width: '100%' }}
+ />
+
+
+ );
+};
diff --git a/docs/examples/download.tsx b/docs/examples/download.tsx
new file mode 100644
index 0000000..ba7b037
--- /dev/null
+++ b/docs/examples/download.tsx
@@ -0,0 +1,45 @@
+import { QRCodeCanvas } from 'rc-qrcode';
+import React from 'react';
+
+const downloadQRCode = () => {
+ const canvas = document.getElementById('myqrcode')?.querySelector+
+ ) =>
+ setValue(e.target.value)
+ }
+ type="text"
+ placeholder="The value of qrcode"
+ style={{ width: '80%' }}
+ />
+
+
+
+ );
+};
diff --git a/docs/examples/inside.tsx b/docs/examples/inside.tsx
deleted file mode 100644
index 42c19d4..0000000
--- a/docs/examples/inside.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-/* eslint no-console:0 */
-import React from 'react';
-import '../../assets/index.less';
-import Trigger, { type BuildInPlacements } from '../../src';
-
-const experimentalConfig = {
- _experimental: {
- dynamicInset: true,
- },
-};
-
-export const builtinPlacements: BuildInPlacements = {
- top: {
- points: ['bc', 'tc'],
- overflow: {
- shiftX: 0,
- adjustY: true,
- },
- offset: [0, 0],
- ...experimentalConfig,
- },
- topLeft: {
- points: ['bl', 'tl'],
- overflow: {
- adjustX: true,
- adjustY: false,
- shiftY: true,
- },
- offset: [0, -20],
- ...experimentalConfig,
- },
- topRight: {
- points: ['br', 'tr'],
- overflow: {
- adjustX: true,
- adjustY: true,
- },
- offset: [0, 0],
- ...experimentalConfig,
- },
- left: {
- points: ['cr', 'cl'],
- overflow: {
- adjustX: true,
- shiftY: true,
- },
- offset: [0, 0],
- ...experimentalConfig,
- },
- leftTop: {
- points: ['tr', 'tl'],
- overflow: {
- adjustX: true,
- adjustY: true,
- },
- offset: [0, 0],
- ...experimentalConfig,
- },
- leftBottom: {
- points: ['br', 'bl'],
- overflow: {
- adjustX: true,
- adjustY: true,
- },
- offset: [0, 0],
- ...experimentalConfig,
- },
- right: {
- points: ['cl', 'cr'],
- overflow: {
- adjustX: true,
- shiftY: true,
- },
- offset: [0, 0],
- ...experimentalConfig,
- },
- bottom: {
- points: ['tc', 'bc'],
- overflow: {
- shiftX: 50,
- adjustY: true,
- },
- offset: [0, 0],
- ...experimentalConfig,
- },
- bottomLeft: {
- points: ['tl', 'bl'],
- overflow: {
- shiftX: 50,
- adjustY: true,
- shiftY: true,
- },
- offset: [0, 20],
- ...experimentalConfig,
- },
-};
-
-const popupPlacement = 'bottomLeft';
-
-export default () => {
- const [popupHeight, setPopupHeight] = React.useState(60);
-
- const containerRef = React.useRef+
-
-
-
-
-
-
- );
-};
diff --git a/docs/examples/large-popup.tsx b/docs/examples/large-popup.tsx
deleted file mode 100644
index 8d402d3..0000000
--- a/docs/examples/large-popup.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
-import React from 'react';
-import '../../assets/index.less';
-
-const builtinPlacements = {
- top: {
- points: ['bc', 'tc'],
- overflow: {
- shiftY: true,
- adjustY: true,
- },
- offset: [0, -10],
- },
- bottom: {
- points: ['tc', 'bc'],
- overflow: {
- shiftY: true,
- adjustY: true,
- },
- offset: [0, 10],
- htmlRegion: 'scroll' as const,
- },
-};
-
-export default () => {
- const containerRef = React.useRef
-
- Popup
-
- }
- popupVisible
- getPopupContainer={() => containerRef.current}
- popupPlacement={popupPlacement}
- builtinPlacements={builtinPlacements}
- >
-
- Target
-
-
-
-
-
-
- {/* */}
-
-
-
-
- Popup 75vh
-
- }
- popupStyle={{ boxShadow: '0 0 5px red' }}
- popupVisible
- popupPlacement="top"
- builtinPlacements={builtinPlacements}
- >
-
- Target
-
-
-
+ setLevel((e.target as HTMLInputElement).value)}>
+
+
+
+
+
+
+
+
+
+
+ ) =>
+ setValue(e.target.value)
+ }
+ type="text"
+ placeholder="The value of qrcode"
+ style={{ width: '80%' }}
+ />
+
+
+ );
+};
diff --git a/docs/examples/nested.tsx b/docs/examples/nested.tsx
deleted file mode 100644
index 3412438..0000000
--- a/docs/examples/nested.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-/* eslint no-console:0 */
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Trigger from 'rc-trigger';
-import '../../assets/index.less';
-
-const builtinPlacements = {
- left: {
- points: ['cr', 'cl'],
- },
- right: {
- points: ['cl', 'cr'],
- },
- top: {
- points: ['bc', 'tc'],
- },
- bottom: {
- points: ['tc', 'bc'],
- },
- topLeft: {
- points: ['bl', 'tl'],
- },
- topRight: {
- points: ['br', 'tr'],
- },
- bottomRight: {
- points: ['tr', 'br'],
- },
- bottomLeft: {
- points: ['tl', 'bl'],
- },
-};
-
-const popupBorderStyle = {
- border: '1px solid red',
- padding: 10,
-};
-
-const OuterContent = ({ getContainer }) => {
- return ReactDOM.createPortal(
- +
- I am outer content
-
-
,
- getContainer(),
- );
-};
-
-const Test = () => {
- const containerRef = React.useRef();
- const outerDivRef = React.useRef();
-
- const innerTrigger = (
-
-
- containerRef.current}
- popup={
-
- );
- return (
- I am inner Trigger Popup
}
- >
-
- clickToShowInnerTrigger
-
-
- i am a hover popup
}
- >
-
- trigger
-
-
-
-
-
-
-
- i am a click popup
- outerDivRef.current} />
-
- }
- >
-
-
-
-
- trigger
-
-
-
-
-
-
- );
-};
-
-export default Test;
diff --git a/docs/examples/point.less b/docs/examples/point.less
deleted file mode 100644
index 4adc341..0000000
--- a/docs/examples/point.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.point-popup {
- pointer-events: none;
-}
\ No newline at end of file
diff --git a/docs/examples/point.tsx b/docs/examples/point.tsx
deleted file mode 100644
index 228fb18..0000000
--- a/docs/examples/point.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/* eslint no-console:0 */
-
-import React from 'react';
-import Trigger from 'rc-trigger';
-import '../../assets/index.less';
-import './point.less';
-
-const builtinPlacements = {
- topLeft: {
- points: ['tl', 'tl'],
- },
-};
-
-const innerTrigger = (
- This is popup
-);
-
-class Test extends React.Component {
- state = {
- action: 'click',
- mouseEnterDelay: 0,
- };
-
- onActionChange = ({ target: { value } }) => {
- this.setState({ action: value });
- };
-
- onDelayChange = ({ target: { value } }) => {
- this.setState({ mouseEnterDelay: Number(value) || 0 });
- };
-
- render() {
- const { action, mouseEnterDelay } = this.state;
-
- return (
-
- {' '}
- {action === 'hover' && (
-
- )}
-
- );
- }
-}
-
-export default Test;
diff --git a/docs/examples/shadow.tsx b/docs/examples/shadow.tsx
deleted file mode 100644
index 6a1f5a2..0000000
--- a/docs/examples/shadow.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import '../../assets/index.less';
-
-const Demo = () => {
- return (
-
-
-
-
-
- Interactive region
-
-
-
-);
-
-const RefTarget = React.forwardRef((props, ref) => {
- React.useImperativeHandle(ref, () => ({}));
-
- return This is a example of trigger usage.
-You can adjust the value above
-which will also change the behaviour of popup.
-
-
-
- );
- }
-}
-
-export default Test;
diff --git a/docs/examples/static-scroll.tsx b/docs/examples/static-scroll.tsx
deleted file mode 100644
index 1f0e6e2..0000000
--- a/docs/examples/static-scroll.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
-import React from 'react';
-import '../../assets/index.less';
-import { builtinPlacements } from './inside';
-
-export default () => {
- return (
-
-
-
-
-
-
- trigger:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - -
- - - - - - -
- i am a popup
}
- popupTransitionName={state.transitionName}
- mobile={
- state.mobile
- ? {
- popupMotion: {
- motionName: 'rc-trigger-popup-mobile-fade',
- },
- popupClassName: 'rc-trigger-popup-mobile',
- popupStyle: {
- padding: 16,
- borderTop: '1px solid red',
- background: '#FFF',
- textAlign: 'center',
- },
- popupRender: (node) => (
- <>
-
-
-
- {node}
-
- ),
- }
- : null
- }
- >
-
-
- Popup
-
- }
- popupStyle={{ boxShadow: '0 0 5px red' }}
- popupVisible
- builtinPlacements={builtinPlacements}
- popupPlacement="top"
- stretch="minWidth"
- getPopupContainer={(e) => e.parentElement!}
- >
-
- Target
-
-
- {new Array(20).fill(null).map((_, index) => (
- - Placeholder Line {index} -
- ))} - -`visibleFirst` should not show in hidden region if still scrollable
- - - -
-
- Should Always place bottom
-
- }
- getPopupContainer={(n) => n.parentNode as any}
- popupStyle={{ boxShadow: '0 0 5px red' }}
- popupPlacement={enoughTop ? 'bottom' : 'top'}
- builtinPlacements={builtinPlacements}
- stretch="minWidth"
- >
-
- Target
-
-
-
-
+ ) =>
+ setValue(e.target.value)
+ }
+ type="text"
+ placeholder="The value of qrcode"
+ style={{ width: '100%' }}
+ />
+
+
+ );
+};
diff --git a/docs/index.md b/docs/index.md
index 2782d1c..0f134bd 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,7 +1,7 @@
---
hero:
- title: rc-trigger
- description: React Trigger Component
+ title: rc-qrcode
+ description: React Qrcode Component
---
\ No newline at end of file
diff --git a/index.js b/index.js
deleted file mode 100644
index 274f820..0000000
--- a/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// export this package's api
-import Trigger from './src/';
-export default Trigger;
diff --git a/index.ts b/index.ts
new file mode 100644
index 0000000..fcd952d
--- /dev/null
+++ b/index.ts
@@ -0,0 +1 @@
+export * from "./src";
\ No newline at end of file
diff --git a/jest.config.js b/jest.config.js
index 5328c18..1eb8160 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,3 +1,11 @@
module.exports = {
- setupFiles: ['./tests/setup.js'],
+ testEnvironment: 'jsdom',
+ setupFiles: ['./tests/setup.ts', 'jest-canvas-mock'],
+ setupFilesAfterEnv: ['+
- {content}
-
- );
-}
diff --git a/src/Popup/Mask.tsx b/src/Popup/Mask.tsx
deleted file mode 100644
index 86429ee..0000000
--- a/src/Popup/Mask.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import classNames from 'classnames';
-import type { CSSMotionProps } from 'rc-motion';
-import CSSMotion from 'rc-motion';
-import * as React from 'react';
-
-export interface MaskProps {
- prefixCls: string;
- open?: boolean;
- zIndex?: number;
- mask?: boolean;
-
- // Motion
- motion?: CSSMotionProps;
-}
-
-export default function Mask(props: MaskProps) {
- const {
- prefixCls,
- open,
- zIndex,
-
- mask,
- motion,
- } = props;
-
- if (!mask) {
- return null;
- }
-
- return (
-
- {arrow && (
-
- {childNode}
-
-
- );
- }}
-
-
-`;
diff --git a/tests/_utils.ts b/tests/_utils.ts
new file mode 100644
index 0000000..7d09ea6
--- /dev/null
+++ b/tests/_utils.ts
@@ -0,0 +1,22 @@
+import { act } from '@testing-library/react';
+
+/**
+ * Wait for a time delay. Will wait `advanceTime * times` ms.
+ *
+ * @param advanceTime Default 1000
+ * @param times Default 20
+ */
+export async function waitFakeTimer(advanceTime = 1000, times = 20) {
+ for (let i = 0; i < times; i += 1) {
+ // eslint-disable-next-line no-await-in-loop
+ await act(async () => {
+ await Promise.resolve();
+
+ if (advanceTime > 0) {
+ jest.advanceTimersByTime(advanceTime);
+ } else {
+ jest.runAllTimers();
+ }
+ });
+ }
+}
\ No newline at end of file
diff --git a/tests/align.test.tsx b/tests/align.test.tsx
deleted file mode 100644
index 9366cc7..0000000
--- a/tests/align.test.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import { act, cleanup, fireEvent, render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import React from 'react';
-import type { TriggerProps, TriggerRef } from '../src';
-import Trigger from '../src';
-import { awaitFakeTimer } from './util';
-
-import { _rs } from 'rc-resize-observer';
-
-export const triggerResize = (target: Element) => {
- act(() => {
- _rs([{ target } as ResizeObserverEntry]);
- });
-};
-
-describe('Trigger.Align', () => {
- let targetVisible = true;
-
- let rectX = 100;
- let rectY = 100;
- let rectWidth = 100;
- let rectHeight = 100;
-
- beforeAll(() => {
- spyElementPrototypes(HTMLDivElement, {
- getBoundingClientRect: () => ({
- x: rectX,
- y: rectY,
- width: rectWidth,
- height: rectHeight,
- right: 200,
- bottom: 200,
- }),
- });
-
- spyElementPrototypes(HTMLElement, {
- offsetParent: {
- get: () => (targetVisible ? document.body : null),
- },
- });
- spyElementPrototypes(SVGElement, {
- offsetParent: {
- get: () => (targetVisible ? document.body : null),
- },
- });
- });
-
- beforeEach(() => {
- targetVisible = true;
-
- rectX = 100;
- rectY = 100;
- rectWidth = 100;
- rectHeight = 100;
-
- jest.useFakeTimers();
- });
-
- afterEach(() => {
- cleanup();
- jest.useRealTimers();
- });
-
- it('not show', async () => {
- const onAlign = jest.fn();
-
- const Demo = (props: Partial
- Light
-
-
-click
-
- tooltip2}
- >
-
-
,
- document.createElement('div'),
- );
-
- trigger(container, '.target');
-
- const popupDomNode = document.querySelector('.rc-trigger-popup');
- expect(popupDomNode.parentNode).toBe(container.querySelector('.holder'));
- });
- });
-
- describe('action', () => {
- it('click works', () => {
- const { container } = render(
- click
- click
- click
- click
- click
- contextMenu
- contextMenu 1
- contextMenu 2
- click
-