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

UI components for GeChiUI.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@gechiui/element";

/**
 * External dependencies
 */
import { kebabCase } from 'lodash';
/**
 * GeChiUI dependencies
 */

import { useState, useRef, useEffect } from '@gechiui/element';
import { __, sprintf } from '@gechiui/i18n';
import { lineSolid, moreVertical, plus } from '@gechiui/icons';
import { __experimentalUseFocusOutside as useFocusOutside } from '@gechiui/compose';
/**
 * Internal dependencies
 */

import Button from '../button';
import { ColorPicker } from '../color-picker';
import { FlexItem } from '../flex';
import { HStack } from '../h-stack';
import { ItemGroup } from '../item-group';
import { VStack } from '../v-stack';
import GradientPicker from '../gradient-picker';
import ColorPalette from '../color-palette';
import DropdownMenu from '../dropdown-menu';
import Popover from '../popover';
import { PaletteActionsContainer, PaletteEditStyles, PaletteHeading, PaletteHStackHeader, IndicatorStyled, PaletteItem, NameContainer, NameInputControl, DoneButton, RemoveButton } from './styles';
import { NavigableMenu } from '../navigable-container';
import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
import CustomGradientPicker from '../custom-gradient-picker';
const DEFAULT_COLOR = '#000';

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

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

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

function isTemporaryElement(slugPrefix, _ref3, index) {
  let {
    slug,
    color,
    gradient
  } = _ref3;
  return slug === slugPrefix + kebabCase(getNameForPosition(index)) && (!!color && color === DEFAULT_COLOR || !!gradient && gradient === 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 = useRef();
  useEffect(() => {
    elementsReference.current = elements;
  }, [elements]);
  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 createElement(VStack, {
    spacing: 3
  }, createElement(ItemGroup, {
    isBordered: true,
    isSeparated: true
  }, elements.map((element, index) => 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 = [];
export default 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] = useState(false);
  const [editingElement, setEditingElement] = useState(null);
  const isAdding = isEditing && editingElement && elements[editingElement] && !elements[editingElement].slug;
  const elementsLength = elements.length;
  const hasElements = elementsLength > 0;
  return createElement(PaletteEditStyles, null, createElement(PaletteHStackHeader, null, createElement(PaletteHeading, null, paletteLabel), createElement(PaletteActionsContainer, null, isEditing && createElement(DoneButton, {
    isSmall: true,
    onClick: () => {
      setIsEditing(false);
      setEditingElement(null);
    }
  }, __('完成')), !canOnlyChangeValues && createElement(Button, {
    isSmall: true,
    isPressed: isAdding,
    icon: plus,
    label: isGradient ? __('添加梯度') : __('添加颜色'),
    onClick: () => {
      const tempOptionName = getNameForPosition(elementsLength);
      onChange([...elements, { ...(isGradient ? {
          gradient: DEFAULT_GRADIENT
        } : {
          color: DEFAULT_COLOR
        }),
        name: tempOptionName,
        slug: slugPrefix + kebabCase(tempOptionName)
      }]);
      setIsEditing(true);
      setEditingElement(elements.length);
    }
  }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && createElement(DropdownMenu, {
    icon: moreVertical,
    label: isGradient ? __('梯度选项') : __('颜色选项'),
    toggleProps: {
      isSmall: true
    }
  }, _ref6 => {
    let {
      onClose
    } = _ref6;
    return createElement(Fragment, null, createElement(NavigableMenu, {
      role: "menu"
    }, !isEditing && createElement(Button, {
      variant: "tertiary",
      onClick: () => {
        setIsEditing(true);
        onClose();
      },
      className: "components-palette-edit__menu-button"
    }, isGradient ? __('编辑梯度') : __('编辑颜色')), !canOnlyChangeValues && createElement(Button, {
      variant: "tertiary",
      onClick: () => {
        setEditingElement(null);
        setIsEditing(false);
        onChange();
        onClose();
      },
      className: "components-palette-edit__menu-button"
    }, isGradient ? __('移除所有梯度') : __('移除全部颜色')), canReset && createElement(Button, {
      variant: "tertiary",
      onClick: () => {
        setEditingElement(null);
        onChange();
        onClose();
      }
    }, isGradient ? __('重置梯度') : __('重置颜色'))));
  }))), hasElements && createElement(Fragment, null, isEditing && createElement(PaletteEditListView, {
    canOnlyChangeValues: canOnlyChangeValues,
    elements: elements,
    onChange: onChange,
    editingElement: editingElement,
    setEditingElement: setEditingElement,
    slugPrefix: slugPrefix,
    isGradient: isGradient
  }), !isEditing && (isGradient ? createElement(GradientPicker, {
    gradients: gradients,
    onChange: () => {},
    clearable: false,
    disableCustomGradients: true
  }) : createElement(ColorPalette, {
    colors: colors,
    onChange: () => {},
    clearable: false,
    disableCustomColors: true
  }))), !hasElements && emptyMessage);
}
//# sourceMappingURL=index.js.map