@sanity/color-input 2.34.1-canary.0 → 2.34.2-empty-template-cli.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/ColorInput.js CHANGED
@@ -4,21 +4,34 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+
7
8
  var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
9
+
8
10
  var _react = _interopRequireWildcard(require("react"));
11
+
9
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
+
10
14
  var _formBuilder = require("part:@sanity/form-builder");
15
+
11
16
  var _ui = require("@sanity/ui");
17
+
12
18
  var _icons = require("@sanity/icons");
19
+
13
20
  var _components = require("@sanity/base/components");
21
+
14
22
  var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
23
+
15
24
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
16
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
+
17
28
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
+
18
30
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
31
+
19
32
  var set = _formBuilder.patches.set,
20
- unset = _formBuilder.patches.unset,
21
- setIfMissing = _formBuilder.patches.setIfMissing;
33
+ unset = _formBuilder.patches.unset,
34
+ setIfMissing = _formBuilder.patches.setIfMissing;
22
35
  var DEFAULT_COLOR = {
23
36
  hex: '#24a3e3',
24
37
  hsl: {
@@ -41,14 +54,17 @@ var DEFAULT_COLOR = {
41
54
  },
42
55
  source: 'hex'
43
56
  };
57
+
44
58
  class ColorInput extends _react.PureComponent {
45
59
  constructor() {
46
60
  super(...arguments);
61
+
47
62
  _defineProperty(this, "focusRef", /*#__PURE__*/_react.default.createRef());
63
+
48
64
  _defineProperty(this, "emitSetColor", nextColor => {
49
65
  var _this$props = this.props,
50
- onChange = _this$props.onChange,
51
- type = _this$props.type;
66
+ onChange = _this$props.onChange,
67
+ type = _this$props.type;
52
68
  var fieldPatches = type.fields.filter(field => field.name in nextColor).map(field => {
53
69
  var nextFieldValue = nextColor[field.name];
54
70
  var isObject = field.type.jsonType === 'object';
@@ -60,26 +76,31 @@ class ColorInput extends _react.PureComponent {
60
76
  _type: type.name
61
77
  }), set(type.name, ['_type']), set(nextColor.rgb.a, ['alpha']), ...fieldPatches]));
62
78
  });
79
+
63
80
  _defineProperty(this, "handleColorChange", (0, _debounce2.default)(this.emitSetColor, 100));
81
+
64
82
  _defineProperty(this, "handleCreateColor", () => {
65
83
  this.emitSetColor(DEFAULT_COLOR);
66
84
  });
85
+
67
86
  _defineProperty(this, "handleUnset", () => {
68
87
  this.props.onChange(_formBuilder.PatchEvent.from(unset()));
69
88
  });
70
89
  }
90
+
71
91
  focus() {
72
92
  // todo: make the ColorPicker component support .focus()
73
93
  if (this.focusRef.current && this.focusRef.current.focus) {
74
94
  this.focusRef.current.focus();
75
95
  }
76
96
  }
97
+
77
98
  render() {
78
99
  var _this$props2 = this.props,
79
- type = _this$props2.type,
80
- readOnly = _this$props2.readOnly,
81
- value = _this$props2.value,
82
- level = _this$props2.level;
100
+ type = _this$props2.type,
101
+ readOnly = _this$props2.readOnly,
102
+ value = _this$props2.value,
103
+ level = _this$props2.level;
83
104
  return /*#__PURE__*/_react.default.createElement(_components.FormField, {
84
105
  title: type.title,
85
106
  description: type.description,
@@ -100,8 +121,11 @@ class ColorInput extends _react.PureComponent {
100
121
  onClick: this.handleCreateColor
101
122
  }));
102
123
  }
124
+
103
125
  }
126
+
104
127
  exports.default = ColorInput;
