Skip to content

Commit d6c196e

Browse files
mustranmustran
authored
Merge pull request #1396 from inplayer-org/feat/tagging-ui-components
Feat/tagging UI components
2 parents 19f8666 + a13f937 commit d6c196e

File tree

23 files changed

+592
-245
lines changed

23 files changed

+592
-245
lines changed

‎CHANGELOG.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,17 @@
22

33
All notable changes to this project will be documented in this file.
44

5+
# [2.5.19] - 21.01.2022
6+
7+
## Added
8+
9+
- Handlers for Input, TextArea, Pagination, Accordion and Switch.
10+
- Tagging Paywall previews
11+
12+
## Fixes
13+
14+
- TabNavigation handler type
15+
516
# [2.5.18] - 10.01.2022
617

718
## Added

‎index.d.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,24 +80,34 @@ export declare const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue;
8080
export enum AnalyticsEvents {
8181
CLICK = 'click',
8282
DROPDOWN_CHANGE = 'dropdown_change',
83+
SWITCH_ON = 'switch_on',
84+
SWITCH_OFF = 'switch_off',
8385
DROPDOWN_SELECT = 'dropdown_select',
8486
CHECKBOX_ON = 'checkbox_on',
8587
CHECKBOX_OFF = 'checkbox_off',
8688
RADIOBUTTON_SELECT = 'radiobutton_select',
8789
DATEPICKER_CHANGE = 'datepicker_date_change',
8890
DAYPICKER_CHANGE = 'daypicker_date_change',
91+
KEYBOARD_EVENT = 'keyboard_event',
8992
}
9093

9194
export enum AnalyticsComponentType {
9295
BUTTON = 'button',
9396
DROPDOWN = 'dropdown',
97+
SWITCH = 'switch',
98+
PAGINATION = 'pagination',
9499
ICON = 'icon',
95100
LINK = 'link',
96101
CHECKBOX = 'checkbox',
97102
DATEPICKER = 'datepicker',
98103
DAYPICKER = 'daypicker',
99104
DATEPICKER_PRESET = 'datepicker_preset',
100105
TAB = 'tab',
106+
ACCORDION = 'accordion',
107+
MODAL = 'modal',
108+
INPUT = 'input',
109+
TEXTAREA = 'textarea',
110+
TAB_NAVIGATION = 'tab_navigation',
101111
}
102112

