diff --git a/src/stories/Area.stories.js b/src/stories/Area.stories.js index 216fdc5..7504151 100644 --- a/src/stories/Area.stories.js +++ b/src/stories/Area.stories.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment, useRef } from 'react'; import Mapper from './components/Mapper'; const Area = { @@ -19,7 +19,9 @@ ShowHighlightedArea.argTypes = { active: { control: 'boolean' }, }; -export const StaySelectedHighlightedArea = args => ; +export const StaySelectedHighlightedArea = args => ( + +); StaySelectedHighlightedArea.args = { stayHighlighted: true, @@ -29,4 +31,55 @@ StaySelectedHighlightedArea.argTypes = { stayHighlighted: { control: 'boolean' }, }; +export const StayMultipleSelectedHighlightedArea = args => { + const myRef = useRef(null); + + const callingMe = () => { + myRef.current.clearHighlightedArea(); + }; + + return ( + ( + +

For Clear Multiple Selected Highlight

+ +
+ )} + /> + ); +}; + +StayMultipleSelectedHighlightedArea.args = { + stayMultiHighlighted: true, +}; + +StayMultipleSelectedHighlightedArea.argTypes = { + stayMultiHighlighted: { control: 'boolean' }, +}; + +export const ToggleStayHighlightedArea = args => ( + +); + +ToggleStayHighlightedArea.args = { + stayHighlighted: true, + stayMultiHighlighted: false, + toggleHighlighted: true, +}; + +ToggleStayHighlightedArea.argTypes = { + stayHighlighted: { control: 'boolean' }, + stayMultiHighlighted: { control: 'boolean' }, + toggleHighlighted: { control: 'boolean' }, +}; + export default Area;