From 9630fecd7c3986b7f4404b6bd873791932ee2ab0 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Wed, 16 Feb 2022 13:36:23 +0200 Subject: [PATCH] feat: add `blueprint-formik` package. --- package.json | 1 + src/components/Forms/BlueprintFormik.js | 17 ++++ src/components/Forms/FFormGroup.tsx | 49 ----------- src/components/Forms/FSelect.tsx | 85 ------------------- src/components/Forms/index.js | 3 +- .../Invoices/InvoiceForm/InvoiceFormTopBar.js | 8 +- 6 files changed, 21 insertions(+), 142 deletions(-) create mode 100644 src/components/Forms/BlueprintFormik.js delete mode 100644 src/components/Forms/FFormGroup.tsx delete mode 100644 src/components/Forms/FSelect.tsx diff --git a/package.json b/package.json index 77cf277f3..d6f6f2028 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "babel-plugin-named-asset-import": "^0.3.6", "babel-preset-react-app": "^9.1.1", "basscss": "^8.0.2", + "blueprint-formik": "^0.1.4", "camelcase": "^5.3.1", "case-sensitive-paths-webpack-plugin": "2.3.0", "cross-env": "^7.0.2", diff --git a/src/components/Forms/BlueprintFormik.js b/src/components/Forms/BlueprintFormik.js new file mode 100644 index 000000000..40cffbbaf --- /dev/null +++ b/src/components/Forms/BlueprintFormik.js @@ -0,0 +1,17 @@ +import { + FormGroup, + InputGroup, + NumericInput, + Checkbox, + RadioGroup, + Select, +} from 'blueprint-formik'; + +export { + FormGroup as FFormGroup, + InputGroup as FInputGroup, + NumericInput as FNumericInput, + Checkbox as FCheckbox, + RadioGroup as FRadioGroup, + Select as FSelect, +}; diff --git a/src/components/Forms/FFormGroup.tsx b/src/components/Forms/FFormGroup.tsx deleted file mode 100644 index 633ebec99..000000000 --- a/src/components/Forms/FFormGroup.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import { FieldMetaProps, FieldInputProps, useField } from 'formik'; -import { - FormGroup as PBFormGroup, - Intent, - FormGroupProps as PBFormGroupProps, -} from '@blueprintjs/core'; - -export interface FormGroupProps extends PBFormGroupProps { - name: string; - children: React.ReactElement; -} - -/** - * Transformes field props to form group. - * @param {Omit} props - * @param {FieldInputProps} field - * @param {FieldMetaProps} meta - * @returns {PBFormGroupProps} - */ -const fieldToFormGroup = ( - props: Omit, - field: FieldInputProps, - meta: FieldMetaProps -): PBFormGroupProps => { - const showError = meta.touched && meta.error; - - return { - intent: showError ? Intent.DANGER : Intent.NONE, - helperText: showError ? meta.error : '', - ...props, - }; -}; - -/** - * Form group. - * @param {FormGroupProps} - * @returns {React.JSX} - */ -export function FFormGroup({ children, ...props }: FormGroupProps): JSX.Element { - const [field, meta] = useField(props.name); - - return ( - - ); -} \ No newline at end of file diff --git a/src/components/Forms/FSelect.tsx b/src/components/Forms/FSelect.tsx deleted file mode 100644 index 2496f1b7a..000000000 --- a/src/components/Forms/FSelect.tsx +++ /dev/null @@ -1,85 +0,0 @@ -// @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, - BPSelectProps { - valueAccessor: string; - labelAccessor: string; - input: () => JSX.Element; -} - -interface FieldToSelectProps - extends Omit, 'onItemSelect'>, - FieldProps { - onItemSelect?: (item: any, event?: React.SyntheticEvent) => 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 } - */ -function transformSelectToFieldProps({ - field: { onBlur: onFieldBlur, ...field }, - form: { touched, errors, ...form }, - meta, - input, - valueAccessor, - labelAccessor, - ...props -}: FieldToSelectProps): BPSelectProps { - 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 ; -} - -/** - * Select binded with formik. - * @param {JSX.Element} - * @returns {SelectProps} - */ -export function FSelect({ ...props }: SelectProps): JSX.Element { - return ; -} \ No newline at end of file diff --git a/src/components/Forms/index.js b/src/components/Forms/index.js index bd39f1317..8c016ac31 100644 --- a/src/components/Forms/index.js +++ b/src/components/Forms/index.js @@ -1,5 +1,4 @@ export * from './FormObserver'; export * from './FormikObserver'; export * from './FMoneyInputGroup' -export * from './FFormGroup' -export * from './FSelect' \ No newline at end of file +export * from './BlueprintFormik'; \ No newline at end of file diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js index 2394c8430..41fdd630d 100644 --- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js +++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js @@ -36,9 +36,7 @@ export default function InvoiceFormTopBar() { name={'branch_id'} branches={branches} input={InvoiceBranchSelectButton} - popoverProps={{ - minimal: true, - }} + popoverProps={{ minimal: true }} /> @@ -50,9 +48,7 @@ export default function InvoiceFormTopBar() { name={'warehouse_id'} warehouses={warehouses} input={InvoiceWarehouseSelectButton} - popoverProps={{ - minimal: true, - }} + popoverProps={{ minimal: true }} />