103113
export interface Event {

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@inplayer-org/inplayer-ui",
33
"sideEffects": false,
4-
"version": "2.5.17",
4+
"version": "2.5.19",
55
"author": "InPlayer",
66
"description": "InPlayer React UI Components",
77
"main": "dist/inplayer-ui.cjs.js",

‎src/analytics/index.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,24 +40,34 @@ export interface AnalyticsProps {
4040
export enum AnalyticsEvents {
4141
CLICK = 'click',
4242
DROPDOWN_CHANGE = 'dropdown_change',
43+
SWITCH_ON = 'switch_on',
44+
SWITCH_OFF = 'switch_off',
4345
DROPDOWN_SELECT = 'dropdown_select',
4446
CHECKBOX_ON = 'checkbox_on',
4547
CHECKBOX_OFF = 'checkbox_off',
4648
RADIOBUTTON_SELECT = 'radiobutton_select',
4749
DATEPICKER_CHANGE = 'datepicker_date_change',
4850
DAYPICKER_CHANGE = 'daypicker_date_change',
51+
KEYBOARD_EVENT = 'keyboard_event',
4952
}
5053

5154
export enum AnalyticsComponentType {
5255
BUTTON = 'button',
5356
DROPDOWN = 'dropdown',
57+
SWITCH = 'switch',
58+
PAGINATION = 'pagination',
5459
ICON = 'icon',
5560
LINK = 'link',
5661
CHECKBOX = 'checkbox',
5762
DATEPICKER = 'datepicker',
5863
DAYPICKER = 'daypicker',
5964
DATEPICKER_PRESET = 'datepicker_preset',
6065
TAB = 'tab',
66+
ACCORDION = 'accordion',
67+
MODAL = 'modal',
68+
INPUT = 'input',
69+
TEXTAREA = 'textarea',
70+
TAB_NAVIGATION = 'tab_navigation',
6171
}
6272

6373
export interface Event {

‎src/components/Accordion/AccordionPanel.tsx

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import React, { SyntheticEvent, ReactElement } from 'react';
22
import styled, { css } from 'styled-components';
33
import { ifProp, ifNotProp, prop } from 'styled-tools';
4+
import { FaAngleUp, FaAngleDown } from 'react-icons/fa';
5+
import {
6+
AnalyticsComponent,
7+
AnalyticsProps,
8+
AnalyticsEvents,
9+
AnalyticsComponentType,
10+
} from '../../analytics';
411

512
// Components
6-
import { FaAngleUp, FaAngleDown } from 'react-icons/fa';
713
import colors from '../../theme/colors';
814
import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
915
import Typography from '../Typography';
10-
import { AnalyticsProps } from '../../analytics';
1116

1217
// Types
1318
type AccordionPanelContainerProps = {
@@ -138,23 +143,42 @@ const AccordionPanel = ({
138143
disabled,
139144
togglePanel,
140145
closePanel,
141-
tag,
146+
tag = '',
142147
}: Props) => (
143148
<>
144-
<AccordionPanelHeader
145-
disabled={disabled}
146-
onClick={!disabled ? togglePanel : null}
147-
isActive={isActive}
148-
tag={tag}
149-
>
150-
<AccordionTitle variant="h6" isActive={isActive} disabled={disabled}>
151-
{label}
152-
</AccordionTitle>
153-
<AccordionIconHolder isAccordionDisabled={disabled}>
154-
{!isOtherPanelActive && (iconTooltip ? <Tooltip {...iconTooltip}>{icon}</Tooltip> : icon)}
155-
{!disabled && (isActive ? <StyledAngleUp /> : <StyledAngleDown />)}
156-
</AccordionIconHolder>
157-
</AccordionPanelHeader>
149+
<AnalyticsComponent>
150+
{({ pages, tracker, merchantId, ip }) => (
151+
<AccordionPanelHeader
152+
disabled={disabled}
153+
onClick={(e: SyntheticEvent<Element, Event>) => {
154+
if (!disabled) {
155+
togglePanel(e);
156+
if (tag && !isActive) {
157+
tracker.track({
158+
event: AnalyticsEvents.CLICK,
159+
type: AnalyticsComponentType.ACCORDION,
160+
tag,
161+
pages,
162+
merchantId,
163+
ip,
164+
});
165+
}
166+
}
167+
}}
168+
isActive={isActive}
169+
tag={tag}
170+
>
171+
<AccordionTitle variant="h6" isActive={isActive} disabled={disabled}>
172+
{label}
173+
</AccordionTitle>
174+
<AccordionIconHolder isAccordionDisabled={disabled}>
175+
{!isOtherPanelActive &&
176+
(iconTooltip ? <Tooltip {...iconTooltip}>{icon}</Tooltip> : icon)}
177+
{!disabled && (isActive ? <StyledAngleUp /> : <StyledAngleDown />)}
178+
</AccordionIconHolder>
179+
</AccordionPanelHeader>
180+
)}
181+
</AnalyticsComponent>
158182
<AccordionPanelContainer isActive={isActive} contentHeight={contentHeight}>
159183
<AccordionPanelDetails>{isActive && renderContent({ closePanel })}</AccordionPanelDetails>
160184
</AccordionPanelContainer>

‎src/components/Input/Input.tsx

Lines changed: 93 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import React, { ChangeEvent, ReactNode, forwardRef, RefObject } from 'react';
1+
import React, { ChangeEvent, ReactNode, forwardRef, RefObject, KeyboardEvent } from 'react';
22
import styled, { css } from 'styled-components';
33
import { ifProp, switchProp } from 'styled-tools';
44
import { MdSearch } from 'react-icons/md';
55
import colors from '../../theme/colors';
6-
import { AnalyticsProps } from '../../analytics';
6+
import {
7+
AnalyticsComponent,
8+
AnalyticsProps,
9+
AnalyticsEvents,
10+
AnalyticsComponentType,
11+
} from '../../analytics';
712

813
type Size = 'xs' | 'sm' | 'md' | 'lg';
914

@@ -95,7 +100,7 @@ type RefType =
95100

96101
const Input = forwardRef(
97102
(
98-
{ type, placeholder, onChange, sizeProp, className = '', icon, ...rest }: Props,
103+
{ type, placeholder, onChange, sizeProp, className = '', icon, tag = '', ...rest }: Props,
99104
ref: RefType
100105
) => {
101106
const onInputChange = (e: ChangeEvent<HTMLInputElement>): any => {
@@ -107,35 +112,95 @@ const Input = forwardRef(
107112

108113
if (type === 'search') {
109114
return (
110-
<InputWrapper>
111-
<IconContainer>
112-
<MdSearch />
113-
</IconContainer>
114-
<StyledInput
115-
sizeProp={sizeProp}
116-
ref={ref}
117-
type={type}
118-
placeholder={placeholder}
119-
{...rest}
120-
onChange={onInputChange}
121-
/>
122-
</InputWrapper>
115+
<AnalyticsComponent>
116+
{({ pages, tracker, merchantId, ip }) => (
117+
<InputWrapper>
118+
<IconContainer>
119+
<MdSearch />
120+
</IconContainer>
121+
<StyledInput
122+
sizeProp={sizeProp}
123+
ref={ref}
124+
type={type}
125+
placeholder={placeholder}
126+
onChange={onInputChange}
127+
onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
128+
if (e.key === 'Enter') {
129+
if (tag) {
130+
tracker.track({
131+
event: AnalyticsEvents.KEYBOARD_EVENT,
132+
type: AnalyticsComponentType.INPUT,
133+
tag: `${tag}_enter`,
134+
pages,
135+
merchantId,
136+
ip,
137+
});
138+
}
139+
}
140+
}}
141+
onClick={() => {
142+
if (tag) {
143+
tracker.track({
144+
event: AnalyticsEvents.CLICK,
145+
type: AnalyticsComponentType.INPUT,
146+
tag,
147+
pages,
148+
merchantId,
149+
ip,
150+
});
151+
}
152+
}}
153+
{...rest}
154+
/>
155+
</InputWrapper>
156+
)}
157+
</AnalyticsComponent>
123158
);
124159
}
125160

126161
return (
127-
<InputWrapper className={className}>
128-
<IconContainer>{icon}</IconContainer>
129-
<StyledInput
130-
sizeProp={sizeProp}
131-
ref={ref}
132-
type={type || 'text'}
133-
placeholder={placeholder}
134-
onChange={onInputChange}
135-
icon={icon}
136-
{...rest}
137-
/>
138-
</InputWrapper>
162+
<AnalyticsComponent>
163+
{({ pages, tracker, merchantId, ip }) => (
164+
<InputWrapper className={className}>
165+
<IconContainer>{icon}</IconContainer>
166+
<StyledInput
167+
sizeProp={sizeProp}
168+
ref={ref}
169+
type={type || 'text'}
170+
placeholder={placeholder}
171+
onChange={onInputChange}
172+
icon={icon}
173+
onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
174+
if (tag) {
175+
if (e.key === 'Enter') {
176+
tracker.track({
177+
event: AnalyticsEvents.KEYBOARD_EVENT,
178+
type: AnalyticsComponentType.INPUT,
179+
tag: `${tag}_enter`,
180+
pages,
181+
merchantId,
182+
ip,
183+
});
184+
}
185+
}
186+
}}
187+
onClick={() => {
188+
if (tag) {
189+
tracker.track({
190+
event: AnalyticsEvents.CLICK,
191+
type: AnalyticsComponentType.INPUT,
192+
tag,
193+
pages,
194+
merchantId,
195+
ip,
196+
});
197+
}
198+
}}
199+
{...rest}
200+
/>
201+
</InputWrapper>
202+
)}
203+
</AnalyticsComponent>
139204
);
140205
}
141206
);

‎src/components/Modal/ModalHeader.tsx

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { ReactChild } from 'react';
22
import styled from 'styled-components';
3+
import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
34

45
import colors from '../../theme/colors';
56
import Typography from '../Typography';
@@ -36,8 +37,26 @@ const IconClose = styled.span`
3637

3738
const ModalHeader = ({ children, closeModal }: Props) => (
3839
<HeaderWrapper>
39-
<Title variant="h4">{children}</Title>
40-
<IconClose onClick={closeModal} />
40+
<AnalyticsComponent>
41+
{({ pages, tracker, merchantId, ip }) => (
42+
<>
43+
<Title variant="h4">{children}</Title>
44+
<IconClose
45+
onClick={() => {
46+
tracker.track({
47+
event: AnalyticsEvents.CLICK,
48+
type: AnalyticsComponentType.MODAL,
49+
tag: 'icon_close',
50+
pages,
51+
merchantId,
52+
ip,
53+
});
54+
closeModal();
55+
}}
56+
/>
57+
</>
58+
)}
59+
</AnalyticsComponent>
4160
</HeaderWrapper>
4261
);
4362

‎src/components/Pagination/PageBoxContainer.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { ButtonHTMLAttributes } from 'react';
2+
import {
3+
AnalyticsComponent,
4+
AnalyticsEvents,
5+
AnalyticsComponentType,
6+
AnalyticsProps,
7+
} from '../../analytics';
8+
import { PageBox, BoxStyles } from './styled';
9+
10+
interface Props extends ButtonHTMLAttributes<HTMLButtonElement>, AnalyticsProps, BoxStyles {}
11+
const PageBoxContainer = ({ onClick, tag = '', ...rest }: Props) => (
12+
<AnalyticsComponent>
13+
{({ pages, tracker, merchantId, ip }) => (
14+
<PageBox
15+
onClick={(e) => {
16+
onClick?.(e);
17+
if (tag) {
18+
tracker.track({
19+
event: AnalyticsEvents.CLICK,
20+
type: AnalyticsComponentType.PAGINATION,
21+
tag,
22+
pages,
23+
merchantId,
24+
ip,
25+
});
26+
}
27+
}}
28+
{...rest}
29+
/>
30+
)}
31+
</AnalyticsComponent>
32+
);
33+
34+
export default PageBoxContainer;

0 commit comments

Comments
 (0)