chore: NatAmountInput is usable from dapp-token-economy (#2711)

Agoric · Mar 24, 2021 · cc6cff2 · cc6cff2
1 parent c9ae4fd
commit cc6cff2
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 27 deletions.
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
@@ -3,11 +3,14 @@
   "version": "0.0.1",
   "description": "Reusable UI Components for Agoric Dapps, built with React and MaterialUI",
   "main": "src/index.js",
-  "peerDependencies": {
+  "dependencies": {
     "@agoric/assert": "^0.2.3",
     "@agoric/ertp": "^0.10.0",
     "@agoric/eventual-send": "^0.13.3",
     "@agoric/install-ses": "^0.5.3",
+    "@agoric/nat": "^4.0.0"
+  },
+  "peerDependencies": {
     "@material-ui/core": "^4.11.3",
     "react": "^16.14.0",
     "react-dom": "^16.8.0"
@@ -102,8 +105,5 @@
     "dist",
     "NEWS.md",
     "exported.js"
-  ],
-  "dependencies": {
-    "@agoric/nat": "^4.0.0"
-  }
+  ]
 }
diff --git a/packages/ui-components/src/components/NatAmountInput.js b/packages/ui-components/src/components/NatAmountInput.js
@@ -1,12 +1,9 @@
-import React from 'react';
-import { TextField } from '@material-ui/core';
-
 import { parseAsNat } from '../display/natValue/parseAsNat';
 import { stringifyNat } from '../display/natValue/stringifyNat';
 
 // https://material-ui.com/api/text-field/
 
-const NatAmountInput = ({
+const makeNatAmountInput = (react, textfield) => ({
   label,
   value,
   decimalPlaces = 0,
@@ -27,20 +24,19 @@ const NatAmountInput = ({
     }
   };
 
-  return (
-    <TextField
-      label={label}
-      type="number"
-      variant="outlined"
-      fullWidth
-      InputProps={noNegativeValues}
-      onChange={ev => onChange(parseAsNat(ev.target.value, decimalPlaces))}
-      onKeyPress={preventSubtractChar}
-      value={stringifyNat(value, decimalPlaces, placesToShow)}
-      disabled={disabled}
-      error={error}
-    />
-  );
+  return react.createElement(textfield, {
+    label,
+    type: 'number',
+    variant: 'outlined',
+    fullWidth: true,
+    InputProps: noNegativeValues,
+    onChange: ev => onChange(parseAsNat(ev.target.value, decimalPlaces)),
+    onKeyPress: preventSubtractChar,
+    value:
+      value === null ? '0' : stringifyNat(value, decimalPlaces, placesToShow),
+    disabled,
+    error,
+  });
 };
 
-export default NatAmountInput;
+export default makeNatAmountInput;
diff --git a/packages/ui-components/src/index.js b/packages/ui-components/src/index.js
@@ -1,2 +1,2 @@
-export { default as NatAmountInput } from './components/NatAmountInput';
+export { default as makeNatAmountInput } from './components/NatAmountInput';
 export * from './display/display';
diff --git a/packages/ui-components/test/components/test-NatAmountInput.js b/packages/ui-components/test/components/test-NatAmountInput.js
@@ -1,15 +1,18 @@
 // @ts-check
 
 import '@agoric/install-ses';
+import React from 'react';
+import { TextField } from '@material-ui/core';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import test from 'ava';
-import React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { shallow, render } from 'enzyme';
 
 // @ts-ignore path is correct for compiled output
-import { NatAmountInput } from '../../../dist'; // eslint-disable-line import/no-unresolved
+import { makeNatAmountInput } from '../../../dist'; // eslint-disable-line import/no-unresolved
+
+const NatAmountInput = makeNatAmountInput(React, TextField);
 
 const makeShallowNatAmountInput = ({
   label = 'myLabel',