@stack-spot/citric-react 0.36.0 → 0.37.0

package/src/components/RadioGroup.tsx

@@ -1,146 +1,146 @@
-import { isNil } from 'lodash'
-import { useMemo } from 'react'
-import { WithColorScheme } from '../types'
-import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-import { Column } from './layout'
-
-export interface BaseRadioGroupProps<T> extends WithColorScheme {
-  /**
-   * The field name.
-   */
-  name?: string,
-  /**
-   * The current value.
-   */
-  value?: T,
-  /**
-   * All the items (radio buttons) to render.
-   */
-  options: T[],
-  /**
-   * Called whenever the selected radio button changes.
-   * @param value the currently selected item.
-   */
-  onChange?: (value: T) => void,
-  /**
-   * A function to render the item label.
-   * 
-   * Attention: ignored if `renderItem` is set.
-   * 
-   * @example
-   * `(option) => option.name`
-   * @default "the item's toString() result."
-   * @param option the item to render.
-   * @returns a React Node to render.
-   */
-  renderLabel?: (option: T) => React.ReactNode,
-  /**
-   * A function to render the item with the radio button. When set, `renderLabel` is ignored.
-   * @example
-   * ```
-   * (radio, option) => <label>{radio} {option.name}</label>
-   * ```
-   * @param radio the radio button.
-   * @param option the current item.
-   * @returns a React Node to render.
-   */
-  renderItem?: (radio: React.ReactElement, option: T) => React.ReactNode,
-  /**
-   * A function to render the item value, a unique identifier for the option.
-   * @example
-   * `(option) => option.id`
-   * @default "if the item is a string or a number, the stringified item. Otherwise, undefined."
-   * @param option the item to compute a key for.
-   * @returns a string key.
-   */
-  renderKey?: (option: T) => string | number | undefined,
-  /**
-   * If this function returns true for the item, this option is disabled.
-   * @default "nothing is disabled"
-   * @param option the item to calculate "disabled" for.
-   * @returns true if the item should be disabled, false otherwise.
-   */
-  isDisabled?: (option: T) => boolean,
-  /**
-   * The space between options.
-   * 
-   * @default "8px"
-   */
-  gap?: string,
-  /**
-   * If set to false, the checkboxes will have tabIndex = -1.
-   * 
-   * @default true
-   */
-  focusable?: boolean,
-}
-
-export type RadioGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRadioGroupProps<T>
-
-/**
- * Renders a list of radio button for single-selection. One radio button is rendered for each option.
- * 
- * Attention: single radio buttons don't make sense, this is why they're not provided by this library.
- * 
- * This component can be heavily customized via its properties. Check the storybook for complex examples.
- * 
- * Tip: if you need to implement features like "search", use the hook `useRadioGroupControls`.
- * 
- * @example
- * 
- * ```
- * const options = useMemo(() => [
- *   { id: 1, name: 'Option 1' },
- *   { id: 2, name: 'Option 2' },
- *   { id: 3, name: 'Option 3' },
- * ], [])
- * 
- * const [value, setValue] = useState<(typeof options)[number] | undefined>()
- * 
- * return <RadioGroup options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
- * ```
- */
-export const RadioGroup = withRef(
-  function RadioGroup<T>({
-    name,
-    value,
-    options,
-    onChange,
-    renderLabel = defaultRenderLabel,
-    renderKey = defaultRenderKey,
-    renderItem,
-    isDisabled,
-    colorScheme,
-    gap = '8px',
-    focusable = true,
-    style,
-    ...props
-  }: RadioGroupProps<T>) {
-    const items = useMemo(() => {
-      const valueKey = value ? renderKey(value) : undefined
-      return options.map((o) => {
-        const key = renderKey(o)
-        const radio = <CitricComponent
-          tag="input"
-          component="radio"
-          type="radio"
-          name={name}
-          value={key}
-          checked={value === o || (!isNil(key) && valueKey === key)}
-          onChange={() => onChange?.(o)}
-          disabled={isDisabled?.(o)}
-          tabIndex={focusable ? undefined : -1}
-        />
-        return renderItem ? renderItem(radio, o) : (
-          <CitricComponent tag="label" component="radio-row" key={key} colorScheme={colorScheme}>
-            {radio}
-            {renderLabel(o)}
-          </CitricComponent>
-        )
-      })
-    }, [options, value, name, colorScheme])
-    return <Column {...props} style={{ gap, ...style }}>{items}</Column>
-  },
-)
+import { isNil } from 'lodash'
+import { useMemo } from 'react'
+import { WithColorScheme } from '../types'
+import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+import { Column } from './layout'
+
+export interface BaseRadioGroupProps<T> extends WithColorScheme {
+  /**
+   * The field name.
+   */
+  name?: string,
+  /**
+   * The current value.
+   */
+  value?: T,
+  /**
+   * All the items (radio buttons) to render.
+   */
+  options: T[],
+  /**
+   * Called whenever the selected radio button changes.
+   * @param value the currently selected item.
+   */
+  onChange?: (value: T) => void,
+  /**
+   * A function to render the item label.
+   * 
+   * Attention: ignored if `renderItem` is set.
+   * 
+   * @example
+   * `(option) => option.name`
+   * @default "the item's toString() result."
+   * @param option the item to render.
+   * @returns a React Node to render.
+   */
+  renderLabel?: (option: T) => React.ReactNode,
+  /**
+   * A function to render the item with the radio button. When set, `renderLabel` is ignored.
+   * @example
+   * ```
+   * (radio, option) => <label>{radio} {option.name}</label>
+   * ```
+   * @param radio the radio button.
+   * @param option the current item.
+   * @returns a React Node to render.
+   */
+  renderItem?: (radio: React.ReactElement, option: T) => React.ReactNode,
+  /**
+   * A function to render the item value, a unique identifier for the option.
+   * @example
+   * `(option) => option.id`
+   * @default "if the item is a string or a number, the stringified item. Otherwise, undefined."
+   * @param option the item to compute a key for.
+   * @returns a string key.
+   */
+  renderKey?: (option: T) => string | number | undefined,
+  /**
+   * If this function returns true for the item, this option is disabled.
+   * @default "nothing is disabled"
+   * @param option the item to calculate "disabled" for.
+   * @returns true if the item should be disabled, false otherwise.
+   */
+  isDisabled?: (option: T) => boolean,
+  /**
+   * The space between options.
+   * 
+   * @default "8px"
+   */
+  gap?: string,
+  /**
+   * If set to false, the checkboxes will have tabIndex = -1.
+   * 
+   * @default true
+   */
+  focusable?: boolean,
+}
+
+export type RadioGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRadioGroupProps<T>
+
+/**
+ * Renders a list of radio button for single-selection. One radio button is rendered for each option.
+ * 
+ * Attention: single radio buttons don't make sense, this is why they're not provided by this library.
+ * 
+ * This component can be heavily customized via its properties. Check the storybook for complex examples.
+ * 
+ * Tip: if you need to implement features like "search", use the hook `useRadioGroupControls`.
+ * 
+ * @example
+ * 
+ * ```
+ * const options = useMemo(() => [
+ *   { id: 1, name: 'Option 1' },
+ *   { id: 2, name: 'Option 2' },
+ *   { id: 3, name: 'Option 3' },
+ * ], [])
+ * 
+ * const [value, setValue] = useState<(typeof options)[number] | undefined>()
+ * 
+ * return <RadioGroup options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
+ * ```
+ */
+export const RadioGroup = withRef(
+  function RadioGroup<T>({
+    name,
+    value,
+    options,
+    onChange,
+    renderLabel = defaultRenderLabel,
+    renderKey = defaultRenderKey,
+    renderItem,
+    isDisabled,
+    colorScheme,
+    gap = '8px',
+    focusable = true,
+    style,
+    ...props
+  }: RadioGroupProps<T>) {
+    const items = useMemo(() => {
+      const valueKey = value ? renderKey(value) : undefined
+      return options.map((o) => {
+        const key = renderKey(o)
+        const radio = <CitricComponent
+          tag="input"
+          component="radio"
+          type="radio"
+          name={name}
+          value={key}
+          checked={value === o || (!isNil(key) && valueKey === key)}
+          onChange={() => onChange?.(o)}
+          disabled={isDisabled?.(o)}
+          tabIndex={focusable ? undefined : -1}
+        />
+        return renderItem ? renderItem(radio, o) : (
+          <CitricComponent tag="label" component="radio-row" key={key} colorScheme={colorScheme}>
+            {radio}
+            {renderLabel(o)}
+          </CitricComponent>
+        )
+      })
+    }, [options, value, name, colorScheme])
+    return <Column {...props} style={{ gap, ...style }}>{items}</Column>
+  },
+)

