burdy
Version:
Open Source Headless Platform
147 lines (146 loc) • 9.88 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ControlledColorPicker = exports.ControlledChoiceGroup = exports.ControlledDatePicker = exports.ControlledDropdown = exports.ControlledCombobox = exports.ControlledCheckbox = exports.ControlledTextField = void 0;
const react_hook_form_1 = require("react-hook-form");
const react_1 = require("@fluentui/react");
const react_2 = __importStar(require("react"));
const utility_1 = require("../helpers/utility");
const ControlledTextField = (props) => {
return (react_2.default.createElement(react_hook_form_1.Controller, { name: props.name, control: props.control, rules: props.rules, defaultValue: props.defaultValue || '', render: ({ field: { onChange, onBlur, name: fieldName, value }, fieldState: { error }, }) => (react_2.default.createElement(react_1.TextField, Object.assign({}, props, { autoComplete: "off", multiline: (0, utility_1.isTrue)(props === null || props === void 0 ? void 0 : props.multiline), required: (0, utility_1.isTrue)(props === null || props === void 0 ? void 0 : props.required), onChange: onChange, value: value, onBlur: onBlur, name: fieldName, errorMessage: error && error.message, defaultValue: undefined }))) }));
};
exports.ControlledTextField = ControlledTextField;
const ControlledCheckbox = (_a) => {
var props = __rest(_a, []);
return (react_2.default.createElement(react_hook_form_1.Controller, { name: props.name, control: props.control, rules: props.rules, defaultValue: (0, utility_1.isTrue)(props.defaultValue) || 'false', render: ({ field: { onChange, name: fieldName, value } }) => {
return (react_2.default.createElement(react_1.Checkbox, Object.assign({}, props, { onChange: (e, val) => {
onChange(`${val}`);
}, checked: (0, utility_1.isTrue)(value), name: fieldName })));
} }));
};
exports.ControlledCheckbox = ControlledCheckbox;
const ControlledDropdown = (props) => {
return (react_2.default.createElement(react_hook_form_1.Controller, { name: props.name, control: props.control, rules: props.rules, defaultValue: props.defaultValue, render: ({ field: { onChange, onBlur, value }, fieldState: { error }, }) => {
return (react_2.default.createElement(react_1.Dropdown, Object.assign({}, props, { multiSelect: (0, utility_1.isTrue)(props.multiSelect) }, ((0, utility_1.isTrue)(props.multiSelect)
? {
selectedKeys: (value !== null && value !== void 0 ? value : '')
.split(',')
.filter((val) => (val === null || val === void 0 ? void 0 : val.length) > 0),
}
: {
selectedKey: value,
}), { onChange: (_e, option) => {
if ((0, utility_1.isTrue)(props.multiSelect)) {
const items = (value !== null && value !== void 0 ? value : '')
.split(',')
.filter((v) => v !== option.key)
.filter((v) => { var _a; return ((_a = props.options) !== null && _a !== void 0 ? _a : []).some((opt) => opt.key === v); })
.filter((v) => (v === null || v === void 0 ? void 0 : v.length) > 0);
if (option.selected) {
items.push(option.key);
}
onChange(items.join(','));
}
else {
onChange(option.key);
}
}, onBlur: onBlur, errorMessage: error && error.message })));
} }));
};
exports.ControlledDropdown = ControlledDropdown;
const ControlledDatePicker = (props) => {
const defaultDate = (0, react_2.useMemo)(() => {
if (!(props === null || props === void 0 ? void 0 : props.defaultValue))
return null;
const d = new Date(props === null || props === void 0 ? void 0 : props.defaultValue);
if (d instanceof Date && !Number.isNaN(d)) {
return d;
}
return '';
}, [props === null || props === void 0 ? void 0 : props.defaultValue]);
return (react_2.default.createElement(react_hook_form_1.Controller, { name: props.name, control: props.control, rules: props.rules, defaultValue: defaultDate, render: ({ field: { onChange, onBlur, name: fieldName, value }, fieldState: { error }, }) => (react_2.default.createElement("div", null,
react_2.default.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
} },
react_2.default.createElement(react_1.Label, null, props === null || props === void 0 ? void 0 : props.label),
react_2.default.createElement(react_1.ActionButton, { disabled: props.disabled, text: "Clear", onClick: () => {
onChange('');
} })),
react_2.default.createElement(react_1.DatePicker, Object.assign({}, props, { textField: {
name: fieldName,
errorMessage: error && error.message,
}, onSelectDate: (date) => {
onChange(date);
}, value: value ? new Date(value) : null, onBlur: onBlur, label: undefined, defaultValue: undefined })))) }));
};
exports.ControlledDatePicker = ControlledDatePicker;
const colorPickerStyles = {
panel: { padding: 12 },
colorRectangle: { height: 268 },
};
const ControlledColorPicker = (props) => {
return (react_2.default.createElement(react_hook_form_1.Controller, { name: props.name, control: props.control, rules: props.rules, defaultValue: props.defaultValue || '', render: ({ field: { onChange, value }, }) => (react_2.default.createElement("div", { style: { width: 300 } },
react_2.default.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
} },
react_2.default.createElement(react_1.Label, null, props === null || props === void 0 ? void 0 : props.label),
react_2.default.createElement(react_1.Text, null, value),
react_2.default.createElement(react_1.ActionButton, { disabled: props.disabled, text: "Clear", onClick: () => {
onChange('');
} })),
react_2.default.createElement(react_1.ColorPicker, { color: value, onChange: (e, color) => {
onChange(color === null || color === void 0 ? void 0 : color.str);
}, alphaType: "alpha", showPreview: true, styles: colorPickerStyles, strings: {
alphaAriaLabel: 'Alpha slider: Use left and right arrow keys to change value, hold shift for a larger jump',
transparencyAriaLabel: 'Transparency slider: Use left and right arrow keys to change value, hold shift for a larger jump',
hueAriaLabel: 'Hue slider: Use left and right arrow keys to change value, hold shift for a larger jump',
} }))) }));
};
exports.ControlledColorPicker = ControlledColorPicker;
const ControlledCombobox = (props) => {
return (react_2.default.createElement(react_hook_form_1.Controller, { name: props.name, control: props.control, rules: props.rules, defaultValue: props.defaultValue || '', render: ({ field: { onChange, onBlur, value }, fieldState: { error }, }) => {
return react_2.default.createElement(react_1.ComboBox, Object.assign({}, props, { selectedKey: value, onChange: (_, option) => {
onChange(option.key);
}, onBlur: onBlur, errorMessage: error && error.message, defaultValue: undefined, useComboBoxAsMenuWidth: true }));
} }));
};
exports.ControlledCombobox = ControlledCombobox;
const ControlledChoiceGroup = (props) => {
return (react_2.default.createElement(react_hook_form_1.Controller, { name: props.name, control: props.control, rules: props.rules, defaultValue: props.defaultValue || '', render: ({ field: { onChange, onBlur, value }, }) => (react_2.default.createElement(react_1.ChoiceGroup, Object.assign({}, props, { selectedKey: value, onChange: (_e, option) => {
onChange(option.key);
}, onBlur: onBlur, defaultValue: undefined }))) }));
};
exports.ControlledChoiceGroup = ControlledChoiceGroup;