@corva/ui 3.1.0-rc.5 → 3.1.0

package/components/GradientPicker/GradientPicker.js

@@ -1,405 +1 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useRef, useState, useEffect, useMemo } from 'react';
-import classNames from 'classnames';
-import Draggable from 'react-draggable';
-import { find, noop, sortBy, reject, clamp, omit } from 'lodash';
-import tinygradient from 'tinygradient';
-import { v4 } from 'uuid';
-import { Typography, Tooltip, Popover, TextField } from '@material-ui/core';
-import { Add } from '@material-ui/icons';
-import { DeleteFourIcon } from '../../icons/iconParkIcons.js';
-import '../../icons/customIcons/icons/AddMessage.js';
-import '../../icons/customIcons/icons/Attention.js';
-import '../../icons/customIcons/icons/Collapse.js';
-import '../../icons/customIcons/icons/Dashboard.js';
-import '../../icons/customIcons/icons/Expand.js';
-import '../../icons/customIcons/icons/FolderClosed.js';
-import '../../icons/customIcons/icons/FolderClosedFilled.js';
-import '../../icons/customIcons/icons/FolderOpened.js';
-import '../../icons/customIcons/icons/GreaterOrEqual.js';
-import '../../icons/customIcons/icons/LessOrEqual.js';
-import '../../icons/customIcons/icons/Search.js';
-import '../../icons/customIcons/icons/Wellhub.js';
-import '../../icons/customIcons/icons/MultiRuler.js';
-import '../../icons/customIcons/icons/Checkbox.js';
-import '../../icons/customIcons/icons/CheckboxChecked.js';
-import '../../icons/customIcons/icons/CheckboxIndeterminate.js';
-import '../../icons/customIcons/icons/Radio.js';
-import '../../icons/customIcons/icons/RadioChecked.js';
-import '../../icons/customIcons/icons/SimulFrac.js';
-import '../../icons/customIcons/icons/ZipperFrac.js';
-import '../../icons/customIcons/icons/CautionFilled.js';
-import '../../icons/customIcons/icons/MoreApp.js';
-import '../../icons/customIcons/icons/Pad.js';
-import '../../icons/customIcons/icons/Gap.js';
-import PaletteChromePicker from '../ColorPicker/PaletteChromePicker/PaletteChromePicker.js';
-import { calcGradientStyle, getStopText, roundToStep, getRangeStep } from './GradientPicker.utils.js';
-import { useThrottledCallback } from '../shared/useThrottledCallback.js';
-import IconButton from '../IconButton/index.js';
-import { useStyles } from './GradientPicker.styles.js';
-import { withSize } from 'react-sizeme';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var DRAG_TOP_LIMIT = -50;
-var DRAG_BOTTOM_LIMIT = 40;
-var DRAG_OFFSET_X = 12;
-var DRAG_OFFSET_Y = -4;
-var GradientPickerComponent = withSize()(function (_ref) {
-  var size = _ref.size,
-    _ref$from = _ref.from,
-    from = _ref$from === void 0 ? 0 : _ref$from,
-    _ref$to = _ref.to,
-    to = _ref$to === void 0 ? 100 : _ref$to,
-    unit = _ref.unit,
-    gradientStops = _ref.gradientStops,
-    onChange = _ref.onChange,
-    style = _ref.style,
-    isMoveInputVisible = _ref.isMoveInputVisible,
-    readonly = _ref.readonly,
-    noScale = _ref.noScale,
-    _ref$dataTestid = _ref['data-testid'],
-    PAGE_NAME = _ref$dataTestid === void 0 ? 'GradientPicker' : _ref$dataTestid;
-  var trackRef = useRef();
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    stops = _useState2[0],
-    setStops = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    paletteAnchorEl = _useState4[0],
-    setPaletteAnchorEl = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    activeStopId = _useState6[0],
-    setActiveStopId = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    addCirclePos = _useState8[0],
-    setAddCirclePos = _useState8[1];
-  var classes = useStyles({
-    readonly: readonly
-  });
-  var fromValue = Number.isFinite(from) ? Number(from) : 0;
-  var toValue = Number.isFinite(to) ? Number(to) : 100;
-  var range = toValue - fromValue;
-  useEffect(function () {
-    var changed = gradientStops.length !== (stops === null || stops === void 0 ? void 0 : stops.length) || gradientStops.some(function (stop, index) {
-      return stop.color !== stops[index].color || stop.pos !== stops[index].pos;
-    });
-    if (changed) {
-      setStops(gradientStops.map(function (stop) {
-        return _objectSpread(_objectSpread({}, stop), {}, {
-          id: v4()
-        });
-      }));
-    }
-  }, [gradientStops]);
-  var gradient = useMemo(function () {
-    return calcGradientStyle(stops);
-  }, [stops]);
-  var containerWidth = useMemo(function () {
-    var _trackRef$current;
-    return (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.clientWidth;
-  }, [size.width, trackRef.current]);
-  var emitChange = function emitChange(stops) {
-    var sorted = sortBy(stops, 'pos');
-    setStops(sorted);
-    if (onChange) {
-      onChange(sorted.map(function (stop) {
-        return omit(stop, 'id');
-      }));
-    }
-  };
-  var handleTrackHover = function handleTrackHover(evt) {
-    if (evt.target !== evt.currentTarget) {
-      setAddCirclePos(null);
-      return;
-    }
-    var rect = evt.currentTarget.getBoundingClientRect();
-    var x = evt.clientX - rect.left;
-    setAddCirclePos(Number.isFinite(x) ? x : null);
-  };
-
-  /**
-   * When a user clicks a stop the "startDrag" and "click" events are fired simultaneously.
-   * So useThrottledCallback (or any other scheduler, like setTimeout) solves
-   * this conflict by waiting a tick and allowing the palette to open.
-   * Then if it was a click and palette is open - do not initiate drag-n-drop.
-   */
-  var handleDragMove = useThrottledCallback(function (id, xPos, yPos) {
-    var isStopped = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-    if (paletteAnchorEl) {
-      return;
-    }
-    var pos = xPos / containerWidth * 100;
-    var stop = find(stops, {
-      id: id
-    });
-    if (yPos >= DRAG_BOTTOM_LIMIT || yPos <= DRAG_TOP_LIMIT) {
-      handleRemoveStop();
-      return;
-    }
-    var currentStop = _objectSpread(_objectSpread({}, stop), {}, {
-      pos: pos
-    });
-    var newStops = sortBy([].concat(_toConsumableArray(reject(stops, {
-      id: id
-    })), [currentStop]), 'pos');
-    if (isStopped) {
-      emitChange(newStops);
-      setActiveStopId(null);
-      return;
-    }
-    setStops(newStops);
-    if (!activeStop) {
-      setActiveStopId(id);
-    }
-  }, 0);
-  var handleAdd = function handleAdd(_evt) {
-    if (readonly) {
-      return;
-    }
-    var pos = addCirclePos / containerWidth * 100;
-    var gradient = tinygradient(stops.map(function (item) {
-      return {
-        color: item.color,
-        pos: item.pos / 100
-      };
-    }));
-    var color = "#".concat(gradient.rgbAt(pos / 100).toHex());
-    var newStop = {
-      id: v4(),
-      pos: pos,
-      color: color
-    };
-    emitChange([].concat(_toConsumableArray(stops), [newStop]));
-  };
-  var handleColorPickerOpen = function handleColorPickerOpen(evt, id) {
-    evt.stopPropagation();
-    if (readonly || activeStopId) {
-      return;
-    }
-    setActiveStopId(id);
-    setPaletteAnchorEl(evt.currentTarget);
-  };
-  var handleColorPickerClose = function handleColorPickerClose() {
-    emitChange(stops);
-    setActiveStopId(null);
-    setPaletteAnchorEl(null);
-  };
-  var handleStopPositionTextInput = function handleStopPositionTextInput(evt) {
-    // give React a moment to update state and draw input with a zero and select the zero
-    // to allow user type a new value
-    if (evt.target.value === '') {
-      var inputElement = evt.target;
-      setTimeout(function () {
-        return inputElement === null || inputElement === void 0 ? void 0 : inputElement.select();
-      });
-    }
-    var posScaled = clamp(Number(evt.target.value), fromValue, toValue);
-    if (!posScaled) {
-      evt.target.select();
-    }
-    var pos = (posScaled - fromValue) / range * 100;
-    setStops(stops.map(function (stop) {
-      return stop.id === activeStopId ? _objectSpread(_objectSpread({}, stop), {}, {
-        pos: pos
-      }) : stop;
-    }));
-  };
-  var handleColorChange = function handleColorChange(newColor) {
-    var color = newColor.hex;
-    setStops(stops.map(function (stop) {
-      return stop.id === activeStopId ? _objectSpread(_objectSpread({}, stop), {}, {
-        color: color
-      }) : stop;
-    }));
-  };
-  var handleRemoveStop = function handleRemoveStop() {
-    if (stops.length > 2) {
-      emitChange(reject(stops, {
-        id: activeStopId
-      }));
-      setPaletteAnchorEl(null);
-      setActiveStopId(null);
-    }
-  };
-  var getStopTooltipValue = function getStopTooltipValue(position) {
-    return getStopText(position, {
-      fromValue: fromValue,
-      toValue: toValue
-    });
-  };
-  var addCircleVisible = !paletteAnchorEl && Number.isFinite(addCirclePos) && !readonly;
-  var getStopScaledPosition = function getStopScaledPosition(activeStop) {
-    if (!activeStop) {
-      return null;
-    }
-    var stopValue = fromValue + (activeStop === null || activeStop === void 0 ? void 0 : activeStop.pos) / 100 * range;
-    return roundToStep(stopValue, stopStep / 100);
-  };
-  var activeStop = find(stops, {
-    id: activeStopId
-  });
-  var stopStep = getRangeStep(range);
-  var activeStopScaledPos = getStopScaledPosition(activeStop);
-  return /*#__PURE__*/jsxs("div", {
-    className: classes.root,
-    style: style,
-    children: [!noScale && /*#__PURE__*/jsxs("div", {
-      className: classes.indicatorContainer,
-      children: [/*#__PURE__*/jsx("div", {
-        children: /*#__PURE__*/jsxs(Typography, {
-          "data-testid": "".concat(PAGE_NAME, "_from"),
-          className: classes.indicator,
-          children: [fromValue, " ", unit]
-        })
-      }), /*#__PURE__*/jsx("div", {
-        children: /*#__PURE__*/jsxs(Typography, {
-          "data-testid": "".concat(PAGE_NAME, "_to"),
-          className: classes.indicator,
-          children: [toValue, " ", unit]
-        })
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      onMouseEnter: handleTrackHover,
-      onMouseMove: handleTrackHover,
-      onMouseLeave: function onMouseLeave() {
-        return setAddCirclePos(null);
-      },
-      onClick: handleAdd,
-      "data-testid": "".concat(PAGE_NAME, "_track"),
-      className: classes.mainBar,
-      style: {
-        background: "linear-gradient(90deg, ".concat(gradient, ")")
-      },
-      ref: trackRef,
-      children: [addCircleVisible && /*#__PURE__*/jsx("div", {
-        "data-testid": "".concat(PAGE_NAME, "_addCircle"),
-        className: classes.addCircle,
-        style: {
-          left: addCirclePos - DRAG_OFFSET_X
-        },
-        children: /*#__PURE__*/jsx(Add, {
-          fontSize: "small",
-          className: classes.addIcon
-        })
-      }), !!containerWidth && stops.map(function (_ref2, index) {
-        var pos = _ref2.pos,
-          color = _ref2.color,
-          id = _ref2.id;
-        return (
-          /*#__PURE__*/
-          // @ts-ignore Draggable propTypes issues
-          jsx(Draggable, {
-            disabled: readonly,
-            axis: "x",
-            bounds: {
-              left: -DRAG_OFFSET_X,
-              right: containerWidth - DRAG_OFFSET_X,
-              top: DRAG_TOP_LIMIT,
-              bottom: DRAG_BOTTOM_LIMIT
-            },
-            onDrag: function onDrag(e, dragData) {
-              return handleDragMove(id, dragData.x + DRAG_OFFSET_X, dragData.y, false);
-            },
-            onStop: function onStop(e, dragData) {
-              return handleDragMove(id, dragData.x + DRAG_OFFSET_X, dragData.y, true);
-            },
-            position: {
-              x: containerWidth * pos / 100 - DRAG_OFFSET_X,
-              y: DRAG_OFFSET_Y
-            },
-            children: /*#__PURE__*/jsx("div", {
-              onClick: function onClick(e) {
-                return handleColorPickerOpen(e, id);
-              },
-              "data-testid": "".concat(PAGE_NAME, "_stop_").concat(index),
-              className: classNames(classes.circle, {
-                highlight: activeStopId === id
-              }),
-              style: {
-                backgroundColor: color
-              },
-              children: /*#__PURE__*/jsx(Tooltip, {
-                title: getStopTooltipValue(pos),
-                placement: "top",
-                children: /*#__PURE__*/jsx("div", {
-                  style: {
-                    height: '100%'
-                  }
-                })
-              })
-            })
-          }, id)
-        );
-      })]
-    }), Boolean(paletteAnchorEl) && /*#__PURE__*/jsxs(Popover, {
-      id: "colors-popper",
-      open: Boolean(paletteAnchorEl),
-      anchorEl: paletteAnchorEl,
-      onClose: handleColorPickerClose,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      children: [/*#__PURE__*/jsx(PaletteChromePicker, {
-        color: activeStop === null || activeStop === void 0 ? void 0 : activeStop.color,
-        onChange: handleColorChange,
-        onSizeChange: noop,
-        enableTransparencyPalette: false
-      }), /*#__PURE__*/jsx(IconButton, {
-        "data-testid": "".concat(PAGE_NAME, "_stopDelete"),
-        className: classes.removeButton,
-        onClick: handleRemoveStop,
-        children: /*#__PURE__*/jsx(DeleteFourIcon, {
-          className: classes.deleteIcon
-        })
-      }), isMoveInputVisible && /*#__PURE__*/jsx(TextField, {
-        "data-testid": "".concat(PAGE_NAME, "_moveInput"),
-        type: "number",
-        variant: "outlined",
-        value: activeStopScaledPos,
-        classes: {
-          root: classes.posTextfield
-        },
-        InputProps: {
-          inputProps: {
-            min: fromValue,
-            max: toValue,
-            step: stopStep,
-            maxLength: 10
-          },
-          classes: {
-            root: classes.posOutlinedRoot,
-            input: classes.posOutlinedInput
-          }
-        },
-        autoFocus: true,
-        onFocus: function onFocus(evt) {
-          return evt.target.select();
-        },
-        onChange: handleStopPositionTextInput,
-        onKeyDown: function onKeyDown(evt) {
-          return evt.key === 'Enter' && handleColorPickerClose();
-        }
-      })]
-    })]
-  });
-});
-
-// "Hiding" react-sizeme so Storybook can get the props type
-var GradientPicker = function GradientPicker(props) {
-  return /*#__PURE__*/jsx(GradientPickerComponent, _objectSpread({}, props));
-};
-
-export { GradientPicker };
-//# sourceMappingURL=GradientPicker.js.map
+import{__assign as o,__spreadArray as n}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as t,jsx as i}from"react/jsx-runtime";import{useRef as r,useState as e,useEffect as s,useMemo as c}from"react";import a from"classnames";import l from"react-draggable";import{find as u,noop as m,sortBy as d,reject as p,clamp as f,omit as h}from"lodash";import v from"tinygradient";import{v4 as g}from"uuid";import{Typography as I,Tooltip as j,Popover as b,TextField as C}from"@material-ui/core";import{Add as k}from"@material-ui/icons";import{DeleteFourIcon as x}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/Gap.js";import y from"../ColorPicker/PaletteChromePicker/PaletteChromePicker.js";import{calcGradientStyle as N,getStopText as P,roundToStep as F,getRangeStep as _}from"./GradientPicker.utils.js";import{useThrottledCallback as M}from"../shared/useThrottledCallback.js";import O from"../IconButton/index.js";import{useStyles as S}from"./GradientPicker.styles.js";import{withSize as T}from"react-sizeme";var z=T()((function(T){var z=T.size,B=T.from,E=void 0===B?0:B,G=T.to,R=void 0===G?100:G,A=T.unit,D=T.gradientStops,L=T.onChange,V=T.style,q=T.isMoveInputVisible,w=T.readonly,W=T.noScale,H=T["data-testid"],K=void 0===H?"GradientPicker":H,X=r(),Z=e([]),J=Z[0],Q=Z[1],U=e(null),Y=U[0],$=U[1],oo=e(null),no=oo[0],to=oo[1],io=e(null),ro=io[0],eo=io[1],so=S({readonly:w}),co=Number.isFinite(E)?Number(E):0,ao=Number.isFinite(R)?Number(R):100,lo=ao-co;s((function(){(D.length!==(null==J?void 0:J.length)||D.some((function(o,n){return o.color!==J[n].color||o.pos!==J[n].pos})))&&Q(D.map((function(n){return o(o({},n),{id:g()})})))}),[D]);var uo=c((function(){return N(J)}),[J]),mo=c((function(){var o;return null===(o=X.current)||void 0===o?void 0:o.clientWidth}),[z.width,X.current]),po=function(o){var n=d(o,"pos");Q(n),L&&L(n.map((function(o){return h(o,"id")})))},fo=function(o){if(o.target===o.currentTarget){var n=o.currentTarget.getBoundingClientRect(),t=o.clientX-n.left;eo(Number.isFinite(t)?t:null)}else eo(null)},ho=M((function(t,i,r,e){if(void 0===e&&(e=!1),!Y){var s=i/mo*100,c=u(J,{id:t});if(r>=40||r<=-50)go();else{var a=o(o({},c),{pos:s}),l=d(n(n([],p(J,{id:t}),!0),[a],!1),"pos");if(e)return po(l),void to(null);Q(l),jo||to(t)}}}),0),vo=function(){po(J),to(null),$(null)},go=function(){J.length>2&&(po(p(J,{id:no})),$(null),to(null))},Io=!Y&&Number.isFinite(ro)&&!w,jo=u(J,{id:no}),bo=_(lo),Co=function(o){if(!o)return null;var n=co+(null==o?void 0:o.pos)/100*lo;return F(n,bo/100)}(jo);return t("div",{className:so.root,style:V,children:[!W&&t("div",{className:so.indicatorContainer,children:[i("div",{children:t(I,{"data-testid":"".concat(K,"_from"),className:so.indicator,children:[co," ",A]})}),i("div",{children:t(I,{"data-testid":"".concat(K,"_to"),className:so.indicator,children:[ao," ",A]})})]}),t("div",{onMouseEnter:fo,onMouseMove:fo,onMouseLeave:function(){return eo(null)},onClick:function(o){if(!w){var t=ro/mo*100,i=v(J.map((function(o){return{color:o.color,pos:o.pos/100}}))),r="#".concat(i.rgbAt(t/100).toHex()),e={id:g(),pos:t,color:r};po(n(n([],J,!0),[e],!1))}},"data-testid":"".concat(K,"_track"),className:so.mainBar,style:{background:"linear-gradient(90deg, ".concat(uo,")")},ref:X,children:[Io&&i("div",{"data-testid":"".concat(K,"_addCircle"),className:so.addCircle,style:{left:ro-12},children:i(k,{fontSize:"small",className:so.addIcon})}),!!mo&&J.map((function(o,n){var t,r=o.pos,e=o.color,s=o.id;return i(l,{disabled:w,axis:"x",bounds:{left:-12,right:mo-12,top:-50,bottom:40},onDrag:function(o,n){return ho(s,n.x+12,n.y,!1)},onStop:function(o,n){return ho(s,n.x+12,n.y,!0)},position:{x:mo*r/100-12,y:-4},children:i("div",{onClick:function(o){return function(o,n){o.stopPropagation(),w||no||(to(n),$(o.currentTarget))}(o,s)},"data-testid":"".concat(K,"_stop_").concat(n),className:a(so.circle,{highlight:no===s}),style:{backgroundColor:e},children:i(j,{title:(t=r,P(t,{fromValue:co,toValue:ao})),placement:"top",children:i("div",{style:{height:"100%"}})})})},s)}))]}),Boolean(Y)&&t(b,{id:"colors-popper",open:Boolean(Y),anchorEl:Y,onClose:vo,anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},children:[i(y,{color:null==jo?void 0:jo.color,onChange:function(n){var t=n.hex;Q(J.map((function(n){return n.id===no?o(o({},n),{color:t}):n})))},onSizeChange:m,enableTransparencyPalette:!1}),i(O,{"data-testid":"".concat(K,"_stopDelete"),className:so.removeButton,onClick:go,children:i(x,{className:so.deleteIcon})}),q&&i(C,{"data-testid":"".concat(K,"_moveInput"),type:"number",variant:"outlined",value:Co,classes:{root:so.posTextfield},InputProps:{inputProps:{min:co,max:ao,step:bo,maxLength:10},classes:{root:so.posOutlinedRoot,input:so.posOutlinedInput}},autoFocus:!0,onFocus:function(o){return o.target.select()},onChange:function(n){if(""===n.target.value){var t=n.target;setTimeout((function(){return null==t?void 0:t.select()}))}var i=f(Number(n.target.value),co,ao);i||n.target.select();var r=(i-co)/lo*100;Q(J.map((function(n){return n.id===no?o(o({},n),{pos:r}):n})))},onKeyDown:function(o){return"Enter"===o.key&&vo()}})]})]})})),B=function(n){return i(z,o({},n))};export{B as GradientPicker};

package/components/GradientPicker/GradientPicker.styles.js

@@ -1,99 +1 @@
-import { makeStyles } from '@material-ui/core';
-
-var useStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      width: '100%',
-      paddingBottom: '10px',
-      paddingLeft: '12px',
-      paddingRight: '12px'
-    },
-    indicatorContainer: {
-      marginBottom: '12px',
-      display: 'flex',
-      justifyContent: 'space-between'
-    },
-    indicator: {
-      fontSize: '12px',
-      lineHeight: '14px'
-    },
-    mainBar: {
-      position: 'relative',
-      height: '16px',
-      width: '100%'
-    },
-    addIcon: {
-      fontSize: '16px'
-    },
-    removeButton: {
-      position: 'absolute',
-      bottom: '10px',
-      left: '8px',
-      padding: 0,
-      width: '36px',
-      height: '36px'
-    },
-    deleteIcon: {
-      fontSize: '20px'
-    },
-    posTextfield: {
-      position: 'absolute',
-      bottom: '14px',
-      right: '8px',
-      width: '64px',
-      '& input::-webkit-outer-spin-button': {
-        '-webkit-appearance': 'none',
-        margin: 0
-      },
-      '& input::-webkit-inner-spin-button': {
-        '-webkit-appearance': 'none',
-        margin: 0
-      }
-    },
-    posOutlinedRoot: {
-      height: '24px',
-      background: theme.palette.background.b6
-    },
-    posOutlinedInput: {
-      color: theme.palette.primary.text6,
-      padding: '2px 4px',
-      textAlign: 'right',
-      fontSize: '14px',
-      '&:focus': {
-        color: theme.palette.primary.text1
-      }
-    },
-    addCircle: {
-      pointerEvents: 'none',
-      position: 'absolute',
-      top: '-4px',
-      width: '24px',
-      height: '24px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: '50%',
-      background: 'rgba(255, 255, 255, 0.3)',
-      border: '1px solid #ffffff'
-    },
-    circle: function circle(_ref) {
-      var readonly = _ref.readonly;
-      return {
-        position: 'absolute',
-        width: '24px',
-        height: '24px',
-        borderRadius: '50%',
-        border: readonly ? 'none' : '1px solid #ffffff',
-        '&:hover': {
-          border: readonly ? 'none' : '3px solid #ffffff'
-        },
-        '&.highlight': {
-          border: '3px solid #ffffff'
-        }
-      };
-    }
-  };
-});
-
-export { useStyles };
-//# sourceMappingURL=GradientPicker.styles.js.map
+import{makeStyles as t}from"@material-ui/core";var e=t((function(t){return{root:{width:"100%",paddingBottom:"10px",paddingLeft:"12px",paddingRight:"12px"},indicatorContainer:{marginBottom:"12px",display:"flex",justifyContent:"space-between"},indicator:{fontSize:"12px",lineHeight:"14px"},mainBar:{position:"relative",height:"16px",width:"100%"},addIcon:{fontSize:"16px"},removeButton:{position:"absolute",bottom:"10px",left:"8px",padding:0,width:"36px",height:"36px"},deleteIcon:{fontSize:"20px"},posTextfield:{position:"absolute",bottom:"14px",right:"8px",width:"64px","& input::-webkit-outer-spin-button":{"-webkit-appearance":"none",margin:0},"& input::-webkit-inner-spin-button":{"-webkit-appearance":"none",margin:0}},posOutlinedRoot:{height:"24px",background:t.palette.background.b6},posOutlinedInput:{color:t.palette.primary.text6,padding:"2px 4px",textAlign:"right",fontSize:"14px","&:focus":{color:t.palette.primary.text1}},addCircle:{pointerEvents:"none",position:"absolute",top:"-4px",width:"24px",height:"24px",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",background:"rgba(255, 255, 255, 0.3)",border:"1px solid #ffffff"},circle:function(t){var e=t.readonly;return{position:"absolute",width:"24px",height:"24px",borderRadius:"50%",border:e?"none":"1px solid #ffffff","&:hover":{border:e?"none":"3px solid #ffffff"},"&.highlight":{border:"3px solid #ffffff"}}}}}));export{e as useStyles};

package/components/GradientPicker/GradientPicker.utils.js

@@ -1,55 +1 @@
-import { sortBy } from 'lodash';
-import numeral from 'numeral';
-
-function calcGradientStyle(stops) {
-  if (!stops || stops.length === 0) {
-    return 'none';
-  }
-  return sortBy(stops, 'pos').map(function (_ref) {
-    var color = _ref.color,
-      pos = _ref.pos;
-    return "".concat(color, " ").concat(pos, "%");
-  }).join(',');
-}
-var getStopText = function getStopText(position, _ref2) {
-  var fromValue = _ref2.fromValue,
-    toValue = _ref2.toValue;
-  if (fromValue === toValue) {
-    return String(fromValue);
-  }
-  var range = toValue - fromValue;
-  var step = getRangeStep(range);
-  var value = fromValue + range * (position / 100);
-  var roundedToStep = roundToStep(value, step);
-  if (Math.abs(step) >= 1) {
-    return numeral(roundedToStep).format('0,00');
-  }
-  var scale = Math.ceil(-Math.log10(step));
-  return roundedToStep.toFixed(Math.max(scale, 0));
-};
-var getRangeStep = function getRangeStep(range) {
-  var step = Math.pow(10, Math.floor(Math.log10(range))) / 100;
-  if (range / step >= 500) {
-    step = step * 5;
-  }
-  if (range / step > 250) {
-    step = step * 2;
-  }
-  var rounded = step > 1 ? Math.round(step) : 1 / Math.round(1 / step);
-  return rounded;
-};
-var roundToStep = function roundToStep(value, step) {
-  return reasonableRealValue(Math.round(value / step) * step);
-};
-var maxSafeIntegerDigitCount = 15;
-var reasonableRealValue = function reasonableRealValue(value) {
-  if (!value) {
-    return value;
-  }
-  var valueMagnitude = Math.ceil(Math.log10(Math.abs(value)));
-  var multiplier = Math.round(Math.pow(10, maxSafeIntegerDigitCount - valueMagnitude));
-  return Math.round(value * multiplier) / multiplier;
-};
-
-export { calcGradientStyle, getRangeStep, getStopText, reasonableRealValue, roundToStep };
-//# sourceMappingURL=GradientPicker.utils.js.map
+import{sortBy as r}from"lodash";import t from"numeral";function o(t){return t&&0!==t.length?r(t,"pos").map((function(r){var t=r.color,o=r.pos;return"".concat(t," ").concat(o,"%")})).join(","):"none"}var a=function(r,o){var a=o.fromValue,e=o.toValue;if(a===e)return String(a);var h=e-a,i=n(h),M=u(a+h*(r/100),i);if(Math.abs(i)>=1)return t(M).format("0,00");var f=Math.ceil(-Math.log10(i));return M.toFixed(Math.max(f,0))},n=function(r){var t=Math.pow(10,Math.floor(Math.log10(r)))/100;return r/t>=500&&(t*=5),r/t>250&&(t*=2),t>1?Math.round(t):1/Math.round(1/t)},u=function(r,t){return e(Math.round(r/t)*t)},e=function(r){if(!r)return r;var t=Math.ceil(Math.log10(Math.abs(r))),o=Math.round(Math.pow(10,15-t));return Math.round(r*o)/o};export{o as calcGradientStyle,n as getRangeStep,a as getStopText,e as reasonableRealValue,u as roundToStep};

package/components/HeaderLayout/HeaderLayout.css.js

@@ -1,8 +1 @@
-import styleInject from './../../ext-esm/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".HeaderLayout_layoutContainer__w0Y9c {\n  display: flex;\n  flex-direction: column;\n}\n\n.HeaderLayout_layoutTopLarge__n-g8a {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.HeaderLayout_layoutTopRightLarge__Jr9yh {\n  display: flex;\n  align-items: baseline;\n  justify-content: end;\n  width: auto;\n  overflow: hidden;\n}\n\n.HeaderLayout_layoutTopSmall__4ZxAb {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: auto;\n  overflow: hidden;\n}\n\n.HeaderLayout_assetChips__kvLY7 {\n  overflow: hidden;\n  display: flex;\n  justify-content: end;\n}\n\n.HeaderLayout_layoutBottomSmall__Tl-yE {\n  display: flex;\n  align-items: baseline;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  padding-top: 8px;\n}\n\n.HeaderLayout_layoutOffsetpicker__gGVNO {\n  display: flex;\n  align-items: center;\n}\n\n.HeaderLayout_layoutOffsetwellChipsLarge__5EUUe {\n  display: flex;\n  justify-content: flex-end;\n  flex-wrap: wrap;\n}\n\n.HeaderLayout_layoutOffsetwellChipsSmall__HnEkc {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n}\n";
-var styles = {"layoutContainer":"HeaderLayout_layoutContainer__w0Y9c","layoutTopLarge":"HeaderLayout_layoutTopLarge__n-g8a","layoutTopRightLarge":"HeaderLayout_layoutTopRightLarge__Jr9yh","layoutTopSmall":"HeaderLayout_layoutTopSmall__4ZxAb","assetChips":"HeaderLayout_assetChips__kvLY7","layoutBottomSmall":"HeaderLayout_layoutBottomSmall__Tl-yE","layoutOffsetpicker":"HeaderLayout_layoutOffsetpicker__gGVNO","layoutOffsetwellChipsLarge":"HeaderLayout_layoutOffsetwellChipsLarge__5EUUe","layoutOffsetwellChipsSmall":"HeaderLayout_layoutOffsetwellChipsSmall__HnEkc"};
-styleInject(css_248z);
-
-export { styles as default };
-//# sourceMappingURL=HeaderLayout.css.js.map
+import e from'./../../ext-esm/style-inject/dist/style-inject.es.js';var a={layoutContainer:"HeaderLayout_layoutContainer__w0Y9c",layoutTopLarge:"HeaderLayout_layoutTopLarge__n-g8a",layoutTopRightLarge:"HeaderLayout_layoutTopRightLarge__Jr9yh",layoutTopSmall:"HeaderLayout_layoutTopSmall__4ZxAb",assetChips:"HeaderLayout_assetChips__kvLY7",layoutBottomSmall:"HeaderLayout_layoutBottomSmall__Tl-yE",layoutOffsetpicker:"HeaderLayout_layoutOffsetpicker__gGVNO",layoutOffsetwellChipsLarge:"HeaderLayout_layoutOffsetwellChipsLarge__5EUUe",layoutOffsetwellChipsSmall:"HeaderLayout_layoutOffsetwellChipsSmall__HnEkc"};e(".HeaderLayout_layoutContainer__w0Y9c{display:flex;flex-direction:column}.HeaderLayout_layoutTopLarge__n-g8a{align-items:center;display:flex;justify-content:space-between}.HeaderLayout_layoutTopRightLarge__Jr9yh{align-items:baseline;display:flex;justify-content:end;overflow:hidden;width:auto}.HeaderLayout_layoutTopSmall__4ZxAb{align-items:center;display:flex;justify-content:space-between;overflow:hidden;width:auto}.HeaderLayout_assetChips__kvLY7{display:flex;justify-content:end;overflow:hidden}.HeaderLayout_layoutBottomSmall__Tl-yE{align-items:baseline;display:flex;flex-wrap:wrap;justify-content:flex-start;padding-top:8px}.HeaderLayout_layoutOffsetpicker__gGVNO{align-items:center;display:flex}.HeaderLayout_layoutOffsetwellChipsLarge__5EUUe{display:flex;flex-wrap:wrap;justify-content:flex-end}.HeaderLayout_layoutOffsetwellChipsSmall__HnEkc{display:flex;flex-wrap:wrap;justify-content:flex-start}");export{a as default};