Skip to content

Commit

Permalink
change more dropdowns to antd (#814)
Browse files Browse the repository at this point in the history 
* change more dropdowns to antd

* action select

* eslint errors

* remove react-select

* restore lost properties

* add height
  • Loading branch information
@EDsCODE
EDsCODE committed May 21, 2020
1 parent df48f47 commit 8480856
Show file tree
Hide file tree
Showing 9 changed files with 108 additions and 198 deletions.
75 changes: 43 additions & 32 deletions frontend/src/lib/components/ActionSelectBox.js
View file
@@ -1,9 +1,8 @@
import React, { Component, useState } from 'react'
import Select, { components } from 'react-select'
import { ActionSelectInfo } from 'scenes/trends/ActionSelectInfo'
import { selectStyle } from '../utils'
import PropTypes from 'prop-types'
import ActionSelectTab from './ActionSelectTab'
import { Select } from 'antd'

const determineActiveTab = props => {
if (props.selected) {
Expand Down Expand Up @@ -46,28 +45,14 @@ export class ActionSelectPanel extends Component {
}
}

Option = props => {
return (
<div
onMouseOver={e =>
this.setState({
infoOpen: true,
infoBoundingRect: e.target.getBoundingClientRect(),
infoActionId: props.value,
})
}
onMouseOut={() => {
this.setState({ infoOpen: false })
}}
>
<components.Option {...props} />
</div>
)
determineValue = active => {
if (active && active.filter && active.filter.type === this.props.title) return active.filter.id
return null
}

render() {
return (
<div style={{ padding: '1rem', height: '90%', width: '100%' }}>
<div style={{ padding: '1rem', height: '90%', width: '100%' }} id="action-select-popup">
{this.props.redirect}
{this.state.infoOpen && (
<ActionSelectInfo
Expand All @@ -77,19 +62,45 @@ export class ActionSelectPanel extends Component {
/>
)}
<Select
onBlur={e => {
if (e.relatedTarget && e.relatedTarget.tagName == 'A') return
this.setState({ infoOpen: false })
}}
getPopupContainer={() => document.getElementById('action-select-popup')}
showSearch
defaultOpen
onChange={this.props.onSelect}
defaultMenuIsOpen={this.props.defaultMenuIsOpen}
autoFocus={true}
value={this.props.active}
className="select-box-select"
styles={selectStyle}
components={{ Option: this.Option }}
options={this.props.options}
/>
style={{ width: '100%' }}
filterOption={(input, option) =>
option.children &&
option.children.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
value={this.determineValue(this.props.active)}
listHeight={300}
>
{this.props.options.map(typeGroup => {
if (typeGroup['options'].length > 0) {
return (
<Select.OptGroup key={typeGroup['label']} label={typeGroup['label']}>
{typeGroup['options'].map(item => (
<Select.Option key={item.value} value={item.value}>
<div
onMouseOver={e =>
this.setState({
infoOpen: true,
infoBoundingRect: e.target.getBoundingClientRect(),
infoActionId: item.value,
})
}
onMouseOut={() => {
this.setState({ infoOpen: false })
}}
>
{item.label}
</div>
</Select.Option>
))}
</Select.OptGroup>
)
}
})}
</Select>
{this.props.message}
</div>
)
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/lib/components/PropertyFilters/PropertyFilter.js
View file
Expand Up @@ -17,12 +17,14 @@ export function PropertyFilter({ index, onComplete, logic }) {
defaultOpen={!key}
placeholder="Property key"
value={key}
filterOption={(input, option) => option.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0}
filterOption={(input, option) =>
option.children && option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
onChange={(_, new_key) => setFilter(index, new_key.children, undefined, operator, new_key.type)}
style={{ width: '100%' }}
>
{eventProperties.length > 0 && (
<Select.OptGroup key="Event properties" lable="Event properties">
<Select.OptGroup key="Event properties" label="Event properties">
{eventProperties.map((item, index) => (
<Select.Option
key={'event_' + item.value}
Expand All @@ -36,7 +38,7 @@ export function PropertyFilter({ index, onComplete, logic }) {
</Select.OptGroup>
)}
{personProperties && (
<Select.OptGroup key="User properties" lable="User properties">
<Select.OptGroup key="User properties" label="User properties">
{personProperties.map((item, index) => (
<Select.Option
key={'person_' + item.value}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/scenes/actions/ActionStep.js
View file
Expand Up @@ -226,10 +226,10 @@ export class ActionStep extends Component {
<label>Event name</label>
<EventName
value={step.event}
onChange={item =>
onChange={value =>
this.sendStep({
...step,
event: item.value,
event: value,
})
}
/>
Expand Down
1 change: 0 additions & 1 deletion frontend/src/scenes/actions/ActionsTable.js
View file
Expand Up @@ -22,7 +22,6 @@ export function ActionsTable() {
{
title: 'Volume',
render: function RenderVolume(_, action) {
console.log(action)
return <span>{action.count}</span>
},
},
Expand Down
30 changes: 24 additions & 6 deletions frontend/src/scenes/actions/EventName.js
View file
@@ -1,20 +1,38 @@
import React from 'react'
import Select from 'react-select'
import { Select } from 'antd'
import { useValues } from 'kea'
import { userLogic } from 'scenes/userLogic'

export function EventName({ value, onChange }) {
const { eventNamesGrouped } = useValues(userLogic)

return (
<span>
<Select
options={eventNamesGrouped}
isSearchable={true}
isClearable={true}
showSearch
allowClear
style={{ width: '100%' }}
onChange={onChange}
filterOption={(input, option) =>
option.children && option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
disabled={eventNamesGrouped[0].options.length === 0}
value={value ? { label: value, value } : null}
/>
value={value}
>
{eventNamesGrouped.map(typeGroup => {
if (typeGroup['options'].length > 0) {
return (
<Select.OptGroup key={typeGroup['label']} label={typeGroup['label']}>
{typeGroup['options'].map(item => (
<Select.Option key={item.value} value={item.value}>
{item.label}
</Select.Option>
))}
</Select.OptGroup>
)
}
})}
</Select>
<br />
{eventNamesGrouped[0].options.length === 0 && "You haven't sent any custom events."}{' '}
<a href="https://docs.posthog.com/#/integrations" target="_blank" rel="noopener noreferrer">
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/scenes/trends/ActionFilter/ActionFilterDropdown.js
View file
Expand Up @@ -56,7 +56,7 @@ export function ActionPanelContainer({ entityType, panelIndex, options, logic })
const { entities, selectedFilter, filters } = useValues(logic)
const { updateFilter } = useActions(logic)

const dropDownOnSelect = item => updateFilter({ type: entityType, value: item.value, index: selectedFilter.index })
const dropDownOnSelect = value => updateFilter({ type: entityType, value: value, index: selectedFilter.index })
const dropDownOnHover = value => entities[entityType].filter(a => a.id === value)[0]

const redirect = () => {
Expand Down Expand Up @@ -92,7 +92,6 @@ export function ActionPanelContainer({ entityType, panelIndex, options, logic })
return null
}
}

return (
<ActionSelectPanel
key={panelIndex}
Expand All @@ -101,7 +100,7 @@ export function ActionPanelContainer({ entityType, panelIndex, options, logic })
defaultMenuIsOpen={true}
onSelect={dropDownOnSelect}
onHover={dropDownOnHover}
active={null}
active={selectedFilter}
redirect={redirect()}
message={message()}
/>
Expand Down
38 changes: 25 additions & 13 deletions frontend/src/scenes/users/CohortGroup.js
View file
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import { Card, CloseButton } from '../../lib/utils'
import { PropertyFilters } from '../../lib/components/PropertyFilters/PropertyFilters'
import Select from 'react-select'
import { Select } from 'antd'

import { actionsModel } from '~/models/actionsModel'
import { useValues } from 'kea'
Expand All @@ -24,9 +24,8 @@ function DayChoice({ days, name, group, onChange }) {
}

export function CohortGroup({ onChange, onRemove, group, index }) {
const { actionsGrouped, actions } = useValues(actionsModel)
const { actionsGrouped } = useValues(actionsModel)
const [selected, setSelected] = useState((group.action_id && 'action') || (group.properties && 'property'))

return (
<Card title={false} style={{ margin: 0 }}>
<div className="card-body">
Expand Down Expand Up @@ -81,17 +80,30 @@ export function CohortGroup({ onChange, onRemove, group, index }) {
{selected == 'action' && (
<div style={{ marginTop: '1rem', width: 350 }}>
<Select
options={actionsGrouped}
showSearch
placeholder="Select action..."
onChange={item => onChange({ action_id: item.value })}
value={{
label:
actions.length > 0 &&
group.action_id &&
actions.filter(action => action.id == group.action_id)[0].name,
value: group.action_id,
}}
/>
style={{ width: '100%' }}
onChange={value => onChange({ action_id: value })}
filterOption={(input, option) =>
option.children &&
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
value={group.action_id}
>
{actionsGrouped.map(typeGroup => {
if (typeGroup['options'].length > 0) {
return (
<Select.OptGroup key={typeGroup['label']} label={typeGroup['label']}>
{typeGroup['options'].map(item => (
<Select.Option key={item.value} value={item.value}>
{item.label}
</Select.Option>
))}
</Select.OptGroup>
)
}
})}
</Select>
</div>
)}
</div>
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Expand Up @@ -45,7 +45,6 @@
"react-dom": ">= 16.8",
"react-draggable": "^4.2.0",
"react-redux": "^7.2.0",
"react-select": "^3.0.8",
"react-shadow": "^17.4.0",
"react-stripe-elements": "^6.0.1",
"react-toastify": "^5.5.0",
Expand Down

0 comments on commit 8480856

Please sign in to comment.