( + Component: ComponentType
+) => (props: P) => JSX.Element; + +export const withStore: TWithStoreHOC = (WrappedComponent) => (props) => { + const ComponentWithStore = () => { + const store = useStores(); + + return ; + }; + + ComponentWithStore.defaultProps = { ...WrappedComponent.defaultProps }; + ComponentWithStore.displayName = `WithStores(${ + WrappedComponent.name || WrappedComponent.displayName + })`; + + // hoistNonReactStatics(ComponentWithStore, WrappedComponent); + + return ; +}; diff --git a/src/client/hooks/useStores.ts b/src/client/hooks/useStores.ts new file mode 100644 index 0000000..dcb37a4 --- /dev/null +++ b/src/client/hooks/useStores.ts @@ -0,0 +1,5 @@ +import { useContext } from "react"; +import { StoreContext } from "../contexts/storeContext"; +import RootStore from "client/stores"; + +export const useStores = (): RootStore => useContext(StoreContext); diff --git a/src/client/stores/CalculationStore/StatusStore.ts b/src/client/stores/CalculationStore/StatusStore.ts new file mode 100644 index 0000000..f8eb6e1 --- /dev/null +++ b/src/client/stores/CalculationStore/StatusStore.ts @@ -0,0 +1,13 @@ +import { action, observable } from "mobx"; +import { Status } from "core/types/elements"; +import initialStatuses from "core/config/initialStatuses"; + +class StatusStore { + statuses = observable(initialStatuses); + + setStatus = action((elementName: string, status: Status) => { + this.statuses[elementName] = status; + }); +} + +export default StatusStore; diff --git a/src/client/stores/CalculationStore/ValuesStore.ts b/src/client/stores/CalculationStore/ValuesStore.ts new file mode 100644 index 0000000..59d9395 --- /dev/null +++ b/src/client/stores/CalculationStore/ValuesStore.ts @@ -0,0 +1,17 @@ +import initialValues from "core/config/initialValues"; +import { SourceValuesNames } from "core/types/values"; +import { action, observable } from "mobx"; + +class ValuesStore { + values = observable(initialValues); + + setValue = action((sourceValueName: SourceValuesNames, newValue: any) => { + //@ts-ignore + this.values[sourceValueName] = newValue; + }); + + getValue = (sourceValueName: SourceValuesNames) => + this.values[sourceValueName]; +} + +export default ValuesStore; diff --git a/src/client/stores/CalculationStore/index.ts b/src/client/stores/CalculationStore/index.ts new file mode 100644 index 0000000..ddb8463 --- /dev/null +++ b/src/client/stores/CalculationStore/index.ts @@ -0,0 +1,16 @@ +import Elements from "core/config/elements"; +import { action, observable } from "mobx"; +import StatusStore from "./StatusStore"; +import ValuesStore from "./ValuesStore"; + +class CalculationStore { + statusStore: StatusStore; + valuesStore: ValuesStore; + + constructor() { + this.statusStore = new StatusStore(); + this.valuesStore = new ValuesStore(); + } +} + +export default CalculationStore; diff --git a/src/client/stores/CommonStore.ts b/src/client/stores/CommonStore.ts new file mode 100644 index 0000000..ff8b4c5 --- /dev/null +++ b/src/client/stores/CommonStore.ts @@ -0,0 +1 @@ +export default {}; diff --git a/src/client/stores/index.ts b/src/client/stores/index.ts new file mode 100644 index 0000000..4317b83 --- /dev/null +++ b/src/client/stores/index.ts @@ -0,0 +1,11 @@ +import CalculationStore from "./CalculationStore"; + +class RootStore { + calculationStore: CalculationStore; + + constructor() { + this.calculationStore = new CalculationStore(); + } +} + +export default RootStore; diff --git a/src/core/config/elements.tsx b/src/core/config/elements.tsx new file mode 100644 index 0000000..2e826ab --- /dev/null +++ b/src/core/config/elements.tsx @@ -0,0 +1,35 @@ +import { IElement } from "core/types/elements"; +import React from "react"; +import { TitledInput } from "client/Elements/Input"; + +const elements: { + [element: string]: IElement; +} = { + tbx1: { + // title: "Такса", + Element: (props: any) => , + sourceValueName: "tax", + }, + tbx2: { + Element: (props: any) => , + sourceValueName: "price", + }, + tbx3: { + Element: (props: any) => , + getValue: (valuesStore) => { + const { tax, price } = valuesStore.values; + if (tax && price) { + { + if (typeof tax === "string" && typeof price === "string") { + return parseInt(tax) + parseInt(price); + } + } + } + }, + // getStatus:(elementName,statusesStore)=>{ + + // } + }, +}; + +export default elements; diff --git a/src/core/config/initialStatuses.ts b/src/core/config/initialStatuses.ts new file mode 100644 index 0000000..9cd529b --- /dev/null +++ b/src/core/config/initialStatuses.ts @@ -0,0 +1,9 @@ +import { Status } from "../types/elements"; + +interface IInitialStatuses { + [elementName: string]: Status; +} + +const initialStatuses: IInitialStatuses = {}; + +export default initialStatuses; diff --git a/src/core/config/initialValues.ts b/src/core/config/initialValues.ts new file mode 100644 index 0000000..c9dacea --- /dev/null +++ b/src/core/config/initialValues.ts @@ -0,0 +1,9 @@ +import { ValuesMap } from "core/types/values"; + +const initialValues: ValuesMap = { + price: 10000, + tax: 151515, + test: 999999, +}; + +export default initialValues; diff --git a/src/core/types/elements.ts b/src/core/types/elements.ts new file mode 100644 index 0000000..9ced8f4 --- /dev/null +++ b/src/core/types/elements.ts @@ -0,0 +1,52 @@ +import { ReactNode } from "react"; +import ValuesStore from "client/stores/CalculationStore/ValuesStore"; +import StatusStore from "client/stores/CalculationStore/StatusStore"; +import { Value, SourceValuesNames } from "./values"; + +type Action = { (): void }; +type Trigger = { (): Action[] }; + +export enum Status { + Disabled, + Hidden, + Fetching, +} +export interface IBaseElement { + title?: string; + Element: React.Component | ReactNode | JSX.IntrinsicElements | JSX.Element; + + getInitialValue?: () => Value; + getInitialStatus?: () => Status | undefined; + + getStatus?: ( + elementName: string, + statusStore: StatusStore + ) => Status | undefined; +} + +export interface IBindedElement extends IBaseElement { + sourceValueName?: SourceValuesNames; +} + +export interface IComputedElement extends IBaseElement { + getValue?: (valuesStore: ValuesStore) => Value; + getValueAsync?: ( + elementName: string, + valuesStore: ValuesStore + ) => Promise; +} + +export interface ITriggerElement extends IComputedElement, IBindedElement { + action?: ( + e: React.ChangeEvent, + valuesStore: ValuesStore, + statusStore: StatusStore + ) => void; + actionAsync?: ( + e: React.ChangeEvent, + valuesStore: ValuesStore, + statusStore: StatusStore + ) => Promise; +} + +export type IElement = IBindedElement & IComputedElement & ITriggerElement; diff --git a/src/core/types/values.ts b/src/core/types/values.ts new file mode 100644 index 0000000..c864f26 --- /dev/null +++ b/src/core/types/values.ts @@ -0,0 +1,6 @@ +export type SourceValuesNames = "price" | "tax" | "test"; + +export type Value = string | number | boolean | undefined; +export type ValuesMap = { + [sourceValueName in SourceValuesNames]?: Value; +}; diff --git a/src/index.css b/src/index.css index a00b16c..b1b4b6e 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,14 @@ @import "~normalize.css"; +html, +body, +#root, +.App { + height: 100%; +} + body { + background-color: rgb(230, 230, 230); margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", diff --git a/tsconfig.json b/tsconfig.json index 21dafda..bcfed56 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,10 +1,12 @@ { + "rootDir": "src", "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, + "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, @@ -14,18 +16,8 @@ "isolatedModules": true, "noEmit": true, "jsx": "react", - "baseUrl": "src", - "paths": { - "common/*": ["./client/common/*"], - "Components/*": ["./client/Components/*"], - "Containers/*": ["./client/Containers/*"], - "Elements/*": ["./client/Elements/*"], - "hooks/*": ["./client/hooks/*"], - "services/*": ["./client/services/*"], - "tools/*": ["./client/tools/*"], - "UIKit/*": ["./client/UIKit/*"] - } + "baseUrl": "src" }, - "include": ["./src/**/*"], + "include": ["src", "src/client"], "exclude": ["src/server", "./node_modules/**/*"] } diff --git a/tsconfig.paths.json.old b/tsconfig.paths.json.old new file mode 100644 index 0000000..893f791 --- /dev/null +++ b/tsconfig.paths.json.old @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "baseUrl": "src", + "paths": { + "common/*": ["./client/common/*"], + "Components/*": ["./client/Components/*"], + "Containers/*": ["./client/Containers/*"], + "Elements/*": ["./client/Elements/*"], + "hooks/*": ["./client/hooks/*"], + "services/*": ["./client/services/*"], + "tools/*": ["./client/tools/*"], + "UIKit/*": ["./client/UIKit/*"] + } + } +}