[refactor] GH-5 formatter spelling

agentlab · Aug 10, 2021 · 59b386f · 59b386f
1 parent deaeb54
commit 59b386f
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 28 deletions.
diff --git a/src/cells/CellRenderer.tsx b/src/cells/CellRenderer.tsx
@@ -31,17 +31,17 @@ export const CellRenderer: React.FC<ControlComponent & WithCell> = ({
   const [editing, setEditing] = useState(false);
   const [currentData, setCurrentData] = useState(props.data);
   const inputRef = useRef<any>(null);
-  const formaterId = uiOptions.formater || 'base';
+  const formatterId = uiOptions.formatter || 'base';
   const query = uiOptions.query;
   let width = 'auto';
   let editable = true;
   if (uiOptions.editable !== undefined) {
     editable = uiOptions.editable;
   }
-  if (uiOptions && formaterId === 'tinyMCE') {
+  if (uiOptions && formatterId === 'tinyMCE') {
     width = uiOptions.tinyWidth === 'emptySpace' ? '100%' : uiOptions.tinyWidth === 'content' ? 'auto' : 'auto';
   }
-  const Formater = formatters[formaterId] || formatters['base'];
+  const Formatter = formatters[formatterId] || formatters['base'];
   useEffect(() => {
     if (editing && inputRef && inputRef.current) {
       inputRef.current.focus();
@@ -58,10 +58,10 @@ export const CellRenderer: React.FC<ControlComponent & WithCell> = ({
     toggleEdit();
   };
   const specialProps: any = {};
-  if (uiOptions.dataToFormater) {
-    const formaterProps = uiOptions.dataToFormater;
-    for (const key in formaterProps) {
-      specialProps[key] = rowData[formaterProps[key]];
+  if (uiOptions.dataToFormatter) {
+    const formatterProps = uiOptions.dataToFormatter;
+    for (const key in formatterProps) {
+      specialProps[key] = rowData[formatterProps[key]];
     }
   }
   //console.log('RENDER', props.data);
@@ -72,7 +72,7 @@ export const CellRenderer: React.FC<ControlComponent & WithCell> = ({
           <Cell inputRef={inputRef} value={currentData} handleChange={save} {...props} />
         ) : (
           <div onClick={toggleEdit}>
-            <Formater
+            <Formatter
               myRef={myRef}
               query={query}
               propKey={uiOptions.key}
@@ -84,7 +84,7 @@ export const CellRenderer: React.FC<ControlComponent & WithCell> = ({
           </div>
         )
       ) : (
-        <Formater
+        <Formatter
           value={props.data}
           query={query}
           propKey={uiOptions.key}

diff --git a/src/cells/TinyMCECell.tsx b/src/cells/TinyMCECell.tsx
@@ -25,7 +25,7 @@ export const TinyMCECell = (props: any) => {
  */
 export const tinyMCECellTester: RankedTester = rankWith(
   10,
-  (viewElement, schema) => viewElement.options !== undefined && viewElement.options.formater === 'tinyMCE',
+  (viewElement, schema) => viewElement.options !== undefined && viewElement.options.formatter === 'tinyMCE',
 );
 
 export const TinyMCECellWithStore = withStoreToCellProps(TinyMCECell);
diff --git a/src/controls/AntdInputControl.tsx b/src/controls/AntdInputControl.tsx
@@ -37,16 +37,16 @@ export const AntdInputControl: React.FC<ControlComponent & WithInput> = (props)
   const appliedUiSchemaOptions: any = {};
   const InnerComponent = input;
 
-  const formaterId = uiOptions.formater || 'base';
+  const formatterId = uiOptions.formatter || 'base';
   const query = uiOptions.query;
   const specialProps: any = {};
-  if (uiOptions.dataToFormater) {
-    const formaterProps = uiOptions.dataToFormater;
-    for (const key in formaterProps) {
-      specialProps[key] = formData[formaterProps[key]];
+  if (uiOptions.dataToFormatter) {
+    const formatterProps = uiOptions.dataToFormatter;
+    for (const key in formatterProps) {
+      specialProps[key] = formData[formatterProps[key]];
     }
   }
-  const Formater = formatters[formaterId] || formatters['base'];
+  const Formatter = formatters[formatterId] || formatters['base'];
 
   return form ? (
     <Form.Item
@@ -71,7 +71,7 @@ export const AntdInputControl: React.FC<ControlComponent & WithInput> = (props)
           visible={visible}
         />
       ) : (
-        <Formater query={query} propKey={uiOptions.key} value={props.data} {...specialProps} {...props} />
+        <Formatter query={query} propKey={uiOptions.key} value={props.data} {...specialProps} {...props} />
       )}
     </Form.Item>
   ) : (

diff --git a/src/formatters/StoreDataFormater.tsx → src/formatters/StoreDataFormatter.tsx b/src/formatters/StoreDataFormater.tsx → src/formatters/StoreDataFormatter.tsx
@@ -13,7 +13,7 @@ import { observer } from 'mobx-react-lite';
 
 import { MstContext } from '../MstContext';
 
-export const StoreDataFormater: any = observer<any>(({ value, query, propKey }: any) => {
+export const StoreDataFormatter: any = observer<any>(({ value, query, propKey }: any) => {
   const { store } = useContext(MstContext);
   const coll = store.getColl(query);
   let data = coll?.data;

diff --git a/src/formatters/index.ts b/src/formatters/index.ts
@@ -20,7 +20,7 @@ import {
   labeledValue,
   сomparison,
 } from './baseFormatters';
-import { StoreDataFormater } from './StoreDataFormater';
+import { StoreDataFormatter } from './StoreDataFormatter';
 import { TinyMCE } from './tinyMCE';
 
 export const formatters: JsObject = {
@@ -32,7 +32,7 @@ export const formatters: JsObject = {
   integer,
   link,
   tinyMCE: TinyMCE,
-  dataFormater: StoreDataFormater,
+  dataFormatter: StoreDataFormatter,
   labeledValue,
   сomparison,
 };
diff --git a/stories/AntdCardCell.stories.tsx b/stories/AntdCardCell.stories.tsx
@@ -110,7 +110,7 @@ const viewKinds = [
                       type: 'Control',
                       scope: 'price',
                       options: {
-                        formater: 'labeledValue',
+                        formatter: 'labeledValue',
                         editable: false,
                         label: 'Цена',
                         specialChar: '₽',
@@ -125,7 +125,7 @@ const viewKinds = [
                       type: 'Control',
                       scope: 'totalSales',
                       options: {
-                        formater: 'labeledValue',
+                        formatter: 'labeledValue',
                         editable: false,
                         label: 'Всего продано',
                         style: {
@@ -142,8 +142,8 @@ const viewKinds = [
                   scope: 'lastMonthSalesAmount',
                   options: {
                     editable: false,
-                    formater: 'сomparison',
-                    dataToFormater: {
+                    formatter: 'сomparison',
+                    dataToFormatter: {
                       prevValue: 'prevMonthSalesAmount',
                     },
                     label: 'Продажи за месяц',
@@ -158,9 +158,9 @@ const viewKinds = [
                   type: 'Control',
                   scope: 'lastMonthSalesValue',
                   options: {
-                    formater: 'сomparison',
+                    formatter: 'сomparison',
                     editable: false,
-                    dataToFormater: {
+                    dataToFormatter: {
                       prevValue: 'prevMonthSalesValue',
                     },
                     label: 'Объем продаж',
@@ -195,8 +195,8 @@ const viewKinds = [
                         },
                         specialImage: 'https://www.meme-arsenal.com/memes/f8e9bfb9fdf368272b21a5dac8f01ec1.jpg',
                         editable: false,
-                        formater: 'link',
-                        dataToFormater: {
+                        formatter: 'link',
+                        dataToFormatter: {
                           link: '@id',
                         },
                         label: 'Wildberries',