Skip to content

Show alert when enter non-exist province name in the filter box. #225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
itpcc wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Show alert when enter non-exist province name in the filter box. #225

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bc1038b
Show alert when enter non-exist province name.
itpcc Mar 25, 2019
e84181a
Remove setState command
itpcc Mar 25, 2019
8a239d1
Merge remote-tracking branch 'upstream/master' into province-search
itpcc Mar 25, 2019
d9dcb89
Avoid app crash when set incorrect value on filter search
itpcc Mar 25, 2019
631bf35
filter search: reset noOnBlur state added
itpcc Mar 25, 2019
9318eb3
Merge remote-tracking branch 'upstream/master' into province-search
itpcc Mar 26, 2019
931bc57
Change error display from alert to <span> tag
itpcc Mar 26, 2019
4ebab2b
Fix display issue on mobile
itpcc Mar 26, 2019
f8b5ad4
Fix display issue on mobile
itpcc Mar 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 60 additions & 26 deletions src/components/ZoneFilterPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,35 +62,69 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) {
{currentFilterName => {
const current = currentFilterName === state.query
return (
<input
disabled={!current}
ref={inputRef}
<div
css={{
border: `1px solid "#999999"`,
width: "200px",
boxSizing: "border-box",
padding: 10,
fontSize: 16,
marginLeft: 10,
}}
onChange={e => {
const { value } = e.target
setState({ ...state, value: value })
}}
onBlur={e => {
setState({ ...state, value: state.query })
}}
onKeyPress={e => {
if (e.key == "Enter" && isProvinceExist(state.value)) {
trackEvent("Search for province")
setState(
{ ...state, query: state.value },
navigate(filterPath(state.value))
)
}
}}
value={state.value}
/>
>
<input
disabled={!current}
ref={inputRef}
css={{
border: `1px solid`,
borderColor: state.provinceError ? "#FF0000" : "#999999",
width: "200px",
boxSizing: "border-box",
padding: 10,
fontSize: 16,
}}
onChange={e => {
// @todo #223 show dropdown or "autocomplete" for province name?
const { value } = e.target
setState({ ...state, value: value, provinceError: false })
}}
onBlur={e => {
if (!state.noOnBlur) {
setState({ ...state, value: state.query })
} else {
setState({
...state,
noOnBlur: false,
provinceError: false,
})
}
}}
onKeyPress={e => {
const { value } = state
if (e.key == "Enter") {
if (isProvinceExist(state.value)) {
trackEvent("Search for province")
setState(
{ ...state, query: state.value },
navigate(filterPath(state.value))
)
} else {
setState({
...state,
value: value,
noOnBlur: true,
provinceError: true,
})
}
}
}}
value={state.value}
/>
<span
css={{
display: state.provinceError ? "block" : "none",
color: "#FF0000",
width: "100%",
}}
>
ไม่พบจังหวัดที่ท่านระบุ
</span>
</div>
)
}}
</ZoneFilterContext.Consumer>
Expand Down