refactor: invoice topbar.

src/components/Branches/BranchSelect.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '../Forms';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} branch
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const branchItemPredicate = (query, branch, _index, exactMatch) => {
+  const normalizedTitle = branch.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${branch.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} film
+ * @param {*} param1
+ * @returns
+ */
+const branchItemRenderer = (branch, { handleClick, modifiers, query }) => {
+  const text = `${branch.name}`;
+
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      label={branch.name.toString()}
+      key={branch.id}
+      onClick={handleClick}
+      text={text}
+    />
+  );
+};
+
+const branchSelectProps = {
+  itemPredicate: branchItemPredicate,
+  itemRenderer: branchItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+export function BranchSelect({ branches, ...rest }) {
+  return <FSelect {...branchSelectProps} {...rest} items={branches} />;
+}
+
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+export function BranchSelectButton({ label, ...rest }) {
+  return <Button text={label} {...rest} />;
+}

src/components/Branches/index.js

@@ -0,0 +1 @@
+export * from './BranchSelect';

src/components/Forms/FSelect.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Select as BPSelect,
+  SelectProps as BPSelectProps,
+} from '@blueprintjs/select';
+import { Field, FieldProps, FieldConfig, isFunction } from 'formik';
+import { get } from 'lodash';
+
+interface SelectProps
+  extends Omit<FieldConfig, 'children' | 'as' | 'component'>,
+    BPSelectProps<any> {
+  valueAccessor: string;
+  labelAccessor: string;
+  input: () => JSX.Element;
+}
+
+interface FieldToSelectProps
+  extends Omit<BPSelectProps<any>, 'onItemSelect'>,
+    FieldProps {
+  onItemSelect?: (item: any, event?: React.SyntheticEvent<HTMLElement>) => void;
+  valueAccessor: string;
+  labelAccessor: string;
+  input: (props: { activeItem: any; label: any }) => JSX.Element;
+  children: JSX.Element;
+}
+
+const getAccessor = (accessor: any, activeItem: any) => {
+  return isFunction(accessor)
+    ? accessor(activeItem)
+    : get(activeItem, accessor);
+};
+
+/**
+ * Transform field props to select props.
+ * @param   {FieldToSelectProps}
+ * @returns {BPSelectProps<any> }
+ */
+function transformSelectToFieldProps({
+  field: { onBlur: onFieldBlur, ...field },
+  form: { touched, errors, ...form },
+  meta,
+  input,
+  valueAccessor,
+  labelAccessor,
+  ...props
+}: FieldToSelectProps): BPSelectProps<any> {
+  const activeItem = props.items.find(
+    (item) => getAccessor(valueAccessor, item) === field.value
+  );
+  const children = input
+    ? input({
+        activeItem,
+        label: getAccessor(labelAccessor, activeItem),
+      })
+    : props.children;
+
+  return {
+    onItemSelect: (item) => {
+      const value = getAccessor(valueAccessor, item);
+      form.setFieldValue(field.name, value);
+    },
+    activeItem,
+    ...props,
+    children,
+  };
+}
+
+/**
+ *
+ * @param   {FieldToSelectProps}
+ * @returns {JSX.Element}
+ */
+function FieldToSelect({ ...props }: FieldToSelectProps): JSX.Element {
+  return <BPSelect {...transformSelectToFieldProps(props)} />;
+}
+
+/**
+ * Select binded with formik.
+ * @param   {JSX.Element}
+ * @returns {SelectProps}
+ */
+export function FSelect({ ...props }: SelectProps): JSX.Element {
+  return <Field {...props} component={FieldToSelect} />;
+}

src/components/Forms/index.js

@@ -1,4 +1,5 @@
 export * from './FormObserver';
 export * from './FormikObserver';
 export * from './FMoneyInputGroup'
-export * from './FFormGroup'
+export * from './FFormGroup'
+export * from './FSelect'

src/components/Warehouses/WarehouseSelect.js

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '../Forms';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} warehouse
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const warehouseItemPredicate = (query, warehouse, _index, exactMatch) => {
+  const normalizedTitle = warehouse.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return (
+      `${warehouse.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
+    );
+  }
+};
+
+/**
+ *
+ * @param {*} film
+ * @param {*} param1
+ * @returns
+ */
+const warehouseItemRenderer = (
+  warehouse,
+  { handleClick, modifiers, query },
+) => {
+  const text = `${warehouse.name}`;
+
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      label={warehouse.name.toString()}
+      key={warehouse.id}
+      onClick={handleClick}
+      text={text}
+    />
+  );
+};
+
+const warehouseSelectProps = {
+  itemPredicate: warehouseItemPredicate,
+  itemRenderer: warehouseItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+export function WarehouseSelect({ warehouses, ...rest }) {
+  return <FSelect {...warehouseSelectProps} {...rest} items={warehouses} />;
+}
+
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+export function WarehouseSelectButton({ label, ...rest }) {
+  return <Button text={label} />;
+}

src/components/Warehouses/index.js

@@ -0,0 +1 @@
+export * from './WarehouseSelect';

src/components/index.js

@@ -98,7 +98,10 @@ export * from './FinancialStatement';
 export * from './FinancialReport';
 export * from './FinancialSheet';
 export * from './FeatureGuard';
-export * from './ExchangeRate'
+export * from './ExchangeRate';
+export * from './Branches';
+export * from './Warehouses';
+
 const Hint = FieldHint;
 
 const T = FormattedMessage;