Formula compiler core.
See our website https://app.startable.cn/
Using npm:
npm install --save polaris-react-formulaor using yarn:
yarn add polaris-react-formulaor useing pnpm:
pnpm install polaris-react-formula| Property | Type | Description | Default Value |
|---|---|---|---|
| visible | boolean |
控制Modal显示隐藏 | false |
| value | string |
公式值 | '' |
| className | string |
类名 | '' |
| style | React.CSSProperties |
类名 | '' |
| field | IColumn |
字段 列 | |
| onClose | (() => void) |
关闭Modal | |
| onChange | (formula: string, formulaField: string ) => void) |
获取计算值 回调 | undefined |
| onLink | (() => void) |
跳转外链 | undefined |
import React, { useCallback, useState } from 'react';
import FormulaEditor, { useFormula } from 'polaris-react-formula';
function App() {
const [visible, setVisible] = useState(true);
const [value, setValue] = useState('IF({title} = "刘123建", {title}, {ownerId})');
const onCalc = useCallback((formula: string, formulaField: string) => {
setValue(formulaField);
console.log('%c Formula:', 'color: pink', formula);
console.log('%c Field:', 'color: orange', formulaField);
const res = useFormula(formula, dataSource[0]);
console.log('%c Result:', 'color: yellow', res);
}, []);
const onClose = useCallback(() => {
setVisible(false);
}, []);
return (
<>
<button onClick={() => setVisible(true)}>Click Me</button>
<FormulaEditor
visible={visible}
value={value}
field={column}
onChange={onCalc}
onClose={onClose}
/>
</>
);
}