@gechiui/components/build/palette-edit/index.js

UI components for GeChiUI.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PaletteEdit;

var _element = require("@gechiui/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _lodash = require("lodash");

var _i18n = require("@gechiui/i18n");

var _icons = require("@gechiui/icons");

var _compose = require("@gechiui/compose");

var _button = _interopRequireDefault(require("../button"));

var _colorPicker = require("../color-picker");

var _flex = require("../flex");

var _hStack = require("../h-stack");

var _itemGroup = require("../item-group");

var _vStack = require("../v-stack");

var _gradientPicker = _interopRequireDefault(require("../gradient-picker"));

var _colorPalette = _interopRequireDefault(require("../color-palette"));

var _dropdownMenu = _interopRequireDefault(require("../dropdown-menu"));

var _popover = _interopRequireDefault(require("../popover"));

var _styles = require("./styles");

var _navigableContainer = require("../navigable-container");

var _constants = require("../custom-gradient-picker/constants");

var _customGradientPicker = _interopRequireDefault(require("../custom-gradient-picker"));

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const DEFAULT_COLOR = '#000';

function NameInput(_ref) {
  let {
    value,
    onChange,
    label
  } = _ref;
  return (0, _element.createElement)(_styles.NameInputControl, {
    label: label,
    hideLabelFromVision: true,
    value: value,
    onChange: onChange
  });
}

function getNameForPosition(position) {
  return (0, _i18n.sprintf)(
  /* translators: %s: is a temporary id for a custom color */
  (0, _i18n.__)('颜色%s'), position + 1);
}

function Option(_ref2) {
  let {
    canOnlyChangeValues,
    element,
    onChange,
    isEditing,
    onStartEditing,
    onRemove,
    onStopEditing,
    slugPrefix,
    isGradient
  } = _ref2;
  const focusOutsideProps = (0, _compose.__experimentalUseFocusOutside)(onStopEditing);
  const value = isGradient ? element.gradient : element.color;
  return (0, _element.createElement)(_styles.PaletteItem, (0, _extends2.default)({
    as: "div",
    onClick: onStartEditing
  }, isEditing ? focusOutsideProps : {}), (0, _element.createElement)(_hStack.HStack, {
    justify: "flex-start"
  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.IndicatorStyled, {
    style: {
      background: value,
      color: 'transparent'
    }
  })), (0, _element.createElement)(_flex.FlexItem, null, isEditing && !canOnlyChangeValues ? (0, _element.createElement)(NameInput, {
    label: isGradient ? (0, _i18n.__)('梯度名称') : (0, _i18n.__)('颜色名称'),
    value: element.name,
    onChange: nextName => onChange({ ...element,
      name: nextName,
      slug: slugPrefix + (0, _lodash.kebabCase)(nextName)
    })
  }) : (0, _element.createElement)(_styles.NameContainer, null, element.name)), isEditing && !canOnlyChangeValues && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.RemoveButton, {
    isSmall: true,
    icon: _icons.lineSolid,
    label: (0, _i18n.__)('移除颜色'),
    onClick: onRemove
  }))), isEditing && (0, _element.createElement)(_popover.default, {
    position: "bottom left",
    className: "components-palette-edit__popover"
  }, !isGradient && (0, _element.createElement)(_colorPicker.ColorPicker, {
    color: value,
    onChange: newColor => onChange({ ...element,
      color: newColor
    })
  }), isGradient && (0, _element.createElement)(_customGradientPicker.default, {
    __experimentalIsRenderedInSidebar: true,
    value: value,
    onChange: newGradient => onChange({ ...element,
      gradient: newGradient
    })
  })));
}

function isTemporaryElement(slugPrefix, _ref3, index) {
  let {
    slug,
    color,
    gradient
  } = _ref3;
  return slug === slugPrefix + (0, _lodash.kebabCase)(getNameForPosition(index)) && (!!color && color === DEFAULT_COLOR || !!gradient && gradient === _constants.DEFAULT_GRADIENT);
}

function PaletteEditListView(_ref4) {
  let {
    elements,
    onChange,
    editingElement,
    setEditingElement,
    canOnlyChangeValues,
    slugPrefix,
    isGradient
  } = _ref4;
  // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
  const elementsReference = (0, _element.useRef)();
  (0, _element.useEffect)(() => {
    elementsReference.current = elements;
  }, [elements]);
  (0, _element.useEffect)(() => {
    return () => {
      if (elementsReference.current.some((element, index) => isTemporaryElement(slugPrefix, element, index))) {
        const newElements = elementsReference.current.filter((element, index) => !isTemporaryElement(slugPrefix, element, index));
        onChange(newElements.length ? newElements : undefined);
      }
    };
  }, []);
  return (0, _element.createElement)(_vStack.VStack, {
    spacing: 3
  }, (0, _element.createElement)(_itemGroup.ItemGroup, {
    isBordered: true,
    isSeparated: true
  }, elements.map((element, index) => (0, _element.createElement)(Option, {
    isGradient: isGradient,
    canOnlyChangeValues: canOnlyChangeValues,
    key: index,
    element: element,
    onStartEditing: () => {
      if (editingElement !== index) {
        setEditingElement(index);
      }
    },
    onChange: newElement => {
      onChange(elements.map((currentElement, currentIndex) => {
        if (currentIndex === index) {
          return newElement;
        }

        return currentElement;
      }));
    },
    onRemove: () => {
      setEditingElement(null);
      const newElements = elements.filter((_currentElement, currentIndex) => {
        if (currentIndex === index) {
          return false;
        }

        return true;
      });
      onChange(newElements.length ? newElements : undefined);
    },
    isEditing: index === editingElement,
    onStopEditing: () => {
      if (index === editingElement) {
        setEditingElement(null);
      }
    },
    slugPrefix: slugPrefix
  }))));
}

