Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 1x 2x 2x 2x 2x | import React, { useReducer, forwardRef, useEffect } from 'react';
import { type StrokeOptions } from 'perfect-freehand';
import { PointerContext, PointerDispatchContext, reducer, type Dispatch } from '../store';
import { OptionContext, OptionDispatchContext, reducerOption, defaultOptions } from '../options';
import { Signature as Container } from './Signature';
import { Paths } from './Paths';
export * from 'perfect-freehand';
export * from '../utils';
export * from '../options';
export * from '../store';
export type SignatureCanvasRef = {
canvas: HTMLCanvasElement | null;
dispatch: Dispatch;
clear: () => void;
};
export interface SignatureProps extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
prefixCls?: string;
options?: StrokeOptions;
readonly?: boolean;
defaultPoints?: Record<string, number[][]>;
onPointer?: (points: number[][]) => void;
}
const Signature = forwardRef<SignatureCanvasRef, SignatureProps>(
({ children, options, defaultPoints, ...props }, ref) => {
const [state, dispatch] = useReducer(reducer, Object.assign({}, defaultPoints));
const [stateOption, dispatchOption] = useReducer(reducerOption, Object.assign({ ...defaultOptions }, options));
useEffect(() => dispatchOption({ ...options }), [options]);
return (
<PointerContext.Provider value={state}>
<PointerDispatchContext.Provider value={dispatch}>
<OptionContext.Provider value={stateOption}>
<OptionDispatchContext.Provider value={dispatchOption}>
<Container {...props} ref={ref}>
{children}
</Container>
<Paths />
</OptionDispatchContext.Provider>
</OptionContext.Provider>
</PointerDispatchContext.Provider>
</PointerContext.Provider>
);
},
);
export default Signature;
|