Function HOCComponent

web/pgadmin/static/js/helpers/withColorPicker.js:19–141

({value, currObj, onChange, onSave, options, ...props})

export function withColorPicker(Component) {

  const HOCComponent = ({value, currObj, onChange, onSave, options, ...props})=>{
    const pickrOptions = {
      showPalette: true,
      allowEmpty: true,
      allowSave: false,
      colorFormat: 'HEX',
      defaultColor: null,
      position: 'right-middle',
      clearText: gettext('Clear'),
      ...options,
    };
    const eleRef = useRef();
    const pickrObj = useRef();
    const onChangeRef = useRef();
    const onSaveRef = useRef();

    onChangeRef.current = onChange;
    onSaveRef.current = onSave;

    const setColor = (newVal, silent) => {
      pickrObj.current?.setColor((_.isUndefined(newVal) || newVal == '') ? pickrOptions.defaultColor : newVal, silent);
    };

    const destroyPickr = () => {
      if (pickrObj.current) {
        pickrObj.current.destroy();
        pickrObj.current = null;
      }
    };

    const initPickr = () => {
      /* pickr does not have way to update options, need to
      destroy and recreate pickr to reflect options */
      destroyPickr();

      pickrObj.current = new Pickr({
        el: eleRef.current,
        useAsButton: true,
        theme: 'monolith',
        swatches: [
          '#000', '#666', '#ccc', '#fff', '#f90', '#ff0', '#0f0',
          '#f0f', '#f4cccc', '#fce5cd', '#d0e0e3', '#cfe2f3', '#ead1dc', '#ea9999',
          '#b6d7a8', '#a2c4c9', '#d5a6bd', '#e06666', '#93c47d', '#76a5af', '#c27ba0',
          '#f1c232', '#6aa84f', '#45818e', '#a64d79', '#bf9000', '#0c343d', '#4c1130',
        ],
        position: pickrOptions.position,
        strings: {
          clear: pickrOptions.clearText,
        },
        components: {
          palette: pickrOptions.showPalette,
          preview: true,
          hue: pickrOptions.showPalette,
          interaction: {
            clear: pickrOptions.allowEmpty,
            defaultRepresentation: pickrOptions.colorFormat,
            disabled: pickrOptions.disabled,
            save: pickrOptions.allowSave,