@tremolo-ui/react 0.0.11 → 0.1.0-alpha.0

package/src/components/Piano/WhiteKey.tsx

@@ -1,120 +0,0 @@
-import clsx from 'clsx'
-import React, {
-  ComponentPropsWithoutRef,
-  forwardRef,
-  useImperativeHandle,
-  useState,
-} from 'react'
-
-import { KeyMethods, KeyProps } from './key'
-import { KeyLabel, KeyLabelProps } from './KeyLabel'
-
-type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
-
-/** @category Piano */
-export const defaultWhiteKeyWidth = 40
-
-/** @category Piano */
-export const WhiteKey = forwardRef<KeyMethods, Props>(
-  (
-    {
-      width = defaultWhiteKeyWidth,
-      height = '100%',
-      className,
-      style,
-      children,
-      __glissando,
-      __position,
-      __note,
-      __disabled,
-      __index,
-      __fill,
-      __width,
-      __onPlayNote,
-      __onStopNote,
-      __label,
-      ...props
-    }: Props,
-    ref,
-  ) => {
-    const [played, setPlayed] = useState(false)
-
-    useImperativeHandle(ref, () => {
-      return {
-        play() {
-          if (__disabled) return
-          setPlayed(true)
-          if (__onPlayNote) __onPlayNote(__note!)
-        },
-        stop() {
-          setPlayed(false)
-          if (__onStopNote) __onStopNote(__note!)
-        },
-        played() {
-          return played
-        },
-      }
-    }, [__disabled, __note, __onPlayNote, __onStopNote, played])
-
-    let keyLabelProps: KeyLabelProps = {}
-    if (children != undefined) {
-      React.Children.forEach(children, (child) => {
-        if (React.isValidElement(child)) {
-          if (child.type == KeyLabel) {
-            keyLabelProps = child.props as KeyLabelProps
-          } else {
-            throw new Error('only <KeyLabel>')
-          }
-        } else {
-          throw new Error('children is an invalid element.')
-        }
-      })
-    }
-
-    return (
-      <div
-        className={clsx(`tremolo-piano-white-key`, className)}
-        aria-disabled={__disabled}
-        data-active={played}
-        style={{
-          left: __position,
-          width: __fill ? __width : (width ?? __width),
-          height: height,
-          ...style,
-        }}
-        onPointerDown={() => {
-          if (__disabled) return
-          setPlayed(true)
-          if (__onPlayNote) __onPlayNote(__note!)
-        }}
-        onPointerEnter={() => {
-          if (__disabled) return
-          if (__glissando) {
-            setPlayed(true)
-            if (__onPlayNote) __onPlayNote(__note!)
-          }
-        }}
-        onPointerUp={() => {
-          if (__disabled) return
-          setPlayed(false)
-          if (__onStopNote) __onStopNote(__note!)
-        }}
-        onPointerLeave={() => {
-          if (__disabled) return
-          if (__glissando) {
-            setPlayed(false)
-            if (__onStopNote) __onStopNote(__note!)
-          }
-        }}
-        {...props}
-      >
-        <KeyLabel
-          __note={__note}
-          __label={__label}
-          __index={__index}
-          {...keyLabelProps}
-        />
-      </div>
-    )
-  },
-)

package/src/components/Piano/key.ts

@@ -1,46 +0,0 @@
-import { CSSProperties, ReactElement, ReactNode } from 'react'
-
-/**
- * @category Piano
- */
-export interface KeyProps {
-  width?: number
-  height?: number | `${number}%`
-
-  style?: CSSProperties
-
-  /**
-   * \<KeyLabel />
-   */
-  children?: ReactElement
-
-  /** @internal */
-  __glissando?: boolean
-  /** @internal */
-  __position?: number
-  /** @internal */
-  __note?: number
-  /** @internal */
-  __disabled?: boolean
-  /** @internal */
-  __index?: number
-  /** @internal */
-  __fill?: boolean
-  /** @internal */
-  __width?: number
-  /** @internal */
-  __onPlayNote?: (noteNumber: number) => void
-  /** @internal */
-  __onStopNote?: (noteNumber: number) => void
-  /** @internal */
-  __label?: (note: number, index: number) => ReactNode
-}
-
-/**
- * @category Piano
- */
-export interface KeyMethods {
-  play: () => void
-  stop: () => void
-  played: () => boolean
-}