MOCO Browser Extension (#2)
* spike * initial draft * updated styling * skeleton * added bubble script to webpack * added linter settings * installs * first implementation * Update webpack config - write bundle to `/build` - add support for SASS - improve options view as a proof o concept for styling * Update es-lint rules to mach mocoapp * Upgrade npm packages * Mount Bubble only for configured services * Update react and babel * Move module resolution config to webpack * Syncrhonize apiClient with chrome storage * Load projects and initialize form with last project and task * Enhance service * Improve handling of changeset with defaults * Create activity * Show error page on missing configuration * Refactor so that changeset can be used as activity params * Show form errors * Fetch and show booked hours for service * Allow to book hours with colon, error handling, spinner * WIP: Shadow DOM * Remove shadow dom * Render App in iframe * Refactor App component to load projects and create activity * Bugsnag integration * Add title to form and timer hint to hours input field * Configure positioning of bubble * Get rid of shared browser instance * Show Calendar and animate buble * Update webpack config * Prevent double animation of bubble * Fix eslint * Add margin to iframe body * Submit form when pressing enter on textarea * Open select on Enter * Use local environment for development * Show upgrade error if version invalid * Add asana service * Add jira and wunderlist services, add better support for query strings * Match urls with hash * Show popup in browser action * Pump version, add version to zip file * Add youtrack service * WIP: always show browserAction * Refactor * Update design * Finalize release 1.0.3 * Fix styles * Add support for Firefox browser * Extract common webpack config * Fix eslint * Close modal with ESC key * Use TimeInputParser to parse hours input * Improve webpack config * Show modal instead of popup when clicking on browser action * Pre-select last booked activities on service * Remove badge from booked hours * Show error and success feedback on options page * Remove updateBrowserActionForTab * Animate Bubble on unmount * Fix select date * Refactor * Fix key shortcut * Show schedule in calendar * Upload source maps to bugsnag * Upload sourcemaps to bugsnag * Define command shortcuts * Fix race condition where both Bubble and content wanted to mount Popup The content script is now the only place, where the Popup is mounted * Replace hash in filename by version * No new line in textarea and updated shortcuts for chrome * Change shortcut to Ctrl+Shift+K * Fix cors issue in new chrome 73 * Style improvements * Only report errors from own sources * Prevent sending messages to browser tabs * Fix scrollbars in iframe * Add error page for unknown error * Add stop propagation to Bubble click event * Update error pages * Remove timeout in tabHandler. The messaging error occurs only when the browser extension is reloaded/updated without refreshing the browser tab. * Refactor messaging * Show spinner in popup * Extract message handler to own module * Update styles and texts of error pages * Ensure focus is on document when opening popup * Find projects by identifier and value, do not highlight selected option in select component * Update docs * Spread match properties on service; improve remote service configuration for jira and wunderlist * Add webpack plugin to remove source mapping url * Bugsnag do not collect user ip * Upload source maps before removing source mapping url in bundles * Add support for regex url patterns, update asana config. * Fix animation Set default transform property via css * Improve config for asana * Change to fad-in/out animation
This commit is contained in:
Manuel Bouza
132
src/js/components/Select.js
Normal file
132
src/js/components/Select.js
Normal file
@@ -0,0 +1,132 @@
|
||||
import React, { Component } from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import ReactSelect, { createFilter } from "react-select"
|
||||
import {
|
||||
values,
|
||||
isString,
|
||||
isNumber,
|
||||
join,
|
||||
filter,
|
||||
compose,
|
||||
property,
|
||||
flatMap,
|
||||
pathEq
|
||||
} from "lodash/fp"
|
||||
|
||||
const hasOptionGroups = options =>
|
||||
options.some(option => Boolean(option.options))
|
||||
|
||||
const customTheme = theme => ({
|
||||
...theme,
|
||||
borderRadius: 0,
|
||||
spacing: {
|
||||
...theme.spacing,
|
||||
baseUnit: 3,
|
||||
controlHeight: 32
|
||||
},
|
||||
colors: {
|
||||
...theme.colors,
|
||||
primary: "#38b5eb",
|
||||
primary75: "rgba(56, 181, 235, 0.25)",
|
||||
primary50: "#38b5eb",
|
||||
primary25: "#38b5eb"
|
||||
}
|
||||
})
|
||||
|
||||
const customStyles = props => ({
|
||||
control: (base, _state) => ({
|
||||
...base,
|
||||
borderColor: props.hasError ? "#FB3A2F" : base.borderColor
|
||||
}),
|
||||
valueContainer: base => ({
|
||||
...base,
|
||||
padding: "4px 12px"
|
||||
}),
|
||||
input: base => ({
|
||||
...base,
|
||||
border: "0 !important",
|
||||
boxShadow: "0 !important"
|
||||
}),
|
||||
groupHeading: (base, _state) => ({
|
||||
...base,
|
||||
color: "black",
|
||||
textTransform: "none",
|
||||
fontWeight: "bold",
|
||||
fontSize: "100%",
|
||||
padding: "2px 7px 4px"
|
||||
}),
|
||||
option: (base, state) => ({
|
||||
...base,
|
||||
padding: hasOptionGroups(state.options)
|
||||
? "4px 7px 4px 20px"
|
||||
: "4px 7px 4px",
|
||||
backgroundColor: state.isFocused ? "#38b5eb" : "none",
|
||||
color: state.isFocused ? "white" : "hsl(0, 0%, 20%)"
|
||||
})
|
||||
})
|
||||
|
||||
const filterOption = createFilter({
|
||||
stringify: compose(
|
||||
join(" "),
|
||||
filter(value => isString(value) || isNumber(value)),
|
||||
values,
|
||||
property("data")
|
||||
)
|
||||
})
|
||||
|
||||
export default class Select extends Component {
|
||||
static propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
options: PropTypes.array,
|
||||
hasError: PropTypes.bool,
|
||||
onChange: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
static findOptionByValue = (selectOptions, value) => {
|
||||
const options = flatMap(
|
||||
option => (option.options ? option.options : option),
|
||||
selectOptions
|
||||
)
|
||||
|
||||
return options.find(pathEq("value", value)) || null
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.select = React.createRef()
|
||||
}
|
||||
|
||||
handleChange = option => {
|
||||
const { name, onChange } = this.props
|
||||
const { value } = option
|
||||
onChange({ target: { name, value } })
|
||||
};
|
||||
|
||||
handleKeyDown = event => {
|
||||
if (!this.select.current) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.select.current.state.menuIsOpen && event.key === "Enter") {
|
||||
this.select.current.setState({ menuIsOpen: true })
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value, ...passThroughProps } = this.props
|
||||
|
||||
return (
|
||||
<ReactSelect
|
||||
{...passThroughProps}
|
||||
ref={this.select}
|
||||
value={Select.findOptionByValue(this.props.options, value)}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
filterOption={filterOption}
|
||||
theme={customTheme}
|
||||
styles={customStyles(this.props)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user