@workday/canvas-kit-preview-react
Version:
Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.
76 lines (75 loc) • 2.77 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSegmentedControlModel = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const collection_1 = require("@workday/canvas-kit-react/collection");
exports.useSegmentedControlModel = (0, common_1.createModelHook)({
defaultConfig: {
...collection_1.useListModel.defaultConfig,
/**
* Optional id for the whole `SegmentedControl` group. If not provided, a unique id will be created.
* @default useUniqueId()
*/
id: '',
/**
* An initially selected value. This value must match the `data-id` of the `SegmentedControl.Item` component.
* If not provided, the first value will be selected.
*/
initialValue: '',
/**
* Sets disabled state for all segmented control buttons
* @default false
*/
disabled: false,
/**
* Sets the size of the segmented control container and its buttons. Can be `small`, `medium` or `large`.
* @default 'medium'
*/
size: 'medium',
/**
* The SegmentedControl can rendered in a horizontal or vertical orientation.
* We suggest to use the `vertical` orientation only for icon only variant.
* @default 'horizontal'
*/
orientation: 'horizontal',
},
requiredConfig: collection_1.useListModel.requiredConfig,
})(config => {
var _a;
const getId = config.getId || collection_1.defaultGetId;
const initialSelectedRef = react_1.default.useRef(config.initialValue);
const items = config.items;
const model = (0, collection_1.useListModel)(collection_1.useListModel.mergeConfig(config, {
orientation: config.orientation || 'horizontal',
items,
onRegisterItem(data) {
if (!initialSelectedRef.current) {
initialSelectedRef.current = getId(data.item);
events.select({ id: initialSelectedRef.current });
}
},
initialSelectedIds: config.initialValue
? [config.initialValue]
: ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length)
? [getId(config.items[0])]
: [],
shouldVirtualize: false,
}));
const state = {
...model.state,
disabled: config.disabled,
size: config.size,
};
const events = {
...model.events,
};
return {
...model,
state,
events,
};
});