const EMPTY_ARRAY = [];

function PaletteEdit(_ref5) {
  let {
    gradients,
    colors = EMPTY_ARRAY,
    onChange,
    paletteLabel,
    emptyMessage,
    canOnlyChangeValues,
    canReset,
    slugPrefix = ''
  } = _ref5;
  const isGradient = !!gradients;
  const elements = isGradient ? gradients : colors;
  const [isEditing, setIsEditing] = (0, _element.useState)(false);
  const [editingElement, setEditingElement] = (0, _element.useState)(null);
  const isAdding = isEditing && editingElement && elements[editingElement] && !elements[editingElement].slug;
  const elementsLength = elements.length;
  const hasElements = elementsLength > 0;
  return (0, _element.createElement)(_styles.PaletteEditStyles, null, (0, _element.createElement)(_styles.PaletteHStackHeader, null, (0, _element.createElement)(_styles.PaletteHeading, null, paletteLabel), (0, _element.createElement)(_styles.PaletteActionsContainer, null, isEditing && (0, _element.createElement)(_styles.DoneButton, {
    isSmall: true,
    onClick: () => {
      setIsEditing(false);
      setEditingElement(null);
    }
  }, (0, _i18n.__)('完成')), !canOnlyChangeValues && (0, _element.createElement)(_button.default, {
    isSmall: true,
    isPressed: isAdding,
    icon: _icons.plus,
    label: isGradient ? (0, _i18n.__)('添加梯度') : (0, _i18n.__)('添加颜色'),
    onClick: () => {
      const tempOptionName = getNameForPosition(elementsLength);
      onChange([...elements, { ...(isGradient ? {
          gradient: _constants.DEFAULT_GRADIENT
        } : {
          color: DEFAULT_COLOR
        }),
        name: tempOptionName,
        slug: slugPrefix + (0, _lodash.kebabCase)(tempOptionName)
      }]);
      setIsEditing(true);
      setEditingElement(elements.length);
    }
  }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && (0, _element.createElement)(_dropdownMenu.default, {
    icon: _icons.moreVertical,
    label: isGradient ? (0, _i18n.__)('梯度选项') : (0, _i18n.__)('颜色选项'),
    toggleProps: {
      isSmall: true
    }
  }, _ref6 => {
    let {
      onClose
    } = _ref6;
    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_navigableContainer.NavigableMenu, {
      role: "menu"
    }, !isEditing && (0, _element.createElement)(_button.default, {
      variant: "tertiary",
      onClick: () => {
        setIsEditing(true);
        onClose();
      },
      className: "components-palette-edit__menu-button"
    }, isGradient ? (0, _i18n.__)('编辑梯度') : (0, _i18n.__)('编辑颜色')), !canOnlyChangeValues && (0, _element.createElement)(_button.default, {
      variant: "tertiary",
      onClick: () => {
        setEditingElement(null);
        setIsEditing(false);
        onChange();
        onClose();
      },
      className: "components-palette-edit__menu-button"
    }, isGradient ? (0, _i18n.__)('移除所有梯度') : (0, _i18n.__)('移除全部颜色')), canReset && (0, _element.createElement)(_button.default, {
      variant: "tertiary",
      onClick: () => {
        setEditingElement(null);
        onChange();
        onClose();
      }
    }, isGradient ? (0, _i18n.__)('重置梯度') : (0, _i18n.__)('重置颜色'))));
  }))), hasElements && (0, _element.createElement)(_element.Fragment, null, isEditing && (0, _element.createElement)(PaletteEditListView, {
    canOnlyChangeValues: canOnlyChangeValues,
    elements: elements,
    onChange: onChange,
    editingElement: editingElement,
    setEditingElement: setEditingElement,
    slugPrefix: slugPrefix,
    isGradient: isGradient
  }), !isEditing && (isGradient ? (0, _element.createElement)(_gradientPicker.default, {
    gradients: gradients,
    onChange: () => {},
    clearable: false,
    disableCustomGradients: true
  }) : (0, _element.createElement)(_colorPalette.default, {
    colors: colors,
    onChange: () => {},
    clearable: false,
    disableCustomColors: true
  }))), !hasElements && emptyMessage);
}
//# sourceMappingURL=index.js.map