@wix/design-system
Version:
@wix/design-system
52 lines • 2.62 kB
JavaScript
import React, { useContext } from 'react';
import { ArrowUpSmall, ArrowRightSmall, ArrowDownSmall, ArrowLeftSmall, } from '@wix/wix-ui-icons-common';
import { IconThemeContext } from '@wix/wix-ui-icons-common/core';
import { classes } from './Dock.classes';
import { DOCK_POSITION, POSITIONS } from './Dock.constants';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
import { useDefaultProps } from '../WixDesignSystemDefaultPropsProvider';
import DockPoint from './components/DockPoint/DockPoint';
const toArray = (value) => {
if (!value)
return [];
return Array.isArray(value) ? value : [value];
};
const defaultIcons = {
ArrowUpSmall,
ArrowRightSmall,
ArrowDownSmall,
ArrowLeftSmall,
};
const iconNameByPosition = {
[DOCK_POSITION.TOP_LEFT]: 'ArrowUpSmall',
[DOCK_POSITION.TOP]: 'ArrowUpSmall',
[DOCK_POSITION.TOP_RIGHT]: 'ArrowUpSmall',
[DOCK_POSITION.LEFT]: 'ArrowLeftSmall',
[DOCK_POSITION.CENTER]: null,
[DOCK_POSITION.RIGHT]: 'ArrowRightSmall',
[DOCK_POSITION.BOTTOM_LEFT]: 'ArrowUpSmall',
[DOCK_POSITION.BOTTOM]: 'ArrowDownSmall',
[DOCK_POSITION.BOTTOM_RIGHT]: 'ArrowUpSmall',
};
const Dock = (props) => {
const { dataHook, className, value = [], onChange, centerSelection = true, disabled = false, disabledDirection, } = useDefaultProps('Dock', props);
const icons = useIcons('Dock', defaultIcons);
const iconTheme = useContext(IconThemeContext);
/* the default set's arrow glyph sits slightly off its viewBox center,
which becomes visible once the icon is rotated on corner points */
const offsetIcon = iconTheme === 'default';
const selectedPositions = toArray(value);
const disabledPositions = toArray(disabledDirection);
return (React.createElement("div", { "data-hook": dataHook, role: "group", className: classes.root({ disabled }, className) }, POSITIONS.map(position => {
if (position === DOCK_POSITION.CENTER && !centerSelection) {
return React.createElement("span", { key: position });
}
const iconName = iconNameByPosition[position];
const Icon = iconName ? icons[iconName] : null;
const isPointDisabled = disabled || disabledPositions.includes(position);
return (React.createElement(DockPoint, { key: position, position: position, selected: selectedPositions.includes(position), disabled: isPointDisabled, offsetIcon: offsetIcon, icon: Icon ? React.createElement(Icon, null) : null, onClick: () => onChange?.(position) }));
})));
};
Dock.displayName = 'Dock';
export default Dock;
//# sourceMappingURL=Dock.js.map