@transferwise/components 0.0.0-experimental-fa47f3d → 0.0.0-experimental-8e1de95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,7 +35,6 @@ const Snackbar = props => {
35
35
  const {
36
36
  action,
37
37
  text,
38
- timeout,
39
38
  timestamp
40
39
  } = props;
41
40
  // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the
@@ -52,7 +51,7 @@ const Snackbar = props => {
52
51
  ...current,
53
52
  visible: false
54
53
  })));
55
- }, timeout);
54
+ }, committedProps.current.timeout);
56
55
  };
57
56
  const show = () => {
58
57
  setState(current => ({
@@ -1 +1 @@
1
- {"version":3,"file":"Snackbar.js","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport withNextPortal from '../WithNextPortal/WithNextPortal';\n\nconst CSS_TRANSITION_DURATION = 400;\n\nexport interface SnackbarProps {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n text: React.ReactNode;\n /** @deprecated */\n theme?: ThemeLight | ThemeDark;\n timeout: number;\n timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {\n visible: boolean;\n}\n\nexport const Snackbar = (props: SnackbarProps) => {\n const bodyRef = useRef<HTMLSpanElement>(null);\n const leaveTimeout = useRef(0);\n const transitionTimeout = useRef(0);\n /** The props of the last committed render, as `this.props` was in the class component. */\n const committedProps = useRef(props);\n\n const [state, setState] = useState<SnackbarState>({\n visible: false,\n text: '',\n });\n\n useEffect(\n () => () => {\n window.clearTimeout(leaveTimeout.current);\n window.clearTimeout(transitionTimeout.current);\n },\n [],\n );\n\n // Runs after every render to mirror the componentDidUpdate lifecycle this component previously\n // relied on, including the shouldComponentUpdate guard that ignored every update without text.\n // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state\n // updates are what keep this conversion behaviour-identical to the class component.\n /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n useEffect(() => {\n const previousProps = committedProps.current;\n committedProps.current = props;\n\n const { action, text, timeout, timestamp } = props;\n\n // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the\n // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is\n // given text again. Preserved here deliberately to keep this refactor behaviour-identical.\n const updateWhileTextIsPresent = (update: () => void) => {\n if (committedProps.current.text) {\n update();\n }\n };\n\n const setLeaveTimeout = () => {\n leaveTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));\n }, timeout);\n };\n\n const show = () => {\n setState((current) => ({ ...current, visible: true, action, text }));\n setLeaveTimeout();\n };\n\n if (!text) {\n return;\n }\n\n if (!previousProps.text) {\n show();\n } else if (previousProps.timestamp !== timestamp) {\n window.clearTimeout(leaveTimeout.current);\n\n if (state.visible) {\n setState((current) => ({ ...current, visible: false }));\n transitionTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(show);\n }, CSS_TRANSITION_DURATION);\n } else {\n show();\n }\n }\n });\n /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n\n const { action, text, visible } = state;\n const { timeout } = props;\n\n return (\n <div className=\"snackbar\" aria-live=\"assertive\" role=\"alert\">\n <CSSTransition\n nodeRef={bodyRef}\n in={visible}\n classNames=\"snackbar__text-container\"\n timeout={{\n appear: 0,\n enter: timeout,\n exit: CSS_TRANSITION_DURATION,\n }}\n unmountOnExit\n >\n <Body ref={bodyRef} as=\"span\" className=\"snackbar__text\">\n {text}\n {action ? (\n <Button className=\"snackbar__text__action\" v2 size=\"sm\" onClick={action.onClick}>\n {action.label}\n </Button>\n ) : null}\n </Body>\n </CSSTransition>\n </div>\n );\n};\n\nexport default withNextPortal(Snackbar);\n"],"names":["CSS_TRANSITION_DURATION","Snackbar","props","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","state","setState","useState","visible","text","useEffect","window","clearTimeout","current","previousProps","action","timeout","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","show","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","withNextPortal"],"mappings":"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"}
1
+ {"version":3,"file":"Snackbar.js","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport withNextPortal from '../WithNextPortal/WithNextPortal';\n\nconst CSS_TRANSITION_DURATION = 400;\n\nexport interface SnackbarProps {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n text: React.ReactNode;\n /** @deprecated */\n theme?: ThemeLight | ThemeDark;\n timeout: number;\n timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {\n visible: boolean;\n}\n\nexport const Snackbar = (props: SnackbarProps) => {\n const bodyRef = useRef<HTMLSpanElement>(null);\n const leaveTimeout = useRef(0);\n const transitionTimeout = useRef(0);\n /** The props of the last committed render, as `this.props` was in the class component. */\n const committedProps = useRef(props);\n\n const [state, setState] = useState<SnackbarState>({\n visible: false,\n text: '',\n });\n\n useEffect(\n () => () => {\n window.clearTimeout(leaveTimeout.current);\n window.clearTimeout(transitionTimeout.current);\n },\n [],\n );\n\n // Runs after every render to mirror the componentDidUpdate lifecycle this component previously\n // relied on, including the shouldComponentUpdate guard that ignored every update without text.\n // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state\n // updates are what keep this conversion behaviour-identical to the class component.\n /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n useEffect(() => {\n const previousProps = committedProps.current;\n committedProps.current = props;\n\n const { action, text, timestamp } = props;\n\n // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the\n // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is\n // given text again. Preserved here deliberately to keep this refactor behaviour-identical.\n const updateWhileTextIsPresent = (update: () => void) => {\n if (committedProps.current.text) {\n update();\n }\n };\n\n const setLeaveTimeout = () => {\n leaveTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));\n }, committedProps.current.timeout);\n };\n\n const show = () => {\n setState((current) => ({ ...current, visible: true, action, text }));\n setLeaveTimeout();\n };\n\n if (!text) {\n return;\n }\n\n if (!previousProps.text) {\n show();\n } else if (previousProps.timestamp !== timestamp) {\n window.clearTimeout(leaveTimeout.current);\n\n if (state.visible) {\n setState((current) => ({ ...current, visible: false }));\n transitionTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(show);\n }, CSS_TRANSITION_DURATION);\n } else {\n show();\n }\n }\n });\n /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n\n const { action, text, visible } = state;\n const { timeout } = props;\n\n return (\n <div className=\"snackbar\" aria-live=\"assertive\" role=\"alert\">\n <CSSTransition\n nodeRef={bodyRef}\n in={visible}\n classNames=\"snackbar__text-container\"\n timeout={{\n appear: 0,\n enter: timeout,\n exit: CSS_TRANSITION_DURATION,\n }}\n unmountOnExit\n >\n <Body ref={bodyRef} as=\"span\" className=\"snackbar__text\">\n {text}\n {action ? (\n <Button className=\"snackbar__text__action\" v2 size=\"sm\" onClick={action.onClick}>\n {action.label}\n </Button>\n ) : null}\n </Body>\n </CSSTransition>\n </div>\n );\n};\n\nexport default withNextPortal(Snackbar);\n"],"names":["CSS_TRANSITION_DURATION","Snackbar","props","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","state","setState","useState","visible","text","useEffect","window","clearTimeout","current","previousProps","action","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","timeout","show","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","withNextPortal"],"mappings":"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"}
@@ -31,7 +31,6 @@ const Snackbar = props => {
31
31
  const {
32
32
  action,
33
33
  text,
34
- timeout,
35
34
  timestamp
36
35
  } = props;
37
36
  // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the
@@ -48,7 +47,7 @@ const Snackbar = props => {
48
47
  ...current,
49
48
  visible: false
50
49
  })));