package/src/components/Rating.tsx

@@ -1,35 +1,98 @@
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export type RatingValue = 1 | 2 | 3 | 4 | 5
-
-export interface BaseRatingProps {
-  value: RatingValue | undefined,
-  onChange: (value: RatingValue) => void,
-  /**
-   * The name of this input.
-   */
-  name?: string,
-}
-
-export type RatingProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRatingProps
-
-/**
- * Renders a 5 star rating UI. The user can select 1 to 5 stars.
- * 
- * @example
- * ```
- * const [value, setValue] = useState<RatingValue | undefined>()
- * return <Rating value={value} setValue={setValue} />
- * ```
- * In the example above, `RatingValue` is any integer from 1 to 5.
- */
-export const Rating = withRef(({ value, onChange, name, ...props }: RatingProps) => (
-  <CitricComponent tag="div" component="rating" {...props}>
-    <input type="radio" value="1" name={name} checked={value === 5} onChange={() => onChange(5)} />
-    <input type="radio" value="2" name={name} checked={value === 4} onChange={() => onChange(4)} />
-    <input type="radio" value="3" name={name} checked={value === 3} onChange={() => onChange(3)} />
-    <input type="radio" value="4" name={name} checked={value === 2} onChange={() => onChange(2)} />
-    <input type="radio" value="5" name={name} checked={value === 1} onChange={() => onChange(1)} />
-  </CitricComponent>
-))
+import { useCallback } from 'react'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export type RatingValue = 1 | 2 | 3 | 4 | 5
+
+export interface BaseRatingProps {
+  /** 
+   * The current value of the rating. 
+   */
+  value: RatingValue | undefined,
+  /** 
+   * Callback when the value changes.
+   */
+  onChange?: (value: RatingValue) => void,
+  /**
+   * The name of this input.
+   */
+  name?: string,
+  /**
+   * Whether the rating inputs are disabled.
+   */
+  disabled?: boolean,
+  /**
+   * Whether the rating inputs are readonly.
+   */
+  readonly?: boolean,
+}
+
+export type RatingProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRatingProps
+
+/**
+ * Renders a 5 star rating UI. The user can select 1 to 5 stars.
+ * 
+ * @example
+ * ```
+ * const [value, setValue] = useState<RatingValue | undefined>()
+ * return <Rating value={value} onChange={setValue} />
+ * ```
+ * In the example above, `RatingValue` is any integer from 1 to 5.
+ */
+export const Rating = withRef(({ value, onChange, name, disabled, readonly, ...props }: RatingProps) => {
+  const handleChange = useCallback((newValue: RatingValue) => {
+    if (!disabled && !readonly) {
+      onChange?.(newValue)
+    }
+  }, [disabled, readonly, onChange])
+
+  return (
+    <CitricComponent tag="div" component="rating" {...props}>
+      <input
+        type="radio"
+        value="1"
+        name={name}
+        checked={value === 5}
+        onChange={() => handleChange(5)}
+        disabled={disabled}
+        readOnly={readonly}
+      />
+      <input
+        type="radio"
+        value="2"
+        name={name}
+        checked={value === 4}
+        onChange={() => handleChange(4)}
+        disabled={disabled}
+        readOnly={readonly}
+      />
+      <input
+        type="radio"
+        value="3"
+        name={name}
+        checked={value === 3}
+        onChange={() => handleChange(3)}
+        disabled={disabled}
+        readOnly={readonly}
+      />
+      <input
+        type="radio"
+        value="4"
+        name={name}
+        checked={value === 2}
+        onChange={() => handleChange(2)}
+        disabled={disabled}
+        readOnly={readonly}
+      />
+      <input
+        type="radio"
+        value="5"
+        name={name}
+        checked={value === 1}
+        onChange={() => handleChange(1)}
+        disabled={disabled}
+        readOnly={readonly}
+      />
+    </CitricComponent>
+  )
+})