From c1bbc28b0dbd05ab4d922ba81e4178cb11d78807 Mon Sep 17 00:00:00 2001 From: vojtechportes Date: Thu, 29 Aug 2019 15:58:11 +0200 Subject: [PATCH] Context separated to its own file --- src/components/Builder.tsx | 61 +++------------ src/components/Component/index.tsx | 3 +- src/components/Context.tsx | 76 +++++++++++++++++++ src/components/Group/index.tsx | 3 +- src/components/Widgets/Boolean.tsx | 2 +- src/components/Widgets/FieldSelect.tsx | 2 +- src/components/Widgets/Input.tsx | 2 +- src/components/Widgets/OperatorSelect.tsx | 3 +- src/components/Widgets/Select.tsx | 2 +- src/components/Widgets/SelectMulti.tsx | 2 +- src/index.tsx | 2 + test/components/Component/index.test.tsx | 10 +-- test/components/Group/index.test.tsx | 10 +-- test/components/Iterator.test.tsx | 2 +- test/components/Widgets/Boolean.test.tsx | 10 +-- test/components/Widgets/FieldSelect.test.tsx | 10 +-- test/components/Widgets/Input.test.tsx | 10 +-- .../Widgets/OperatorSelect.test.tsx | 16 ++-- test/components/Widgets/Select.test.tsx | 10 +-- test/components/Widgets/SelectMulti.test.tsx | 10 +-- 20 files changed, 143 insertions(+), 103 deletions(-) create mode 100644 src/components/Context.tsx diff --git a/src/components/Builder.tsx b/src/components/Builder.tsx index 509d6c8..4da479e 100644 --- a/src/components/Builder.tsx +++ b/src/components/Builder.tsx @@ -1,4 +1,4 @@ -import React, { createContext, useState, useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { Iterator } from './Iterator'; import { colors } from '../constants/colors'; @@ -6,6 +6,7 @@ import { normalizeTree } from '../utils/normalizeTree'; import { denormalizeTree } from '../utils/denormalizeTree'; import uniqid from 'uniqid'; import { assignIds } from '../utils/assignIds'; +import { BuilderContextProvider } from './Context'; /* Configurable components */ @@ -89,19 +90,6 @@ export interface BuilderProps { onChange?: (data: any) => any; } -export interface BuilderContextProps { - fields: BuilderFieldProps[]; - data: any; - components: BuilderComponentsProps; - strings: Strings; - setData: React.Dispatch; - onChange: (data: any) => void; -} - -export const BuilderContext = createContext( - {} as BuilderContextProps -); - export const defaultComponents: BuilderComponentsProps = { form: { Input, @@ -126,33 +114,6 @@ export const Builder: React.FC = ({ let normalizedData: any; originalData = assignIds(originalData); - components = { - ...defaultComponents, - ...components, - form: { ...defaultComponents.form, ...components.form }, - }; - - strings = { - ...defaultStrings, - ...strings, - component: { - ...defaultStrings.component, - ...strings.component, - }, - form: { - ...defaultStrings.form, - ...strings.form, - }, - group: { - ...defaultStrings.group, - ...strings.group, - }, - operators: { - ...defaultStrings.operators, - ...strings.operators, - }, - }; - if (originalData.length === 0) { originalData = [ { @@ -189,19 +150,17 @@ export const Builder: React.FC = ({ }; return ( - - + ); }; diff --git a/src/components/Component/index.tsx b/src/components/Component/index.tsx index 07ea6d2..17b52b0 100644 --- a/src/components/Component/index.tsx +++ b/src/components/Component/index.tsx @@ -1,6 +1,7 @@ import React, { useContext } from 'react'; import styled from 'styled-components'; -import { BuilderFieldOperator, BuilderContext } from '../Builder'; +import { BuilderFieldOperator } from '../Builder'; +import { BuilderContext } from '../Context'; import { FieldSelect } from '../Widgets/FieldSelect'; import { Boolean } from '../Widgets/Boolean'; import { Select } from '../Widgets/Select'; diff --git a/src/components/Context.tsx b/src/components/Context.tsx new file mode 100644 index 0000000..b5382f9 --- /dev/null +++ b/src/components/Context.tsx @@ -0,0 +1,76 @@ +import React, { createContext } from 'react'; +import { + BuilderFieldProps, + BuilderComponentsProps, + defaultComponents, +} from './Builder'; +import { strings as defaultStrings, Strings } from '../constants/strings'; + +export interface BuilderContextProps { + fields: BuilderFieldProps[]; + data: any; + components: BuilderComponentsProps; + strings: Strings; + setData: React.Dispatch; + onChange: (data: any) => void; +} + +export const BuilderContext = createContext( + {} as BuilderContextProps +); + +export interface BuilderContextProviderProps extends BuilderContextProps { + children: React.ReactNode | React.ReactNodeArray; +} + +export const BuilderContextProvider: React.FC = ({ + fields, + components, + strings, + data, + setData, + onChange, + children, +}) => { + components = { + ...defaultComponents, + ...components, + form: { ...defaultComponents.form, ...components.form }, + }; + + strings = { + ...defaultStrings, + ...strings, + component: { + ...defaultStrings.component, + ...strings.component, + }, + form: { + ...defaultStrings.form, + ...strings.form, + }, + group: { + ...defaultStrings.group, + ...strings.group, + }, + operators: { + ...defaultStrings.operators, + ...strings.operators, + }, + }; + + return ( + + {children} + + ); +}; diff --git a/src/components/Group/index.tsx b/src/components/Group/index.tsx index e43b2fb..5c79baa 100644 --- a/src/components/Group/index.tsx +++ b/src/components/Group/index.tsx @@ -1,5 +1,6 @@ import React, { useContext } from 'react'; -import { BuilderGroupValues, BuilderContext } from '../Builder'; +import { BuilderGroupValues } from '../Builder'; +import { BuilderContext } from '../Context'; import uniqid from 'uniqid'; import { clone } from '../../utils/clone'; diff --git a/src/components/Widgets/Boolean.tsx b/src/components/Widgets/Boolean.tsx index 380176a..7d1b474 100644 --- a/src/components/Widgets/Boolean.tsx +++ b/src/components/Widgets/Boolean.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { BuilderContext } from '../Builder'; +import { BuilderContext } from '../Context' import { clone } from '../../utils/clone'; export interface BooleanProps { diff --git a/src/components/Widgets/FieldSelect.tsx b/src/components/Widgets/FieldSelect.tsx index 1711737..9ac0fe5 100644 --- a/src/components/Widgets/FieldSelect.tsx +++ b/src/components/Widgets/FieldSelect.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { BuilderContext } from '../Builder'; +import { BuilderContext } from '../Context' import { clone } from '../../utils/clone'; import { isOptionList } from '../../utils/types'; diff --git a/src/components/Widgets/Input.tsx b/src/components/Widgets/Input.tsx index f38b247..f16eed7 100644 --- a/src/components/Widgets/Input.tsx +++ b/src/components/Widgets/Input.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { isStringArray, isUndefined } from '../../utils/types'; -import { BuilderContext } from '../Builder'; +import { BuilderContext } from '../Context' import { clone } from '../../utils/clone'; interface InputProps { diff --git a/src/components/Widgets/OperatorSelect.tsx b/src/components/Widgets/OperatorSelect.tsx index e379b46..bf8b1ea 100644 --- a/src/components/Widgets/OperatorSelect.tsx +++ b/src/components/Widgets/OperatorSelect.tsx @@ -1,5 +1,6 @@ import React, { useContext } from 'react'; -import { BuilderContext, BuilderFieldOperator } from '../Builder'; +import { BuilderFieldOperator } from '../Builder'; +import { BuilderContext } from '../Context' import { clone } from '../../utils/clone'; import { isStringArray } from '../../utils/types'; diff --git a/src/components/Widgets/Select.tsx b/src/components/Widgets/Select.tsx index cfd383c..2e47351 100644 --- a/src/components/Widgets/Select.tsx +++ b/src/components/Widgets/Select.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { BuilderContext } from '../Builder'; +import { BuilderContext } from '../Context' import { clone } from '../../utils/clone'; export interface SelectProps { diff --git a/src/components/Widgets/SelectMulti.tsx b/src/components/Widgets/SelectMulti.tsx index bc3c201..6d824ce 100644 --- a/src/components/Widgets/SelectMulti.tsx +++ b/src/components/Widgets/SelectMulti.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { BuilderContext } from '../Builder'; +import { BuilderContext } from '../Context' import { clone } from '../../utils/clone'; export interface SelectMultiProps { diff --git a/src/index.tsx b/src/index.tsx index 206c597..0d99085 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,6 +9,8 @@ export { defaultComponents, } from './components/Builder'; +export { BuilderContext, BuilderContextProps } from './components/Context'; + /* Configurable components */ export { Input, InputProps } from './components/Form/Input'; diff --git a/test/components/Component/index.test.tsx b/test/components/Component/index.test.tsx index 4dcb266..fd8cf4e 100644 --- a/test/components/Component/index.test.tsx +++ b/test/components/Component/index.test.tsx @@ -1,13 +1,13 @@ -import { Component } from '../../../src/components/Component/index'; -import { shallow, mount } from 'enzyme'; +import { mount, shallow } from 'enzyme'; +import React from 'react'; import { - BuilderContext, - BuilderFieldProps, BuilderComponentsProps, + BuilderFieldProps, defaultComponents, } from '../../../src/components/Builder'; +import { Component } from '../../../src/components/Component/index'; +import { BuilderContext } from '../../../src/components/Context'; import { strings } from '../../../src/constants/strings'; -import React from 'react'; const components: BuilderComponentsProps = defaultComponents; const fields: BuilderFieldProps[] = [ diff --git a/test/components/Group/index.test.tsx b/test/components/Group/index.test.tsx index 04a9491..2484bc4 100644 --- a/test/components/Group/index.test.tsx +++ b/test/components/Group/index.test.tsx @@ -1,13 +1,13 @@ -import { Group } from '../../../src/components/Group/index'; -import { shallow, mount } from 'enzyme'; +import { mount, shallow } from 'enzyme'; +import React from 'react'; import { - BuilderContext, - BuilderFieldProps, BuilderComponentsProps, + BuilderFieldProps, defaultComponents, } from '../../../src/components/Builder'; +import { BuilderContext } from '../../../src/components/Context'; +import { Group } from '../../../src/components/Group/index'; import { strings } from '../../../src/constants/strings'; -import React from 'react'; const components: BuilderComponentsProps = defaultComponents; const fields: BuilderFieldProps[] = [ diff --git a/test/components/Iterator.test.tsx b/test/components/Iterator.test.tsx index 0c4a5cb..69201fb 100644 --- a/test/components/Iterator.test.tsx +++ b/test/components/Iterator.test.tsx @@ -2,10 +2,10 @@ import { mount, shallow } from 'enzyme'; import React from 'react'; import { BuilderComponentsProps, - BuilderContext, BuilderFieldProps, defaultComponents, } from '../../src/components/Builder'; +import { BuilderContext } from '../../src/components/Context'; import { Iterator } from '../../src/components/Iterator'; import { strings } from '../../src/constants/strings'; diff --git a/test/components/Widgets/Boolean.test.tsx b/test/components/Widgets/Boolean.test.tsx index aa4301e..bb1b55f 100644 --- a/test/components/Widgets/Boolean.test.tsx +++ b/test/components/Widgets/Boolean.test.tsx @@ -1,12 +1,12 @@ -import { Boolean } from '../../../src/components/Widgets/Boolean'; +import { mount, shallow } from 'enzyme'; +import React from 'react'; import { - BuilderContext, - BuilderFieldProps, BuilderComponentsProps, + BuilderFieldProps, defaultComponents, } from '../../../src/components/Builder'; -import { shallow, mount } from 'enzyme'; -import React from 'react'; +import { BuilderContext } from '../../../src/components/Context'; +import { Boolean } from '../../../src/components/Widgets/Boolean'; const components: BuilderComponentsProps = defaultComponents; const fields: BuilderFieldProps[] = [ diff --git a/test/components/Widgets/FieldSelect.test.tsx b/test/components/Widgets/FieldSelect.test.tsx index acbb67e..8934284 100644 --- a/test/components/Widgets/FieldSelect.test.tsx +++ b/test/components/Widgets/FieldSelect.test.tsx @@ -1,12 +1,12 @@ -import { FieldSelect } from '../../../src/components/Widgets/FieldSelect'; +import { mount, shallow } from 'enzyme'; +import React from 'react'; import { - BuilderContext, - BuilderFieldProps, BuilderComponentsProps, + BuilderFieldProps, defaultComponents, } from '../../../src/components/Builder'; -import { shallow, mount } from 'enzyme'; -import React from 'react'; +import { BuilderContext } from '../../../src/components/Context'; +import { FieldSelect } from '../../../src/components/Widgets/FieldSelect'; const components: BuilderComponentsProps = defaultComponents; const fields: BuilderFieldProps[] = [ diff --git a/test/components/Widgets/Input.test.tsx b/test/components/Widgets/Input.test.tsx index ceaea5a..fd0e401 100644 --- a/test/components/Widgets/Input.test.tsx +++ b/test/components/Widgets/Input.test.tsx @@ -1,12 +1,12 @@ -import { Input } from '../../../src/components/Widgets/Input'; +import { mount, shallow } from 'enzyme'; +import React from 'react'; import { - BuilderContext, - BuilderFieldProps, BuilderComponentsProps, + BuilderFieldProps, defaultComponents, } from '../../../src/components/Builder'; -import { shallow, mount } from 'enzyme'; -import React from 'react'; +import { BuilderContext } from '../../../src/components/Context'; +import { Input } from '../../../src/components/Widgets/Input'; const components: BuilderComponentsProps = defaultComponents; const fields: BuilderFieldProps[] = [ diff --git a/test/components/Widgets/OperatorSelect.test.tsx b/test/components/Widgets/OperatorSelect.test.tsx index 6685066..234ccd7 100644 --- a/test/components/Widgets/OperatorSelect.test.tsx +++ b/test/components/Widgets/OperatorSelect.test.tsx @@ -1,15 +1,15 @@ +import { mount, shallow } from 'enzyme'; +import React from 'react'; import { - OperatorSelect, - OperatorSelectValuesProps, -} from '../../../src/components/Widgets/OperatorSelect'; -import { - BuilderContext, - BuilderFieldProps, BuilderComponentsProps, + BuilderFieldProps, defaultComponents, } from '../../../src/components/Builder'; -import { shallow, mount } from 'enzyme'; -import React from 'react'; +import { BuilderContext } from '../../../src/components/Context'; +import { + OperatorSelect, + OperatorSelectValuesProps, +} from '../../../src/components/Widgets/OperatorSelect'; const components: BuilderComponentsProps = defaultComponents; const fields: BuilderFieldProps[] = [ diff --git a/test/components/Widgets/Select.test.tsx b/test/components/Widgets/Select.test.tsx index 9339a8c..73f6aa6 100644 --- a/test/components/Widgets/Select.test.tsx +++ b/test/components/Widgets/Select.test.tsx @@ -1,12 +1,12 @@ -import { Select } from '../../../src/components/Widgets/Select'; +import { mount, shallow } from 'enzyme'; +import React from 'react'; import { - BuilderContext, - BuilderFieldProps, BuilderComponentsProps, + BuilderFieldProps, defaultComponents, } from '../../../src/components/Builder'; -import { shallow, mount } from 'enzyme'; -import React from 'react'; +import { BuilderContext } from '../../../src/components/Context'; +import { Select } from '../../../src/components/Widgets/Select'; const components: BuilderComponentsProps = defaultComponents; const fields: BuilderFieldProps[] = [ diff --git a/test/components/Widgets/SelectMulti.test.tsx b/test/components/Widgets/SelectMulti.test.tsx index 016ca4e..47c0986 100644 --- a/test/components/Widgets/SelectMulti.test.tsx +++ b/test/components/Widgets/SelectMulti.test.tsx @@ -1,12 +1,12 @@ -import { SelectMulti } from '../../../src/components/Widgets/SelectMulti'; +import { mount, shallow } from 'enzyme'; +import React from 'react'; import { - BuilderContext, - BuilderFieldProps, BuilderComponentsProps, + BuilderFieldProps, defaultComponents, } from '../../../src/components/Builder'; -import { shallow, mount } from 'enzyme'; -import React from 'react'; +import { BuilderContext } from '../../../src/components/Context'; +import { SelectMulti } from '../../../src/components/Widgets/SelectMulti'; const components: BuilderComponentsProps = defaultComponents; const fields: BuilderFieldProps[] = [