ShapeDivider

/* Note: scale 反転は、__inner に対して行う。shapeDivider自身を反転させると、X方向に隙間ができてしまう。 */
@layer lism.modules {
	.c--shapeDivider {
		--level: 0;

		/* svg配置調整用 */
		--_inner-offset: 0px;
		--_inner-stretch: 1;

		/* flip がオンなら -1 にセット */
		--_flipX: 1;
		--_flipY: 1;

		/* 500px時点を最小値, 1200px時点を最大値にして、clampで高さを変動させる */
		height: clamp(calc(5px * var(--level)), calc(1cqw * var(--level)), calc(12px * var(--level)));
		overflow: visible;
	}

	.c--shapeDivider:where([data-flip^='X']) {
		--_flipX: -1;
	}

	.c--shapeDivider:where([data-flip$='Y']) {
		--_flipY: -1;
	}
	.c--shapeDivider_inner {
		/* 隙間ができるのを防ぐ */
		--offsetY: 0.5px;
		--offsetX: -0.5px;
		height: 100%;
		width: calc(100% + 1px);
		scale: calc(var(--_flipX) * var(--_inner-stretch)) var(--_flipY);
		translate: calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY) * var(--_flipY));
	}

	.c--shapeDivider_svg {
		/* 位置ずれ防止 */
		display: block;
	}

	/* 左右にスライドするアニメーション */
	:where([data-has-animation='true']) .c--shapeDivider_svg {
		/* ↓ X 100% にしてるのは translateXのcalc計算で * -1 をしなくていいように。*/
		transform-origin: 100% 0;
		animation: lism--slideShape 12s infinite alternate linear;
	}
}

@keyframes lism--slideShape {
	0% {
		transform: scaleX(4);
	}
	100% {
		transform: scaleX(4) translateX(calc(100% - 25%));
	}
}

import { Lism } from 'lism-css/react';
import getProps from '../getProps';
import '../_style.css';

export default function ShapeDivider({ children, ...props }) {
	const componentProps = getProps(props);

	// level が 0 の場合は非表示
	if (!componentProps) return null;

	const { viewBox, isAnimation, isEmpty, ...lismProps } = componentProps;

	return (
		<Lism {...lismProps}>
			{isEmpty ? null : (
				<div className='c--shapeDivider_inner'>
					<svg
						xmlns='http://www.w3.org/2000/svg'
						className='c--shapeDivider_svg'
						viewBox={viewBox}
						width='100%'
						height='100%'
						fill='currentColor'
						focusable='false'
						preserveAspectRatio='none'
					>
						{children}
					</svg>
				</div>
			)}
		</Lism>
	);
}

/**
 * ShapeDivider コンポーネントの共通プロパティ処理
 * @param {string} [props.viewBox] - SVG の viewBox
 * @param {boolean} [props.isAnimation] - アニメーションを有効にするか
 * @param {boolean} [props.isEmpty] - シェイプを非表示にしてスペーサーとして使用
 * @param {number} [props.level=5] - シェイプの高さレベル
 * @param {string} [props.stretch] - 水平方向の引き伸ばし量
 * @param {string} [props.offset] - 水平方向のオフセット
 * @param {string} [props.flip] - X/Y/XY で反転方向を指定
 */
export default function getProps({ viewBox, isAnimation, isEmpty, level = 5, stretch, offset, flip, style = {}, ...restProps }) {
	// level が 0 の場合は非表示
	if (level === 0) return null;

	// CSS変数をセット
	const computedStyle = { ...style };
	computedStyle['--level'] = level || null;
	computedStyle['--_inner-offset'] = offset || null;
	computedStyle['--_inner-stretch'] = stretch || null;

	const _props = {
		lismClass: 'c--shapeDivider',
		'max-sz': 'full',
		'aria-hidden': 'true',
	};
	if (flip) _props['data-flip'] = flip;
	if (isAnimation) _props['data-has-animation'] = 'true';

	return {
		..._props,
		style: computedStyle,

		// SVG用のprops
		viewBox,
		isEmpty,

		// その他のprops
		...restProps,
	};
}