chrone: sperate client and server to different repos.

src/components/NumberFormatDropdown/NumberFormatFields.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { FormGroup, Checkbox, Switch } from '@blueprintjs/core';
+import { CLASSES } from 'common/classes';
+import { ListSelect } from 'components';
+import { FormattedMessage as T } from 'components';
+import { inputIntent } from 'utils';
+import {
+  moneyFormat,
+  negativeFormat,
+  decimalPlaces,
+} from 'common/numberFormatsOptions';
+import classNames from 'classnames';
+
+/**
+ *  Number Formats Fields.
+ */
+export default function NumberFormatFields({}) {
+  return (
+    <div className={'number-format-dropdown__content'}>
+      {/*------------ Negative formats -----------*/}
+      <FastField name={'negativeFormat'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'negative_format'} />}
+            helperText={<ErrorMessage name="negativeFormat" />}
+            intent={inputIntent({ error, touched })}
+            className={classNames(CLASSES.FILL)}
+          >
+            <ListSelect
+              items={negativeFormat}
+              onItemSelect={(format) => {
+                form.setFieldValue('negativeFormat', format.key);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'key'}
+              textProp={'text'}
+              popoverProps={{ minimal: true, captureDismiss: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Decimal places -----------*/}
+      <FastField name={'precision'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'decimal_places'} />}
+            helperText={<ErrorMessage name="format_money" />}
+            intent={inputIntent({ error, touched })}
+            className={classNames(CLASSES.FILL)}
+          >
+            <ListSelect
+              items={decimalPlaces}
+              onItemSelect={(format) => {
+                form.setFieldValue('precision', format.key);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'key'}
+              textProp={'text'}
+              popoverProps={{ minimal: true, captureDismiss: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Money formats -----------*/}
+      <FastField name={'formatMoney'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'money_format'} />}
+            helperText={<ErrorMessage name="formatMoney" />}
+            intent={inputIntent({ error, touched })}
+            className={classNames('form-group--money-format', CLASSES.FILL)}
+          >
+            <ListSelect
+              items={moneyFormat}
+              onItemSelect={(format) => {
+                form.setFieldValue('formatMoney', format.key);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'key'}
+              textProp={'text'}
+              popoverProps={{ minimal: true, captureDismiss: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <div className="toggles-fields">
+        {/*------------ show zero -----------*/}
+        <FastField name={'showZero'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Switch
+                inline={true}
+                small={true}
+                label={<T id={'show_zero'} />}
+                name={'showZero'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/*------------ show negative in red-----------*/}
+        <FastField name={'showInRed'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Switch
+                inline={true}
+                label={<T id={'show_negative_in_red'} />}
+                name={'showInRed'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/*------------ Divide on 1000 -----------*/}
+        <FastField name={'divideOn1000'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Switch
+                inline={true}
+                label={<T id={'divide_on_1000'} />}
+                name={'divideOn1000'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+    </div>
+  );
+}

src/components/NumberFormatDropdown/NumberFormatFooter.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { FormattedMessage as T } from 'components';
+
+/**
+ * Number format footer.
+ */
+export default function NumberFormatFooter({
+  // #ownProps
+  onCancelClick,
+  submitDisabled
+}) {
+  return (
+    <div className={classNames('number-format-dropdown__footer')}>
+      <Button
+        className={classNames('mr1', Classes.POPOVER_DISMISS)}
+        onClick={onCancelClick}
+        small={true}
+      >
+        <T id={'cancel'} />
+      </Button>
+
+      <Button
+        intent={Intent.PRIMARY}
+        disabled={submitDisabled}
+        small={true}
+        type="submit"
+      >
+        <T id={'run'} />
+      </Button>
+    </div>
+  );
+}

src/components/NumberFormatDropdown/NumberFormats.schema.js

@@ -0,0 +1,15 @@
+import * as Yup from 'yup';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { defaultTo } from 'lodash';
+
+
+const Schema = Yup.object().shape({
+  format_money: Yup.string(),
+  show_zero: Yup.boolean(),
+  show_in_red: Yup.boolean(),
+  divide_on_1000: Yup.boolean(),
+  negative_format: Yup.string(),
+  precision: Yup.string(),
+});
+
+export const CreateNumberFormateSchema = Schema;

src/components/NumberFormatDropdown/index.js

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { Formik, Form } from 'formik';
+
+import 'style/pages/FinancialStatements/NumberFormatDropdown.scss';
+
+import NumberFormatFields from './NumberFormatFields';
+import NumberFormatFooter from './NumberFormatFooter';
+
+/**
+ * Number format form popover content.
+ */
+export default function NumberFormatDropdown({
+  numberFormat = {},
+  onSubmit,
+  submitDisabled = false,
+}) {
+  const initialValues = {
+    formatMoney: 'total',
+    showZero: false,
+    showInRed: false,
+    divideOn1000: false,
+    negativeFormat: 'mines',
+    precision: 2,
+    ...numberFormat
+  };
+  // Handle cancel button click.
+  const handleCancelClick = useCallback(() => {}, []);
+
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    setSubmitting(true);
+    onSubmit(values);
+  };
+
+  return (
+    <div className={'number-format-dropdown'}>
+      <Formik initialValues={initialValues} onSubmit={handleFormSubmit}>
+        <Form>
+          <NumberFormatFields onCancelClick={handleCancelClick} />
+          <NumberFormatFooter submitDisabled={submitDisabled} />
+        </Form>
+      </Formik>
+    </div>
+  );
+}