Merge pull request #385 from eweintraub/custom-color-swatch

Custom color swatch in Rich Text Control
pnp · Oct 9, 2019 · 0fb0fa7 · 0fb0fa7
2 parents fcadf4f + 1d76beb
commit 0fb0fa7
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 9 deletions.
diff --git a/src/controls/richText/RichText.tsx b/src/controls/richText/RichText.tsx
@@ -107,7 +107,6 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
 
   constructor(props: IRichTextProps) {
     super(props);
-
     telemetry.track('ReactRichText', {
       className: !!props.className
     });
@@ -579,7 +578,8 @@ id="DropDownStyles"
                               editor={this.getEditor()}
                               isOpen={this.state.morePaneVisible}
                               onClose={this.handleClosePanel}
-                              onLink={this.showInsertLinkDialog} />
+                              onLink={this.showInsertLinkDialog} 
+                              customColors={this.props.customColors}/>
 
         {
           this.renderLinkDialog()

diff --git a/src/controls/richText/RichText.types.ts b/src/controls/richText/RichText.types.ts
@@ -1,3 +1,4 @@
+import { ISwatchColor } from './SwatchColorPickerGroup.types';
 export interface IRichTextProps {
   /**
      * CSS class to apply to the rich text editor.
@@ -27,6 +28,11 @@ export interface IRichTextProps {
    */
   styleOptions?: StyleOptions;
 
+  /**
+   * Additional colors to include in swatch
+   */
+  customColors?: ISwatchColor[];
+
   /**
    * Callback issued when the rich text changes.
    * Returns the text that will be inserted in the rich text control.

diff --git a/src/controls/richText/RichTextPropertyPane.tsx b/src/controls/richText/RichTextPropertyPane.tsx
@@ -317,14 +317,19 @@ export default class RichTextPropertyPane extends React.Component<IRichTextPrope
   private renderColorStylesGroup = (): JSX.Element => {
     const color: string = this.state.formats.color || ThemeColorHelper.GetThemeColor(styles.NeutralPrimary);
     const backgroundColor: string = this.state.formats.background || "rgba(0, 0, 0, 0)";
+
+    /**
+     * Add custom colors if passed as a property
+     */
+    let fontColorGroups = ["themeColors","standardColors"];
+    if(this.props.customColors) fontColorGroups.push('customColors');
+
     return (
       <div className={styles.propertyPaneGroupField}>
         <div className="ms-CustomFieldHost">
           <div className={styles.controlsInOneRow}>
-            <RteColorPicker colorPickerGroups={[
-                              "themeColors",
-                              "standardColors"
-                            ]}
+            <RteColorPicker colorPickerGroups={fontColorGroups} // changed to variable
+                            customColors={this.props.customColors}
                             buttonLabel={strings.FontColorLabel}
                             id="fontColor-propertyPaneButton"
                             defaultButtonLabel={strings.AutomaticFontColor}

diff --git a/src/controls/richText/RichTextPropertyPane.types.ts b/src/controls/richText/RichTextPropertyPane.types.ts
@@ -1,9 +1,11 @@
 import { Quill } from 'react-quill';
+import { ISwatchColor } from './SwatchColorPickerGroup.types';
 
 export interface IRichTextPropertyPaneProps {
   className?: string;
   editor: Quill;
   isOpen: boolean;
+  customColors?: ISwatchColor[];
   onClose: () => void;
   onLink: () => void;
 }

diff --git a/src/controls/richText/RteColorPicker.tsx b/src/controls/richText/RteColorPicker.tsx
@@ -26,7 +26,6 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
    */
   public render(): React.ReactElement<IRteColorPickerProps> {
     const { buttonLabel, defaultButtonLabel, fillThemeColor, id, previewColor } = this.props;
-
     return (
       <div>
         <div ref={(ref) => this.wrapperRef = ref}>
@@ -36,7 +35,8 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
             <DefaultButton className={styles.colorPickerButton}
                            aria-describedby={id}
                            onClick={() => this.handleColorChanged(previewColor)}>
-              <svg className={`${styles.previewSvg} ${previewColor === "rgba(0, 0, 0, 0)" ? styles.border : ""}`}
+              {/* Added border to white */}
+              <svg className={`${styles.previewSvg} ${(previewColor === "rgba(0, 0, 0, 0)" || previewColor === "#ffffff") ? styles.border : ""}`}
                    fill={previewColor}
                    viewBox="0 0 20 20">
                 <rect className={styles.previewRectangle}
@@ -110,6 +110,12 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
       case "highlightColors":
         groupName = strings.HighlightColorsGroupName;
         break;
+      case "standardColors":
+        groupName = strings.StandardColorsGroupName;
+        break;
+      case "customColors":
+        groupName = strings.CustomColorsGroupName;
+        break;
       default:
         groupName = strings.HighlightColorsGroupName;
         break;
@@ -241,6 +247,9 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
           }
         ];
         break;
+      case 'customColors':
+        groupColors = this.props.customColors;
+        break;
       default:
         groupColors = [
           {

diff --git a/src/controls/richText/RteColorPicker.types.ts b/src/controls/richText/RteColorPicker.types.ts
@@ -1,3 +1,5 @@
+import { ISwatchColor } from './SwatchColorPickerGroup.types';
+
 export interface IRteColorPickerProps {
   id: string;
   buttonLabel: string;
@@ -8,6 +10,7 @@ export interface IRteColorPickerProps {
   previewColor: string;
   selectedColor: string;
   switchToDefaultColor: () => void;
+  customColors?: ISwatchColor[];
 }
 
 export interface IRteColorPickerState {

diff --git a/src/controls/richText/SwatchColorPickerGroup.tsx b/src/controls/richText/SwatchColorPickerGroup.tsx
@@ -9,7 +9,6 @@ import { chunk } from '@microsoft/sp-lodash-subset';
 export default class SwatchColorPickerGroup extends React.Component<ISwatchColorPickerGroupProps, ISwatchColorPickerGroupState> {
   public render(): React.ReactElement<ISwatchColorPickerGroupProps> {
     const colorRows = chunk(this.props.groupColors, 5);
-
     return (
       <div>
         <Label htmlFor={this.props.groupText}

diff --git a/src/loc/en-us.ts b/src/loc/en-us.ts
@@ -128,6 +128,7 @@ define([], () => {
     ThemeColorsGroupName: "Theme colors",
     HighlightColorsGroupName: "Highlight colors",
     StandardColorsGroupName: "Standard colors",
+    CustomColorsGroupName: "Custom Colors",
     ThemeColorDarker: "Theme darker",
     ThemeColorDark: "Theme dark",
     ThemeColorDarkAlt: "Theme dark alternate",

diff --git a/src/loc/mystrings.d.ts b/src/loc/mystrings.d.ts
@@ -100,6 +100,8 @@ declare interface IControlStrings {
   ThemeColorsGroupName: string;
   HighlightColorsGroupName: string;
   StandardColorsGroupName: string;
+  CustomColorsGroupName: string;
+  ColorsGroupName: string;
   ThemeColorDarker: string;
   ThemeColorDark: string;
   ThemeColorDarkAlt: string;