@wordpress/components 25.6.1 → 26.0.1-next.5a1d1283.0

package/build/view/component.js

@@ -14,7 +14,6 @@ var _base = _interopRequireDefault(require("@emotion/styled/base"));
  * `View` is a core component that renders everything in the library.
  * It is the principle component in the entire library.
  *
- * @example
  * ```jsx
  * import { View } from `@wordpress/components`;
  *
@@ -32,7 +31,7 @@ const View = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
 } : {
   target: "e19lxcc00",
   label: "View"
-})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdmlldy9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlDYyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3ZpZXcvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB0eXBlIHsgUmVmQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnQgfSBmcm9tICcuLi91aS9jb250ZXh0L3dvcmRwcmVzcy1jb21wb25lbnQnO1xuaW1wb3J0IHR5cGUgeyBWaWV3UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuLyoqXG4gKiBgVmlld2AgaXMgYSBjb3JlIGNvbXBvbmVudCB0aGF0IHJlbmRlcnMgZXZlcnl0aGluZyBpbiB0aGUgbGlicmFyeS5cbiAqIEl0IGlzIHRoZSBwcmluY2lwbGUgY29tcG9uZW50IGluIHRoZSBlbnRpcmUgbGlicmFyeS5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQgeyBWaWV3IH0gZnJvbSBgQHdvcmRwcmVzcy9jb21wb25lbnRzYDtcbiAqXG4gKiBmdW5jdGlvbiBFeGFtcGxlKCkge1xuICogXHRyZXR1cm4gKFxuICogXHRcdDxWaWV3PlxuICogXHRcdFx0IENvZGUgaXMgUG9ldHJ5XG4gKiBcdFx0PC9WaWV3PlxuICogXHQpO1xuICogfVxuICogYGBgXG4gKi9cbmV4cG9ydCBjb25zdCBWaWV3OiBXb3JkUHJlc3NDb21wb25lbnQ8XG5cdCdkaXYnLFxuXHRWaWV3UHJvcHMgJiBSZWZBdHRyaWJ1dGVzPCBhbnkgPixcblx0dHJ1ZVxuPiA9IHN0eWxlZC5kaXZgYDtcblxuVmlldy5zZWxlY3RvciA9ICcuY29tcG9uZW50cy12aWV3JztcblZpZXcuZGlzcGxheU5hbWUgPSAnVmlldyc7XG5cbmV4cG9ydCBkZWZhdWx0IFZpZXc7XG4iXX0= */");
+})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdmlldy9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDYyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3ZpZXcvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB0eXBlIHsgUmVmQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnQgfSBmcm9tICcuLi91aS9jb250ZXh0L3dvcmRwcmVzcy1jb21wb25lbnQnO1xuaW1wb3J0IHR5cGUgeyBWaWV3UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuLyoqXG4gKiBgVmlld2AgaXMgYSBjb3JlIGNvbXBvbmVudCB0aGF0IHJlbmRlcnMgZXZlcnl0aGluZyBpbiB0aGUgbGlicmFyeS5cbiAqIEl0IGlzIHRoZSBwcmluY2lwbGUgY29tcG9uZW50IGluIHRoZSBlbnRpcmUgbGlicmFyeS5cbiAqXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7IFZpZXcgfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiBcdHJldHVybiAoXG4gKiBcdFx0PFZpZXc+XG4gKiBcdFx0XHQgQ29kZSBpcyBQb2V0cnlcbiAqIFx0XHQ8L1ZpZXc+XG4gKiBcdCk7XG4gKiB9XG4gKiBgYGBcbiAqL1xuZXhwb3J0IGNvbnN0IFZpZXc6IFdvcmRQcmVzc0NvbXBvbmVudDxcblx0J2RpdicsXG5cdFZpZXdQcm9wcyAmIFJlZkF0dHJpYnV0ZXM8IGFueSA+LFxuXHR0cnVlXG4+ID0gc3R5bGVkLmRpdmBgO1xuXG5WaWV3LnNlbGVjdG9yID0gJy5jb21wb25lbnRzLXZpZXcnO1xuVmlldy5kaXNwbGF5TmFtZSA9ICdWaWV3JztcblxuZXhwb3J0IGRlZmF1bHQgVmlldztcbiJdfQ== */");
 exports.View = View;
 View.selector = '.components-view';
 View.displayName = 'View';

package/build/view/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","_base","default","process","env","NODE_ENV","target","label","exports","selector","displayName","_default"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport type { RefAttributes } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponent } from '../ui/context/wordpress-component';\nimport type { ViewProps } from './types';\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * @example\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View: WordPressComponent<\n\t'div',\n\tViewProps & RefAttributes< any >,\n\ttrue\n> = styled.div``;\n\nView.selector = '.components-view';\nView.displayName = 'View';\n\nexport default View;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAIZ,OAAAC,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,25CAAe;AAACG,OAAA,CAAAR,IAAA,GAAAA,IAAA;AAEjBA,IAAI,CAACS,QAAQ,GAAG,kBAAkB;AAClCT,IAAI,CAACU,WAAW,GAAG,MAAM;AAAC,IAAAC,QAAA,GAEXX,IAAI;AAAAQ,OAAA,CAAAN,OAAA,GAAAS,QAAA"}
+{"version":3,"names":["View","_base","default","process","env","NODE_ENV","target","label","exports","selector","displayName","_default"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport type { RefAttributes } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponent } from '../ui/context/wordpress-component';\nimport type { ViewProps } from './types';\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View: WordPressComponent<\n\t'div',\n\tViewProps & RefAttributes< any >,\n\ttrue\n> = styled.div``;\n\nView.selector = '.components-view';\nView.displayName = 'View';\n\nexport default View;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAIZ,OAAAC,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,24CAAe;AAACG,OAAA,CAAAR,IAAA,GAAAA,IAAA;AAEjBA,IAAI,CAACS,QAAQ,GAAG,kBAAkB;AAClCT,IAAI,CAACU,WAAW,GAAG,MAAM;AAAC,IAAAC,QAAA,GAEXX,IAAI;AAAAQ,OAAA,CAAAN,OAAA,GAAAS,QAAA"}

package/build-module/color-picker/hsv-color-picker.native.js

@@ -0,0 +1,84 @@
+import { createElement } from "@wordpress/element";
+/**
+ * External dependencies
+ */
+import { View, Dimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HuePicker from './hue-picker';
+import SaturationValuePicker from './saturation-picker';
+import styles from './style.native.scss';
+const HsvColorPicker = props => {
+  const maxWidth = Dimensions.get('window').width - 32;
+  const satValPickerRef = useRef(null);
+  const {
+    containerStyle = {},
+    currentColor,
+    huePickerContainerStyle = {},
+    huePickerBorderRadius = 0,
+    huePickerHue = 0,
+    huePickerBarWidth = maxWidth,
+    huePickerBarHeight = 12,
+    huePickerSliderSize = 24,
+    onHuePickerDragStart,
+    onHuePickerDragMove,
+    onHuePickerDragEnd,
+    onHuePickerDragTerminate,
+    onHuePickerPress,
+    satValPickerContainerStyle = {},
+    satValPickerBorderRadius = 0,
+    satValPickerSize = {
+      width: maxWidth,
+      height: 200
+    },
+    satValPickerSliderSize = 24,
+    satValPickerHue = 0,
+    satValPickerSaturation = 1,
+    satValPickerValue = 1,
+    onSatValPickerDragStart,
+    onSatValPickerDragMove,
+    onSatValPickerDragEnd,
+    onSatValPickerDragTerminate,
+    onSatValPickerPress
+  } = props;
+  return createElement(View, {
+    style: [styles['hsv-container'], containerStyle],
+    testID: "hsv-color-picker"
+  }, createElement(SaturationValuePicker, {
+    containerStyle: satValPickerContainerStyle,
+    currentColor: currentColor,
+    borderRadius: satValPickerBorderRadius,
+    size: satValPickerSize,
+    sliderSize: satValPickerSliderSize,
+    hue: satValPickerHue,
+    saturation: satValPickerSaturation,
+    value: satValPickerValue,
+    onDragStart: onSatValPickerDragStart,
+    onDragMove: onSatValPickerDragMove,
+    onDragEnd: onSatValPickerDragEnd,
+    onDragTerminate: onSatValPickerDragTerminate,
+    onPress: onSatValPickerPress,
+    ref: satValPickerRef
+  }), createElement(HuePicker, {
+    containerStyle: huePickerContainerStyle,
+    borderRadius: huePickerBorderRadius,
+    hue: huePickerHue,
+    barWidth: huePickerBarWidth,
+    barHeight: huePickerBarHeight,
+    sliderSize: huePickerSliderSize,
+    onDragStart: onHuePickerDragStart,
+    onDragMove: onHuePickerDragMove,
+    onDragEnd: onHuePickerDragEnd,
+    onDragTerminate: onHuePickerDragTerminate,
+    onPress: onHuePickerPress
+  }));
+};
+export default HsvColorPicker;
+//# sourceMappingURL=hsv-color-picker.native.js.map

package/build-module/color-picker/hsv-color-picker.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Dimensions","useRef","HuePicker","SaturationValuePicker","styles","HsvColorPicker","props","maxWidth","get","width","satValPickerRef","containerStyle","currentColor","huePickerContainerStyle","huePickerBorderRadius","huePickerHue","huePickerBarWidth","huePickerBarHeight","huePickerSliderSize","onHuePickerDragStart","onHuePickerDragMove","onHuePickerDragEnd","onHuePickerDragTerminate","onHuePickerPress","satValPickerContainerStyle","satValPickerBorderRadius","satValPickerSize","height","satValPickerSliderSize","satValPickerHue","satValPickerSaturation","satValPickerValue","onSatValPickerDragStart","onSatValPickerDragMove","onSatValPickerDragEnd","onSatValPickerDragTerminate","onSatValPickerPress","createElement","style","testID","borderRadius","size","sliderSize","hue","saturation","value","onDragStart","onDragMove","onDragEnd","onDragTerminate","onPress","ref","barWidth","barHeight"],"sources":["@wordpress/components/src/color-picker/hsv-color-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Dimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport HuePicker from './hue-picker';\nimport SaturationValuePicker from './saturation-picker';\nimport styles from './style.native.scss';\n\nconst HsvColorPicker = ( props ) => {\n\tconst maxWidth = Dimensions.get( 'window' ).width - 32;\n\tconst satValPickerRef = useRef( null );\n\n\tconst {\n\t\tcontainerStyle = {},\n\t\tcurrentColor,\n\t\thuePickerContainerStyle = {},\n\t\thuePickerBorderRadius = 0,\n\t\thuePickerHue = 0,\n\t\thuePickerBarWidth = maxWidth,\n\t\thuePickerBarHeight = 12,\n\t\thuePickerSliderSize = 24,\n\t\tonHuePickerDragStart,\n\t\tonHuePickerDragMove,\n\t\tonHuePickerDragEnd,\n\t\tonHuePickerDragTerminate,\n\t\tonHuePickerPress,\n\t\tsatValPickerContainerStyle = {},\n\t\tsatValPickerBorderRadius = 0,\n\t\tsatValPickerSize = { width: maxWidth, height: 200 },\n\t\tsatValPickerSliderSize = 24,\n\t\tsatValPickerHue = 0,\n\t\tsatValPickerSaturation = 1,\n\t\tsatValPickerValue = 1,\n\t\tonSatValPickerDragStart,\n\t\tonSatValPickerDragMove,\n\t\tonSatValPickerDragEnd,\n\t\tonSatValPickerDragTerminate,\n\t\tonSatValPickerPress,\n\t} = props;\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles[ 'hsv-container' ], containerStyle ] }\n\t\t\ttestID=\"hsv-color-picker\"\n\t\t>\n\t\t\t<SaturationValuePicker\n\t\t\t\tcontainerStyle={ satValPickerContainerStyle }\n\t\t\t\tcurrentColor={ currentColor }\n\t\t\t\tborderRadius={ satValPickerBorderRadius }\n\t\t\t\tsize={ satValPickerSize }\n\t\t\t\tsliderSize={ satValPickerSliderSize }\n\t\t\t\thue={ satValPickerHue }\n\t\t\t\tsaturation={ satValPickerSaturation }\n\t\t\t\tvalue={ satValPickerValue }\n\t\t\t\tonDragStart={ onSatValPickerDragStart }\n\t\t\t\tonDragMove={ onSatValPickerDragMove }\n\t\t\t\tonDragEnd={ onSatValPickerDragEnd }\n\t\t\t\tonDragTerminate={ onSatValPickerDragTerminate }\n\t\t\t\tonPress={ onSatValPickerPress }\n\t\t\t\tref={ satValPickerRef }\n\t\t\t/>\n\t\t\t<HuePicker\n\t\t\t\tcontainerStyle={ huePickerContainerStyle }\n\t\t\t\tborderRadius={ huePickerBorderRadius }\n\t\t\t\thue={ huePickerHue }\n\t\t\t\tbarWidth={ huePickerBarWidth }\n\t\t\t\tbarHeight={ huePickerBarHeight }\n\t\t\t\tsliderSize={ huePickerSliderSize }\n\t\t\t\tonDragStart={ onHuePickerDragStart }\n\t\t\t\tonDragMove={ onHuePickerDragMove }\n\t\t\t\tonDragEnd={ onHuePickerDragEnd }\n\t\t\t\tonDragTerminate={ onHuePickerDragTerminate }\n\t\t\t\tonPress={ onHuePickerPress }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default HsvColorPicker;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,UAAU,QAAQ,cAAc;;AAE/C;AACA;AACA;AACA,SAASC,MAAM,QAAQ,oBAAoB;;AAE3C;AACA;AACA;AACA,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,qBAAqB,MAAM,qBAAqB;AACvD,OAAOC,MAAM,MAAM,qBAAqB;AAExC,MAAMC,cAAc,GAAKC,KAAK,IAAM;EACnC,MAAMC,QAAQ,GAAGP,UAAU,CAACQ,GAAG,CAAE,QAAS,CAAC,CAACC,KAAK,GAAG,EAAE;EACtD,MAAMC,eAAe,GAAGT,MAAM,CAAE,IAAK,CAAC;EAEtC,MAAM;IACLU,cAAc,GAAG,CAAC,CAAC;IACnBC,YAAY;IACZC,uBAAuB,GAAG,CAAC,CAAC;IAC5BC,qBAAqB,GAAG,CAAC;IACzBC,YAAY,GAAG,CAAC;IAChBC,iBAAiB,GAAGT,QAAQ;IAC5BU,kBAAkB,GAAG,EAAE;IACvBC,mBAAmB,GAAG,EAAE;IACxBC,oBAAoB;IACpBC,mBAAmB;IACnBC,kBAAkB;IAClBC,wBAAwB;IACxBC,gBAAgB;IAChBC,0BAA0B,GAAG,CAAC,CAAC;IAC/BC,wBAAwB,GAAG,CAAC;IAC5BC,gBAAgB,GAAG;MAAEjB,KAAK,EAAEF,QAAQ;MAAEoB,MAAM,EAAE;IAAI,CAAC;IACnDC,sBAAsB,GAAG,EAAE;IAC3BC,eAAe,GAAG,CAAC;IACnBC,sBAAsB,GAAG,CAAC;IAC1BC,iBAAiB,GAAG,CAAC;IACrBC,uBAAuB;IACvBC,sBAAsB;IACtBC,qBAAqB;IACrBC,2BAA2B;IAC3BC;EACD,CAAC,GAAG9B,KAAK;EAET,OACC+B,aAAA,CAACtC,IAAI;IACJuC,KAAK,EAAG,CAAElC,MAAM,CAAE,eAAe,CAAE,EAAEO,cAAc,CAAI;IACvD4B,MAAM,EAAC;EAAkB,GAEzBF,aAAA,CAAClC,qBAAqB;IACrBQ,cAAc,EAAGa,0BAA4B;IAC7CZ,YAAY,EAAGA,YAAc;IAC7B4B,YAAY,EAAGf,wBAA0B;IACzCgB,IAAI,EAAGf,gBAAkB;IACzBgB,UAAU,EAAGd,sBAAwB;IACrCe,GAAG,EAAGd,eAAiB;IACvBe,UAAU,EAAGd,sBAAwB;IACrCe,KAAK,EAAGd,iBAAmB;IAC3Be,WAAW,EAAGd,uBAAyB;IACvCe,UAAU,EAAGd,sBAAwB;IACrCe,SAAS,EAAGd,qBAAuB;IACnCe,eAAe,EAAGd,2BAA6B;IAC/Ce,OAAO,EAAGd,mBAAqB;IAC/Be,GAAG,EAAGzC;EAAiB,CACvB,CAAC,EACF2B,aAAA,CAACnC,SAAS;IACTS,cAAc,EAAGE,uBAAyB;IAC1C2B,YAAY,EAAG1B,qBAAuB;IACtC6B,GAAG,EAAG5B,YAAc;IACpBqC,QAAQ,EAAGpC,iBAAmB;IAC9BqC,SAAS,EAAGpC,kBAAoB;IAChCyB,UAAU,EAAGxB,mBAAqB;IAClC4B,WAAW,EAAG3B,oBAAsB;IACpC4B,UAAU,EAAG3B,mBAAqB;IAClC4B,SAAS,EAAG3B,kBAAoB;IAChC4B,eAAe,EAAG3B,wBAA0B;IAC5C4B,OAAO,EAAG3B;EAAkB,CAC5B,CACI,CAAC;AAET,CAAC;AAED,eAAelB,cAAc"}

package/build-module/color-picker/hue-picker.native.js

@@ -0,0 +1,185 @@
+import { createElement } from "@wordpress/element";
+/**
+ * External dependencies
+ */
+import { Animated, View, PanResponder } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+/**
+ * WordPress dependencies
+ */
+import React, { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+export default class HuePicker extends Component {
+  constructor(props) {
+    super(props);
+    this.hueColors = ['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff00ff', '#ff0000'];
+    this.sliderX = new Animated.Value(props.barHeight * props.hue / 360);
+    this.panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => true,
+      onPanResponderGrant: (evt, gestureState) => {
+        const {
+          onPress
+        } = this.props;
+        this.dragStartValue = this.computeHueValuePress(evt);
+        if (onPress) {
+          onPress({
+            hue: this.computeHueValuePress(evt),
+            nativeEvent: evt.nativeEvent
+          });
+        }
+        this.fireDragEvent('onDragStart', gestureState);
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        this.fireDragEvent('onDragMove', gestureState);
+      },
+      onPanResponderTerminationRequest: () => true,
+      onPanResponderRelease: (evt, gestureState) => {
+        this.fireDragEvent('onDragEnd', gestureState);
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        this.fireDragEvent('onDragTerminate', gestureState);
+      },
+      onShouldBlockNativeResponder: () => true
+    });
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      hue = 0,
+      barWidth = 200,
+      sliderSize = 24
+    } = this.props;
+    const borderWidth = sliderSize / 10;
+    if (prevProps.hue !== hue || prevProps.barWidth !== barWidth) {
+      this.sliderX.setValue((barWidth - sliderSize + borderWidth) * hue / 360);
+    }
+  }
+  normalizeValue(value) {
+    if (value < 0) return 0;
+    if (value > 1) return 1;
+    return value;
+  }
+  getContainerStyle() {
+    const {
+      sliderSize = 24,
+      barHeight = 12,
+      containerStyle = {}
+    } = this.props;
+    const paddingLeft = sliderSize / 2;
+    const paddingTop = sliderSize - barHeight > 0 ? (sliderSize - barHeight) / 2 : 0;
+    return [styles['hsv-container'], containerStyle, {
+      paddingTop,
+      paddingBottom: paddingTop,
+      paddingLeft,
+      paddingRight: paddingLeft
+    }];
+  }
+  computeHueValueDrag(gestureState) {
+    const {
+      dx
+    } = gestureState;
+    const {
+      barWidth = 200
+    } = this.props;
+    const {
+      dragStartValue
+    } = this;
+    const diff = dx / barWidth;
+    const updatedHue = this.normalizeValue(dragStartValue / 360 + diff) * 360;
+    return updatedHue;
+  }
+  computeHueValuePress(event) {
+    const {
+      nativeEvent
+    } = event;
+    const {
+      locationX
+    } = nativeEvent;
+    const {
+      barWidth = 200
+    } = this.props;
+    const updatedHue = this.normalizeValue(locationX / barWidth) * 360;
+    return updatedHue;
+  }
+  fireDragEvent(eventName, gestureState) {
+    const {
+      [eventName]: event
+    } = this.props;
+    if (event) {
+      event({
+        hue: this.computeHueValueDrag(gestureState),
+        gestureState
+      });
+    }
+  }
+  firePressEvent(event) {
+    const {
+      onPress
+    } = this.props;
+    if (onPress) {
+      onPress({
+        hue: this.computeHueValuePress(event),
+        nativeEvent: event.nativeEvent
+      });
+    }
+  }
+  render() {
+    const {
+      hueColors
+    } = this;
+    const {
+      sliderSize = 24,
+      barWidth = 200,
+      barHeight = 12,
+      borderRadius = 0
+    } = this.props;
+    const borderWidth = sliderSize / 10;
+    return createElement(View, {
+      style: this.getContainerStyle(),
+      ...this.panResponder.panHandlers,
+      hitSlop: {
+        top: 10,
+        bottom: 10,
+        left: 0,
+        right: 0
+      }
+    }, createElement(LinearGradient, {
+      colors: hueColors,
+      style: {
+        borderRadius
+      },
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 1,
+        y: 0
+      }
+    }, createElement(View, {
+      style: {
+        width: barWidth,
+        height: barHeight
+      }
+    })), createElement(Animated.View, {
+      pointerEvents: "none",
+      style: [styles['hue-slider'], {
+        width: sliderSize,
+        height: sliderSize,
+        left: (sliderSize - borderWidth) / 2,
+        borderRadius: sliderSize / 2,
+        transform: [{
+          translateX: this.sliderX
+        }]
+      }]
+    }));
+  }
+}
+//# sourceMappingURL=hue-picker.native.js.map

package/build-module/color-picker/hue-picker.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Animated","View","PanResponder","LinearGradient","React","Component","styles","HuePicker","constructor","props","hueColors","sliderX","Value","barHeight","hue","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","evt","gestureState","onPress","dragStartValue","computeHueValuePress","nativeEvent","fireDragEvent","onPanResponderMove","onPanResponderTerminationRequest","onPanResponderRelease","onPanResponderTerminate","onShouldBlockNativeResponder","componentDidUpdate","prevProps","barWidth","sliderSize","borderWidth","setValue","normalizeValue","value","getContainerStyle","containerStyle","paddingLeft","paddingTop","paddingBottom","paddingRight","computeHueValueDrag","dx","diff","updatedHue","event","locationX","eventName","firePressEvent","render","borderRadius","createElement","style","panHandlers","hitSlop","top","bottom","left","right","colors","start","x","y","end","width","height","pointerEvents","transform","translateX"],"sources":["@wordpress/components/src/color-picker/hue-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, View, PanResponder } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\n\n/**\n * WordPress dependencies\n */\nimport React, { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default class HuePicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.hueColors = [\n\t\t\t'#ff0000',\n\t\t\t'#ffff00',\n\t\t\t'#00ff00',\n\t\t\t'#00ffff',\n\t\t\t'#0000ff',\n\t\t\t'#ff00ff',\n\t\t\t'#ff0000',\n\t\t];\n\t\tthis.sliderX = new Animated.Value(\n\t\t\t( props.barHeight * props.hue ) / 360\n\t\t);\n\t\tthis.panResponder = PanResponder.create( {\n\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\t\t\tonPanResponderGrant: ( evt, gestureState ) => {\n\t\t\t\tconst { onPress } = this.props;\n\t\t\t\tthis.dragStartValue = this.computeHueValuePress( evt );\n\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress( {\n\t\t\t\t\t\thue: this.computeHueValuePress( evt ),\n\t\t\t\t\t\tnativeEvent: evt.nativeEvent,\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tthis.fireDragEvent( 'onDragStart', gestureState );\n\t\t\t},\n\t\t\tonPanResponderMove: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragMove', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminationRequest: () => true,\n\t\t\tonPanResponderRelease: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragEnd', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminate: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragTerminate', gestureState );\n\t\t\t},\n\t\t\tonShouldBlockNativeResponder: () => true,\n\t\t} );\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tconst { hue = 0, barWidth = 200, sliderSize = 24 } = this.props;\n\t\tconst borderWidth = sliderSize / 10;\n\t\tif ( prevProps.hue !== hue || prevProps.barWidth !== barWidth ) {\n\t\t\tthis.sliderX.setValue(\n\t\t\t\t( ( barWidth - sliderSize + borderWidth ) * hue ) / 360\n\t\t\t);\n\t\t}\n\t}\n\n\tnormalizeValue( value ) {\n\t\tif ( value < 0 ) return 0;\n\t\tif ( value > 1 ) return 1;\n\t\treturn value;\n\t}\n\n\tgetContainerStyle() {\n\t\tconst {\n\t\t\tsliderSize = 24,\n\t\t\tbarHeight = 12,\n\t\t\tcontainerStyle = {},\n\t\t} = this.props;\n\t\tconst paddingLeft = sliderSize / 2;\n\t\tconst paddingTop =\n\t\t\tsliderSize - barHeight > 0 ? ( sliderSize - barHeight ) / 2 : 0;\n\t\treturn [\n\t\t\tstyles[ 'hsv-container' ],\n\t\t\tcontainerStyle,\n\t\t\t{\n\t\t\t\tpaddingTop,\n\t\t\t\tpaddingBottom: paddingTop,\n\t\t\t\tpaddingLeft,\n\t\t\t\tpaddingRight: paddingLeft,\n\t\t\t},\n\t\t];\n\t}\n\n\tcomputeHueValueDrag( gestureState ) {\n\t\tconst { dx } = gestureState;\n\t\tconst { barWidth = 200 } = this.props;\n\t\tconst { dragStartValue } = this;\n\t\tconst diff = dx / barWidth;\n\t\tconst updatedHue =\n\t\t\tthis.normalizeValue( dragStartValue / 360 + diff ) * 360;\n\t\treturn updatedHue;\n\t}\n\n\tcomputeHueValuePress( event ) {\n\t\tconst { nativeEvent } = event;\n\t\tconst { locationX } = nativeEvent;\n\t\tconst { barWidth = 200 } = this.props;\n\t\tconst updatedHue = this.normalizeValue( locationX / barWidth ) * 360;\n\t\treturn updatedHue;\n\t}\n\n\tfireDragEvent( eventName, gestureState ) {\n\t\tconst { [ eventName ]: event } = this.props;\n\t\tif ( event ) {\n\t\t\tevent( {\n\t\t\t\thue: this.computeHueValueDrag( gestureState ),\n\t\t\t\tgestureState,\n\t\t\t} );\n\t\t}\n\t}\n\n\tfirePressEvent( event ) {\n\t\tconst { onPress } = this.props;\n\t\tif ( onPress ) {\n\t\t\tonPress( {\n\t\t\t\thue: this.computeHueValuePress( event ),\n\t\t\t\tnativeEvent: event.nativeEvent,\n\t\t\t} );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { hueColors } = this;\n\t\tconst {\n\t\t\tsliderSize = 24,\n\t\t\tbarWidth = 200,\n\t\t\tbarHeight = 12,\n\t\t\tborderRadius = 0,\n\t\t} = this.props;\n\t\tconst borderWidth = sliderSize / 10;\n\t\treturn (\n\t\t\t<View\n\t\t\t\tstyle={ this.getContainerStyle() }\n\t\t\t\t{ ...this.panResponder.panHandlers }\n\t\t\t\thitSlop={ {\n\t\t\t\t\ttop: 10,\n\t\t\t\t\tbottom: 10,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<LinearGradient\n\t\t\t\t\tcolors={ hueColors }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tborderRadius,\n\t\t\t\t\t} }\n\t\t\t\t\tstart={ { x: 0, y: 0 } }\n\t\t\t\t\tend={ { x: 1, y: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: barWidth,\n\t\t\t\t\t\t\theight: barHeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</LinearGradient>\n\t\t\t\t<Animated.View\n\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'hue-slider' ],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: sliderSize,\n\t\t\t\t\t\t\theight: sliderSize,\n\t\t\t\t\t\t\tleft: ( sliderSize - borderWidth ) / 2,\n\t\t\t\t\t\t\tborderRadius: sliderSize / 2,\n\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttranslateX: this.sliderX,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t);\n\t}\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,IAAI,EAAEC,YAAY,QAAQ,cAAc;AAC3D,OAAOC,cAAc,MAAM,8BAA8B;;AAEzD;AACA;AACA;AACA,OAAOC,KAAK,IAAIC,SAAS,QAAQ,oBAAoB;;AAErD;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,eAAe,MAAMC,SAAS,SAASF,SAAS,CAAC;EAChDG,WAAWA,CAAEC,KAAK,EAAG;IACpB,KAAK,CAAEA,KAAM,CAAC;IACd,IAAI,CAACC,SAAS,GAAG,CAChB,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACT;IACD,IAAI,CAACC,OAAO,GAAG,IAAIX,QAAQ,CAACY,KAAK,CAC9BH,KAAK,CAACI,SAAS,GAAGJ,KAAK,CAACK,GAAG,GAAK,GACnC,CAAC;IACD,IAAI,CAACC,YAAY,GAAGb,YAAY,CAACc,MAAM,CAAE;MACxCC,4BAA4B,EAAEA,CAAA,KAAM,IAAI;MACxCC,mCAAmC,EAAEA,CAAA,KAAM,IAAI;MAC/CC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;MACvCC,kCAAkC,EAAEA,CAAA,KAAM,IAAI;MAC9CC,mBAAmB,EAAEA,CAAEC,GAAG,EAAEC,YAAY,KAAM;QAC7C,MAAM;UAAEC;QAAQ,CAAC,GAAG,IAAI,CAACf,KAAK;QAC9B,IAAI,CAACgB,cAAc,GAAG,IAAI,CAACC,oBAAoB,CAAEJ,GAAI,CAAC;QAEtD,IAAKE,OAAO,EAAG;UACdA,OAAO,CAAE;YACRV,GAAG,EAAE,IAAI,CAACY,oBAAoB,CAAEJ,GAAI,CAAC;YACrCK,WAAW,EAAEL,GAAG,CAACK;UAClB,CAAE,CAAC;QACJ;QAEA,IAAI,CAACC,aAAa,CAAE,aAAa,EAAEL,YAAa,CAAC;MAClD,CAAC;MACDM,kBAAkB,EAAEA,CAAEP,GAAG,EAAEC,YAAY,KAAM;QAC5C,IAAI,CAACK,aAAa,CAAE,YAAY,EAAEL,YAAa,CAAC;MACjD,CAAC;MACDO,gCAAgC,EAAEA,CAAA,KAAM,IAAI;MAC5CC,qBAAqB,EAAEA,CAAET,GAAG,EAAEC,YAAY,KAAM;QAC/C,IAAI,CAACK,aAAa,CAAE,WAAW,EAAEL,YAAa,CAAC;MAChD,CAAC;MACDS,uBAAuB,EAAEA,CAAEV,GAAG,EAAEC,YAAY,KAAM;QACjD,IAAI,CAACK,aAAa,CAAE,iBAAiB,EAAEL,YAAa,CAAC;MACtD,CAAC;MACDU,4BAA4B,EAAEA,CAAA,KAAM;IACrC,CAAE,CAAC;EACJ;EAEAC,kBAAkBA,CAAEC,SAAS,EAAG;IAC/B,MAAM;MAAErB,GAAG,GAAG,CAAC;MAAEsB,QAAQ,GAAG,GAAG;MAAEC,UAAU,GAAG;IAAG,CAAC,GAAG,IAAI,CAAC5B,KAAK;IAC/D,MAAM6B,WAAW,GAAGD,UAAU,GAAG,EAAE;IACnC,IAAKF,SAAS,CAACrB,GAAG,KAAKA,GAAG,IAAIqB,SAAS,CAACC,QAAQ,KAAKA,QAAQ,EAAG;MAC/D,IAAI,CAACzB,OAAO,CAAC4B,QAAQ,CAClB,CAAEH,QAAQ,GAAGC,UAAU,GAAGC,WAAW,IAAKxB,GAAG,GAAK,GACrD,CAAC;IACF;EACD;EAEA0B,cAAcA,CAAEC,KAAK,EAAG;IACvB,IAAKA,KAAK,GAAG,CAAC,EAAG,OAAO,CAAC;IACzB,IAAKA,KAAK,GAAG,CAAC,EAAG,OAAO,CAAC;IACzB,OAAOA,KAAK;EACb;EAEAC,iBAAiBA,CAAA,EAAG;IACnB,MAAM;MACLL,UAAU,GAAG,EAAE;MACfxB,SAAS,GAAG,EAAE;MACd8B,cAAc,GAAG,CAAC;IACnB,CAAC,GAAG,IAAI,CAAClC,KAAK;IACd,MAAMmC,WAAW,GAAGP,UAAU,GAAG,CAAC;IAClC,MAAMQ,UAAU,GACfR,UAAU,GAAGxB,SAAS,GAAG,CAAC,GAAG,CAAEwB,UAAU,GAAGxB,SAAS,IAAK,CAAC,GAAG,CAAC;IAChE,OAAO,CACNP,MAAM,CAAE,eAAe,CAAE,EACzBqC,cAAc,EACd;MACCE,UAAU;MACVC,aAAa,EAAED,UAAU;MACzBD,WAAW;MACXG,YAAY,EAAEH;IACf,CAAC,CACD;EACF;EAEAI,mBAAmBA,CAAEzB,YAAY,EAAG;IACnC,MAAM;MAAE0B;IAAG,CAAC,GAAG1B,YAAY;IAC3B,MAAM;MAAEa,QAAQ,GAAG;IAAI,CAAC,GAAG,IAAI,CAAC3B,KAAK;IACrC,MAAM;MAAEgB;IAAe,CAAC,GAAG,IAAI;IAC/B,MAAMyB,IAAI,GAAGD,EAAE,GAAGb,QAAQ;IAC1B,MAAMe,UAAU,GACf,IAAI,CAACX,cAAc,CAAEf,cAAc,GAAG,GAAG,GAAGyB,IAAK,CAAC,GAAG,GAAG;IACzD,OAAOC,UAAU;EAClB;EAEAzB,oBAAoBA,CAAE0B,KAAK,EAAG;IAC7B,MAAM;MAAEzB;IAAY,CAAC,GAAGyB,KAAK;IAC7B,MAAM;MAAEC;IAAU,CAAC,GAAG1B,WAAW;IACjC,MAAM;MAAES,QAAQ,GAAG;IAAI,CAAC,GAAG,IAAI,CAAC3B,KAAK;IACrC,MAAM0C,UAAU,GAAG,IAAI,CAACX,cAAc,CAAEa,SAAS,GAAGjB,QAAS,CAAC,GAAG,GAAG;IACpE,OAAOe,UAAU;EAClB;EAEAvB,aAAaA,CAAE0B,SAAS,EAAE/B,YAAY,EAAG;IACxC,MAAM;MAAE,CAAE+B,SAAS,GAAIF;IAAM,CAAC,GAAG,IAAI,CAAC3C,KAAK;IAC3C,IAAK2C,KAAK,EAAG;MACZA,KAAK,CAAE;QACNtC,GAAG,EAAE,IAAI,CAACkC,mBAAmB,CAAEzB,YAAa,CAAC;QAC7CA;MACD,CAAE,CAAC;IACJ;EACD;EAEAgC,cAAcA,CAAEH,KAAK,EAAG;IACvB,MAAM;MAAE5B;IAAQ,CAAC,GAAG,IAAI,CAACf,KAAK;IAC9B,IAAKe,OAAO,EAAG;MACdA,OAAO,CAAE;QACRV,GAAG,EAAE,IAAI,CAACY,oBAAoB,CAAE0B,KAAM,CAAC;QACvCzB,WAAW,EAAEyB,KAAK,CAACzB;MACpB,CAAE,CAAC;IACJ;EACD;EAEA6B,MAAMA,CAAA,EAAG;IACR,MAAM;MAAE9C;IAAU,CAAC,GAAG,IAAI;IAC1B,MAAM;MACL2B,UAAU,GAAG,EAAE;MACfD,QAAQ,GAAG,GAAG;MACdvB,SAAS,GAAG,EAAE;MACd4C,YAAY,GAAG;IAChB,CAAC,GAAG,IAAI,CAAChD,KAAK;IACd,MAAM6B,WAAW,GAAGD,UAAU,GAAG,EAAE;IACnC,OACCqB,aAAA,CAACzD,IAAI;MACJ0D,KAAK,EAAG,IAAI,CAACjB,iBAAiB,CAAC,CAAG;MAAA,GAC7B,IAAI,CAAC3B,YAAY,CAAC6C,WAAW;MAClCC,OAAO,EAAG;QACTC,GAAG,EAAE,EAAE;QACPC,MAAM,EAAE,EAAE;QACVC,IAAI,EAAE,CAAC;QACPC,KAAK,EAAE;MACR;IAAG,GAEHP,aAAA,CAACvD,cAAc;MACd+D,MAAM,EAAGxD,SAAW;MACpBiD,KAAK,EAAG;QACPF;MACD,CAAG;MACHU,KAAK,EAAG;QAAEC,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAG;MACxBC,GAAG,EAAG;QAAEF,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE;IAAG,GAEtBX,aAAA,CAACzD,IAAI;MACJ0D,KAAK,EAAG;QACPY,KAAK,EAAEnC,QAAQ;QACfoC,MAAM,EAAE3D;MACT;IAAG,CACH,CACc,CAAC,EACjB6C,aAAA,CAAC1D,QAAQ,CAACC,IAAI;MACbwE,aAAa,EAAC,MAAM;MACpBd,KAAK,EAAG,CACPrD,MAAM,CAAE,YAAY,CAAE,EACtB;QACCiE,KAAK,EAAElC,UAAU;QACjBmC,MAAM,EAAEnC,UAAU;QAClB2B,IAAI,EAAE,CAAE3B,UAAU,GAAGC,WAAW,IAAK,CAAC;QACtCmB,YAAY,EAAEpB,UAAU,GAAG,CAAC;QAC5BqC,SAAS,EAAE,CACV;UACCC,UAAU,EAAE,IAAI,CAAChE;QAClB,CAAC;MAEH,CAAC;IACC,CACH,CACI,CAAC;EAET;AACD"}

package/build-module/color-picker/index.native.js

@@ -3,7 +3,6 @@ import { createElement, Fragment } from "@wordpress/element";
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
-import HsvColorPicker from 'react-native-hsv-color-picker';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 /**
@@ -18,6 +17,7 @@ import { Icon, check, close } from '@wordpress/icons';
  * Internal dependencies
  */
 import styles from './style.scss';
+import HsvColorPicker from './hsv-color-picker.native.js';
 extend([namesPlugin]);
 function ColorPicker({
   shouldEnableBottomSheetScroll,
@@ -112,6 +112,7 @@ function ColorPicker({
   }
   return createElement(Fragment, null, createElement(HsvColorPicker, {
     huePickerHue: hue,
+    currentColor: currentColor,
     onHuePickerDragMove: updateColor,
     onHuePickerPress: !isBottomSheetContentScrolling && updateColor,
     satValPickerHue: hue,

package/build-module/color-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","Text","TouchableWithoutFeedback","Platform","HsvColorPicker","colord","extend","namesPlugin","useState","useEffect","__","BottomSheet","usePreferredColorSchemeStyle","Icon","check","close","styles","ColorPicker","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","isBottomSheetContentScrolling","setColor","activeColor","isGradientColor","onNavigationBack","onHandleClosingBottomSheet","onBottomSheetClosed","onHandleHardwareButtonPress","bottomLabelText","isIOS","OS","hitSlop","top","bottom","left","right","h","initH","s","initS","v","initV","toHsv","hue","setHue","sat","setSaturation","val","setValue","savedColor","paddingLeft","spacing","height","pickerHeight","borderRadius","picker","pickerPointerSize","pickerPointer","pickerWidth","getWidth","applyButtonStyle","applyButton","applyButtonDark","cancelButtonStyle","cancelButton","cancelButtonDark","colorTextStyle","colorText","colorTextDark","selectColorTextStyle","selectColorText","selectColorTextDark","footerStyle","footer","footerDark","combineToHex","toHex","currentColor","updateColor","saturation","value","undefined","onButtonPress","action","createElement","Fragment","huePickerHue","onHuePickerDragMove","onHuePickerPress","satValPickerHue","satValPickerSaturation","satValPickerValue","onSatValPickerDragMove","onSatValPickerPress","onSatValPickerDragStart","onSatValPickerDragEnd","onHuePickerDragStart","onHuePickerDragEnd","huePickerBarWidth","huePickerBarHeight","satValPickerSize","width","satValPickerSliderSize","satValPickerBorderRadius","huePickerBorderRadius","style","onPress","icon","size","selectable","toUpperCase"],"sources":["@wordpress/components/src/color-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';\nimport HsvColorPicker from 'react-native-hsv-color-picker';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, check, close } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nextend( [ namesPlugin ] );\n\nfunction ColorPicker( {\n\tshouldEnableBottomSheetScroll,\n\tshouldEnableBottomSheetMaxHeight,\n\tisBottomSheetContentScrolling,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tonNavigationBack,\n\tonHandleClosingBottomSheet,\n\tonBottomSheetClosed,\n\tonHandleHardwareButtonPress,\n\tbottomLabelText,\n} ) {\n\tconst isIOS = Platform.OS === 'ios';\n\tconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\tconst {\n\t\th: initH,\n\t\ts: initS,\n\t\tv: initV,\n\t} = ! isGradientColor && activeColor\n\t\t? colord( activeColor ).toHsv()\n\t\t: { h: 0, s: 50, v: 50 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS / 100 );\n\tconst [ val, setValue ] = useState( initV / 100 );\n\tconst [ savedColor ] = useState( activeColor );\n\n\tconst {\n\t\tpaddingLeft: spacing,\n\t\theight: pickerHeight,\n\t\tborderRadius,\n\t} = styles.picker;\n\tconst { height: pickerPointerSize } = styles.pickerPointer;\n\tconst pickerWidth = BottomSheet.getWidth() - 2 * spacing;\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.applyButton,\n\t\tstyles.applyButtonDark\n\t);\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\tconst colorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\tconst selectColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectColorText,\n\t\tstyles.selectColorTextDark\n\t);\n\tconst footerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footer,\n\t\tstyles.footerDark\n\t);\n\n\tconst combineToHex = ( h = hue, s = sat, v = val ) =>\n\t\tcolord( { h, s: s * 100, v: v * 100 } ).toHex();\n\n\tconst currentColor = combineToHex();\n\n\tconst updateColor = ( { hue: h, saturation: s, value: v } ) => {\n\t\tif ( h !== undefined ) setHue( h );\n\t\tif ( s !== undefined ) setSaturation( s );\n\t\tif ( v !== undefined ) setValue( v );\n\t\tsetColor( combineToHex( h, s, v ) );\n\t};\n\n\tuseEffect( () => {\n\t\tshouldEnableBottomSheetMaxHeight( false );\n\t\tonHandleClosingBottomSheet( () => {\n\t\t\tif ( savedColor ) {\n\t\t\t\tsetColor( savedColor );\n\t\t\t}\n\t\t\tif ( onBottomSheetClosed ) {\n\t\t\t\tonBottomSheetClosed();\n\t\t\t}\n\t\t} );\n\t\tif ( onHandleHardwareButtonPress ) {\n\t\t\tonHandleHardwareButtonPress( onButtonPress );\n\t\t}\n\t\t// TODO: Revisit this to discover if there's a good reason for omitting\n\t\t// the hook’s dependencies and running it a single time. Ideally there\n\t\t// may be a way to refactor and obviate the disabled lint rule. If not,\n\t\t// this comment should be replaced by one that explains the reasoning.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tfunction onButtonPress( action ) {\n\t\tonNavigationBack();\n\t\tonHandleClosingBottomSheet( null );\n\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\tsetColor( action === 'apply' ? currentColor : savedColor );\n\t\tif ( onBottomSheetClosed ) {\n\t\t\tonBottomSheetClosed();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<HsvColorPicker\n\t\t\t\thuePickerHue={ hue }\n\t\t\t\tonHuePickerDragMove={ updateColor }\n\t\t\t\tonHuePickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tsatValPickerHue={ hue }\n\t\t\t\tsatValPickerSaturation={ sat }\n\t\t\t\tsatValPickerValue={ val }\n\t\t\t\tonSatValPickerDragMove={ updateColor }\n\t\t\t\tonSatValPickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tonSatValPickerDragStart={ () => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t} }\n\t\t\t\tonSatValPickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragStart={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\thuePickerBarWidth={ pickerWidth }\n\t\t\t\thuePickerBarHeight={ pickerPointerSize / 2 }\n\t\t\t\tsatValPickerSize={ {\n\t\t\t\t\twidth: pickerWidth,\n\t\t\t\t\theight: pickerHeight,\n\t\t\t\t} }\n\t\t\t\tsatValPickerSliderSize={ pickerPointerSize * 2 }\n\t\t\t\tsatValPickerBorderRadius={ borderRadius }\n\t\t\t\thuePickerBorderRadius={ borderRadius }\n\t\t\t/>\n\t\t\t<View style={ footerStyle }>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ cancelButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ bottomLabelText ? (\n\t\t\t\t\t<Text style={ selectColorTextStyle }>\n\t\t\t\t\t\t{ bottomLabelText }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text style={ colorTextStyle } selectable>\n\t\t\t\t\t\t{ currentColor.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ applyButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</View>\n\t\t</>\n\t);\n}\n\nexport { ColorPicker };\n"],"mappings":"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"}
+{"version":3,"names":["View","Text","TouchableWithoutFeedback","Platform","colord","extend","namesPlugin","useState","useEffect","__","BottomSheet","usePreferredColorSchemeStyle","Icon","check","close","styles","HsvColorPicker","ColorPicker","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","isBottomSheetContentScrolling","setColor","activeColor","isGradientColor","onNavigationBack","onHandleClosingBottomSheet","onBottomSheetClosed","onHandleHardwareButtonPress","bottomLabelText","isIOS","OS","hitSlop","top","bottom","left","right","h","initH","s","initS","v","initV","toHsv","hue","setHue","sat","setSaturation","val","setValue","savedColor","paddingLeft","spacing","height","pickerHeight","borderRadius","picker","pickerPointerSize","pickerPointer","pickerWidth","getWidth","applyButtonStyle","applyButton","applyButtonDark","cancelButtonStyle","cancelButton","cancelButtonDark","colorTextStyle","colorText","colorTextDark","selectColorTextStyle","selectColorText","selectColorTextDark","footerStyle","footer","footerDark","combineToHex","toHex","currentColor","updateColor","saturation","value","undefined","onButtonPress","action","createElement","Fragment","huePickerHue","onHuePickerDragMove","onHuePickerPress","satValPickerHue","satValPickerSaturation","satValPickerValue","onSatValPickerDragMove","onSatValPickerPress","onSatValPickerDragStart","onSatValPickerDragEnd","onHuePickerDragStart","onHuePickerDragEnd","huePickerBarWidth","huePickerBarHeight","satValPickerSize","width","satValPickerSliderSize","satValPickerBorderRadius","huePickerBorderRadius","style","onPress","icon","size","selectable","toUpperCase"],"sources":["@wordpress/components/src/color-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, check, close } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport HsvColorPicker from './hsv-color-picker.native.js';\n\nextend( [ namesPlugin ] );\n\nfunction ColorPicker( {\n\tshouldEnableBottomSheetScroll,\n\tshouldEnableBottomSheetMaxHeight,\n\tisBottomSheetContentScrolling,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tonNavigationBack,\n\tonHandleClosingBottomSheet,\n\tonBottomSheetClosed,\n\tonHandleHardwareButtonPress,\n\tbottomLabelText,\n} ) {\n\tconst isIOS = Platform.OS === 'ios';\n\tconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\tconst {\n\t\th: initH,\n\t\ts: initS,\n\t\tv: initV,\n\t} = ! isGradientColor && activeColor\n\t\t? colord( activeColor ).toHsv()\n\t\t: { h: 0, s: 50, v: 50 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS / 100 );\n\tconst [ val, setValue ] = useState( initV / 100 );\n\tconst [ savedColor ] = useState( activeColor );\n\n\tconst {\n\t\tpaddingLeft: spacing,\n\t\theight: pickerHeight,\n\t\tborderRadius,\n\t} = styles.picker;\n\tconst { height: pickerPointerSize } = styles.pickerPointer;\n\tconst pickerWidth = BottomSheet.getWidth() - 2 * spacing;\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.applyButton,\n\t\tstyles.applyButtonDark\n\t);\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\tconst colorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\tconst selectColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectColorText,\n\t\tstyles.selectColorTextDark\n\t);\n\tconst footerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footer,\n\t\tstyles.footerDark\n\t);\n\n\tconst combineToHex = ( h = hue, s = sat, v = val ) =>\n\t\tcolord( { h, s: s * 100, v: v * 100 } ).toHex();\n\n\tconst currentColor = combineToHex();\n\n\tconst updateColor = ( { hue: h, saturation: s, value: v } ) => {\n\t\tif ( h !== undefined ) setHue( h );\n\t\tif ( s !== undefined ) setSaturation( s );\n\t\tif ( v !== undefined ) setValue( v );\n\t\tsetColor( combineToHex( h, s, v ) );\n\t};\n\n\tuseEffect( () => {\n\t\tshouldEnableBottomSheetMaxHeight( false );\n\t\tonHandleClosingBottomSheet( () => {\n\t\t\tif ( savedColor ) {\n\t\t\t\tsetColor( savedColor );\n\t\t\t}\n\t\t\tif ( onBottomSheetClosed ) {\n\t\t\t\tonBottomSheetClosed();\n\t\t\t}\n\t\t} );\n\t\tif ( onHandleHardwareButtonPress ) {\n\t\t\tonHandleHardwareButtonPress( onButtonPress );\n\t\t}\n\t\t// TODO: Revisit this to discover if there's a good reason for omitting\n\t\t// the hook’s dependencies and running it a single time. Ideally there\n\t\t// may be a way to refactor and obviate the disabled lint rule. If not,\n\t\t// this comment should be replaced by one that explains the reasoning.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tfunction onButtonPress( action ) {\n\t\tonNavigationBack();\n\t\tonHandleClosingBottomSheet( null );\n\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\tsetColor( action === 'apply' ? currentColor : savedColor );\n\t\tif ( onBottomSheetClosed ) {\n\t\t\tonBottomSheetClosed();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<HsvColorPicker\n\t\t\t\thuePickerHue={ hue }\n\t\t\t\tcurrentColor={ currentColor }\n\t\t\t\tonHuePickerDragMove={ updateColor }\n\t\t\t\tonHuePickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tsatValPickerHue={ hue }\n\t\t\t\tsatValPickerSaturation={ sat }\n\t\t\t\tsatValPickerValue={ val }\n\t\t\t\tonSatValPickerDragMove={ updateColor }\n\t\t\t\tonSatValPickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tonSatValPickerDragStart={ () => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t} }\n\t\t\t\tonSatValPickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragStart={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\thuePickerBarWidth={ pickerWidth }\n\t\t\t\thuePickerBarHeight={ pickerPointerSize / 2 }\n\t\t\t\tsatValPickerSize={ {\n\t\t\t\t\twidth: pickerWidth,\n\t\t\t\t\theight: pickerHeight,\n\t\t\t\t} }\n\t\t\t\tsatValPickerSliderSize={ pickerPointerSize * 2 }\n\t\t\t\tsatValPickerBorderRadius={ borderRadius }\n\t\t\t\thuePickerBorderRadius={ borderRadius }\n\t\t\t/>\n\t\t\t<View style={ footerStyle }>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ cancelButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ bottomLabelText ? (\n\t\t\t\t\t<Text style={ selectColorTextStyle }>\n\t\t\t\t\t\t{ bottomLabelText }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text style={ colorTextStyle } selectable>\n\t\t\t\t\t\t{ currentColor.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ applyButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</View>\n\t\t</>\n\t);\n}\n\nexport { ColorPicker };\n"],"mappings":"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"}

package/build-module/color-picker/saturation-picker.native.js

@@ -0,0 +1,168 @@
+import { createElement } from "@wordpress/element";
+/**
+ * External dependencies
+ */
+import { View, PanResponder } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import React, { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+export default class SaturationValuePicker extends Component {
+  constructor(props) {
+    super(props);
+    this.panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => true,
+      onPanResponderGrant: (evt, gestureState) => {
+        const {
+          onPress
+        } = this.props;
+        const {
+          saturation,
+          value
+        } = this.computeSatValPress(evt);
+        this.dragStartValue = {
+          saturation,
+          value
+        };
+        if (onPress) {
+          onPress({
+            ...this.computeSatValPress(evt),
+            nativeEvent: evt.nativeEvent
+          });
+        }
+        this.fireDragEvent('onDragStart', gestureState);
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        this.fireDragEvent('onDragMove', gestureState);
+      },
+      onPanResponderTerminationRequest: () => true,
+      onPanResponderRelease: (evt, gestureState) => {
+        this.fireDragEvent('onDragEnd', gestureState);
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        this.fireDragEvent('onDragTerminate', gestureState);
+      },
+      onShouldBlockNativeResponder: () => true
+    });
+  }
+  normalizeValue(value) {
+    if (value < 0) return 0;
+    if (value > 1) return 1;
+    return value;
+  }
+  computeSatValDrag(gestureState) {
+    const {
+      dx,
+      dy
+    } = gestureState;
+    const {
+      size
+    } = this.props;
+    const {
+      saturation,
+      value
+    } = this.dragStartValue;
+    const diffx = dx / size.width;
+    const diffy = dy / size.height;
+    return {
+      saturation: this.normalizeValue(saturation + diffx),
+      value: this.normalizeValue(value - diffy)
+    };
+  }
+  computeSatValPress(event) {
+    const {
+      nativeEvent
+    } = event;
+    const {
+      locationX,
+      locationY
+    } = nativeEvent;
+    const {
+      size
+    } = this.props;
+    return {
+      saturation: this.normalizeValue(locationX / size.width),
+      value: 1 - this.normalizeValue(locationY / size.height)
+    };
+  }
+  fireDragEvent(eventName, gestureState) {
+    const {
+      [eventName]: event
+    } = this.props;
+    if (event) {
+      event({
+        ...this.computeSatValDrag(gestureState),
+        gestureState
+      });
+    }
+  }
+  render() {
+    const {
+      size,
+      sliderSize = 24,
+      hue = 0,
+      value = 1,
+      saturation = 1,
+      containerStyle = {},
+      borderRadius = 0,
+      currentColor
+    } = this.props;
+    return createElement(View, {
+      style: [styles['hsv-container'], containerStyle, {
+        height: size.height + sliderSize,
+        width: size.width + sliderSize
+      }],
+      ...this.panResponder.panHandlers
+    }, createElement(LinearGradient, {
+      style: [styles['gradient-container'], {
+        borderRadius
+      }],
+      colors: ['#fff', colord({
+        h: hue,
+        s: 100,
+        l: 50
+      }).toHex()],
+      start: {
+        x: 0,
+        y: 0.5
+      },
+      end: {
+        x: 1,
+        y: 0.5
+      }
+    }, createElement(LinearGradient, {
+      colors: ['rgba(0, 0, 0, 0)', '#000']
+    }, createElement(View, {
+      style: {
+        height: size.height,
+        width: size.width
+      }
+    }))), createElement(View, {
+      pointerEvents: "none",
+      style: [styles['saturation-slider'], {
+        width: sliderSize,
+        height: sliderSize,
+        borderRadius: sliderSize / 2,
+        borderWidth: sliderSize / 10,
+        backgroundColor: currentColor,
+        transform: [{
+          translateX: size.width * saturation
+        }, {
+          translateY: size.height * (1 - value)
+        }]
+      }]
+    }));
+  }
+}
+//# sourceMappingURL=saturation-picker.native.js.map

package/build-module/color-picker/saturation-picker.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","PanResponder","LinearGradient","colord","React","Component","styles","SaturationValuePicker","constructor","props","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","evt","gestureState","onPress","saturation","value","computeSatValPress","dragStartValue","nativeEvent","fireDragEvent","onPanResponderMove","onPanResponderTerminationRequest","onPanResponderRelease","onPanResponderTerminate","onShouldBlockNativeResponder","normalizeValue","computeSatValDrag","dx","dy","size","diffx","width","diffy","height","event","locationX","locationY","eventName","render","sliderSize","hue","containerStyle","borderRadius","currentColor","createElement","style","panHandlers","colors","h","s","l","toHex","start","x","y","end","pointerEvents","borderWidth","backgroundColor","transform","translateX","translateY"],"sources":["@wordpress/components/src/color-picker/saturation-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, PanResponder } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport React, { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.native.scss';\n\nexport default class SaturationValuePicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\n\t\tthis.panResponder = PanResponder.create( {\n\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\t\t\tonPanResponderGrant: ( evt, gestureState ) => {\n\t\t\t\tconst { onPress } = this.props;\n\t\t\t\tconst { saturation, value } = this.computeSatValPress( evt );\n\t\t\t\tthis.dragStartValue = {\n\t\t\t\t\tsaturation,\n\t\t\t\t\tvalue,\n\t\t\t\t};\n\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress( {\n\t\t\t\t\t\t...this.computeSatValPress( evt ),\n\t\t\t\t\t\tnativeEvent: evt.nativeEvent,\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tthis.fireDragEvent( 'onDragStart', gestureState );\n\t\t\t},\n\t\t\tonPanResponderMove: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragMove', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminationRequest: () => true,\n\t\t\tonPanResponderRelease: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragEnd', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminate: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragTerminate', gestureState );\n\t\t\t},\n\t\t\tonShouldBlockNativeResponder: () => true,\n\t\t} );\n\t}\n\n\tnormalizeValue( value ) {\n\t\tif ( value < 0 ) return 0;\n\t\tif ( value > 1 ) return 1;\n\t\treturn value;\n\t}\n\n\tcomputeSatValDrag( gestureState ) {\n\t\tconst { dx, dy } = gestureState;\n\t\tconst { size } = this.props;\n\t\tconst { saturation, value } = this.dragStartValue;\n\t\tconst diffx = dx / size.width;\n\t\tconst diffy = dy / size.height;\n\t\treturn {\n\t\t\tsaturation: this.normalizeValue( saturation + diffx ),\n\t\t\tvalue: this.normalizeValue( value - diffy ),\n\t\t};\n\t}\n\n\tcomputeSatValPress( event ) {\n\t\tconst { nativeEvent } = event;\n\t\tconst { locationX, locationY } = nativeEvent;\n\t\tconst { size } = this.props;\n\t\treturn {\n\t\t\tsaturation: this.normalizeValue( locationX / size.width ),\n\t\t\tvalue: 1 - this.normalizeValue( locationY / size.height ),\n\t\t};\n\t}\n\n\tfireDragEvent( eventName, gestureState ) {\n\t\tconst { [ eventName ]: event } = this.props;\n\t\tif ( event ) {\n\t\t\tevent( {\n\t\t\t\t...this.computeSatValDrag( gestureState ),\n\t\t\t\tgestureState,\n\t\t\t} );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tsize,\n\t\t\tsliderSize = 24,\n\t\t\thue = 0,\n\t\t\tvalue = 1,\n\t\t\tsaturation = 1,\n\t\t\tcontainerStyle = {},\n\t\t\tborderRadius = 0,\n\t\t\tcurrentColor,\n\t\t} = this.props;\n\n\t\treturn (\n\t\t\t<View\n\t\t\t\tstyle={ [\n\t\t\t\t\tstyles[ 'hsv-container' ],\n\t\t\t\t\tcontainerStyle,\n\t\t\t\t\t{\n\t\t\t\t\t\theight: size.height + sliderSize,\n\t\t\t\t\t\twidth: size.width + sliderSize,\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t\t{ ...this.panResponder.panHandlers }\n\t\t\t>\n\t\t\t\t<LinearGradient\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'gradient-container' ],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tborderRadius,\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tcolors={ [\n\t\t\t\t\t\t'#fff',\n\t\t\t\t\t\tcolord( { h: hue, s: 100, l: 50 } ).toHex(),\n\t\t\t\t\t] }\n\t\t\t\t\tstart={ { x: 0, y: 0.5 } }\n\t\t\t\t\tend={ { x: 1, y: 0.5 } }\n\t\t\t\t>\n\t\t\t\t\t<LinearGradient colors={ [ 'rgba(0, 0, 0, 0)', '#000' ] }>\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: size.height,\n\t\t\t\t\t\t\t\twidth: size.width,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</LinearGradient>\n\t\t\t\t</LinearGradient>\n\t\t\t\t<View\n\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'saturation-slider' ],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: sliderSize,\n\t\t\t\t\t\t\theight: sliderSize,\n\t\t\t\t\t\t\tborderRadius: sliderSize / 2,\n\t\t\t\t\t\t\tborderWidth: sliderSize / 10,\n\t\t\t\t\t\t\tbackgroundColor: currentColor,\n\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t{ translateX: size.width * saturation },\n\t\t\t\t\t\t\t\t{ translateY: size.height * ( 1 - value ) },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t);\n\t}\n}\n"],"mappings":"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"}

package/build-module/item-group/item/component.js

@@ -29,7 +29,6 @@ function UnconnectedItem(props, forwardedRef) {
  * `Item` is used in combination with `ItemGroup` to display a list of items
  * grouped and styled together.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalItemGroup as ItemGroup,

package/build-module/item-group/item/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["useItem","contextConnect","View","UnconnectedItem","props","forwardedRef","role","wrapperClassName","otherProps","createElement","className","ref","Item"],"sources":["@wordpress/components/src/item-group/item/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ItemProps } from '../types';\nimport { useItem } from './hook';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\n\nfunction UnconnectedItem(\n\tprops: WordPressComponentProps< ItemProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { role, wrapperClassName, ...otherProps } = useItem( props );\n\n\treturn (\n\t\t<div role={ role } className={ wrapperClassName }>\n\t\t\t<View { ...otherProps } ref={ forwardedRef } />\n\t\t</div>\n\t);\n}\n\n/**\n * `Item` is used in combination with `ItemGroup` to display a list of items\n * grouped and styled together.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalItemGroup as ItemGroup,\n *   __experimentalItem as Item,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ItemGroup>\n *       <Item>Code</Item>\n *       <Item>is</Item>\n *       <Item>Poetry</Item>\n *     </ItemGroup>\n *   );\n * }\n * ```\n */\nexport const Item = contextConnect( UnconnectedItem, 'Item' );\n\nexport default Item;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,eAAeA,CACvBC,KAAkD,EAClDC,YAAiC,EAChC;EACD,MAAM;IAAEC,IAAI;IAAEC,gBAAgB;IAAE,GAAGC;EAAW,CAAC,GAAGR,OAAO,CAAEI,KAAM,CAAC;EAElE,OACCK,aAAA;IAAKH,IAAI,EAAGA,IAAM;IAACI,SAAS,EAAGH;EAAkB,GAChDE,aAAA,CAACP,IAAI;IAAA,GAAMM,UAAU;IAAGG,GAAG,EAAGN;EAAc,CAAE,CAC1C,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMO,IAAI,GAAGX,cAAc,CAAEE,eAAe,EAAE,MAAO,CAAC;AAE7D,eAAeS,IAAI"}
+{"version":3,"names":["useItem","contextConnect","View","UnconnectedItem","props","forwardedRef","role","wrapperClassName","otherProps","createElement","className","ref","Item"],"sources":["@wordpress/components/src/item-group/item/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ItemProps } from '../types';\nimport { useItem } from './hook';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\n\nfunction UnconnectedItem(\n\tprops: WordPressComponentProps< ItemProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { role, wrapperClassName, ...otherProps } = useItem( props );\n\n\treturn (\n\t\t<div role={ role } className={ wrapperClassName }>\n\t\t\t<View { ...otherProps } ref={ forwardedRef } />\n\t\t</div>\n\t);\n}\n\n/**\n * `Item` is used in combination with `ItemGroup` to display a list of items\n * grouped and styled together.\n *\n * ```jsx\n * import {\n *   __experimentalItemGroup as ItemGroup,\n *   __experimentalItem as Item,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ItemGroup>\n *       <Item>Code</Item>\n *       <Item>is</Item>\n *       <Item>Poetry</Item>\n *     </ItemGroup>\n *   );\n * }\n * ```\n */\nexport const Item = contextConnect( UnconnectedItem, 'Item' );\n\nexport default Item;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,eAAeA,CACvBC,KAAkD,EAClDC,YAAiC,EAChC;EACD,MAAM;IAAEC,IAAI;IAAEC,gBAAgB;IAAE,GAAGC;EAAW,CAAC,GAAGR,OAAO,CAAEI,KAAM,CAAC;EAElE,OACCK,aAAA;IAAKH,IAAI,EAAGA,IAAM;IAACI,SAAS,EAAGH;EAAkB,GAChDE,aAAA,CAACP,IAAI;IAAA,GAAMM,UAAU;IAAGG,GAAG,EAAGN;EAAc,CAAE,CAC1C,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMO,IAAI,GAAGX,cAAc,CAAEE,eAAe,EAAE,MAAO,CAAC;AAE7D,eAAeS,IAAI"}