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

Just Another React UI Framework

'use strict';

var tslib = require('tslib');
var React = require('react');
var clsx = require('clsx');
var reactUiCore = require('@appbuckets/react-ui-core');
var reactColor = require('react-color');
var Popup = require('../Popup/Popup.js');
var customHook = require('../utils/customHook.js');
var splitFieldProps = require('../utils/splitFieldProps.js');
require('../BucketTheme/BucketTheme.js');
var BucketContext = require('../BucketTheme/BucketContext.js');
var Field = require('../Field/Field.js');
var Item = require('../Item/Item.js');

function _interopDefaultLegacy(e) {
  return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var clsx__default = /*#__PURE__*/ _interopDefaultLegacy(clsx);

/* --------
 * Component Render
 * -------- */
var ColorPicker = function (receivedProps) {
  /** Get component props */
  var props = BucketContext.useWithDefaultProps('colorPicker', receivedProps);
  var _a = customHook.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 = tslib.__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 = tslib.__read(
      splitFieldProps(
        tslib.__assign(tslib.__assign({}, rawRest), {
          disabled: disabled,
          readOnly: readOnly,
        })
      ),
      2
    ),
    userDefinedFieldProps = _c[0],
    rest = _c[1];
  // ----
  // State Management
  // ----
  var _d = tslib.__read(
      reactUiCore.useAutoControlledValue(undefined, {
        defaultProp: userDefinedDefaultColor,
        prop: userDefinedColor,
      }),
      2
    ),
    color = _d[0],
    trySetColor = _d[1];
  var _e = tslib.__read(
      reactUiCore.useAutoControlledValue(false, {
        defaultProp: userDefinedDefaultOpen,
        prop: userDefinedOpen,
      }),
      2
    ),
    open = _e[0],
    trySetOpen = _e[1];
  // ----
  // Component Handlers
  // ----
  var handlePickerOpen = React__namespace.useCallback(
    function () {
      if (disabled || readOnly) {
        return;
      }
      if (onPickerOpen) {
        onPickerOpen();
      }
      trySetOpen(true);
    },
    [onPickerOpen, trySetOpen, disabled, readOnly]
  );
  var handlePickerClose = React__namespace.useCallback(
    function () {
      if (onPickerClose) {
        onPickerClose();
      }
      trySetOpen(false);
    },
    [onPickerClose, trySetOpen]
  );
  var handleRemoveColor = function () {
    /** Call the User Defined Handler */
    if (typeof onChange === 'function') {
      onChange(
        null,
        tslib.__assign(tslib.__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,
        tslib.__assign(tslib.__assign({}, props), { color: newColor.hex })
      );
    }
    /** Try to set the color */
    trySetColor(newColor.hex);
    /** Close the Popup */
    handlePickerClose();
  };
  // ----
  // Memoized Elements
  // ----
  var avatarElement = React__namespace.useMemo(
    function () {
      return React__namespace.createElement(Item.Avatar, {
        type: 'square',
        size: 'small',
        className: 'color-preview',
        style: color
          ? {
              backgroundColor: color,
            }
          : {},
      });
    },
    [color]
  );
  var contentElement = React__namespace.useMemo(
    function () {
      return (
        showColorValue &&
        React__namespace.createElement(Item.Content, {
          header: color || placeholder || 'No Color',
        })
      );
    },
    [color, placeholder, showColorValue]
  );
  var toolsElement = (function () {
    return (
      clearable &&
      color &&
      React__namespace.createElement(Item.Tools, {
        tools: [
          {
            key: 0,
            icon: 'times',
            onClick: handleRemoveColor,
          },
        ],
      })
    );
  })();
  /** Build the element class list */
  var classes = clsx__default['default'](
    { open: open, disabled: disabled, readOnly: readOnly },
    'color-picker',
    className
  );
  /** Build Field Props */
  var fieldProps = tslib.__assign(
    tslib.__assign(
      { disabled: disabled, readOnly: readOnly, required: required },
      userDefinedFieldProps
    ),
    { contentType: 'color' }
  );
  // ----
  // Readonly Element return a Plain Item
  // ----
  if (readOnly || disabled) {
    return React__namespace.createElement(
      Field,
      tslib.__assign({}, fieldProps),
      React__namespace.createElement(
        Item,
        tslib.__assign({ centered: true }, rest, { className: classes }),
        avatarElement,
        contentElement
      )
    );
  }
  // ----
  // Build the Picker Element
  // ----
  var pickerElement = (function () {
    switch (pickerType) {
      case 'block':
        return React__namespace.createElement(reactColor.BlockPicker, {
          triangle: 'hide',
          color: color !== null && color !== void 0 ? color : undefined,
          colors: colors,
          onChangeComplete: handleChangeColorCompleted,
        });
      case 'circle':
        return React__namespace.createElement(reactColor.CirclePicker, {
          color: color !== null && color !== void 0 ? color : undefined,
          colors: colors,
          onChangeComplete: handleChangeColorCompleted,
        });
      case 'twitter':
        return React__namespace.createElement(reactColor.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__namespace.createElement(
    Field,
    tslib.__assign({}, fieldProps),
    React__namespace.createElement(
      Item,
      tslib.__assign({ centered: true }, rest, { className: classes }),
      React__namespace.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';

module.exports = ColorPicker;