51
- }, timeout);
50
+ }, committedProps.current.timeout);
52
51
  };
53
52
  const show = () => {
54
53
  setState(current => ({
@@ -1 +1 @@
1
- {"version":3,"file":"Snackbar.mjs","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport withNextPortal from '../WithNextPortal/WithNextPortal';\n\nconst CSS_TRANSITION_DURATION = 400;\n\nexport interface SnackbarProps {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n text: React.ReactNode;\n /** @deprecated */\n theme?: ThemeLight | ThemeDark;\n timeout: number;\n timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {\n visible: boolean;\n}\n\nexport const Snackbar = (props: SnackbarProps) => {\n const bodyRef = useRef<HTMLSpanElement>(null);\n const leaveTimeout = useRef(0);\n const transitionTimeout = useRef(0);\n /** The props of the last committed render, as `this.props` was in the class component. */\n const committedProps = useRef(props);\n\n const [state, setState] = useState<SnackbarState>({\n visible: false,\n text: '',\n });\n\n useEffect(\n () => () => {\n window.clearTimeout(leaveTimeout.current);\n window.clearTimeout(transitionTimeout.current);\n },\n [],\n );\n\n // Runs after every render to mirror the componentDidUpdate lifecycle this component previously\n // relied on, including the shouldComponentUpdate guard that ignored every update without text.\n // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state\n // updates are what keep this conversion behaviour-identical to the class component.\n /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n useEffect(() => {\n const previousProps = committedProps.current;\n committedProps.current = props;\n\n const { action, text, timeout, timestamp } = props;\n\n // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the\n // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is\n // given text again. Preserved here deliberately to keep this refactor behaviour-identical.\n const updateWhileTextIsPresent = (update: () => void) => {\n if (committedProps.current.text) {\n update();\n }\n };\n\n const setLeaveTimeout = () => {\n leaveTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));\n }, timeout);\n };\n\n const show = () => {\n setState((current) => ({ ...current, visible: true, action, text }));\n setLeaveTimeout();\n };\n\n if (!text) {\n return;\n }\n\n if (!previousProps.text) {\n show();\n } else if (previousProps.timestamp !== timestamp) {\n window.clearTimeout(leaveTimeout.current);\n\n if (state.visible) {\n setState((current) => ({ ...current, visible: false }));\n transitionTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(show);\n }, CSS_TRANSITION_DURATION);\n } else {\n show();\n }\n }\n });\n /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n\n const { action, text, visible } = state;\n const { timeout } = props;\n\n return (\n <div className=\"snackbar\" aria-live=\"assertive\" role=\"alert\">\n <CSSTransition\n nodeRef={bodyRef}\n in={visible}\n classNames=\"snackbar__text-container\"\n timeout={{\n appear: 0,\n enter: timeout,\n exit: CSS_TRANSITION_DURATION,\n }}\n unmountOnExit\n >\n <Body ref={bodyRef} as=\"span\" className=\"snackbar__text\">\n {text}\n {action ? (\n <Button className=\"snackbar__text__action\" v2 size=\"sm\" onClick={action.onClick}>\n {action.label}\n </Button>\n ) : null}\n </Body>\n </CSSTransition>\n </div>\n );\n};\n\nexport default withNextPortal(Snackbar);\n"],"names":["CSS_TRANSITION_DURATION","Snackbar","props","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","state","setState","useState","visible","text","useEffect","window","clearTimeout","current","previousProps","action","timeout","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","show","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","withNextPortal"],"mappings":"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"}
1
+ {"version":3,"file":"Snackbar.mjs","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport withNextPortal from '../WithNextPortal/WithNextPortal';\n\nconst CSS_TRANSITION_DURATION = 400;\n\nexport interface SnackbarProps {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n text: React.ReactNode;\n /** @deprecated */\n theme?: ThemeLight | ThemeDark;\n timeout: number;\n timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {\n visible: boolean;\n}\n\nexport const Snackbar = (props: SnackbarProps) => {\n const bodyRef = useRef<HTMLSpanElement>(null);\n const leaveTimeout = useRef(0);\n const transitionTimeout = useRef(0);\n /** The props of the last committed render, as `this.props` was in the class component. */\n const committedProps = useRef(props);\n\n const [state, setState] = useState<SnackbarState>({\n visible: false,\n text: '',\n });\n\n useEffect(\n () => () => {\n window.clearTimeout(leaveTimeout.current);\n window.clearTimeout(transitionTimeout.current);\n },\n [],\n );\n\n // Runs after every render to mirror the componentDidUpdate lifecycle this component previously\n // relied on, including the shouldComponentUpdate guard that ignored every update without text.\n // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state\n // updates are what keep this conversion behaviour-identical to the class component.\n /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n useEffect(() => {\n const previousProps = committedProps.current;\n committedProps.current = props;\n\n const { action, text, timestamp } = props;\n\n // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the\n // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is\n // given text again. Preserved here deliberately to keep this refactor behaviour-identical.\n const updateWhileTextIsPresent = (update: () => void) => {\n if (committedProps.current.text) {\n update();\n }\n };\n\n const setLeaveTimeout = () => {\n leaveTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));\n }, committedProps.current.timeout);\n };\n\n const show = () => {\n setState((current) => ({ ...current, visible: true, action, text }));\n setLeaveTimeout();\n };\n\n if (!text) {\n return;\n }\n\n if (!previousProps.text) {\n show();\n } else if (previousProps.timestamp !== timestamp) {\n window.clearTimeout(leaveTimeout.current);\n\n if (state.visible) {\n setState((current) => ({ ...current, visible: false }));\n transitionTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(show);\n }, CSS_TRANSITION_DURATION);\n } else {\n show();\n }\n }\n });\n /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n\n const { action, text, visible } = state;\n const { timeout } = props;\n\n return (\n <div className=\"snackbar\" aria-live=\"assertive\" role=\"alert\">\n <CSSTransition\n nodeRef={bodyRef}\n in={visible}\n classNames=\"snackbar__text-container\"\n timeout={{\n appear: 0,\n enter: timeout,\n exit: CSS_TRANSITION_DURATION,\n }}\n unmountOnExit\n >\n <Body ref={bodyRef} as=\"span\" className=\"snackbar__text\">\n {text}\n {action ? (\n <Button className=\"snackbar__text__action\" v2 size=\"sm\" onClick={action.onClick}>\n {action.label}\n </Button>\n ) : null}\n </Body>\n </CSSTransition>\n </div>\n );\n};\n\nexport default withNextPortal(Snackbar);\n"],"names":["CSS_TRANSITION_DURATION","Snackbar","props","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","state","setState","useState","visible","text","useEffect","window","clearTimeout","current","previousProps","action","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","timeout","show","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","withNextPortal"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-fa47f3d",
3
+ "version": "0.0.0-experimental-8e1de95",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -53,7 +53,7 @@ export const Snackbar = (props: SnackbarProps) => {
53
53
  const previousProps = committedProps.current;
54
54
  committedProps.current = props;
55
55
 
56
- const { action, text, timeout, timestamp } = props;
56
+ const { action, text, timestamp } = props;
57
57
 
58
58
  // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the
59
59
  // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is
@@ -67,7 +67,7 @@ export const Snackbar = (props: SnackbarProps) => {
67
67
  const setLeaveTimeout = () => {
68
68
  leaveTimeout.current = window.setTimeout(() => {
69
69
  updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));
70
- }, timeout);
70
+ }, committedProps.current.timeout);
71
71
  };
72
72
 
73
73
  const show = () => {