@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
45 lines • 2.42 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { getBaseProps } from '../../base-component';
import { useVisualRefresh } from '../../hooks/use-visual-mode';
import styles from './styles.css.js';
// Can't use css variables for svg attributes
const dimensionsByTheme = {
default: {
viewBox: '0 0 14 14',
indeterminate: '2.5,7 11.5,7',
checked: '2.5,7 6,10 11,3',
xy: 0.5,
r: 1.5,
size: 13,
},
refresh: {
viewBox: '0 0 16 16',
indeterminate: '3.5,8 12.5,8',
checked: '3.5,8 7,11 12,4',
xy: 0.5,
r: 3,
size: 15,
},
};
const CheckboxIcon = ({ checked, indeterminate, disabled = false, readOnly = false, style, ...restProps }) => {
var _a, _b, _c;
const baseProps = getBaseProps(restProps);
const theme = useVisualRefresh() ? 'refresh' : 'default';
const dimensions = dimensionsByTheme[theme];
return (React.createElement("svg", { className: styles.root, viewBox: dimensions.viewBox, "aria-hidden": "true", focusable: "false", ...baseProps },
React.createElement("rect", { className: clsx(styles['styled-box'], {
[styles['styled-box-checked']]: checked,
[styles['styled-box-indeterminate']]: indeterminate,
[styles['styled-box-disabled']]: disabled,
[styles['styled-box-readonly']]: readOnly,
}), x: dimensions.xy, y: dimensions.xy, rx: dimensions.r, ry: dimensions.r, width: dimensions.size, height: dimensions.size, style: { fill: (_a = style === null || style === void 0 ? void 0 : style.box) === null || _a === void 0 ? void 0 : _a.fill, stroke: (_b = style === null || style === void 0 ? void 0 : style.box) === null || _b === void 0 ? void 0 : _b.stroke } }),
checked || indeterminate ? (React.createElement("polyline", { className: clsx(styles['styled-line'], {
[styles['styled-line-disabled']]: disabled,
[styles['styled-line-readonly']]: readOnly,
}), points: indeterminate ? dimensions.indeterminate : dimensions.checked, style: { stroke: (_c = style === null || style === void 0 ? void 0 : style.line) === null || _c === void 0 ? void 0 : _c.stroke } })) : null));
};
export default CheckboxIcon;
//# sourceMappingURL=index.js.map