[cm6] Show Regex errors in find & replace (#12720)

* [cm6] Show Regex errors in find & replace

* cleanup, isInvalidRegExp function

* no state variable, less color var

* use @brand-dager

* using var(--ol-cm-search-form-focus-shadow)

* using state-danger-border

GitOrigin-RevId: 844c9dfee5a56d2a7494cd86c266acbe9eacd033
This commit is contained in:
Domagoj Kriskovic 2023-04-26 12:39:00 +02:00 committed by Copybot
parent e311a22686
commit cd689e4e1f
4 changed files with 28 additions and 1 deletions

View file

@ -225,7 +225,13 @@ const CodeMirrorSearchForm: FC = () => {
role="search"
>
<div className="ol-cm-search-controls">
<InputGroup bsSize="small" className="ol-cm-search-input-group">
<InputGroup
bsSize="small"
className={classnames('ol-cm-search-input-group', {
'ol-cm-search-input-error':
query.regexp && isInvalidRegExp(query.search),
})}
>
<FormControl
type="text"
name="search"
@ -419,4 +425,13 @@ const CodeMirrorSearchForm: FC = () => {
)
}
function isInvalidRegExp(source: string) {
try {
RegExp(source)
return false
} catch {
return true
}
}
export default CodeMirrorSearchForm

View file

@ -164,6 +164,8 @@ export const search = () => {
background: 'var(--ol-blue-gray-1)',
'--ol-cm-search-form-focus-shadow':
'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%)',
'--ol-cm-search-form-error-shadow':
'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--input-shadow-danger-color)',
},
'.ol-cm-search-controls': {
display: 'grid',
@ -218,6 +220,12 @@ export const search = () => {
boxShadow: 'var(--ol-cm-search-form-focus-shadow)',
},
},
'.ol-cm-search-input-group.ol-cm-search-input-error': {
'&:focus-within': {
borderColor: 'var(--input-border-danger)',
boxShadow: 'var(--ol-cm-search-form-error-shadow)',
},
},
'.input-group .ol-cm-search-form-input': {
border: 'none',
},

View file

@ -13,6 +13,8 @@
--input-border: @input-border;
--input-border-radius: @input-border-radius;
--input-border-focus: @input-border-focus;
--input-border-danger: @state-danger-border;
--input-shadow-danger-color: fade(@state-danger-border, 50%);
--btn-border-radius-base: @btn-border-radius-base;
--btn-default-bg: @btn-default-bg;

View file

@ -63,6 +63,8 @@
--input-border: @input-border;
--input-border-radius: @input-border-radius;
--input-border-focus: @input-border-focus;
--input-border-danger: @state-danger-border;
--input-shadow-danger-color: fade(@state-danger-border, 50%);
// border
--btn-border-radius-base: @btn-border-radius-base;