@appbuckets/react-ui/esm/ColorPicker/ColorPicker.js

Just Another React UI Framework

import { __rest, __read, __assign } from 'tslib';
import * as React from 'react';
import clsx from 'clsx';
import { useAutoControlledValue } from '@appbuckets/react-ui-core';
import { TwitterPicker, CirclePicker, BlockPicker } from 'react-color';
import Popup from '../Popup/Popup.js';
import { useSharedClassName } from '../utils/customHook.js';
import splitFieldProps from '../utils/splitFieldProps.js';
import '../BucketTheme/BucketTheme.js';
import { useWithDefaultProps } from '../BucketTheme/BucketContext.js';
import Field from '../Field/Field.js';
import Item from '../Item/Item.js';

/* --------
 * Component Render
 * -------- */
var ColorPicker = function (receivedProps) {
  /** Get component props */
  var props = useWithDefaultProps('colorPicker', receivedProps);
  var _a = useSharedClassName(props),
    className = _a.className,
    _b = _a.rest,
    clearable = _b.clearable,
    userDefinedColor = _b.color,
    colors = _b.colors,
    disabled = _b.disabled,
    userDefinedDefaultColor = _b.defaultColor,
    userDefinedDefaultOpen = _b.defaultOpen;
  _b.onClick;
  var onChange = _b.onChange,
    onPickerClose = _b.onPickerClose,
    onPickerOpen = _b.onPickerOpen,
    userDefinedOpen = _b.open,
    pickerType = _b.pickerType,
    placeholder = _b.placeholder,
    readOnly = _b.readOnly,
    required = _b.required,
    showColorValue = _b.showColorValue,
    rawRest = __rest(_b, [
      'clearable',
      'color',
      'colors',
      'disabled',
      'defaultColor',
      'defaultOpen',
      'onClick',
      'onChange',
      'onPickerClose',
      'onPickerOpen',
      'open',
      'pickerType',
      'placeholder',
      'readOnly',
      'required',
      'showColorValue',
    ]);
  /** Split field props from rest */
  var _c = __read(
      splitFieldProps(
        __assign(__assign({}, rawRest), {
          disabled: disabled,
          readOnly: readOnly,
        })
      ),
      2
    ),
    userDefinedFieldProps = _c[0],
    rest = _c[1];
  // ----
  // State Management
  // ----
  var _d = __read(
      useAutoControlledValue(undefined, {
        defaultProp: userDefinedDefaultColor,
        prop: userDefinedColor,
      }),
      2
    ),
    color = _d[0],
    trySetColor = _d[1];
  var _e = __read(
      useAutoControlledValue(false, {
        defaultProp: userDefinedDefaultOpen,
        prop: userDefinedOpen,
      }),
      2
    ),
    open = _e[0],
    trySetOpen = _e[1];
  // ----
  // Component Handlers
  // ----
  var handlePickerOpen = React.useCallback(
    function () {
      if (disabled || readOnly) {
        return;
      }
      if (onPickerOpen) {
        onPickerOpen();
      }
      trySetOpen(true);
    },
    [onPickerOpen, trySetOpen, disabled, readOnly]
  );
  var handlePickerClose = React.useCallback(
    function () {
      if (onPickerClose) {
        onPickerClose();
      }
      trySetOpen(false);
    },
    [onPickerClose, trySetOpen]
  );
  var handleRemoveColor = function () {
    /** Call the User Defined Handler */
    if (typeof onChange === 'function') {
      onChange(null, __assign(__assign({}, props), { color: null }));
    }
    /** Try to set the color */
    trySetColor(null);
    /** Close the Popup */
    handlePickerClose();
  };
  var handleChangeColorCompleted = function (newColor) {
    /** Call the User Defined Handler */
    if (typeof onChange === 'function') {
      onChange(null, __assign(__assign({}, props), { color: newColor.hex }));
    }
    /** Try to set the color */
    trySetColor(newColor.hex);
    /** Close the Popup */
    handlePickerClose();
  };
  // ----
  // Memoized Elements
  // ----
  var avatarElement = React.useMemo(
    function () {
      return React.createElement(Item.Avatar, {
        type: 'square',
        size: 'small',
        className: 'color-preview',
        style: color
          ? {
              backgroundColor: color,
            }
          : {},
      });
    },
    [color]
  );
  var contentElement = React.useMemo(
    function () {
      return (
        showColorValue &&
        React.createElement(Item.Content, {
          header: color || placeholder || 'No Color',
        })
      );
    },
    [color, placeholder, showColorValue]
  );
  var toolsElement = (function () {
    return (
      clearable &&
      color &&
      React.createElement(Item.Tools, {
        tools: [
          {
            key: 0,
            icon: 'times',
            onClick: handleRemoveColor,
          },
        ],
      })
    );
  })();
  /** Build the element class list */
  var classes = clsx(
    { open: open, disabled: disabled, readOnly: readOnly },
    'color-picker',
    className
  );
  /** Build Field Props */
  var fieldProps = __assign(
    __assign(
      { disabled: disabled, readOnly: readOnly, required: required },
      userDefinedFieldProps
    ),
    { contentType: 'color' }
  );
  // ----
  // Readonly Element return a Plain Item
  // ----
  if (readOnly || disabled) {
    return React.createElement(
      Field,
      __assign({}, fieldProps),
      React.createElement(
        Item,
        __assign({ centered: true }, rest, { className: classes }),
        avatarElement,
        contentElement
      )
    );
  }
  // ----
  // Build the Picker Element
  // ----
  var pickerElement = (function () {
    switch (pickerType) {
      case 'block':
        return React.createElement(BlockPicker, {
          triangle: 'hide',
          color: color !== null && color !== void 0 ? color : undefined,
          colors: colors,
          onChangeComplete: handleChangeColorCompleted,
        });
      case 'circle':
        return React.createElement(CirclePicker, {
          color: color !== null && color !== void 0 ? color : undefined,
          colors: colors,
          onChangeComplete: handleChangeColorCompleted,
        });
      case 'twitter':
        return React.createElement(TwitterPicker, {
          triangle: 'hide',
          color: color !== null && color !== void 0 ? color : undefined,
          colors: colors,
          onChangeComplete: handleChangeColorCompleted,
        });
      default:
        return null;
    }
  })();
  // ----
  // Return the Component with Picker
  // ----
  return React.createElement(
    Field,
    __assign({}, fieldProps),
    React.createElement(
      Item,
      __assign({ centered: true }, rest, { className: classes }),
      React.createElement(Popup, {
        className: 'colors',
        basic: true,
        inverted: false,
        position: 'bottom right',
        openOn: ['click'],
        portalProps: {
          open: open && !disabled && !readOnly,
        },
        content: pickerElement,
        trigger: avatarElement,
        onOpen: handlePickerOpen,
        onClose: handlePickerClose,
      }),
      contentElement,
      toolsElement
    )
  );
};
ColorPicker.displayName = 'ColorPicker';

export { ColorPicker as default };