@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
76 lines (75 loc) • 2.76 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 collection_1 = require("@workday/canvas-kit-react/collection");
const common_1 = require("@workday/canvas-kit-react/common");
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 = data.id;
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,
};
});