@wordpress/components
Version:
UI components for WordPress.
96 lines (89 loc) • 2.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";
/**
* Internal dependencies
*/
import { BarsView, BarsWrapperView, ContainerView } from './styles';
import { BASE_SIZE, WRAPPER_SIZE } from './utils';
import { contextConnect, useContextSystem } from '../context';
import { COLORS } from '../../utils/colors-values';
/* eslint-disable jsdoc/valid-types */
/**
* @typedef Props
* @property {import('react').CSSProperties['color']} [color] Color of `Spinner`.
* @property {number} [size=16] Size of `Spinner`.
*/
/* eslint-enable jsdoc/valid-types */
/**
*
* @param {import('../context').ViewOwnProps<Props, 'div'>} props
* @param {import('react').Ref<any>} forwardedRef
*/
function Spinner(props, forwardedRef) {
const {
color = COLORS.black,
size = BASE_SIZE,
...otherProps
} = useContextSystem(props, 'Spinner');
const ratio = size / BASE_SIZE;
const scale = ratio * BASE_SIZE / WRAPPER_SIZE;
const transform = `scale(${scale})`;
const styles = {
transform
};
return createElement(ContainerView, _extends({}, otherProps, {
"aria-busy": true,
ref: forwardedRef,
style: {
height: size,
width: size
}
}), createElement(BarsWrapperView, {
"aria-hidden": true,
style: styles
}, createElement(BarsView, {
style: {
color
}
}, createElement("div", {
className: "InnerBar1"
}), createElement("div", {
className: "InnerBar2"
}), createElement("div", {
className: "InnerBar3"
}), createElement("div", {
className: "InnerBar4"
}), createElement("div", {
className: "InnerBar5"
}), createElement("div", {
className: "InnerBar6"
}), createElement("div", {
className: "InnerBar7"
}), createElement("div", {
className: "InnerBar8"
}), createElement("div", {
className: "InnerBar9"
}), createElement("div", {
className: "InnerBar10"
}), createElement("div", {
className: "InnerBar11"
}), createElement("div", {
className: "InnerBar12"
}))));
}
/**
* `Spinner` is a component that notify users that their action is being processed.
*
* @example
* ```jsx
* import { Spinner } from `@wordpress/components/ui`;
*
* function Example() {
* return (
* <Spinner />
* );
* }
* ```
*/
export default contextConnect(Spinner, 'Spinner');
//# sourceMappingURL=component.js.map