@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
41 lines (40 loc) • 2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Field = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
const AdaptableContext_1 = require("../AdaptableContext");
const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
const FormLayout_1 = require("../../components/FormLayout");
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const rebass_1 = require("rebass");
const ColorPicker_1 = require("../../components/ColorPicker");
const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
const Field = (props) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
let input = null;
let value = props.value;
const throttledOnChange = React.useMemo(() => {
return (0, throttle_1.default)((value) => {
props.onChange(value);
}, 300);
}, []);
if (value === undefined) {
value = (0, StyleHelper_1.getVariableColor)(`var(${props.variable})`);
}
switch (props.type) {
case 'number':
input = (React.createElement(AdaptableInput_1.default, { disabled: props.disabled, type: "number", onChange: (event) => throttledOnChange(event.target.value), value: value }));
break;
case 'color':
input = (React.createElement(ColorPicker_1.ColorPicker, { disabled: props.disabled, includeAlpha: false, api: adaptable.api, value: value, onChange: (color) => throttledOnChange(color) }));
break;
}
return (React.createElement(FormLayout_1.FormRow, { label: props.name },
React.createElement(rebass_1.Flex, null,
input,
' ',
React.createElement(SimpleButton_1.default, { disabled: props.value === undefined, onClick: () => props.onChange(false) }, "Clear"))));
};
exports.Field = Field;