@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
83 lines (82 loc) • 2.85 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useComboboxModel = exports.useInputModel = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const menu_1 = require("@workday/canvas-kit-react/menu");
/**
* An input model can be used by compound components that need to work with form fields. Some form
* libraries use `onChange` and `value` to update a form object. Others use `onChange` and `ref` to
* avoid rerendering. Also autocomplete and test libraries may use the `value` `HTMLInputElement`
* property. We need to normalize these use cases so subcomponents can have correct data and all
* use-cases are supported.
*/
exports.useInputModel = (0, common_1.createModelHook)({
defaultConfig: {
value: undefined,
onFilterChange(event) {
return;
},
onChange(event) {
return;
},
},
})(config => {
const inputRef = react_1.default.createRef();
return {
onFilterChange: config.onFilterChange,
onChange: config.onChange,
state: { value: config.value, inputRef },
events: {},
};
});
/**
* `ComboboxModel` extends the {@link ListModel} and the {@link InputModel}. Selecting items from
* the menu will dispatch an
* [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event on the
* input which should work with form libraries, automation, and autofill.
*
* ```tsx
* const model = useComboboxModel()
*
* <Combobox model={model}>{Combobox child components}</Combobox>
* ```
*/
exports.useComboboxModel = (0, common_1.createModelHook)({
defaultConfig: {
...exports.useInputModel.defaultConfig,
...menu_1.useMenuModel.defaultConfig,
shouldVirtualize: true,
},
requiredConfig: {
...exports.useInputModel.requiredConfig,
...menu_1.useMenuModel.requiredConfig,
},
})(config => {
const input = (0, exports.useInputModel)(config);
const menu = (0, menu_1.useMenuModel)(config);
const [width, setWidth] = react_1.default.useState(0);
const state = {
/**
* The width of the combobox input. This is used to make sure the UI renders the menu the same
* width as the input.
*/
width,
...input.state,
...menu.state,
};
const events = {
...input.events,
...menu.events,
/**
* Change the width of the menu. Usually this is set to the width of the input.
*/
setWidth(width) {
setWidth(width);
},
};
return { ...menu, ...input, state, events };
});