diff --git a/src/cells/CellRenderer.tsx b/src/cells/CellRenderer.tsx index ea02f95..e2e82ff 100644 --- a/src/cells/CellRenderer.tsx +++ b/src/cells/CellRenderer.tsx @@ -31,17 +31,17 @@ export const CellRenderer: React.FC = ({ const [editing, setEditing] = useState(false); const [currentData, setCurrentData] = useState(props.data); const inputRef = useRef(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 = ({ 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 = ({ ) : (
- = ({
) ) : ( - { */ 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 index b46dcd2..0464039 100644 --- a/src/controls/AntdInputControl.tsx +++ b/src/controls/AntdInputControl.tsx @@ -37,16 +37,16 @@ export const AntdInputControl: React.FC = (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 ? ( = (props) visible={visible} /> ) : ( - + )} ) : ( diff --git a/src/formatters/StoreDataFormater.tsx b/src/formatters/StoreDataFormatter.tsx similarity index 91% rename from src/formatters/StoreDataFormater.tsx rename to src/formatters/StoreDataFormatter.tsx index 98b8796..0a97dd6 100644 --- a/src/formatters/StoreDataFormater.tsx +++ b/src/formatters/StoreDataFormatter.tsx @@ -13,7 +13,7 @@ import { observer } from 'mobx-react-lite'; import { MstContext } from '../MstContext'; -export const StoreDataFormater: any = observer(({ value, query, propKey }: any) => { +export const StoreDataFormatter: any = observer(({ 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 index a02a5aa..9649871 100644 --- 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 index e388215..4358d1f 100644 --- 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',