128
+
105
129
  _defineProperty(ColorInput, "propTypes", {
106
130
  type: _propTypes.default.shape({
107
131
  name: _propTypes.default.string,
@@ -4,29 +4,41 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+
7
8
  var _react = _interopRequireDefault(require("react"));
9
+
8
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
9
12
  var _common = require("react-color/lib/components/common");
13
+
10
14
  var _ui = require("@sanity/ui");
15
+
11
16
  var _icons = require("@sanity/icons");
17
+
12
18
  var _styledComponents = _interopRequireDefault(require("styled-components"));
19
+
13
20
  var _ColorPickerFields = require("./ColorPickerFields");
21
+
14
22
  var _templateObject, _templateObject2;
23
+
15
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
+
16
26
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
27
+
17
28
  var ColorBox = (0, _styledComponents.default)(_ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
18
29
  var ReadOnlyContainer = (0, _styledComponents.default)(_ui.Flex)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-top: 6rem;\n background-color: var(--card-bg-color);\n position: relative;\n width: 100%;\n"])));
30
+
19
31
  var ColorPicker = _ref => {
20
32
  var width = _ref.width,
21
- rgb = _ref.rgb,
22
- hex = _ref.hex,
23
- hsv = _ref.hsv,
24
- hsl = _ref.hsl,
25
- onChange = _ref.onChange,
26
- onUnset = _ref.onUnset,
27
- disableAlpha = _ref.disableAlpha,
28
- renderers = _ref.renderers,
29
- readOnly = _ref.readOnly;
33
+ rgb = _ref.rgb,
34
+ hex = _ref.hex,
35
+ hsv = _ref.hsv,
36
+ hsl = _ref.hsl,
37
+ onChange = _ref.onChange,
38
+ onUnset = _ref.onUnset,
39
+ disableAlpha = _ref.disableAlpha,
40
+ renderers = _ref.renderers,
41
+ readOnly = _ref.readOnly;
30
42
  return /*#__PURE__*/_react.default.createElement("div", {
31
43
  style: {
32
44
  width
@@ -125,6 +137,7 @@ var ColorPicker = _ref => {
125
137
  tone: "critical"
126
138
  })))))));
127
139
  };
140
+
128
141
  ColorPicker.propTypes = {
129
142
  width: _propTypes.default.string,
130
143
  hex: _propTypes.default.string,
@@ -140,5 +153,7 @@ ColorPicker.propTypes = {
140
153
  ColorPicker.defaultProps = {
141
154
  disableAlpha: false
142
155
  };
156
+
143
157
  var _default = (0, _common.ColorWrap)(ColorPicker);
158
+
144
159
  exports.default = _default;
@@ -4,21 +4,31 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = exports.ColorPickerFields = void 0;
7
+
7
8
  var _react = _interopRequireDefault(require("react"));
9
+
8
10
  var color = _interopRequireWildcard(require("react-color/lib/helpers/color"));
11
+
9
12
  var _common = require("react-color/lib/components/common");
13
+
10
14
  var _ui = require("@sanity/ui");
15
+
11
16
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
+
12
18
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
+
13
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+
14
22
  var ColorPickerFields = _ref => {
15
23
  var onChange = _ref.onChange,
16
- rgb = _ref.rgb,
17
- hsl = _ref.hsl,
18
- hex = _ref.hex,
19
- disableAlpha = _ref.disableAlpha;
24
+ rgb = _ref.rgb,
25
+ hsl = _ref.hsl,
26
+ hex = _ref.hex,
27
+ disableAlpha = _ref.disableAlpha;
28
+
20
29
  var _useTheme = (0, _ui.useTheme)(),
21
- sanity = _useTheme.sanity;
30
+ sanity = _useTheme.sanity;
31
+
22
32
  var inputStyles = {
23
33
  input: {
24
34
  width: '80%',
@@ -40,6 +50,7 @@ var ColorPickerFields = _ref => {
40
50
  textTransform: 'capitalize'
41
51
  }
42
52
  };
53
+
43
54
  var handleChange = (data, e) => {
44
55
  if (data.hex && color.isValidHex(data.hex)) {
45
56
  onChange({
@@ -60,6 +71,7 @@ var ColorPickerFields = _ref => {
60
71
  } else if (data.a > 100) {
61
72
  data.a = 100;
62
73
  }
74
+
63
75
  data.a /= 100;
64
76
  onChange({
65
77
  h: hsl.h,
@@ -70,6 +82,7 @@ var ColorPickerFields = _ref => {
70
82
  }, e);
71
83
  }
72
84
  };
85
+
73
86
  return /*#__PURE__*/_react.default.createElement(_ui.Flex, null, /*#__PURE__*/_react.default.createElement(_ui.Box, {
74
87
  flex: 2,
75
88
  marginRight: 1
@@ -119,6 +132,7 @@ var ColorPickerFields = _ref => {
119
132
  dragMax: "100"
120
133
  })));
121
134
  };
135
+
122
136
  exports.ColorPickerFields = ColorPickerFields;
123
137
  var _default = ColorPickerFields;
124
138
  exports.default = _default;
@@ -4,12 +4,16 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+
7
8
  var _react = _interopRequireDefault(require("react"));
9
+
8
10
  var _ColorInput = _interopRequireDefault(require("../ColorInput"));
11
+
9
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
- /* eslint-disable react/display-name */
11
13
 
14
+ /* eslint-disable react/display-name */
12
15
  var round = val => Math.round(val * 100);
16
+
13
17
  var _default = {
14
18
  name: 'color',
15
19
  type: 'object',
@@ -43,15 +47,18 @@ var _default = {
43
47
  hex: 'hex',
44
48
  hsl: 'hsl'
45
49
  },
50
+
46
51
  prepare(_ref) {
47
52
  var title = _ref.title,
48
- hex = _ref.hex,
49
- hsl = _ref.hsl,
50
- alpha = _ref.alpha;
53
+ hex = _ref.hex,
54
+ hsl = _ref.hsl,
55
+ alpha = _ref.alpha;
51
56
  var subtitle = hex || 'No color set';
57
+
52
58
  if (hsl) {
53
59
  subtitle = "H:".concat(round(hsl.l), " S:").concat(round(hsl.l), " L:").concat(round(hsl.l), " A:").concat(round(alpha));
54
60
  }
61
+
55
62
  return {
56
63
  title: title,
57
64
  subtitle: subtitle,
@@ -68,6 +75,7 @@ var _default = {
68
75
  })
69
76
  };
70
77
  }
78
+
71
79
  }
72
80
  };
73
81
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/color-input",
3
- "version": "2.34.1-canary.0+b3e58b8893",
3
+ "version": "2.34.2-empty-template-cli.0+184a9350e5",
4
4
  "description": "Color input",
5
5
  "main": "lib/index.js",
6
6
  "author": "Sanity.io <hello@sanity.io>",
@@ -24,8 +24,8 @@
24
24
  "react-color": "^2.13.8"
25
25
  },
26
26
  "devDependencies": {
27
- "@sanity/base": "2.34.1-canary.0+b3e58b8893",
28
- "@sanity/types": "2.34.1-canary.0+b3e58b8893",
27
+ "@sanity/base": "2.34.2-empty-template-cli.0+184a9350e5",
28
+ "@sanity/types": "2.34.2-empty-template-cli.0+184a9350e5",
29
29
  "react": "17.0.1",
30
30
  "rimraf": "^2.7.1"
31
31
  },
@@ -48,5 +48,5 @@
48
48
  "publishConfig": {
49
49
  "access": "public"
50
50
  },
51
- "gitHead": "b3e58b8893c9573844279488896df2313df914f1"
51
+ "gitHead": "184a9350e50aa05877a3b10e052ce4e2ca743ef0"
52
52
  }