diff --git a/package-lock.json b/package-lock.json index df22ce682..ce863fd0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13816,6 +13816,11 @@ "glob": "7.1.2" } }, + "rip-out": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/rip-out/-/rip-out-1.0.0.tgz", + "integrity": "sha1-1iKntgfhza3IsHm/n7PaQsE7mOM=" + }, "ripemd160": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz", @@ -14724,6 +14729,15 @@ "whet.extend": "0.9.9" } }, + "svgs": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/svgs/-/svgs-3.2.1.tgz", + "integrity": "sha512-+bsyTsin64hdOpxNOE8kClBW1GUujkSgoFcbEJz/dDa2bgKlyloPVqolTyPw+QPEIQXmC8X/+l8TIE7uBQ5FlA==", + "requires": { + "prop-types": "15.6.1", + "rip-out": "1.0.0" + } + }, "sw-precache": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/sw-precache/-/sw-precache-5.2.1.tgz", diff --git a/package.json b/package.json index d15252108..531f6883a 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,8 @@ "react-art": "^16.2.0", "react-dom": "^16.2.0", "react-native-web": "^0.6.0", - "react-scripts": "^1.1.1" + "react-scripts": "^1.1.1", + "svgs": "^3.2.1" }, "devDependencies": { "@storybook/addon-actions": "^3.3.15", diff --git a/src/component/spinner.js b/src/component/spinner.js new file mode 100644 index 000000000..c070b90aa --- /dev/null +++ b/src/component/spinner.js @@ -0,0 +1,210 @@ +import React from 'react'; +import { + ActivityIndicator, + StyleSheet, + View, + ViewPropTypes, +} from 'react-native'; +import PropTypes from 'prop-types'; +import { color, font } from './style'; +import Icon from './icon'; +import Text from './text'; +import Svg, { Path, Circle, Defs, Stop, LinearGradient } from './svg'; + +// +// Small Spinner +// + +const smallStyles = StyleSheet.create({ + spinner: { + transform: [{ scale: 1.0 }], + }, +}); + +export const SmallSpinner = ({ ...props }) => ( + +); + +// +// Load Network Spinner +// + +const sizeM = 80; +const progressWidthM = 3; + +const loadNetworkStyles = StyleSheet.create({ + spinner: { + margin: 20, + }, + bolt: { + height: 126 / 4.5, + width: 64 / 4.5, + }, + copy: { + fontSize: font.sizeXS, + marginTop: 5, + color: color.white, + textAlign: 'center', + }, +}); + +export const LoadNetworkSpinner = ({ percentage, msg }) => ( + + + {msg} + +); + +LoadNetworkSpinner.propTypes = { + percentage: PropTypes.number.isRequired, + msg: PropTypes.string.isRequired, +}; + +// +// Resizeable Spinner +// + +const resizeableStyles = StyleSheet.create({ + iconWrapper: { + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +const ResizeableSpinner = ({ + percentage, + size, + gradient, + progressWidth, + icon, + iconStyles, +}) => ( + + + + + { + + } + + + + + +); + +ResizeableSpinner.propTypes = { + percentage: PropTypes.number.isRequired, + size: PropTypes.number.isRequired, + progressWidth: PropTypes.number.isRequired, + gradient: PropTypes.string.isRequired, + icon: PropTypes.string.isRequired, + iconStyles: ViewPropTypes.style, +}; + +// +// Loading Network Gradient +// + +const Gradients = () => ( + + + + + + + + + + + + +); + +// +// Spinner Progress Path +// + +const SpinnerProgress = ({ width, percentage, color }) => ( + +); + +SpinnerProgress.propTypes = { + width: PropTypes.number.isRequired, + percentage: PropTypes.number.isRequired, + color: PropTypes.string.isRequired, +}; + +// +// Spinner Fill +// + +const SpinnerFill = ({ spinnerWidth, progressWidth, color }) => ( + +); + +SpinnerFill.propTypes = { + spinnerWidth: PropTypes.number.isRequired, + progressWidth: PropTypes.number.isRequired, + color: PropTypes.string.isRequired, +}; + +const generateArc = (percentage, radius) => { + if (percentage === 0) { + percentage = 1; + } else if (percentage === 100) { + percentage = 99.999; + } + const a = percentage * 2 * Math.PI / 100; // angle (in radian) depends on percentage + const r = radius; // radius of the circle + var rx = r, + ry = r, + xAxisRotation = 0, + largeArcFlag = 1, + sweepFlag = 1, + x = r + r * Math.sin(a), + y = r - r * Math.cos(a); + if (percentage <= 50) { + largeArcFlag = 0; + } else { + largeArcFlag = 1; + } + + return `A${rx} ${ry} ${xAxisRotation} ${largeArcFlag} ${sweepFlag} ${x} ${y}`; +}; diff --git a/src/component/style.js b/src/component/style.js index c62d4c09f..64a7fb22b 100644 --- a/src/component/style.js +++ b/src/component/style.js @@ -11,6 +11,11 @@ export const color = { greyLight: '#D7D4D4', purple: '#57038D', lightPurple: '#A540CD', + loadNetworkLightPurple: '#A95BDC', + loadNetworkMedPurple: '#651399', + loadNetworkMedDarkPurple: '#610F96', + openChansLightPurple: '#A540CD', + openChansDarkPurple: '#6B249C', orange: '#F66B1C', blackDark: '#252F4A', blackText: '#4A4A4A', diff --git a/src/component/svg.js b/src/component/svg.js new file mode 100644 index 000000000..85f233eba --- /dev/null +++ b/src/component/svg.js @@ -0,0 +1,3 @@ +import Svg from 'svgs'; +export default Svg; +export * from 'svgs'; diff --git a/stories/component/spinner.js b/stories/component/spinner.js new file mode 100644 index 000000000..eb5d8cab0 --- /dev/null +++ b/stories/component/spinner.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import MainContent from '../../src/component/main-content'; +import { LoadNetworkSpinner, SmallSpinner } from '../../src/component/spinner'; +import { color } from '../../src/component/style'; +import Background from '../../src/component/background'; + +storiesOf('Spinner', module) + .addDecorator(story => ( + {story()} + )) + .add('SmallSpinner', () => ); + +storiesOf('Spinner', module) + .addDecorator(story => ( + {story()} + )) + .add('LoadNetworkSpinner', () => ( + + + + + + ));