Skip to content

Commit 41c56d2

Browse files
jstarpljstarpl
committed
Merge branch 'fix/remove-velocity-react/sofie-3716' into release52
2 parents 3adaf27 + 8c5dd70 commit 41c56d2

34 files changed

+936
-949
lines changed

‎packages/webui/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"immutability-helper": "^3.1.1",
5959
"lottie-web": "^5.12.2",
6060
"moment": "^2.30.1",
61+
"motion": "^12.4.7",
6162
"promise.allsettled": "^1.0.7",
6263
"query-string": "^6.14.1",
6364
"rc-tooltip": "^6.4.0",
@@ -80,8 +81,6 @@
8081
"shuttle-webhid": "^0.0.2",
8182
"type-fest": "^4.33.0",
8283
"underscore": "^1.13.7",
83-
"velocity-animate": "^1.5.2",
84-
"velocity-react": "^1.4.3",
8584
"webmidi": "^2.5.3",
8685
"xmlbuilder": "^15.1.1"
8786
},

‎packages/webui/public/origo-ui/dist/origo.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4007,7 +4007,6 @@ input[type=search].pi-input {
40074007
margin-left: -10px; }
40084008

40094009
.title-box-content {
4010-
height: 100%;
40114010
max-height: 28em;
40124011
overflow-y: auto;
40134012
overflow-x: hidden; }

‎packages/webui/src/client/lib/ModalDialog.tsx‎

Lines changed: 107 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import FocusBounder from 'react-focus-bounder'
66
import { useTranslation } from 'react-i18next'
77

