From e6a998b3b21fb6c900a9b4c5b24c28a0e599b705 Mon Sep 17 00:00:00 2001 From: Navin Date: Wed, 14 Oct 2020 17:43:09 +0530 Subject: [PATCH] =?UTF-8?q?refactor(accordion):=20=E2=99=BB=EF=B8=8F=20=20?= =?UTF-8?q?remove=20console=20logs=20&=20rename=20item=20to=20trigger?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...AccordionItem.tsx => AccordionTrigger.tsx} | 22 +++++++++------- src/accordion/__tests__/Accordion.test.tsx | 10 +++---- src/accordion/index.ts | 2 +- src/accordion/stories/Accordion.stories.tsx | 26 +++++++++---------- src/calendar/CalendarState.ts | 1 - src/calendar/__tests__/RangeCalendar.test.tsx | 6 +---- .../stories/RangeCalendar.stories.tsx | 6 +---- .../stories/DateRangePicker.stories.tsx | 6 +---- .../stories/NumberInput.stories.tsx | 1 - src/select/SelectState.ts | 1 - 10 files changed, 34 insertions(+), 47 deletions(-) rename src/accordion/{AccordionItem.tsx => AccordionTrigger.tsx} (85%) diff --git a/src/accordion/AccordionItem.tsx b/src/accordion/AccordionTrigger.tsx similarity index 85% rename from src/accordion/AccordionItem.tsx rename to src/accordion/AccordionTrigger.tsx index b3a85bc1b..e50322efd 100644 --- a/src/accordion/AccordionItem.tsx +++ b/src/accordion/AccordionTrigger.tsx @@ -14,7 +14,7 @@ import { createHook, createComponent } from "reakit-system"; import { ACCORDION_ITEM_KEYS } from "./__keys"; import { AccordionStateReturn } from "./AccordionState"; -export type AccordionItemOptions = ButtonOptions & +export type AccordionTriggerOptions = ButtonOptions & CompositeItemOptions & Pick, "manual"> & Pick< @@ -28,13 +28,15 @@ export type AccordionItemOptions = ButtonOptions & | "allowToggle" >; -export type AccordionItemHTMLProps = ButtonHTMLProps & CompositeItemHTMLProps; +export type AccordionTriggerHTMLProps = ButtonHTMLProps & + CompositeItemHTMLProps; -export type AccordionItemProps = AccordionItemOptions & AccordionItemHTMLProps; +export type AccordionTriggerProps = AccordionTriggerOptions & + AccordionTriggerHTMLProps; -export const useAccordionItem = createHook< - AccordionItemOptions, - AccordionItemHTMLProps +export const useAccordionTrigger = createHook< + AccordionTriggerOptions, + AccordionTriggerHTMLProps >({ name: "Accordion", compose: [useButton, useCompositeItem], @@ -125,20 +127,20 @@ export const useAccordionItem = createHook< }, }); -export const AccordionItem = createComponent({ +export const AccordionTrigger = createComponent({ as: "button", memo: true, - useHook: useAccordionItem, + useHook: useAccordionTrigger, }); -function isAccordionSelected(options: AccordionItemOptions) { +function isAccordionSelected(options: AccordionTriggerOptions) { const { id, allowMultiple, selectedId, selectedIds } = options; if (!allowMultiple) return selectedId === id; return selectedIds?.includes(id); } -function useAccordionPanelId(options: AccordionItemOptions) { +function useAccordionPanelId(options: AccordionTriggerOptions) { const { panels, id } = options; return React.useMemo( diff --git a/src/accordion/__tests__/Accordion.test.tsx b/src/accordion/__tests__/Accordion.test.tsx index 779290dcf..945caee2e 100644 --- a/src/accordion/__tests__/Accordion.test.tsx +++ b/src/accordion/__tests__/Accordion.test.tsx @@ -4,7 +4,7 @@ import { axe, render, press } from "reakit-test-utils"; import { AccordionPanel, Accordion, - AccordionItem, + AccordionTrigger, useAccordionState, } from "../index"; @@ -14,17 +14,17 @@ const AccordionComponent = (props: any) => { return (

- Trigger 1 + Trigger 1

Panel 1

- + Trigger 2 - +

Panel 2

- Trigger 3 + Trigger 3

Panel 3 diff --git a/src/accordion/index.ts b/src/accordion/index.ts index 91fc29554..e05657dad 100644 --- a/src/accordion/index.ts +++ b/src/accordion/index.ts @@ -1,4 +1,4 @@ export * from "./AccordionState"; export * from "./Accordion"; -export * from "./AccordionItem"; +export * from "./AccordionTrigger"; export * from "./AccordionPanel"; diff --git a/src/accordion/stories/Accordion.stories.tsx b/src/accordion/stories/Accordion.stories.tsx index 5899ce574..4713b00de 100644 --- a/src/accordion/stories/Accordion.stories.tsx +++ b/src/accordion/stories/Accordion.stories.tsx @@ -5,7 +5,7 @@ import "./index.css"; import { useAccordionState, Accordion, - AccordionItem, + AccordionTrigger, AccordionPanel, AccordionInitialState, } from "../index"; @@ -20,25 +20,25 @@ const AccordionComponent: React.FC = props => { return (

- Trigger 1 + Trigger 1

Panel 1

- Trigger 2 + Trigger 2

Panel 2

- + Trigger 3 - +

Panel 3

- Trigger 4 + Trigger 4

Panel 4

- Trigger 5 + Trigger 5

Panel 5 @@ -66,12 +66,12 @@ export const Styled = () => { return (

- + Personal Information - +

@@ -117,12 +117,12 @@ export const Styled = () => {

- + Billing Address - +

@@ -152,12 +152,12 @@ export const Styled = () => {

- + Shipping Address - +

diff --git a/src/calendar/CalendarState.ts b/src/calendar/CalendarState.ts index db70e17d6..ca1daded8 100644 --- a/src/calendar/CalendarState.ts +++ b/src/calendar/CalendarState.ts @@ -69,7 +69,6 @@ export function useCalendarState(props: CalendarInitialState = {}) { onChange, shouldUpdate: (prev, next) => prev !== next, }); - console.log("%c value", "color: #d90000", value); const minValue = parseDate(minValueProp); const maxValue = parseDate(maxValueProp); diff --git a/src/calendar/__tests__/RangeCalendar.test.tsx b/src/calendar/__tests__/RangeCalendar.test.tsx index 75a85e5de..ed2f1a447 100644 --- a/src/calendar/__tests__/RangeCalendar.test.tsx +++ b/src/calendar/__tests__/RangeCalendar.test.tsx @@ -17,11 +17,7 @@ const RangeCalendarComp: React.FC = props => { const state = useRangeCalendarState(props); return ( - console.log("change")} - className="calendar-range" - > +
previous year diff --git a/src/calendar/stories/RangeCalendar.stories.tsx b/src/calendar/stories/RangeCalendar.stories.tsx index 030e9ed28..ccd04ec78 100644 --- a/src/calendar/stories/RangeCalendar.stories.tsx +++ b/src/calendar/stories/RangeCalendar.stories.tsx @@ -32,11 +32,7 @@ const RangeCalendarComp: React.FC = props => { const state = useRangeCalendarState(props); return ( - console.log("change")} - className="calendar-range" - > +
diff --git a/src/datepicker/stories/DateRangePicker.stories.tsx b/src/datepicker/stories/DateRangePicker.stories.tsx index 251b4e712..e3ac36dfb 100644 --- a/src/datepicker/stories/DateRangePicker.stories.tsx +++ b/src/datepicker/stories/DateRangePicker.stories.tsx @@ -39,11 +39,7 @@ export default { const RangeCalendarComp: React.FC = state => { return ( - console.log("change")} - className="calendar-range" - > +
diff --git a/src/number-input/stories/NumberInput.stories.tsx b/src/number-input/stories/NumberInput.stories.tsx index 86cc51c88..b64241aff 100644 --- a/src/number-input/stories/NumberInput.stories.tsx +++ b/src/number-input/stories/NumberInput.stories.tsx @@ -9,7 +9,6 @@ import { UseNumberInputProps, useNumberInputState } from "../NumberInputState"; const NumberInputComp = (props: UseNumberInputProps) => { const state = useNumberInputState(props); - console.log("%c state", "color: #5200cc", state); return (
diff --git a/src/select/SelectState.ts b/src/select/SelectState.ts index 7b3d7de37..5c851a18c 100644 --- a/src/select/SelectState.ts +++ b/src/select/SelectState.ts @@ -92,7 +92,6 @@ export const useSelectState = ( const setSelected = React.useCallback( (value: string, shouldRemainOpen?: boolean) => { if (allowMultiselect) { - console.log("%c selectedValue", "color: #00a3cc", selectedValue); selectedValue.includes(value) ? setSelectedValue(selectedValue.filter(item => item !== value)) : setSelectedValue([...selectedValue, value]);