From 98edbb78e0127062c7cc4320c7073bb8883c3923 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 27 Dec 2023 10:14:23 -0500 Subject: restored reveal animations. --- package-lock.json | 32 +++++++++++++++++++++++++++++++ package.json | 1 + src/client/views/nodes/DocumentView.tsx | 16 ++++++++-------- src/client/views/nodes/trails/PresBox.tsx | 18 ++++++----------- 4 files changed, 47 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index f0f65919b..0ebba74e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -164,6 +164,7 @@ "rc-switch": "^4.1.0", "react": "^18.2.0", "react-autosuggest": "^10.1.0", + "react-awesome-reveal": "^4.2.7", "react-color": "^2.19.3", "react-compound-slider": "^3.4.0", "react-datepicker": "^4.24.0", @@ -29699,6 +29700,29 @@ "react": ">=16.3.0" } }, + "node_modules/react-awesome-reveal": { + "version": "4.2.7", + "resolved": "https://registry.npmjs.org/react-awesome-reveal/-/react-awesome-reveal-4.2.7.tgz", + "integrity": "sha512-5vETORNz6df0+N+RdPlInw73WBeccfFh73JamnhfbQWwcqCmdeL0Ap5pX9RyRlTMdag5yXAH+FWN8qrnIsyWVA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/morellodev" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/react-awesome-reveal" + } + ], + "dependencies": { + "react-intersection-observer": "^9.5.3", + "react-is": "^18.2.0" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0", + "react": ">=16.14.0" + } + }, "node_modules/react-color": { "version": "2.19.3", "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", @@ -29822,6 +29846,14 @@ "react": "*" } }, + "node_modules/react-intersection-observer": { + "version": "9.5.3", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.3.tgz", + "integrity": "sha512-NJzagSdUPS5rPhaLsHXYeJbsvdpbJwL6yCHtMk91hc0ufQ2BnXis+0QQ9NBh6n9n+Q3OyjR6OQLShYbaNBkThQ==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", diff --git a/package.json b/package.json index 97b50efad..127091e2d 100644 --- a/package.json +++ b/package.json @@ -248,6 +248,7 @@ "rc-switch": "^4.1.0", "react": "^18.2.0", "react-autosuggest": "^10.1.0", + "react-awesome-reveal": "^4.2.7", "react-color": "^2.19.3", "react-compound-slider": "^3.4.0", "react-datepicker": "^4.24.0", diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a05ea3390..2d5f68a69 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -3,7 +3,7 @@ import { Dropdown, DropdownType, Type } from 'browndash-components'; import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; -// import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal'; +import { Bounce, Fade, Flip, JackInTheBox, Roll, Rotate, Zoom } from 'react-awesome-reveal'; import * as React from 'react'; import { Utils, emptyFunction, isTargetChildOf as isParentOf, lightOrDark, returnEmptyString, returnFalse, returnTrue, returnVal, simulateMouseClick } from '../../../Utils'; import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc'; @@ -1264,13 +1264,13 @@ export class DocumentViewInternal extends DocComponent{renderDoc}; - // case PresEffect.Fade: return {renderDoc}; - // case PresEffect.Flip: return {renderDoc}; - // case PresEffect.Rotate: return {renderDoc}; - // case PresEffect.Bounce: return {renderDoc}; - // case PresEffect.Roll: return {renderDoc}; - // case PresEffect.Lightspeed: return {renderDoc}; + case PresEffect.Zoom: return {renderDoc}; + case PresEffect.Fade: return {renderDoc}; + case PresEffect.Flip: return {renderDoc}; + case PresEffect.Rotate: return {renderDoc}; + case PresEffect.Bounce: return {renderDoc}; + case PresEffect.Roll: return {renderDoc}; + case PresEffect.Lightspeed: return {renderDoc}; } } @computed get highlighting() { diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 17993d88e..e213b2fc5 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -1671,12 +1671,9 @@ export class PresBox extends ViewBoxBaseComponent() { className={'presBox-dropdownOptions'} style={{ display: this._openBulletEffectDropdown ? 'grid' : 'none', color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }} onPointerDown={e => e.stopPropagation()}> - {bulletEffect(PresEffect.None)} - {bulletEffect(PresEffect.Fade)} - {bulletEffect(PresEffect.Flip)} - {bulletEffect(PresEffect.Rotate)} - {bulletEffect(PresEffect.Bounce)} - {bulletEffect(PresEffect.Roll)} + {Object.values(PresEffect) + .filter(v => isNaN(Number(v))) + .map(effect => bulletEffect(effect))} @@ -1840,12 +1837,9 @@ export class PresBox extends ViewBoxBaseComponent() { display: this._openEffectDropdown ? 'grid' : 'none', }} onPointerDown={e => e.stopPropagation()}> - {preseEffect(PresEffect.None)} - {preseEffect(PresEffect.Fade)} - {preseEffect(PresEffect.Flip)} - {preseEffect(PresEffect.Rotate)} - {preseEffect(PresEffect.Bounce)} - {preseEffect(PresEffect.Roll)} + {Object.values(PresEffect) + .filter(v => isNaN(Number(v))) + .map(effect => preseEffect(effect))}
-- cgit v1.2.3-70-g09d2