88
import ClassNames from 'classnames'
9-
// @ts-expect-error No types available
10-
import * as VelocityReact from 'velocity-react'
9+
import { motion } from 'motion/react'
1110
import { logger } from './logging'
1211
import * as _ from 'underscore'
1312
import { withTranslation } from 'react-i18next'
@@ -141,135 +140,123 @@ export function ModalDialog({
141140

142141
return (
143142
<Escape to="viewport">
144-
<VelocityReact.VelocityTransitionGroup
145-
enter={{ animation: 'fadeIn', easing: 'ease-out', duration: 250 }}
146-
runOnMount={true}
143+
<motion.div
144+
className="glass-pane"
145+
initial={{ opacity: 0 }}
146+
animate={{ opacity: 1 }}
147+
transition={{ ease: 'easeOut', duration: 0.25 }}
147148
>
148-
<div className="glass-pane">
149-
<FocusBounder>
150-
<div className="glass-pane-content">
151-
<VelocityReact.VelocityTransitionGroup
152-
enter={{
153-
animation: {
154-
translateY: [0, 100],
155-
opacity: [1, 0],
149+
<FocusBounder>
150+
<div className="glass-pane-content">
151+
<motion.dialog
152+
open={true}
153+
className={'border-box overlay-m ' + (className || '')}
154+
role="alertdialog"
155+
onKeyUp={onDialogKeyUp}
156+
onKeyDown={onDialogKeyDown}
157+
initial={{ translateY: 100, opacity: 0 }}
158+
animate={{ translateY: 0, opacity: 1 }}
159+
transition={{ type: 'spring', bounce: 0.25, duration: 0.25 }}
160+
>
161+
<div className={'flex-row ' + (warning ? 'warn' : 'info') + ' vertical-align-stretch tight-s'}>
162+
<div className="flex-col c12">
163+
<h2>{title}</h2>
164+
</div>
165+
<div className="flex-col horizontal-align-right vertical-align-middle">
166+
<p>
167+
<button
168+
className="action-btn"
169+
onClick={handleDiscard}
170+
onKeyDown={preventClickOnEnter}
171+
onKeyUp={emulateClick}
172+
aria-label={t('Dismiss')}
173+
>
174+
<CoreIcons.NrkClose />
175+
</button>
176+
</p>
177+
</div>
178+
</div>
179+
<div className="title-box-content">{children}</div>
180+
{inputs ? (
181+
<div className="title-box-inputs">
182+
{_.map(inputs, (input: ModalInput, attribute: string) => {
183+
return (
184+
<div className="title-box-input" key={attribute}>
185+
{input.text}
186+
<EditAttribute
187+
type={input.type}
188+
label={input.label}
189+
options={input.options}
190+
overrideDisplayValue={input.defaultValue}
191+
attribute={attribute}
192+
updateFunction={updateInput}
193+
/>
194+
</div>
195+
)
196+
})}
197+
</div>
198+
) : null}
199+
<div
200+
className={ClassNames(
201+
'mod',
202+
{
203+
alright: !secondaryText,
156204
},
157-
easing: 'spring',
158-
duration: 250,
159-
}}
160-
runOnMount={true}
205+
'modal-dialog-actions'
206+
)}
161207
>
162-
<dialog
163-
open={true}
164-
className={'border-box overlay-m ' + className || ''}
165-
role="alertdialog"
166-
onKeyUp={onDialogKeyUp}
167-
onKeyDown={onDialogKeyDown}
168-
>
169-
<div className={'flex-row ' + (warning ? 'warn' : 'info') + ' vertical-align-stretch tight-s'}>
170-
<div className="flex-col c12">
171-
<h2>{title}</h2>
172-
</div>
173-
<div className="flex-col horizontal-align-right vertical-align-middle">
174-
<p>
175-
<button
176-
className="action-btn"
177-
onClick={handleDiscard}
178-
onKeyDown={preventClickOnEnter}
179-
onKeyUp={emulateClick}
180-
aria-label={t('Dismiss')}
181-
>
182-
<CoreIcons.NrkClose />
183-
</button>
184-
</p>
185-
</div>
186-
</div>
187-
<div className="title-box-content">{children}</div>
188-
{inputs ? (
189-
<div className="title-box-inputs">
190-
{_.map(inputs, (input: ModalInput, attribute: string) => {
191-
return (
192-
<div className="title-box-input" key={attribute}>
193-
{input.text}
194-
<EditAttribute
195-
type={input.type}
196-
label={input.label}
197-
options={input.options}
198-
overrideDisplayValue={input.defaultValue}
199-
attribute={attribute}
200-
updateFunction={updateInput}
201-
/>
202-
</div>
203-
)
204-
})}
205-
</div>
206-
) : null}
207-
<div
208-
className={ClassNames(
209-
'mod',
210-
{
211-
alright: !secondaryText,
212-
},
213-
'modal-dialog-actions'
214-
)}
208+
{secondaryText && (
209+
<button
210+
className={ClassNames('btn', discardAsPrimary ? 'btn-primary' : 'btn-secondary', 'discard-btn', {
211+
'btn-warn': discardAsPrimary && warning,
212+
})}
213+
autoFocus={discardAsPrimary}
214+
onClick={handleSecondary}
215+
onKeyDown={preventClickOnEnter}
216+
onKeyUp={emulateClick}
215217
>
216-
{secondaryText && (
218+
{secondaryText}
219+
</button>
220+
)}
221+
{_.compact(
222+
_.map(actions || [], (action: ModalAction, i) => {
223+
if (!action) return null
224+
return (
217225
<button
226+
key={i}
218227
className={ClassNames(
219-
'btn',
220-
discardAsPrimary ? 'btn-primary' : 'btn-secondary',
221-
'discard-btn',
222-
{ 'btn-warn': discardAsPrimary && warning }
228+
'btn right mrs',
229+
{
230+
'btn-secondary': !(action.classNames || '').match(/btn-/),
231+
},
232+
action.classNames
223233
)}
224-
autoFocus={discardAsPrimary}
225-
onClick={handleSecondary}
234+
onClick={(e) => handleAction(e, action.on)}
226235
onKeyDown={preventClickOnEnter}
227236
onKeyUp={emulateClick}
228237
>
229-
{secondaryText}
238+
{action.label}
230239
</button>
231-
)}
232-
{_.compact(
233-
_.map(actions || [], (action: ModalAction, i) => {
234-
if (!action) return null
235-
return (
236-
<button
237-
key={i}
238-
className={ClassNames(
239-
'btn right mrs',
240-
{
241-
'btn-secondary': !(action.classNames || '').match(/btn-/),
242-
},
243-
action.classNames
244-
)}
245-
onClick={(e) => handleAction(e, action.on)}
246-
onKeyDown={preventClickOnEnter}
247-
onKeyUp={emulateClick}
248-
>
249-
{action.label}
250-
</button>
251-
)
252-
})
253-
)}
254-
<button
255-
className={ClassNames('btn', !discardAsPrimary ? 'btn-primary' : 'btn-secondary', {
256-
right: secondaryText !== undefined,
257-
'btn-warn': !discardAsPrimary && warning,
258-
})}
259-
autoFocus={!discardAsPrimary}
260-
onClick={handleAccept}
261-
onKeyDown={preventClickOnEnter}
262-
onKeyUp={emulateClick}
263-
>
264-
{acceptText}
265-
</button>
266-
</div>
267-
</dialog>
268-
</VelocityReact.VelocityTransitionGroup>
269-
</div>
270-
</FocusBounder>
271-
</div>
272-
</VelocityReact.VelocityTransitionGroup>
240+
)
241+
})
242+
)}
243+
<button
244+
className={ClassNames('btn', !discardAsPrimary ? 'btn-primary' : 'btn-secondary', {
245+
right: secondaryText !== undefined,
246+
'btn-warn': !discardAsPrimary && warning,
247+
})}
248+
autoFocus={!discardAsPrimary}
249+
onClick={handleAccept}
250+
onKeyDown={preventClickOnEnter}
251+
onKeyUp={emulateClick}
252+
>
253+
{acceptText}
254+
</button>
255+
</div>
256+
</motion.dialog>
257+
</div>
258+
</FocusBounder>
259+
</motion.div>
273260
</Escape>
274261
)
275262
}

0 commit comments

Comments
 (0)