1285efc49a
* feat: i18n * Changing language single source of truth from TEAM to USER * Changes according to @tommoor comments on PR * Changed package.json for build:i18n and translation label * Finished 1st MVP of i18n for outline * new translation labels & Portuguese from Portugal translation * Fixes from PR request * Described language dropdown as an experimental feature * Set keySeparator to false in order to cowork with html keys * Added useTranslation to Breadcrumb * Repositioned <strong> element * Removed extra space from TemplatesMenu * Fortified the test suite for i18n * Fixed trans component problematic * Check if selected language is available * Update yarn.lock * Removed unused Trans * Removing debug variable from i18n init * Removed debug variable * test: update snapshots * flow: Remove decorator usage to get proper flow typing It's a shame, but hopefully we'll move to Typescript in the next 6 months and we can forget this whole Flow mistake ever happened * translate: Drafts * More translatable strings * Mo translation strings * translation: Search * async translations loading * cache translations in client * Revert "cache translations in client" This reverts commit 08fb61ce36384ff90a704faffe4761eccfb76da1. * Revert localStorage cache for cache headers * Update Crowdin configuration file * Moved translation files to locales folder and fixed english text * Added CONTRIBUTING File for CrowdIn * chore: Move translations again to please CrowdIn * fix: loading paths chore: Add strings for editor * fix: Improve validation on documents.import endpoint * test: mock bull * fix: Unknown mimetype should fallback to Markdown parsing if markdown extension (#1678) * closes #1675 * Update CONTRIBUTING * chore: Add link to translation portal from app UI * refactor: Centralize language config * fix: Ensure creation of i18n directory in build * feat: Add language prompt * chore: Improve contributing guidelines, add link from README * chore: Normalize tab header casing * chore: More string externalization * fix: Language prompt in dark mode Co-authored-by: André Glatzl <andreglatzl@gmail.com>
98 lines
2.2 KiB
JavaScript
98 lines
2.2 KiB
JavaScript
// @flow
|
|
import { SearchIcon } from "outline-icons";
|
|
import * as React from "react";
|
|
import styled, { withTheme } from "styled-components";
|
|
import Flex from "components/Flex";
|
|
import { type Theme } from "types";
|
|
|
|
type Props = {
|
|
onChange: (string) => void,
|
|
defaultValue?: string,
|
|
placeholder?: string,
|
|
theme: Theme,
|
|
};
|
|
|
|
class SearchField extends React.Component<Props> {
|
|
input: ?HTMLInputElement;
|
|
|
|
componentDidMount() {
|
|
if (this.props && this.input) {
|
|
// ensure that focus is placed at end of input
|
|
const len = (this.props.defaultValue || "").length;
|
|
this.input.setSelectionRange(len, len);
|
|
}
|
|
}
|
|
|
|
handleChange = (ev: SyntheticEvent<HTMLInputElement>) => {
|
|
this.props.onChange(ev.currentTarget.value ? ev.currentTarget.value : "");
|
|
};
|
|
|
|
focusInput = (ev: SyntheticEvent<>) => {
|
|
if (this.input) this.input.focus();
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<Field align="center">
|
|
<StyledIcon
|
|
type="Search"
|
|
size={46}
|
|
color={this.props.theme.textTertiary}
|
|
onClick={this.focusInput}
|
|
/>
|
|
<StyledInput
|
|
{...this.props}
|
|
ref={(ref) => (this.input = ref)}
|
|
onChange={this.handleChange}
|
|
spellCheck="false"
|
|
placeholder={this.props.placeholder}
|
|
type="search"
|
|
autoFocus
|
|
/>
|
|
</Field>
|
|
);
|
|
}
|
|
}
|
|
|
|
const Field = styled(Flex)`
|
|
position: relative;
|
|
margin-bottom: 8px;
|
|
`;
|
|
|
|
const StyledInput = styled.input`
|
|
width: 100%;
|
|
padding: 10px 10px 10px 60px;
|
|
font-size: 36px;
|
|
font-weight: 400;
|
|
outline: none;
|
|
border: 0;
|
|
background: ${(props) => props.theme.sidebarBackground};
|
|
transition: ${(props) => props.theme.backgroundTransition};
|
|
border-radius: 4px;
|
|
|
|
color: ${(props) => props.theme.text};
|
|
|
|
::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
::-webkit-input-placeholder {
|
|
color: ${(props) => props.theme.placeholder};
|
|
}
|
|
:-moz-placeholder {
|
|
color: ${(props) => props.theme.placeholder};
|
|
}
|
|
::-moz-placeholder {
|
|
color: ${(props) => props.theme.placeholder};
|
|
}
|
|
:-ms-input-placeholder {
|
|
color: ${(props) => props.theme.placeholder};
|
|
}
|
|
`;
|
|
|
|
const StyledIcon = styled(SearchIcon)`
|
|
position: absolute;
|
|
left: 8px;
|
|
`;
|
|
|
|
export default withTheme(SearchField);
|